{"version":3,"sources":["components/example1/Example1.js","components/example2/Example2.js","components/example3/Example3.js","App.js","serviceWorker.js","index.js"],"names":["Example1","props","_this","Object","classCallCheck","this","possibleConstructorReturn","getPrototypeOf","call","tokenize","setState","loading","cardRef","current","then","data","token","error","catch","handleChange","event","target","value","type","checked","name","defineProperty","React","createRef","state","firstName","options","classes","focus","invalid","empty","complete","style","base","color","fontWeight","fontFamily","fontSize","fontSmoothing",":focus","::placeholder",":focus::placeholder","locale","placeholder","number","expiry","cvv","fonts","bind","assertThisInitialized","_this$state$options","react_default","a","createElement","className","onChange","chargebee_js_react_wrapper_esm","ref","styles","onClick","role","Component","Example2","getIframeStyles","theme","iconColor","increaseFontSize","objectSpread","concat","decreaseFontSize","setTheme","index","preventDefault","themes","root","document","documentElement","setProperty","toggleCardIcon","cardIcon","clear","THEMES","email","phone","_this2","_this3","_this$state","icon","marginTop","id","e","main-bg","secondary-bg","main-text","placeholder-focused","primary-btn","btn-text","primary-btn-focus","invalid-focused","invalid-placeholder","errorMessage","onReady","console","log","onFocus","field","onBlur","setLocale","errors","message","errorObj","values","filter","val","pop","App","window","Chargebee","init","site","publishableKey","react_router_dom","basename","react_router","path","component","Example3","exact","Boolean","location","hostname","match","ReactDOM","render","src_App","getElementById","navigator","serviceWorker","ready","registration","unregister"],"mappings":"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","file":"static/js/main.664c89fa.chunk.js","sourcesContent":["import React, { Component } from 'react';\nimport {CardComponent, CardNumber, CardExpiry, CardCVV} from \"@chargebee/chargebee-js-react-wrapper\";\nimport './Example1.css'\n\nexport default class Example1 extends Component {\n  constructor(props) {\n    super(props);\n    // Create ref to assign card-component\n    this.cardRef = React.createRef()\n\n    this.state = {\n      token: \"\",\n      error: \"\",\n      loading: false,\n      firstName: \"\",\n      options: {\n        // Custom classes - applied on container elements based on field's state\n        classes: {\n          focus: 'focus',\n          invalid: 'invalid',\n          empty: 'empty',\n          complete: 'complete',\n        },\n\n        style: {\n          // Styles for default field state\n          base: {\n            color: '#333',\n            fontWeight: '500',\n            fontFamily: 'Roboto, Segoe UI, Helvetica Neue, sans-serif',\n            fontSize: '16px',\n            fontSmoothing: 'antialiased',\n      \n            ':focus': {\n              color: '#424770',\n            },\n      \n            '::placeholder': {\n              color: 'transparent',\n            },\n      \n            ':focus::placeholder': {\n              color: '#7b808c',\n            },\n          },\n      \n          // Styles for invalid field state\n          invalid: {\n            color: '#e41029',\n      \n            ':focus': {\n              color: '#e44d5f',\n            },\n            '::placeholder': {\n              color: '#FFCCA5',\n            },\n          },\n        },\n\n        // locale\n        locale: 'en',\n\n        // Custom placeholders\n        placeholder: {\n          number: \"4111 1111 1111 1111\",\n          expiry: \"MM / YY\",\n          cvv: \"CVV\"\n        },\n\n        // Custom fonts\n        fonts: [\n          'https://fonts.googleapis.com/css?family=Roboto:300,500,600'\n        ]\n      },\n    }\n    this.handleChange = this.handleChange.bind(this);\n    this.tokenize = this.tokenize.bind(this);\n  }\n\n  tokenize = () => {\n    this.setState({loading: true});\n\n    // Call tokenize methods through  card component's ref\n    this.cardRef.current.tokenize({}).then((data) => {\n      this.setState({loading: false, token: data.token, error: \"\"});\n    }).catch((error) => {\n      this.setState({loading: false, token: \"\", error: \"Problem while tokenizing your card details\"});\n    });\n  }\n\n  handleChange = (event) => {\n    const target = event.target;\n    const value = target.type === 'checkbox' ? target.checked : target.value;\n    const name = target.name;\n\n    this.setState({\n      [name]: value\n    });\n  }\n\n  render() {\n    const { style, classes, locale, placeholder, fonts } = this.state.options;\n    return (\n      <div className=\"ex1 container\">\n        <div className=\"ex1-wrap\">\n          <div className=\"ex1-fieldset\">\n          <div className=\"ex1-field\">                  \n              <input name=\"firstName\" className={ this.state.firstName ? \"ex1-input val\" : \"ex1-input\"} type=\"text\" placeholder=\"John Doe\" value={this.state.firstName} onChange={this.handleChange} />\n              <label className=\"ex1-label\">Name on Card</label><i className=\"ex1-bar\"></i>\n          </div>\n\n          {/* Pass all options as props to card component  */}\n          {/* Assign ref to call internal methods */}\n          <CardComponent ref={this.cardRef} className=\"fieldset field\"\n            styles={style} \n            classes={classes} \n            locale={locale}\n            placeholder={placeholder}\n            fonts={fonts}\n          >\n            <div className=\"ex1-field\">\n              {/* Card number component */}\n              <CardNumber className=\"ex1-input\"/>\n              <label className=\"ex1-label\">Card Number</label><i className=\"ex1-bar\"></i>\n            </div>\n\n            <div className=\"ex1-fields\">\n              <div className=\"ex1-field\">\n                {/* Card expiry component */}\n                <CardExpiry className=\"ex1-input\"/>\n                <label className=\"ex1-label\">Expiry</label><i className=\"ex1-bar\"></i>\n              </div>\n\n              <div className=\"ex1-field\">\n                {/* Card cvv component */}\n                <CardCVV className=\"ex1-input\"/>\n                <label className=\"ex1-label\">CVC</label><i className=\"ex1-bar\"></i>\n              </div>\n\n            </div>\n          </CardComponent>\n\n        </div>\n        <button type=\"submit\" className={ this.state.loading ? \"submit ex1-button\" : \"ex1-button\"} onClick={this.tokenize}>Pay $x & Tokenize</button>\n        {this.state.error && <div className=\"error\" role=\"alert\">{this.state.error}</div>}\n        {this.state.token && <div className=\"token\" >{this.state.token}</div>}\n      </div>\n      </div>\n    );\n  }\n}","import React, { Component } from 'react';\nimport {CardComponent} from \"@chargebee/chargebee-js-react-wrapper\";\nimport './Example2.css'\n\nexport default class Example2 extends Component {\n  constructor(props) {\n    super(props);\n    // Create a ref for card component\n    this.cardRef = React.createRef()\n    this.themes = THEMES;\n    this.state = {\n      token: \"\",\n      error: \"\",\n      loading: false,\n      firstName: \"\",\n      email: \"\",\n      phone: \"\",\n      // To change styles dynamically\n      fontSize: 16,\n\n      // Custom classes\n      classes: {\n        focus: 'focus',\n        invalid: 'invalid',\n        empty: 'empty',\n        complete: 'complete',\n      },\n      \n      // Custom styles\n      styles: this.getIframeStyles(this.themes[0]),\n\n      // Card icon toggle\n      cardIcon: true,\n    }\n    this.handleChange = this.handleChange.bind(this);\n    this.tokenize = this.tokenize.bind(this);\n  }\n\n  tokenize() {\n    this.setState({loading: true});\n    // Call tokenize method using card component's ref\n    this.cardRef.current.tokenize({}).then((data) => {\n      this.setState({loading: false, token: data.token, error: \"\"});\n    }).catch((error) => {\n      this.setState({loading: false, token: \"\", error: \"Problem while tokenizing your card details\"});\n    });\n  }\n\n  handleChange(event) {\n    const target = event.target;\n    const value = target.type === 'checkbox' ? target.checked : target.value;\n    const name = target.name;\n\n    this.setState({\n      [name]: value\n    });\n  }\n  \n  getIframeStyles = (theme) => {\n    return {\n      base: {\n        color: theme['main-text'],\n        fontWeight: '500',\n        fontFamily: 'Lato,-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue, sans-serif',\n        fontSize: '16px',\n        fontSmoothing: 'antialiased',\n        iconColor: theme['main-text'],\n\n        ':focus': {\n          // color: '#424770',\n        },\n\n        '::placeholder': {\n          color: theme['placeholder'],\n        },\n\n        ':focus::placeholder': {\n          color: theme['placeholder-focused'],\n        },\n      },\n      invalid: {\n        color: theme['invalid'] || '#FF7C4A',\n\n        ':focus': {\n          color: theme['invalid-focused'] || '#e44d5f',\n        },\n        '::placeholder': {\n          color: theme['invalid-placeholder'] || '#FFCCA5',\n        },\n      },\n    }\n  }\n\n  increaseFontSize = () => {\n    const fontSize = this.state.fontSize + 1;\n    this.setState({\n      fontSize,\n      styles: {\n        ...this.state.styles,\n        base: {\n          ...this.state.styles.base,\n          fontSize: `${fontSize}px`,\n        }\n      }\n    })\n  }\n\n  // Update any of the props passed to card-component to trigger update\n  decreaseFontSize = () => {\n    const fontSize = this.state.fontSize - 1;\n    this.setState({\n      fontSize,\n      styles: {\n        ...this.state.styles,\n        base: {\n          ...this.state.styles.base,\n          fontSize: `${fontSize}px`,\n        }\n      }\n    })\n  }\n\n  setTheme = (event, index) => {\n    event.preventDefault();\n    const theme = this.themes[index];\n    let root = document.documentElement;\n    root.style.setProperty('--main-bg', theme['main-bg'])\n    root.style.setProperty('--secondary-bg', theme['secondary-bg'])\n    root.style.setProperty('--main-text', theme['main-text'])\n    root.style.setProperty('--placeholder', theme['placeholder'])\n    root.style.setProperty('--placeholder-focused', theme['placeholder-focused'])\n    root.style.setProperty('--primary-btn', theme['primary-btn'])\n    root.style.setProperty('--btn-text', theme['btn-text'])\n    root.style.setProperty('--primary-btn-focus', theme['primary-btn-focus'])\n\n    this.setState({\n      styles: this.getIframeStyles(theme)\n    });\n  }\n\n  toggleCardIcon = () => {\n    this.setState({\n      cardIcon: !this.state.cardIcon\n    })\n  }\n\n  // Clear the contents of the fields\n  clear = () => {\n    this.cardRef.current.clear();\n  }\n\n  focus = () => {\n    this.cardRef.current.focus();\n  }\n\n  render() {\n    const { cardIcon, styles, classes } = this.state;\n    return (\n      <div className=\"ex2 container\">\n        <div className=\"ex2-wrap\">\n          <div className=\"ex2-fieldset\">\n            <label className=\"ex2-field\">                  \n              <span className=\"ex2-label\">Name</span>\n              <input name=\"firstName\" className={ this.state.firstName ? \"ex2-input val\" : \"ex2-input\"} type=\"text\" placeholder=\"John Doe\" value={this.state.firstName} onChange={this.handleChange} />\n            </label>\n            <label className=\"ex2-field\">                  \n              <span className=\"ex2-label\">Email</span>\n              <input name=\"email\" className={ this.state.email ? \"ex2-input val\" : \"ex2-input\"} type=\"text\" placeholder=\"john@comp.any\" value={this.state.email} onChange={this.handleChange} />\n            </label>\n            <label className=\"ex2-field\">                  \n              <span className=\"ex2-label\">Phone</span>\n              <input name=\"phone\" className={ this.state.phone ? \"ex2-input val\" : \"ex2-input\"} type=\"text\" placeholder=\"+63 53242 32637\" value={this.state.phone} onChange={this.handleChange} />\n            </label>\n\n            <label className=\"ex2-field\">\n              {/* Render card component in combined-mode */}\n              <CardComponent ref={this.cardRef} className=\"ex2-input fieldset field\"\n                icon={cardIcon}\n                styles={styles}\n                classes={classes} \n              />\n            </label>\n          </div>\n          <button type=\"submit\" className={ this.state.loading ? \"submit ex2-button\" : \"ex2-button\"} onClick={this.tokenize}>Pay $x & Tokenize</button>\n          {this.state.error && <div className=\"error\" role=\"alert\">{this.state.error}</div>}\n          {this.state.token && <div className=\"token\" >{this.state.token}</div>}\n          <h4 className=\"title\" >Change theme: </h4>\n          <div className=\"theme-palette\" style={{marginTop: 15}}>\n            <button className=\"ex2-button primary-btn\" onClick={this.toggleCardIcon}>Icon</button> &nbsp;\n            <button id=\"theme-1\" className=\"ex2-button\" onClick={e => this.setTheme(e, 0)}>Theme1</button>\n            <button id=\"theme-2\" className=\"ex2-button\" onClick={e => this.setTheme(e, 1)}>Theme2</button>\n            <button id=\"theme-3\" className=\"ex2-button\" onClick={e => this.setTheme(e, 2)}>Theme3</button>\n            <button id=\"theme-4\" className=\"ex2-button\" onClick={e => this.setTheme(e, 3)}>Theme4</button>\n          </div>\n          <h4 className=\"title\" >Actions:</h4>\n          <div className=\"theme-palette\" style={{marginTop: 15}}>\n            <button className=\"ex2-button\" onClick={this.increaseFontSize}>+ Font size</button>\n            <button className=\"ex2-button\" onClick={this.decreaseFontSize}>- Font size</button>\n            <button className=\"ex2-button\" onClick={this.focus}>Focus</button>\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n\nconst THEMES = [\n  {\n    'main-bg': '#262E3A',\n    'secondary-bg': '#3e4b5b',\n    'main-text': '#fff',\n    'placeholder': '#939aa3',\n    'placeholder-focused': '#ccc',\n    'primary-btn': '#6EEDB6',\n    'btn-text': '#1C2026',\n    'primary-btn-focus': 'rgb(70, 203, 145)',\n    'invalid': '#FF7C4A',\n    'invalid-focused': '#e44d5f',\n    'invalid-placeholder': '#FFCCA5',\n  },\n  {\n    'main-bg': '#D5DBE7',\n    'secondary-bg': '#fff',\n    'main-text': '#000',\n    'placeholder': '#abacbe',\n    'placeholder-focused': '#abacbe',\n    'primary-btn': '#4773D2',\n    'btn-text': '#fff',\n    'primary-btn-focus': '#3361c3',\n    'invalid': '#E94745',\n    'invalid-focused': '#e44d5f',\n    'invalid-placeholder': '#FFCCA5'\n  },\n  {\n    'main-bg': '#fca571',\n    'secondary-bg': '#fff',\n    'main-text': '#252857',\n    'placeholder': '#9293AB',\n    'placeholder-focused': '#666',\n    'primary-btn': '#252857',\n    'btn-text': '#fff',\n    'primary-btn-focus': '#191c4a',\n    'invalid': '#E94745',\n    'invalid-focused': '#e44d5f',\n    'invalid-placeholder': '#FFCCA5'\n  },\n  {\n    'main-bg': '#544FB0',\n    'secondary-bg': '#fff',\n    'main-text': '#35A9BD',\n    'placeholder': 'ddd',\n    'placeholder-focused': '#ddd',\n    'primary-btn': '#35A9BD',\n    'btn-text': '#fff',\n    'primary-btn-focus': 'rgb(29, 138, 157)',\n  }\n]","import React, { Component } from 'react';\nimport {CardComponent, CardNumber, CardExpiry, CardCVV} from \"@chargebee/chargebee-js-react-wrapper\";\nimport './Example3.css'\n\nexport default class Example1 extends Component {\n  constructor(props) {\n    super(props);\n    \n    // Ref for card component\n    this.cardRef = React.createRef()\n    \n    this.state = {\n      token: \"\",\n      loading: false,\n      firstName: \"\",\n      \n      // To store validation error messages\n      errorMessage: \"\",\n      errors: {},\n\n      // options for card component\n      options: {\n        // Custom classes - applied on container elements based on field's state\n        classes: {\n          focus: 'focus',\n          invalid: 'invalid',\n          empty: 'empty',\n          complete: 'complete',\n        },\n\n        style: {\n          base: {\n            color: '#2a2d5b',\n            fontWeight: '500',\n            fontFamily: 'Raleway,-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue, sans-serif',\n            fontSize: '16px',\n            fontSmoothing: 'antialiased',\n\n            ':focus': {\n              // color: '#424770',\n            },\n\n            '::placeholder': {\n              color: '#9293AB',\n              fontSize: '14px',\n            },\n\n            ':focus::placeholder': {\n              color: '#666',\n            },\n          },\n          invalid: {\n            color: '#e41029',\n\n            ':focus': {\n              color: '#e44d5f',\n            },\n            '::placeholder': {\n              color: '#FFCCA5',\n            },\n          },\n        },\n\n        // locale\n        locale: 'en',\n\n        // Custom fonts\n        fonts: [\n          'https://fonts.googleapis.com/css?family=Raleway:300,500,600'\n        ]\n      },\n    }\n  }\n\n  tokenize = (e) => {\n    e.preventDefault();\n    this.setState({loading: true});\n    // Call tokenize method through card component's ref\n    this.cardRef.current.tokenize({}).then((data) => {\n      this.setState({loading: false, token: data.token, errorMessage: \"\"});\n    }).catch((error) => {\n      this.setState({loading: false, token: \"\", errorMessage: \"Problem while tokenizing your card details\"});\n    });\n  }\n\n  handleChange = (event) => {\n    const target = event.target;\n    const value = target.type === 'checkbox' ? target.checked : target.value;\n    const name = target.name;\n\n    this.setState({\n      [name]: value\n    });\n  }\n\n  // Method to trigger on card component ready\n  onReady = () => {\n    console.log('card component ready')\n  }\n\n  // Method to trigger on field focus\n  onFocus = (event) => {\n    console.log(event.field, 'focused')\n  }\n\n  // Method to trigger on field blur\n  onBlur = (event) => {\n    console.log(event.field, 'blurred')\n  }\n\n  setLocale = (e) => {\n    e.preventDefault();\n    const locale = e.target.id;\n    const options = this.state.options;\n    options.locale = locale;\n    this.setState({options});\n  }\n\n  // Validation error handling\n  onChange = (event) => {\n    const errors = this.state.errors;\n    let errorMessage = '';\n\n    if(event.error) {\n      // If error is present, display the error\n      errors[event.field] = event.error\n      errorMessage = event.error.message\n    } else {\n      errors[event.field] = null\n      // If there's no error, check for existing error\n      const _errors = Object.values(errors).filter(val => val)\n      \n      // The errorObject holds a message and code\n      // Custom error messages can be displayed based on the error code\n      const errorObj = _errors.pop();\n\n      // Display existing message\n      if(errorObj) errorMessage = errorObj.message\n      else errorMessage = ''\n    }\n    this.setState({\n      errors,\n      errorMessage,\n    })\n  }\n\n  render() {\n    const { firstName, loading, errorMessage, token } = this.state;\n    const { style, classes, locale, fonts } = this.state.options;\n    return (\n      <div className=\"ex3 container\">\n        <div className=\"ex3-wrap\">      \n          <form id=\"payment\">\n            <div className=\"ex3-contain\">\n              <div className=\"ex3-fieldset\">\n                <div className=\"ex3-field\">                  \n                    <input name=\"firstName\" className={ firstName ? \"ex3-input val\" : \"ex3-input\"} type=\"text\" placeholder=\"John Doe\" value={firstName} onChange={this.handleChange} />\n                    <i className=\"ex3-bar\"></i>                  \n                </div>\n                {/* Pass all options as props to card component */}\n                {/* Assign ref to call internal methods */}\n                <CardComponent ref={this.cardRef} \n                  styles={style} \n                  classes={classes} \n                  className=\"fieldset field\"\n                  locale={locale}\n                  fonts={fonts}\n                  onReady={this.onReady}\n                  onChange={this.onChange}\n                >       \n                  {/* ^ Attach ready, change listeners to card component */}       \n\n                  <div className=\"ex3-field\">   \n                    {/* Card number field */}\n                    <CardNumber className=\"ex3-input\" onFocus={this.onFocus} onBlur={this.onBlur}/>\n                    <i className=\"ex3-bar\"></i>                  \n                  </div>\n                  <div className=\"ex3-fields\">\n                    <div className=\"ex3-field\">                    \n                        {/* Card expiry field */}\n                        <CardExpiry className=\"ex3-input\" onFocus={this.onFocus} onBlur={this.onBlur}/>\n                        <i className=\"ex3-bar\"></i>                    \n                    </div>\n                    <div className=\"ex3-field\">                    \n                        {/* Card cvv field */}\n                        <CardCVV className=\"ex3-input\" onFocus={this.onFocus} onBlur={this.onBlur}/>\n                        <i className=\"ex3-bar\"></i>                 \n                    </div>\n                  </div>\n                </CardComponent>\n              </div>\n            </div>\n            <button className={ loading ? \"submit ex3-button\" : \"ex3-button\"} onClick={this.tokenize}>Pay $x & Tokenize</button>\n            {errorMessage && <div className=\"error\" role=\"alert\">{errorMessage}</div>}\n            {token && <div className=\"token\" >{token}</div>}\n            <h4 style={{marginTop: 30}}>Select Locale:</h4>\n            <div className=\"language-palette\" style={{marginTop: 15}}>\n              <button id=\"en\" className=\"ex3-button small\" onClick={this.setLocale}>EN</button>\n              <button id=\"fr\" className=\"ex3-button small\" onClick={this.setLocale}>FR</button>\n              <button id=\"es\" className=\"ex3-button small\" onClick={this.setLocale}>ES</button>\n              <button id=\"pt\" className=\"ex3-button small\" onClick={this.setLocale}>PT</button>\n              <button id=\"it\" className=\"ex3-button small\" onClick={this.setLocale}>IT</button>\n              <button id=\"de\" className=\"ex3-button small\" onClick={this.setLocale}>DE</button>\n            </div>\n          </form>\n        </div>\n      </div>\n    );\n  }\n}","import React, { Component } from 'react';\nimport { Switch, HashRouter as Router, Route } from \"react-router-dom\";\nimport Example1 from \"./components/example1/Example1.js\";\nimport Example2 from \"./components/example2/Example2.js\";\nimport Example3 from \"./components/example3/Example3.js\";\n\nclass App extends Component {\n  constructor(props) {\n    super(props)\n    window.Chargebee.init({\n      site: \"honeycomics-v3-test\",\n      publishableKey: \"test_qoH22RugUvm5IcxoqUD5Svdcu9mX5figf\"\n    })\n  }\n\n  render() {\n    return (\n      <Router basename=\"/react/\">\n        <Switch>\n          <Route path=\"/example1\" component={Example1} />\n          <Route path=\"/example2\" component={Example2} />\n          <Route path=\"/example3\" component={Example3} />\n          <Route exact path=\"/\" component={Example1} />\n        </Switch>\n      </Router>\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.1/8 is 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    .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.then(registration => {\n      registration.unregister();\n    });\n  }\n}\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport './index.css';\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":""}