\r\n
\r\n );\r\n }\r\n}\r\n","import React, { Component } from 'react';\r\nimport { updateFilters } from '../../actions';\r\nimport { connect } from 'react-redux';\r\nimport { push } from 'react-router-redux'\r\n\r\nclass ChoosePath extends Component {\r\n updateState(obj) {\r\n const { store } = this.context;\r\n store.dispatch(updateFilters(obj));\r\n }\r\n\r\n handleClick(path) {\r\n const { dispatch } = this.props;\r\n dispatch(push(path));\r\n }\r\n\r\n render() {\r\n return (\r\n {link}
\r\n\r\n \r\n \r\n Home\r\n \r\n
\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default connect()(ChoosePath);\r\n","import React from 'react';\r\nimport { Link } from 'react-router-dom';\r\n\r\nclass ReplacementRotor extends React.Component {\r\n render() {\r\n return (\r\n Do you know your hub assembly number?
\r\n\r\n \r\n YesI know the hub assembly number.\r\n \r\n
\r\n \r\n \r\n NoHelp me find the assembly number.\r\n \r\n
\r\n \r\n \r\n NoProceed without the number.\r\n \r\n
\r\n \r\n \r\n YesI want to compare two assemblies.\r\n \r\n
\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default ReplacementRotor;\r\n","import React, { Component } from 'react';\r\n\r\nexport default class extends Component {\r\n\trender() {\r\n\t\tlet {isFetching } = this.props\r\n\t\tif (isFetching) {\r\n\t\t\treturn (\r\n\t\t\t\tDo you know your rotor number?
\r\n\r\n \r\n YesI know the rotor number\r\n \r\n
\r\n \r\n \r\n NoProceed without the number\r\n \r\n
\r\n \r\n\t\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t
\r\n\t\t\t)\r\n\t\t}\r\n\t\t\treturn ();\r\n\t}\r\n}\r\n","import React, {Component} from 'react'\r\nimport Spinner from './spinner'\r\n\r\nexport default class Waiting extends Component {\r\n\trender() {\r\n\t\treturn (\r\n\t\t\t\r\n\t\t\t\t
\r\n\t\t)\r\n\t}\r\n}\r\n","import { ApplicationInsights } from '@microsoft/applicationinsights-web'\r\nimport { ReactPlugin, withAITracking } from '@microsoft/applicationinsights-react-js'\r\nimport { createBrowserHistory } from 'history';\r\nimport * as constants from \"./config/constants\";\r\n\r\nconst reactPlugin = new ReactPlugin();\r\nconst browserHistory = createBrowserHistory({ basename: '' });\r\nconst ai = new ApplicationInsights({\r\n config: {\r\n instrumentationKey: constants.APP_INSIGHT_KEY,\r\n extensions: [reactPlugin],\r\n extensionConfig: {\r\n [reactPlugin.identifier]: { history: browserHistory }\r\n }\r\n }\r\n})\r\nai.loadAppInsights()\r\n\r\nexport default (Component) => withAITracking(reactPlugin, Component)\r\nexport const appInsights = ai.appInsights","import React, { Component } from 'react';\r\nimport { connect } from 'react-redux';\r\nimport Spinner from '../../components/global/spinner';\r\nimport { fetchFilters } from '../../actions/filters';\r\n\r\nlet FILTERIDX;\r\nconst NEXT_OTHER_NOT_LISTED_FILTER_PATH = '/hub/abs-offset-inches';\r\n\r\nclass Result extends Component {\r\n render() {\r\n var { result, active, onClick } = this.props;\r\n var className = 'general-button truck-make';\r\n return (\r\n Receiving results
\r\n\t\t\t\t\r\n \r\n {result.Name}\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nclass TruckMakes extends Component {\r\n componentDidMount() {\r\n const { dispatch, app } = this.props;\r\n FILTERIDX =\r\n app.categories.findIndex((a) => a.QueryParameterName === 'tmake') !==\r\n undefined\r\n ? app.categories.findIndex((a) => a.QueryParameterName === 'tmake')\r\n : 4;\r\n\r\n dispatch(fetchFilters(FILTERIDX, app));\r\n }\r\n\r\n render() {\r\n const { app, setFilter, setActive } = this.props;\r\n const {\r\n filterState: { tcomp, brkty },\r\n } = app;\r\n\r\n if (app.isFetching || app.filterResults.length < 1) {\r\n return \r\n
\r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => state;\r\nexport default connect(mapStateToProps)(TruckMakes);\r\n","import React, { Component } from 'react';\nimport { connect } from 'react-redux';\nimport Spinner from '../../components/global/spinner';\nimport { fetchFilters } from '../../actions/filters';\nimport { TRUCK, DRUM } from '../../config/constants';\n\nlet FILTERIDX;\nconst NEXT_PATH = '/hub/hub-mounting-system';\n//const NEXT_PATH = '/hub/wheel-stud-standout';\n\nconst NEXT_GAWR_FILTER_PATH = '/hub/gawr';\nconst NEXT_RESULT_PATH = '/hub/results';\n\nclass Result extends Component {\n render() {\n const { result, active, onClick } = this.props;\n const unitized = result.AftermarketAxle === 'Unitized';\n return (\n Choose the Truck Make
\r\n\r\n {app.filterResults.map((result, index) => {\r\n \r\n var boundClick = setFilter.bind(\r\n this,\r\n FILTERIDX,\r\n { tmake: result.Id },\r\n app\r\n );\r\n \r\n var boundActive = setActive.bind(\r\n this,\r\n FILTERIDX,\r\n result.Id,\r\n 'general-button truck-make'\r\n );\r\n return (\r\n
\r\n \r\n \r\n Other/Not Listed\r\n \r\n
\r\n )}\r\n \n \n
\n );\n }\n}\n\nclass AxelType extends Component {\n componentDidMount() {\n const { dispatch, app } = this.props;\n FILTERIDX =\n app.categories.findIndex((a) => a.QueryParameterName === 'aaxna') !==\n undefined\n ? app.categories.findIndex((a) => a.QueryParameterName === 'aaxna')\n : 4;\n dispatch(fetchFilters(FILTERIDX, app));\n }\n\n render() {\n const { app, setFilter, setActive } = this.props;\n const { brkty, tcomp, tmake } = app.filterState;\n const otherNotListedPath = tcomp === TRUCK && tmake === null;\n\n if (app.isFetching || app.filterResults.length < 1) {\n return \n
\n );\n }\n}\n\nconst mapStateToProps = (state) => state;\nexport default connect(mapStateToProps)(AxelType);\n","import React, { Component } from 'react';\r\nimport { connect } from 'react-redux';\r\nimport Spinner from '../../components/global/spinner';\r\nimport { fetchFilters } from '../../actions/filters';\r\n\r\nlet FILTERIDX;\r\n//const NEXT_PATH = '/hub/wheel-stud-standout';\r\nconst NEXT_PATH = '/hub/barrel-length';\r\n\r\n\r\nclass Result extends Component {\r\n render() {\r\n var { result, active, onClick } = this.props;\r\n var className = 'general-button truck-make';\r\n return (\r\n Choose the Hub by Axle Type or Bearing Number:
\n {app.filterResults.map((result, index) => {\n if (\n (result.AftermarketAxleId === 10 ||\n result.AftermarketAxleId === 11) &&\n brkty === DRUM\n ) {\n var boundClick = setFilter.bind(\n this,\n FILTERIDX,\n { aaxna: result.Id || result.AftermarketAxleId },\n app\n );\n }\n //Unitized\n else if (result.AftermarketAxleId === 82) {\n var boundClick = setFilter.bind(\n this,\n FILTERIDX,\n { aaxna: result.Id || result.AftermarketAxleId },\n (app.NEXT_FILTER_PATH = NEXT_RESULT_PATH)\n );\n } //Navistar --> F08 Front -->Hub-mounting\n else if (result.AftermarketAxleId === 79) { \n var boundClick = setFilter.bind(\n this,\n FILTERIDX,\n { aaxna: result.Id || result.AftermarketAxleId },\n (app.NEXT_FILTER_PATH = NEXT_PATH)\n );\n } //190 Drive -->Hub-mounting\n else if (result.AftermarketAxleId === 40) {\n var boundClick = setFilter.bind(\n this,\n FILTERIDX,\n { aaxna: result.Id || result.AftermarketAxleId },\n (app.NEXT_FILTER_PATH = NEXT_PATH)\n );\n } //L Drive -->Hub-mounting\n else if (result.AftermarketAxleId === 19) {\n var boundClick = setFilter.bind(\n this,\n FILTERIDX,\n { aaxna: result.Id || result.AftermarketAxleId },\n (app.NEXT_FILTER_PATH = NEXT_PATH)\n );\n } else if (otherNotListedPath) {\n var boundClick = setFilter.bind(\n this,\n FILTERIDX,\n { aaxna: result.Id || result.AftermarketAxleId },\n (app.NEXT_FILTER_PATH = NEXT_PATH)\n );\n }else if (tcomp === 3) { \n var boundClick = setFilter.bind(\n this,\n FILTERIDX,\n { aaxna: result.Id || result.AftermarketAxleId },\n (app.NEXT_FILTER_PATH = NEXT_PATH)\n );\n } \n else {\n var boundClick = setFilter.bind(\n this,\n FILTERIDX,\n { aaxna: result.Id || result.AftermarketAxleId },\n (app.NEXT_FILTER_PATH = NEXT_GAWR_FILTER_PATH)\n );\n }\n var boundActive = setActive.bind(\n this,\n FILTERIDX,\n result.Id || result.AftermarketAxleId\n );\n return (\n\r\n \r\n {result.Name}\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nclass HubMountingSystem extends Component {\r\n componentDidMount() {\r\n const { dispatch, app } = this.props;\r\n FILTERIDX =\r\n app.categories.findIndex((a) => a.QueryParameterName === 'hamnt') !==\r\n undefined\r\n ? app.categories.findIndex((a) => a.QueryParameterName === 'hamnt')\r\n : 10;\r\n\r\n dispatch(fetchFilters(FILTERIDX, app));\r\n }\r\n\r\n render() {\r\n const { app, setFilter, setActive } = this.props;\r\n if (app.isFetching || app.filterResults.length < 1) {\r\n return \r\n
\r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => state;\r\nexport default connect(mapStateToProps)(HubMountingSystem);\r\n\r\n","import React, { Component } from 'react';\r\nimport { connect } from 'react-redux';\r\nimport Spinner from '../../components/global/spinner';\r\nimport { fetchFilters } from '../../actions/filters';\r\n\r\nlet FILTERIDX;\r\nconst HUB_PILOT_FILTER_PATH = '/hub/hub-pilot-type';\r\nconst WHEEL_STUD_STANDOUT_FILTER_PATH = '/hub/wheel-stud-standout';\r\n\r\nclass Result extends Component {\r\n render() {\r\n var { result, active, onClick } = this.props;\r\n return (\r\n Hub Mounting System
\r\n {/*Wheel Mounting System
*/}\r\n\r\n {app.filterResults.map((result, index) => {\r\n \r\n if ( result.Id === 4 ||result.Id === 5\r\n ){ \r\n var boundClick = setFilter.bind(\r\n this,\r\n FILTERIDX,\r\n { hamnt: result.Id },\r\n (app.NEXT_FILTER_PATH = NEXT_PATH)\r\n );\r\n }\r\n else{\r\n var boundClick = setFilter.bind(\r\n this,\r\n FILTERIDX,\r\n { hamnt: result.Id },\r\n app\r\n );\r\n }\r\n var boundActive = setActive.bind(\r\n this,\r\n FILTERIDX,\r\n result.Id,\r\n 'general-button truck-make'\r\n );\r\n return (\r\n
\r\n \r\n \r\n {result.Name}\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nclass WheelPilotSystem extends Component {\r\n componentDidMount() {\r\n const { dispatch, app } = this.props;\r\n FILTERIDX =\r\n app.categories.findIndex((a) => a.QueryParameterName === 'whlps') !==\r\n undefined\r\n ? app.categories.findIndex((a) => a.QueryParameterName === 'whlps')\r\n : 5;\r\n\r\n dispatch(fetchFilters(FILTERIDX, app));\r\n }\r\n\r\n render() {\r\n const { app, setFilter, setActive } = this.props;\r\n if (app.isFetching || app.filterResults.length < 1) {\r\n return \r\n
\r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => state;\r\nexport default connect(mapStateToProps)(WheelPilotSystem);\r\n","import React, { Component } from 'react';\r\nimport { connect } from 'react-redux';\r\nimport Spinner from '../../components/global/spinner';\r\nimport { fetchFilters } from '../../actions/filters';\r\n\r\nlet FILTERIDX;\r\n\r\nclass Result extends Component {\r\n render() {\r\n var { result, active, onClick } = this.props;\r\n return (\r\n Wheel Pilot System
\r\n\r\n {app.filterResults.map((result, index) => {\r\n var boundClick =\r\n result.Id === 2\r\n ? setFilter.bind(\r\n this,\r\n FILTERIDX,\r\n { whlps: result.Id },\r\n (app.NEXT_FILTER_PATH = HUB_PILOT_FILTER_PATH)\r\n )\r\n : setFilter.bind(\r\n this,\r\n FILTERIDX,\r\n { whlps: result.Id },\r\n (app.NEXT_FILTER_PATH = WHEEL_STUD_STANDOUT_FILTER_PATH)\r\n );\r\n\r\n var boundActive = setActive.bind(\r\n this,\r\n FILTERIDX,\r\n result.Id,\r\n 'general-button truck-make'\r\n );\r\n return (\r\n
\r\n \r\n
\r\n \r\n
\r\n Hub Pilot Wheel Mounting
\r\n\r\n Also known as Uni-Mount-10 ™. Uses the pilots on the hub to locate\r\n the wheels. Single two-piece flange nut on each wheel stud.\r\n
\r\n\r\n
\r\n Stud Pilot Wheel Mounting
\r\n\r\n Also known as Ball Seat Nut. Uses the spherical seat of the nut to\r\n locate the wheels. Dual wheels use a double cap nut system.\r\n
\r\n\r\n
\r\n \r\n
\r\n \r\n \r\n {result.Name}\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nclass HubPilotType extends Component {\r\n componentDidMount() {\r\n const { dispatch, app } = this.props;\r\n FILTERIDX =\r\n app.categories.findIndex((a) => a.QueryParameterName === 'hubps') !==\r\n undefined\r\n ? app.categories.findIndex((a) => a.QueryParameterName === 'hubps')\r\n : 8;\r\n\r\n dispatch(fetchFilters(FILTERIDX, app));\r\n }\r\n\r\n render() {\r\n const { app, setFilter, setActive } = this.props;\r\n if (app.isFetching || app.filterResults.length < 1) {\r\n return \r\n
\r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => state;\r\nexport default connect(mapStateToProps)(HubPilotType);\r\n","import React, { Component } from 'react';\r\nimport { connect } from 'react-redux';\r\nimport Spinner from '../../components/global/spinner';\r\nimport { fetchFilters } from '../../actions/filters';\r\n\r\nlet FILTERIDX;\r\n\r\nclass Result extends Component {\r\n render() {\r\n var { result, active, onClick } = this.props;\r\n return (\r\n Hub Pilot Type
\r\n\r\n {app.filterResults.map((result, index) => {\r\n var boundClick = setFilter.bind(\r\n this,\r\n FILTERIDX,\r\n { hubps: result.Id },\r\n app\r\n );\r\n var boundActive = setActive.bind(\r\n this,\r\n FILTERIDX,\r\n result.Id,\r\n 'general-button truck-make'\r\n );\r\n return (\r\n
\r\n \r\n \r\n {result.Name}\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nclass StudPilotType extends Component {\r\n componentDidMount() {\r\n const { dispatch, app } = this.props;\r\n FILTERIDX =\r\n app.categories.findIndex((a) => a.QueryParameterName === 'stdps') !==\r\n undefined\r\n ? app.categories.findIndex((a) => a.QueryParameterName === 'stdps')\r\n : 7;\r\n\r\n dispatch(fetchFilters(FILTERIDX, app));\r\n }\r\n\r\n render() {\r\n const { app, setFilter, setActive } = this.props;\r\n if (app.isFetching || app.filterResults.length < 1) {\r\n return \r\n
\r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => state;\r\nexport default connect(mapStateToProps)(StudPilotType);\r\n","import React, { Component } from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport Spinner from \"../../components/global/spinner\";\r\nimport { fetchFilters } from \"../../actions/filters\";\r\n\r\nlet FILTERIDX;\r\n\r\nclass Result extends Component {\r\n render() {\r\n var { result, active, onClick } = this.props;\r\n return (\r\n \r\n );\r\n }\r\n}\r\n\r\nclass WheelStudStandoutInches extends Component {\r\n componentDidMount() {\r\n const { dispatch, app } = this.props;\r\n FILTERIDX =\r\n app.categories.findIndex((a) => a.QueryParameterName === \"wssdi\") !==\r\n undefined\r\n ? app.categories.findIndex((a) => a.QueryParameterName === \"wssdi\")\r\n : 6;\r\n\r\n dispatch(fetchFilters(FILTERIDX, app));\r\n }\r\n\r\n render() {\r\n const { app, setFilter, setActive } = this.props;\r\n if (app.isFetching || app.filterResults.length < 1) {\r\n return Stud Pilot Type
\r\n\r\n {app.filterResults.map((result, index) => {\r\n var boundClick = setFilter.bind(\r\n this,\r\n FILTERIDX,\r\n { stdps: result.Id },\r\n app\r\n );\r\n var boundActive = setActive.bind(\r\n this,\r\n FILTERIDX,\r\n result.Id,\r\n 'general-button truck-make'\r\n );\r\n return (\r\n
\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => state;\r\nexport default connect(mapStateToProps)(WheelStudStandoutInches);\r\n","import React, { Component } from 'react';\r\nimport { connect } from 'react-redux';\r\nimport Spinner from '../../components/global/spinner';\r\nimport { fetchFilters } from '../../actions/filters';\r\n\r\nlet FILTERIDX;\r\nconst NEXT_FILTER_PATH = '/hub/hamnt';\r\n\r\nclass Result extends Component {\r\n render() {\r\n var { result, active, onClick } = this.props;\r\n var className = 'general-button truck-make';\r\n return (\r\n Wheel Stud Standout
\r\n\r\n {app.filterResults.map((result, index) => {\r\n var boundClick = setFilter.bind(\r\n this,\r\n FILTERIDX,\r\n { wssdi: result.Inch },\r\n app\r\n );\r\n var boundActive = setActive.bind(\r\n this,\r\n FILTERIDX,\r\n result,\r\n \"general-button truck-make\"\r\n );\r\n return (\r\n
\r\n \r\n \r\n {result.Name}\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nclass ThreadOrientation extends Component {\r\n componentDidMount() {\r\n const { dispatch, app } = this.props;\r\n FILTERIDX =\r\n app.categories.findIndex((a) => a.QueryParameterName === 'strdo') !==\r\n undefined\r\n ? app.categories.findIndex((a) => a.QueryParameterName === 'strdo')\r\n : 4;\r\n\r\n dispatch(fetchFilters(FILTERIDX, app));\r\n }\r\n\r\n render() {\r\n const { app, setFilter, setActive } = this.props;\r\n if (app.isFetching || app.filterResults.length < 1) {\r\n return \r\n
\r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => state;\r\nexport default connect(mapStateToProps)(ThreadOrientation);","import React, { Component } from 'react';\r\nimport { connect } from 'react-redux';\r\nimport { push } from 'react-router-redux';\r\nimport Spinner from '../../components/global/spinner';\r\nimport {fetchFilters} from '../../actions/filters';\r\n\r\nlet FILTERIDX;\r\n\r\nclass Result extends Component {\r\n\r\n convertToKg() {\r\n const { result } = this.props;\r\n let maxKg, minKg;\r\n maxKg = Math.round(result.MaxGawrPound * 0.453592).toLocaleString();\r\n minKg = Math.round(result.MinGawrPound * 0.453592).toLocaleString();\r\n\r\n return(\r\n ({minKg}-{maxKg} kg)\r\n )\r\n }\r\n\r\n render() {\r\n const {active, onClick, result} = this.props;\r\n let min, max, display;\r\n\r\n min = result.MinGawrPound.toLocaleString();\r\n max = result.MaxGawrPound.toLocaleString();\r\n\r\n if (min === '0') {\r\n display = 'Up to '+max+' lbs.'\r\n } else {\r\n display = min +' - ' + max+' lbs.'\r\n }\r\n\r\n return (\r\n Thread Orientation
\r\n\r\n {app.filterResults.map((result, index) => {\r\n var boundClick = setFilter.bind(\r\n this,\r\n FILTERIDX,\r\n { strdo: result.Id },\r\n app\r\n );\r\n var boundActive = setActive.bind(\r\n this,\r\n FILTERIDX,\r\n result.Id,\r\n 'general-button truck-make'\r\n );\r\n return (\r\n
\r\n \r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nclass GAWR extends Component {\r\n\r\n componentWillMount() {\r\n const { dispatch, app } = this.props;\r\n const { brkty, aaxna } = app.filterState;\r\n const skipGawrFilter = brkty === 1 && aaxna === 4;\r\n\r\n FILTERIDX = app.categories.findIndex(a => a.QueryParameterName === 'gawrr') !== undefined ? app.categories.findIndex(a => a.QueryParameterName === 'gawrr') : 11 ;\r\n\r\n if (skipGawrFilter) {\r\n console.log('skipGWARfilter')\r\n dispatch(push('/hub/axle-stud'));\r\n } else {\r\n dispatch(fetchFilters(FILTERIDX, app));\r\n }\r\n }\r\n\r\n render() {\r\n const {app, setFilter, setActive} = this.props;\r\n if (app.isFetching || app.filterResults.length < 1) {\r\n return \r\n Choose the GAWR
\r\n {\r\n app.filterResults.map((result, index) => {\r\n var boundClick = setFilter.bind(this, FILTERIDX, {gawrr: result.Id}, app);\r\n var boundActive = setActive.bind(this, FILTERIDX, result.Id);\r\n return
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => state;\r\nexport default connect(mapStateToProps)(GAWR);\r\n","import React, { Component } from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport Spinner from \"../../components/global/spinner\";\r\nimport { fetchFilters } from \"../../actions/filters\";\r\n\r\nlet FILTERIDX;\r\nconst NEXT_FILTER_PATH = \"/hub/wheel-type\";\r\n\r\nclass Result extends Component {\r\n render() {\r\n var { result, active, onClick } = this.props;\r\n return (\r\n Choose the GAWR
(Gross Axle Weight Rating):
\r\n {\r\n app.filterResults.map((result, index) => {\r\n var boundClick = setFilter.bind(this, FILTERIDX, {gawrr: result.Id}, app);\r\n var boundActive = setActive.bind(this, FILTERIDX, result.Id);\r\n return \r\n
\r\n );\r\n }\r\n}\r\n\r\nclass AxelStud extends Component {\r\n componentDidMount() {\r\n const { dispatch, app } = this.props;\r\n FILTERIDX =\r\n app.categories.findIndex((a) => a.QueryParameterName === \"axthd\") !==\r\n undefined\r\n ? app.categories.findIndex((a) => a.QueryParameterName === \"axthd\")\r\n : 12;\r\n dispatch(fetchFilters(FILTERIDX, app));\r\n }\r\n\r\n render() {\r\n const { app, setFilter, setActive } = this.props;\r\n if (app.isFetching || app.filterResults.length < 1) {\r\n return \r\n \r\n
\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => state;\r\nexport default connect(mapStateToProps)(AxelStud);\r\n","import React, { Component } from 'react';\r\nimport { connect } from 'react-redux';\r\nimport Spinner from '../../components/global/spinner';\r\nimport { fetchFilters } from '../../actions/filters';\r\n\r\nlet FILTERIDX;\r\nconst NEXT_FILTER_PATH = '/hub/spindle-nut';\r\nconst STEEL = 1;\r\nconst ALUMINUM = 2;\r\n\r\nclass Result extends Component {\r\n render() {\r\n const { active, onClick, result } = this.props;\r\n return (\r\n Choose the Axle Stud Diameter
\r\n\r\n\r\n {app.filterResults.map((result) => {\r\n var boundClick = setFilter.bind(\r\n this,\r\n FILTERIDX,\r\n { axthd: result.Id },\r\n app\r\n );\r\n var boundActive = setActive.bind(this, FILTERIDX, result.Id);\r\n return (\r\n
\r\n \r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nclass WheelType extends Component {\r\n componentDidMount() {\r\n const { dispatch, app } = this.props;\r\n FILTERIDX =\r\n app.categories.findIndex((a) => a.QueryParameterName === 'wmslc') !==\r\n undefined\r\n ? app.categories.findIndex((a) => a.QueryParameterName === 'wmslc')\r\n : 13;\r\n dispatch(fetchFilters(FILTERIDX, app));\r\n }\r\n\r\n render() {\r\n const { app, setFilter, setActive } = this.props;\r\n if (app.isFetching || app.filterResults.length < 1) {\r\n return \r\n \r\n Choose the Wheel Type\r\n
\r\n {app.filterResults.map((result, index) => {\r\n var boundClick = setFilter.bind(\r\n this,\r\n FILTERIDX,\r\n { wmslc: result.Id },\r\n (app.NEXT_FILTER_PATH = NEXT_FILTER_PATH)\r\n );\r\n var boundActive = setActive.bind(this, FILTERIDX, result.Id);\r\n return (\r\n
\r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => state;\r\nexport default connect(mapStateToProps)(WheelType);\r\n","import React, { Component } from 'react';\r\nimport { connect } from 'react-redux';\r\nimport Spinner from '../../components/global/spinner';\r\nimport { fetchFilters } from '../../actions/filters';\r\n\r\nlet FILTERIDX;\r\n\r\nclass Result extends Component {\r\n render() {\r\n const { active, onClick, result } = this.props;\r\n return (\r\n \r\n Choose the Wheel Type\r\n
\r\n (Determine Wheel Stud Length):\r\n
\r\n {app.filterResults.map((result, index) => {\r\n var boundClick = setFilter.bind(\r\n this,\r\n FILTERIDX,\r\n { wmslc: result.Id },\r\n (app.NEXT_FILTER_PATH = NEXT_FILTER_PATH)\r\n );\r\n var boundActive = setActive.bind(this, FILTERIDX, result.Id);\r\n return (\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nclass SpindleNut extends Component {\r\n componentDidMount() {\r\n const { dispatch, app } = this.props;\r\n FILTERIDX =\r\n app.categories.findIndex((a) => a.QueryParameterName === 'spints') !==\r\n undefined\r\n ? app.categories.findIndex((a) => a.QueryParameterName === 'spints')\r\n : 24;\r\n dispatch(fetchFilters(FILTERIDX, app));\r\n\r\n }\r\n\r\n render() {\r\n const { app, setFilter, setActive } = this.props;\r\n if (app.isFetching || app.filterResults.length < 1) {\r\n return \r\n \r\n
\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => state;\r\nexport default connect(mapStateToProps)(SpindleNut);\r\n","import React, { Component } from 'react';\r\nimport { connect } from 'react-redux';\r\nimport Spinner from '../../components/global/spinner';\r\nimport {fetchFilters} from '../../actions/filters';\r\n\r\nlet FILTERIDX;\r\nconst BRAKE_ROTOR_TYPE = '/hub/brake-rotor-type';\r\n\r\nclass Result extends Component {\r\n render() {\r\n var { result, active, onClick, app } = this.props;\r\n const { brkty, aaxna } = app.filterState;\r\n const skipGawrFilter = brkty === 1 && aaxna === 4;\r\n const isAluminum = result.Name.toLowerCase() === 'aluminum';\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n Upgrade to industry standard PreSet Plus® hubs with 5 year/500,000 mile warranty?\r\n
\r\n\r\n {app.filterResults.map((result, index) => {\r\n var boundClick = setFilter.bind(\r\n this,\r\n FILTERIDX,\r\n { spints: result === false ? 'true' : 'false' },\r\n app\r\n );\r\n var boundActive = setActive.bind(this, FILTERIDX, result);\r\n return (\r\n
\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nclass Material extends Component {\r\n componentDidMount() {\r\n const { dispatch, app } = this.props;\r\n FILTERIDX =\r\n app.categories.findIndex((a) => a.QueryParameterName === 'hcmty') !==\r\n undefined\r\n ? app.categories.findIndex((a) => a.QueryParameterName === 'hcmty')\r\n : 14;\r\n dispatch(fetchFilters(FILTERIDX, app));\r\n }\r\n\r\n render() {\r\n const { app, setFilter, setActive } = this.props;\r\n const { tcomp, tmake } = app.filterState;\r\n const otherNotListedPath = tcomp === 1 && tmake === null;\r\n if (app.isFetching || app.filterResults.length < 1) {\r\n return \r\n \r\n
\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => state;\r\nexport default connect(mapStateToProps)(Material);\r\n","import React, { Component } from 'react';\r\nimport { connect } from 'react-redux';\r\nimport Spinner from '../../components/global/spinner';\r\nimport { fetchFilters } from '../../actions/filters';\r\n\r\nlet FILTERIDX;\r\nconst NEXT_FILTER_PATH = '/hub/brake-rotor-flange';\r\n\r\nclass Result extends Component {\r\n render() {\r\n var { result, active, onClick } = this.props;\r\n var className = 'general-button';\r\n return (\r\n Choose the Hub Material
\r\n\r\n {app.filterResults.map((result) => {\r\n if (otherNotListedPath) {\r\n var boundClick = setFilter.bind(\r\n this,\r\n FILTERIDX,\r\n { hcmty: result.Id },\r\n app\r\n );\r\n } else {\r\n var boundClick = setFilter.bind(\r\n this,\r\n FILTERIDX,\r\n { hcmty: result.Id },\r\n (app.NEXT_FILTER_PATH = BRAKE_ROTOR_TYPE)\r\n );\r\n }\r\n var boundActive = setActive.bind(this, FILTERIDX, result.Id);\r\n return (\r\n
\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nclass HubType extends Component {\r\n componentDidMount() {\r\n const { dispatch, app } = this.props;\r\n FILTERIDX =\r\n app.categories.findIndex((a) => a.QueryParameterName === \"hatyp\") !==\r\n undefined\r\n ? app.categories.findIndex((a) => a.QueryParameterName === \"hatyp\")\r\n : 17;\r\n dispatch(fetchFilters(FILTERIDX, app));\r\n }\r\n\r\n render() {\r\n const { app, setFilter, setActive } = this.props;\r\n if (app.isFetching || app.filterResults.length < 1) {\r\n return \r\n \r\n
\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => state;\r\nexport default connect(mapStateToProps)(HubType);\r\n","import React, { Component } from 'react';\r\nimport { connect } from 'react-redux';\r\nimport Spinner from '../../components/global/spinner';\r\nimport { fetchFilters } from '../../actions/filters';\r\nimport { TRUCK } from '../../config/constants';\r\nimport { push } from 'react-router-redux';\r\n\r\nlet NEXT_FILTER = '/hub/overall-rotor-length';\r\n\r\nlet FILTERIDX;\r\n\r\nclass Result extends Component {\r\n render() {\r\n var { result, onClick } = this.props;\r\n var className = 'conmet-button';\r\n return (\r\n Choose the Hub Assembly Type
\r\n\r\n {app.filterResults.map((result) => {\r\n var boundClick = setFilter.bind(\r\n this,\r\n FILTERIDX,\r\n { hatyp: result.Id },\r\n app\r\n );\r\n var boundActive = setActive.bind(this, FILTERIDX, result.Id);\r\n return (\r\n
\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nclass BrakeRotorFlange extends Component {\r\n componentDidMount() {\r\n const { dispatch, app } = this.props;\r\n const { tcomp, tmake } = app.filterState;\r\n\r\n FILTERIDX =\r\n app.categories.findIndex((a) => a.QueryParameterName === 'brdia') !==\r\n undefined\r\n ? app.categories.findIndex((a) => a.QueryParameterName === 'brdia')\r\n : 19;\r\n \r\n dispatch(fetchFilters(FILTERIDX, app));\r\n }\r\n\r\n render() {\r\n const { app, setFilter, setActive } = this.props;\r\n const { tcomp, tmake } = app.filterState;\r\n const otherNotListedPath = tcomp === TRUCK && tmake === null;\r\n\r\n if (app.isFetching || app.filterResults.length < 1) {\r\n return \r\n \r\n
\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => state;\r\nexport default connect(mapStateToProps)(BrakeRotorFlange);\r\n","import React, { Component } from 'react';\r\nimport { connect } from 'react-redux';\r\nimport Spinner from '../../components/global/spinner';\r\nimport {fetchFilters} from '../../actions/filters';\r\nimport { IMAGE_CDN } from '../../config/constants';\r\nimport { setRotorSpilned } from '../../actions/filters';\r\nlet FILTERIDX\r\n\r\nclass Result extends Component {\r\n render() {\r\n var { result, active, onClick, resultLength } = this.props;\r\n var className = resultLength === 2 ? 'grid-content small-6' : 'grid-content small-12';\r\n return (\r\n Choose the Brake Rotor Outside Diameter
\r\n\r\n\r\n
\r\n \r\n
\r\n\r\n {app.filterResults.map((result, index) => {\r\n var boundClick = setFilter.bind(\r\n this,\r\n FILTERIDX,\r\n { brdia: result.Inch },\r\n app\r\n );\r\n var boundActive = setActive.bind(this, FILTERIDX, result.Inches);\r\n return (\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nclass ChooseBrakeRotorType extends Component {\r\n render() {\r\n const { app, setFilter } = this.props;\r\n return (\r\n \r\n \r\n
\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nclass BrakeRotorType extends Component {\r\n constructor() {\r\n super();\r\n this.state = {\r\n showSplined: false,\r\n };\r\n this.handleClick = this.handleClick.bind(this);\r\n }\r\n\r\n componentDidMount() {\r\n const { dispatch, app } = this.props;\r\n FILTERIDX = app.categories.findIndex(a => a.QueryParameterName === 'abrty') !== undefined ? app.categories.findIndex(a => a.QueryParameterName === 'abrty') : 16 ;\r\n dispatch(fetchFilters(FILTERIDX, app));\r\n }\r\n\r\n handleClick(result) {\r\n const { app, setFilter } = this.props;\r\n const {\r\n filterState: { tcomp, brkty },\r\n } = app;\r\n\r\n if (\r\n tcomp === 2 &&\r\n (brkty === 1 || brkty === 2) && // Only for Trailer\r\n result.Name &&\r\n result.Name.toLowerCase() === 'splined'\r\n ) {\r\n this.setState({ showSplined: true });\r\n } else {\r\n this.setState({ showSplined: false });\r\n setFilter(FILTERIDX, { abrty: result.Id }, app);\r\n }\r\n }\r\n\r\n componentWillReceiveProps(newProps) {\r\n const { app, setFilter, dispatch } = newProps;\r\n const { isRotorSplined } = app;\r\n\r\n app.filterResults.forEach(result => {\r\n if (result.Name && result.Name.toLowerCase() === 'splined' && isRotorSplined) {\r\n setFilter(FILTERIDX, { abrty: result.Id }, app);\r\n dispatch(setRotorSpilned(false));\r\n }\r\n });\r\n }\r\n\r\n render() {\r\n const { app, setFilter, setActive } = this.props;\r\n const {\r\n filterState: { tcomp, brkty },\r\n } = app;\r\n const { showSplined } = this.state;\r\n if (app.isFetching || app.filterResults.length < 1) {\r\n return \r\n For Trailer applications, ConMet Flat Rotor Assemblies are offered as an alternative, direct-fit replacement\r\n for Bendix Splined\r\n
\r\n\r\n })
\r\n
\r\n {app.filterResults.map((result, i) => {\r\n let boundClick = setFilter.bind(this, FILTERIDX, { abrty: result.Id }, app);\r\n if (i === 0) {\r\n return (\r\n \r\n \r\n See ConMet Flat Rotor\r\n
\r\n );\r\n }\r\n return (\r\n \r\n Continue to Bendix Splined\r\n
\r\n );\r\n })}\r\n \r\n {showSplined ? (\r\n
\r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => state;\r\nexport default connect(mapStateToProps)(BrakeRotorType);\r\n","import React, { Component } from 'react';\r\nimport { connect } from 'react-redux';\r\nimport Spinner from '../../components/global/spinner';\r\nimport { fetchFilters } from '../../actions/filters';\r\nimport { TRUCK } from '../../config/constants';\r\n\r\nlet NEXT_FILTER = 'hub/abs-offset-inches';\r\n\r\nlet FILTERIDX;\r\n\r\nclass Result extends Component {\r\n render() {\r\n var { result, active, onClick } = this.props;\r\n var className = 'general-button truck-make';\r\n var roundedMMResult = Math.round(result.Millimeter).toLocaleString();\r\n\r\n return (\r\n \r\n );\r\n }\r\n}\r\n\r\nclass OverallRotorLength extends Component {\r\n componentDidMount() {\r\n const { dispatch, app } = this.props;\r\n const { tcomp, tmake } = app.filterState;\r\n\r\n FILTERIDX =\r\n app.categories.findIndex((a) => a.QueryParameterName === 'ovlgt') !==\r\n undefined\r\n ? app.categories.findIndex((a) => a.QueryParameterName === 'ovlgt')\r\n : 22;\r\n const otherNotListedPath = tcomp === TRUCK && tmake === null;\r\n\r\n dispatch(fetchFilters(FILTERIDX, app));\r\n }\r\n\r\n render() {\r\n const { app, setFilter, setActive} = this.props;\r\n if (app.isFetching || app.filterResults.length < 1) {\r\n return \r\n
\r\n )}\r\n Choose the brake rotor type
\r\n\r\n {app.filterResults.map(result => {\r\n let boundActive = setActive.bind(this, FILTERIDX, result.Id);\r\n return (\r\n
\r\n {tcomp === 2 &&\r\n (brkty === 1 || brkty === 2) && (\r\n \r\n All ConMet Trailer Rotors are 430mm in diameter. Please confirm your rotor size.\r\n
\r\n )}\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => state;\r\nexport default connect(mapStateToProps)(OverallRotorLength);\r\n","import React, { Component } from 'react';\r\nimport { connect } from 'react-redux';\r\nimport Spinner from '../../components/global/spinner';\r\nimport { fetchFilters } from '../../actions/filters';\r\nimport { TRUCK } from '../../config/constants';\r\n\r\nlet FILTERIDX;\r\nconst NEXT_FILTER = '/hub/hub-cap-bolt-circle-diameter-inches';\r\n\r\nclass Result extends Component {\r\n render() {\r\n var { result, active, onClick } = this.props;\r\n var className = 'general-button truck-make';\r\n return (\r\n Choose the Overall Rotor Length
\r\n\r\n
\r\n \r\n
\r\n {app.filterResults.map((result, index) => {\r\n var boundClick = setFilter.bind(\r\n this,\r\n FILTERIDX,\r\n { ovlgt: result.Inch },\r\n app\r\n );\r\n var boundActive = setActive.bind(\r\n this,\r\n FILTERIDX,\r\n result,\r\n 'general-button truck-make'\r\n );\r\n return (\r\n \r\n \r\n {result.Inch}\"\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nclass ABSOffsetInches extends Component {\r\n componentDidMount() {\r\n const { dispatch, app } = this.props;\r\n const { tcomp, tmake } = app.filterState;\r\n FILTERIDX =\r\n app.categories.findIndex((a) => a.QueryParameterName === 'abcoi') !==\r\n undefined\r\n ? app.categories.findIndex((a) => a.QueryParameterName === 'abcoi')\r\n : 18;\r\n const otherNotListedPath = tcomp === TRUCK && tmake === null;\r\n dispatch(fetchFilters(FILTERIDX, app));\r\n }\r\n\r\n render() {\r\n const { app, setFilter, setActive } = this.props;\r\n if (app.isFetching || app.filterResults.length < 1) {\r\n return \r\n
\r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => state;\r\nexport default connect(mapStateToProps)(ABSOffsetInches);\r\n","import React, { Component } from 'react';\r\nimport { connect } from 'react-redux';\r\nimport Spinner from '../../components/global/spinner';\r\nimport { fetchFilters } from '../../actions/filters';\r\nimport { TRUCK } from '../../config/constants';\r\n\r\nlet FILTERIDX;\r\nconst NEXT_FILTER_PATH = '/hub/wheel-type';\r\n\r\nclass Result extends Component {\r\n render() {\r\n var { result, active, onClick } = this.props;\r\n return (\r\n \r\n );\r\n }\r\n}\r\n\r\nclass HubCapBoltCircleDiameterInches extends Component {\r\n componentDidMount() {\r\n const { dispatch, app } = this.props;\r\n const { tcomp, tmake } = app.filterState;\r\n FILTERIDX =\r\n app.categories.findIndex((a) => a.QueryParameterName === 'hcbdi') !==\r\n undefined\r\n ? app.categories.findIndex((a) => a.QueryParameterName === 'hcbdi')\r\n : 22;\r\n const otherNotListedPath = tcomp === TRUCK && tmake === null;\r\n dispatch(fetchFilters(FILTERIDX, app));\r\n }\r\n\r\n render() {\r\n const { app, setFilter, setActive } = this.props;\r\n if (app.isFetching || app.filterResults.length < 1) {\r\n return Choose the ABS Offset:
\r\n\r\n {app.filterResults.map((result, index) => {\r\n var boundClick = setFilter.bind(\r\n this,\r\n FILTERIDX,\r\n { abcoi: result.Inch },\r\n app\r\n );\r\n var boundActive = setActive.bind(\r\n this,\r\n FILTERIDX,\r\n result,\r\n 'general-button truck-make'\r\n );\r\n return (\r\n
\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => state;\r\nexport default connect(mapStateToProps)(HubCapBoltCircleDiameterInches);\r\n","import React, { Component } from 'react';\r\nimport { push } from 'react-router-redux';\r\nimport { connect } from 'react-redux';\r\nimport Spinner from '../../components/global/spinner';\r\nimport { fetchFilters } from '../../actions/filters';\r\nimport { TRUCK } from '../../config/constants';\r\n\r\nlet FILTERIDX;\r\nconst NEXT_FILTER_PATH = '/hub/hub-cap-bolt-circle-diameter-inches';\r\n\r\nclass Result extends Component {\r\n render() {\r\n var { result, active, onClick } = this.props;\r\n var className = 'general-button truck-make';\r\n return (\r\n Hub Cap Bolt Circle Diameter Inches
\r\n\r\n {app.filterResults.map((result, index) => {\r\n var boundClick = setFilter.bind(\r\n this,\r\n FILTERIDX,\r\n { hcbdi: result.Inch },\r\n (app.NEXT_FILTER_PATH = NEXT_FILTER_PATH)\r\n );\r\n var boundActive = setActive.bind(\r\n this,\r\n FILTERIDX,\r\n result,\r\n 'general-button truck-make'\r\n );\r\n return (\r\n
\r\n \r\n \r\n {result.Inch}\"\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nclass HubOffsetInches extends Component {\r\n componentDidMount() {\r\n const { dispatch, app } = this.props;\r\n const { tcomp, tmake } = app.filterState;\r\n FILTERIDX =\r\n app.categories.findIndex((a) => a.QueryParameterName === 'hofsi') !==\r\n undefined\r\n ? app.categories.findIndex((a) => a.QueryParameterName === 'hofsi')\r\n : 20;\r\n const otherNotListedPath = tcomp === TRUCK && tmake === null;\r\n\r\n if (!otherNotListedPath) {\r\n dispatch(push('/hub/brake-rotor-flange'));\r\n } else {\r\n dispatch(fetchFilters(FILTERIDX, app));\r\n }\r\n }\r\n\r\n render() {\r\n const { app, setFilter, setActive } = this.props;\r\n if (app.isFetching || app.filterResults.length < 1) {\r\n return \r\n
\r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => state;\r\nexport default connect(mapStateToProps)(HubOffsetInches);\r\n","import React, { Component } from 'react';\r\nimport { connect } from 'react-redux';\r\nimport Spinner from '../../components/global/spinner';\r\nimport { fetchFilters } from '../../actions/filters';\r\n\r\nlet FILTERIDX;\r\n\r\nclass Result extends Component {\r\n render() {\r\n var { result, active, onClick } = this.props;\r\n return (\r\n \r\n );\r\n }\r\n}\r\n\r\nclass DrumPilotDiameterInches extends Component {\r\n componentDidMount() {\r\n const { dispatch, app } = this.props;\r\n FILTERIDX =\r\n app.categories.findIndex((a) => a.QueryParameterName === 'dpidi') !==\r\n undefined\r\n ? app.categories.findIndex((a) => a.QueryParameterName === 'dpidi')\r\n : 10;\r\n dispatch(fetchFilters(FILTERIDX, app));\r\n }\r\n\r\n render() {\r\n const { app, setFilter, setActive } = this.props;\r\n if (app.isFetching || app.filterResults.length < 1) {\r\n return Choose the Hub Offset:
\r\n\r\n {app.filterResults.map((result, index) => {\r\n var boundClick = setFilter.bind(\r\n this,\r\n FILTERIDX,\r\n { hofsi: result.Inch },\r\n app\r\n );\r\n var boundActive = setActive.bind(\r\n this,\r\n FILTERIDX,\r\n result,\r\n 'general-button truck-make'\r\n );\r\n if (result.Inch !== '0') {\r\n return (\r\n
\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => state;\r\nexport default connect(mapStateToProps)(DrumPilotDiameterInches);\r\n","import React, { Component } from 'react';\r\nimport { push } from 'react-router-redux';\r\nimport { connect } from 'react-redux';\r\nimport Spinner from '../../components/global/spinner';\r\nimport { fetchFilters } from '../../actions/filters';\r\nimport { TRUCK } from '../../config/constants';\r\n\r\nlet FILTERIDX;\r\nconst NEXT_PATH = '/hub/wheel-stud-standout';\r\n\r\nclass Result extends Component {\r\n render() {\r\n var { result, active, onClick } = this.props;\r\n var className = 'general-button truck-make';\r\n return (\r\n Drum Pilot Diameter Inches
\r\n\r\n {app.filterResults.map((result, index) => {\r\n var boundClick = setFilter.bind(\r\n this,\r\n FILTERIDX,\r\n { dpidi: result.Inch },\r\n app\r\n );\r\n var boundActive = setActive.bind(\r\n this,\r\n FILTERIDX,\r\n result,\r\n 'general-button truck-make'\r\n );\r\n return (\r\n
\r\n \r\n \r\n {result.Name}\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nclass BarrelLength extends Component {\r\n componentDidMount() {\r\n const { dispatch, app } = this.props;\r\n const { tcomp, tmake } = app.filterState;\r\n FILTERIDX =\r\n app.categories.findIndex((a) => a.QueryParameterName === 'barlg') !==\r\n undefined\r\n ? app.categories.findIndex((a) => a.QueryParameterName === 'barlg')\r\n : 10;\r\n const otherNotListedPath = tcomp === TRUCK && tmake === null;\r\n\r\n if (!otherNotListedPath) {\r\n dispatch(push('/hub/gawr'));\r\n } else {\r\n dispatch(fetchFilters(FILTERIDX, app));\r\n }\r\n }\r\n\r\n render() {\r\n const { app, setFilter, setActive } = this.props;\r\n const { brkty, tcomp, tmake } = app.filterState;\r\n const otherNotListedPath = tcomp === TRUCK && tmake === null;\r\n\r\n\r\n if (app.isFetching || app.filterResults.length < 1) {\r\n return \r\n
\r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => state;\r\nexport default connect(mapStateToProps)(BarrelLength);\r\n","import React, { Component } from 'react';\r\nimport { push } from 'react-router-redux';\r\nimport { connect } from 'react-redux';\r\nimport Spinner from '../../components/global/spinner';\r\nimport { fetchFilters } from '../../actions/filters';\r\nimport { TRUCK } from '../../config/constants';\r\n\r\nlet FILTERIDX;\r\n\r\nclass Result extends Component {\r\n render() {\r\n var { result, active, onClick } = this.props;\r\n return (\r\n Choose the Barrel Length:
\r\n\r\n {app.filterResults.map((result, index) => {\r\n \r\n if ( otherNotListedPath){\r\n var boundClick = setFilter.bind(\r\n this,\r\n FILTERIDX,\r\n { barlg: result.Id },\r\n (app.NEXT_FILTER_PATH = NEXT_PATH)\r\n );\r\n } else {\r\n var boundClick = setFilter.bind(\r\n this,\r\n FILTERIDX,\r\n { barlg: result.Id },\r\n app\r\n );\r\n }\r\n var boundActive = setActive.bind(\r\n this,\r\n FILTERIDX,\r\n result,\r\n 'general-button truck-make'\r\n );\r\n return (\r\n
\r\n \r\n \r\n {result}\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nclass SmallBackface extends Component {\r\n componentDidMount() {\r\n const { dispatch, app } = this.props;\r\n const { tcomp, tmake } = app.filterState;\r\n FILTERIDX =\r\n app.categories.findIndex((a) => a.QueryParameterName === 'icfsb') !==\r\n undefined\r\n ? app.categories.findIndex((a) => a.QueryParameterName === 'icfsb')\r\n : 10;\r\n const otherNotListedPath = tcomp === TRUCK && tmake === null;\r\n\r\n if (!otherNotListedPath) {\r\n dispatch(push('/hub/brake-rotor-type'));\r\n } else {\r\n dispatch(fetchFilters(FILTERIDX, app));\r\n }\r\n }\r\n\r\n render() {\r\n const { app, setFilter, setActive } = this.props;\r\n if (app.isFetching || app.filterResults.length < 1) {\r\n return \r\n
\r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => state;\r\nexport default connect(mapStateToProps)(SmallBackface);\r\n","import React, { Component } from \"react\";\r\nimport { Link } from \"react-router-dom\";\r\nimport { connect } from \"react-redux\";\r\n\r\nclass RotorDiscontinued extends Component {\r\n render() {\r\n const { selectedRotorNumber } = this.props;\r\n return (\r\n Cut for Small Backface?
\r\n\r\n {app.filterResults.map((result, index) => {\r\n var boundClick = setFilter.bind(\r\n this,\r\n FILTERIDX,\r\n { icfsb: result },\r\n app\r\n );\r\n var boundActive = setActive.bind(\r\n this,\r\n FILTERIDX,\r\n result,\r\n 'general-button truck-make'\r\n );\r\n return (\r\n
\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default connect()(RotorDiscontinued);\r\n","import React from \"react\";\nimport { connect } from \"react-redux\";\nimport { Link } from \"react-router-dom\";\nimport classNames from \"classnames\";\nimport { IMAGE_CDN } from \"../../config/constants\";\nimport { appInsights } from '../../AppInsights';\nimport RotorDiscontinued from '../global/rotor-discontinued';\n\nclass RotorResult extends React.Component {\n constructor(props) {\n super(props);\n this.prevData = this.prevData.bind(this);\n this.nextData = this.nextData.bind(this);\n\n this.state = {\n selectedIndex: 0,\n resultsLength: 0,\n };\n }\n\n nextData() {\n const selectedIndex = this.state.selectedIndex;\n if (selectedIndex <= this.state.resultsLength) {\n this.setState({ selectedIndex: selectedIndex + 1 });\n }\n }\n\n prevData() {\n const selectedIndex = this.state.selectedIndex;\n if (selectedIndex > 0) {\n this.setState({ selectedIndex: selectedIndex - 1 });\n }\n }\n\n componentWillReceiveProps(nextProps) {\n const { rotorResult } = nextProps;\n this.setState({ resultsLength: rotorResult ? rotorResult.length : 0 });\n }\n\n render() {\n const { rotorResult } = this.props;\n const FF = [10083923, 10041216, 10041215, 10086915, 10087663, 10087734];\n const R = [10083924, 10041218, 10041217, 10086914, 10087664, 10087735];\n appInsights.trackEvent({ name: 'Brake Rotor Number:', properties: { rotorResult } })\n\n let note1 = false;\n if (rotorResult.length > 0 && rotorResult.length === 2) {\n if (rotorResult[0].BrakeRotorNumber !== '10009970') {\n return (\n Sorry, the {selectedRotorNumber} rotor has been discontinued.
\r\n\r\n A new hub/rotor assembly will be required.\r\n
\r\n \r\n {selectedRotorNumber === '10009970' ? (\r\n Contact customer service\r\n ) : (\r\n \r\n Search for Replacement Hub/Rotor\r\n \r\n )}\r\n
\r\n \n
\n );\n } else {\n return (Success! The following rotor is recommended
\n\n {rotorResult.map((item, index) => {\n return (\n
\n \n \n See Details\n \n
\n );\n })}\n {note1 === true ? (\n {item.BrakeRotorType}
\n{item.BrakeRotorNumber}
\n For FF Steer Axle
\n ) : null}\n {R.includes(parseInt(item.BrakeRotorKitNumber)) ? (\n For R Drive Axle
\n ) : null}\n \n Brake Rotor Kit Number: {item.BrakeRotorKitNumber}\n
\n {item.BrakeRotorComponents}
\n {item.BrakeRotorType &&\n item.BrakeRotorType.toLowerCase() === \"u-section\" &&\n item.BrakeRotorNumber !== \"10020109\" && (\n\n Note: This rotor is not compatible with aluminum hubs.\n
\n )}\n {note1 = item.BrakeRotorNumber === \"10087485\" || item.BrakeRotorNumber === \"10087486\" ? true : false}\n \n Note: If replacing a rotor with a circular flange OD, remove existing rotor studs and replace with the studs included in this kit (10086580).\n
\n ) : ''}\n \n \n ConMet Wheel End Disclaimer\n
\n \n \n \n
\n \n \n );\n }\n else {\n return (Success! The following rotor is recommended
\n\n \n \n
\n {\n \n {data.Images.map((image, index) => {\n return (\n \n
\n \n See Details\n \n
\n }\n \n Rotor Replacement Kit:\n {data.BrakeRotorKitNumber}\n
\n \n Includes Rotor {data.BrakeRotorNumber} {data.BrakeRotorNumber == '10119183' ? '(Coated version of rotor 10083733)' : (data.BrakeRotorNumber == '10119309') ? '(Coated version of rotor 10084701)' : ''}\n
\n {data.BrakeRotorComponents}
\n {data.BrakeRotorType &&\n data.BrakeRotorType.toLowerCase() === \"u-section\" &&\n data.BrakeRotorNumber !== \"10020109\" && (\n\n Note: This rotor is not compatible with aluminum hubs.\n
\n )}\n {data.BrakeRotorKitNumber === \"10087663\" && (\n \n Note: Replaces kit 10041216 (rotor 10034621)\n
\n )}\n {data.BrakeRotorKitNumber === \"10087664\" && (\n \n Note: Replaces kit 10041218 (rotor 10034621)\n
\n )}\n \n ConMet Wheel End Disclaimer\n
\n \r\n\t\t\t\t
\r\n\t\t)\r\n\t}\r\n}\r\n\r\nexport default connect()(NoResults)\r\n","import React, { Component } from 'react';\nimport { push } from 'react-router-redux';\nimport { connect } from 'react-redux';\nimport {\n fetchRotorFilterValues,\n fetchRotorFilterCategories,\n resetDrumFilter,\n} from '../../actions';\nimport Waiting from '../../components/global/waiting';\nimport {\n TRAILER,\n DRUM,\n DISC,\n IMAGE_CDN,\n TRUCK,\n FILTERIDX,\n} from '../../config/constants';\nimport RotorResult from './rotorResult';\nimport { setRotorSpilned } from '../../actions/filters';\nimport NoResults from '../global/no-result';\n\nclass ReplacementRotorFilter extends Component {\n constructor(props) {\n super(props);\n this.getFilterValue = this.getFilterValue.bind(this);\n this.handleFilterClick = this.handleFilterClick.bind(this);\n this.replacementHub = this.replacementHub.bind(this);\n\n this.state = {\n filters: [],\n urlParams: '',\n skipFilter: {},\n filterClicked: false,\n showSplined: false,\n };\n }\n\n componentWillMount() {\n const { dispatch, results } = this.props;\n const { rotorFilters } = results;\n if (!rotorFilters.length) {\n dispatch(fetchRotorFilterCategories());\n }\n dispatch(resetDrumFilter());\n }\n\n componentWillUnmount() {\n const { dispatch } = this.props;\n dispatch(resetDrumFilter());\n }\n\n componentDidMount() {\n this.getFilterValue();\n }\n\n componentDidUpdate() {\n this.getFilterValue();\n }\n\n handleFilterClick(item) {\n const id = item.Id ? item.Id : item;\n this.setState({\n showSplined: item.Name && item.Name.toLowerCase() === 'splined',\n });\n const { dispatch, results } = this.props;\n const { currentFilter } = results;\n const { filters, urlParams, skipFilter } = this.state;\n const index =\n currentFilter === 'bcdia' ? -1 : filters.indexOf(currentFilter);\n this.state.filterClicked = true;\n this.state.urlParams +=\n urlParams === ''\n ? currentFilter + '=' + id\n : '&' + currentFilter + '=' + id;\n\n let url = this.state.urlParams;\n if (skipFilter !== undefined) {\n const skippedFilter = Object.keys(skipFilter);\n if (skippedFilter.length) {\n url +=\n '&' +\n skippedFilter.map((key) => key + '=' + skipFilter[key]).join('&');\n }\n this.state.skipFilter = [];\n }\n\n dispatch(\n push(\n '/hub/replacement-rotor/filter/' +\n (filters.length === index + 1 ? filters[0] : filters[index + 1]) +\n '/' +\n url\n )\n );\n }\n\n getFilterValue() {\n const { results, match, dispatch } = this.props;\n const { rotorFilters, rotorFilterValue } = results;\n const isResult =\n rotorFilterValue &&\n rotorFilterValue[0] &&\n rotorFilterValue[0].BrakeRotorNumber;\n const {\n filters,\n urlParams,\n currentFilter,\n skipFilter,\n showSplined,\n } = this.state;\n this.state.urlParams = match.params.filters ? match.params.filters : '';\n\n if (rotorFilters.length) {\n this.state.filters = rotorFilters.map((item) => item.QueryParameterName);\n }\n\n let filterParams = match.params.filters\n ? '?inclv=2&' + match.params.filters\n : '?inclv=2';\n this.state.url = filterParams;\n\n if (rotorFilters.length && !match.params.currentFilter) {\n dispatch(\n push('/hub/replacement-rotor/filter/' + this.state.filters[1])\n );\n this.state.skipFilter = []; // when back button is pressed\n this.setState({ showSplined: false });\n } else if (match.params.currentFilter !== this.state.currentFilter) {\n const filters = this.paramsToObject(this.state.urlParams);\n const splinedFilter = filters.brtyp === 6;\n if (!showSplined) {\n if (splinedFilter) {\n this.setState({ showSplined: true });\n } else {\n // dispatch if not splined filter\n dispatch(fetchRotorFilterValues(match.params.currentFilter, filterParams));\n }\n }\n if (!this.state.filterClicked && !splinedFilter) {\n this.setState({ showSplined: false });\n }\n this.state.currentFilter = match.params.currentFilter;\n this.state.filterClicked = false;\n }\n else if (\n rotorFilters.length &&\n rotorFilterValue &&\n rotorFilterValue.length === 1 &&\n !isResult &&\n results.isFilterValueSingle\n ) {\n const index = filters.indexOf(results.currentFilter);\n const id =\n rotorFilterValue[0].Id !== undefined\n ? rotorFilterValue[0].Id\n : rotorFilterValue[0];\n\n if (this.state.url === '') {\n this.state.url = filterParams;\n }\n\n if (filters.length === index + 1) {\n this.state.url += '&' + filters[0] + '=' + id;\n dispatch(fetchRotorFilterValues(filters[0], this.state.url, false));\n this.state.skipFilter = [];\n } else {\n this.state.url += '&' + filters[index] + '=' + id;\n if (this.state.filterClicked) {\n this.state.skipFilter = { ...skipFilter, [filters[index]]: id };\n }\n this.state.filterClicked = false;\n dispatch(\n fetchRotorFilterValues(filters[index + 1], this.state.url, false)\n );\n }\n }\n }\n\n paramsToObject(urlParams) {\n const params = urlParams.split('&');\n const filters = {};\n params.forEach((item) => {\n const t = item.split('=');\n filters[t[0]] = parseFloat(t[1]);\n });\n return filters;\n }\n\n replacementHub() {\n const { app, setFilter, dispatch } = this.props;\n const { urlParams } = this.state;\n const filters = this.paramsToObject(urlParams);\n\n if (filters.axpos === 1) {\n setFilter(FILTERIDX, { tcomp: TRUCK, brkty: DISC }, app);\n }\n\n if (filters.axpos === 2) {\n setFilter(FILTERIDX, { tcomp: TRUCK, brkty: DRUM }, app);\n }\n\n if (filters.axpos === 3) {\n setFilter(FILTERIDX, { tcomp: TRAILER, brkty: DISC }, app);\n }\n\n dispatch(setRotorSpilned(true));\n }\n\n render() {\n const { results } = this.props;\n const { showSplined } = this.state;\n const { rotorFilterValue, currentFilter } = results;\n const isResult =\n rotorFilterValue &&\n rotorFilterValue[0] &&\n rotorFilterValue[0].BrakeRotorNumber;\n\n if (results.isFetching) {\n return No results were found.
\r\n\t\t\t\t\r\n\t\t\t\t
\r\n\r\n\t\t\t\t{/*ConMet Online Parts Catalog*/}\r\n\r\n\t\t\t\r\n\t\t\t\t\tThe part number you entered is not referenced in this database,\r\n\t\t\t\t\tplease verify that you’ve entered the correct part number. If you get the same result,\r\n\t\t\t\t\tplease call 1-800-547-9473 to speak to a Customer Service Representative.\r\n\t\t\t\t
\r\n\r\n\r\n\t\t\t\t\n
\n );\n }\n\n if (currentFilter === 'axpos' && rotorFilterValue !== undefined) {\n return (\n \n ConMet Does not offer replacement rotors for Bendix Splined.\n Complete Hub/rotor assemblies are available.\n
\n\n
\n \n Search Replacement Hub/Rotor Assemblies\n
\n \n
\n );\n }\n\n if (currentFilter === 'brtyp' && rotorFilterValue !== undefined) {\n return (\n Choose the Axle position
\n\n {rotorFilterValue.map((item) => {\n return (\n
\n \n
\n );\n })}\n \n this.handleFilterClick(item)}\n >\n {item.Name}\n \n
\n \n
\n \n );\n }\n\n if (\n currentFilter === 'bsdia' ||\n (currentFilter === 'ovlgt' && rotorFilterValue !== undefined)\n ) {\n let message = '';\n let src = '';\n\n if (currentFilter === 'bsdia') {\n message = 'Choose the Brake Surface Outside Diameter';\n src = require('../../images/brake_rotor_lange.png');\n } else if (currentFilter === 'ovlgt') {\n message = 'Choose the overall length';\n src = require('../../images/U-Rotorapp.png');\n }\n\n return (\n Choose the brake rotor type
\n\n {rotorFilterValue.map((item) => {\n return (\n \n
\n );\n })}\n \n this.handleFilterClick(item)}\n >\n {item.Name}\n \n
\n \n
\n );\n }\n\n if (currentFilter === 'flngs' && rotorFilterValue !== undefined) {\n return (\n {message}
\n\n {rotorFilterValue.map((item) => {\n const mm =\n item === 16.9\n ? Math.ceil(item * 25.4)\n : (item * 25.4).toFixed(0);\n const value =\n currentFilter === 'bsdia'\n ? '⌀' + item.toFixed(1) + ' inch' + ' [' + mm + ' mm]'\n : '⌀' + item.toFixed(1) + ' inch';\n return (\n
\n \n
\n );\n })}\n \n this.handleFilterClick(item)}\n >\n {value}\n \n
\n \n
\n );\n }\n\n if (isResult) {\n return Choose the brake rotor flange type
\n\n {rotorFilterValue.map((item) => {\n return (\n
\n \n
\n )\n })}\n \n this.handleFilterClick(item.Id)}\n >\n {item.Name}\n \n
\n \r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default Casting;\r\n","import fetch from \"isomorphic-fetch\";\r\nimport * as constants from \"./config/constants\";\r\n\r\n\r\nexport const fetchLongStudApi = (filters) =>{\r\n return fetch(constants.APIV14+'/hubassembly/filtervalues/ovldi?'+filters, {\r\n method: 'get',\r\n headers: {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json',\r\n 'Ocp-Apim-Subscription-Key': constants.V2KEY\r\n }\r\n }).then(response => response.json());\r\n};\r\n","import React, { Component, Image } from 'react';\nimport { connect } from 'react-redux';\nimport { Link } from 'react-router-dom';\nimport { showPreviousResult, showNextResult } from '../../../actions';\nimport _ from 'lodash';\nimport Spinner from '../../../components/global/spinner';\nimport { fetchLongStudApi } from '../../../utils';\nimport { appInsights } from '../../../AppInsights';\n\nclass NextButton extends Component {\n nextClass() {\n let { idx, total, showButton } = this.props;\n let defaultClass = \"next-button\";\n defaultClass = showButton() ? defaultClass + \" hide-button\" : defaultClass;\n if (idx === total - 1) {\n return defaultClass + \" disabled\";\n }\n return defaultClass;\n }\n\n render() {\n let { handleClick } = this.props;\n\n return (\n \r\n \r\n NoProceed without the number\r\n \r\n
\r\n \n \n
\n );\n }\n}\n\nclass PreviousButton extends Component {\n previousClass() {\n let { idx, showButton } = this.props;\n let defaultClass = \"prev-button\";\n defaultClass = showButton() ? defaultClass + \" hide-button\" : defaultClass;\n if (idx === 0) {\n return defaultClass + \" disabled\";\n }\n return defaultClass;\n }\n\n render() {\n let { handleClick } = this.props;\n return (\n \n \n
\n );\n }\n}\n\nclass HubResults extends React.Component {\n render() {\n let assemblyType = this.props.assemblyType;\n if (assemblyType) {\n return (\n \n
\n );\n }\n }\n}\n\nclass HubSingleResult extends Component {\n constructor() {\n super();\n\n this.compareLongStuds = this.compareLongStuds.bind(this);\n\n this.state = {\n isFetching: false,\n shortStuds: [],\n };\n }\n\n renderButtons() {\n let { total } = this.props;\n return total === 1;\n }\n\n handleNextClick() {\n const { dispatch } = this.props;\n dispatch(showNextResult());\n }\n\n handlePreviousClick() {\n const { dispatch } = this.props;\n dispatch(showPreviousResult());\n }\n\n renderPreviousBtn() {\n if (this.renderButtons()) {\n }\n return \"\";\n }\n\n renderNextBtn() {\n if (this.renderButtons()) {\n }\n return \"\";\n }\n\n addLinks(str, links, IBLink) {\n if (str === undefined || links === undefined || str === \"—\") {\n return null;\n }\n let matches = str.match(/{{(.*?)}}/g) || [];\n\n matches = matches.map(function (n, idx) {\n if (links.length > 0) {\n return [\n n,\n n\n .replace(\n \"{{\",\n ''\n )\n .replace(\"}}\", \"\"),\n ];\n }\n });\n matches.forEach((item) => {\n str = str.replace(item[0], item[1]);\n });\n return (\n \n );\n }\n\n componentWillMount() {\n const { short_studs } = this.props;\n console.log(short_studs);\n if (short_studs && short_studs.length > 1) {\n this.setState({ isFetching: true });\n this.compareLongStuds();\n }\n }\n\n async compareLongStuds() {\n const { item, short_studs } = this.props;\n const longStudFilter = `hanum=${item.HubAssemblyNumber}`;\n const t = await fetchLongStudApi(longStudFilter);\n const shortStuds = [];\n const promises = short_studs.map(async (item) => {\n const res = await fetchLongStudApi(\n `${longStudFilter},${item.HubAssemblyNumber}`\n );\n if (_.isEqual(_.sortBy(t.Results), _.sortBy(res.Results))) {\n shortStuds.push(item.HubAssemblyNumber);\n }\n });\n\n await Promise.all(promises);\n this.setState({ isFetching: false, shortStuds });\n }\n\n render() {\n let {\n idx,\n total,\n item,\n spindleNut,\n short_studs,\n selectedHubAssemblyNumber,\n results\n } = this.props;\n const selectedNumber = selectedHubAssemblyNumber\n ? selectedHubAssemblyNumber.split(\" \")[1]\n : \"\";\n const selectedConmet = selectedHubAssemblyNumber\n ? selectedHubAssemblyNumber.split(\" \")[0]\n : \"\";\n const { isFetching, shortStuds } = this.state;\n let studs = null;\n let assemblyType = item.AftermarketDescription.toLowerCase().includes(\"plus\") || item.AftermarketDescription.toLowerCase().includes(\"premium\");\n let hubAssemblynumber =item.HubAssemblyNumber\n appInsights.trackEvent({ name: 'Hub Assembly Number:', properties: {hubAssemblynumber} })\n \n if (_.isUndefined(item) || item.id === -1 || isFetching) {\n return Best Value:
\n - \n
- Extended Warranty \n
- Less Downtime \n
- Simplified Process \n {/*
- Liability Protection */}\n
\n {/*\n for {selectedHubAssemblyNumber}\n \n ) : (\n \"\"\n )}\n {/*{selectedConmet === 'ConMet' && item.PartStatus === 'Active' ?
\n );\n }\n}\n\nexport default connect()(HubSingleResult);\n","import React from 'react';\nimport { connect } from 'react-redux';\nimport { Link } from 'react-router-dom';\nimport classNames from 'classnames';\nimport { IMAGE_CDN } from '../../config/constants';\nimport _ from 'lodash';\nimport {\n fetchHubsSpindleNut,\n} from '../../actions';\nimport result from '../hub/details/result';\n\n\nclass HubResults extends React.Component {\n render() {\n let assemblyType = this.props.assemblyType;\n if (assemblyType) {\n return (\n Success! The following hub is recommended
*/}\n\n {item.PartStatus === \"Active\" || item.PartStatus === \"Service Only\"\n ? \"The following hub is recommended\"\n : \"This hub is no longer available\"}\n
\n {selectedHubAssemblyNumber ? (\nLooking for service components for {selectedNumber}?
: ''}*/}\n \n
\n \n {item.Images.map((image, index) => {\n if (index === 0) {\n return (\n \n {item.title || item.AftermarketDescription}\n
\n\n {assemblyType === true ? (\n \n
\n ) : (\n \"\"\n )}\n\n {spindleNut && isPublic && (\n \n See Details\n \n
\n \n {item.title || item.AftermarketDescription}\n
\n {item.HubAssemblyNumber}\n
\n {studs && `${studs} (Long stud version)`}\n
\n\n {assemblyType === true ? (\n \n Best Value:\n \n - 5 years/500,000 mile warranty
\n - Less Downtime
\n - Simplified Process
\n
\n
\n ) : (\n \"\"\n )}\n\n {spindleNut && isPublic && (\n \n 5 years/500,000 mile warranty when installed with PreSet Plus\n Spindle Nut: {spindleNut} ( PreSet Hubs Only)\n
\n )}\n\n {item.PartStatus !== \"Terminated\" && spindleNut && (\n \n \n {\" \"}\n *For full warranty details click{\" \"}\n \n {\" \"}\n here.\n \n
\n )}\n\n {(item.IsAftermarket === false && item.PartStatus === \"Active\") ||\n item.PartStatus === \"Service Only\" ? (\n \n This hub is made-to-order only. Please contact ConMet Customer\n Service for availability\n
\n ) : (\n \"\"\n )}\n {item.PartStatus === \"Terminated\" ? (\n \n This hub is no longer available. Please contact ConMet Customer\n Service for options\n
\n ) : (\n \"\"\n )}\n {note}\n {item.Images.map((image, index) => {\n if (index === 1) {\n return (\n \n
\n );\n } else {\n return (\n Best Value:
\n - \n
- Extended Warranty \n
- Less Downtime \n
- Simplified Process \n {/*
- Liability Protection */}\n
\n
\n );\n }\n }\n}\nclass SetLink extends React.Component {\n render() {\n const note = this.props.note;\n const hubnumber = this.props.number;\n \n let text = note.Text;\n if (note.Links) {\n let firstPart = text.substr(0, text.indexOf(\"{{\"));\n let secondPart = text.substr(text.indexOf(\"}}\") + 2, text.length);\n let number = parseInt(text.split(\"{{\")[1]) == NaN? hubnumber: parseInt(text.split(\"{{\")[1]);\n \n return (\n Requires:
\n - \n
- Bearing Cones \n
- Seal \n
- Manual Adjustment \n
{text}
\n );\n } else {\n return {text}
;\n }\n }\n}\n\nclass CastingResult extends React.Component {\n constructor(props) {\n super(props);\n this.prevData = this.prevData.bind(this);\n this.nextData = this.nextData.bind(this);\n\n this.state = {\n selectedIndex: 0,\n resultsLength: 0,\n results: [],\n newResults: [],\n spindleNut: '',\n };\n }\n\n nextData() {\n const selectedIndex = this.state.selectedIndex;\n if (selectedIndex <= this.state.resultsLength) {\n this.setState({ selectedIndex: selectedIndex + 1 });\n }\n }\n\n addLinks(str, links, IBLink) {\n if (str === undefined || links === undefined || str === \"—\") {\n return null;\n }\n let matches = str.match(/{{(.*?)}}/g) || [];\n matches = matches.map(function (n, idx) {\n if (links.length > 0) {\n return [\n n,\n n\n .replace(\n \"{{\",\n ''\n )\n .replace(\"}}\", \"\"),\n ];\n }\n });\n matches.forEach((item) => {\n str = str.replace(item[0], item[1]);\n });\n return (\n \n );\n }\n\n prevData() {\n const selectedIndex = this.state.selectedIndex;\n if (selectedIndex > 0) {\n this.setState({ selectedIndex: selectedIndex - 1 });\n }\n }\n componentDidMount() {\n const { dispatch , CastingResult} = this.props;\n this.setGridSameHeight();\n let partNumber = '';\n if (CastingResult && CastingResult.length) {\n CastingResult.map((item, id) => {\n partNumber +=\n id + 1 === CastingResult.length\n ? item.HubAssemblyNumber\n : item.HubAssemblyNumber + ',';\n });\n }\n if (partNumber) {\n dispatch(fetchHubsSpindleNut(partNumber));\n }\n }\n setGridSameHeight() {\n const grid = document.querySelectorAll('.equalizer .small-6');\n if (grid && grid.length > 1) {\n grid.forEach((item, gridIndex) => {\n if (item && item.children && item.children.length) {\n const list = item.children;\n for (let i = 0; i < list.length; i++) {\n if (\n grid[gridIndex + 1] &&\n grid[gridIndex + 1].children[i] &&\n list[i].clientHeight !==\n grid[gridIndex + 1].children[i].clientHeight\n ) {\n const currList = list[i];\n const nextList = grid[gridIndex + 1].children[i];\n const height = currList.clientHeight && nextList.clientHeight;\n\n if (height) {\n const updateElementList = document.querySelectorAll(\n '.equalizer .small-6 .' + currList.className\n );\n\n for (let j = 0; j < updateElementList.length; j++) {\n updateElementList[j].style.height = height + 'px';\n }\n }\n }\n }\n }\n });\n }\n }\n render() {\n const { CastingResult , results} = this.props;\n let aftermarketHubAssemblies = [];\n let nonAftermarketHubAssemblies = []; \n for (var i = 0; i < CastingResult.length; i++) {\n if(CastingResult[i].IsAftermarket){\n aftermarketHubAssemblies.push(CastingResult[i]);\n }else{\n nonAftermarketHubAssemblies.push(CastingResult[i]);\n }\n }\n \n if (aftermarketHubAssemblies.length === 1 && nonAftermarketHubAssemblies.length === 0) { \n const data = aftermarketHubAssemblies[this.state.selectedIndex];\n let assemblyType = data.AftermarketDescription.toLowerCase().includes('plus'); \n let spindleNut = this.getSpindleNut(aftermarketHubAssemblies, results); \n let note = this.gwarNote(data);\n return this.ReturnSingleCastingView( data, assemblyType, note, spindleNut) \n }\n if (nonAftermarketHubAssemblies.length === 1 && aftermarketHubAssemblies.length === 0) { \n this.state.resultsLength = nonAftermarketHubAssemblies.length;\n const data = nonAftermarketHubAssemblies[this.state.selectedIndex];\n let assemblyType = data.AftermarketDescription.toLowerCase().includes('plus'); \n let spindleNut = this.getSpindleNut(nonAftermarketHubAssemblies, results); \n let note = this.gwarNote(data);\n return this.ReturnSingleCastingView( data, assemblyType,note,spindleNut) \n }\n else if (aftermarketHubAssemblies.length == 2 && nonAftermarketHubAssemblies.length === 0) {\n this.state.resultsLength = aftermarketHubAssemblies.length;\n let spindleNut = this.getSpindleNut(aftermarketHubAssemblies, results);\n const data = aftermarketHubAssemblies[this.state.selectedIndex];\n let note = this.gwarNote(data); \n let isTractor = data.AftermarketDescription.toLowerCase().includes('trailer'); \n if(isTractor){\n return this.ReturnCastingTrailerView(aftermarketHubAssemblies, spindleNut);\n }\n let assemblyType = data.AftermarketDescription.toLowerCase().includes('plus'); \n return this.ReturnSingleCastingView( data, assemblyType,note,spindleNut) \n }\n else if (nonAftermarketHubAssemblies.length == 2 && aftermarketHubAssemblies.length === 0 ) {\n //check if there a MTO and Terminated\n let activeHubAssemblies = [];\n let terminatedHubAssemblies = []; \n for (var i = 0; i < nonAftermarketHubAssemblies.length; i++) {\n if(nonAftermarketHubAssemblies[i].PartStatus == 'Active' || nonAftermarketHubAssemblies[i].PartStatus == 'Service Only'){\n activeHubAssemblies.push(nonAftermarketHubAssemblies[i])\n }else if(nonAftermarketHubAssemblies[i].PartStatus == 'Terminated'){\n \n terminatedHubAssemblies.push(nonAftermarketHubAssemblies[i])\n }\n }\n if(activeHubAssemblies.length >= terminatedHubAssemblies.length){\n this.state.resultsLength = activeHubAssemblies.length;\n let spindleNut = this.getSpindleNut(activeHubAssemblies, results); \n const data = activeHubAssemblies[this.state.selectedIndex]; \n let note = this.gwarNote(data); \n let assemblyType = data.AftermarketDescription.toLowerCase().includes('plus'); \n //return this.ReturnCastingTrailerView( activeHubAssemblies, spindleNut);\n return this.ReturnSingleCastingView( data, assemblyType,note,spindleNut) \n\n }else{\n this.state.resultsLength = terminatedHubAssemblies.length;\n let spindleNut = this.getSpindleNut(terminatedHubAssemblies, results); \n const data = terminatedHubAssemblies[this.state.selectedIndex]; \n let note = this.gwarNote(data); \n let isTractor = data.AftermarketDescription.toLowerCase().includes('trailer'); \n return this.ReturnCastingTrailerView( terminatedHubAssemblies, spindleNut);\n }\n \n } \n else if (aftermarketHubAssemblies.length > 0) {\n if(aftermarketHubAssemblies.length == 1) {\n const data = aftermarketHubAssemblies[this.state.selectedIndex];\n let assemblyType = data.AftermarketDescription.toLowerCase().includes('plus'); \n let spindleNut = this.getSpindleNut(aftermarketHubAssemblies, results); \n let note = this.gwarNote(data);\n return this.ReturnSingleCastingView( data, assemblyType, note, spindleNut) \n }\n if (aftermarketHubAssemblies.length == 2) {\n this.state.resultsLength = aftermarketHubAssemblies.length;\n let spindleNut = this.getSpindleNut(aftermarketHubAssemblies, results); \n const data = aftermarketHubAssemblies[this.state.selectedIndex]; \n let note = this.gwarNote(data); \n let isTractor = data.AftermarketDescription.toLowerCase().includes('trailer'); \n \n return this.ReturnCastingTrailerView( aftermarketHubAssemblies, spindleNut); \n }\n\n this.state.resultsLength = aftermarketHubAssemblies.length;\n const data = aftermarketHubAssemblies[this.state.selectedIndex];\n let assemblyType = data.AftermarketDescription.toLowerCase().includes('preset'); \n let spindleNut = this.getSpindleNut(aftermarketHubAssemblies, results); \n let note = this.gwarNote(data);\n return this.ReturnCastingViews(aftermarketHubAssemblies, data, assemblyType,note, spindleNut);\n }\n else if (nonAftermarketHubAssemblies.length > 0) {\n this.state.resultsLength = nonAftermarketHubAssemblies.length; \n let activeHubAssemblies = [];\n let terminatedHubAssemblies = []; \n for (var i = 0; i < nonAftermarketHubAssemblies.length; i++) {\n if(nonAftermarketHubAssemblies[i].PartStatus == 'Active' || nonAftermarketHubAssemblies[i].PartStatus == 'Service Only'){\n activeHubAssemblies.push(nonAftermarketHubAssemblies[i])\n }else if(nonAftermarketHubAssemblies[i].PartStatus == 'Terminated'){\n {\n terminatedHubAssemblies.push(nonAftermarketHubAssemblies[i])\n }\n }\n } \n if(activeHubAssemblies.length <=2 && activeHubAssemblies.length !==0){\n this.state.resultsLength = activeHubAssemblies.length;\n let spindleNut = this.getSpindleNut(activeHubAssemblies, results); \n const data = activeHubAssemblies[this.state.selectedIndex]; \n let note = this.gwarNote(data); \n let assemblyType = data.AftermarketDescription.toLowerCase().includes('plus'); \n //return this.ReturnCastingTrailerView( activeHubAssemblies, spindleNut);\n return this.ReturnCastingTrailerView( activeHubAssemblies,assemblyType,note,spindleNut) \n\n }else{\n return this.ReturnCastingViews(activeHubAssemblies, terminatedHubAssemblies);\n }\n }\n\n else {\n return ;\n }\n }\n\n gwarNote(data) {\n let note = null;\n if (!_.isUndefined(data.GawrNote)) {\n note = this.addLinks(data.GawrNote.Text, data.GawrNote.Links, data.GawrNote.IBLink);\n }\n return note;\n }\n\n ReturnCastingViews(activeHubAssemblies,terminatedHubAssemblies) {\n return (\n \n \n {c.HubAssemblyNumber} - {c.AftermarketDescription}\n \n );\n \n })) :(\n \"\"\n )}\n {(terminatedHubAssemblies.length > 0 && activeHubAssemblies.length == 0 ) ?(\n terminatedHubAssemblies.map((c, index) => { \n return ( \n \n {c.HubAssemblyNumber} - {c.AftermarketDescription}\n \n ); \n })) :(\n \"\"\n )} \n
\n \n )\n }\n\n getSpindleNut(aftermarketHubAssemblies, results) {\n let spindleNut = '';\n let partNumber = '';\n if (aftermarketHubAssemblies && aftermarketHubAssemblies.length) {\n aftermarketHubAssemblies.map((item, id) => {\n partNumber +=\n id + 1 === aftermarketHubAssemblies.length\n ? item.HubAssemblyNumber\n : item.HubAssemblyNumber + ',';\n });\n }\n if (results.spindleNut !== \"\" && results.spindleNut !== undefined) {\n results.spindleNut[0].AftermarketParts.map(\n (item, id) => {\n let washer_description = '';\n if (item.Description.toLowerCase().includes('hub service kit') &&\n item.Description.toLowerCase().includes('ff')) {\n if (item.TypeId === 226) {\n washer_description = ' (D Flat)';\n } else if (item.TypeId === 227) {\n washer_description = ' (Keyway)';\n }\n }\n spindleNut +=\n id + 1 ===\n results.spindleNut[0].AftermarketParts.length\n ? item.PartNumber + washer_description\n : item.PartNumber + washer_description + ',';\n }\n );\n\n }\n return spindleNut;\n }\n \n ReturnSingleCastingView(data, assemblyType, note, spindleNut) {\n return (\n The following Hubs meet your parameters
\n \n {(activeHubAssemblies.length > 0) ?(\n activeHubAssemblies.map((c, index) => { \n return ( \n\n
\n );\n }\n ReturnCastingTrailerView( data,spindleNut) {\n return (\n Success! The following hub is recommended
\n\n {data.Images.map((item, index) => {\n // return 
\n return (\n \n\n
\n ) : (\n ''\n )}\n {assemblyType === false ? (\n \n {data.title || data.AftermarketDescription}\n
\n ) : (\n ''\n )}\n {data.PartStatus !== \"Terminated\" && spindleNut && (\n
\n \n return (\n \n\n
\n {data.title || data.AftermarketDescription}\n
\n {data.HubAssemblyNumber}\n
\n
\n ) : (\n ''\n )}\n {assemblyType === false ? (\n \n {data.title || data.AftermarketDescription}\n
\n {data.HubAssemblyNumber}\n
\n
\n ) : (\n ''\n )}\n {data.PartStatus !== \"Terminated\" && spindleNut && (\n \n 5 years/500,000 mile warranty when installed with PreSet Plus\n Spindle Nut: {spindleNut} (PreSet Hubs Only)\n
\n )}\n {data.PartStatus !== \"Terminated\" && spindleNut && (\n \n {\" \"}\n *For full warranty details click{\" \"}\n \n {\" \"}\n here.\n \n
\n )}\n {(data.IsAftermarket === false && data.PartStatus === 'Active') ||\n data.PartStatus === 'Service Only' ? (\n \n This hub is made-to-order only. Please contact ConMet Customer\n Service for availability\n
\n ) : (\n ''\n )}\n {data.PartStatus === 'Terminated' ? (\n \n This hub is no longer available. Please contact ConMet Customer\n Service for options\n
\n ) : (\n ''\n )}\n \n {note} \n
\n \n See Details\n \n \n
\n \n );\n }\n}\nconst mapStateToProps = (state) => state;\nexport default connect(mapStateToProps)(CastingResult);","import React, { Component } from 'react';\r\nimport { push } from 'react-router-redux';\r\nimport { connect } from 'react-redux';\r\nimport {\r\n fetchCastingFilterValues,\r\n resetCastingFilter,\r\n fetchCastingFilterCategories,\r\n} from '../../actions';\r\nimport Waiting from '../../components/global/waiting';\r\n\r\nimport CastingResult from './castingResult';\r\n\r\nclass CastingFilter extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.getFilterValue = this.getFilterValue.bind(this);\r\n this.handleFilterClick = this.handleFilterClick.bind(this);\r\n\r\n this.state = {\r\n filters: [],\r\n urlParams: '',\r\n isResult: false,\r\n filterClicked: false,\r\n };\r\n }\r\n\r\n componentWillMount() {\r\n const { dispatch, results } = this.props;\r\n const { castingFilters } = results;\r\n if (!castingFilters.length) {\r\n dispatch(fetchCastingFilterCategories());\r\n }\r\n }\r\n\r\n componentWillUnmount() {\r\n const { dispatch } = this.props;\r\n dispatch(resetCastingFilter());\r\n }\r\n\r\n componentDidMount() {\r\n this.getFilterValue();\r\n }\r\n\r\n componentDidUpdate() {\r\n this.getFilterValue();\r\n }\r\n\r\n isNil(value) {\r\n return value !== null && value !== undefined;\r\n }\r\n\r\n getValue(item) {\r\n if (this.isNil(item.Id)) {\r\n return item.Id;\r\n }\r\n else if (this.isNil(item.AftermarketAxleId)) {\r\n return item.AftermarketAxleId;\r\n } else if (this.isNil(item.Inch)) {\r\n return item.Inch;\r\n } else if (this.isNil(item.Inches)) {\r\n return item.Inches;\r\n }\r\n if (item !== undefined) {\r\n return item;\r\n }\r\n }\r\n\r\n\r\n\r\n handleFilterClick(item) {\r\n const id = this.getValue(item);\r\n const { dispatch, results } = this.props;\r\n const { currentFilter } = results;\r\n const { filters, urlParams, skipFilter } = this.state;\r\n const index =\r\n currentFilter === 'aaxna' ? 1 : filters.indexOf(currentFilter);\r\n this.state.filterClicked = true;\r\n this.state.urlParams +=\r\n urlParams === ''\r\n ? currentFilter + '=' + id\r\n : '&' + currentFilter + '=' + id;\r\n\r\n let url = this.state.urlParams;\r\n\r\n\r\n var parturl = (filters.length === index + 1 ? filters[0] : filters[index + 1]);\r\n dispatch(\r\n push(\r\n '/hub/casting/filter/' + parturl\r\n +\r\n '/' +\r\n url\r\n )\r\n );\r\n }\r\n\r\n getFilterValue() {\r\n const { results, match, dispatch } = this.props;\r\n const { castingFilters, castingFilterValue } = results;\r\n const isResult =\r\n castingFilterValue &&\r\n castingFilterValue[0] &&\r\n castingFilterValue[0].HubAssemblyNumber;\r\n\r\n const { filters } = this.state;\r\n\r\n this.state.urlParams = match.params.filters ? match.params.filters : '';\r\n\r\n if (castingFilters.length) {\r\n this.state.filters = castingFilters.map(\r\n (item) => item.QueryParameterName\r\n );\r\n }\r\n\r\n let filterParams = match.params.filters\r\n ? '?inclv=2&' + match.params.filters\r\n : '?inclv=2';\r\n this.state.url = filterParams;\r\n\r\n if (match.params.currentFilter !== this.state.currentFilter) { \r\n dispatch(fetchCastingFilterValues(match.params.currentFilter, filterParams));\r\n this.state.currentFilter = match.params.currentFilter;\r\n }\r\n else if (\r\n castingFilters.length &&\r\n castingFilterValue &&\r\n castingFilterValue.length === 2\r\n && results.currentFilter ==='brdia'\r\n && !isResult \r\n &&\r\n results.isFilterValueSingle\r\n )\r\n {\r\n let index = filters.indexOf(results.currentFilter);\r\n const id =\r\n castingFilterValue[0].inch === 0\r\n ? castingFilterValue[1].inch\r\n : castingFilterValue[0];\r\n\r\n this.state.url += '&' + filters[index] + '=' + this.getValue(id);\r\n dispatch(\r\n fetchCastingFilterValues(filters[index + 1], this.state.url)\r\n );\r\n }\r\n else if (\r\n castingFilters.length &&\r\n castingFilterValue &&\r\n castingFilterValue.length === 2\r\n && results.currentFilter ==='ovlgt'\r\n && !isResult \r\n &&\r\n results.isFilterValueSingle\r\n )\r\n {\r\n let index = filters.indexOf(results.currentFilter);\r\n const id =\r\n castingFilterValue[0].inch === 0\r\n ? castingFilterValue[1].inch\r\n : castingFilterValue[0];\r\n\r\n this.state.url += '&' + filters[index] + '=' + this.getValue(id);\r\n dispatch(\r\n fetchCastingFilterValues(filters[index + 1], this.state.url)\r\n );\r\n }\r\n\r\n else if (\r\n castingFilters.length &&\r\n castingFilterValue &&\r\n castingFilterValue.length === 1\r\n && !isResult\r\n &&\r\n results.isFilterValueSingle\r\n ) {\r\n\r\n let index = filters.indexOf(results.currentFilter);\r\n\r\n const id =\r\n castingFilterValue[0].Id !== undefined\r\n ? castingFilterValue[0].Id\r\n : castingFilterValue[0];\r\n\r\n if (this.state.url === '') {\r\n this.state.url = filterParams;\r\n }\r\n else {\r\n this.state.url += '&' + filters[index] + '=' + this.getValue(id);\r\n\r\n dispatch(\r\n fetchCastingFilterValues(filters[index + 1], this.state.url)\r\n );\r\n\r\n }\r\n }\r\n }\r\n\r\n\r\n render() {\r\n const { results } = this.props;\r\n const { castingFilterValue, currentFilter } = results;\r\n\r\n\r\n if (results.isFetching) {\r\n return Success!
\n\n {data.map((item, index) => {\n \n let assemblyType = item.AftermarketDescription.toLowerCase().includes(\"preset\");\n return (\n \n \n See Details\n \n
\n );\n })}\n {data[0].GawrNote === \"\" ? (\n \n
\n )\n })}\n {spindleNut && (\n \n {assemblyType ? \"PreSet\" : \"Conventional\"}\n
\n \n \n {item.HubAssemblyNumber}\n
\n {(item.IsAftermarket === false && item.PartStatus === 'Active') ||\n item.PartStatus === 'Service Only' ? (\n \n This hub is made-to-order only. Please contact ConMet Customer\n Service for availability\n
\n ) : (\n ''\n )}\n {item.PartStatus === 'Terminated' ? (\n \n This hub is no longer available. Please contact ConMet Customer\n Service for options\n
\n ) : (\n ''\n )}\n \n \n 5 years/500,000 mile warranty when installed with PreSet Plus\n Spindle Nut: {spindleNut} ( PreSet Hubs Only)\n
\n )}\n {spindleNut && (\n \n {\" \"}\n *For full warranty details click{\" \"}\n \n {\" \"}\n here.\n \n
\n )}\n {data.map((item, index) => {\n return (\n \r\n
\r\n );\r\n }\r\n if (currentFilter === 'wssdi' || currentFilter === 'hubrt' ||\r\n currentFilter === 'dpidi' && castingFilterValue !== undefined) {\r\n let message = '';\r\n\r\n if (currentFilter === 'wssdi') {\r\n message = 'Wheel Stud Standout:';\r\n }\r\n else if (currentFilter === 'dpidi') {\r\n message = 'Drum Pilot Diameter Inches';\r\n }\r\n else if (currentFilter === 'hubrt') {\r\n message = 'Choose the Hub Rating Pounds';\r\n }\r\n\r\n return (\r\n {message}
\r\n\r\n {castingFilterValue.map((item) => {\r\n if(item.Inch !== 0){\r\n let value = \r\n currentFilter === 'abcoi'||'rtoff' || 'brdia' || 'hcbdi' || 'hofsi'\r\n ? '⌀' + item.Inch + ' inch' + ' [' + item.Millimeter + ' mm]'\r\n : '⌀' + item.Inch + ' inch';\r\n\r\n return (\r\n
\r\n \r\n
\r\n );\r\n }\r\n })} \r\n \r\n this.handleFilterClick(item)}\r\n >\r\n {value}\r\n \r\n
\r\n \r\n
\r\n );\r\n }\r\n if (currentFilter === 'ovlgt' && castingFilterValue !== undefined) {\r\n let message = '';\r\n let src = '';\r\n\r\n if (currentFilter === 'ovlgt') {\r\n message = 'Choose the Overall Length';\r\n src = require('../../images/brake_rotor_lange.png');\r\n }\r\n\r\n return (\r\n {message}
\r\n\r\n {castingFilterValue.map((item) => {\r\n const value =\r\n currentFilter === 'wssdi' || 'dpidi' || 'hubrt'\r\n ? '⌀' + item.Inch + ' inch' + ' [' + item.Millimeter + ' mm]'\r\n : '⌀' + item.Inch + ' inch';\r\n return (\r\n
\r\n \r\n
\r\n );\r\n })}\r\n \r\n this.handleFilterClick(item)}\r\n >\r\n {value}\r\n \r\n
\r\n \r\n
\r\n );\r\n }\r\n\r\n if (currentFilter === 'aaxna' && castingFilterValue !== undefined) {\r\n return (\r\n {message}
\r\n\r\n {castingFilterValue.map((item) => {\r\n if(item.Inch !== 0){\r\n const value =\r\n currentFilter === 'ovlgt'\r\n ? '⌀' + item.Inch + ' inch' + ' [' + item.Millimeter + ' mm]'\r\n : '⌀' + item.Inch + ' inch';\r\n return (\r\n
\r\n \r\n
\r\n );\r\n }})}\r\n \r\n this.handleFilterClick(item)}\r\n >\r\n {value}\r\n \r\n
\r\n \r\n
\r\n );\r\n }\r\n\r\n if (currentFilter === 'barlg' && castingFilterValue !== undefined) {\r\n let src = require('../../images/barrel_length.png');\r\n return (\r\n Choose the Hub by Axle Type or Bearing Number:
\r\n\r\n {castingFilterValue.map((item) => {\r\n return (\r\n
\r\n \r\n
\r\n );\r\n })}\r\n \r\n this.handleFilterClick(item.AftermarketAxleId)}\r\n >\r\n {item.AftermarketAxle}\r\n \r\n
\r\n \r\n
\r\n );\r\n }\r\n\r\n if (currentFilter === 'axthd' || currentFilter === 'hamnt' ||\r\n currentFilter === 'hubps' || currentFilter === 'stdps' && castingFilterValue !== undefined) {\r\n\r\n let message = '';\r\n\r\n if (currentFilter === 'axthd') {\r\n message = 'Choose the Axle Stud Thread';\r\n } else if (currentFilter === 'whlps') {\r\n message = 'Choose the brake diameter';\r\n }\r\n else if (currentFilter === 'hamnt') {\r\n message = 'Hub Mounting System';\r\n }\r\n else if (currentFilter === 'hubps') {\r\n message = 'Choose the hub piloted type';\r\n }\r\n else if (currentFilter === 'stdps') {\r\n message = 'Choose the stud piloted type';\r\n }\r\n\r\n return (\r\n Choose the barrel length:
\r\n\r\n {castingFilterValue.map((item) => {\r\n return (\r\n
\r\n \r\n
\r\n );\r\n })}\r\n \r\n this.handleFilterClick(item.Id)}\r\n >\r\n {item.Name}\r\n \r\n
\r\n \r\n
\r\n );\r\n }\r\n\r\n if (currentFilter === 'icfsb') {\r\n\r\n var src = require('../../images/mounting_flange_diameter.png');\r\n\r\n return (\r\n {message}
\r\n\r\n {castingFilterValue.map((item) => {\r\n return (\r\n
\r\n \r\n
\r\n );\r\n })}\r\n \r\n this.handleFilterClick(item.Id)}\r\n >\r\n {item.Name}\r\n \r\n
\r\n \r\n
\r\n );\r\n }\r\n\r\n if (currentFilter === 'hanum') {\r\n return Wheel Flange Diameter
\r\n\r\n {castingFilterValue.map((item) => {\r\n var value = item === true ? '12.75\"-12.9\" (For small diameter brake drums and wheels)' : '13.00\" + (Most Common)';\r\n return (\r\n
\r\n \r\n
\r\n );\r\n })}\r\n \r\n this.handleFilterClick(item)}\r\n >\r\n {value}\r\n \r\n
\r\n \r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default RotorCasting;\r\n","import React, { Component } from 'react';\r\nimport { push } from 'react-router-redux';\r\nimport { connect } from 'react-redux';\r\nimport {\r\n fetchRotorCastingFilterValues,\r\n resetDrumFilter,\r\n fetchRotorCastingFilterCategories,\r\n} from '../../actions';\r\nimport Waiting from '../global/waiting';\r\n\r\nimport RotorResult from '../rotor/rotorResult';\r\n\r\nclass RotorCastingFilter extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.getFilterValue = this.getFilterValue.bind(this);\r\n this.handleFilterClick = this.handleFilterClick.bind(this);\r\n\r\n this.state = {\r\n filters: [],\r\n urlParams: '',\r\n isResult: false,\r\n filterClicked: false,\r\n };\r\n }\r\n\r\n componentWillMount() {\r\n const { dispatch, results } = this.props;\r\n const { rotorCastingFilters } = results;\r\n if (!rotorCastingFilters.length) {\r\n dispatch(fetchRotorCastingFilterCategories());\r\n }\r\n }\r\n\r\n componentWillUnmount() {\r\n const { dispatch } = this.props;\r\n dispatch(resetDrumFilter());\r\n }\r\n\r\n componentDidMount() {\r\n this.getFilterValue();\r\n }\r\n\r\n componentDidUpdate() {\r\n this.getFilterValue();\r\n }\r\n\r\n isNil(value) {\r\n return value !== null && value !== undefined;\r\n }\r\n\r\n getValue(item) {\r\n if (this.isNil(item.Id)) {\r\n return item.Id;\r\n }\r\n else if (this.isNil(item.Inch)) {\r\n return item.Inch;\r\n } else if (this.isNil(item.Inches)) {\r\n return item.Inches;\r\n }\r\n if (item !== undefined) {\r\n return item;\r\n }\r\n }\r\n\r\n\r\n\r\n handleFilterClick(item) {\r\n const id = this.getValue(item);\r\n const { dispatch, results } = this.props;\r\n const { currentFilter } = results;\r\n const { filters, urlParams, skipFilter } = this.state;\r\n const index =\r\n currentFilter === 'aaxna' ? 1 : filters.indexOf(currentFilter);\r\n this.state.filterClicked = true;\r\n this.state.urlParams +=\r\n urlParams === ''\r\n ? currentFilter + '=' + id\r\n : '&' + currentFilter + '=' + id;\r\n\r\n let url = this.state.urlParams;\r\n\r\n\r\n var parturl = (filters.length === index + 1 ? filters[0] : filters[index + 1]);\r\n dispatch(\r\n push(\r\n '/hub/rotor-casting/filter/' + parturl\r\n +\r\n '/' +\r\n url\r\n )\r\n );\r\n }\r\n\r\n getFilterValue() {\r\n const { results, match, dispatch } = this.props;\r\n const { rotorCastingFilters, rotorCastingFilterValue } = results;\r\n\r\n const isResult =\r\n rotorCastingFilterValue &&\r\n rotorCastingFilterValue[0] &&\r\n rotorCastingFilterValue[0].BrakeRotorNumber;\r\n\r\n const { filters } = this.state;\r\n\r\n this.state.urlParams = match.params.filters ? match.params.filters : '';\r\n\r\n if (rotorCastingFilters.length) {\r\n this.state.filters = rotorCastingFilters.map(\r\n (item) => item.QueryParameterName\r\n );\r\n }\r\n\r\n let filterParams = match.params.filters\r\n ? '?inclv=2&' + match.params.filters\r\n : '?inclv=2';\r\n this.state.url = filterParams;\r\n\r\n if (match.params.currentFilter !== this.state.currentFilter) { \r\n dispatch(fetchRotorCastingFilterValues(match.params.currentFilter, filterParams));\r\n this.state.currentFilter = match.params.currentFilter;\r\n }\r\n // else if (\r\n // rotorCastingFilters.length &&\r\n // rotorCastingFilterValue &&\r\n // !isResult\r\n // ) {\r\n \r\n // }\r\n\r\n else if (\r\n rotorCastingFilters.length &&\r\n rotorCastingFilterValue &&\r\n rotorCastingFilterValue.length === 1\r\n && !isResult\r\n &&\r\n results.isFilterValueSingle\r\n ) {\r\n\r\n let index = filters.indexOf(results.currentFilter);\r\n\r\n const id =\r\n rotorCastingFilterValue[0].Id !== undefined\r\n ? rotorCastingFilterValue[0].Id\r\n : rotorCastingFilterValue[0];\r\n\r\n if (this.state.url === '') {\r\n this.state.url = filterParams;\r\n }\r\n else {\r\n this.state.url += '&' + filters[index] + '=' + this.getValue(id);\r\n\r\n dispatch(\r\n fetchRotorCastingFilterValues(filters[0], this.state.url)\r\n );\r\n\r\n }\r\n }\r\n }\r\n\r\n\r\n render() {\r\n const { results } = this.props;\r\n const { rotorCastingFilterValue, currentFilter } = results;\r\n\r\n\r\n if (results.isFetching) {\r\n return \r\n \r\n NoProceed without the number\r\n \r\n
\r\n \r\n
\r\n );\r\n }\r\n\r\n \r\n if (currentFilter === 'brnum') {\r\n return {message}
\r\n\r\n {rotorCastingFilterValue.map((item) => {\r\n return (\r\n
\r\n \r\n
\r\n );\r\n })}\r\n \r\n this.handleFilterClick(item.Id)}\r\n >\r\n {item.Name}\r\n \r\n
\r\n \r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default DrumCasting;\r\n","import React from 'react';\r\nimport { connect } from 'react-redux';\r\nimport { Link } from 'react-router-dom';\r\nimport classNames from 'classnames';\r\nimport { appInsights } from '../../AppInsights';\r\n\r\nclass DrumResult extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.prevData = this.prevData.bind(this);\r\n this.nextData = this.nextData.bind(this);\r\n\r\n this.state = {\r\n selectedIndex: 0,\r\n resultsLength: 0,\r\n };\r\n }\r\n\r\n nextData() {\r\n const selectedIndex = this.state.selectedIndex;\r\n if (selectedIndex <= this.state.resultsLength) {\r\n this.setState({ selectedIndex: selectedIndex + 1 });\r\n }\r\n }\r\n\r\n prevData() {\r\n const selectedIndex = this.state.selectedIndex;\r\n if (selectedIndex > 0) {\r\n this.setState({ selectedIndex: selectedIndex - 1 });\r\n }\r\n }\r\n\r\n componentDidMount() {\r\n this.setGridSameHeight();\r\n }\r\n\r\n componentDidUpdate() {\r\n this.setGridSameHeight();\r\n }\r\n\r\n setGridSameHeight() {\r\n const grid = document.querySelectorAll(\".equalizer .small-6\");\r\n if (grid && grid.length > 1) {\r\n grid.forEach((item, gridIndex) => {\r\n if (item && item.children && item.children.length) {\r\n const list = item.children;\r\n for (let i = 0; i < list.length; i++) {\r\n if (\r\n grid[gridIndex + 1] &&\r\n grid[gridIndex + 1].children[i] &&\r\n list[i].clientHeight !==\r\n grid[gridIndex + 1].children[i].clientHeight\r\n ) {\r\n const currList = list[i];\r\n const nextList = grid[gridIndex + 1].children[i];\r\n const height = currList.clientHeight && nextList.clientHeight;\r\n\r\n if (height) {\r\n const updateElementList = document.querySelectorAll(\r\n \".equalizer .small-6 .\" + currList.className\r\n );\r\n\r\n for (let j = 0; j < updateElementList.length; j++) {\r\n updateElementList[j].style.height = height + \"px\";\r\n }\r\n }\r\n }\r\n }\r\n }\r\n });\r\n }\r\n }\r\n\r\n renderBrakeType(brakeType) {\r\n if (brakeType.length < 21) {\r\n return brakeType;\r\n } else {\r\n const test = [];\r\n const i = brakeType.indexOf(\" \");\r\n test.push(brakeType.slice(0, i), \r\n \r\n NoProceed without the number\r\n \r\n
\r\n , brakeType.slice(i + 1));\r\n return test;\r\n }\r\n }\r\n\r\n\r\n render() {\r\n const { drumResult } = this.props;\r\n this.state.resultsLength = drumResult.length;\r\n appInsights.trackEvent({ name: 'Brake Drum Number:', properties: {drumResult}})\r\n\r\n if (drumResult.length > 0 && drumResult.length === 2) {\r\n return (\r\n
\r\n
\r\n );\r\n } else if (drumResult.length > 0) {\r\n const data = drumResult[this.state.selectedIndex];\r\n return (\r\n Success! The following drum is recommended
\r\n\r\n {drumResult.map((item, index) => {\r\n return ( \r\n
\r\n \r\n \r\n See Details\r\n \r\n
\r\n );\r\n })}\r\n \r\n \r\n {this.renderBrakeType(item.BrakeType)}\r\n
\r\n{item.BrakeDrumNumber}
\r\n Weight: {item.WeightPound} Lbs
\r\n \r\n Ball Seat Nut Compatible:{\" \"}\r\n {item.IsBsnCompatible ? \"Yes\" : \"No\"}\r\n
\r\n {item.Notes}
\r\n \r\n ConMet Wheel End Disclaimer\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n );\r\n } else {\r\n return ;\r\n }\r\n }\r\n}\r\nexport default connect()(DrumResult);\r\n","import React, { Component } from 'react';\r\nimport { push } from 'react-router-redux';\r\nimport { connect } from 'react-redux';\r\nimport {\r\n fetchDrumCastingFilterValues,\r\n resetDrumFilter,\r\n fetchDrumCastingFilterCategories,\r\n} from '../../actions';\r\nimport Waiting from '../global/waiting';\r\nimport DrumResult from '../drum/drumResult';\r\n\r\n\r\nclass DrumCastingFilter extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.getFilterValue = this.getFilterValue.bind(this);\r\n this.handleFilterClick = this.handleFilterClick.bind(this);\r\n\r\n this.state = {\r\n filters: [],\r\n urlParams: '',\r\n isResult: false,\r\n filterClicked: false,\r\n };\r\n }\r\n\r\n componentWillMount() {\r\n const { dispatch, results } = this.props;\r\n const { drumCastingFilters } = results;\r\n if (!drumCastingFilters.length) {\r\n dispatch(fetchDrumCastingFilterCategories());\r\n }\r\n }\r\n\r\n componentWillUnmount() {\r\n const { dispatch } = this.props;\r\n dispatch(resetDrumFilter());\r\n }\r\n\r\n componentDidMount() {\r\n this.getFilterValue();\r\n }\r\n\r\n componentDidUpdate() {\r\n this.getFilterValue();\r\n }\r\n\r\n isNil(value) {\r\n return value !== null && value !== undefined;\r\n }\r\n\r\n getValue(item) {\r\n if (this.isNil(item.Id)) {\r\n return item.Id;\r\n }\r\n else if (this.isNil(item.Inch)) {\r\n return item.Inch;\r\n } else if (this.isNil(item.Inches)) {\r\n return item.Inches;\r\n }\r\n if (item !== undefined) {\r\n return item;\r\n }\r\n }\r\n\r\n\r\n\r\n handleFilterClick(item) {\r\n const id = this.getValue(item);\r\n const { dispatch, results } = this.props;\r\n const { currentFilter } = results;\r\n const { filters, urlParams, skipFilter } = this.state;\r\n const index =\r\n currentFilter === 'aaxna' ? 1 : filters.indexOf(currentFilter);\r\n this.state.filterClicked = true;\r\n this.state.urlParams +=\r\n urlParams === ''\r\n ? currentFilter + '=' + id\r\n : '&' + currentFilter + '=' + id;\r\n\r\n let url = this.state.urlParams;\r\n\r\n\r\n var parturl = (filters.length === index + 1 ? filters[0] : filters[index + 1]);\r\n dispatch(\r\n push(\r\n '/hub/drum-casting/filter/' + parturl\r\n +\r\n '/' +\r\n url\r\n )\r\n );\r\n }\r\n\r\n getFilterValue() {\r\n const { results, match, dispatch } = this.props;\r\n const { drumCastingFilters, drumCastingFilterValue } = results;\r\n\r\n const isResult =\r\n drumCastingFilterValue &&\r\n drumCastingFilterValue[0] &&\r\n drumCastingFilterValue[0].BrakeDrumNumber;\r\n\r\n const { filters } = this.state;\r\n\r\n this.state.urlParams = match.params.filters ? match.params.filters : '';\r\n\r\n if (drumCastingFilters.length) {\r\n this.state.filters = drumCastingFilters.map(\r\n (item) => item.QueryParameterName\r\n );\r\n }\r\n\r\n let filterParams = match.params.filters\r\n ? '?inclv=2&' + match.params.filters\r\n : '?inclv=2';\r\n this.state.url = filterParams;\r\n\r\n if (match.params.currentFilter !== this.state.currentFilter) { \r\n dispatch(fetchDrumCastingFilterValues(match.params.currentFilter, filterParams));\r\n this.state.currentFilter = match.params.currentFilter;\r\n }\r\n \r\n else if (\r\n drumCastingFilters.length &&\r\n drumCastingFilterValue &&\r\n drumCastingFilterValue.length === 1\r\n && !isResult\r\n &&\r\n results.isFilterValueSingle\r\n ) {\r\n\r\n let index = filters.indexOf(results.currentFilter);\r\n\r\n const id =\r\n drumCastingFilterValue[0].Id !== undefined\r\n ? drumCastingFilterValue[0].Id\r\n : drumCastingFilterValue[0];\r\n\r\n if (this.state.url === '') {\r\n this.state.url = filterParams;\r\n }\r\n else {\r\n this.state.url += '&' + filters[index] + '=' + this.getValue(id);\r\n\r\n dispatch(\r\n fetchDrumCastingFilterValues(filters[0], this.state.url)\r\n );\r\n\r\n }\r\n }\r\n }\r\n\r\n\r\n render() {\r\n const { results } = this.props;\r\n const { drumCastingFilterValue, currentFilter } = results;\r\n\r\n\r\n if (results.isFetching) {\r\n return Success! The following drum is recommended
\r\n\r\n \r\n \r\n
\r\n {\r\n \r\n {data.Images.map((image, index) => {\r\n // return \r\n return (\r\n \r\n
\r\n \r\n See Details\r\n \r\n
\r\n }\r\n \r\n return (\r\n \r\n {data.BrakeType}\r\n {data.BrakeDrumNumber}\r\n
\r\n {data.Notes}
\r\nWeight: {data.WeightPound} Lbs
\r\n\r\n Ball Seat Nut Compatible:{\" \"}\r\n {data.IsBsnCompatible ? \"Yes\" : \"No\"}\r\n
\r\n\r\n ConMet Wheel End Disclaimer\r\n
\r\n \r\n
\r\n );\r\n }\r\n\r\n if (currentFilter === 'holes') {\r\n return (\r\n {message}
\r\n {currentFilter === 'pidia' ? (\r\n\r\n {drumCastingFilterValue.map((item) => {\r\n return (\r\n
\r\n \r\n
\r\n );\r\n })}\r\n \r\n this.handleFilterClick(item)}\r\n >\r\n ⌀ {item} inch{' '}\r\n {currentFilter === 'pidia' && item === 8.78\r\n ? '- Most common'\r\n : ''}\r\n \r\n
\r\n \r\n
\r\n );\r\n }\r\n\r\n if (currentFilter === 'brnum') {\r\n return Choose the Stud Hole count
\r\n\r\n {drumCastingFilterValue.map((item) => {\r\n return (\r\n
\r\n \r\n
\r\n );\r\n })}\r\n \r\n this.handleFilterClick(item)}\r\n >\r\n {item}\r\n \r\n
\r\n \r\n
\r\n );\r\n }\r\n}\r\n","import React, {Component} from 'react';\r\nimport {connect} from 'react-redux';\r\nimport {fetchStudSummaries, fetchStudFilterValues}\r\n from '../../actions';\r\nimport Waiting from '../../components/global/waiting';\r\nimport NoResults from '../global/no-result';\r\nimport classNames from 'classnames';\r\nimport StudChart from './stud-chart';\r\n\r\nclass StudSummary extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.getSummaryValue = this.getSummaryValue.bind(this);\r\n this.getStudList = this.getStudList.bind(this);\r\n this.state = {\r\n studId: null,\r\n };\r\n\r\n }\r\n\r\n componentWillMount() {\r\n const {match} = this.props;\r\n if (match.params.id){\r\n this.setState({studId: match.params.id});\r\n this.getSummaryValue(match.params.id);\r\n }\r\n }\r\n\r\n componentWillReceiveProps(newProps) {\r\n const { results, match } = newProps;\r\n if(match.params.id !== this.state.studId){\r\n this.setState({studId: match.params.id});\r\n this.getSummaryValue(match.params.id);\r\n }\r\n if( results.studSummaries !== this.props.results.studSummaries) {\r\n this.getStudList(newProps);\r\n }\r\n }\r\n\r\n getSummaryValue(id) {\r\n const {dispatch} = this.props;\r\n\r\n dispatch(fetchStudSummaries(id));\r\n }\r\n\r\n getStudList(props) {\r\n const { dispatch, results } = props;\r\n const { studSummaries } = results;\r\n if(studSummaries.length) {\r\n this.setState({studSummaries: results});\r\n dispatch(fetchStudFilterValues('sdnum', `inclv=0&bstyl=${studSummaries[0].BaseStylesId}&dimB=${studSummaries[0].DimensionB}&dimC=${studSummaries[0].DimensionC}`));\r\n }\r\n }\r\n\r\n render() {\r\n const { results } = this.props;\r\n const studSummaries = results.studSummaries;\r\n const studFilterValues = results.studFilterValue;\r\n\r\n if (results.isFetching) {\r\n return \r\n \r\n \r\n
\r\n
\r\n Available Lengths:
\r\n| Stud Number | \r\n\r\n {/*\r\n Chart Description\r\n | */}\r\n\r\nDimension A/B/C/D | \r\n {/* \r\n \r\n\r\n Dimension B\r\n | \r\n \r\n\r\n Dimension C\r\n | \r\n \r\n\r\n Dimension D\r\n | */}\r\n {studFilterValues.map((result, i) => {\r\n if (result.StudNumber === studNumbers[0].StudNumber) {\r\n return (\r\n
|---|---|---|---|---|---|
| \r\n \r\n {result.StudNumber}\r\n \r\n | \r\n {/* \r\n\r\n {result.ChartDescription}\r\n | */}\r\n\r\n {result.DimensionA} / {result.DimensionB} /{\" \"}\r\n {result.DimensionC} / {result.DimensionD}\r\n | \r\n {/* \r\n\r\n {result.DimensionB}\r\n | \r\n\r\n {result.DimensionC}\r\n | \r\n\r\n {result.DimensionD}\r\n | */}\r\n
| \r\n \r\n {result.StudNumber}\r\n \r\n | \r\n {/*\r\n {result.ChartDescription}\r\n | */}\r\n\r\n {result.DimensionA} / {result.DimensionB} /{\" \"}\r\n {result.DimensionC} / {result.DimensionD}\r\n | \r\n {/* \r\n\r\n {result.DimensionB}\r\n | \r\n\r\n {result.DimensionC}\r\n | \r\n\r\n {result.DimensionD}\r\n | */}\r\n
\r\n {/* \r\n \r\n
\r\n Success! The following ConMet Stud is recommended
*/}\r\n\r\n \r\n \r\n
\r\n {studSummaries.map((data, i) => (\r\n \r\n {\r\n data.Images && data.Images.map((image) => (\r\n // 
\r\n 
\r\n ))\r\n }\r\n \r\n \r\n
\r\n
\r\n ))}\r\n | Stud Number | \r\n{data.StudNumber} | \r\n
| Chart Description | \r\n{data.ChartDescription} | \r\n
| Dimension A Inches | \r\n{data.DimensionA} | \r\n
| Dimension B Inches | \r\n{data.DimensionB} | \r\n
| Dimension C Inches | \r\n{data.DimensionC} | \r\n
| Dimension D Inches | \r\n{data.DimensionD} | \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n );\r\n } else {\r\n return ;\r\n }\r\n }\r\n}\r\n\r\nexport default connect()(StudResult);\r\n","import React, { Component } from 'react';\r\nimport { connect } from 'react-redux';\r\nimport { push } from 'react-router-redux';\r\nimport _ from 'lodash';\r\nimport { IMAGE_CDN, STUD_FILTERS } from '../../config/constants';\r\nimport { fetchStudFilterValues } from '../../actions';\r\nimport Spinner from '../../components/global/spinner';\r\nimport StudResult from './studResult';\r\n\r\nclass StudFilter extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.getValue = this.getValue.bind(this);\r\n this.getFilterValue = this.getFilterValue.bind(this);\r\n this.handleFilterClick = this.handleFilterClick.bind(this);\r\n\r\n this.state = {\r\n cFilter: '',\r\n urlParams: '',\r\n skippedFilter: '',\r\n apiFilter: '', // current filter of which api is called.\r\n };\r\n }\r\n\r\n componentWillMount() {\r\n this.getFilterValue(this.props);\r\n }\r\n\r\n componentWillReceiveProps(newProps) {\r\n this.getFilterValue(newProps);\r\n }\r\n\r\n isNil(value) {\r\n return value !== null && value !== undefined;\r\n }\r\n\r\n getValue(item) {\r\n if (this.isNil(item.Id)) {\r\n return item.Id;\r\n } else if (this.isNil(item.Inch)) {\r\n return item.Inch;\r\n } else if (this.isNil(item.Inches)) {\r\n return item.Inches;\r\n }\r\n\r\n return item;\r\n }\r\n\r\n getFilterValue(props) {\r\n const {\r\n match,\r\n dispatch,\r\n results: { isFetching, studFilterValue },\r\n } = props;\r\n const { currentFilter, filters } = match.params;\r\n const { cFilter, urlParams, skippedFilter } = this.state;\r\n\r\n if (!currentFilter) {\r\n dispatch(push('/hub/stud/filter/' + STUD_FILTERS[0]));\r\n } \r\n else if (!isFetching && cFilter !== currentFilter) {\r\n dispatch(\r\n fetchStudFilterValues(\r\n currentFilter,\r\n `${filters ? `${filters}&` : ''}inclv=2`\r\n )\r\n );\r\n this.setState({\r\n cFilter: currentFilter,\r\n urlParams: filters || '',\r\n skippedFilter: '',\r\n apiFilter: currentFilter,\r\n });\r\n } \r\n else if (!isFetching && studFilterValue && studFilterValue.length === 1) {\r\n // Skip the filter if only one option is available\r\n const item = studFilterValue[0];\r\n const id = this.getValue(item);\r\n\r\n if (skippedFilter) {\r\n const index = STUD_FILTERS.indexOf(skippedFilter);\r\n const nextFilter = STUD_FILTERS[index + 1];\r\n\r\n if (nextFilter) {\r\n const f =\r\n nextFilter === 'sdnum'\r\n ? urlParams\r\n : `${skippedFilter}=${id}&${urlParams}`;\r\n this.setState({ skippedFilter: nextFilter, apiFilter: nextFilter });\r\n dispatch(fetchStudFilterValues(nextFilter, `${f}&inclv=2`));\r\n }\r\n } \r\n else {\r\n const f = `${currentFilter}=${id}&${urlParams}`;\r\n this.setState({\r\n skippedFilter: currentFilter,\r\n urlParams: f,\r\n apiFilter: currentFilter,\r\n });\r\n dispatch(fetchStudFilterValues(currentFilter, `${f}&inclv=2`));\r\n }\r\n }\r\n }\r\n\r\n handleFilterClick(item, apiFilter) {\r\n const id = this.getValue(item);\r\n const { match, dispatch } = this.props;\r\n const { filters } = match.params;\r\n const index = STUD_FILTERS.indexOf(apiFilter);\r\n const cFilter = STUD_FILTERS[index + 1];\r\n const t = `${filters ? `${filters}&` : ''}${apiFilter}=${id}`;\r\n\r\n dispatch(push(`/hub/stud/filter/${cFilter}/${t}`));\r\n }\r\n\r\n renderButton(item) {\r\n if (_.isObject(item)) {\r\n if (item.Name) {\r\n return item.Name;\r\n }\r\n if (item.Inches) {\r\n return this.getFormattedLabel(item.Inches);\r\n }\r\n return item.lable;\r\n } else {\r\n return this.getFormattedLabel(item);\r\n }\r\n }\r\n\r\n getFormattedLabel(item) {\r\n const num = parseFloat(item);\r\n return `⌀ ${num} inch [${Math.round(num * 24.5)} mm]`;\r\n }\r\n\r\n render() {\r\n const {\r\n results: { isFetching, studFilterValue },\r\n } = this.props;\r\n const { apiFilter, skippedFilter } = this.state;\r\n\r\n if (isFetching) {\r\n return Success! The following ConMet Stud is recommended
\r\n\r\n \r\n \r\n
\r\n {result.map((data, i) => (\r\n \r\n {\r\n data.Images && data.Images.map((image) => (\r\n // \r\n 
\r\n ))\r\n }\r\n \r\n \r\n
\r\n
\r\n ))}\r\n | Stud Number | \r\n{data.StudNumber} | \r\n
| Chart Description | \r\n{data.ChartDescription} | \r\n
| Dimension A Inches | \r\n{data.DimensionA} | \r\n
| Dimension B Inches | \r\n{data.DimensionB} | \r\n
| Dimension C Inches | \r\n{data.DimensionC} | \r\n
| Dimension D Inches | \r\n{data.DimensionD} | \r\n
\r\n
\r\n \r\n );\r\n }\r\n\r\n return {message}
\r\n\r\n {image && (\r\n \r\n {item.Images && item.Images.length && !image && (\r\n // \r\n
\r\n );\r\n })}\r\n \r\n
\r\n )}\r\n\r\n {studFilterValue.map((item, index) => {\r\n return (\r\n \r\n this.handleFilterClick(item, apiFilter)}\r\n >\r\n {this.renderButton(item)}\r\n \r\n
\r\n Stud Filter
;\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => state;\r\nexport default connect(mapStateToProps)(StudFilter);\r\n","import React, {Component} from 'react';\r\nimport {connect} from 'react-redux';\r\nimport {fetchStudFilterValues} from '../../actions';\r\nimport Spinner from '../../components/global/spinner';\r\nimport StudResult from './studResult';\r\n\r\nclass StudFilters extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n cFilter: '',\r\n };\r\n this.getFilterValue = this.getFilterValue.bind(this);\r\n }\r\n\r\n componentWillMount() {\r\n this.getFilterValue(this.props);\r\n }\r\n\r\n componentWillReceiveProps(newProps) {\r\n this.getFilterValue(newProps);\r\n }\r\n\r\n\r\n getFilterValue(props) {\r\n const {match, dispatch, location, results: {isFetching}} = props;\r\n const {currentFilter, filters} = match.params;\r\n const {cFilter} = this.state;\r\n if(currentFilter === 'sdnum' && !isFetching && cFilter !== currentFilter){\r\n dispatch(fetchStudFilterValues(currentFilter, `${filters ? `${filters}&` : ''}inclv=1&${currentFilter}=${location.query.sdnum}`));\r\n this.setState({cFilter: currentFilter});\r\n }\r\n }\r\n\r\n render() {\r\n const {results: {isFetching, studFilterValue}} = this.props;\r\n\r\n if (isFetching) {\r\n return Stud Filter
\r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => state;\r\nexport default connect(mapStateToProps)(StudFilters);\r\n","import React, { Component } from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport { fetchRotorNumber, saveBrakeRotorNumber }\r\n from \"../../actions\";\r\nimport { push } from \"react-router-redux\";\r\nimport Autocomplete from \"react-autocomplete\";\r\n\r\nclass ReplacementRotorSearch extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n value: \"\",\r\n rotorNumber: [],\r\n loading: false,\r\n url: \"\",\r\n };\r\n }\r\n\r\n doSearch(e) {\r\n e.preventDefault();\r\n if (\r\n this.state.rotorNumber.length === 1 &&\r\n this.state.rotorNumber[0].CompetitorBrakeRotorId\r\n ) {\r\n this.hubAssemblyFilters(this.state.rotorNumber[0]);\r\n } else if (\r\n this.state.value !== \"\" &&\r\n this.state.rotorNumber.length === 0 &&\r\n !this.state.loading\r\n ) {\r\n this.props.dispatch(push(\"/hub/no-results\"));\r\n }\r\n }\r\n\r\n hubAssemblyFilters(data) {\r\n const { dispatch } = this.props;\r\n dispatch(saveBrakeRotorNumber(data.BrakeRotorNumber));\r\n setTimeout(() => {\r\n dispatch(\r\n push(\r\n \"/hub/replacement-rotor/recommended-rotors/\" +\r\n data.CompetitorBrakeRotorId\r\n )\r\n );\r\n }, 100);\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n )}\r\n renderMenu={(items, value) => (\r\n Enter your rotor number
\r\n\r\n {value === \"\" ? (\r\n
\r\n )}\r\n />\r\n \r\n Type ConMet or Competitor rotor number\r\n
\r\n ) : this.state.loading ? (\r\n Loading...
\r\n ) : items.length === 0 ? (\r\n No matches for {value}
\r\n ) : (\r\n items\r\n )}\r\n \r\n Some examples: \"Gunite\", “ConMet 10041006”, \"Durabrake 72201A”\r\n
\r\n \n
\n );\n }\n}\n\nconst s = (state) => state\nexport default connect(s)(ReplacementRotorDetail)\n","import React from \"react\";\r\nimport { Link } from \"react-router-dom\";\r\n\r\nclass ReplacementDrum extends React.Component {\r\n render() {\r\n return (\r\n Product Details
\n {\n rotorDetail.map((item) => {\n return (\n\n
\n )\n })\n }\n \n {/* { 
} */}\n {
}\n
\n } */}\n {\n \n \n
\n
\n Product Specs
\n| Brake Rotor Number | \n{item.BrakeRotorNumber} | \n
| Rotor Type | \n{item.BrakeRotorType} | \n
| AOverall Length | \n{item.OverallLength} inch | \n
| BBrake Surface Outside Diameter | \nØ{item.BrakeSurfaceOutsideDiameter} inch | \n
| CThickness | \n{item.Thickness} inch | \n
| DPilot Diameter | \nØ {item.PilotDiameter} inch | \n
| EBolt Circle | \nØ{item.BoltCircle} inch | \n
| FBolt Size | \n{item.BoltSize} | \n
| Number of Bolt Holes | \n{item.BoltHoleNumber} | \n
\n Installation Instructions:\n {item.Instruction.map((a) => {\n if(a.BrakeRotorKitNumber && history.location.pathname.includes(a.BrakeRotorKitNumber)){\n return (\n Kit Number {history.location.pathname.split('/')[5]} \n );\n }\n })}\n
\n {\n e.preventDefault();\n history.goBack()\n }} className=\"general-button\">Return to results\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default ReplacementDrum;\r\n","import React, { Component } from 'react';\r\nimport { push } from 'react-router-redux';\r\nimport { connect } from 'react-redux';\r\nimport {\r\n fetchDrumFilterValues,\r\n fetchDrumFilterCategories,\r\n resetDrumFilter,\r\n} from '../../actions';\r\nimport Waiting from '../../components/global/waiting';\r\nimport DrumResult from './drumResult';\r\n\r\nclass ReplacementDrumFilter extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.getFilterValue = this.getFilterValue.bind(this);\r\n this.handleFilterClick = this.handleFilterClick.bind(this);\r\n\r\n this.state = {\r\n filters: [],\r\n urlParams: '',\r\n isResult: false,\r\n skipFilter: {},\r\n filterClicked: false,\r\n };\r\n }\r\n\r\n componentWillMount() {\r\n const { dispatch } = this.props;\r\n dispatch(resetDrumFilter());\r\n dispatch(fetchDrumFilterCategories());\r\n }\r\n\r\n componentWillUnmount() {\r\n const { dispatch } = this.props;\r\n dispatch(resetDrumFilter());\r\n }\r\n\r\n componentDidMount() {\r\n this.getFilterValue();\r\n }\r\n\r\n getFilterValue() {\r\n const { results, match, dispatch } = this.props;\r\n const { drumFilters, drumFilterValue } = results;\r\n const {\r\n filters,\r\n urlParams,\r\n currentFilter,\r\n isResult,\r\n skipFilter,\r\n } = this.state;\r\n\r\n this.state.urlParams = match.params.filters ? match.params.filters : '';\r\n\r\n if (drumFilters.length) {\r\n this.state.filters = drumFilters.map((item) => item.QueryParameterName);\r\n }\r\n\r\n let filterParams = match.params.filters\r\n ? '?inclv=2&' + match.params.filters\r\n : '?inclv=2';\r\n this.state.url = filterParams;\r\n\r\n if (drumFilters.length && !match.params.currentFilter) {\r\n dispatch(\r\n push('/hub/replacement-drum/filter/' + this.state.filters[1])\r\n );\r\n this.state.skipFilter = []; // when back button is pressed\r\n } \r\n else if (match.params.currentFilter !== this.state.currentFilter) {\r\n if (results.currentFilter !== 'brnum' || (!isResult && match.params.currentFilter !== 'holes')) {\r\n dispatch(fetchDrumFilterValues(match.params.currentFilter, filterParams));\r\n this.state.currentFilter = match.params.currentFilter;\r\n }\r\n\r\n if (\r\n results.currentFilter === 'brnum' &&\r\n isResult &&\r\n drumFilterValue &&\r\n drumFilterValue[0] &&\r\n drumFilterValue[0].BrakeDrumNumber\r\n ) {\r\n this.state.isResult = false;\r\n }\r\n\r\n if (currentFilter === 'bcdia') {\r\n dispatch(fetchDrumFilterValues(filters[0], filterParams));\r\n }\r\n this.state.filterClicked = false;\r\n } \r\n else if (\r\n drumFilterValue?.length === 1 &&\r\n results.isFilterValueSingle &&\r\n currentFilter &&\r\n drumFilters.length\r\n ) {\r\n const index = filters.indexOf(results.currentFilter);\r\n const id =\r\n drumFilterValue[0].Id !== undefined\r\n ? drumFilterValue[0].Id\r\n : drumFilterValue[0];\r\n\r\n if (this.state.url === '') {\r\n this.state.url = filterParams;\r\n }\r\n if (results.currentFilter === 'bcdia') {\r\n this.state.url += '&' + filters[0] + '=' + id;\r\n dispatch(fetchDrumFilterValues(filters[0], this.state.url));\r\n this.state.currentFilter = 'brnum';\r\n this.state.isResult = true;\r\n this.state.skipFilter = [];\r\n } else {\r\n this.state.url += '&' + filters[index] + '=' + id;\r\n if (this.state.filterClicked) {\r\n this.state.skipFilter = { ...skipFilter, [filters[index]]: id };\r\n }\r\n this.state.filterClicked = false;\r\n if (filters[index + 1] !== 'pidia' || results.lastFilter !== 'pidia') {\r\n dispatch(\r\n fetchDrumFilterValues(filters[index + 1], this.state.url, false)\r\n );\r\n }\r\n }\r\n }\r\n }\r\n\r\n handleFilterClick(id) {\r\n const { dispatch, results } = this.props;\r\n const { currentFilter } = results;\r\n const { filters, urlParams, skipFilter } = this.state;\r\n const index =\r\n currentFilter === 'bcdia' ? -1 : filters.indexOf(currentFilter);\r\n this.state.filterClicked = true;\r\n this.state.urlParams +=\r\n urlParams === ''\r\n ? currentFilter + '=' + id\r\n : '&' + currentFilter + '=' + id;\r\n\r\n let url = this.state.urlParams;\r\n if (skipFilter !== undefined) {\r\n const skippedFilter = Object.keys(skipFilter);\r\n if (skippedFilter.length) {\r\n url +=\r\n '&' +\r\n skippedFilter.map((key) => key + '=' + skipFilter[key]).join('&');\r\n }\r\n this.state.skipFilter = [];\r\n }\r\n\r\n dispatch(\r\n push('/hub/replacement-drum/filter/' + filters[index + 1] + '/' + url)\r\n );\r\n }\r\n\r\n componentDidUpdate() {\r\n this.getFilterValue();\r\n }\r\n\r\n render() {\r\n const { results } = this.props;\r\n const { drumFilterValue, currentFilter } = results;\r\n const { isResult } = this.state;\r\n\r\n if (results.isFetching) {\r\n return Do you know your drum number?
\r\n\r\n \r\n YesI know the drum number\r\n \r\n
\r\n \r\n \r\n NoProceed without the number\r\n \r\n
\r\n \r\n
\r\n );\r\n }\r\n\r\n if (currentFilter === 'holes' && drumFilterValue) {\r\n return (\r\n {message}
\r\n {currentFilter === 'pidia' ? (\r\n\r\n {drumFilterValue?.map((item) => {\r\n return (\r\n
\r\n \r\n
\r\n );\r\n })}\r\n \r\n this.handleFilterClick(item)}\r\n >\r\n ⌀ {item} inch{' '}\r\n {currentFilter === 'pidia' && item === 8.78\r\n ? '- Most common'\r\n : ''}\r\n \r\n
\r\n \r\n
\r\n );\r\n }\r\n\r\n if (currentFilter === 'tmake' && !isResult) {\r\n return (\r\n Choose the Stud Hole count
\r\n\r\n {drumFilterValue.map((item) => {\r\n return (\r\n
\r\n \r\n
\r\n );\r\n })}\r\n \r\n this.handleFilterClick(item?.Id ?? item)}\r\n >\r\n {item?.Name ?? item}\r\n \r\n
\r\n \r\n
\r\n );\r\n }\r\n\r\n if (currentFilter === 'axpos' && !isResult) {\r\n return (\r\n Choose the truck make
\r\n\r\n {drumFilterValue.map((item) => {\r\n return (\r\n
\r\n \r\n
\r\n );\r\n })}\r\n \r\n this.handleFilterClick(item.Id)}\r\n >\r\n {item.Name}\r\n \r\n
\r\n \r\n
\r\n );\r\n }\r\n\r\n return (\r\n Choose the axle position
\r\n\r\n {drumFilterValue.map((item) => {\r\n return (\r\n
\r\n \r\n
\r\n );\r\n })}\r\n \r\n this.handleFilterClick(item.Id)}\r\n >\r\n {item.Name}\r\n \r\n
\r\n \r\n {isResult ?
\r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => state;\r\nexport default connect(mapStateToProps)(ReplacementDrumFilter);\r\n","import React, { Component } from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport { fetchDrumNumber } from \"../../actions\";\r\nimport { push } from \"react-router-redux\";\r\nimport Autocomplete from \"react-autocomplete\";\r\n\r\nclass ReplacementDrumSearch extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n value: \"\",\r\n drumNumber: [],\r\n loading: false,\r\n url: \"\",\r\n };\r\n }\r\n\r\n doSearch(e) {\r\n e.preventDefault();\r\n const { drumNumber } = this.state;\r\n if (drumNumber.length === 1 && drumNumber[0].CompetitorDrumNumberId) {\r\n this.hubAssemblyFilters(drumNumber[0]);\r\n } else if (\r\n this.state.value !== \"\" &&\r\n this.state.drumNumber.length === 0 &&\r\n !this.state.loading\r\n ) {\r\n this.props.dispatch(push(\"/hub/no-results\"));\r\n }\r\n }\r\n\r\n hubAssemblyFilters(data) {\r\n this.props.dispatch(\r\n push(\r\n \"/hub/replacement-drum/recommended-drums/\" + data.CompetitorDrumNumberId\r\n )\r\n );\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n )}\r\n renderMenu={(items, value) => (\r\n Enter your drum number
\r\n\r\n {value === \"\" ? (\r\n
\r\n )}\r\n />\r\n \r\n Type ConMet or Competitor drum number\r\n
\r\n ) : this.state.loading ? (\r\n Loading...
\r\n ) : items.length === 0 ? (\r\n No matches for {value}
\r\n ) : (\r\n items\r\n )}\r\n \r\n Some examples: \"10009830\", “ConMet 10001776”, “Gunite 3141B”\r\n
\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => state;\r\nexport default connect(mapStateToProps)(ReplacementDrumDetail);\r\n","import React, { Component } from 'react';\r\nimport { connect } from 'react-redux';\r\nimport {\r\n fetchHubAssemblyFilters,\r\n fetchHubAssemblyNumber,\r\n fetchHubAssemblyFiltersWithNoResults,\r\n} from '../../actions';\r\nimport { push } from 'react-router-redux';\r\nimport Autocomplete from 'react-autocomplete';\r\n\r\nclass Results extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.doSearch = this.doSearch.bind(this);\r\n this.state = {\r\n value: '',\r\n assemblyNumber: [],\r\n loading: false,\r\n url: '',\r\n };\r\n }\r\n\r\n doSearch(e) {\r\n e.preventDefault();\r\n this.hubAssemblyFilters(\r\n this.state.assemblyNumber.CompetitorHubAssemblyNumberId\r\n );\r\n }\r\n\r\n hubAssemblyFilters(id) {\r\n if (id) {\r\n this.getResult(id);\r\n } else {\r\n if (this.state.assemblyNumber.length === 1) {\r\n this.getResult(\r\n this.state.assemblyNumber[0].CompetitorHubAssemblyNumberId\r\n );\r\n } else if (\r\n this.state.value !== '' &&\r\n this.state.assemblyNumber.length === 0 &&\r\n !this.state.loading\r\n ) {\r\n this.props.dispatch(push('/hub/no-results'));\r\n }\r\n }\r\n }\r\n\r\n getResult(id) {\r\n const { dispatch } = this.props;\r\n let url = '';\r\n dispatch(fetchHubAssemblyFilters(id)).then(() => {\r\n let filters = this.props.results.filters.Results;\r\n let HubAssemblyNumber = this.state.assemblyNumber[0].HubAssemblyNumber;\r\n if (filters === undefined) {\r\n dispatch(fetchHubAssemblyFiltersWithNoResults(id)).then(() => {\r\n this.props.dispatch(\r\n push('/hub/not-available/' + HubAssemblyNumber)\r\n );\r\n });\r\n } else {\r\n let i = 1,\r\n length = Object.keys(filters).length;\r\n\r\n Object.keys(filters).forEach((key) => {\r\n url +=\r\n i === length\r\n ? key + '=' + filters[key]\r\n : key + '=' + filters[key] + '&';\r\n i++;\r\n });\r\n\r\n this.props.dispatch(push('/hub/filters/' + url));\r\n }\r\n });\r\n }\r\n\r\n render() {\r\n return (\r\n Product Details
\r\n {drumDetail.map((item) => {\r\n return (\r\n\r\n {e.preventDefault();history.goBack()}}\r\n className=\"general-button\"\r\n >\r\n Return to results\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 {item.Notes && item.Notes.length ? (\r\n Product Specs
\r\n| Drum Number | \r\n{item.BrakeDrumNumber} | \r\n
| Status | \r\n{item.Status} | \r\n
| Type | \r\n{item.BrakeDrumType} | \r\n
| \r\n ASize - Diameter\r\n | \r\nØ {item.BrakeSizeDiameterInch} inch | \r\n
| \r\n BShoe Width\r\n | \r\n{item.BrakeSizeWidthInch} inch | \r\n
| \r\n CPilot Diameter\r\n | \r\nØ {item.PilotDiameterInch} inch | \r\n
| \r\n DOverall Depth\r\n | \r\n{item.DepthInch} inch | \r\n
| \r\n ESurface - Width\r\n | \r\n{item.DrumSurfaceWidthInch} inch | \r\n
| \r\n FFlange Thickness\r\n | \r\n{item.ThicknessInch} inch | \r\n
| \r\n GBolt Circle Diameter\r\n | \r\nØ{item.BoltCircleDiameterInch} inch | \r\n
| \r\n HBolt Hole Diameter\r\n | \r\nØ{item.BoltHoleDiameterInch} inch | \r\n
| Number of Holes | \r\n{item.WheelStudHoleCount} | \r\n
| Ball Seat Nut Compatible | \r\n{item.IsBsnCompatible ? 'Yes' : 'No'} | \r\n
| Weight (lbs.) | \r\n{item.WeightPound} Lbs | \r\n
\r\n \r\n \r\n {item.Notes.map((n, index) => {\r\n return (\r\n
\r\n
\r\n ) : (\r\n ''\r\n )}\r\n\r\n {item.Interchanges && item.Interchanges.length ? (\r\n Notes
\r\n| {n} | \r\n
\r\n \r\n \r\n
\r\n
\r\n ) : (\r\n ''\r\n )}\r\n | Interchangeable drums | \r\n|||
| \r\n | \r\n \r\n {item.Type}\r\n {item.IsBsnCompatible ? '*' : null}\r\n | \r\n{item.WeightPound} Lbs | \r\n {item.IsBestMatch ?Best Match | : null}\r\n
*BSN Compatible
\r\n \r\n
\r\n )}\r\n renderMenu={(items, value) => (\r\n Enter your hub assembly number
\r\n\r\n {value === '' ? (\r\n
\r\n )}\r\n />\r\n \r\n Type ConMet or Competitor assembly number\r\n
\r\n ) : this.state.loading ? (\r\n Loading...
\r\n ) : items.length === 0 ? (\r\n No matches for {value}
\r\n ) : (\r\n items\r\n )}\r\n \r\n Some examples: “104444”, “ConMet 10031065”, “Gunite 5669‑1”, “Webb\r\n 20231‑‑1T‑71”\r\n
\r\n \n
\n );\n } else {\n return (\n Best Value:
\n - \n
- Extended Warranty \n
- Less Downtime \n
- Simplified Process \n {/*
- Liability Protection */}\n
\n
\n );\n }\n }\n}\n\nclass SetLink extends Component {\n render() {\n const note = this.props.note;\n let str = note.Text;\n let links = note.Links;\n let IBLink = note.IBLink;\n if(links){\n let matches = str.match(/{{(.*?)}}/g) || [];\n matches = matches.map(function (n, idx) {\n if (links.length > 0) {\n return [\n n,\n n\n .replace(\n \"{{\",\n ''\n )\n .replace(\"}}\", \"\"),\n ];\n }\n });\n matches.forEach((item) => {\n str = str.replace(item[0], item[1]);\n });\n return (\n \n );\n }else{\n return Requires:
\n - \n
- Bearing Cones \n
- Seal \n
- Manual Adjustment \n
{str}
;\n }\n }\n}\n\nclass Result extends Component {\n render() {\n const {\n results,\n spindleNut,\n selectedHubAssemblyNumber,\n short_studs,\n } = this.props;\n const selectedNumber = selectedHubAssemblyNumber\n ? selectedHubAssemblyNumber.split(\" \")[1]\n : \"\";\n \n\n return (\n \n
\n );\n })}\n {spindleNut && (\n Success!
\n {selectedHubAssemblyNumber ? (\nfor {selectedHubAssemblyNumber}
\n ) : (\n \"\"\n )}\n\n {results.map((item, index) => {\n let assemblyType = item.AftermarketDescription.toLowerCase().includes(\n \"preset\"\n );\n return (\n \n \n {`${short_studs[index].HubAssemblyNumber} (Long stud version)`}\n
\n )}\n \n {assemblyType ? \"PreSet\" : \"Conventional\"}\n
\n {item.HubAssemblyNumber}
\n {short_studs && short_studs[index] && (\n \n 5 years/500,000 mile warranty when installed with PreSet Plus\n Spindle Nut: {spindleNut} ( PreSet Hubs Only)\n
\n )}\n {spindleNut && (\n \n {\" \"}\n *For full warranty details click{\" \"}\n \n {\" \"}\n here.\n \n
\n )}\n\n {results.map((item, index) => {\n return (\n */}\n {/**/}\n {/*Compare*/}\n {/**/}\n {/*
*/}\n {/*)}*/}\n \n ConMet Wheel End Disclaimer
*/}\n \n );\n }\n}\n\nexport default connect()(Result);\n","import React, { Component } from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport { showResultAtIndex } from \"../../../actions\";\r\n\r\nclass ResultButton extends Component {\r\n render() {\r\n let { idx, currentIdx, handleClick } = this.props;\r\n return (\r\n {buttons}
;\r\n }\r\n}\r\n\r\nexport default connect()(ResultNavigation);\r\n","import React, { Component } from 'react';\r\nimport {\r\n fetchFilterValues,\r\n fetchHubsCrossApi,\r\n fetchHubsSpindleNut,\r\n invalidateHubStuds,\r\n} from '../../actions';\r\nimport { fetchCategories } from '../../actions/categories';\r\nimport { push } from 'react-router-redux';\r\nimport { connect } from 'react-redux';\r\nimport Spinner from '../global/spinner';\r\nimport Result from './details/hub-results';\r\nimport HubSingleResult from './details/result';\r\nimport ResultNavigation from './details/result-navigation';\r\n\r\nclass Filters extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n filters: [],\r\n filter_name: [],\r\n current_filter: null,\r\n results: [],\r\n isFetching: false,\r\n spindleNut: '',\r\n url: '',\r\n };\r\n }\r\n\r\n componentWillMount() {\r\n let filters = this.props.match.params.filters;\r\n this.props.dispatch(fetchCategories()).then(() => {\r\n if (filters) {\r\n this.setFilters(filters);\r\n }\r\n });\r\n }\r\n\r\n componentWillReceiveProps(newProps) {\r\n if (this.state.url && this.state.url !== newProps.match.params.filters) {\r\n this.setFilters(newProps.match.params.filters);\r\n }\r\n }\r\n\r\n componentWillUnmount() {\r\n const { dispatch } = this.props;\r\n dispatch(invalidateHubStuds());\r\n }\r\n\r\n setFilters(filters) {\r\n let result = {};\r\n filters.split('&').forEach(function (x) {\r\n let arr = x.split('=');\r\n arr[1] && (result[arr[0]] = arr[1]);\r\n });\r\n this.state.filters = result;\r\n this.state.url = filters;\r\n\r\n let categories = this.props.app.categories;\r\n let j = 0;\r\n\r\n Object.keys(categories).forEach((key) => {\r\n if (\r\n result.hasOwnProperty(categories[key].QueryParameterName) === false &&\r\n categories[key].QueryParameterName !== 'tmake' &&\r\n categories[key].QueryParameterName !== 'gawrr' &&\r\n categories[key].QueryParameterName !== 'wssdi'\r\n ) {\r\n this.state.filter_name[j] = categories[key].QueryParameterName;\r\n j++;\r\n }\r\n });\r\n\r\n this.getFilterValues();\r\n }\r\n\r\n getFilterValues() {\r\n const { dispatch } = this.props;\r\n\r\n if (\r\n this.state.current_filter === 'hatyp' ||\r\n this.state.filter_name[0] === undefined ||\r\n this.state.filter_name[0] === 'hatyp'\r\n ) {\r\n this.hubCrossApi();\r\n\r\n // Fetch Hub Studs\r\n const { filters } = this.state;\r\n if (filters && filters['wmslc'] === '1') {\r\n const t = Object.keys(filters)\r\n .filter((key) => key !== 'hanum')\r\n .map((key) => [key, filters[key]].map(encodeURIComponent).join('='))\r\n .join('&');\r\n const studFilter = t.toLowerCase().replace('wmslc=1', 'wmslc=2');\r\n dispatch(fetchHubsCrossApi(studFilter, true));\r\n } else {\r\n dispatch(invalidateHubStuds());\r\n }\r\n } else {\r\n dispatch(\r\n fetchFilterValues(this.state.filter_name[0], this.state.url)\r\n ).then(() => {\r\n let results = this.props.results.filter_value.Results;\r\n this.setState({\r\n current_filter: this.state.filter_name[0],\r\n isFetching: false,\r\n results: [],\r\n });\r\n this.state.filter_name.shift();\r\n if(this.state.current_filter === 'brdia' || this.state.current_filter === 'abcoi'){\r\n this.state.filters[this.state.current_filter] = results[0]['Inch'];\r\n delete this.state.filters['wssdi']\r\n }\r\n // if(this.state.current_filter === 'gawrr'){\r\n // if(results.CanSkipThisFilter !== undefined && results.CanSkipThisFilter){\r\n // this.state.filter_name[this.state.current_filter] = 0;\r\n // this.getFilterValues();\r\n // }\r\n // }\r\n\r\n if (results.length === 1) {\r\n this.state.filter_name[this.state.current_filter] = results[0].Id;\r\n this.getFilterValues();\r\n }\r\n });\r\n }\r\n }\r\n\r\n handleFilterClick(e) {\r\n e.preventDefault();\r\n this.state.isFetching = true;\r\n let id = e.currentTarget.id;\r\n if (id) {\r\n let url = this.state.url;\r\n url += '&' + this.state.current_filter + '=' + id;\r\n this.props.dispatch(push('/hub/filters/' + url));\r\n }\r\n }\r\n\r\n hubCrossApi() {\r\n let url = this.state.url;\r\n url += '&inclv=1';\r\n let _self = this;\r\n this.props.dispatch(fetchHubsCrossApi(url)).then(() => {\r\n _self.setState({ results: _self.props.results.items.Results });\r\n let partNumber = '';\r\n _self.state.results.map((item, id) => {\r\n partNumber +=\r\n id + 1 === _self.state.results.length\r\n ? item.HubAssemblyNumber\r\n : item.HubAssemblyNumber + ',';\r\n });\r\n\r\n _self.props.dispatch(fetchHubsSpindleNut(partNumber)).then(() => {\r\n let spindleNut = '';\r\n if (_self.props.results.spindleNut !== undefined) {\r\n _self.props.results.spindleNut[0].AftermarketParts.map((item, id) => {\r\n let washer_description = '';\r\n if (\r\n item.Description.toLowerCase().includes('hub service kit') &&\r\n item.Description.toLowerCase().includes('ff')\r\n ) {\r\n if (item.TypeId === 226) {\r\n washer_description = ' (D Flat)';\r\n } else if (item.TypeId === 227) {\r\n washer_description = ' (Keyway)';\r\n }\r\n }\r\n\r\n spindleNut +=\r\n id + 1 ===\r\n _self.props.results.spindleNut[0].AftermarketParts.length\r\n ? item.PartNumber + washer_description\r\n : item.PartNumber + washer_description + ',';\r\n });\r\n _self.setState({ spindleNut: spindleNut });\r\n }\r\n });\r\n });\r\n }\r\n\r\n render() {\r\n let current_filter = this.state.current_filter;\r\n let isFetching = this.state.isFetching;\r\n let filter_value = this.props.results.filter_value.Results;\r\n let results = this.state.results;\r\n const {\r\n results: { short_studs },\r\n } = this.props;\r\n\r\n if (this.props.results.isSpindleNutFetching) {\r\n return \r\n
\r\n );\r\n } else if (\r\n current_filter === 'wmslc' &&\r\n !isFetching &&\r\n !(results.length > 0)\r\n ) {\r\n return (\r\n Choose the GAWR (Gross Axle Weight Rating)
\r\n\r\n {filter_value.map((key) => {\r\n return (\r\n
\r\n \r\n
\r\n );\r\n })}\r\n \r\n \r\n {key.DisplayRange}\r\n \r\n
\r\n \r\n
\r\n );\r\n } else if (\r\n (current_filter === 'hcmty' || current_filter === 'hatyp') &&\r\n !isFetching &&\r\n !(results.length > 0)\r\n ) {\r\n return (\r\n Choose the wheel type (determine wheel stud length)
\r\n\r\n {filter_value.map((key) => {\r\n return (\r\n
\r\n \r\n
\r\n );\r\n })}\r\n \r\n \r\n {key.WheelMaterial} - {key.StudLengthClass}\r\n \r\n
\r\n \r\n
\r\n );\r\n } else if (results.length > 0 && results.length === 2) {\r\n return (\r\n \r\n {current_filter === 'hcmty'\r\n ? 'Choose the hub material'\r\n : 'Choose the hub assembly type'}\r\n
\r\n\r\n {filter_value.map((key) => {\r\n return (\r\n
\r\n \r\n
\r\n );\r\n })}\r\n \r\n \r\n {key.Name}\r\n \r\n
\r\n \r\n {this.props.results.items.Results.map((item, index) => {\r\n if (index === this.props.results.selectedIdx) {\r\n return (\r\n
\r\n );\r\n } else {\r\n return \n {results.map((item, index) => {\n if (index === this.props.results.selectedIdx) {\n return (\n
\n )\n } else {\n return (\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nexport default CompareItem;\r\n","import React, { Component } from 'react';\r\nimport Spinner from '../../components/global/spinner';\r\nimport { fetchCompareAssemblyDetails } from '../../actions/assembly';\r\nimport { connect } from 'react-redux';\r\nimport CompareItem from '../../components/hub/compare-item';\r\n\r\nconst propertyLabels = {\r\n Status: 'Status',\r\n Material: 'Material',\r\n AxlePosition: 'Axle Position',\r\n Axle: 'Axle',\r\n HubAssemblyType: 'Assembly Type',\r\n BearingNumberInboard: 'Bearing Cup or Set (Inboard)',\r\n BearingNumberOutboard: 'Bearing Cup or Set (Outboard)',\r\n BrakeType: 'Compatible Brake Type',\r\n HubMountingSystem: 'Hub Mounting System',\r\n WheelStudStandoutInch: 'Wheel Stud Standout (in.)',\r\n WheelMaterial: 'Wheel Material',\r\n FlangeOffsetInch: 'Flange Offset (in.)',\r\n WeightPound: 'Weight (lbs.)',\r\n ABSRingIncluded: 'Is ABS Ring Included',\r\n HubRatingPound: 'Hub Rating (LB)',\r\n WheelStudBoltCircleDiameterInch: 'Wheel Stud Bolt Circle Diameter Inch',\r\n AbsRingNumber: 'ABS Ring',\r\n WheelStudThread: 'Wheel Stud Thread',\r\n BearingConesIncluded: 'Bearing Cones Included',\r\n SealIncluded: 'Seal Included',\r\n FillHole: 'Fill Hole',\r\n AbsOffsetInch: 'Abs Offset Inch',\r\n AxleStudThread: 'Axle Stud Thread',\r\n SmallBackface: 'Small Back face',\r\n BrakeRotorDepth: 'Brake Rotor Depth',\r\n BrakeRotorOffset: 'Brake Rotor Offset',\r\n BrakeRotorThickness: 'Brake Rotor Thickness',\r\n BrakeRotorType: 'Brake Rotor Type',\r\n \r\n};\r\n\r\nclass CompareAssembly extends Component {\r\n componentDidMount() {\r\n const { dispatch, match } = this.props;\r\n const ids = Object.keys(match.params)\r\n .map((i) => match.params[i])\r\n .join(',');\r\n dispatch(fetchCompareAssemblyDetails(ids));\r\n }\r\n\r\n render() {\r\n const { assembly, history } = this.props;\r\n const {\r\n compare: { results, differentProperties },\r\n } = assembly;\r\n\r\n if (assembly.isFetching) {\r\n return \r\n {label}\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n {this.changeProperty(item[property], property, item)}
\r\n {this.changeProperty(nextItem[property], property, nextItem)}
\r\n \r\n
\r\n Compare Details
\r\n\r\n\r\n {results.map((item, index) => {\r\n return (\r\n \r\n {keys.map((key, index) => {\r\n return (\r\n
\r\n );\r\n })}\r\n \r\n {item.Images && item.Images[0] && (\r\n
\r\n );\r\n })}\r\n {item.Description}
\r\n \r\n {item.PartNumber}\r\n
\r\n \r\n Below rows are expanded to highlight differences. Collapsed rows are\r\n the same between the two hubs.\r\n
\r\n\r\n {results.map((item, index) => {\r\n const keys = Object.keys(propertyLabels);\r\n const nextItem = results[index + 1];\r\n\r\n if (index) {\r\n return null;\r\n }\r\n\r\n return (\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nclass Results extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n results: [],\r\n newResults: [],\r\n spindleNut: '',\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n const { dispatch, app, match } = this.props;\r\n if (match.params.id) {\r\n dispatch(fetchHubs(match.params.id));\r\n } else {\r\n dispatch(fetchAssembly(app));\r\n const { wmslc } = app.filterState;\r\n if (wmslc && wmslc === 1) {\r\n let searchParams = getAppSearchParams(app)\r\n .toLowerCase()\r\n .replace('wmslc=1', 'wmslc=2');\r\n dispatch(fetchHubsCrossApi(searchParams, true));\r\n }\r\n }\r\n\r\n dispatch(pushFilterHistory('/hub/results'));\r\n }\r\n\r\n componentWillUnmount() {\r\n const { dispatch } = this.props;\r\n dispatch(invalidateHubStuds());\r\n }\r\n\r\n componentWillReceiveProps(newProps) {\r\n const { results, dispatch } = newProps;\r\n this.state.newResults = results;\r\n if (\r\n !results.isFetching &&\r\n !(results.items.length === 0) &&\r\n results.items[0] &&\r\n (this.state.results.items === undefined ||\r\n results.items[0].PartNumber !== this.state.results.items[0].PartNumber)\r\n ) {\r\n this.setState({ results: results });\r\n let partNumber = '';\r\n if (results.items && results.items.length) {\r\n results.items.map((item, id) => (\r\n partNumber +=\r\n id + 1 === results.items.length\r\n ? item.HubAssemblyNumber\r\n : item.HubAssemblyNumber + ','\r\n ));\r\n }\r\n if (partNumber) {\r\n dispatch(fetchHubsSpindleNut(partNumber)).then(() => {\r\n let spindleNut = '';\r\n if (this.state.newResults.spindleNut !== undefined) {\r\n this.state.newResults.spindleNut[0].AftermarketParts.map(\r\n (item, id) => {\r\n let washer_description = '';\r\n if (\r\n item.Description.toLowerCase().includes('hub service kit') &&\r\n item.Description.toLowerCase().includes('ff')\r\n ) {\r\n if (item.TypeId === 226) {\r\n washer_description = ' (D Flat)';\r\n } else if (item.TypeId === 227) {\r\n washer_description = ' (Keyway)';\r\n }\r\n }\r\n\r\n spindleNut +=\r\n id + 1 ===\r\n this.state.newResults.spindleNut[0].AftermarketParts.length\r\n ? item.PartNumber + washer_description\r\n : item.PartNumber + washer_description + ',';\r\n }\r\n );\r\n this.setState({ spindleNut: spindleNut });\r\n }\r\n });\r\n }\r\n }\r\n }\r\n\r\n render() {\r\n const { results, materialFilter, dispatch, app } = this.props;\r\n if (app.filterState.aaxna === 82) {\r\n return (\r\n Choose the Hub Material
\r\n\r\n\r\n \r\n Iron\r\n \r\n
\r\n\r\n \r\n \r\n Aluminum\r\n \r\n
\r\n \r\n {/*
\r\n );\r\n }\r\n\r\n if (results.isFetching || results.isSpindleNutFetching) {\r\n return Success! The following hub is recommended
*/}\r\n\r\n
\r\n \r\n
\r\n \r\n Volvo/Mack unitized hub assemblies can be identified by their\r\n 8-sided, thread-on hubcaps and parallel, closely-spaced\r\n bearings.\r\n
\r\n\r\n\r\n
\r\n\r\n \r\n Volvo/Mack unitized hub assemblies are not serviceable, please\r\n contact your local Volvo/Mack dealer for service enquiries.{' '}\r\n
\r\n\r\n ConMet Wheel End Disclaimer\r\n
\r\n \r\n {results.items.map((item, index) => {\r\n if (index === results.selectedIdx) {\r\n return (\r\n
\r\n );\r\n } else {\r\n return ;\r\n }\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => state;\r\nexport default connect(mapStateToProps)(Results);\r\n","import React, { Component } from 'react';\nimport classNames from \"classnames\";\n\nexport default class extends Component {\n constructor() {\n super();\n\n this.state = {\n rebuildKitActive: false,\n dropDownInboardActive: false,\n dropDownOutboardActive: false,\n };\n\n this.renderRebuildKit = this.renderRebuildKit.bind(this);\n this.renderDropDown = this.renderDropDown.bind(this);\n }\n\n renderRebuildKit() {\n const { parts: { rebuildKitDetails }, rebuildKitNumber } = this.props;\n const presetRebuild = [];\n\n if (rebuildKitDetails && rebuildKitDetails.length) {\n presetRebuild.push(\n | Inner Bearing | \n{item.BearingSetNumberInboard} | \n
| Outer Bearing | \n{item.BearingSetNumberOutboard} | \n
| Seal & Spacer | \n{item.SealAndSpacerKitNumber} | \n
| CUP | \n{type === 'Inboard' ? bearingNumberInboard.split(['CUP :'])[1] : bearingNumberOutboard.split(['CUP :'])[1] } | \n
| Cone | \n{type === 'Inboard' ? result.BearingConeNumberInboard : result.BearingConeNumberOutboard} | \n
\n \n \n
\n
\n )\n }\n};\n","import React, {Component} from 'react';\r\nimport {connect} from 'react-redux';\r\n\r\nclass Meta extends Component {\r\n render() {\r\n const {result} = this.props;\r\n return (\r\n Product Specs
\n| Material | \n{result.Material} | \n
| Axle Position | \n{result.AxlePosition} | \n
| Axle | \n{result.Axle} | \n
| Assembly Type | \n{result.HubAssemblyType} | \n
| Casting | \n{result.HubCastingNumber} | \n
| Compatible Brake Type | \n{result.BrakeType} | \n
| Rotor Type | \n{result.BrakeRotorType} | \n
| Replacement Rotor Kit | {replacementRotorKit[0][\"PartNumber\"]} |
| Hub Mounting System | \n{result.HubMountingSystem} | \n
| Wheel Stud Standout (in.) | \n{result.WheelStudStandoutInch} | \n
| Wheel Material | {result.WheelMaterial} |
| Axle Stud Thread | {result.AxleStudThread} |
| Flange Offset (in.) | \n{result.FlangeOffsetInch} | \n
| Brake Drum Pilot (in.) | \n{result.BrakeDrumPilotDiameter} | \n
| Barrel Length | \n{result.BarrelLength} | \n
| ABS TONE RING INCLUDED | \n{(result.ABSRingIncluded?\"YES\":\"NO\")} | \n
| Weight (lbs.) | \n{result.WeightPound} | \n
| Conventional Hub Option | {result.ConventionalHubNumber} |
\r\n {\r\n result ? result.Images.map((image, index) => {\r\n if (index === 0) {\r\n return (\r\n
\r\n {result ? result.PartNumber: ''}\r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => state;\r\nexport default connect(mapStateToProps)(Meta);\r\n","import {\r\n\tAPI,\r\n\tV2KEY,\r\n\tZERO_RESULTS,\r\n\tRECIEVE_PARTS,\r\n\tREQUEST_PARTS,\r\n\tINVALIDATE_PARTS,\r\n HUBASSEMBLY_NUMBER_DATA,\r\n REBUILD_KIT_DETAILS\r\n} from '../config/constants';\r\nimport fetch from 'isomorphic-fetch';\r\n\r\n\r\nexport const requestParts = (hubId) => {\r\n return {\r\n type: REQUEST_PARTS,\r\n hubId\r\n }\r\n}\r\n\r\nexport const receiveParts = (hubId, json, date = Date.now()) => {\r\n let HubAssemblyDescription = ''\r\n\tlet HubAssemblyNumber = ''\r\n\tlet AftermarketParts = []\r\n\tif (json.Status !== ZERO_RESULTS) {\r\n\t\tHubAssemblyDescription = json.Results[0].HubAssemblyDescription\r\n\t\tHubAssemblyNumber = json.Results[0].HubAssemblyNumber\r\n\t\tAftermarketParts = json.Results[0].AftermarketParts\r\n\t}\r\n return {\r\n type: RECIEVE_PARTS,\r\n\t\thubId,\r\n HubAssemblyDescription:HubAssemblyDescription,\r\n\t\tHubAssemblyNumber:HubAssemblyNumber,\r\n\t\tAftermarketParts: AftermarketParts,\r\n receivedAt: date,\r\n status: json.Status\r\n }\r\n}\r\n\r\nexport const fetchParts = (hubId) => {\r\n return dispatch => {\r\n dispatch(requestParts(hubId))\r\n\t\tlet url = API+'/aftermarketparts?hanum='+hubId;\r\n\t\treturn fetch(url, {\r\n method: 'get',\r\n headers: {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json',\r\n 'Ocp-Apim-Subscription-Key': V2KEY\r\n }\r\n })\r\n .then(\r\n response => response.json(),\r\n err => {\r\n // console.log('API Error', err);\r\n }\r\n )\r\n .then(json => dispatch(receiveParts(hubId, json)))\r\n }\r\n}\r\n\r\nexport const fetchHubAssemblyNumber = (term, withAftermarketParts = false) => {\r\n return dispatch => {\r\n return fetch(`${API}/hubassemblynumbers/withaftermarkethubassemblies/${term}`, {\r\n method: 'get',\r\n headers: {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json',\r\n 'Ocp-Apim-Subscription-Key': V2KEY\r\n }\r\n }).then(\r\n response => response.json(),\r\n err => {\r\n // console.log('API Error', err);\r\n })\r\n .then(json => {\r\n dispatch({\r\n type: HUBASSEMBLY_NUMBER_DATA,\r\n assemblyNumber: json,\r\n })\r\n })\r\n }\r\n}\r\n\r\n\r\nexport const fetchPartsWithPartTypeId = (hubId,partTypeId) => {\r\n return dispatch => {\r\n dispatch(requestParts(hubId));\r\n let url = API+'/aftermarketparts?hanum='+hubId+'&party='+partTypeId;\r\n return fetch(url, {\r\n method: 'get',\r\n headers: {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json',\r\n 'Ocp-Apim-Subscription-Key': V2KEY\r\n }\r\n })\r\n .then(\r\n response => response.json(),\r\n err => {\r\n // console.log('API Error', err);\r\n }\r\n )\r\n .then(json => {dispatch(receiveParts(hubId, json));})\r\n }\r\n};\r\n\r\nexport const fetchRebuildKitDetails = (id) => {\r\n return dispatch => {\r\n let url = API+'/presetpresetplushubrebuildkitdetails/'+id;\r\n return fetch(url, {\r\n method: 'get',\r\n headers: {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json',\r\n 'Ocp-Apim-Subscription-Key': V2KEY\r\n }\r\n }).then(\r\n response => response.json(),\r\n err => {\r\n // console.log('API Error', err);\r\n }\r\n ).then(json => dispatch({\r\n type: REBUILD_KIT_DETAILS,\r\n data: json,\r\n id: id,\r\n }))\r\n }\r\n};\r\n\r\nexport const invalidateParts = () => {\r\n return {\r\n type: INVALIDATE_PARTS,\r\n }\r\n}\r\n","import React, { Component } from 'react';\nimport Specs from '../../components/hub/details/specs';\nimport Meta from '../../components/hub/details/meta';\nimport Spinner from '../../components/global/spinner';\nimport { fetchAssemblyDetails } from '../../actions/assembly';\nimport { fetchParts, fetchRebuildKitDetails } from '../../actions/parts';\nimport { connect } from 'react-redux';\n\nclass Details extends Component {\n constructor() {\n super();\n\n this.state = {\n rebuildKitNumber: null,\n };\n this.fetchRebuildKit = this.fetchRebuildKit.bind(this);\n }\n componentDidMount() {\n const { dispatch, match, images } = this.props;\n dispatch(fetchParts(match.params.id));\n dispatch(fetchAssemblyDetails(match.params.id, images));\n this.fetchRebuildKit(this.props);\n }\n\n componentWillReceiveProps(newProps) {\n this.fetchRebuildKit(newProps);\n }\n\n fetchRebuildKit(props) {\n const { parts, dispatch } = props;\n const { AftermarketParts } = parts;\n\n if (AftermarketParts && AftermarketParts.length) {\n const rebuildKit = AftermarketParts.filter((t) => t.TypeId === 219);\n if (rebuildKit && rebuildKit.length) {\n const partNumber = rebuildKit[0].PartNumber;\n this.setState({ rebuildKitNumber: partNumber });\n if (parts.rebuildKitNumber !== partNumber) {\n dispatch(fetchRebuildKitDetails(partNumber));\n }\n }\n }\n }\n\n render() {\n const { assembly, images, parts, history } = this.props;\n\n if (parts.isFetching) {\n return \r\n {result ? result.PartNumber: ''}\r\n
\n {e.preventDefault();history.goBack()}}\n className=\"general-button\"\n >\n Return to results\n \n
\n );\n }\n}\n\nconst mapStateToProps = (state) => state;\nexport default connect(mapStateToProps)(Details);\n","import React, { Component } from \"react\";\r\nimport Meta from \"../../components/hub/details/meta\";\r\n\r\nexport default class extends Component {\r\n render() {\r\n return (\r\n Product Details
\n {assembly.result.map((r, index) => {\n trailer = r.Description.toLowerCase().includes('trailer') ?? false;\n return (\n\n \n
\n );\n })}\n {trailer ? (Suggested Fill Volumes: Grade 00 Semi-Fluid Grease
) : ''}\n \r\n
\r\n );\r\n }\r\n}\r\n","import React, { Component } from 'react';\r\nimport Spinner from '../../components/global/spinner';\r\nimport { setActiveFilterValue, fetchFilters } from '../../actions/filters';\r\nimport { connect } from 'react-redux';\r\nimport _ from 'lodash';\r\n\r\nclass Result extends Component {\r\n render() {\r\n var { result } = this.props;\r\n return (\r\n //onClick={this.setHub.bind(this, 'truckCompartmentIds', HEAVY_DUTY_TRUCK)}\r\n Email Product
\r\n \r\n\r\n
\r\n \r\n Invalid Email Address
\r\n\r\n
\r\n );\r\n }\r\n}\r\n\r\nclass Finder extends Component {\r\n componentDidMount() {\r\n const { app, dispatch } = this.props;\r\n dispatch(fetchFilters(app.currentIndex, app));\r\n }\r\n\r\n setFilterValue(value) {\r\n const { app, dispatch } = this.props;\r\n const lastId = _.clone(app.filterId);\r\n dispatch(setActiveFilterValue(app.filterId, value));\r\n }\r\n\r\n render() {\r\n const { app } = this.props;\r\n return (\r\n \r\n \r\n
\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => state;\r\nexport default connect(mapStateToProps)(Finder);\r\n","import React, { Component } from 'react';\r\nimport { TRUCK, TRAILER, DISC, DRUM, FILTERIDX, SCHOOL_BUS } from '../../config/constants';\r\nimport { connect } from 'react-redux';\r\nimport { resetAppState } from '../../actions/filters';\r\n\r\nclass TruckType extends Component {\r\n componentDidMount() {\r\n const {dispatch } = this.props;\r\n dispatch(resetAppState());\r\n }\r\n\r\n render() {\r\n const { app, setFilter, setActive } = this.props;\r\n return (\r\n Are you looking for a hub for your
\r\n\r\n {app.filterResults.map((result, index) => {\r\n var boundClick = this.setFilterValue.bind(this, result.Id);\r\n return
\r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => state;\r\nexport default connect(mapStateToProps)(TruckType);\r\n","import React, { Component } from 'react';\r\nimport { connect } from 'react-redux';\r\nimport { push } from 'react-router-redux';\r\n\r\nclass HubAssemblyType extends Component {\r\n componentDidMount() {\r\n const { dispatch } = this.props;\r\n dispatch(push('/hub/spindle-nut'));\r\n }\r\n\r\n render() {\r\n return <>\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => state;\r\nexport default connect(mapStateToProps)(HubAssemblyType);\r\n","import React, { Component } from 'react';\nimport { push } from 'react-router-redux';\nimport { connect } from 'react-redux';\n\nclass FindAssembly extends Component {\n handleClick(path) {\n const { dispatch } = this.props;\n dispatch(push(path));\n }\n handleLink(url) {\n window.location = url;\n }\n\n render() {\n return (\n Are you looking for a hub for your
\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 \n \n
\n );\n }\n}\n\nexport default connect()(FindAssembly);\n","import React, { Component } from 'react';\r\nimport { connect } from 'react-redux'\r\n\r\nclass HelpDetail extends Component {\r\n\trender() {\r\n\t\treturn (\r\n\t\t\tDo you know your hub assembly number?
\n\n\n \n Read More about finding your assembly number.\n \n
\n\n \n \n ContactCustomer service for support.\n \n
\n\n \n \n NoI still don't know, proceed without it.\n \n
\n \r\n\t\t\t\t
\r\n\t\t)\r\n\t}\r\n};\r\n\r\nexport default connect()(HelpDetail);\r\n","import React, { Component } from \"react\";\r\nimport { push } from \"react-router-redux\";\r\nimport { connect } from \"react-redux\";\r\nimport HelpDetail from \"../global/help-detail\";\r\n\r\nclass FindAssemblyDetail extends Component {\r\n handleClick(path) {\r\n const { dispatch } = this.props;\r\n dispatch(push(path));\r\n }\r\n\r\n render() {\r\n return (\r\n IDENTIFYING CONMET HUB ASSEMBLIES
\r\n\r\n\t\t\t\tIdentifying your hub assembly is important for many reasons. It will enable you to properly service the hub assembly and purchase the appropriate replacement parts if needed. Plus, if a warranty issue arises, youʼll then be able to provide details on all aspects of the ConMet hub. This section is devoted to finding and understanding the different identification numbers associated with ConMet hubs.
\r\n\r\n\t\tVehicle Identification Number (VIN)
\r\n\r\n\t\tThe quickest and easiest method of identifying your hub assembly is to note the vehicle identification number (VIN) and call the truck dealership. The dealership can then tell you what hubs were installed on your vehicle. If this is not possible, there is a variety of identification numbers located on a ConMet hub assembly.
\r\n\r\n\t\tCasting Number
\r\n\r\n\t\tThis number is physically cast into the hub and appears in large characters usually on the back side of the mounting flange near the stud head (see figure 10).
\r\n\r\n\t\t\r\n\t\t\t})
\r\n\t\tCasting Number on the Back Side of the Mounting Flange
Figure 10\r\n\t\t
\r\n\r\n\t\t\r\n\t\tCasting Number on the Back Side of the Mounting FlangeFigure 10\r\n\t\t
Machining Assembly Number
\r\n\r\n\t\tThis number is stamped on one of the following:\u001f
\r\n\t\t- \r\n\t\t\t
- Mounting flange face (see figure 11)\u001f \r\n\t\t\t
- Diameter of the mounting flange (see figure 12) \r\n\t\t\t
- \u001fBack side of the mounting flange (see figure 13) \r\n\t\t\t
- \u001fBarrel of the hub (see figure 14) \r\n\t\t
The machining number represents the way the hub is machined (e.g., hub pilot vs. ball seat, 8.78″ vs. 8.53″ vs. 9″ brake drum pilot diameter).
\r\n\r\n\t\t\t\r\n\t\t\t\t})
\r\n\t\t\tMounting Flange Face
Figure 11\r\n\t\t\t
\r\n\r\n\t\t\t\r\n\t\t\tMounting Flange FaceFigure 11\r\n\t\t\t
\r\n\t\t\t\t})
\r\n\t\t\tMounting Flange Diameter
Figure 12\r\n\t\t\t
\r\n\r\n\t\t\t\r\n\t\t\tMounting Flange DiameterFigure 12\r\n\t\t\t
\r\n\t\t\t\t})
\r\n\t\t\tMounting Flange Backface
Figure 13\r\n\t\t\t
\r\n\r\n\t\t\t\r\n\t\t\tMounting Flange BackfaceFigure 13\r\n\t\t\t
\r\n\t\t\t\t})
\r\n\t\t\tBarrel of Hub
Figure 14\r\n\t\t\t
\r\n\r\n\r\n\t\t\r\n\t\t\tBarrel of HubFigure 14\r\n\t\t\t
Final Hub Assembly Number
\r\n\r\n\t\tThis number is stamped on one of the following: \u001f
\r\n\t\t- \r\n\t\t\t
- Mounting flange face (see figure 11) \u001f \r\n\t\t\t
- Diameter of the mounting flange (see figure 12) \u001f \r\n\t\t\t
- Back side of the mounting flange (see figure 13) \r\n\t\t
The final hub assembly number identifies the hub assembly, hub machining, studs, bearings, spacer, seal and ABS ring.
\r\n\r\n\t\tJulian Date
\r\n\r\n\t\tBoth the machining and the final assembly have Julian dates stamped into the hub assembly in the same location as the assembly numbers (see figures 11, 12, 13 and 14). A Julian date appears as the day of the year plus the last two digits of the calendar year (e.g., July 4 2008 would appear as 18508). This number provides the date when the hub was machined and assembled at the factory and may be used for warranty purposes.
\r\n\r\n\t\t\r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default connect()(FindAssemblyDetail);\r\n","import React, { Component } from \"react\";\r\nimport { Link } from \"react-router-dom\";\r\nimport { fetchHubAssemblyNumber } from \"../../actions\";\r\nimport { connect } from \"react-redux\";\r\nimport Autocomplete from \"react-autocomplete\";\r\n\r\nclass CompareHub extends Component {\r\n constructor(props, context) {\r\n super(props, context);\r\n this.state = {\r\n assembly1: \"\",\r\n assembly2: \"\",\r\n assemblyNumber: [],\r\n loading: false,\r\n };\r\n }\r\n\r\n render() {\r\n const { dispatch } = this.props;\r\n return (\r\n \r\n \r\n YesI know my number now.\r\n \r\n
\r\n \r\n \r\n NoI still don't know, proceed without it.\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n Hub Comparision Tool
\r\nEnter ConMet Hub Assembly Part Numbers
\r\n\r\n \r\n
\r\n Assembly #1
\r\n\r\n item}\r\n onSelect={(value, state) => {\r\n this.setState({ assembly1: value, assemblyNumber: [state] });\r\n }}\r\n onChange={(event, value) => {\r\n this.setState({\r\n assembly1: value,\r\n assemblyNumber: [],\r\n loading: true,\r\n });\r\n if (value !== \"\") {\r\n dispatch(fetchHubAssemblyNumber(value, true)).then(() => {\r\n let results = this.props.results.assemblyNumber.Results;\r\n if (results) {\r\n this.setState({\r\n assemblyNumber: this.props.results.assemblyNumber\r\n .Results,\r\n loading: false,\r\n });\r\n } else {\r\n this.setState({ assemblyNumber: [], loading: false });\r\n }\r\n });\r\n }\r\n }}\r\n renderItem={(item, isHighlighted) => (\r\n \r\n {item}\r\n
\r\n )}\r\n renderMenu={(items, value) => (\r\n \r\n {value === \"\" ? (\r\n
\r\n )}\r\n />\r\n \r\n
\r\n ) : this.state.loading ? (\r\n Type ConMet assembly number
\r\n\r\n
\r\n ) : items.length === 0 ? (\r\n Loading...
\r\n\r\n
\r\n ) : (\r\n items\r\n )}\r\n No matches for {value}
\r\nAssembly #2
\r\n\r\n item}\r\n onSelect={(value, state) => {\r\n this.setState({ assembly2: value, assemblyNumber: [state] });\r\n }}\r\n onChange={(event, value) => {\r\n this.setState({\r\n assembly2: value,\r\n assemblyNumber: [],\r\n loading: true,\r\n });\r\n if (value !== \"\") {\r\n dispatch(fetchHubAssemblyNumber(value, true)).then(() => {\r\n let results = this.props.results.assemblyNumber.Results;\r\n if (results) {\r\n this.setState({\r\n assemblyNumber: this.props.results.assemblyNumber\r\n .Results,\r\n loading: false,\r\n });\r\n } else {\r\n this.setState({ assemblyNumber: [], loading: false });\r\n }\r\n });\r\n }\r\n }}\r\n renderItem={(item, isHighlighted) => (\r\n \r\n {item}\r\n
\r\n )}\r\n renderMenu={(items, value) => (\r\n \r\n {value === \"\" ? (\r\n
\r\n )}\r\n />\r\n \r\n \r\n \r\n
\r\n ) : this.state.loading ? (\r\n Type ConMet assembly number
\r\n\r\n
\r\n ) : items.length === 0 ? (\r\n Loading...
\r\n\r\n
\r\n ) : (\r\n items\r\n )}\r\n No matches for {value}
\r\n\r\n
\r\n )\r\n }\r\n}\r\n\r\nexport default connect()(MeritorExclusive);","import React from 'react';\r\nimport {connect} from 'react-redux';\r\n\r\nclass VolvoExclusive extends React.Component {\r\n render() {\r\n return (\r\n The entered hub is exclusive to Meritor.
\r\n\r\n
\r\n Please contact Meritor for service enquiries.
\r\n\r\n
\r\n )\r\n }\r\n}\r\n\r\nexport default connect()(VolvoExclusive);","import React, { Component } from 'react';\r\nexport default class NotificationDetail extends Component {\r\n componentDidMount(){\r\n let _iOSDevice = !!navigator.platform.match(/iPhone|iPod|iPad|Mac/);\r\n let _ios = document.getElementsByClassName('osIOS')[0];\r\n let _android = document.getElementsByClassName('osAndroid')[0];\r\n if(_ios){_ios.style.display = _iOSDevice ? 'block' : 'none';}\r\n if(_android){_android.style.display = _iOSDevice ? 'none' : 'block';}\r\n }\r\n render() {\r\n const { params} = this.props.match;\r\n let notifications = JSON.parse(localStorage.getItem('notifications'));\r\n let notification = notifications.find(n => n.Id === parseInt(params.id,10));\r\n return (\r\n The entered hub is exclusive to Volvo.
\r\n\r\n
\r\n \r\n Please contact Volvo for service enquiries.
\r\n\r\n
\r\n )\r\n }\r\n};\r\n","import React from 'react';\r\nimport { connect } from 'react-redux';\r\nimport Waiting from '../../components/global/waiting';\r\nimport {fetchHubRebuildKitsResult} from '../../actions';\r\nimport NoResults from '../global/no-result';\r\nimport {fetchRebuildKitDetails} from '../../actions/parts';\r\nimport classNames from 'classnames';\r\nimport {Link} from \"react-router-dom\";\r\n\r\nclass HubRebuildKitsDetail extends React.Component {\r\n constructor() {\r\n super();\r\n\r\n this.state = {\r\n rebuildKitActive: false,\r\n };\r\n }\r\n\r\n componentWillMount() {\r\n const {dispatch, match} = this.props;\r\n if (match.params.partNumber) {\r\n dispatch(fetchHubRebuildKitsResult(match.params.partNumber));\r\n dispatch(fetchRebuildKitDetails(match.params.partNumber));\r\n }\r\n }\r\n\r\n renderRebuildKit() {\r\n const { parts, results } = this.props;\r\n const presetRebuild = [];\r\n const hubRebuildDetail = results.partNumber;\r\n\r\n presetRebuild.push(\r\n {notification.Title}
\r\n {notification.IsUpdateButton ?\r\n (\r\n\r\n
\r\n ) : null\r\n }\r\n \r\n \r\n \r\n
\r\n - \r\n {Array.isArray(notification.Link) ? notification.Link.map((l,i)=>{\r\n return(
{l}
)\r\n\r\n }) : ({notification.Link}
)}\r\n
\r\n
\r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => state;\r\nexport default connect(mapStateToProps)(HubRebuildKitsDetail);\r\n","import React from 'react';\nimport { connect } from 'react-redux';\nimport Waiting from '../../components/global/waiting';\nimport {competitorSearch, fetchAbsServiceKitResult} from '../../actions';\nimport NoResults from '../global/no-result';\n\nclass AbsServiceKitDetail extends React.Component {\n details = false;\n componentWillMount() {\n const {dispatch, match} = this.props;\n if (match.params.partNumber) {\n dispatch(fetchAbsServiceKitResult(match.params.partNumber));\n }\n }\n\n componentWillReceiveProps(newProps) {\n const {dispatch, match, results} = newProps;\n const askDetail = results.partNumber;\n\n if (results && !results.isFetching && askDetail && askDetail.length === 0 && !this.details) {\n dispatch(competitorSearch(match.params.partNumber)).then(() => {\n this.details = true;\n const {results} = this.props;\n const askDetail = results.partNumber;\n const partNum = askDetail && askDetail[0] && askDetail[0].ConMetPartNumber;\n dispatch(fetchAbsServiceKitResult(partNum));\n });\n }\n }\n\n render() {\n const { results } = this.props;\n const askDetail = results.partNumber;\n\n if (results.isFetching) {\n return Product Details
\r\n\r\n \r\n
\r\n {hubRebuildDetail && hubRebuildDetail[0] && hubRebuildDetail[0].PartNumber}\r\n
\r\n \r\n {hubRebuildDetail && hubRebuildDetail[0] && hubRebuildDetail[0].PartNumber}\r\n
\r\n
\r\n \r\n \r\n \r\n
\r\n
\r\n Product Specs
\r\n| Axle Position | \r\n{hubRebuildDetail && hubRebuildDetail[0] && hubRebuildDetail[0].AxlePostion ? hubRebuildDetail && hubRebuildDetail[0] && hubRebuildDetail[0].AxlePostion : '-'} | \r\n
| Axle | \r\n{hubRebuildDetail && hubRebuildDetail[0] && hubRebuildDetail[0].Axle ? hubRebuildDetail && hubRebuildDetail[0] && hubRebuildDetail[0].Axle : '-'} | \r\n
\n
\n );\n }\n}\n\nconst mapStateToProps = (state) => state;\nexport default connect(mapStateToProps)(AbsServiceKitDetail);\n","import React from 'react';\nimport { connect } from 'react-redux';\nimport Waiting from '../../components/global/waiting';\nimport {competitorSearch, fetchSealsResult} from '../../actions';\nimport NoResults from '../global/no-result';\n\nclass SealsDetail extends React.Component {\n constructor() {\n super();\n\n this.state = {\n rebuildKitActive: false,\n };\n }\n details = false;\n \n componentWillMount() {\n const {dispatch, match} = this.props;\n if (match.params.partNumber) {\n dispatch(fetchSealsResult(match.params.partNumber));\n }\n }\n\n componentWillReceiveProps(newProps) {\n const {dispatch, match, results} = newProps;\n const sealDetail = results.partNumber;\n\n if (results && !results.isFetching && sealDetail && sealDetail.length === 0 && !this.details) {\n dispatch(competitorSearch(match.params.partNumber)).then(() => {\n this.details = true;\n const {results} = this.props;\n const sealDetail = results.partNumber;\n const partNum = sealDetail && sealDetail[0] && sealDetail[0].ConMetPartNumber;\n dispatch(fetchSealsResult(partNum));\n });\n }\n }\n\n render() {\n const { results } = this.props;\n const sealDetail = results.partNumber;\n\n if (results.isFetching) {\n return Success! The following abs ring is recommended
\n\n
\n {askDetail && askDetail[0] && askDetail[0].ProductType}:
\n\n {askDetail && askDetail[0] && askDetail[0].ABSServiceKitNumber}\n
\n\n Includes ABS Ring {askDetail && askDetail[0] && askDetail[0].ABSToneRingNumber}\n
\n {askDetail && askDetail[0] && askDetail[0].WhatKitContains ? 'Kit contains' : ''} {askDetail && askDetail[0] && askDetail[0].WhatKitContains ? askDetail && askDetail[0] && askDetail[0].WhatKitContains : ''}\n
\n
\n \n
\n Product Specs
\n\n
\n );\n }\n}\n\nconst mapStateToProps = (state) => state;\nexport default connect(mapStateToProps)(SealsDetail);\n","import React from 'react';\r\nimport { connect } from 'react-redux';\r\nimport Waiting from '../../components/global/waiting';\r\nimport {fetchAbsToneRingResult} from '../../actions';\r\nimport NoResults from '../global/no-result';\r\nimport {Link} from \"react-router-dom\";\r\n\r\nclass AbsToneRingDetail extends React.Component {\r\n componentWillMount() {\r\n const {dispatch, match} = this.props;\r\n if (match.params.partNumber) {\r\n dispatch(fetchAbsToneRingResult(match.params.partNumber));\r\n }\r\n }\r\n\r\n render() {\r\n const { results } = this.props;\r\n const atrDetail = results.partNumber;\r\n\r\n if (results.isFetching) {\r\n return Product Details
\n\n \n
\n {sealDetail && sealDetail[0] && sealDetail[0].PartNumber}\n
\n \n {sealDetail && sealDetail[0] && sealDetail[0].PartNumber}\n
\n
\n \n \n \n
\n
\n Product Specs
\n| Axle Position | \n{sealDetail && sealDetail[0] && sealDetail[0].AxlePostion ? sealDetail && sealDetail[0] && sealDetail[0].AxlePostion : '-'} | \n
| Axle | \n{sealDetail && sealDetail[0] && sealDetail[0].Axle ? sealDetail && sealDetail[0] && sealDetail[0].Axle : '-'} | \n
| Product Type | \n{sealDetail && sealDetail[0] && sealDetail[0].Type ? sealDetail && sealDetail[0] && sealDetail[0].Type : '-'} | \n
| Reference Dimensions | \n\n |
| ID(in.) | \nØ {sealDetail && sealDetail[0] && sealDetail[0].InnerDiameterInches ? sealDetail && sealDetail[0] && sealDetail[0].InnerDiameterInches.toFixed(2) : '-'} | \n
| OD(in.) | \nØ {sealDetail && sealDetail[0] && sealDetail[0].OuterDiameterInches ? sealDetail && sealDetail[0] && sealDetail[0].OuterDiameterInches.toFixed(2) : '-'} | \n
| Width(in.) | \n{sealDetail && sealDetail[0] && sealDetail[0].Width ? sealDetail && sealDetail[0] && sealDetail[0].Width.toFixed(2) : '-'} | \n
| \n {sealDetail && sealDetail[0] && sealDetail[0].KitType}\n | \n\n {sealDetail && sealDetail[0] && sealDetail[0].SealAndSpacerKit ? sealDetail && sealDetail[0] && sealDetail[0].SealAndSpacerKit : '-'}\n | \n
\r\n
\r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => state;\r\nexport default connect(mapStateToProps)(AbsToneRingDetail);\r\n","import React from 'react';\nimport { connect } from 'react-redux';\nimport Waiting from '../../components/global/waiting';\nimport {competitorSearch, fetchSpindleNutKitResult} from '../../actions';\nimport NoResults from '../global/no-result';\n\nclass SpindleNutKitDetail extends React.Component {\n details = false;\n componentWillMount() {\n const {dispatch, match} = this.props;\n if (match.params.partNumber) {\n dispatch(fetchSpindleNutKitResult(match.params.partNumber));\n }\n }\n\n componentWillReceiveProps(newProps) {\n const {dispatch, match, results} = newProps;\n const snkDetail = results.partNumber;\n\n if (results && !results.isFetching && snkDetail && snkDetail.length === 0 && !this.details) {\n dispatch(competitorSearch(match.params.partNumber)).then(() => {\n this.details = true;\n const {results} = this.props;\n const snkDetail = results.partNumber;\n const partNum = snkDetail && snkDetail[0] && snkDetail[0].ConMetPartNumber;\n dispatch(fetchSpindleNutKitResult(partNum));\n });\n }\n }\n\n\n render() {\n const { results } = this.props;\n const snkDetail = results.partNumber;\n\n if (results.isFetching) {\n return Product Details
\r\n\r\n \r\n
\r\n {atrDetail && atrDetail[0] && atrDetail[0].ABSToneRingKitNumber}\r\n
\r\n \r\n {atrDetail && atrDetail[0] && atrDetail[0].ABSToneRingKitNumber}\r\n
\r\n
\r\n \r\n \r\n \r\n
\r\n
\r\n Product Specs
\r\n| Product Type | \r\n{atrDetail && atrDetail[0] && atrDetail[0].Type ? atrDetail && atrDetail[0] && atrDetail[0].Type : '-'} | \r\n
| Abs Type | \r\n{atrDetail && atrDetail[0] && atrDetail[0].AbsType ? atrDetail && atrDetail[0] && atrDetail[0].AbsType : '-'} | \r\n
| Reference Dimensions | \r\n\r\n |
| Id(IN.) | \r\nØ {atrDetail && atrDetail[0] && atrDetail[0].InnerDiameterInch ? atrDetail && atrDetail[0] && atrDetail[0].InnerDiameterInch.toFixed(2) : '-'} | \r\n
| Od(IN.) | \r\nØ {atrDetail && atrDetail[0] && atrDetail[0].OuterDiameterInch ? atrDetail && atrDetail[0] && atrDetail[0].OuterDiameterInch.toFixed(2) : '-'} | \r\n
| Width(IN.) | \r\n{atrDetail && atrDetail[0] && atrDetail[0].ThicknessInch ? atrDetail && atrDetail[0] && atrDetail[0].ThicknessInch.toFixed(2) : '-'} | \r\n
\n
\n );\n }\n}\n\nconst mapStateToProps = (state) => state;\nexport default connect(mapStateToProps)(SpindleNutKitDetail);\n","import React from 'react';\nimport { connect } from 'react-redux';\nimport Waiting from '../../components/global/waiting';\nimport {competitorSearch, fetchSealSpacerKitResult} from '../../actions';\nimport NoResults from '../global/no-result';\nimport classNames from 'classnames';\n\nclass SealSpacerKitDetail extends React.Component {\n constructor() {\n super();\n\n this.state = {\n rebuildKitActive: false,\n };\n }\n details = false;\n\n componentWillMount() {\n const {dispatch, match} = this.props;\n if (match.params.partNumber) {\n dispatch(fetchSealSpacerKitResult(match.params.partNumber));\n }\n }\n\n componentWillReceiveProps(newProps) {\n const {dispatch, match, results} = newProps;\n const sskDetail = results.partNumber;\n\n if (results && !results.isFetching && sskDetail && sskDetail.length === 0 && !this.details) {\n dispatch(competitorSearch(match.params.partNumber)).then(() => {\n this.details = true;\n const {results} = this.props;\n const sskDetail = results.partNumber;\n const partNum = sskDetail && sskDetail[0] && sskDetail[0].ConMetPartNumber;\n dispatch(fetchSealSpacerKitResult(partNum));\n });\n }\n }\n\n render() {\n const { results } = this.props;\n const sskDetail = results.partNumber;\n\n if (results.isFetching) {\n return Product Details
\n\n \n
\n {snkDetail && snkDetail[0] && snkDetail[0].PartNumber}\n
\n \n {snkDetail && snkDetail[0] && snkDetail[0].PartNumber}\n
\n
\n \n \n \n
\n
\n Product Specs
\n| Axle Position | \n{snkDetail && snkDetail[0] && snkDetail[0].AxlePostion ? snkDetail && snkDetail[0] && snkDetail[0].AxlePostion : '-'} | \n
| Axle | \n{snkDetail && snkDetail[0] && snkDetail[0].Axle ? snkDetail && snkDetail[0] && snkDetail[0].Axle : '-'} | \n
| Product Type | \n{snkDetail && snkDetail[0] && snkDetail[0].ProductType ? snkDetail && snkDetail[0] && snkDetail[0].ProductType : '-'} | \n
| Six-point socket size (IN.) | \n{snkDetail && snkDetail[0] && snkDetail[0].SixPointSocketSize ? snkDetail && snkDetail[0] && snkDetail[0].SixPointSocketSize : '-'} | \n
| Torque Spec (ft-lbs) | \n{snkDetail && snkDetail[0] && snkDetail[0].TorqueSpec ? snkDetail[0].TorqueSpec + ', DO NOT BACK OFF SPINDLE NUT' : '-'} | \n
| Note: | \n{snkDetail && snkDetail[0] && snkDetail[0].Note ? snkDetail && snkDetail[0] && snkDetail[0].Note : '-'} | \n
\n
\n );\n }\n}\n\nconst mapStateToProps = (state) => state;\nexport default connect(mapStateToProps)(SealSpacerKitDetail);\n","import React from 'react';\nimport { connect } from 'react-redux';\nimport Waiting from '../../components/global/waiting';\nimport {fetchBearingResult, competitorSearch} from '../../actions';\nimport NoResults from '../global/no-result';\nimport { push } from 'react-router-redux';\n\nclass BearingDetail extends React.Component {\n constructor(props) {\n super(props);\n this.handleFilterClick = this.handleFilterClick.bind(this);\n }\n details = false;\n cross = null;\n\n componentWillMount() {\n const {dispatch, match} = this.props;\n if (match.params.partNumber) {\n dispatch(fetchBearingResult(match.params.partNumber));\n }\n }\n\n componentWillReceiveProps(newProps) {\n const {dispatch, match, results} = newProps;\n const bearingDetail = results.FilterIdDetail;\n if (results && !results.isFetchingBearing && bearingDetail && bearingDetail.length === 0 && !this.details) {\n dispatch(competitorSearch(match.params.partNumber)).then(() => {\n this.details = true;\n const {results} = this.props;\n const sealDetail = results.partNumber;\n const partNum = sealDetail && sealDetail[0] && sealDetail[0].ConMetPartNumber;\n this.cross = partNum;\n dispatch(fetchBearingResult(partNum));\n });\n }\n { bearingDetail && bearingDetail.map((result, index) => {\n if (match.params.partNumber != 10041905) {\n dispatch(\n push(\n '/hub/bearing-filter-detail/' + (this.cross ?? match.params.partNumber)\n +\n '/' +\n result.Id\n )\n );\n }\n })}\n }\n\n handleFilterClick(partNumber, filterId) {\n const { dispatch } = this.props;\n if(partNumber && filterId){\n dispatch(\n push(\n '/hub/bearing-filter-detail/' + partNumber\n +\n '/' +\n filterId\n )\n );\n }\n }\n\n render() {\n const { results, match } = this.props;\n const bearingDetail = results.FilterIdDetail;\n\n if (results.isFetchingBearing) {\n return Product Details
\n\n \n
\n {sskDetail && sskDetail[0] && sskDetail[0].PartNumber}\n
\n \n {sskDetail && sskDetail[0] && sskDetail[0].PartNumber}\n
\n
\n \n \n \n
\n \n \n \n \n
\n Product Specs
\n| Axle Position | \n{sskDetail && sskDetail[0] && sskDetail[0].AxlePostion ? sskDetail && sskDetail[0] && sskDetail[0].AxlePostion : '-'} | \n|
| Axle | \n{sskDetail && sskDetail[0] && sskDetail[0].Axle ? sskDetail && sskDetail[0] && sskDetail[0].Axle : '-'} | \n|
| \n | \n \n {sskDetail && sskDetail[0] && sskDetail[0].PartNumber}\n | \n|
\n | Seal | \n {sskDetail && sskDetail[0] && sskDetail[0].Type ? sskDetail && sskDetail[0] && sskDetail[0].Type : '-'} | \n |
\n
\n );\n }\n}\n\nconst mapStateToProps = (state) => state;\nexport default connect(mapStateToProps)(BearingDetail);\n","import React from 'react';\r\nimport { connect } from 'react-redux';\r\nimport Waiting from '../../components/global/waiting';\r\nimport {fetchBearingWithFilterResult} from '../../actions';\r\nimport NoResults from '../global/no-result';\r\nimport {fetchRebuildKitDetails} from '../../actions/parts';\r\nimport classNames from 'classnames';\r\nimport {Link} from \"react-router-dom\";\r\n\r\nclass BearingFilterDetail extends React.Component {\r\n constructor() {\r\n super();\r\n\r\n this.state = {\r\n rebuildKitActive: false,\r\n };\r\n }\r\n\r\n componentWillMount() {\r\n const {dispatch, match} = this.props;\r\n if (match.params.partNumber && match.params.filterId) {\r\n dispatch(fetchBearingWithFilterResult(match.params.partNumber, match.params.filterId));\r\n }\r\n\r\n }\r\n\r\n handleFilterClick(kitNumber) {\r\n const { dispatch } = this.props;\r\n if(kitNumber){\r\n dispatch(fetchRebuildKitDetails(kitNumber));\r\n }\r\n this.setState({ rebuildKitActive: !this.state.rebuildKitActive });\r\n\r\n }\r\n\r\n renderRebuildKit() {\r\n const { parts, results } = this.props;\r\n const presetRebuild = [];\r\n const hubRebuildDetail = results.FilterIdDetail;\r\n\r\n presetRebuild.push(\r\n Choose the Bearing by Axle Type or Bearing Number:
\n\n { bearingDetail && bearingDetail.map((result, index) => {\n return (\n
\n \n
\n );\n }) }\n \n \n
\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => state;\r\nexport default connect(mapStateToProps)(BearingFilterDetail);\r\n","import React, { Component } from 'react';\nimport { connect } from 'react-redux';\nimport Step from '../hub/step';\nimport {\n setActiveFilterValue,\n previousFilter,\n} from '../../actions/filters';\nimport { fetchAssembly } from '../../actions/assembly';\nimport {\n fetchHubs,\n} from '../../actions/index';\nimport {Switch, Route} from 'react-router-dom';\n\nimport HubSelectionChoosePath from './choose-path'\nimport ReplacementRotor from '../rotor/replacement-rotor';\nimport ReplacementRotorFilter from '../rotor/replacement-rotor-filter';\nimport Casting from '../casting/casting';\nimport CastingFilter from '../casting/casting-filter';\n\nimport RotorCasting from '../rotorCasting/rotorcasting';\nimport RotorCastingFilter from '../rotorCasting/rotorcasting-filter';\n\nimport DrumCasting from '../drumCasting/drumCasting';\nimport DrumCastingFilter from '../drumCasting/drumCasting-filter';\n\n\nimport StudSummary from '../stud/stud-summary';\nimport StudFilter from '../stud/stud-filter';\nimport StudFilters from '../stud/stud-filters';\nimport ReplacementRotorSearch from '../rotor/replacement-rotor-search';\nimport ReplacementRotorResult from '../rotor/replacement-rotor-result';\nimport ReplacementRotorCastingResult from '../rotor/replacement-rotor-casting-result';\n\nimport ReplacementRotorDetail from '../rotor/replacement-rotor-detail';\nimport ReplacementDrum from '../drum/replacement-drum';\nimport ReplacementDrumFilter from '../drum/replacement-drum-filter';\nimport ReplacementDrumSearch from '../drum/replacement-drum-search';\nimport ReplacementDrumResult from '../drum/replacement-drum-result';\nimport ReplacementDrumDetail from '../drum/replacement-drum-detail';\nimport HubSelectionSearch from './search';\nimport Filters from './filters';\nimport NotAvailableHub from './not-available-hub';\nimport CompareAssembly from './compare-assembly';\nimport HubSelectionResults from './results';\nimport HubSelectionDetails from './details';\nimport HubSelectionEmail from './email';\nimport HubFinder from './finder';\nimport HubSelectionTruckType from './truck-type';\nimport HubSelectionTruckMake from './truck-make';\nimport HubSelectionAxelType from './axel-type';\nimport HubSelectionMountingSystem from './hub-mounting-system';\nimport HubSelectionWheelPilotSystem from './wheel-pilot-system';\nimport HubSelectionHubPilotType from './hub-pilot-type';\nimport HubSelectionStudPilotType from './stud-pilot-type';\nimport HubSelectionWheelStudStandoutInches from './wheel-stud-standout-inches';\nimport HubSelectionThreadOrientation from './thread-orientation';\nimport HubSelectionGAWR from './gawr';\nimport HubSelectionAxleStud from './axle-stud';\nimport HubSelectionWheelType from './wheel-type';\nimport HubSelectionAssemblyType from './hub-assembly-type';\nimport HubSelectionSpindleNut from './spindle-nut';\nimport HubSelectionMaterial from './material';\nimport HubSelectionType from './hub-type';\nimport BrakeRotorFlange from './brake-rotor-flange';\nimport BrakeRotorType from './brake-rotor-type';\nimport HubSelectionOverallRotorLength from './overall-rotor-length';\nimport HubSelectionABSOffsetInches from './abs-offset-inches';\nimport HubSelectionHubCapBoltCircleDiameterInches from './hub-cap-bolt-circle-diameter-inches';\nimport HubSelectionHubOffsetInches from './hub-offset-inches';\nimport HubSelectionDrumPilotDiameterInches from './drum-pilot-diameter-inches';\nimport HubSelectionBarrelLength from './barrel-length';\nimport HubSelectionSmallBackface from './small-backface';\nimport HubSelectionFindAssembly from './find-assembly';\nimport HubSelectionFindAssemblyDetail from './find-assembly-detail';\nimport CompareHub from './compare-hub';\nimport NoResults from '../global/no-result';\nimport HubSelectionMeritorExclusive from './meritor-exclusive';\nimport VolvoExclusive from './volvo-exclusive';\nimport NotificationDetail from '../general/notification-detail';\nimport HubRebuildKitsDetail from '../preSetPlusRebuildKit/hub-rebuild-kits-detail';\nimport AbsServiceKitDetail from '../absServiceKit/abs-service-kit-detail';\nimport SealsDetail from '../seals/seals-detail';\nimport AbsToneRingDetail from '../absToneRing/abs-tone-ring-detail';\nimport SpindleNutKitDetail from '../spindleNutKit/spindle-nut-kit-detail';\nimport SealSpacerKitDetail from '../sealSpacerKit/seal-spacer-kit-detail';\nimport BearingDetail from '../bearing/bearing-detail';\nimport BearingFilterDetail from '../bearing/bearing-filter-detail';\n\nclass HubSelector extends Component {\n render() {\n const {\n dispatch,\n assembly,\n history,\n results,\n app,\n params,\n images,\n parts,\n } = this.props;\n const childProps = {\n params,\n parts,\n app,\n images,\n assembly,\n results,\n setFilter: (filterId, id, app) => {\n dispatch(setActiveFilterValue(filterId, id, app));\n },\n setActive: (filterId, selected, baseClass = 'conmet-button') => {\n if (app.filterState[filterId] === selected) {\n return baseClass + ' active';\n }\n return baseClass;\n },\n goBack: (app) => {\n dispatch(previousFilter(app));\n },\n searchForAssembly: (partNumber) => {\n if (partNumber) {\n dispatch(fetchHubs(partNumber));\n } else {\n dispatch(fetchAssembly());\n }\n },\n };\n\n const backClick = childProps.goBack.bind(this, app);\n return (\n Product Details
\r\n\r\n \r\n
\r\n {bearingWithFilterDetail && bearingWithFilterDetail[0] && bearingWithFilterDetail[0].PartNumber}\r\n
\r\n \r\n {bearingWithFilterDetail && bearingWithFilterDetail[0] && bearingWithFilterDetail[0].PartNumber}\r\n
\r\n
\r\n \r\n \r\n \r\n
\r\n
\r\n Product Specs
\r\n| Axle Position | \r\n{bearingWithFilterDetail && bearingWithFilterDetail[0] && bearingWithFilterDetail[0].AxlePostion ? bearingWithFilterDetail && bearingWithFilterDetail[0] && bearingWithFilterDetail[0].AxlePostion : '-'} | \r\n
| Axle | \r\n{bearingWithFilterDetail && bearingWithFilterDetail[0] && bearingWithFilterDetail[0].Axle ? bearingWithFilterDetail && bearingWithFilterDetail[0] && bearingWithFilterDetail[0].Axle : '-'} | \r\n
| Product Type | \r\n{bearingWithFilterDetail && bearingWithFilterDetail[0] && bearingWithFilterDetail[0].Type ? bearingWithFilterDetail && bearingWithFilterDetail[0] && bearingWithFilterDetail[0].Type : '-'} | \r\n
| Bearing Type | \r\n{bearingWithFilterDetail && bearingWithFilterDetail[0] && bearingWithFilterDetail[0].BearingType ? bearingWithFilterDetail && bearingWithFilterDetail[0] && bearingWithFilterDetail[0].BearingType : '-'} | \r\n
| Reference Set No. | \r\n{bearingWithFilterDetail && bearingWithFilterDetail[0] && bearingWithFilterDetail[0].ReferenceSetNo ? bearingWithFilterDetail && bearingWithFilterDetail[0] && bearingWithFilterDetail[0].ReferenceSetNo : '-'} | \r\n
| Reference Dimensions | \r\n\r\n |
| Id(IN.) | \r\nØ {bearingWithFilterDetail && bearingWithFilterDetail[0] && bearingWithFilterDetail[0].BoreDiameterInch ? bearingWithFilterDetail && bearingWithFilterDetail[0] && bearingWithFilterDetail[0].BoreDiameterInch.toFixed(2) : '-'} | \r\n
| Od(IN.) | \r\nØ {bearingWithFilterDetail && bearingWithFilterDetail[0] && bearingWithFilterDetail[0].OuterDiameterInch ? bearingWithFilterDetail && bearingWithFilterDetail[0] && bearingWithFilterDetail[0].OuterDiameterInch.toFixed(2) : '-'} | \r\n
| Width(IN.) | \r\n{bearingWithFilterDetail && bearingWithFilterDetail[0] && bearingWithFilterDetail[0].Width ? bearingWithFilterDetail && bearingWithFilterDetail[0] && bearingWithFilterDetail[0].Width.toFixed(2) : '-'} | \r\n
\n
\n );\n }\n}\n\n// Which props do we want to inject, given the global state?\n// Note: use https://github.com/faassen/reselect for better performance.\nfunction select(state) {\n return {\n app: state.app,\n parts: state.parts,\n images: state.images,\n assembly: state.assembly,\n truckMakes: state.truckMakes,\n results: state.results,\n materialFilter: state.materialFilter,\n };\n}\nexport default connect(select)(HubSelector);\n","import React, { Component } from 'react';\nimport { push } from 'react-router-redux'\nimport { connect } from 'react-redux';\nimport Modal from 'react-modal';\nimport Carousel from 'nuka-carousel';\nimport { appInsights } from '../../AppInsights';\nimport { setVal } from '../../actions/filters';\nimport {\n unifiedSearch,\n fetchHubAssemblyFilters,\n fetchHubAssemblyFiltersWithNoResults,\n saveBrakeRotorNumber,\n fetchNotificationResult,\n competitorSearch\n} from '../../actions';\nimport Autocomplete from 'react-autocomplete';\nimport _ from 'lodash';\n\nclass Start extends Component {\n constructor(props) {\n super(props);\n this.doSearch = this.doSearch.bind(this);\n\n this.state = {\n value: '',\n partNumber: [],\n loading: false,\n url: '',\n openModel: false,\n openDetailModal: false,\n notificationId: null,\n data: null,\n currentIndex: 0,\n closeModal: false,\n };\n this.closeModal = this.closeModal.bind(this);\n }\n\n componentWillMount() {\n const { dispatch, app } = this.props;\n dispatch(fetchNotificationResult());\n Modal.setAppElement('body');\n this.updateIgnore();\n if(!app.goingBack) {\n this.setState({ openModel: true });\n }\n }\n\n updateIgnore(){\n let notifications = JSON.parse(localStorage.getItem('notifications'));\n if (notifications && notifications.length) {\n let notification = null;\n let index = 0;\n notifications.every(function (item,i){\n if((item.ignore === undefined || item.ignore < 3) && !item.IsSilent){\n notification = item;\n index = i;\n return false;\n }\n return true;\n });\n if(notification) {\n let ignore = notification.ignore ? (notification.ignore + 1) : 1;\n if (notification.Sticky === 'true') {\n ignore = 0;\n sessionStorage.setItem('ignoreNotifications', JSON.stringify(false));\n }\n notifications[index].ignoreTemp = ignore;\n localStorage.setItem('notifications', JSON.stringify(notifications));\n }\n }\n }\n\n getFilteredNotification(){\n let notifications = JSON.parse(localStorage.getItem('notifications'));\n if (notifications && notifications.length) {\n let filtered = notifications.filter(this.checkOSAndVersion);\n filtered = _.sortBy(filtered, 'id');\n if (filtered && filtered.length) {\n localStorage.setItem('notifications', JSON.stringify(filtered));\n }\n }\n }\n\n checkOSAndVersion = (d) => {\n let os = this.getOS();\n let version = localStorage.getItem('version');\n let osPassed = true;\n if(d.TargetOS){\n let _androidDevice = os === 'Android';\n let _iOSDevice = os === 'iOS';\n let _isWeb = !_androidDevice && !_iOSDevice;\n if(_androidDevice && !/Android/i.test(d.TargetOS)){\n osPassed = false;\n }else if(_iOSDevice && !/iOS/i.test(d.TargetOS)){\n osPassed = false;\n }else if(_isWeb && !/Web/i.test(d.TargetOS)){\n osPassed = false;\n }\n }\n let versionPassed = true;\n if(d.Version){\n if(d.Version.indexOf('<') !== -1) {\n versionPassed = version === null || version < d.Version.replace('<','').trim();\n } else {\n versionPassed = version === d.Version;\n }\n }\n return versionPassed && osPassed\n // return d\n }\n\n getOS() {\n let userAgent = window.navigator.userAgent,\n platform = window.navigator.platform,\n macosPlatforms = ['Macintosh', 'MacIntel', 'MacPPC', 'Mac68K'],\n windowsPlatforms = ['Win32', 'Win64', 'Windows', 'WinCE'],\n iosPlatforms = ['iPhone', 'iPad', 'iPod'],\n os = null;\n\n if (/iPad|iPhone|iPod/.test(userAgent)) {\n os = 'iOS';\n } else if (/Android/.test(userAgent)) {\n os = 'Android';\n } else if (macosPlatforms.indexOf(platform) !== -1) {\n os = 'Mac OS';\n } else if (iosPlatforms.indexOf(platform) !== -1) {\n os = 'iOS';\n } else if (windowsPlatforms.indexOf(platform) !== -1) {\n os = 'Windows';\n } else if (!os && /Linux/.test(platform)) {\n os = 'Linux';\n }\n return os;\n }\n\n closeModal() {\n this.setState({ openModel: false, closeModal: true });\n let notifications = JSON.parse(localStorage.getItem('notifications'));\n notifications.map((item, i) => (\n notifications[i].ignore = item.ignoreTemp\n ));\n localStorage.setItem('notifications', JSON.stringify(notifications));\n sessionStorage.setItem('ignoreNotifications', JSON.stringify(true));\n }\n\n openDetailModal(id) {\n const { dispatch } = this.props;\n dispatch(push('/hub/notification-detail/' + id));\n let notifications = JSON.parse(localStorage.getItem('notifications'));\n this.setState({ openModel: false });\n const index = notifications.findIndex((a) => a.Id === id);\n if (index > -1) {\n notifications[index] = { ...notifications[index], seen: (!notifications[index].Sticky) };\n }\n localStorage.setItem('notifications', JSON.stringify(notifications));\n let unseen = notifications.filter((a) => a.seen === false || !a.seen);\n localStorage.setItem(\n 'unseenNotificationsCount',\n JSON.stringify(unseen ? unseen.length : notifications.length)\n );\n }\n\n onNextAction(nextSlide, slidesToShow, currentSlide, slideCount, data) {\n if (slidesToShow + currentSlide >= slideCount) {\n this.closeModal();\n }\n let notifications = JSON.parse(localStorage.getItem('notifications'));\n [currentSlide, currentSlide+1].forEach(function (v,i){\n if(!i || i+v === data.length) {\n let notification = data.find((a) => a.Id === data[v].Id);\n let index = notifications.findIndex((item) => item.Id === notification.Id);\n if (index > -1) {\n notifications[index] = {\n ...notifications[index],\n ignoreTemp: notifications[index].Sticky ? 0 : (\n (notifications[index].ignoreTemp ? notifications[index].ignoreTemp : 0) + 1),\n };\n }\n }\n });\n localStorage.setItem('notifications', JSON.stringify(notifications));\n nextSlide();\n }\n\n notificationDialogs() {\n const { results } = this.props;\n const { openModel, currentIndex } = this.state;\n if (openModel) {\n let notes = JSON.parse(localStorage.getItem('notifications'));\n let seenIgnore = notes.filter((a) => a.seen === true || a.ignore > 2 || a.IsSilent === true);\n let unseen = notes.filter((a) => a.seen === false || !a.seen);\n let notesWithoutSeenIgnore = notes.filter(\n (item) => !seenIgnore.includes(item)\n );\n localStorage.setItem(\n 'unseenNotificationsCount',\n unseen ? unseen.length : notes.length\n );\n let data =\n notesWithoutSeenIgnore && notesWithoutSeenIgnore.length\n ? notesWithoutSeenIgnore\n : results.notifications;\n\n let ignoreNotes = JSON.parse(sessionStorage.getItem('ignoreNotifications'));\n if (\n seenIgnore.length < notes.length &&\n !ignoreNotes\n ) {\n return (\n \n
\n \n \n \n\n \n\n \n\n ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( \n
\n \n
\n \n );\n }\n }\n }\n\n handleClick(path) {\n const { dispatch } = this.props;\n dispatch(push(path));\n }\n\n doSearch(e) {\n e.preventDefault();\n this.unifiedFilters(this.state.partNumber[0]);\n }\n\n unifiedFilters(data) {\n if(data){\n appInsights.trackEvent({\n name: 'Unified Search',\n properties: { Competitor: data.CompetitorName, PartNumber: data.CompetitorPartNumber },\n });\n\n if (data.PartTypeId === 115) {\n this.getResult(data.CompetitorInterchangesId);\n } else if (data.PartTypeId === 1115) {\n this.props.dispatch(push('/hub/meritor-exclusive'));\n } else if (data.PartTypeId === 1112) {\n this.props.dispatch(push('/hub/volvo-exclusive'));\n } else if (data.PartTypeId === 1) {\n setTimeout(() => {\n this.props.dispatch(\n push('/hub/casting/filter/hamnt/hcnum=' + data.CompetitorPartNumber)\n );\n },1000);\n } else if (data.PartTypeId === 5) {\n this.props.dispatch(\n push('/hub/stud/summaries/' + data.CompetitorPartNumber)\n );\n } else if (data.PartTypeId === 23) {\n this.props.dispatch(\n push(\n '/hub/replacement-drum/recommended-drums/' +\n data.CompetitorInterchangesId\n )\n );\n } else if (data.PartTypeId === 203) {\n this.props.dispatch(saveBrakeRotorNumber(data.CompetitorPartNumber));\n setTimeout(() => {\n this.props.dispatch(\n push(\n '/hub/replacement-rotor/recommended-rotors/' +\n data.CompetitorInterchangesId\n )\n );\n }, 100);\n // BrakeRotorCasting\n } else if (data.PartTypeId === 202) {\n setTimeout(() => {\n this.props.dispatch(\n push('/hub/rotor-casting/filter/trtyp/ctnum=' + data.CompetitorPartNumber)\n );\n }, 100);\n // DrumCasting\n } else if (data.PartTypeId === 652) {\n setTimeout(() => {\n this.props.dispatch(\n push('/hub/drum-casting/filter/holes/ctnum=' + data.CompetitorPartNumber)\n );\n }, 100);\n\n }else if (data.PartTypeId === 219) {\n this.props.dispatch(\n push(\n '/hub/hub-rebuild-kits-detail/' +\n data.CompetitorPartNumber\n )\n );\n }else if (data.PartTypeId === 241) {\n this.props.dispatch(\n push(\n '/hub/abs-service-kit-detail/' +\n data.CompetitorPartNumber\n )\n );\n }else if (data.PartTypeId === 220) {\n if(data.CompetitorId === 1 && data.CompetitorName === 'ConMet'){\n this.props.dispatch(\n push(\n '/hub/seals-detail/' +\n data.CompetitorPartNumber\n )\n );\n }else{\n const { dispatch } = this.props;\n dispatch(competitorSearch(data.CompetitorPartNumber)).then(() => {\n const { results } = this.props;\n const sealDetail = results.partNumber;\n const partNum = sealDetail && sealDetail[0] && sealDetail[0].ConMetPartNumber;\n this.props.dispatch(\n push(\n '/hub/seals-detail/' + partNum\n )\n );\n });\n }\n }else if (data.PartTypeId === 7) {\n if (data.CompetitorPartNumber === \"10083900\") {\n this.props.dispatch(\n push(\n '/hub/abs-service-kit-detail/10086542'\n )\n );\n }else {\n this.props.dispatch(\n push(\n '/hub/abs-tone-ring-detail/' +\n data.CompetitorPartNumber\n )\n );\n }\n }else if (data.PartTypeId === 221) {\n this.props.dispatch(\n push(\n '/hub/seal-spacer-kit-detail/' +\n data.CompetitorPartNumber\n )\n );\n }else if (data.PartTypeId === 101) {\n if(data.CompetitorId === 1 && data.CompetitorName === 'ConMet'){\n this.props.dispatch(\n push(\n '/hub/bearing-detail/' +\n data.CompetitorPartNumber\n )\n );\n }else{\n const { dispatch } = this.props;\n dispatch(competitorSearch(data.CompetitorPartNumber)).then(() => {\n const { results } = this.props;\n const sealDetail = results.partNumber;\n const partNum = sealDetail && sealDetail[0] && sealDetail[0].ConMetPartNumber;\n this.props.dispatch(\n push(\n '/hub/bearing-detail/' + partNum\n )\n );\n });\n }\n }else if (data.PartTypeId === 227) {\n this.props.dispatch(\n push(\n '/hub/spindle-nut-kit-detail/' +\n data.CompetitorPartNumber\n )\n );\n }else {\n if (this.state.partNumber.length === 1) {\n this.getResult(this.state.partNumber[0].CompetitorInterchangesId);\n } else if (\n this.state.value !== '' &&\n this.state.partNumber.length === 0 &&\n !this.state.loading\n ) {\n this.props.dispatch(push('/hub/no-results'));\n }\n }\n }else{\n this.props.dispatch(push('/hub/no-results'));\n }\n }\n\n getResult(id) {\n const { dispatch } = this.props;\n // const spindle = [10082224, 10082225, 10082226, 10082227, 10082228, 10082229, 10082230, 10082231, 10082249, 10082250, 10082251, 10082252, 10082253, 10082254, 10082255, 10082256];\n let url = '';\n dispatch(fetchHubAssemblyFilters(id)).then(() => {\n let filters = this.props.results.filters.Results;\n let CompetitorPartNumber = this.state.partNumber[0].CompetitorPartNumber;\n if (filters === undefined) {\n dispatch(fetchHubAssemblyFiltersWithNoResults(id)).then(() => {\n this.props.dispatch(\n push('/hub/not-available/' + CompetitorPartNumber)\n );\n });\n } else {\n let i = 1,\n length = Object.keys(filters).length;\n\n Object.keys(filters).forEach((key) => {\n url +=\n i === length\n ? key + '=' + filters[key]\n : key + '=' + filters[key] + '&';\n i++;\n });\n // if(spindle.includes(parseInt(CompetitorPartNumber))){\n if(filters.spints === true){\n let FILTERIDX = 24;\n dispatch(setVal(FILTERIDX,{ hcmty: filters.hcmty, brkty: filters.brkty, wmslc: filters.wmslc, whlps: filters.whlps, aaxna: filters.aaxna, tcomp: filters.tcomp, hubps: filters.hubps, strdo: filters.strdo, hamnt: filters.hamnt }));\n this.props.dispatch(push('/hub/spindle-nut'));\n }else{ \n this.props.dispatch(push('/hub/filters/' + url));\n }\n }\n });\n }\n\n render() {\n this.getFilteredNotification();\n let notes = JSON.parse(localStorage.getItem('notifications'));\n return (\n \n
\n \n \n data.length > 1 ? (\n 0 ? '' : 'disabled'\n }`}\n />\n ) : null\n }\n renderCenterRightControls={({\n nextSlide,\n slidesToShow,\n currentSlide,\n slideCount,\n }) =>\n data.length > 1 ? (\n \n this.onNextAction(\n nextSlide,\n slidesToShow,\n currentSlide,\n slideCount,\n data\n )\n }\n className={`slick-arrow slick-next ${\n slidesToShow + currentSlide < slideCount\n ? ''\n : 'disabled'\n }`}\n />\n ) : null\n }\n afterSlide={(index) => this.setState({ currentIndex: index })}\n >\n {data.map((d, i) => (\n
\n \n
\n ))}\n \n {d.Title}
\n {d.IsUpdateButton ?\n (\n\n \n
\n ) : null\n }\n \n \n
\n \n \n
\n \n {notes ? this.notificationDialogs() : null}\n
\n )}\n renderMenu={(items, value) => (\n What are you looking for?
\n\n {value === '' ? (\n
\n )}\n />\n \n Type ConMet or Competitor assembly number\n
\n ) : this.state.loading ? (\n Loading...
\n ) : items.length === 0 ? (\n No matches for {value}
\n ) : (\n items\n )}\n \n Some examples: “104444”, “ConMet 10031065”, “Gunite 5669‑1”, “Webb\n 20231‑‑1T‑71”\n
\n \n \n
\n \n \n
\n \n
\n \n HUBS \n
\n \n\n \n
\n \n HUB COMPONENTS{' '}\n \n
\n \n\n \n
\n \n BRAKE DRUMS \n
\n \n\n \n
\n\n {/* \n BRAKE ROTORS{' '}\n \n
\n \n\n \n
*/}\n {/*In using this application you are acknowledging that you have read and understand ConMet's terms and conditions
*/}\n \n );\n }\n}\n\nconst mapStateToProps = (state) => state;\nexport default connect(mapStateToProps)(Start);\n","import React, { Component } from 'react';\r\nimport { connect } from 'react-redux';\r\nimport { push } from 'react-router-redux'\r\nimport {registerSession, resetFilters, setCookie, getCookie } from '../../actions';\r\nimport { slide } from 'react-burger-menu';\r\n\r\nvar Menu = slide;\r\n\r\nclass Navigation extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = { isOpen: false, count: '0' };\r\n this.renderHeader = this.renderHeader.bind(this);\r\n }\r\n\r\n componentDidMount() {\r\n let count = JSON.parse(localStorage.getItem('unseenNotificationsCount'));\r\n this.setState({ count });\r\n }\r\n\r\n componentWillReceiveProps(newProps) {\r\n let count = JSON.parse(localStorage.getItem('unseenNotificationsCount'));\r\n this.setState({ count });\r\n }\r\n\r\n goHome() {\r\n const { dispatch } = this.props;\r\n dispatch(resetFilters());\r\n dispatch(push('/hub'));\r\n }\r\n\r\n goDisclaimer() {\r\n const { dispatch } = this.props;\r\n dispatch(resetFilters());\r\n dispatch(push('/disclaimer'));\r\n this.setState({\r\n isOpen: false,\r\n });\r\n }\r\n goCompareHub() {\r\n const { dispatch } = this.props;\r\n dispatch(resetFilters());\r\n dispatch(push('/hub/compare-hub'));\r\n this.setState({\r\n isOpen: false,\r\n });\r\n }\r\n\r\n goNotification() {\r\n const { dispatch } = this.props;\r\n dispatch(resetFilters());\r\n dispatch(push('/notification'));\r\n this.setState({\r\n isOpen: false,\r\n });\r\n }\r\n\r\n goChooseCalculator() {\r\n const { dispatch } = this.props;\r\n dispatch(push('/replace/choose-calculator'));\r\n this.setState({\r\n isOpen: false,\r\n });\r\n }\r\n\r\n handleStateChange(state) {\r\n let count = JSON.parse(localStorage.getItem('unseenNotificationsCount'));\r\n this.setState({ isOpen: state.isOpen, count });\r\n }\r\n\r\n renderHeader() {\r\n const { router: {location} } = this.props;\r\n let path = location.pathname.includes('/replace/');\r\n if(path){\r\n const { session: {chooseCalculator} }= this.props;\r\n if (location.pathname === '/replace/choose-calculator') {\r\n return 'Calculators';\r\n } else if (chooseCalculator) {\r\n return 'PreSet vs. Conventional Calculator';\r\n } else if (chooseCalculator === 0) {\r\n return 'Replace Calculator';\r\n }\r\n }\r\n return null;\r\n }\r\n\r\n render() {\r\n const { count } = this.state;\r\n return (\r\n\r\n this.handleStateChange(state)}\r\n >\r\n
\r\n );\r\n }\r\n}\r\nfunction select(state) {\r\n return {\r\n notifications: state.results.notifications,\r\n router: state.router,\r\n session: state.calculators\r\n };\r\n}\r\nexport default connect(select)(Navigation);\r\n","import React, { Component } from 'react'\r\nimport {connect} from 'react-redux'\r\n\r\n\r\nclass Footer extends Component {\r\n\r\n\trender() {\r\n\t\treturn (\r\n\t\t\tMore Information
\r\n- \r\n
- \r\n Contact ConMet\r\n \r\n
- \r\n Visit ConMet.com\r\n \r\n
- \r\n \r\n Service Literature\r\n \r\n \r\n
- \r\n Calculators\r\n \r\n
- \r\n Disclaimer\r\n \r\n
- \r\n \r\n Notifications{' '}\r\n {count > 0 ? {count} : null}\r\n \r\n \r\n
- \r\n Hub Training 2.0\r\n \r\n
- \r\n \r\n Privacy Policy\r\n \r\n \r\n
\r\n \r\n \r\n ) : null}\r\n
\r\n \r\n
\r\n\r\n {count > 0 ? (\r\n \r\n \r\n \r\n })
\r\n \r\n
\r\n \r\n \r\n {this.renderHeader()}
\r\n \r\n
\r\n\r\n\t\t);\r\n\t}\r\n}\r\nexport default connect()(Footer)\r\n","import React from 'react';\r\nimport { Link } from 'react-router-dom';\r\nimport { connect } from 'react-redux';\r\n\r\nclass PartsChoosePath extends React.Component {\r\n render () {\r\n return (\r\n By using the ConMet App, you acknowledge that you have read and understand ConMet’s terms and conditions and\r\n\t\t\t\t wheel end disclaimer
\r\n\t\t\t\r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default connect()(PartsChoosePath);\r\n","import React, { Component } from 'react';\r\nimport { connect } from 'react-redux';\r\nimport { push } from 'react-router-redux';\r\nimport { Link } from 'react-router-dom';\r\nimport Autocomplete from 'react-autocomplete';\r\nimport { fetchHubAssemblyNumber } from '../../actions';\r\n\r\nclass PartsSearch extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.doSearch = this.doSearch.bind(this);\r\n\r\n this.state = {\r\n value: '',\r\n assemblyNumber: [],\r\n loading: false,\r\n url: '',\r\n };\r\n }\r\n\r\n doSearch(e) {\r\n e.preventDefault();\r\n this.hubAssemblyFilters();\r\n }\r\n\r\n hubAssemblyFilters(id) {\r\n const { dispatch } = this.props;\r\n if (id) {\r\n dispatch(push('/parts/search/' + id));\r\n } else {\r\n if (this.state.assemblyNumber.length === 1) {\r\n dispatch(push('/parts/search/' + this.state.assemblyNumber[0]));\r\n } else if (\r\n this.state.value !== '' &&\r\n this.state.assemblyNumber.length === 0 &&\r\n !this.state.loading\r\n ) {\r\n //this.props.dispatch(push('/hub/no-results'));\r\n }\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n What are you looking for?
\r\n Hub Components by Assembly\r\n Bearing Cross Reference\r\n Seal Cross Reference\r\n Spindle Nut Reference\r\n {/*Stud Chart*/}\r\n\r\n\r\n
\r\n )}\r\n renderMenu={(items, value) => (\r\n Enter your hub assembly number
\r\n\r\n {value === '' ? (\r\n
\r\n )}\r\n />\r\n \r\n Type ConMet or Competitor assembly number\r\n
\r\n ) : this.state.loading ? (\r\n Loading...
\r\n ) : items.length === 0 ? (\r\n No matches for {value}
\r\n ) : (\r\n items\r\n )}\r\n | \r\n {isRebuildKit ? (\r\n | \r\n\r\n \r\n {isStud ? (\r\n \r\n {part.PartNumber}\r\n \r\n ) : (\r\n part.PartNumber\r\n )}\r\n \r\n {SPINDLESOCKETSIZE[part.PartNumber]\r\n ? '(' +\r\n SPINDLESOCKETSIZE[part.PartNumber] +\r\n '\" Socket)'\r\n : ''}\r\n \r\n | \r\n
| Inner Bearing | \r\n{item.BearingSetNumberInboard} | \r\n
| Outer Bearing | \r\n{item.BearingSetNumberOutboard} | \r\n
| Seal & Spacer | \r\n{item.SealAndSpacerKitNumber} | \r\n
Full Replacement Hub
;\r\n }\r\n\r\n if (-1 !== SERVICEKITS.indexOf(item.TypeId)) {\r\n serviceKitHeader =Service & Rebuild Kits
;\r\n }\r\n\r\n if (-1 !== SERVICEPARTS.indexOf(item.TypeId)) {\r\n servicePartHeader =Service Parts
;\r\n }\r\n\r\n if (-1 !== SPINDLENUTS.indexOf(item.TypeId)) {\r\n spindleNutsHeader =Spindle Nut Kits
;\r\n }\r\n });\r\n return (\r\n\r\n {e.preventDefault();history.goBack()}}\r\n className=\"general-button\"\r\n >\r\n Return to search\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => state;\r\nexport default connect(mapStateToProps)(Results);\r\n","import React, { Component } from \"react\";\nimport { push } from \"react-router-redux\";\nimport { connect } from \"react-redux\";\n\nclass Help extends Component {\n handleClick(path) {\n const { dispatch } = this.props;\n dispatch(push(path));\n }\n\n handleLink(url) {\n window.location = url;\n }\n\n render() {\n return (\n Hub Components Search Results for:
\r\n\r\n {parts.HubAssemblyDescription}{' '}\r\n {parts.HubAssemblyNumber}\r\n
\r\n\r\n {/*{results.items.Results[0].PartStatus === 'Terminated'? '' : replacementHeader}*/}\r\n {replacementHeader}\r\n \r\n \r\n {PARTTYPES.map((item, index) => {\r\n if (-1 < FULLREPLACE.indexOf(item.PartTypeId)) {\r\n let filtered = _.filter(parts.AftermarketParts, {\r\n TypeId: item.PartTypeId,\r\n });\r\n filtered = filtered.sort(function (a, b) {\r\n return a.Ranking > b.Ranking;\r\n });\r\n //Return only the first item\r\n if (filtered.length) {\r\n return this.renderTable([filtered.shift()], item);\r\n }\r\n }\r\n })}\r\n \r\n
\r\n\r\n {serviceKitHeader}\r\n\r\n \r\n \r\n {PARTTYPES.map((item, index) => {\r\n if (-1 < SERVICEKITS.indexOf(item.PartTypeId)) {\r\n let filtered = _.filter(parts.AftermarketParts, {\r\n TypeId: item.PartTypeId,\r\n });\r\n if (filtered.length) {\r\n return this.renderTable(filtered, item);\r\n }\r\n }\r\n })}\r\n \r\n
\r\n\r\n {servicePartHeader}\r\n\r\n \r\n \r\n {PARTTYPES.map((item, index) => {\r\n if (-1 < SERVICEPARTS.indexOf(item.PartTypeId)) {\r\n let filtered = _.filter(parts.AftermarketParts, {\r\n TypeId: item.PartTypeId,\r\n });\r\n if (filtered.length) {\r\n return this.renderTable(filtered, item);\r\n }\r\n }\r\n })}\r\n \r\n
\r\n\r\n {spindleNutsHeader}\r\n\r\n \r\n \r\n {PARTTYPES.map((item, index) => {\r\n if (-1 < SPINDLENUTS.indexOf(item.PartTypeId)) {\r\n let filtered = _.filter(parts.AftermarketParts, {\r\n TypeId: item.PartTypeId,\r\n });\r\n if (filtered.length) {\r\n return this.renderTable(filtered, item);\r\n }\r\n }\r\n })}\r\n \r\n
\r\n
\r\n \n \n\n
\n );\n }\n}\n\nexport default connect()(Help);\n","import React, { Component } from 'react';\r\nimport { push } from 'react-router-redux'\r\nimport { connect } from 'react-redux'\r\nimport HelpDetail from '../global/help-detail'\r\n\r\nclass SearchHelpDetail extends Component {\r\n\r\n\thandleClick(path) {\r\n\t\tconst { dispatch } = this.props;\r\n\t\tdispatch(push(path))\r\n\t}\r\n\r\n\trender() {\r\n\t\treturn (\r\n\t\t\tDo you know your hub assembly number?
\n\n\n \n Read More about finding your assembly number.\n \n
\n\n \n \n ContactCustomer service for support.\n \n
\n \r\n\t\t\t\t
\r\n\t\t)\r\n\t}\r\n};\r\n\r\nexport default connect()(SearchHelpDetail);\r\n","import React, { Component } from 'react';\r\nimport { connect } from 'react-redux';\r\nimport {Route} from 'react-router-dom';\r\nimport PartsChoosePath from '../part/choose-path';\r\nimport PartsSearch from '../part/search';\r\nimport PartsResults from '../part/results';\r\nimport PartsHelp from '../part/help';\r\nimport PartsHelpDetail from '../part/help-detail';\r\n\r\nclass Parts extends Component {\r\n render() {\r\n return (\r\n \r\n\t\t\t\r\n\t\t
\r\n\r\n\r\n\t\t\r\n
\r\n );\r\n }\r\n}\r\n\r\n// Which props do we want to inject, given the global state?\r\n// Note: use https://github.com/faassen/reselect for better performance.\r\nfunction select(state) {\r\n return {\r\n app: state.app,\r\n parts: state.parts,\r\n images: state.images,\r\n results: state.results,\r\n };\r\n}\r\nexport default connect(select)(Parts);\r\n","import React, { Component } from 'react';\r\n\r\nexport default class extends Component {\r\n\trender() {\r\n\t\treturn (\r\n\t\t\t\r\n
\r\n \r\n
\r\n \r\n\t\t\t
\r\n\t\t)\r\n\t}\r\n};\r\n","import React, { Component } from 'react';\r\nexport default class Contact extends Component {\r\n\trender() {\r\n\t\treturn (\r\n\t\t\t\r\n\t\t\t\tAbout\r\n\t\t\t
\r\n\t\t\r\n\t\t\t\tContact\r\n\t\t\t
\r\n\t\t)\r\n\t}\r\n};\r\n","import React, { Component } from 'react';\r\nexport default class Disclaimer extends Component {\r\n render() {\r\n return (\r\n\r\n
\r\n );\r\n }\r\n}\r\n","import React, { Component } from 'react';\r\nimport { connect } from 'react-redux';\r\nimport Modal from 'react-modal';\r\nimport { push } from 'react-router-redux';\r\nclass Notification extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n openModel: false,\r\n openDetailModal: false,\r\n };\r\n }\r\n\r\n openDetailModal(id) {\r\n const { dispatch } = this.props;\r\n dispatch(push('/hub/notification-detail/' + id));\r\n let notifications = JSON.parse(localStorage.getItem('notifications'));\r\n const index = notifications.findIndex((a) => a.Id === id);\r\n if (index > -1) {\r\n notifications[index] = { ...notifications[index], seen: (!notifications[index].Sticky) };\r\n }\r\n localStorage.setItem('notifications', JSON.stringify(notifications));\r\n let unseen = notifications.filter((a) => a.seen === false || !a.seen);\r\n localStorage.setItem(\r\n 'unseenNotificationsCount',\r\n JSON.stringify(unseen ? unseen.length : notifications.length)\r\n );\r\n }\r\n\r\n getOS() {\r\n let userAgent = window.navigator.userAgent,\r\n platform = window.navigator.platform,\r\n macosPlatforms = ['Macintosh', 'MacIntel', 'MacPPC', 'Mac68K'],\r\n windowsPlatforms = ['Win32', 'Win64', 'Windows', 'WinCE'],\r\n iosPlatforms = ['iPhone', 'iPad', 'iPod'],\r\n os = null;\r\n\r\n if (/iPad|iPhone|iPod/.test(userAgent)) {\r\n os = 'iOS';\r\n } else if (/Android/.test(userAgent)) {\r\n os = 'Android';\r\n } else if (macosPlatforms.indexOf(platform) !== -1) {\r\n os = 'Mac OS';\r\n } else if (iosPlatforms.indexOf(platform) !== -1) {\r\n os = 'iOS';\r\n } else if (windowsPlatforms.indexOf(platform) !== -1) {\r\n os = 'Windows';\r\n } else if (!os && /Linux/.test(platform)) {\r\n os = 'Linux';\r\n }\r\n return os;\r\n }\r\n\r\n notificationList(d, i){\r\n\r\n let os = this.getOS();\r\n let version = localStorage.getItem('version');\r\n let osPassed = true;\r\n if(d.TargetOS){\r\n let _androidDevice = os === 'Android';\r\n let _iOSDevice = os === 'iOS';\r\n let _isWeb = !_androidDevice && !_iOSDevice;\r\n if(_androidDevice && !/Android/i.test(d.TargetOS)){\r\n osPassed = false;\r\n }else if(_iOSDevice && !/iOS/i.test(d.TargetOS)){\r\n osPassed = false;\r\n }else if(_isWeb && !/Web/i.test(d.TargetOS)){\r\n osPassed = false;\r\n }\r\n }\r\n let versionPassed = true;\r\n if(d.Version){\r\n if(d.Version.indexOf('<') !== -1) {\r\n versionPassed = version === null || version < d.Version.replace('<','').trim();\r\n } else {\r\n versionPassed = version === d.Version;\r\n }\r\n }\r\n console.log(osPassed, versionPassed)\r\n\r\n if(osPassed && versionPassed){\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n Disclaimer
\r\n\r\n
\r\n \r\n ConMet is the leading supplier of wheel end technology for\r\n commercial vehicles in North America. This app is intended to\r\n direct the distributor and/or end-user to a readily available\r\n aftermarket replacement component or wheel end assembly.\r\n
\r\n\r\n Due to the variety of vehicle applications and part numbers we\r\n supply to the original equipment manufacturers, this app is\r\n not all inclusive. In some cases this app will not have a\r\n reference to a direct aftermarket replacement part number. In\r\n that instance, we will direct you to our customer service team\r\n who can assist with finding the correct service part or wheel\r\n end assembly required to get the vehicle back in service.\r\n
\r\n\r\n CAUTION: As you are guided through the app, it is important\r\n that you verify your responses. Failure to do so could result\r\n in the wrong service part or hub assembly recommendation.\r\n Wheel hubs are a safety critical component and installing the\r\n wrong component or assembly on a vehicle can result in\r\n premature failure.\r\n
\r\n\r\n \r\n {d.Title}\r\n \r\n
\r\n \r\n );\r\n }\r\n }\r\n\r\n render() {\r\n let notifications = JSON.parse(localStorage.getItem('notifications'));\r\n Modal.setAppElement('body');\r\n return (\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default connect()(Notification);\r\n","import React, { Component } from \"react\";\r\nimport { push } from \"react-router-redux\";\r\nimport { connect } from \"react-redux\";\r\nimport HelpDetail from \"../global/help-detail\";\r\n\r\nclass MobileHelpDetail extends Component {\r\n handleClick(path) {\r\n const { dispatch } = this.props;\r\n dispatch(push(path));\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n Notifications
\r\n\r\n {notifications.map((item, i) => (\r\n this.notificationList(item,i)\r\n ))}\r\n
\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default connect()(MobileHelpDetail);\r\n","import React, { Component } from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nexport default class SelectButton extends Component {\r\n static propTypes = {\r\n\t\tcalculator: PropTypes.string.isRequired,\r\n handleClick: PropTypes.func.isRequired,\r\n\t\tlabel: PropTypes.string.isRequired,\r\n\t\tlocation: PropTypes.string.isRequired,\r\n\t\tsessionId: PropTypes.number.isRequired,\r\n\t\tstateKey: PropTypes.string.isRequired,\r\n\t\tstateVals: PropTypes.object\r\n\t};\r\n\r\n constructor(props, context) {\r\n super(props, context);\r\n\r\n this.handleSubmit = this.handleSubmit.bind(this);\r\n }\r\n\r\n\thandleSubmit() {\r\n\t\tconst {calculator, sessionId, stateVals, stateKey, label, location, handleClick} = this.props;\r\n\t\tlet stateValUpdate = stateVals;\r\n\t\tif (!stateValUpdate) {\r\n\t\t\tstateValUpdate = {};\r\n\t\t\tstateValUpdate[stateKey] = label;\r\n\t\t}\r\n\t\tlet updateObj = {...stateValUpdate, lastStep: stateKey};\r\n\t\thandleClick(sessionId, updateObj, location, calculator);\r\n\r\n\t}\r\n\r\n render() {\r\n\t\tconst { label } = this.props;\r\n return (\r\n\t\t\t\r\n\t\t\t\t{label}\r\n );\r\n }\r\n}\r\n","import React, { Component } from \"react\";\r\nimport {connect} from \"react-redux\";\r\nimport SelectButton from \"./SelectButton/index\";\r\nimport PropTypes from 'prop-types';\r\nimport {bindActionCreators} from 'redux';\r\nimport {actionCreators as sessionsActions} from '../replace/index';\r\n\r\nfunction mapStateToProps(state) {\r\n return { session: state.calculators };\r\n}\r\n\r\nfunction mapDispatchToProps(dispatch) {\r\n return { actions: bindActionCreators(sessionsActions, dispatch) };\r\n}\r\n\r\nclass ChooseCalculator extends Component {\r\n constructor(props, context) {\r\n super(props, context);\r\n }\r\n\r\n static propTypes = {\r\n actions: PropTypes.object.isRequired,\r\n session: PropTypes.object.isRequired\r\n };\r\n\r\n componentDidMount() {\r\n this.props.actions.registerSession('guest', 'replace');\r\n }\r\n\r\n render() {\r\n const STATE_KEY = 'chooseCalculator';\r\n const LOCATION = 'choose-calculator';\r\n const {actions: {updateSession}, session: {id, calculator}} = this.props;\r\n return (\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(ChooseCalculator);","import React, { Component } from 'react';\r\nimport _ from 'lodash';\r\nimport PropTypes from 'prop-types';\r\n\r\nexport default class Total extends Component {\r\n static propTypes = {\r\n multiplier: PropTypes.number,\r\n sum: PropTypes.array.isRequired\r\n };\r\n\r\n constructor(props, context) {\r\n super(props, context);\r\n this.state = {\r\n multiplier: this.props.multiplier || 1\r\n };\r\n }\r\n\r\n render() {\r\n const {sum, multiplier} = this.props;\r\n var total: float = sum.reduce(function(prevVal, val) {\r\n return prevVal + _.toNumber(val);\r\n }, 0);\r\n total = total * multiplier;\r\n return (\r\n \r\n })
\r\n })
\r\n
\r\n What would you like to compare?
\r\n\r\n \r\n ${total.toFixed(2)}
\r\n );\r\n }\r\n}\r\n","import React, { Component } from 'react';\r\nimport {connect} from 'react-redux';\r\nimport SelectButton from './SelectButton/index';\r\nimport Total from './total';\r\nimport PropTypes from 'prop-types';\r\nimport {bindActionCreators} from 'redux';\r\nimport {actionCreators as sessionsActions} from '../replace/index';\r\n\r\nfunction mapStateToProps(state) {\r\n return { session: state.calculators };\r\n}\r\n\r\nfunction mapDispatchToProps(dispatch) {\r\n return { actions: bindActionCreators(sessionsActions, dispatch) };\r\n}\r\n\r\nclass RebuildCosts extends Component {\r\n static propTypes = {\r\n actions: PropTypes.object.isRequired,\r\n session: PropTypes.object.isRequired\r\n };\r\n\r\n constructor(props, context) {\r\n super(props, context);\r\n this.handleChange = this.handleChange.bind(this);\r\n const { session: { chooseCalculator } } = this.props;\r\n this.state = {\r\n bearingSetCost: this.props.session.bearingSetCost || '',\r\n hubCost: chooseCalculator ? (this.props.session.hubCost || '') : 0,\r\n wheelSealCost: this.props.session.wheelSealCost || '',\r\n manualSpindleNutCost: this.props.session.manualSpindleNutCost || 0\r\n };\r\n }\r\n\r\n handleChange(e) {\r\n this.setState({ [e.target.name]: e.target.value });\r\n }\r\n\r\n render() {\r\n const STATE_KEY = 'rebuildCosts';\r\n const LOCATION = 'rebuild-costs';\r\n const {actions: {updateSession}, session: {id, calculator, chooseCalculator }} = this.props;\r\n return (\r\n\r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(RebuildCosts);\r\n\r\n","import React, { Component } from 'react';\r\nimport {connect} from 'react-redux';\r\nimport {registerSession, updateSession} from '../../actions';\r\nimport {push} from 'react-router-redux';\r\nimport SelectButton from './SelectButton/index';\r\nimport Total from './total';\r\nimport PropTypes from 'prop-types';\r\nimport {bindActionCreators} from 'redux';\r\nimport {actionCreators as sessionsActions} from '../replace/index';\r\n\r\nfunction mapStateToProps(state) {\r\n return { session: state.calculators };\r\n}\r\n\r\nfunction mapDispatchToProps(dispatch) {\r\n return { actions: bindActionCreators(sessionsActions, dispatch) };\r\n}\r\n\r\nclass ReplacementCosts extends Component {\r\n static propTypes = {\r\n actions: PropTypes.object.isRequired,\r\n session: PropTypes.object.isRequired\r\n };\r\n\r\n constructor(props, context) {\r\n super(props, context);\r\n const {session: {replacementHubCostV, spindleNutCost}} = props;\r\n this.state = {\r\n replacementHubCostV: replacementHubCostV || '',\r\n spindleNutCost: spindleNutCost || ''\r\n };\r\n\r\n }\r\n\r\n handleChange(name, e){\r\n let change: Object = {};\r\n change[name] = e.target.value;\r\n this.setState(change);\r\n }\r\n\r\n render() {\r\n const STATE_KEY = 'replacementCosts';\r\n const LOCATION = 'replacement-costs';\r\n const { actions: {updateSession}, session: {id, calculator, chooseCalculator} } = this.props;\r\n return (\r\n \r\n \r\n
\r\n {chooseCalculator ? 'Conventional Hub Costs' : 'Rebuild Costs'}
\r\n\r\n
\r\n Hub Cost(includes hub, cups, and studs)
\r\nWheel Seal Cost
\r\nBearing {chooseCalculator ? 'Cone' : 'Set'} Cost
\r\n\r\n
\r\n\r\n : ''}\r\n\r\n Manual adjust spindle nut cost
\r\nTotal Cost
\r\n\r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(ReplacementCosts);\r\n\r\n","import React, { Component } from \"react\";\r\nimport {connect} from \"react-redux\";\r\nimport {registerSession, updateSession} from \"../../actions\";\r\nimport {push} from \"react-router-redux\";\r\nimport SelectButton from \"./SelectButton/index\";\r\nimport PropTypes from 'prop-types';\r\nimport {bindActionCreators} from 'redux';\r\nimport {actionCreators as sessionsActions} from '../replace/index';\r\n\r\nfunction mapStateToProps(state) {\r\n return { session: state.calculators };\r\n}\r\n\r\nfunction mapDispatchToProps(dispatch) {\r\n return { actions: bindActionCreators(sessionsActions, dispatch) };\r\n}\r\n\r\nclass LaborCosts extends Component {\r\n static propTypes = {\r\n actions: PropTypes.object.isRequired,\r\n session: PropTypes.object.isRequired\r\n };\r\n\r\n constructor(props, context) {\r\n super(props, context);\r\n const { session: {\r\n calculator,\r\n billableLaborRate,\r\n laborRate,\r\n rebuildHours,\r\n chooseCalculator,\r\n replaceHours\r\n }} = props;\r\n this.state = {\r\n billableLaborRate: billableLaborRate || '',\r\n laborRate: laborRate || '',\r\n rebuildHours: rebuildHours || (chooseCalculator ? 2 : 3),\r\n replaceHours: replaceHours || 1\r\n };\r\n if (calculator === 'replace') {\r\n this.state.billableLaborRate = 0;\r\n }\r\n }\r\n\r\n handleChange(name, e) {\r\n let change: Object = {};\r\n change[name] = e.target.value;\r\n this.setState(change);\r\n }\r\n\r\n render() {\r\n const STATE_KEY = 'laborCosts';\r\n const LOCATION = 'labor-costs'; //'margin-parts';\r\n const { actions: {updateSession}, session: {id, calculator, chooseCalculator} } = this.props;\r\n let billableFields = '';\r\n if (calculator !== 'replace') {\r\n billableFields = (\r\n \r\n
\r\n {chooseCalculator ? 'PreSet' : 'Replacement Costs'}
\r\n{chooseCalculator ? 'Hub Assembly Cost' : 'Hub Cost'}
\r\nConMet preset plus spindle nut cost
\r\n*Only applicable if replacing with valid ConMet AM PreSet assemblies
\r\nTotal Cost
\r\n\r\n
\r\n )\r\n }\r\n return (\r\n Billable Labor Rate / Hour
\r\n\r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(LaborCosts);\r\n\r\n","import React, { Component } from 'react';\r\nimport {connect} from 'react-redux';\r\nimport PropTypes from 'prop-types';\r\nimport {bindActionCreators} from 'redux';\r\nimport {actionCreators as sessionsActions} from '../replace/index';\r\nimport _ from 'lodash';\r\n\r\nfunction mapStateToProps(state) {\r\n return { session: state.calculators };\r\n}\r\n\r\nfunction mapDispatchToProps(dispatch) {\r\n return { actions: bindActionCreators(sessionsActions, dispatch) };\r\n}\r\n\r\nclass CostComparison extends Component {\r\n static propTypes = {\r\n actions: PropTypes.object.isRequired,\r\n session: PropTypes.object.isRequired\r\n };\r\n\r\n constructor(props, context) {\r\n super(props, context);\r\n }\r\n\r\n calculateReplace() {\r\n const {session: {replacementHubCostV, spindleNutCost, laborRate, replaceHours}} = this.props;\r\n let cost = _.toNumber(replacementHubCostV + spindleNutCost);\r\n cost = cost + (_.toNumber(laborRate) * _.toNumber(replaceHours));\r\n return '$'+cost.toFixed(2);\r\n }\r\n calculateRebuild() {\r\n const {session: {bearingSetCost, wheelSealCost, manualSpindleNutCost, laborRate, rebuildHours}}= this.props;\r\n let cost = _.toNumber(bearingSetCost + wheelSealCost + manualSpindleNutCost);\r\n cost = cost + (_.toNumber(laborRate) * _.toNumber(rebuildHours));\r\n return '$'+cost.toFixed(2);\r\n }\r\n multiply(x: number = 0, y: number = 0){\r\n return (x * y).toFixed(2);\r\n }\r\n handleSubmit() {\r\n const { actions: {updateSession}, session: {id, calculator} } = this.props;\r\n // store all calculated values here.\r\n //\r\n const {session: {\r\n partsMargin,\r\n billableLaborRate,\r\n laborRate,\r\n replaceHours,\r\n rebuildHours,\r\n replacementHubCostV,\r\n spindleNutCost,\r\n bearingSetCost,\r\n manualSpindleNutCost,\r\n wheelSealCost\r\n }\r\n } = this.props;\r\n let replacePartsProfit = (_.toNumber(partsMargin)/100) * _.toNumber(replacementHubCostV + spindleNutCost);\r\n let replaceLaborCost = this.multiply(_.toNumber(laborRate), _.toNumber(replaceHours));\r\n let rebuildBillCost = this.multiply(_.toNumber(billableLaborRate), _.toNumber(rebuildHours));\r\n let replaceLaborMargin = (rebuildBillCost - replaceLaborCost).toFixed(2);\r\n const replacementMarginValue = (replacePartsProfit + _.toNumber(replaceLaborMargin));\r\n\r\n let rebuildLaborCost = this.multiply(_.toNumber(laborRate), _.toNumber(rebuildHours));\r\n let rebuildPartsMargin = (rebuildBillCost - rebuildLaborCost).toFixed(2);\r\n let rebuildPartsCost = _.toNumber(bearingSetCost) + _.toNumber(wheelSealCost) + _.toNumber(manualSpindleNutCost);\r\n let rebuildPartsProfit = (_.toNumber(rebuildPartsMargin)/100) * rebuildPartsCost;\r\n let rebuildLaborProfit = (_.toNumber(billableLaborRate) - _.toNumber(laborRate)) * _.toNumber(rebuildHours);\r\n const rebuildMarginValue = ( rebuildPartsProfit + rebuildLaborProfit);\r\n updateSession(id, {lastStep: 'costComparison', replacementMarginValue, rebuildMarginValue}, 'cost-comparison', calculator)\r\n }\r\n\r\n render() {\r\n const {session: {calculator}} = this.props;\r\n const buttonText = (calculator !== 'replace') ? 'Calculate the Margins' : 'View Benefits';\r\n return (\r\n \r\n \r\n
\r\n Labor Costs
\r\nLabor Costs / Hour
\r\n{chooseCalculator ? 'Number of hours to assemble and install Conventional Hub' : 'Number of Hours to Rebuild'}
\r\n{chooseCalculator ? 'Average time is 2 hours' : 'Average time to rebuild is 3 hours'}
\r\n{chooseCalculator ? 'Number of Hours to install PreSet Hub' : 'Number of Hours to Replace'}
\r\n{chooseCalculator ? 'Average time is 1 hour' : 'Average time to replace is 1 hour'}
\r\n\r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(CostComparison);\r\n","import React, { Component } from \"react\";\r\nimport {connect} from \"react-redux\";\r\nimport {registerSession, updateSession} from \"../../actions\";\r\nimport {push} from \"react-router-redux\";\r\nimport SelectButton from \"./SelectButton/index\";\r\nimport PropTypes from 'prop-types';\r\nimport {bindActionCreators} from 'redux';\r\nimport {actionCreators as sessionsActions} from '../replace/index';\r\n\r\nfunction mapStateToProps(state) {\r\n return { session: state.calculators };\r\n}\r\n\r\nfunction mapDispatchToProps(dispatch) {\r\n return { actions: bindActionCreators(sessionsActions, dispatch) };\r\n}\r\n\r\nclass MarginParts extends Component {\r\n static propTypes = {\r\n actions: PropTypes.object.isRequired,\r\n session: PropTypes.object.isRequired\r\n };\r\n\r\n constructor(props, context) {\r\n super(props, context);\r\n const {session: {partsMargin}} = props;\r\n this.state = {\r\n partsMargin: partsMargin || ''\r\n };\r\n\r\n }\r\n handleChange(name, e){\r\n let change: Object = {};\r\n change[name] = e.target.value;\r\n this.setState(change);\r\n }\r\n\r\n render() {\r\n const STATE_KEY = 'marginParts';\r\n const LOCATION = 'margin-parts';\r\n const { actions: {updateSession}, session: {id, calculator} } = this.props;\r\n return (\r\n \r\n
\r\n Total Costs Compared
\r\n\r\n
\r\n Total Cost to REPLACE
\r\n{this.calculateReplace()}
\r\n\r\n
\r\n\r\n\r\n \r\n {buttonText}\r\n\r\n Total Cost to REBUILD
\r\n{this.calculateRebuild()}
\r\n\r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(MarginParts);\r\n","import React, { Component } from \"react\";\r\nimport {connect} from \"react-redux\";\r\nimport {registerSession, updateSession} from \"../../actions\";\r\nimport {push} from \"react-router-redux\";\r\nimport SelectButton from \"./SelectButton/index\";\r\nimport PropTypes from 'prop-types';\r\nimport {bindActionCreators} from 'redux';\r\nimport {actionCreators as sessionsActions} from '../replace/index';\r\n\r\nfunction mapStateToProps(state) {\r\n return { session: state.calculators };\r\n}\r\n\r\nfunction mapDispatchToProps(dispatch) {\r\n return { actions: bindActionCreators(sessionsActions, dispatch) };\r\n}\r\n\r\nclass DowntimeCosts extends Component {\r\n static propTypes = {\r\n actions: PropTypes.object.isRequired,\r\n session: PropTypes.object.isRequired\r\n };\r\n\r\n constructor(props, context) {\r\n super(props, context);\r\n const {session: {downtimeCosts}} = props;\r\n this.state = {\r\n downtimeCosts: downtimeCosts || ''\r\n };\r\n\r\n }\r\n\r\n handleChange(name, e){\r\n let change: Object = {};\r\n change[name] = e.target.value;\r\n this.setState(change);\r\n }\r\n\r\n render() {\r\n const STATE_KEY = 'downtime-costs';\r\n const LOCATION = 'downtime-costs';\r\n const { actions: {updateSession}, session: {id, calculator} } = this.props;\r\n return (\r\n \r\n \r\n\r\n \r\n
\r\n Parts Markup Percentage
\r\n\r\n\r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(DowntimeCosts);\r\n\r\n","import React, { Component } from 'react';\r\nimport {connect} from 'react-redux';\r\nimport PropTypes from 'prop-types';\r\nimport {bindActionCreators} from 'redux';\r\nimport {actionCreators as sessionsActions} from '../replace/index';\r\nimport _ from 'lodash';\r\nimport 'react-super-responsive-table/src/SuperResponsiveTableStyle.css'\r\n\r\nfunction mapStateToProps(state) {\r\n return { session: state.calculators };\r\n}\r\n\r\nfunction mapDispatchToProps(dispatch) {\r\n return { actions: bindActionCreators(sessionsActions, dispatch) };\r\n}\r\n\r\nclass Results extends Component {\r\n static propTypes = {\r\n actions: PropTypes.object.isRequired,\r\n session: PropTypes.object.isRequired\r\n };\r\n\r\n constructor(props, context) {\r\n super(props, context);\r\n this.state = {\r\n replacementMarginValue: 0,\r\n rebuildMarginValue: 0\r\n }\r\n }\r\n\r\n multiply(x: number = 0, y: number = 0){\r\n return (x * y).toFixed(2);\r\n }\r\n handleSubmit(rebuildMarginValue, replacementMarginValue, customerSavings) {\r\n const { actions: {updateSession}, session: {id, calculator} } = this.props;\r\n updateSession(id, {lastStep: 'results', replacementMarginValue, rebuildMarginValue, customerSavings}, 'results', calculator)\r\n }\r\n\r\n calculateSavings(rebuild, replace) {\r\n const savings = _.toNumber(rebuild) - _.toNumber(replace);\r\n return (savings > 0) ? savings : 0;\r\n }\r\n\r\n\r\n render() {\r\n const {session: {\r\n calculator,\r\n partsMargin,\r\n billableLaborRate,\r\n laborRate,\r\n replaceHours,\r\n rebuildHours,\r\n replacementHubCostV,\r\n spindleNutCost,\r\n bearingSetCost,\r\n manualSpindleNutCost,\r\n wheelSealCost,\r\n hubCost,\r\n downtimeCosts,\r\n chooseCalculator,\r\n }\r\n } = this.props;\r\n let replacePartsProfit = (_.toNumber(partsMargin)/100) * (_.toNumber(replacementHubCostV) + _.toNumber(spindleNutCost));\r\n let replaceLaborCost = this.multiply(_.toNumber(laborRate), _.toNumber(replaceHours));\r\n let replaceBillCost = this.multiply(_.toNumber(billableLaborRate), _.toNumber(replaceHours));\r\n let replaceLaborMargin = (_.toNumber(replaceBillCost) - _.toNumber(replaceLaborCost)).toFixed(2);\r\n const replacementMarginValue = (replacePartsProfit + _.toNumber(replaceLaborMargin));\r\n let replaceLabor = (replaceBillCost > 0) ? replaceBillCost: replaceLaborCost;\r\n const replaceCost = _.toNumber(replaceLabor) + (_.toNumber(replacementHubCostV) + _.toNumber(spindleNutCost)) + _.toNumber(chooseCalculator ? 0 : replacePartsProfit);\r\n const replaceDowntimeCost = this.multiply(_.toNumber(downtimeCosts), _.toNumber(replaceHours));\r\n const replaceTotal = _.toNumber(replaceCost) + _.toNumber(replaceDowntimeCost);\r\n\r\n let rebuildLaborCost = this.multiply(_.toNumber(laborRate), _.toNumber(rebuildHours));\r\n let rebuildPartsCost = _.toNumber(chooseCalculator ? hubCost : 0) + _.toNumber(bearingSetCost)+_.toNumber(wheelSealCost)+_.toNumber(manualSpindleNutCost);\r\n let rebuildBillCost = this.multiply(_.toNumber(billableLaborRate), _.toNumber(rebuildHours));\r\n let rebuildPartsProfit = (_.toNumber(partsMargin)/100) * rebuildPartsCost;\r\n let rebuildLaborProfit = (_.toNumber(rebuildBillCost) - _.toNumber(rebuildLaborCost));\r\n\r\n let rebuildMarginValue = ( _.toNumber(rebuildPartsProfit) + _.toNumber(rebuildLaborProfit));\r\n let laborMarkupPercent = _.toNumber((laborRate/billableLaborRate)*100).toFixed(2);\r\n let rebuildLabor = (rebuildBillCost > 0) ? rebuildBillCost: rebuildLaborCost;\r\n\r\n const rebuildCost = _.toNumber(rebuildLabor) + _.toNumber(rebuildPartsCost) + _.toNumber(chooseCalculator ? 0 : rebuildPartsProfit);\r\n const rebuildDowntimeCost = this.multiply(_.toNumber(downtimeCosts), _.toNumber(rebuildHours));\r\n const rebuildTotal = _.toNumber(rebuildCost) + _.toNumber(rebuildDowntimeCost);\r\n const savings = this.calculateSavings(rebuildTotal,replaceTotal).toFixed(2);\r\n\r\n let partsMarginDisplay, laborMarginDisplay = null;\r\n if (calculator !== 'replace') {\r\n partsMarginDisplay = (\r\n \r\n \r\n \r\n
\r\n\r\n\r\n \r\n\r\n \r\n
\r\n Down Time Cost / Hour
\r\n| Example Costs per Hour: | \r\n|
| Regional Haul (Dry Goods) | \r\n$75-$85 / hour | \r\n
| Long Haul (Dry Goods) | \r\n$100-$120 / hour | \r\n
| Long Haul (Refrigerated Goods) | \r\n$120-$180 / hour | \r\n
| Specialty Haul – Chemicals | \r\n$270+ / hour | \r\n
| Refuse Vehicle | \r\n$225+ per hour | \r\n
\r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(Results);\r\n\r\n","import React, { Component } from 'react';\r\nimport {connect} from 'react-redux';\r\nimport _ from 'lodash';\r\nimport {\r\n startEmail\r\n} from '../../actions';\r\n\r\nfunction mapStateToProps(state) {\r\n return state;\r\n}\r\n\r\nclass Email extends Component {\r\n constructor(props, context) {\r\n super(props, context);\r\n this.handleChange = this.handleChange.bind(this);\r\n this.handleSubmit = this.handleSubmit.bind(this);\r\n\r\n this.state = {\r\n recipientName: '',\r\n recipientEmail: '',\r\n recipientCompany: '',\r\n senderName: '',\r\n senderEmail: '',\r\n senderCompany: '',\r\n notes: '',\r\n }\r\n }\r\n\r\n handleChange(e) {\r\n e.preventDefault();\r\n this.setState({ [e.target.name]: e.target.value });\r\n }\r\n\r\n handleSubmit(e) {\r\n e.preventDefault();\r\n const {\r\n calculators: {\r\n partsMargin,\r\n billableLaborRate,\r\n laborRate,\r\n rebuildHours,\r\n replaceHours,\r\n bearingSetCost,\r\n manualSpindleNutCost,\r\n wheelSealCost,\r\n hubCost,\r\n replacementHubCostV,\r\n spindleNutCost,\r\n chooseCalculator,\r\n downtimeCosts\r\n },\r\n dispatch\r\n } = this.props;\r\n let rebuildPartsCost = _.toNumber(chooseCalculator ? hubCost : 0) + _.toNumber(wheelSealCost) + _.toNumber(bearingSetCost) + _.toNumber(manualSpindleNutCost);\r\n let replacementHubCost = _.toNumber(replacementHubCostV) + _.toNumber(spindleNutCost);\r\n let rebuildLaborCost = _.toNumber(rebuildHours) * _.toNumber(laborRate);\r\n let replaceLaborCost = _.toNumber(replaceHours) * _.toNumber(laborRate);\r\n let rebuildDowntimeCost = _.toNumber(rebuildHours) * _.toNumber(downtimeCosts);\r\n let replaceDowntimeCost = _.toNumber(replaceHours) * _.toNumber(downtimeCosts);\r\n let totalRebuildCosts = (_.toNumber(rebuildPartsCost) + _.toNumber(rebuildLaborCost) + _.toNumber(rebuildDowntimeCost));\r\n let totalReplaceCosts = (_.toNumber(replacementHubCostV) + _.toNumber(spindleNutCost) + _.toNumber(replaceLaborCost) + _.toNumber(replaceDowntimeCost));\r\n let partsProfit = (_.toNumber(partsMargin) / 100) * (_.toNumber(bearingSetCost) + _.toNumber(wheelSealCost) + _.toNumber(manualSpindleNutCost));\r\n let laborProfit = (_.toNumber(billableLaborRate) - _.toNumber(laborRate)) * _.toNumber(rebuildHours);\r\n const rebuildMarginValue = (partsProfit + laborProfit);\r\n const addedState = {\r\n totalRebuildCosts,\r\n totalReplaceCosts,\r\n rebuildPartsCost,\r\n replacementHubCost,\r\n replaceLaborCost,\r\n rebuildLaborCost,\r\n replaceDowntimeCost,\r\n rebuildDowntimeCost,\r\n rebuildMarginValue,\r\n ...this.props.calculators,\r\n ...this.state\r\n };\r\n dispatch(startEmail(addedState));\r\n }\r\n\r\n render() {\r\n const {calculators: {sendingEmail, emailError}} = this.props;\r\n const { recipientName, recipientEmail, recipientCompany, senderName, senderEmail, senderCompany } = this.state;\r\n let renderEl = '';\r\n if (sendingEmail) {\r\n renderEl = (\r\n
\r\n Results
\r\n\r\n
\r\n \r\n \r\n \r\n
\r\n
\r\n | \r\n | {chooseCalculator ? 'Conventional' : 'Rebuild'} | \r\n{chooseCalculator ? 'PreSet' : 'Replace'} | \r\n
|---|---|---|
| Total | \r\n${rebuildTotal.toFixed(2)} | \r\n${replaceTotal.toFixed(2)} | \r\n
| Parts | \r\n${rebuildPartsCost.toFixed(2)} | \r\n${(_.toNumber(replacementHubCostV) + _.toNumber(spindleNutCost)).toFixed(2)} | \r\n
| Labor | \r\n${rebuildLaborCost} ({rebuildHours} hrs) | \r\n${replaceLaborCost} ({replaceHours} hrs) | \r\n
| Downtime | \r\n${rebuildDowntimeCost} ({rebuildHours} hrs) | \r\n${replaceDowntimeCost} ({replaceHours} hrs) | \r\n
\r\n
\r\n \r\n Next\r\n \r\n
\r\n ${savings} Savings {chooseCalculator ? 'with PreSet' : 'to Replace'}
\r\n\r\n
\r\n Benefits of {chooseCalculator ? 'PreSet' : 'Replacing'}
\r\n\r\n Maximize Uptime
\r\n +
\r\n Extended Warranty
\r\n +
\r\n Simplified Process
\r\n {/*+
*/}\r\n {/*Liability Protection
*/}\r\n
\r\n \r\n +
\r\n Extended Warranty
\r\n +
\r\n Simplified Process
\r\n {/*+
*/}\r\n {/*Liability Protection
*/}\r\n
\r\n
)\r\n } else if (emailError) {\r\n renderEl = (Sending Email...
\r\n\r\n
)\r\n\r\n } else {\r\n renderEl = ()\r\n }\r\n return (\r\n We were unable to send the email. Please try again later
\r\n\r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps)(Email);\r\n\r\n","import React, { Component } from 'react';\r\nimport {connect} from 'react-redux';\r\nimport {push} from 'react-router-redux';\r\nimport PropTypes from 'prop-types';\r\nimport {bindActionCreators} from 'redux';\r\nimport {actionCreators as sessionsActions} from '../replace/index';\r\n\r\nfunction mapStateToProps(state) {\r\n return { session: state.calculators };\r\n}\r\n\r\nfunction mapDispatchToProps(dispatch) {\r\n return { actions: bindActionCreators(sessionsActions, dispatch), push: bindActionCreators(push, dispatch) };\r\n\r\n}\r\n\r\nclass Confirmation extends Component {\r\n static propTypes = {\r\n actions: PropTypes.object.isRequired,\r\n push: PropTypes.func.isRequired,\r\n session: PropTypes.object.isRequired,\r\n\r\n };\r\n\r\n constructor(props, context) {\r\n super(props, context);\r\n }\r\n\r\n handleClick() {\r\n const { session: { id }, actions: {expireSession}, push} = this.props;\r\n push('/replace/choose-calculator');\r\n expireSession(id);\r\n\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n {renderEl}\r\n
\r\n \r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(Confirmation);\r\n\r\n","import React, { Component } from 'react';\r\nimport { Link } from 'react-router-dom';\r\n\r\nexport default class NotFound extends Component {\r\n render() {\r\n return (\r\n \r\n\r\n
\r\n );\r\n }\r\n}","import React, { Component } from 'react';\nimport { connect } from 'react-redux';\nimport {Route} from 'react-router-dom';\nimport ChooseCalculator from './choose-calculator';\nimport RebuildCosts from './rebuild-costs';\nimport ReplacementCosts from './replacement-costs';\nimport LaborCosts from './labor-costs';\nimport CostComparison from './cost-comparison';\nimport MarginParts from './margin-parts';\nimport DownTimeCost from './downtime-costs';\nimport Results from './results';\nimport Email from './email';\nimport Confirmation from './confirmation';\nimport NotFound from './not-found';\n\nclass Replace extends Component {\n render() {\n return (\n \r\n {/**/}\r\n\r\n
\r\n \r\n\r\n 404
\r\n\r\n
\r\n 404
Page Not Found
\r\n\r\n \r\n
\r\n We were unable to find the page you are looking for.
\r\n\r\n {/*Home*/}\r\n\r\n\n
\n );\n }\n}\nexport default connect()(Replace);\nexport {\n actionCreators\n} from '../../actions';\n","import React, { Component } from 'react';\r\nimport {fetchCategories} from '../actions/categories';\r\nimport {\r\n\tfetchCastingFilterCategories,fetchRotorCastingFilterCategories\r\n } from \"../actions\";\r\nimport {connect} from 'react-redux'\r\nimport HubSelectionWrapper from '../components/hub'\r\nimport HubSelectionStart from '../components/hub/start'\r\nimport Navigation from '../components/general/navigation'\r\nimport Footer from '../components/general/footer'\r\nimport {Route} from 'react-router-dom';\r\nimport PartsWrapper from '../components/part';\r\nimport About from '../components/general/about';\r\nimport Contact from '../components/general/contact';\r\nimport Disclaimer from '../components/general/disclaimer';\r\nimport Notification from '../components/general/notification';\r\nimport MobileHelpDetail from '../components/general/mobile-help.js';\r\nimport ReplaceWrapper from '../components/replace';\r\n\r\nclass App extends Component {\r\n\tcomponentDidMount() {\r\n\t\tconst { dispatch } = this.props;\r\n\t\tdispatch(fetchCategories())\r\n\t\tdispatch(fetchCastingFilterCategories())\r\n\t\tdispatch(fetchRotorCastingFilterCategories());\r\n\t\t\r\n\t}\r\n\trender() {\r\n\t\treturn (\r\n\t\t\t\n
\n \n
\n \r\n\t\t\t
\r\n\t\t\t)\r\n\t}\r\n};\r\n\r\n\r\nexport default connect()(App)\r\n","import React, { Component } from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport { push } from 'react-router-redux'\r\n\r\nclass Splash extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = { history: props.history };\r\n }\r\n\r\n componentWillMount() {\r\n const { dispatch } = this.props;\r\n dispatch(push(\"/hub\"));\r\n }\r\n\r\n render() {\r\n return \r\n\t\t\t\t\t\r\n\t\t\t\t\t
\r\n\t\t\tsplash
;\r\n }\r\n}\r\nexport default connect()(Splash);\r\n","import React from 'react';\r\nimport { Route } from 'react-router-dom';\r\nimport Main from '../containers/main';\r\nimport App from '../containers/app';\r\nimport Splash from '../components/general/splash';\r\nimport { Component } from 'react';\r\n\r\nexport default class Routes extends Component {\r\n render() {\r\n return (\r\n