Using Belco Messenger in React

import React, {useState, useEffect} from 'react'

export const BelcoWidget = ({config, userId, onLoad, onReady, onStatusChanged}) => {
  const [initialized, setInitialized] = useState(false)

  const init = () => {
    setInitialized(true)

    if (typeof onLoad === 'function') {
      onLoad()
    }
  }

  useEffect(() => {
    if (document.getElementById('belco-js')) {
      // already loaded
      return init()
    }

    !function(n,o){var e=window.belcoFunction||"Belco";window[e]||(window[e]=function(n){if(void 0===window[e][n])throw new Error("Unknown method");return window[e][n].apply(window[e],Array.prototype.slice.call(arguments,1))}),window[e]._q=[];for(var i=["init","sync","track","page","open","close","toggle","on","once","off","anonymousId","customer","reset","sendMessage"],t=function(n){return function(){var o=Array.prototype.slice.call(arguments);return o.unshift(n),window[e]._q.push(o),window[e]}},w=0;w<i.length;w++){var r=i[w];window[e][r]=t(r)}window[e].load=function(e){if(!n.getElementById("belco-js")){var i=n.createElement(o);i.async=!0,i.id="belco-js",i.type="text/javascript",i.src="//cdn.belco.io/v2/widget.js",i.onload=function(n){"function"==typeof e&&e(n)};var t=n.getElementsByTagName(o)[0];t.parentNode.insertBefore(i,t)}},window.belcoConfig&&window[e].load(function(){window[e]("init",window.belcoConfig)})}(document,"script");

    window.Belco.load(init)
  }, [])

  useEffect(() => {
    if (config) {
      Belco.init(config)
    } else {
      console.error('Config is required to init Belco')
    }
  }, [initialized, config])

  useEffect(() => {
    // Reset widget when users log out
    if (!userId) {
      Belco.reset()
    }
  }, [userId])

  useEffect(() => {
    if (onReady) {
      Belco.on('ready', onReady)
    }

    return () => {
      if (onReady) {
        Belco.off('ready', onReady)
      }
    }
  }, [onStatusChanged])

  useEffect(() => {
    if (onStatusChanged) {
      Belco.on('status-changed', onStatusChanged)
    }

    return () => {
      if (onStatusChanged) {
        Belco.off('status-changed', onStatusChanged)
      }
    }
  }, [onStatusChanged])
}

import React from 'react'
import {BelcoComponent} from './BelcoComponent'

const App = () => {
  <BelcoWidget config={{shopId: 'abc'}} />
}

import React from 'react'
import {BelcoComponent} from './BelcoComponent'

const App = () => {
  const userId = '1337' // user id from current session
  const config = {
    shopId: 'abc',
    id: userId,
    hash: '123', // needs to be generated serverside to verify the init call is from a trusted source
    email: '[email protected]',
    firstName: 'Elliot',
    lastName: 'Alderson'
  }

  const onLoad = () => {
    // now window.Belco is available

    Belco.track('Order Completed', {
      number: '1337',
      date: new Date(),
      total: 100
    })
  }

  // called after Belco.init has been succesful
  const onReady = () => {

  }

  const onStatusChanged = ({status}) => {
    console.log(status)
  }

  return (
    <BelcoWidget
      config={config}
      userId={userId}
      onLoad={onLoad}
      onReady={onReady}
      onStatusChange={onStatusChanged}
    />
  )
}