{"version":3,"sources":["assets/master-builders-logo.png","screens/ProductDetails.js"],"names":["useStyles","makeStyles","theme","backdrop","zIndex","drawer","color","ProductDetails","location","useLocation","dispatch","useDispatch","classes","useState","tabValue","setTabValue","productToShow","setProductToShow","useSelector","state","products","product","isProductLoading","isLoaded","useEffect","name","pathname","productName","getPathParameter","searchProductByNameAsKeyWord","searchProductByName","handleTabChange","event","newValue","a11yProps","index","id","renderData","dataList","Array","isArray","map","data","className","length","renderTabContent","applications","advantages","packaging","colorContent","renderAccordian","title","isExpanded","expandIcon","aria-controls","renderProductDetailInfo","needToShowDetail","position","value","onChange","aria-label","label","open","charSet","pascalCase","property","content","tagline","keywords","rel","href","container","spacing","item","xs","sm","md","lg","xl","src","masterBuilderLogo","alt","description","document","target","variant"],"mappings":"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","file":"static/js/9.3c82043f.chunk.js","sourcesContent":["export default __webpack_public_path__ + \"static/media/master-builders-logo.0d4703f5.png\";","import React, { useState, useEffect } from 'react';\nimport { useLocation } from 'react-router';\nimport { Helmet } from 'react-helmet';\nimport { useDispatch, useSelector } from 'react-redux';\n\nimport { WindMillLoading } from 'react-loadingg';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Backdrop from '@material-ui/core/Backdrop';\nimport Divider from '@material-ui/core/Divider';\nimport Grid from '@material-ui/core/Grid';\nimport Button from '@material-ui/core/Button';\nimport Tabs from '@material-ui/core/Tabs';\nimport Tab from '@material-ui/core/Tab';\nimport AppBar from '@material-ui/core/AppBar';\nimport Accordion from '@material-ui/core/Accordion';\nimport AccordionSummary from '@material-ui/core/AccordionSummary';\nimport AccordionDetails from '@material-ui/core/AccordionDetails';\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\n\nimport { getPathParameter, pascalCase } from '../utils';\nimport {\n  searchProductByName,\n  searchProductByNameAsKeyWord,\n} from '../actions/searchProductAction';\nimport masterBuilderLogo from '../assets/master-builders-logo.png';\nimport '../styles/productDetails.scss';\n\nconst useStyles = makeStyles((theme) => ({\n  backdrop: {\n    zIndex: theme.zIndex.drawer + 1,\n    color: '#fff',\n  },\n}));\n\nconst ProductDetails = () => {\n  const location = useLocation();\n  const dispatch = useDispatch();\n  const classes = useStyles();\n\n  const [tabValue, setTabValue] = useState(0);\n  const [productToShow, setProductToShow] = useState({});\n\n  const { product, isProductLoading, isLoaded } = useSelector(\n    (state) => state.products\n  );\n\n  useEffect(() => {\n    if (!location.state && !isLoaded && !isProductLoading) {\n      const { pathname } = location;\n      let productName = getPathParameter(pathname, 3);\n      if (productName) {\n        dispatch(searchProductByNameAsKeyWord(productName));\n      } else {\n        productName = getPathParameter(pathname, 2);\n        dispatch(searchProductByName(productName));\n      }\n    } else if (\n      location.state &&\n      location.state.product &&\n      location.state.product.name\n    ) {\n      const product = location.state.product;\n      setProductToShow(product);\n    }\n  }, [productToShow, location, isLoaded, isProductLoading, dispatch]);\n\n  useEffect(() => {\n    if (product && product.name && isLoaded) {\n      setProductToShow(product);\n    }\n  }, [product, isLoaded]);\n\n  const renderProductBasicInfo = () => {\n    return (\n      <Grid container spacing={4} className=\"basic-info-container\">\n        <Grid\n          item\n          xs={12}\n          sm={6}\n          md={6}\n          lg={6}\n          xl={6}\n          className=\"basic-info-item\"\n        >\n          <div className=\"img-container\">\n            <img src={masterBuilderLogo} alt={productToShow.tagline} />\n          </div>\n        </Grid>\n\n        <Grid\n          item\n          xs={12}\n          sm={6}\n          md={6}\n          lg={6}\n          xl={6}\n          className=\"basic-info-item\"\n        >\n          <div className=\"detail-data\">\n            <div className=\"title\">\n              <h1 className=\"name\">{productToShow.name}</h1>\n              <h2 className=\"tagline\">\n                <i>{productToShow.tagline}</i>\n              </h2>\n            </div>\n\n            <span className=\"description\">{productToShow.description}</span>\n            <a\n              href={productToShow.document}\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n            >\n              <Button variant=\"contained\">Technical Data Sheet</Button>\n            </a>\n          </div>\n        </Grid>\n      </Grid>\n    );\n  };\n\n  const handleTabChange = (event, newValue) => {\n    setTabValue(newValue);\n  };\n\n  const a11yProps = (index) => {\n    return {\n      id: `simple-tab-${index}`,\n      'aria-controls': `simple-tabpanel-${index}`,\n    };\n  };\n\n  const renderData = (dataList) => {\n    if (dataList && Array.isArray(dataList)) {\n      return (\n        <ul>\n          {dataList.map((data, index) => (\n            <li key={index} className=\"tab-content\">\n              {data}\n            </li>\n          ))}\n        </ul>\n      );\n    } else if (dataList && dataList.length > 0) {\n      return (\n        <ul>\n          <li key={0} className=\"tab-content\">\n            {dataList}\n          </li>\n        </ul>\n      );\n    }\n  };\n\n  const renderTabContent = () => {\n    const { applications, advantages, packaging, colorContent } = productToShow;\n\n    if (tabValue === 0) {\n      return <div>{renderData(applications)}</div>;\n    } else if (tabValue === 1) {\n      return <div>{renderData(advantages)}</div>;\n    } else if (tabValue === 2) {\n      return <div>{renderData(packaging)}</div>;\n    } else if (tabValue === 3) {\n      return <div>{renderData(colorContent)}</div>;\n    }\n  };\n\n  const renderAccordian = (title, dataList, isExpanded) => {\n    return (\n      <Accordion\n        id={title}\n        //expanded={title === accordianValue}\n        //onChange={(event, expanded) => handleAccordianExpand(event, expanded)}\n      >\n        <AccordionSummary\n          expandIcon={<ExpandMoreIcon />}\n          aria-controls=\"panel1a-content\"\n          id=\"panel1a-header\"\n        >\n          <span className=\"title\">{title}</span>\n        </AccordionSummary>\n        <AccordionDetails>{renderData(dataList)}</AccordionDetails>\n      </Accordion>\n    );\n  };\n\n  const renderProductDetailInfo = () => {\n    const { applications, advantages, packaging, colorContent } = productToShow;\n    let needToShowDetail = true;\n    if (!applications && !advantages && !packaging && !colorContent) {\n      needToShowDetail = false;\n    }\n    if (needToShowDetail) {\n      return (\n        <div className=\"detail-info-container\">\n          <div className=\"tab-container\">\n            <AppBar position=\"static\">\n              <Tabs\n                //centered\n                value={tabValue}\n                onChange={handleTabChange}\n                aria-label=\"simple tabs example\"\n              >\n                {productToShow.applications ? (\n                  <Tab label=\"Typical Application\" {...a11yProps(0)} />\n                ) : null}\n\n                {productToShow.advantages ? (\n                  <Tab label=\"Advantages\" {...a11yProps(1)} />\n                ) : null}\n\n                {productToShow.packaging ? (\n                  <Tab label=\"Packaging\" {...a11yProps(2)} />\n                ) : null}\n\n                {productToShow.colorContent ? (\n                  <Tab label=\"Colors Content\" {...a11yProps(3)} />\n                ) : null}\n              </Tabs>\n            </AppBar>\n            {renderTabContent()}\n          </div>\n\n          <div className=\"accordian-container\">\n            {productToShow.applications\n              ? renderAccordian(\n                  'Applications',\n                  productToShow.applications,\n                  true\n                )\n              : null}\n\n            {productToShow.advantages\n              ? renderAccordian('Advantages', productToShow.advantages, false)\n              : null}\n\n            {productToShow.packaging\n              ? renderAccordian('Packaging', productToShow.packaging, false)\n              : null}\n\n            {productToShow.colorContent\n              ? renderAccordian(\n                  'Color Content',\n                  productToShow.colorContent,\n                  false\n                )\n              : null}\n          </div>\n        </div>\n      );\n    }\n    return null;\n  };\n\n  const renderProductDetails = () => {\n    return (\n      <div className=\"container\">\n        <Helmet>\n          <meta charSet=\"utf-8\" />\n          <title>{pascalCase(productToShow.name)}</title>\n          <meta property=\"og:title\" content={pascalCase(productToShow.name)} />\n          <meta name=\"description\" content={productToShow.tagline} />\n          <meta name=\"keywords\" content={productToShow.keywords} />\n          <meta property=\"og:description\" content={productToShow.tagline} />\n          {/* <link\n            rel=\"canonical\"\n            href={`http://revaintl.com/products/${productToShow.name}/`}\n          /> */}\n          <link rel=\"canonical\" href=\"http://revaintl.com/\" />\n          <meta\n            property=\"og:url\"\n            content={`http://revaintl.com/products/${productToShow.name}/`}\n          />\n          <meta property=\"og:site_name\" content=\"Reva International\" />\n          <meta\n            property=\"article:publisher\"\n            content=\"https://www.facebook.com/RevaInternationalME\"\n          />\n          <meta name=\"twitter:card\" content=\"summary_large_image\" />\n          <meta name=\"twitter:description\" content={productToShow.tagline} />\n          <meta name=\"twitter:title\" content={pascalCase(productToShow.name)} />\n        </Helmet>\n        {renderProductBasicInfo()}\n        <Divider />\n        {renderProductDetailInfo()}\n      </div>\n    );\n  };\n  return (\n    <div className=\"product-details\">\n      <Backdrop open={isProductLoading} className={classes.backdrop}>\n        <WindMillLoading color=\"#ef7f1b\" />\n      </Backdrop>\n      {renderProductDetails()}\n    </div>\n  );\n};\n\nexport default ProductDetails;\n"],"sourceRoot":""}