{"version":3,"sources":["lib/Commerce.js","components/Hero.js","components/ProductItem.js","components/ProductsList.js","App.js","serviceWorker.js","index.js"],"names":["commerce","Commerce","process","Hero","merchant","className","src","alt","business_name","href","ProductItem","product","this","props","result","stripHtml","description","media","source","name","price","formatted_with_symbol","Component","ProductsList","products","id","map","key","App","state","fetchMerchantDetails","fetchProducts","merchants","about","then","setState","catch","error","console","log","list","data","Boolean","window","location","hostname","match","ReactDOM","render","document","getElementById","navigator","serviceWorker","ready","registration","unregister","message"],"mappings":"gQAEaA,EAAW,I,OAAIC,GAASC,oDAAuC,GCe7DC,G,MAdF,SAAC,GAAkB,IAAhBC,EAAe,EAAfA,SACZ,OACI,yBAAKC,UAAU,QACX,yBAAKC,IAAI,eAAeC,IAAI,SAC5B,yBAAKF,UAAU,cACX,4BACKD,EAASI,eAEd,uBAAGC,KAAK,YAAYJ,UAAU,OAA9B,Y,iBCmBDK,E,uKAxBH,IACAC,EAAYC,KAAKC,MAAjBF,QACAG,EAAWC,IAAUJ,EAAQK,aAA7BF,OAER,OACE,yBAAKT,UAAU,iBACb,yBAAKA,UAAU,iBAAiBC,IAAKK,EAAQM,MAAMC,OAAQX,IAAKI,EAAQQ,OACxE,yBAAKd,UAAU,iBACb,wBAAIA,UAAU,iBAAiBM,EAAQQ,MACvC,uBAAGd,UAAU,wBAEVS,GAEH,yBAAKT,UAAU,oBACb,uBAAGA,UAAU,kBACZM,EAAQS,MAAMC,8B,GAjBDC,aCoBXC,E,uKAlBD,IACEC,EAAaZ,KAAKC,MAAlBW,SAER,OACI,oCACI,yBAAKnB,UAAU,WAAWoB,GAAG,YACxBD,EAASE,KAAI,SAACf,GAAD,OACV,kBAAC,EAAD,CACIgB,IAAKhB,EAAQc,GACbd,QAASA,a,GAXVW,aCsDZM,E,kDAlDb,WAAYf,GAAQ,IAAD,8BACjB,cAAMA,IAEDgB,MAAQ,CACXzB,SAAU,GACVoB,SAAU,IALK,E,gEAUjBZ,KAAKkB,uBACLlB,KAAKmB,kB,6CAGiB,IAAD,OACrB/B,EAASgC,UAAUC,QAAQC,MAAK,SAAC9B,GAC/B,EAAK+B,SAAS,CAAE/B,SAAUA,OACzBgC,OAAM,SAACC,GACRC,QAAQC,IAAI,gDAAiDF,Q,sCAQhD,IAAD,OACdrC,EAASwB,SAASgB,OAAON,MAAK,SAACV,GAC7B,EAAKW,SAAS,CAAEX,SAAUA,EAASiB,UAClCL,OAAM,SAACC,GACRC,QAAQC,IAAI,2CAA4CF,Q,+BAIlD,IAAD,EACwBzB,KAAKiB,MAA5BL,EADD,EACCA,SAAUpB,EADX,EACWA,SAElB,OACE,yBAAKC,UAAU,OACb,kBAAC,EAAD,CACED,SAAUA,IAEZ,kBAAC,EAAD,CACEoB,SAAUA,S,GA5CFF,aCKEoB,QACW,cAA7BC,OAAOC,SAASC,UAEe,UAA7BF,OAAOC,SAASC,UAEhBF,OAAOC,SAASC,SAASC,MACvB,2DCbNC,IAASC,OAAO,kBAAC,EAAD,MAASC,SAASC,eAAe,SD8H3C,kBAAmBC,WACrBA,UAAUC,cAAcC,MACrBnB,MAAK,SAACoB,GACLA,EAAaC,gBAEdnB,OAAM,SAACC,GACNC,QAAQD,MAAMA,EAAMmB,c","file":"static/js/main.927e7948.chunk.js","sourcesContent":["import Commerce from '@chec/commerce.js';\n\nexport const commerce = new Commerce(process.env.REACT_APP_CHEC_PUBLIC_KEY, true);","import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst Hero = ({ merchant }) => {\n    return (\n        <div className=\"hero\">\n            <img src=\"img/logo.svg\" alt=\"Logo\" />\n            <div className=\"hero__text\">\n                <h1>\n                    {merchant.business_name}\n                </h1>\n                <a href=\"#products\" className=\"btn\">Shop</a>\n            </div>\n        </div>\n    )\n}\n\nexport default Hero;\n\n\nHero.propTypes = {\n    merchant: PropTypes.object,\n};","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport stripHtml from 'string-strip-html';\n\nclass ProductItem extends Component {\n\n  render() {\n    const { product } = this.props\n    const { result } = stripHtml(product.description);\n  \n    return (\n      <div className=\"product__card\">\n        <img className=\"product__image\" src={product.media.source} alt={product.name} />\n        <div className=\"product__info\">\n          <h4 className=\"product__name\">{product.name}</h4>\n          <p className=\"product__description\">\n            {/* product description stripped of html tags */}\n            {result}\n          </p>\n          <div className=\"product__details\">\n            <p className=\"product__price\">\n            {product.price.formatted_with_symbol}\n            </p>\n          </div>\n        </div>\n      </div>\n    );\n  }\n};\n\nexport default ProductItem;\n\nProductItem.propTypes = {\n  product: PropTypes.object,\n};","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport ProductItem from './ProductItem';\n\nclass ProductsList extends Component {\n\n    render() {\n        const { products } = this.props;\n\n        return (\n            <>\n                <div className=\"products\" id=\"products\">\n                    {products.map((product) => (\n                        <ProductItem\n                            key={product.id}\n                            product={product}\n                        />\n                    ))}\n                </div>\n            </>\n        )\n    }\n}\n\nexport default ProductsList;\n\nProductsList.propTypes = {\n    products: PropTypes.array,\n};","import React, { Component } from \"react\";\nimport { commerce } from './lib/Commerce';\nimport './styles/scss/styles.scss'\n\nimport Hero from './components/Hero';\nimport ProductsList from \"./components/ProductsList\";\n\nclass App extends Component {\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      merchant: {},\n      products: [],\n    }\n  }\n\n  componentDidMount() {\n    this.fetchMerchantDetails();\n    this.fetchProducts();\n  }\n\n  fetchMerchantDetails() {\n    commerce.merchants.about().then((merchant) => {\n      this.setState({ merchant: merchant });\n    }).catch((error) => {\n      console.log('There was an error fetch the merchant details', error)\n    });\n  }\n\n  /**\n   * Fetch products data from Chec and stores in the products data object.\n   * https://commercejs.com/docs/sdk/products\n   */\n  fetchProducts() {\n    commerce.products.list().then((products) => {\n      this.setState({ products: products.data });\n    }).catch((error) => {\n      console.log('There was an error fetching the products', error);\n    });\n  }\n\n  render() {\n    const { products, merchant } = this.state;\n\n    return (\n      <div className=\"app\">\n        <Hero\n          merchant={merchant}\n        />\n        <ProductsList \n          products={products}\n        />\n      </div>\n    );\n  }\n};\n\nexport default App;\n","// This optional code is used to register a service worker.\n// register() is not called by default.\n\n// This lets the app load faster on subsequent visits in production, and gives\n// it offline capabilities. However, it also means that developers (and users)\n// will only see deployed updates on subsequent visits to a page, after all the\n// existing tabs open on the page have been closed, since previously cached\n// resources are updated in the background.\n\n// To learn more about the benefits of this model and instructions on how to\n// opt-in, read https://bit.ly/CRA-PWA\n\nconst isLocalhost = Boolean(\n  window.location.hostname === \"localhost\" ||\n    // [::1] is the IPv6 localhost address.\n    window.location.hostname === \"[::1]\" ||\n    // 127.0.0.0/8 are considered localhost for IPv4.\n    window.location.hostname.match(\n      /^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/\n    )\n);\n\nexport function register(config) {\n  if (process.env.NODE_ENV === \"production\" && \"serviceWorker\" in navigator) {\n    // The URL constructor is available in all browsers that support SW.\n    const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);\n    if (publicUrl.origin !== window.location.origin) {\n      // Our service worker won't work if PUBLIC_URL is on a different origin\n      // from what our page is served on. This might happen if a CDN is used to\n      // serve assets; see https://github.com/facebook/create-react-app/issues/2374\n      return;\n    }\n\n    window.addEventListener(\"load\", () => {\n      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;\n\n      if (isLocalhost) {\n        // This is running on localhost. Let's check if a service worker still exists or not.\n        checkValidServiceWorker(swUrl, config);\n\n        // Add some additional logging to localhost, pointing developers to the\n        // service worker/PWA documentation.\n        navigator.serviceWorker.ready.then(() => {\n          console.log(\n            \"This web app is being served cache-first by a service \" +\n              \"worker. To learn more, visit https://bit.ly/CRA-PWA\"\n          );\n        });\n      } else {\n        // Is not localhost. Just register service worker\n        registerValidSW(swUrl, config);\n      }\n    });\n  }\n}\n\nfunction registerValidSW(swUrl, config) {\n  navigator.serviceWorker\n    .register(swUrl)\n    .then((registration) => {\n      registration.onupdatefound = () => {\n        const installingWorker = registration.installing;\n        if (installingWorker == null) {\n          return;\n        }\n        installingWorker.onstatechange = () => {\n          if (installingWorker.state === \"installed\") {\n            if (navigator.serviceWorker.controller) {\n              // At this point, the updated precached content has been fetched,\n              // but the previous service worker will still serve the older\n              // content until all client tabs are closed.\n              console.log(\n                \"New content is available and will be used when all \" +\n                  \"tabs for this page are closed. See https://bit.ly/CRA-PWA.\"\n              );\n\n              // Execute callback\n              if (config && config.onUpdate) {\n                config.onUpdate(registration);\n              }\n            } else {\n              // At this point, everything has been precached.\n              // It's the perfect time to display a\n              // \"Content is cached for offline use.\" message.\n              console.log(\"Content is cached for offline use.\");\n\n              // Execute callback\n              if (config && config.onSuccess) {\n                config.onSuccess(registration);\n              }\n            }\n          }\n        };\n      };\n    })\n    .catch((error) => {\n      console.error(\"Error during service worker registration:\", error);\n    });\n}\n\nfunction checkValidServiceWorker(swUrl, config) {\n  // Check if the service worker can be found. If it can't reload the page.\n  fetch(swUrl, {\n    headers: { \"Service-Worker\": \"script\" },\n  })\n    .then((response) => {\n      // Ensure service worker exists, and that we really are getting a JS file.\n      const contentType = response.headers.get(\"content-type\");\n      if (\n        response.status === 404 ||\n        (contentType != null && contentType.indexOf(\"javascript\") === -1)\n      ) {\n        // No service worker found. Probably a different app. Reload the page.\n        navigator.serviceWorker.ready.then((registration) => {\n          registration.unregister().then(() => {\n            window.location.reload();\n          });\n        });\n      } else {\n        // Service worker found. Proceed as normal.\n        registerValidSW(swUrl, config);\n      }\n    })\n    .catch(() => {\n      console.log(\n        \"No internet connection found. App is running in offline mode.\"\n      );\n    });\n}\n\nexport function unregister() {\n  if (\"serviceWorker\" in navigator) {\n    navigator.serviceWorker.ready\n      .then((registration) => {\n        registration.unregister();\n      })\n      .catch((error) => {\n        console.error(error.message);\n      });\n  }\n}\n","import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport App from \"./App\";\nimport * as serviceWorker from \"./serviceWorker\";\n\nReactDOM.render(<App />, document.getElementById(\"root\"));\n\n// If you want your app to work offline and load faster, you can change\n// unregister() to register() below. Note this comes with some pitfalls.\n// Learn more about service workers: https://bit.ly/CRA-PWA\nserviceWorker.unregister();\n"],"sourceRoot":""}