\r\n \r\n {mobileView ? (\r\n \r\n this.handleModalShowHide()} style={{cursor:'pointer'}}\r\n />\r\n\r\n \r\n {(this.props.cart || []).length}\r\n \r\n\r\n \r\n \r\n Cart Items\r\n \r\n \r\n {(this.props.cart || []).length > 0 ? (\r\n <>\r\n {this.props.cart.map((cartItem, idx) => {\r\n return ( \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n {/* */}\r\n \r\n this.removeItem(cartItem.PartNumber)\r\n }\r\n >\r\n
\r\n \r\n \r\n );\r\n })}\r\n \r\n this.getRedirectURL()}\r\n />\r\n \r\n \r\n ) : (\r\n <> You have no items in your shopping cart.\r\n )}\r\n \r\n \r\n \r\n ) : (\r\n \r\n \r\n this.handleModalShowHide()\r\n } style={{cursor:'pointer'}}\r\n />\r\n\r\n \r\n {(this.props.cart || []).length}\r\n \r\n\r\n \r\n \r\n Cart Items\r\n \r\n \r\n {(this.props.cart || []).length > 0 ? (\r\n <>\r\n \r\n \r\n \r\n \r\n \r\n this.getRedirectURL()}\r\n />\r\n \r\n \r\n ) : (\r\n <> You have no items in your shopping cart.\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\nconst mapStateToProps = (state) => {\r\n let cartQty = {};\r\n state.cart.cartItems.forEach((item) => (cartQty[item.PartNumber] = item.qty));\r\n return {\r\n ...state,\r\n cart: state.cart.cartItems,\r\n cartQty,\r\n };\r\n};\r\n\r\nconst mapDispatchProps = (dispatch) => ({\r\n setCartItems: (cart) => dispatch(setCarItems(cart)),\r\n});\r\n\r\nexport default connect(mapStateToProps, mapDispatchProps)(ViewHOC(CartModal));\r\n","import React from 'react'\r\nimport loader from '../page_preload.gif'\r\n\r\nexport default function Loading({ loading = false, children }) {\r\n return (\r\n // \r\n
\r\n
\r\n \r\n \r\n \r\n
Part Number: \r\n {/*
\r\n */}\r\n {cartItem.PartNumber}\r\n {/*
*/}\r\n \r\n {/*
*/}\r\n
\r\n */}\r\n
Part Description:
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {\r\n cartItem.qty - 1 > 0 &&\r\n this.updateQuantity(\r\n cartItem.PartNumber,\r\n cartItem.qty - 1\r\n );\r\n }}\r\n >\r\n \r\n \r\n \r\n {\r\n cartItem.qty + 1 < 100 &&\r\n this.updateQuantity(\r\n cartItem.PartNumber,\r\n cartItem.qty + 1\r\n );\r\n }}\r\n >\r\n \r\n \r\n \r\n
\r\n \r\n {\r\n this.updateQuantity(\r\n cartItem.PartNumber,\r\n e.currentTarget.value\r\n );\r\n }}>\r\n \r\n {cartItem.qty} \r\n
\r\n \r\n \r\n // {loading &&
\r\n \r\n // 
}\r\n // \r\n // {children}\r\n //
\r\n // \r\n {loading &&
\r\n )\r\n}\r\n","import React from \"react\";\r\nimport \"./nav.css\";\r\nimport { ViewHOC } from \"./ViewHOC\";\r\nimport { Link } from \"react-router-dom\";\r\nimport { getLocationObject } from \"./Util\";\r\nimport { MailIDS } from \"./constants/constants\";\r\nimport CartModal from \"./CartModal\";\r\nimport Loading from './Loading';\r\nimport Cookies from 'js-cookie'\r\n// import { USER_GUIDE } from \"./constants/RouteConstants\";\r\n\r\n// Added By Shreyas to Redirect Page to Home URL--Start Changed on 24 Feb 2023\r\nfunction pageRefresh(event){\r\n event.preventDefault();\r\n localStorage.setItem(\"Temp_Country\",Cookies.get('HP_Country'));// Added on:-09 March 2023\r\n //window.location.replace(`${process.env.REACT_APP_HOME_DIRECTORY}`);\r\n window.location.replace(\"/PartSurfer\");\r\n };\r\n// Added By Shreyas to Redirect Page to Home URL--End Changed on 24 Feb 2022\r\n\r\nfunction Navbar(props) {\r\n // console.log('mobile', x.mobileView)\r\n// console.log(\"navprop\", props);\r\n return (\r\n \r\n
}\r\n {loading ? \r\n \r\n
\r\n \r\n {children}\r\n
: children}\r\n \r\n \r\n User Guide\r\n \r\n \r\n Frequently Asked Questions\r\n \r\n \r\n Contact Us\r\n \r\n {/* {!MailIDS.includes(localStorage.getItem(\"loggeduser\")) ? \"\": \r\n \r\n Generate Metrics\r\n } */}\r\n
\r\n \r\n {User} {User ?\r\n \r\n LogOut\r\n : \r\n \r\n Login\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 For further assistance with ordering or identifying HP parts,\r\n please visit the \r\n
\r\n
\r\n \r\n \r\n >> Support for my product\r\n \r\n \r\n
\r\n
\r\n \r\n \r\n >>General HP information\r\n \r\n \r\n
\r\n
\r\n I would like to send email to HP regarding ..
\r\n
\r\n
\r\n
\r\n {/*
\r\n
\r\n
\r\n
\r\n \r\n \r\n Back to home\r\n \r\n
\r\n
\r\n \r\n
\r\n
\r\n
\r\n \r\n
\r\n
\r\n
\r\n \r\n
\r\n
\r\n This document answers some of the common questions regarding HP\r\n PartSurfer and Service Parts Information (SPI) data. If you have a\r\n question or concern that is not addressed here, please refer to our{\" \"}\r\n contact page for more\r\n detailed help or to contact us via email.\r\n
\r\n\r\n \r\n Q.Do I have to register in order to use HP PartSurfer?\r\n {\" \"}\r\n
\r\n
\r\n General Application Questions\r\n
\r\n Q.How often is HP PartSurfer updated?{\" \"}\r\n
\r\n Part/Product and Ordering Questions\r\n
\r\n \r\n Q.I have found the part that I need. Now how do I order it?\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n \r\n Back to home\r\n \r\n
\r\n \r\n
\r\n
\r\n
{\r\n e.target.src = `${window.location.origin}/PartSurfer/img/${src}`; //replacement image imported above\r\n }}\r\n />\r\n \r\n )\r\n}\r\n","import zIndex from \"@material-ui/core/styles/zIndex\";\r\nimport React,{useEffect} from \"react\";\r\n\r\nclass GoToTop extends React.Component{\r\n\r\n componentDidMount() {\r\n window.addEventListener(\"scroll\",this.listenToScroll)\r\n }\r\n\r\n listenToScroll=()=>{\r\n if(document.body.scrollTop>1000 || document.documentElement.scrollTop >1000){\r\n document.getElementById(\"my-btn\").style.display='block';\r\n }\r\n else\r\n {\r\n document.getElementById(\"my-btn\").style.display='none'; \r\n }\r\n }\r\n\r\n goToBtn=()=>{\r\n window.scroll({top:0 ,left:0,behavior:\"smooth\"})\r\n }\r\n\r\n render(){\r\n const mystyle= {\r\n display: \"none\", \r\n position: \"fixed\", \r\n bottom: \"20px\", \r\n right: \"30px\", \r\n zIndex: \"99\", \r\n border: \"none\", \r\n outline: \"none\", \r\n backgroundcolor: \"red\", \r\n color: \"white\", \r\n cursor: \"pointer\", \r\n padding: \"15px\", \r\n borderradius: \"10px\", \r\n fontsize: \"18px\" \r\n }\r\n\r\nreturn(\r\n <>\r\n\r\n \r\n \r\n);\r\n }\r\n}\r\n export default GoToTop;","// npm install react-cookie\r\nimport React from 'react';\r\nimport axios from 'axios';\r\nimport './design.css';\r\nimport NotificationSystem from 'react-notification-system';\r\nimport { Dropdown } from 'react-bootstrap';\r\nimport Loading from './Loading';\r\nimport Cookies from 'js-cookie'\r\nimport { setCookie, getQueryParam, getURLQueryString, getAuthHeader, getAuthHeaderUID, bodyParametersUID } from './Util';\r\nimport { GETGLBURL, GET_COUNTRIES, GENERIC_SEARCH, PARTLIST, PRODUCTLIST, SERIALNUMBER, FUNCTIONAL, GETUIDRESPONSE, GETUIDTOKEN } from './constants/APIConstants';\r\nimport { withRouter } from 'react-router-dom';\r\nimport { SEARCH_TEXT, SEARCH_BY, SEARCH_MODES, Code_Url } from './constants/constants';\r\nimport \"./nav.css\";\r\nimport { Link } from \"react-router-dom\";\r\nimport { getLocationObject } from \"./Util\";\r\nimport Login from \"./login\";\r\nimport { isMobile } from 'react-device-detect';\r\nimport GoToTop from './GoToTop';\r\nimport Select from \"react-select\";\r\n//import { useCookies, Cookies } from \"react-cookie\";\r\n\r\nclass Form extends React.Component\r\n{\r\n state = {\r\n FieldName: '',\r\n country: '',\r\n loading: false,\r\n searchBy: '',\r\n searchyByText: '',\r\n arraySearchBy: '',\r\n topmenuValue: '',\r\n code : '',\r\n User : '',\r\n };\r\n\r\n componentDidMount() {\r\n getURLQueryString();\r\n //setCookie('HP_Country', \"US\");Commented for adding Home page Changes\r\n //setCookie(\"Search_Text\",\"Generic Search\");\r\n if(localStorage.getItem(\"Temp_Country\")!='' && localStorage.getItem(\"Temp_Country\")!=null)// Added By Shreyas For Home Page Country Drop down--Start Here\r\n {\r\n setCookie('HP_Country',localStorage.getItem(\"Temp_Country\"));\r\n //localStorage.setItem(\"Temp_Country\",'');\r\n }\r\n else\r\n {\r\n setCookie('HP_Country', \"US\");\r\n localStorage.setItem(\"Temp_Country\",'US');\r\n }// Added By Shreyas For Home Page Country Drop down--End Here\r\n\r\n\r\n // let values = this.props.location.search;\r\n\r\n // let username = localStorage.getItem(\"loggeduser\");\r\n\r\n // if(username == null)\r\n // {\r\n // if(values.includes(\"code\"))\r\n // {\r\n // var array = values.split(\"=\");\r\n // //localStorage.setItem(\"loggeduser\",array[1]);\r\n // //this.setState({ User: localStorage.getItem(\"loggeduser\") });\r\n // console.log(localStorage.getItem(\"loggeduser\"));\r\n // }\r\n // }\r\n // else{\r\n // localStorage.setItem(\"loggeduser\",username);\r\n // this.setState({ User: username });\r\n // }\r\n let username = localStorage.getItem(\"loggeduser\"); \r\n if(username == \"UID_Failed\")\r\n {\r\n alert(\"We are facing problem on HP UID authentication. Please try again\");\r\n localStorage.removeItem(\"loggeduser\")\r\n }\r\n\r\n\r\n this.setState({\r\n countryLoading: true,\r\n country: Cookies.get('HP_Country') || 'US',\r\n FieldName: getQueryParam(this.props, SEARCH_TEXT),\r\n searchBy: getQueryParam(this.props, SEARCH_BY),//Added\r\n //topmenuValue :Cookies.get(\"Search_Text\")\r\n },\r\n () => {\r\n this.state.FieldName && this.loadData()\r\n });\r\n this.notificationSystem = React.createRef();\r\n this.setusertype();\r\n axios.get(GET_COUNTRIES(localStorage.getItem(\"usertype\")), {\r\n headers: {\r\n ...getAuthHeader()\r\n }\r\n })\r\n .then((res) => {\r\n const data = res.data.Body;\r\n let dat = data.map((con, index) => {\r\n return { key: con.CountryCode, value: con.CountryName }\r\n })\r\n this.setState({ data: dat, countryLoading: false })\r\n }, (error) => {\r\n // console.log(error);\r\n this.setState({ countryLoading: false })\r\n })\r\n document.getElementById(\"\")\r\n\r\n\r\n }\r\n\r\n getUID = (input) => {\r\n this.setState({ countryLoading: true })\r\n let urlprod;\r\n urlprod = GETUIDRESPONSE(input);\r\n axios.get(urlprod, {\r\n headers: {\r\n ...getAuthHeaderUID()\r\n },\r\n\r\n })\r\n .then((res) => {\r\n this.setState({ data: res.data.Body, countryLoading: false })\r\n console.log(res.data.Body);\r\n }, (error) => {\r\n this.setState({ data: null, countryLoading: false })\r\n })\r\n }\r\n\r\n setusertype = () => {\r\n let username = localStorage.getItem(\"loggeduser\");\r\n if(isMobile)\r\n {\r\n if(username == null)\r\n {\r\n localStorage.setItem(\"usertype\",\"MEX\");\r\n }\r\n else\r\n {\r\n localStorage.setItem(\"usertype\",\"MIN\");\r\n }\r\n }\r\n else\r\n {\r\n if(username == null)\r\n {\r\n localStorage.setItem(\"usertype\",\"EXT\");\r\n }\r\n else\r\n {\r\n localStorage.setItem(\"usertype\",\"INT\");\r\n }\r\n }\r\n }\r\n\r\n removeCookie = (e) => {\r\n e.preventDefault();\r\n localStorage.removeItem(\"loggeduser\");\r\n this.setState({ User: null });\r\n alert(\"LogOut Success!\");\r\n window.location.href = \"/PartSurfer\";\r\n }\r\n\r\n getUIDtoken = (inputcode) => {\r\n\r\n const https = require('https');\r\n const Agent = new https.Agent({\r\n rejectUnauthorized: false\r\n })\r\n this.setState({ countryLoading: true })\r\n let urlprod;\r\n urlprod = GETUIDTOKEN(inputcode);\r\n var config = {\r\n method: 'HEAD',\r\n url: 'https://login-itg.external.hp.com/as/token.oauth2?redirect_uri=http://localhost:37892/CallBack.aspx&grant_type=authorization_code&code='+ inputcode,\r\n httpsAgent: Agent,\r\n headers: {\r\n 'Authorization': 'Basic cGFydHN1cmZlci1pdGctdWlkLWNsaWVudDpSTm90R0hWdUV1anBTNXdubnI1VUtqcWx1V1QzbDFSSzlVR2liaUhWUmhoSERoaHJKOEJsOElVWlAzVHhOWnBR',\r\n 'Content-Type': 'application/x-www-form-urlencoded',\r\n 'Accept': 'application/json',\r\n 'Access-Control-Allow-Origin': '*',\r\n },\r\n mode: 'no-cors',\r\n withCredentials: true,\r\n // credentials: 'same-origin',\r\n crossdomain: true,\r\n };\r\n\r\n axios(config)\r\n .then(function (response) {\r\n\r\n console.log(JSON.stringify(response.data));\r\n\r\n })\r\n .catch(function (error) {\r\n console.log(error);\r\n });\r\n\r\n }\r\n\r\n addNotification = text => {\r\n const notification = this.notificationSystem.current;\r\n // console.log('noti', notification)\r\n notification.addNotification({\r\n message: text,\r\n level: 'error',\r\n position: 'tc',\r\n });\r\n };\r\n\r\n loadData = () => {\r\n const { FieldName, country, searchBy } = this.state;\r\n if (country) {\r\n this.setState({ dataLoading: true }, () => this.props.onSubmit(null))\r\n let url;\r\n switch (searchBy) {\r\n case SEARCH_MODES.PART: url = PARTLIST(FieldName, country, localStorage.getItem(\"usertype\"))\r\n break;\r\n case SEARCH_MODES.PRODUCT: url = PRODUCTLIST(FieldName, country,localStorage.getItem(\"usertype\"))\r\n break;\r\n case SEARCH_MODES.SEARIAL_NUMBER: url = SERIALNUMBER(FieldName, country,localStorage.getItem(\"usertype\"))\r\n break;\r\n case SEARCH_MODES.SERIAL_WP: url = SERIALNUMBER(FieldName, country, localStorage.getItem(\"usertype\"))\r\n break;\r\n case SEARCH_MODES.FUNCTIONAL_EQUIVALENT: url = FUNCTIONAL(FieldName, country,localStorage.getItem(\"usertype\"))\r\n break;\r\n default:\r\n url = GENERIC_SEARCH(FieldName, country, localStorage.getItem(\"usertype\"))\r\n }\r\n // console.log('url', url, searchBy)\r\n axios.get(url, {\r\n headers: {\r\n ...getAuthHeader()\r\n }\r\n })\r\n .then((response) => {\r\n // console.log('call succes data:', response)\r\n this.props.onSubmit(response.data.Body ? response.data.Body : !searchBy ? {} : null, searchBy)\r\n this.setState({ dataLoading: false })\r\n }, (error) => {\r\n // console.log(error);\r\n this.setState({ dataLoading: false })\r\n })\r\n }\r\n else {\r\n this.addNotification('Please select the country')\r\n }\r\n }\r\n\r\n componentWillReceiveProps(nextProps) {\r\n // console.log(\"getitem\", getStoredCart())\r\n // component\r\n // console.log('update')\r\n // const prevText = getQueryParam(this.props, SEARCH_TEXT);\r\n // const text = getQueryParam(nextProps, SEARCH_TEXT)\r\n const prevMode = this.state.searchBy;\r\n const nextMode = getQueryParam(nextProps, SEARCH_BY)\r\n const prevText = this.state.FieldName;\r\n //Modified by Shreyas - Keep the text value even after changing Search Type Dropdown - Start\r\n //const text = getQueryParam(nextProps, SEARCH_TEXT)\r\n const text = this.state.FieldName;\r\n //Modified by Shreyas - Keep the text value even after changing Search Type Dropdown - End.\r\n // console.log('prevtext', prevText, 'text=', text, 'prevMode=', prevMode, 'nextMode=', nextMode)\r\n if ((prevText !== text) || prevMode !== nextMode) {\r\n this.setState({ searchBy: nextMode, FieldName: text }, () => {\r\n this.props.onSubmit(null)\r\n });\r\n }\r\n }\r\n\r\n componentDidUpdate(){\r\n const withclasses=Array.from(\r\n document.getElementsByClassName(\"dropdown-item\")\r\n );\r\n withclasses.forEach(element=>{\r\n if(element.innerText==this.state.topmenuValue){\r\n element.classList.add(\"active\");\r\n }\r\n else{\r\n element.classList.remove(\"active\");\r\n }\r\n });\r\n }\r\n\r\n handleSubmit = async (event) => {\r\n const { searchBy } = this.state;\r\n event.preventDefault();\r\n this.loadData()\r\n this.props.history.push({\r\n pathname: `${process.env.REACT_APP_HOME_DIRECTORY}`,\r\n search: `?${SEARCH_TEXT}=${this.state.FieldName}${searchBy ? `&${SEARCH_BY}=${searchBy}` : ''}`\r\n\r\n })\r\n };\r\n\r\n getSearchMode = () => {\r\n const { searchBy } = this.state;\r\n switch (searchBy) {\r\n case SEARCH_MODES.PART: return 'Enter Part Number';\r\n case SEARCH_MODES.PRODUCT: return 'Enter Product Number';\r\n case SEARCH_MODES.SERIAL_WP: return 'Enter Serial Number';\r\n case SEARCH_MODES.FUNCTIONAL_EQUIVALENT: return 'Enter Part Number';\r\n case SEARCH_MODES.WILD_CHAR: return 'Wild Character Search';\r\n default: return 'Enter Part/Product/Serial Number';\r\n }\r\n }\r\n\r\n setSearchModeLink = () => {\r\n localStorage.setItem(\"set_flag\",\"1\");\r\n\r\n const { searchBy, arraySearchBy, topmenuValue } = this.state;\r\n if(searchBy != arraySearchBy)\r\n {\r\n this.setState({ searchyByText: this.getSearchResult(searchBy), arraySearchBy: searchBy });\r\n this.setState({topmenuValue : this.getSearchResultText(searchBy)});\r\n }\r\n // var list=document.getElementsByClassName(\"dropdown-item\");\r\n // for (var i = 0; i < list.length; ++i) {\r\n // if(topmenuValue==list[i].innerText){\r\n // list[i].classList.add('active');\r\n // }\r\n // else{\r\n // list[i].classList.remove('active');\r\n // }\r\n // }\r\n //Added by Shreyas to highlight the selected text--End\r\n\r\n\r\n }\r\n\r\n getSearchResult = (searchBy) => {\r\n switch (searchBy) {\r\n case SEARCH_MODES.PART: return 'Search By - Part Number';\r\n case SEARCH_MODES.PRODUCT: return 'Search By - Product Number';\r\n case SEARCH_MODES.SERIAL_WP: return 'Search By - Serial Number';\r\n case SEARCH_MODES.FUNCTIONAL_EQUIVALENT: return 'Search By - Part Number';\r\n case SEARCH_MODES.WILD_CHAR: return 'Search By - Wild Char';\r\n default: return 'Search By - Part/Product/Serial Number';\r\n }\r\n }\r\n\r\n getSearchResultText = (searchBy) => {\r\n switch (searchBy) {\r\n case SEARCH_MODES.PART: return 'Part';\r\n case SEARCH_MODES.PRODUCT: return 'Product';\r\n case SEARCH_MODES.SERIAL_WP: return 'Serial Number';\r\n case SEARCH_MODES.FUNCTIONAL_EQUIVALENT: return 'Functional Equivalent';\r\n case SEARCH_MODES.WILD_CHAR: return 'Wild Character';\r\n default: return 'Generic Search';\r\n }\r\n }\r\n\r\n render() {\r\n\r\n const { countryLoading, dataLoading, country, data, topmenuValue, User } = this.state;\r\n\r\n return (\r\n\r\n \r\n
\r\n
\r\n \r\n
\r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n {/* {\r\n this.setState({ country: a })\r\n setCookie('HP_Country', a)\r\n }}>\r\n \r\n \r\n {((data || []).find(c => c.key === country) || {}).value || 'Please select your country'}\r\n \r\n\r\n {\r\n // console.log(\"dropdownselect\", a, b.currentTarget)\r\n }}>\r\n {\r\n (data || []).map((country, index) =>\r\n {country.value} \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 HP PartSurfer\r\n
\r\n\r\n
\r\n
\r\n\r\n \r\n \r\n HP PartSurfer provides fast, easy access to service parts information for a wide range of HP Products.\r\n
\r\n \r\n
*/}\r\n {\r\n (data || []).map(prod =>
\r\n {/* Keyword : {prod.Keyword}\r\n
*/}\r\n Part Description : \r\n {/* {prod.EnhancedDescription} */}\r\n \r\n
\r\n CSR : {prod.CsrFlag?prod.CsrFlag:\"-N/A-\"}\r\n
\r\n Tech Courier : {prod.TechCourier?prod.TechCourier:\"-N/A-\"}\r\n
\r\n ROHS : {prod.RohsCompliant?prod.RohsCompliant:\"-N/A-\"}\r\n
\r\n {/*
*/}\r\n {/*
*/}\r\n
\r\n //
)\r\n case 'SERIAL':\r\n return ( Product Number : {payload[0].ProductNumber === '-N/A-' ? 'Not Found' : payload[0].ProductNumber}
\r\n // Product Name : {payload[0].ProductNumber === '-N/A-' ? 'Not Found' : payload[0].ProductName}
\r\n // \r\n {payload &&\r\n
)\r\n case 'PRODUCT':\r\n return ( \r\n
\r\n }\r\n Serial Number : {payload.wwsnrsinput.serial_no === '-N/A-' ? 'Not Found' : payload.wwsnrsinput.serial_no}
\r\n Product Number : {payload.wwsnrsinput.product_no === '-N/A-' ? 'Not Found' : payload.wwsnrsinput.product_no}
\r\n Description : {payload.wwsnrsinput.user_name === '-N/A-' ? 'Not Found' : payload.wwsnrsinput.user_name}
\r\n ROHS Status : {payload.roHS_unit_status.rohs_status_code === '-N/A-' ? 'Not Found' : payload.roHS_unit_status.rohs_status_code}
\r\n \r\n {(payload || []).length > 0 && (\r\n
)\r\n default:\r\n }\r\n}\r\n\r\nexport default function Details({ mode, payload, expandIconRequired, triggered, triggerAll }) {\r\n return (\r\n \r\n
\r\n )} \r\n \r\n Product Number : {payload[0].ProductNumber? payload[0].ProductNumber: \"Not Found\"}
\r\n Description : {payload[0].ProductName? payload[0].ProductName: \"Not Found\"}
\r\n \r\n {expandIconRequired && triggerAll ?\r\n \r\n
: getDesc(mode, payload)}\r\n
\r\n )\r\n}\r\n","import React from \"react\";\r\nimport BootstrapTable from \"react-bootstrap-table-next\";\r\nimport paginationFactory from \"react-bootstrap-table2-paginator\";\r\nimport { ViewHOC } from \"./ViewHOC\";\r\nimport Details from \"./Details\";\r\nimport { getURLQueryString, getURLQueryStringBySearch } from \"./Util\";\r\nimport { SEARCH_MODES } from \"./constants/constants\";\r\n\r\nclass ProductList extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n list: [],\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n this.filterData();\r\n }\r\n\r\n filterData = (text) => {\r\n this.setState({\r\n list: this.props.data.filter((part) =>\r\n text\r\n ? part.ProductNumber.indexOf(text) > -1 ||\r\n part.ProductName.indexOf(text) > -1\r\n : true\r\n ),\r\n });\r\n };\r\n\r\n render() {\r\n const { data, mobileView, isDescDisabled } = this.props;\r\n\r\n const columns = mobileView\r\n ? [\r\n {\r\n text: \"#\",\r\n dataField:'',\r\n headerAttrs: {\r\n hidden: true,\r\n },\r\n formatter: (col, prod, index) => {\r\n return (\r\n { triggerAll(!triggered) }}>\r\n {triggered ?
\r\n \r\n \r\n Description : \r\n {prod.ProductName}\r\n
\r\n
\r\n
}\r\n
*/}\r\n {this.state.list.length > 0 ? \r\n
\r\n
\r\n
\r\n
\r\n : \"There is no Where Used Products!\" } \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n this.setState({ searchText: event.target.value })\r\n }\r\n required\r\n />\r\n
\r\n \r\n {\r\n this.filterData(this.state.searchText);\r\n }}\r\n >\r\n Apply\r\n \r\n \r\n {\r\n this.filterData();\r\n this.setState({ searchText: \"\" });\r\n }}\r\n >\r\n Reset\r\n \r\n
\r\n \r\n
\r\n
\r\n 10 ? paginationFactory() : undefined}\r\n />\r\n
\r\n \r\n Part Number : \r\n {prod.PartNumber}\r\n
\r\n Description : \r\n {/* {prod.EnhancedDescription} */}\r\n \r\n
\r\n CSR : \r\n {prod.CSR?prod.CSR:\"-N/A-\"}\r\n
\r\n ROHS : \r\n {prod.ROHS}\r\n
\r\n FE : \r\n {prod.FE_MATERIAL?(\r\n
\r\n {Cookies.get(\"HP_Country\") === \"US\" ? (\r\n
\r\n {prod.BuyLink != null ? (\r\n this.buylink(prod.BuyLink, prod.PartNumber)}\r\n >\r\n 
\r\n \r\n ) : \"\"}\r\n
\r\n ) : null}\r\n {prod.OrderFlag === \"1\" ? (\r\n \r\n this.handleCartChange(!presentInCart, prod)\r\n }\r\n >\r\n \r\n \r\n ) : null} \r\n \r\n {\r\n this.setState({ collapsed: !collapsed }, \r\n ()=>{\r\n if (this.state.collapsed && !this.state.data){\r\n this.setState({loading:true})\r\n }\r\n }\r\n // new change\r\n // () => {\r\n // if (this.state.collapsed && !this.state.data) {\r\n // this.loadWhereUsed(this.props.data[0].PartNumber);\r\n // }\r\n // }\r\n );\r\n }}\r\n >\r\n \r\n \r\n ) : null}\r\n
\r\n \r\n {this.state.collapsed ? (\r\n
\r\n \r\n {this.state.data ? (\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n Part Number : \r\n {prod.PartNumber}\r\n
\r\n Part Description : \r\n \r\n {/* {prod.EnhancedDescription} */}\r\n {/*
*/}\r\n CSR : \r\n {prod.CsrFlag?prod.CsrFlag:\"-N/A-\"}\r\n
\r\n {localStorage.getItem(\"loggeduser\") == null ? \"\": Tech Courier : }\r\n {localStorage.getItem(\"loggeduser\") == null ? \"\" : prod.TechCourier?prod.TechCourier:\"-N/A-\"}\r\n {localStorage.getItem(\"loggeduser\") == null ? \"\":
} \r\n ROHS : \r\n {prod.RohsCompliant?prod.RohsCompliant:\"-N/A-\"}\r\n
\r\n FE : \r\n {prod.FE_MATERIAL?(\r\n
\r\n {Cookies.get(\"HP_Country\") === \"US\" ? (\r\n
\r\n {/* Click to Buy : */}\r\n {/* \r\n // href={`${prod.BuyLink}`}\r\n // target=\"_blank\"\r\n // rel=\"noopener noreferrer\"*/}\r\n {prod.BuyLink != null ? (\r\n this.buylink(prod.BuyLink, prod.PartNumber)}> \r\n \r\n \r\n ) : \"\"}\r\n
\r\n ) : null}\r\n {prod.OrderFlag === \"1\" ? (\r\n \r\n this.handleCartChange(!presentInCart, prod)\r\n }\r\n >\r\n \r\n \r\n ) : null} \r\n \r\n \r\n \r\n {/* 10 ? paginationFactory() : undefined}\r\n //pagination={modifiedData.length > 10 ? paginationFactory() : undefined}\r\n /> \r\n \r\n \r\n \r\n \r\n Photo \r\n \r\n \r\n {/* 
*/}\r\n {isLoad && (\r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n Functional Equivalent \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\nconst mapStateToProps = (state) => {\r\n let cartQty = {};\r\n state.cart.cartItems.forEach((item) => (cartQty[item.PartNumber] = item.qty));\r\n return {\r\n ...state,\r\n cart: state.cart.cartItems,\r\n cartQty,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n setCarItems: (newCart) => {\r\n dispatch(setCarItems(newCart));\r\n },\r\n };\r\n};\r\nexport default connect(\r\n mapStateToProps,\r\n mapDispatchToProps\r\n)(ViewHOC(DescProductList));\r\n","import React from 'react';\r\nimport axios from 'axios';\r\nimport { Button,Tooltip, OverlayTrigger} from 'react-bootstrap';\r\nimport BootstrapTable from \"react-bootstrap-table-next\";\r\n// import {FaArrowCircleUp} from 'react-icons/fa';\r\nimport \"./design.css\";\r\nimport { getAuthHeader } from './Util';\r\nimport { PRODUCTLIST } from './constants/APIConstants';\r\nimport ProductResults from \"./ProductResults\";\r\nimport { ViewHOC } from './ViewHOC';\r\nimport Loading from \"./Loading\";\r\n\r\n\r\nclass DescProductListPrint extends React.Component {\r\n constructor() {\r\n super()\r\n this.state = {\r\n isBack: false,\r\n parts: [],\r\n loading: false,\r\n visible:false, \r\n }\r\n this.myRef=React.createRef();\r\n }\r\n // componentWillUnmount()\r\n // {\r\n // window.addEventListener('scroll', this.toggleVisible.bind(this),true);\r\n // }\r\n // componentDidMount()\r\n // {\r\n // window.addEventListener('scroll', this.toggleVisible.bind(this),true);\r\n // }\r\n // toggleVisible() {\r\n // // console.log(\"inside toggle\");\r\n // const scrolled = document.documentElement.scrollTop;\r\n // if (scrolled > 300){\r\n // // console.log(\"page scrolled\");\r\n // this.setState({visible:true}) \r\n // } \r\n // else if (scrolled <= 300){\r\n // this.setState({visible:false}) \r\n // }\r\n // };\r\n // scrollToTop = () =>{\r\n // // console.log(\"inside scrollToTop\");\r\n // window.scrollTo({\r\n // top: 0, \r\n // behavior: 'smooth'\r\n // });\r\n // // this.myRef.current.scrollIntoView({\r\n // // behavior:\"smooth\"\r\n // // })\r\n // }; \r\n BackToPreviousPage = ()=>{ \r\n this.setState({loading:true}) \r\n let prodNumber = this.props.data[0].ProductNumber \r\n const url = PRODUCTLIST(prodNumber,localStorage.getItem(\"usertype\"))\r\n axios.get(url, {\r\n headers: {\r\n ...getAuthHeader()\r\n }\r\n })\r\n .then((response) => {\r\n //console.log('call success data:', response.data.Body ); \r\n this.setState({parts: response.data.Body }) \r\n this.setState({isBack:true,\r\n loading:false,\r\n }); \r\n }, (error) => {\r\n })\r\n }\r\n\r\n render()\r\n {\r\n const { data,mobileView } = this.props; \r\n const { isBack,loading,visible } = this.state; \r\n // console.log(\"state value\", data) \r\n // console.log(\"state value\", this.state.parts) \r\n const columns = mobileView \r\n ? [\r\n {\r\n text: \"#\",\r\n dataField: '',\r\n headerAttrs: {\r\n hidden: true,\r\n },\r\n formatter: (col, prod, index) => {\r\n return (\r\n \r\n Go To Top}> \r\n
*/}\r\n {/* Loading......
\r\n )} \r\n \r\n Description : \r\n \r\n CSR : \r\n {prod.CsrFlag}\r\n
\r\n ROHS : \r\n {prod.RohsCompliant}\r\n
\r\n
\r\n {/* ref={this.myRef} */}\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n ) \r\n }\r\n}\r\nexport default (ViewHOC(DescProductListPrint));","import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport { Button} from 'react-bootstrap';\r\n//import Button from '@mui/material/Button';\r\nimport { isObject } from 'lodash';\r\nimport React from 'react';\r\nimport { Accordion, Alert, Card, Col, Collapse, Form, Row } from 'react-bootstrap';\r\nimport Select from 'react-select';\r\nimport { PART_PHOTO } from './constants/constants';\r\nimport {PART_FE} from './constants/constants';\r\nimport DescProductList from './DescProductList';\r\nimport DescProductListPrint from './DescProductListPrint';\r\nimport \"./design.css\";\r\nimport { ViewHOC } from './ViewHOC';\r\nimport { Link } from \"react-router-dom\";\r\nimport { SEARCH_MODES, SEARCH_TEXT } from \"./constants/constants\";\r\nimport { getQueryParam } from \"./Util\";\r\n\r\nconst initialFilters = () => ({\r\n category: [],\r\n keyword: [],\r\n techCourier: [],\r\n rohs: [],\r\n CSR: [],\r\n photoFlag:'',\r\n FE:''\r\n})\r\n\r\nclass ProductResults extends React.Component {\r\n constructor() {\r\n super()\r\n this.state = {\r\n isPrint: false,\r\n isSbom:false,\r\n SbomText:null,\r\n products: null,\r\n filters: initialFilters(),\r\n metadata: {\r\n category: [],\r\n keyword: [],\r\n techCourier: [],\r\n rohs: [],\r\n CSR: [],\r\n photoFlag: [],\r\n FE:[]\r\n },\r\n Ishide: false,\r\n }\r\n }\r\n\r\n componentDidMount() {\r\n // this.props.data[0].ProductNumber \r\n console.log(\"pipebom\", this.props.data[0].PipeBomFlag);\r\n if(this.props.data[0].PipeBomFlag==1)\r\n {\r\n this.setState({isSbom:true}); \r\n this.setState({SbomText:\"Updated SBOM available\"});\r\n }\r\n else if(this.props.data[0].PipeBomFlag==0)\r\n {\r\n this.setState({isSbom:true}); \r\n this.setState({SbomText:\"SBOM\"});\r\n }\r\n if (this.props.data && !this.state.products) {\r\n this.getCategoryProducts(() => {\r\n this.triggerAll(true)\r\n this.generateMetdata()\r\n });\r\n }\r\n \r\n }\r\n \r\n componentWillUnmount() {\r\n // fix Warning: Can't perform a React state update on an unmounted component\r\n this.setState = (state, callback) => {\r\n return;\r\n };\r\n }\r\n PrintFriendlyView = ()=>{\r\n this.setState({isPrint:true, mobileView: false});\r\n // console.log(\"inside printfriendly\")\r\n }\r\n\r\n\r\n generateMetdata = () => {\r\n const { filters, products } = this.state\r\n const { category, keyword, techCourier, rohs: rohsFilter, CSR, photoFlag:photoFilters,FE:feFilters } = filters;\r\n // console.log('check', category, metadata,filters, products)\r\n\r\n let temp = {}\r\n let count = 0\r\n\r\n let categoryFilters = category || [];\r\n Object.entries(products || {}).filter(([key, value]) => categoryFilters.length === 0 || (categoryFilters.indexOf(key) !== -1)).forEach(([key, value], index) => {\r\n let categories = temp.category || []\r\n let keywordFilters = keyword || [];\r\n\r\n Object.entries(value).filter(([catKey, catValue]) => keywordFilters.length === 0 || (keywordFilters.indexOf(catKey) !== -1)).forEach(([catKey, catValue], index) => {\r\n let keyWords = temp.keyword || [];\r\n // console.log('aa')\r\n let rohs = temp.rohs || [];\r\n let techCouriers = temp.techCourier || [];\r\n let CSRFlag = temp.CSR || [];\r\n let photoFlag = temp.photoFlag || [];\r\n let FE=temp.FE || [];\r\n catValue.filter(product => {\r\n // console.log('check check',product.PartPhotoFlag, product.PartPhotoFlag ? 'ON' : 'OFF', photoFilters,photoFilters === '-1' || photoFilters === (product.PartPhotoFlag ? 'ON' : 'OFF'))\r\n return (techCourier.length === 0 || (techCourier.indexOf(product.TechCourier) !== -1))\r\n && (rohsFilter.length === 0 || (rohsFilter.indexOf(product.RohsCompliant) !== -1))\r\n && (CSR.length === 0 || (CSR.indexOf(product.CsrFlag) !== -1))\r\n //&& (photoFlag === undefined || (product.PartPhotoFlag ? true : false) === photoFlag)\r\n && (!feFilters || feFilters === PART_FE.NOT_APPLICABLE \r\n || feFilters === (product.FE_MATERIAL ? PART_FE.PRESENT : PART_FE.NOT_PRESENT)) && (!photoFilters || photoFilters === PART_PHOTO.NOT_APPLICABLE \r\n || photoFilters === (product.PartPhotoFlag ? PART_PHOTO.PRESENT : PART_PHOTO.NOT_PRESENT))\r\n }).forEach(product => {\r\n count++;\r\n categories = categories.indexOf(key) !== -1 ? categories : [...categories, key]\r\n keyWords = keyWords.indexOf(catKey) !== -1 ? keyWords : [...keyWords, catKey]\r\n if (product.RohsCompliant) {\r\n rohs = rohs.indexOf(product.RohsCompliant) !== -1 ? rohs : [...rohs, product.RohsCompliant]\r\n }\r\n if (product.TechCourier) {\r\n techCouriers = techCouriers.indexOf(product.TechCourier) !== -1 ? techCouriers : [...techCouriers, product.TechCourier]\r\n }\r\n if (product.CsrFlag) {\r\n CSRFlag = CSRFlag.indexOf(product.CsrFlag) !== -1 ? CSRFlag : [...CSRFlag, product.CsrFlag]\r\n }\r\nif(product.FE_MATERIAL || product.FE_MATERIAL === false){\r\n const fePresent = product.FE_MATERIAL ? PART_FE.PRESENT : PART_FE.NOT_PRESENT;\r\n FE = FE.indexOf(fePresent) !== -1 ? FE : [...FE,fePresent]\r\n } if(product.PartPhotoFlag || product.PartPhotoFlag === 0){\r\n const photoPresent = product.PartPhotoFlag ? PART_PHOTO.PRESENT : PART_PHOTO.NOT_PRESENT;\r\n photoFlag = photoFlag.indexOf(photoPresent) !== -1 ? photoFlag : [...photoFlag,photoPresent]\r\n }\r\n // console.log('here', product.PartPhotoFlag, photoFlag)\r\n })\r\n temp.keyword = keyWords\r\n temp.rohs = rohs;\r\n temp.techCourier = techCouriers\r\n temp.CSR = CSRFlag\r\n // console.log('cons', photoFlag)\r\n temp.photoFlag = photoFlag\r\ntemp.FE=FE\r\n })\r\n temp.category = categories\r\n // console.log('here',temp)\r\n })\r\n this.setState({ metadata: temp, itemsCount: count })\r\n }\r\n\r\n filterData = () => {\r\n const { filters, products } = this.state\r\n const { category, keyword, techCourier, rohs: rohsFilter, photoFlag, CSR ,FE} = filters;\r\n // console.log('check', category, filters, metadata, products)\r\n let temp = {}\r\n let categoryFilters = category || [];\r\n Object.entries(products || {}).filter(([key, value]) => categoryFilters.length === 0 || (categoryFilters.indexOf(key) !== -1)).forEach(([key, value], index) => {\r\n let keywordFilters = keyword || [];\r\n Object.entries(value).filter(([catKey, catValue]) => keywordFilters.length === 0 || (keywordFilters.indexOf(catKey) !== -1)).forEach(([catKey, catValue], index) => {\r\n catValue.filter(product => {\r\n // console.log('check beck',product.PartPhotoFlag, product.PartPhotoFlag ? 'ON' : 'OFF', photoFlag)\r\n return (techCourier.length === 0 || (techCourier.indexOf(product.TechCourier) !== -1))\r\n && (rohsFilter.length === 0 || (rohsFilter.indexOf(product.RohsCompliant) !== -1))\r\n && (CSR.length === 0 || (CSR.indexOf(product.CsrFlag) !== -1))\r\n// && (FE.length === 0 || (FE.indexOf(product.FE_MATERIAL) !== -1))\r\n && (!FE || FE === PART_FE.NOT_APPLICABLE \r\n || FE === (product.FE_MATERIAL ? PART_FE.PRESENT : PART_FE.NOT_PRESENT)) && (!photoFlag || photoFlag === PART_PHOTO.NOT_APPLICABLE \r\n || photoFlag === (product.PartPhotoFlag ? PART_PHOTO.PRESENT : PART_PHOTO.NOT_PRESENT))\r\n ///&& (CSR === undefined || (product.CsrFlag ? true : false) === photoFlag)\r\n }).forEach(element => {\r\n const category = element.CategoryName\r\n const keyword = element.KeywordName\r\n\r\n let cat = temp[category] || {}\r\n let keyw = cat[keyword] || []\r\n keyw.push(element)\r\n\r\n temp[category] = temp[category] || {}\r\n temp[category][keyword] = keyw\r\n })\r\n })\r\n console.log('here filter',temp)\r\n })\r\n // if(applyField)\r\n // {\r\n // temp = {...temp, [applyField]: metadata[applyField]}\r\n // }\r\n this.setState({ filteredData: temp })\r\n\r\n }\r\n\r\n getPhotoFrame = (partNumber) => ``;\r\n\r\n\r\n getCategoryProducts = (callback) => {\r\n let temp = {}\r\n const { data } = this.props;\r\n data.forEach(element => {\r\n const category = element.CategoryName\r\n const keyword = element.KeywordName\r\n\r\n let cat = temp[category] || {}\r\n let keyw = cat[keyword] || []\r\n keyw.push(element)\r\n\r\n temp[category] = temp[category] || {}\r\n temp[category][keyword] = keyw\r\n\r\n })\r\n\r\n this.setState({ products: temp }, () => {\r\n this.generateMetdata()\r\n this.filterData()\r\n callback && callback()\r\n })\r\n }\r\n\r\n triggerAll = (shouldExpand, key) => {\r\n const { products } = this.state;\r\n // console.log('key', key, shouldExpand)\r\n let status = {};\r\n if (key) {\r\n const main = products[key] || {}\r\n Object.keys(main).forEach(catKey => {\r\n status[`${key}-${catKey}-collapsed`] = shouldExpand\r\n })\r\n shouldExpand && !this.state[`${key}-collapsed`]\r\n ? this.setState({ ...this.state, ...status, [`${key}-triggered`]: shouldExpand, [`${key}-collapsed`]: shouldExpand })\r\n : this.setState({ ...this.state, ...status, [`${key}-triggered`]: shouldExpand })\r\n }\r\n else {\r\n Object.keys(products).forEach(key => {\r\n status[`${key}-collapsed`] = shouldExpand\r\n })\r\n this.setState({ ...this.state, ...status, triggered: shouldExpand })\r\n }\r\n }\r\n\r\n changeFilters = (key, value, isMulti = false, isFlag = false) => {\r\n // console.log('changefilter', key, value, isMulti)\r\n const { filters } = this.state;\r\n if (isFlag) {\r\n this.setState({ filters: { ...filters, [key]: value } }, () => this.generateMetdata())\r\n }\r\n else if (isMulti) {\r\n this.setState({ filters: { ...filters, [key]: (value || []).map(selection => selection.value) } })//, () => this.generateMetdata())\r\n }\r\n else {\r\n this.setState({ filters: { ...filters, [key]: value ? isObject(value) ? value.value : value : '' } }, () => this.generateMetdata())\r\n }\r\n }\r\n\r\n handleModalShowHide = () => {\r\n this.setState({ showHide: !this.state.showHide });\r\n };\r\n\r\n\r\n GoToLast=()=>{\r\n //alert(posToScroll);\r\n var scrollHeight=document.body.scrollHeight;\r\n alert(scrollHeight);\r\n var posToScroll=scrollHeight-(scrollHeight*13)/100;\r\n // alert(posToScroll)\r\n //alert(scrollHeight);\r\n window.scroll({top:posToScroll,behavior:\"smooth\"})\r\n };\r\n\r\n render() {\r\n const { data, mobileView } = this.props;\r\n const { filters, itemsCount,isPrint, Ishide,isSbom,SbomText } = this.state;\r\n const searchText = getQueryParam(this.props, SEARCH_TEXT);\r\n console.log(\"inside prodresult\",data)\r\n // console.log('filters',filters);\r\n/* if(isPrint){\r\n return \r\n \r\n
\r\n \r\n
\r\n Go To Top}> \r\n
*/}\r\n */}\r\n { isPrint ?(\r\n
\r\n {localStorage.getItem(\"loggeduser\") != null ? \r\n \r\n {SbomText}\r\n \r\n : ''} \r\n \r\n \r\n
\r\n \r\n
\r\n {itemsCount ?
\r\n\r\n \r\n {itemsCount} Records found
: 'no'}\r\n \r\n {\r\n Object.entries(this.state.filteredData || {}).map(([key, value], index) => (\r\n
\r\n \r\n \r\n \r\n {\r\n this.setState({ [`${key}-collapsed`]: !this.state[`${key}-collapsed`] });\r\n }}>\r\n {!this.state[`${key}-collapsed`] ?\r\n
\r\n\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n\r\n
))\r\n }\r\n this.triggerAll(this.state[`${key}-triggered`] ? false : true, key)}>\r\n {!this.state[`${key}-triggered`] ?
\r\n\r\n \r\n \r\n {Object.entries(value || {}).map(([catKey, catValue], index) => (\r\n \r\n {\r\n this.setState({ [`${key}-${catKey}-collapsed`]: !this.state[`${key}-${catKey}-collapsed`] });\r\n }}\r\n >\r\n {!this.state[`${key}-${catKey}-collapsed`] ? \r\n \r\n \r\n ))}\r\n
\r\n \r\n
\r\n \r\n {localStorage.getItem(\"loggeduser\") != null ? \r\n \r\n {SbomText}\r\n \r\n : ''} \r\n \r\n \r\n
\r\n \r\n
\r\n {itemsCount ?
\r\n {itemsCount} Records found
: 'no'}\r\n \r\n \r\n {\r\n Object.entries(this.state.filteredData || {}).map(([key, value]) => {\r\n // console.log('aaa', `${key}-collapsed`, this.state[`${key}-collapsed`],value)\r\n return (\r\n
\r\n \r\n {/* /this.state[`${key}-collapsed`] ? index : undefined}> */}\r\n \r\n \r\n {\r\n this.setState({ [`${key}-collapsed`]: !this.state[`${key}-collapsed`] });\r\n }}>\r\n {!this.state[`${key}-collapsed`] ?\r\n
\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n
\r\n )\r\n })\r\n }\r\n \r\n this.triggerAll(this.state[`${key}-triggered`] ? false : true, key)}>\r\n {!this.state[`${key}-triggered`] ?
\r\n\r\n \r\n \r\n {Object.entries(value || {}).map(([catKey, catValue], index) => (\r\n \r\n {\r\n this.setState({ [`${key}-${catKey}-collapsed`]: !this.state[`${key}-${catKey}-collapsed`] });\r\n }}\r\n >\r\n {!this.state[`${key}-${catKey}-collapsed`] ? \r\n \r\n \r\n ))}\r\n
\r\n \r\n
\r\n \r\n Part Number : \r\n {prod.spare_part_no}\r\n
\r\n Spare Part Description : \r\n \r\n {/* {prod.spare_part_description} */}\r\n
\r\n Enhanced Part Description : \r\n {prod.spare_enhance_desc}\r\n
\r\n Category : \r\n {prod.sp_category}\r\n
\r\n {localStorage.getItem(\"loggeduser\") == null ? \"\": Tech Courier : }\r\n {localStorage.getItem(\"loggeduser\") == null ? \"\": prod.sp_techcourier}\r\n {localStorage.getItem(\"loggeduser\") == null ? \"\":
}\r\n CSR : \r\n {prod.sp_csrflag}\r\n
\r\n ROHS : \r\n {prod.sp_rohs_status_code}\r\n
\r\n
No additional information found in PartSurfer.
\r\n )}\r\n No additional information found in PartSurfer.
\r\n )}\r\n {/* pagination={data.length > 10 ? paginationFactory() : undefined} */}\r\n \r\n Assembly Part Number : \r\n {prod.part_number}\r\n
\r\n Part Description : \r\n {prod.part_description}\r\n
\r\n {localStorage.getItem(\"loggeduser\") == null ? \"\": Part Serial Number : }\r\n {localStorage.getItem(\"loggeduser\") == null ? \"\": prod.part_serialno}\r\n {localStorage.getItem(\"loggeduser\") == null ? \"\":
}\r\n QTY : \r\n {prod.part_quantity}\r\n
\r\n
No additional information found in PartSurfer.
\r\n )}\r\n No additional information found in PartSurfer.
\r\n )}\r\n {/* pagination={data.length > 10 ? paginationFactory() : undefined} */}\r\n \r\n {/*
\r\n\r\n {unit_configuration && (\r\n\r\n \r\n {\r\n this.setState({ COMPONENT_collapsed: !COMPONENT_collapsed });\r\n }}\r\n >\r\n \r\n {COMPONENT_collapsed ? (\r\n \r\n \r\n \r\n \r\n \r\n \r\n )}\r\n
\r\n
\r\n {spare_part && (\r\n\r\n \r\n {\r\n this.setState({ SPARE_collapsed: !SPARE_collapsed });\r\n }}\r\n >\r\n \r\n {SPARE_collapsed ? (\r\n \r\n \r\n { mobileView ? (\r\n \r\n \r\n {this.enableSearchResult()? (\r\n null\r\n ) : (\r\n \r\n \r\n Click here to customize your search 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 {unit_configuration && (\r\n
\r\n
\r\n {spare_part && (\r\n
\r\n {itemsCount ? (\r\n
\r\n {itemsCount} Records found
\r\n ) : (\r\n \"no\"\r\n )}\r\n \r\n {itemsCount ? (\r\n
\r\n {itemsCount} Records found
\r\n ) : (\r\n \"no\"\r\n )}\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n \r\n
\r\n {!searchText && (\r\n\r\n \r\n
\r\n 1. Product name: This is the product name affixed to\r\n the front of the device.\r\n
\r\n 2. Serial number (s/n): This is an alphanumeric\r\n identifier that is unique to each product.\r\n
\r\n 3. Part number/Product number (p/n): This number\r\n provides specific information about the product’s hardware\r\n components. The part number helps a service technician to\r\n determine what components and parts are needed.\r\n
\r\n 4. Warranty period: The number describes the duration\r\n of warranty period for the device.\r\n
\r\n 5. Model description (selected models only): This\r\n Alphanumeric identifier used to locate documents, drivers\r\n and support for the device.\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 {!searchText && (\r\n
\r\n Do not know your part number? You can find it by entering one\r\n of the following values from your product's service tag.\r\n
\r\n\r\n 1. Product name: This is the product name affixed to\r\n the front of the device.\r\n
\r\n 2. Serial number (s/n): This is an alphanumeric\r\n identifier that is unique to each product.\r\n
\r\n 3. Part number/Product number (p/n): This number\r\n provides specific information about the product’s hardware\r\n components. The part number helps a service technician to\r\n determine what components and parts are needed.\r\n
\r\n 4. Warranty period: The number describes the duration\r\n of warranty period for the device.\r\n
\r\n 5. Model description (selected models only): This\r\n Alphanumeric identifier used to locate documents, drivers\r\n and support for the device.\r\n
\r\n \r\n
\r\n
\r\n
\r\n More information on how to find your HP Part / Product /\r\n Serial Number{\" \"}\r\n \r\n click here\r\n \r\n
\r\n \r\n \r\n {(SNRProductListsResults || []).length > 0 && (\r\n
\r\n \r\n
\r\n
\r\n {this.state.ProdListError &&
\r\n )}\r\n \r\n
\r\n \r\n \r\n Serial Number : {searchText} \r\n
\r\n
\r\n \r\n
\r\n Multiple Products associated for above Serial Number.\r\n
\r\n
\r\n
\r\n \r\n
\r\n
\r\n
\r\n \r\n
\r\n \r\n {this.state.ProdListError &&
{this.state.ProdListError}
\r\n }\r\n \r\n {(wildCharResults || []).length > 0 && (\r\n
\r\n {!SNResults && dataLoaded && !noData && !SNRProductListsResults && !wildCharResults &&\r\n \r\n {(productResults || []).length > 0 && (\r\n
\r\n )} \r\n {/* \r\n \r\n {partResults && \r\n */}\r\n \r\n \r\n {tabgen1} \r\n {/* Advanced(Unique Product S/N) */}\r\n \r\n \r\n {partResults && \r\n {/* \r\n */}\r\n \r\n
\r\n } \r\n {SNResults &&\r\n Any content 2
\r\n\r\n
\r\nthis.handleSelect(index)}>\r\n \r\n {(productResults || []).length > 0 && (\r\n {tabgen1} \r\n )} \r\n {tabadv1} \r\n \r\n {(productResults || []).length > 0 && (\r\n \r\n \r\n )} \r\n \r\n \r\n \r\n
\r\n } \r\n \r\n {noData && (\r\n \r\n
\r\n
\r\n
\r\n )}\r\n \r\n No additional information found in PartSurfer. Please read\r\n the hints below, and try again.{\" \"}\r\n
\r\n \r\n
\r\n
\r\n \r\n Hints For Using PartSurfer:-\r\n
\r\n\r\n The most reliable and fastest way to identify your\r\n product is to enter the serial number or product number\r\n from the service tag (such as CNU123456789 or RU477EA )\r\n in the search box above, but a more general description\r\n of the product (such as LaserJet 8100 or Pavilion 6532)\r\n is also acceptable. Also, if you know the HP part number\r\n you are looking for (such as 8120-6260 or CB394-40014M),\r\n you may enter that directly.\r\n
\r\n\r\n
\r\n Searching for an HP part by entering a general\r\n description (such as Power Cord, Fusing Assembly,\r\n Motherboard, or Cartridge) will not be successful. After\r\n first identifying your HP product (as described above),\r\n you will be given several options for finding the part\r\n that you need.\r\n
\r\n\r\n You may also{\" \"}\r\n
\r\n
\r\n
\r\n
\r\n \r\n Feedback to HP PartSurfer\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 Before you continue reading this document, we hope that you\r\n will try using HP PartSurfer first. PartSurfer is designed to be\r\n very user friendly, and most users find it easy to locate the parts\r\n information they need without detailed instructions. Simply move\r\n your mouse over any field heading in italics for help on getting\r\n started. This user guide is provided for those who prefer more\r\n detailed step-by-step instructions.\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 Select your country or region . . .
\r\n \r\n
\r\n Select your country or region . . .
\r\n \r\n\r\n
\r\n \r\n Before using HP PartSurfer, you first need to\r\n let us know what country or region you are in.\r\n You will only need to do this once, and it\r\n will be remembered in a cookie on your\r\n computer for all your future accesses. Some of\r\n our information is tailored to specific\r\n geographic areas. Just{\" \"}\r\n \r\n select a country or region from the\r\n drop-down menu at the upper right of the\r\n main screen\r\n \r\n . If your country isn't listed, select a\r\n nearby country, as information will probably\r\n be similar.\r\n
\r\n\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n
\r\n \r\n \r\n Identify your HP product . . .
\r\n \r\n
\r\n Identify your HP product . . .
\r\n \r\n\r\n \r\n OR\r\n \r\n \r\n Enter the product number from your product in\r\n the text box located in the Quick Search tab.\r\n {\" \"}\r\n The product number is found on the back or\r\n bottom of your HP product, and will be in a\r\n format such as C2010A, 33440A or D7399A. If you\r\n can take a moment to find the product number on\r\n your product, this will be the most accurate way\r\n to locate the information you need.\r\n \r\n OR\r\n \r\n \r\n Enter the part number from your product in the\r\n text box located in the Quick Search tab.\r\n {\" \"}\r\n The part number is found on the back or bottom\r\n of your HP product, and will be in a format such\r\n as C2801-40001, 384705-051 or 5063-1256.\r\n \r\n OR\r\n \r\n \r\n Enter the name or description of your product\r\n in the text box located in the Quick Search\r\n tab.\r\n {\" \"}\r\n For example, laserjet 5, pavilion 6532 or\r\n omnibook. Searching for an HP part by entering a\r\n general description (such as Power Cord, Fusing\r\n Assembly, Motherboard, or Cartridge) in the\r\n search field on this screen will probably NOT be\r\n successful.\r\n \r\n OR\r\n \r\n \r\n Select the general family that your product\r\n belongs to from the list on the Hierarchy tab.\r\n {\" \"}\r\n Locate your product by 'drilling down' through\r\n the HP product families.\r\n \r\n OR\r\n \r\n \r\n Enter the part/product number in the text box\r\n located in the Quick Search tab with wildcard\r\n [asterisk(*)] search for single character\r\n replacement.\r\n {\" \"}\r\n For example, search for av*33u* which returns\r\n matching results.\r\n
\r\n \r\n We next need to know what HP product you have\r\n in order to help you find the part(s) that you\r\n need. After FIRST locating your HP product, as\r\n described below, you will be given several\r\n options for finding your part(s). There are\r\n five different ways to find your product:\r\n
\r\n \r\n Enter the serial number from your product in\r\n the text box located in the Quick Search tab.\r\n {\" \"}\r\n The serial number is found on the back or bottom\r\n of your HP product, and will be in a format such\r\n as USE646N6FJ, 2UA73310K5 or CNU6080B8C.\r\n\r\n \r\n Select the Lookup similar items check box if\r\n you want to match similar part numbers or\r\n product numbers.\r\n {\" \"}\r\n For example, if you enter the search string\r\n 33440A and check the box, the following\r\n results will be returned: 33440A, 33440A-T,\r\n 33440AB, etc. Please note: the Lookup\r\n similar items check box only works when\r\n searching for product numbers and part\r\n numbers.\r\n
\r\n\r\n If your product search finds a single matching\r\n HP product, a screen will be displayed that\r\n will allow you to look up parts information.\r\n If your search finds multiple matches (or if\r\n you searched through product families), you\r\n will need to{\" \"}\r\n select from a list of products for that\r\n family or search result.\r\n
\r\n\r\n The General Tab is the default view for most\r\n search results. This provides the user with a\r\n generic list of parts that are used within a\r\n family of similar products (multiple hard\r\n drives, memory modules, etc.) If a serial\r\n number search is performed, or a product SKU\r\n (Stock Keeping Number) search and you then\r\n click on the Advanced Tab, a more specific\r\n spares list called a BOM (Bill Of Materials)\r\n will be displayed when available. Also a\r\n Component BOM, which is a list of parts as\r\n used in the manufacturing process, may be\r\n available.{\" \"}\r\n
\r\n\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n
\r\n \r\n \r\n Customize your search results . . .
\r\n \r\n
\r\n Customize your search results . . .
\r\n \r\n\r\n
\r\n \r\n Once you have specified your product, you will\r\n see a list of all replacement parts for the\r\n product, grouped by keyword and part number.\r\n If you want to filter the parts list, you can{\" \"}\r\n \r\n click on the Customize your results link\r\n \r\n . This will display a form that will allow you\r\n to filter the parts listing based on the\r\n following criteria:\r\n
\r\n- \r\n
- \r\n Select RoHS.{\" \"}\r\n This will display a list of all replacement\r\n parts that are RoHS compliant.\r\n
\r\n OR\r\n \r\n \r\n - \r\n \r\n Select Part photo.\r\n {\" \"}\r\n This will display a list of all replacement\r\n parts for the product that have a part photo\r\n available.\r\n
\r\n OR\r\n \r\n \r\n - \r\n \r\n Select a Keyword.\r\n {\" \"}\r\n This will display a list of parts for the\r\n keyword. Keywords are very specific\r\n groupings of parts, such as Button, PC\r\n Board, Roller, Power Cord.\r\n
\r\n OR\r\n \r\n \r\n - \r\n \r\n Select a Category.\r\n {\" \"}\r\n This will display a list of parts for the\r\n category, grouped by keyword and part\r\n number. Categories are more general\r\n groupings of parts, based on location within\r\n the product or functionality, such as Fusing\r\n Assembly Parts, External Case Parts, Drives\r\n and Controllers, Electronic Accessories.\r\n
\r\n OR\r\n \r\n \r\n - \r\n \r\n Enter a search value in the String Search\r\n field.\r\n {\" \"}\r\n This will search through all part numbers\r\n and part descriptions for the product, and\r\n display a list of all matching parts,\r\n grouped by keyword and part number.\r\n \r\n
\r\n After you have selected your filter criteria,{\" \"}\r\n click the Apply button. This will\r\n display an updated parts list based on your\r\n filter criteria.\r\n
\r\n\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n
\r\n \r\n \r\n Find your part(s) using a parts diagram . . .
\r\n \r\n
\r\n Find your part(s) using a parts diagram . . .
\r\n \r\n\r\n
\r\n \r\n Click on an object or keyword\r\n {\" \"}\r\n for more detailed part information. Information\r\n for the part(s) (in the same format as in a\r\n parts listing) will be displayed, followed by a\r\n redisplay of the diagram with a red arrow\r\n pointing to the selected part.\r\n
\r\n The pop-up box displayed for some diagram\r\n objects contains a link labeled ‘View More\r\n Detail’.
\r\n \r\n Click the View More Detail link\r\n {\" \"}\r\n to display a more detailed view of the part or\r\n assembly.\r\n
\r\n Add to Cart: (U.S. only) used to select parts\r\n you want to order from the HP Parts Store web\r\n site. (See details on ordering parts below.)\r\n
\r\n Click to Buy: A Buy button that takes you\r\n directly to the HP Home and Home Office Store.\r\n
\r\n Part number: The HP part number.\r\n
\r\n Description: A detailed description for the\r\n part, including information, where relevant, on\r\n where and/or how the part is used within the\r\n specific product. Although PartSurfer does not\r\n show real-time part availability information,\r\n there are notes in some descriptions to indicate\r\n parts that are no longer available, or that have\r\n special ordering requirements.\r\n
\r\n Show Functional Equivalent: Once a products\r\n spares list is displayed, click the\r\n
\r\n
\r\n SBOM button (May also appear as Updated SBOM\r\n Available ): Clicking on the\r\n
\r\n
\r\n \r\n If an interactive parts diagram is available\r\n for your product, a selection field labeled\r\n View a parts diagram will be shown on the\r\n General tab. Parts diagrams allow you to\r\n visually confirm that you have found the\r\n correct part. You may move your mouse over\r\n objects on the interactive diagram for quick\r\n part information, or click on the object for\r\n more detail. Please note that parts that are\r\n shown in pale gray on some diagrams are not\r\n orderable parts, but are included on the\r\n diagram for reference only.\r\n
\r\n\r\n To view the parts diagram,{\" \"}\r\n select Interactive mode for an\r\n interactive parts diagram,{\" \"}\r\n or select Printable mode if you want to\r\n print the diagram. Select the component{\" \"}\r\n of the part you want to view from the\r\n drop-down menu. Click the search icon\r\n
\r\n \r\n Click on an object or keyword\r\n {\" \"}\r\n for more detailed part information. Information\r\n for the part(s) (in the same format as in a\r\n parts listing) will be displayed, followed by a\r\n redisplay of the diagram with a red arrow\r\n pointing to the selected part.\r\n
\r\n The pop-up box displayed for some diagram\r\n objects contains a link labeled ‘View More\r\n Detail’.
\r\n \r\n Click the View More Detail link\r\n {\" \"}\r\n to display a more detailed view of the part or\r\n assembly.\r\n
\r\n If a parts diagram for your part is not\r\n available within PartSurfer, one may be\r\n available at the HP Service Media Library.{\" \"}\r\n Click the HP Service Media Library link{\" \"}\r\n in the left menu to be taken to the HP Service\r\n Media Library search page.\r\n
\r\n \r\n Find your part(s) or part information on a\r\n parts listing . . .\r\n \r\n\r\n Parts listings contain the following fields\r\n and features to allow you to verify part\r\n numbers, access part prices (in some\r\n countries), and order parts on-line (currently\r\n only for U.S. customers):\r\n
\r\n Parts diagram/photo indicator: A camera icon in\r\n the left column of a parts listing entry\r\n indicates that there is a diagram or photo\r\n displaying that part.{\" \"}\r\n Click on the camera icon to display\r\n either a photograph of the part or a diagram\r\n with a red arrow pointing to the part. (See the\r\n previous section for details on using parts\r\n diagrams.)\r\n\r\n Add to Cart: (U.S. only) used to select parts\r\n you want to order from the HP Parts Store web\r\n site. (See details on ordering parts below.)\r\n
\r\n Click to Buy: A Buy button that takes you\r\n directly to the HP Home and Home Office Store.\r\n
\r\n Part number: The HP part number.\r\n
\r\n Description: A detailed description for the\r\n part, including information, where relevant, on\r\n where and/or how the part is used within the\r\n specific product. Although PartSurfer does not\r\n show real-time part availability information,\r\n there are notes in some descriptions to indicate\r\n parts that are no longer available, or that have\r\n special ordering requirements.\r\n
\r\n Show Functional Equivalent: Once a products\r\n spares list is displayed, click the\r\n
\r\n
\r\n SBOM button (May also appear as Updated SBOM\r\n Available ): Clicking on the\r\n
\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n
\r\n \r\n \r\n Order parts through the HP Parts Store\r\n (available in select countries only) . . .
\r\n \r\n
\r\n Order parts through the HP Parts Store\r\n (available in select countries only) . . .
\r\n \r\n\r\n
\r\n \r\n Select the Remove check box and then click the\r\n Update cart >> button\r\n {\" \"}\r\n to remove parts from your shopping cart.\r\n
\r\n Click the Update cart >> button to\r\n complete any changes you have made to the parts\r\n in your shopping cart.\r\n
\r\n Click the Place order >> button to be\r\n taken to the HP Home and Home Office Store where\r\n you can order the parts in your cart.\r\n
\r\n Click the Order more parts >> button to\r\n return to the PartSurfer homepage to search for\r\n additional parts.\r\n
\r\n
\r\n \r\n From any PartSurfer parts listing,{\" \"}\r\n \r\n select the check box in the Add to Cart\r\n column, and click the Add Parts to Cart\r\n button\r\n \r\n . When you have filled your cart with all of\r\n the parts you want to order,{\" \"}\r\n \r\n click the Shopping Cart icon\r\n
\r\n The following actions are available on the\r\n Shopping Cart page:\r\n
\r\n Update the number in the Qty text box to\r\n change the number of parts you want to order.\r\n\r\n \r\n Select the Remove check box and then click the\r\n Update cart >> button\r\n {\" \"}\r\n to remove parts from your shopping cart.\r\n
\r\n Click the Update cart >> button to\r\n complete any changes you have made to the parts\r\n in your shopping cart.\r\n
\r\n Click the Place order >> button to be\r\n taken to the HP Home and Home Office Store where\r\n you can order the parts in your cart.\r\n
\r\n Click the Order more parts >> button to\r\n return to the PartSurfer homepage to search for\r\n additional parts.\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 abbreviation . . .
\r\n \r\n
\r\n abbreviation . . .
\r\n \r\n\r\n
\r\n \r\n Below are some of abbreviation in PartSurfer\r\n
\r\n- \r\n
- \r\n RoHS.{\" \"}\r\n Restriction of Hazardous Substances\r\n \r\n
- \r\n FE.{\" \"}\r\n Funcational Equivalent\r\n \r\n
- \r\n CSR.{\" \"}\r\n Customer Self Repair\r\n \r\n
\r\n Product Name : \r\n {prod.product_name}\r\n
\r\n \r\n
\r\n \r\n {col}\r\n \r\n
\r\n ),\r\n headerStyle: () => {\r\n return { width: \"3%\" };\r\n },\r\n },\r\n {\r\n dataField: \"product_name\",\r\n text: \"Product Name\",\r\n headerStyle: () => {\r\n return { width: \"15%\" };\r\n },\r\n },\r\n ];\r\n const{Level1,Level2, Level3,Level4,Level5,Level6,User} = this.state;\r\n const styleObject = {\r\n \"float\" : \"right\",\r\n \"color\" : \"#003366\",\r\n \"width\" : \"100%\"\r\n }\r\n return ( \r\n \r\n
\r\n
\r\n
\r\n \r\n
\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n PartSurfer Hierarchy Products \r\n \r\n \r\n \r\n \r\n \r\n \r\n 10 ? paginationFactory() : undefined}\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 Hierarchy Menu:\r\n
\r\n \r\n \r\n {\r\n this.loadData(key,label,props);\r\n }}\r\n resetOpenNodesOnDataUpdate={true}/>\r\n \r\n
\r\n { dataprod &&\r\n \r\n {/* {this.state.prodparents} */}\r\n {Level1} {Level2} {Level3} {Level4} {Level5} {Level6}\r\n
\r\n
\r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n Go back to Hierarchy Menu?
\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 Feedback to HP PartSurfer\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 E-mail form:-\r\n
\r\n\r\n The information we are requesting will be used solely to fulfill your e-mail support request and does not register you as an HP customer.\r\n
\r\n Most e-mail responses can be expected within 1 business day.\r\n
\r\n
*/}\r\n \r\n Submit Request:\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 Monthly Metrics Process initiated in Backend. You will receive monthly metrics report on your Mail.\r\n
\r\n Please write the Email to PartSurfer@hp.com if you not received within 2 Hours.\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n \r\n Back to home\r\n \r\n
\r\n \r\n
\r\n
\r\n
\r\n Description : \r\n {prod.PartName}\r\n
\r\n CSR : \r\n {prod.CsrFlag}\r\n
\r\n Tech Courier : \r\n {prod.TechCourier}\r\n
\r\n ROHS : \r\n {prod.RohsCompliant}\r\n
\r\n
\r\n
\r\n \r\n
\r\n
\r\n
\r\n \r\n
\r\n
\r\n {data &&\r\n \r\n
\r\n \r\n }\r\n { !data && \r\n
\r\n \r\n
\r\n \r\n SBOM for Products: {ProdNum}\r\n \r\n \r\n
\r\n \r\n \r\n Back\r\n \r\n \r\n
\r\n There is no SBOM for Product: {ProdNum}
\r\n }\r\n \r\n // {loading &&
\r\n \r\n //
}\r\n // \r\n // {children}\r\n //
\r\n // \r\n {loading &&
\r\n )\r\n}\r\n","import zIndex from \"@material-ui/core/styles/zIndex\";\r\nimport React,{useEffect} from \"react\";\r\nimport {RESPONSEURLUID,tokencallurl,UIDClientID} from './constants/APIConstants';\r\nimport { setCookie, getQueryParam, getURLQueryString, getAuthHeader, getAuthHeaderUID, bodyParametersUID } from './Util';\r\nimport axios from 'axios';\r\nimport { Buffer } from 'buffer'\r\nimport { Code } from \"@material-ui/icons\";\r\nimport { GETUIDRESPONSE,GET_COUNTRIES } from './constants/APIConstants';\r\nimport Loading from './UIDLoader';\r\nexport function toBase64(input) { return Buffer.from(input, 'utf-8').toString('base64')}\r\nexport function fromBase64(encoded) { return Buffer.from(encoded, 'base64').toString('utf8')}\r\n\r\n\r\nclass CallBack extends React.Component{\r\n\r\n componentDidMount()\r\n {\r\n let urltkn;\r\n urltkn = tokencallurl;\r\n this.setState({loading: true})\r\n const queryParameters = new URLSearchParams(window.location.search)\r\n const Code = queryParameters.get(\"code\")\r\n var access_token=\"\";\r\n var axios = require('axios');\r\n var config = {\r\n method: 'post',\r\n //url: 'https://login-itg.external.hp.com/as/token.oauth2?redirect_uri=http://localhost:3000/PartSurfer/CallBack&code='+Code+'&grant_type=authorization_code',\r\n url: 'https://'+urltkn+'&code='+Code+'&grant_type=authorization_code',\r\n headers: { \r\n 'Authorization': 'Basic cGFydHN1cmZlcnBybzpHRklUeHJzd1RvTXNBUHZYckRWMVRCVkVNc0xvNVJodGlicGlkUEhLdld1eG5xZWVLS3NIQzQ5ODBwTmJIOXFw', \r\n 'Content-Type': 'application/x-www-form-urlencoded', \r\n 'Cookie': 'HPIUID=jyzwhPBEf53HrNc0Zi8mGS'\r\n }\r\n };\r\n\r\n axios(config)\r\n .then(function (response) { \r\n debugger; \r\n var obj=JSON.stringify(response.data);\r\n console.log(obj);\r\n let access_token_data = JSON.parse(obj);\r\n console.log(access_token_data);\r\n access_token=access_token_data.access_token; \r\n })\r\n .catch(function (error) { \r\n debugger; \r\n console.log(error);\r\n }).finally(() => { \r\n const content = { text: access_token };\r\n let url;\r\n url = GETUIDRESPONSE();\r\n axios.post(url,content, {\r\n headers: {\r\n ...getAuthHeader()\r\n }\r\n })\r\n .then((res) => {\r\n var email = res;\r\n console.log(\"Successful auth uid\");\r\n console.log(res.data);\r\n this.setState({ data: res.data.Body })\r\n if(res.data==\"UID_Failed\")\r\n { \r\n localStorage.setItem(\"loggeduser\",res.data); \r\n window.location.href = \"/PartSurfer\";\r\n }\r\n else\r\n {\r\n localStorage.setItem(\"loggeduser\",res.data);\r\n this.setState({ User: res.data }); \r\n window.location.href = \"/PartSurfer?Code=\"+res.data;\r\n\r\n }\r\n this.setState({ loading: false });\r\n }\r\n , (error) =>\r\n {\r\n console.log(error); \r\n }) \r\n });\r\n\r\n }\r\n\r\n\r\n\r\n render(){\r\n\r\nreturn(\r\n \r\n
}\r\n {loading ? \r\n \r\n
\r\n Please wait for the moment\r\n
\r\n \r\n Please wait for the moment\r\n
\r\n {children}\r\n
: children}\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 {process.env.REACT_APP_FOOTER_ENABLED===\"true\" &&
\r\n )\r\n}\r\n","import React from 'react'\r\n\r\nexport default function Header() {\r\n return (\r\n }\r\n
\r\n { \r\n // console.log(\"header\", new String( process.env.REACT_APP_HEADER_ENABLED)===\"0\"),\r\n process.env.REACT_APP_HEADER_ENABLED===\"true\" &&
\r\n )\r\n}\r\n","import { getStoredCart, setStoredCart } from '../CartUtils';\r\n\r\nconst cart = (state = { cartItems: getStoredCart() }, action ) => {\r\n switch (action.type) {\r\n case \"SET_CART_ITEMS\":\r\n console.log(\"cart-item\",action.payload)\r\n setStoredCart(action.payload)\r\n return {\r\n ...state,\r\n cartItems: action.payload,\r\n };\r\n default:\r\n return state;\r\n}\r\n}\r\nexport default cart;\r\n","import { combineReducers } from 'redux'\r\nimport cart from './cartReducer'\r\n\r\nexport default combineReducers({\r\n cart,\r\n})","import 'react-app-polyfill/ie11';\r\nimport \"react-app-polyfill/stable\";\r\nimport React from \"react\";\r\nimport ReactDOM from \"react-dom\";\r\nimport \"./index.css\";\r\nimport App from \"./App\";\r\nimport * as serviceWorker from \"./serviceWorker\";\r\nimport \"bootstrap/dist/css/bootstrap.min.css\";\r\nimport { BrowserRouter } from \"react-router-dom\";\r\nimport Footer from \"./components/footer\";\r\nimport Header from \"./components/Header\";\r\nimport { createStore } from \"redux\";\r\nimport { Provider } from \"react-redux\";\r\nimport rootReducer from \"./Reducers\";\r\n\r\n\r\nrequire(\"dotenv\").config();\r\nconst store = createStore(\r\n rootReducer,\r\n {},\r\n window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()\r\n);\r\n\r\n\r\nReactDOM.render(\r\n \r\n
}\r\n