broadband-coverage-address-search v2.3.1

Broadband coverage - Web component

How to integrate (non-react app)

1. Add the component

   Add the script tags with the address autocomplete component:

   <script src="https://bc-web-component.s3.eu-south-1.amazonaws.com/prod/version/js/ws-addr-search-bundle.min.js"></script>
   <script>
   WSAddressSearch.config = {
       "api_key": "api_key",
       'env': 'prod',
       'user': 'user',
       'endpoint': '/v1/coverage_extended'
   };
   </script>

   • api_key - API for Broadband coverage REST API used by web component (provided on demand)
   • user - name of the custommer (e.g.: Google if your company is Google)
   • version - version of the product (current latest - 2.3.1)

   The component will be automatically rendered inside this div with data-role="ws-address-search".

   <div data-role="ws-address-search"></div>

2. Receive events

   Listen for events of the component:

   WSAddressSearch.addEventListener('event', function(value) {
     // use value as a result
   });

   Where 'event' can be one of the following event types:

   • address-changed

     Every time the user types something, this event will be triggered with one parameter:

     {
         "street": "Corso Italia 1, Crosia"
     }

     The content is exactly what user typed.

   • address-selected

     This event is triggered once the user finishes typing and select the address, right before the component calls the API to fetch coverage.

     It's useful to show a loading animation or something similar to the user, in order to let him know that the coverage is being fetched.

     The callback function will be called with the following parameter:

     {
         "street": {"id": "38001031933", "description": "Corso Italia, Crosia"},
         "number": {"id": 380100189806848, "description": "1"}
     }

   • landline-availability-ready

     This event is triggered once the coverage of landlines of carriers is ready.

     The JSON is the complete coverage:

     • carriers - The list of carriers, max speed per technology and list of available technologies
     • coverage - Technologies with details about max speed, estimated speed

     • meta-data - Cabinet, central and tower (approximated) distance when available

       An example of event received by the callback:

How to integrate with a React JS app

1. In your app project, run yarn add broadband-coverage-address-search

2. Import the address search component:

   import { AddressSearch } from 'broadband-coverage-address-search';

3. Place the component where you wish to use it:

   <AddressSearch
       apiKey="api_key"
       onAddressChange={this.onAddressChange.bind(this)}
       onAddressSelected={this.onAddressSelected.bind(this)}
       onLandlineAvailabilityReady={this.onLandlineAvailabilityReady.bind(this)}
   />

   Properties:

   • apiKey - The api_key used to connect to backend services (mandatory)
   • onAddressChange - Callback to be called when user types something in the input boxes (optional)
   • onAddressSelected - Callback to be called when the user finishes selecting an address (optional)
   • onLandlineAvailabilityReady - Callback that will receive the API data for coverage (optional)

4. Implement the methods to listen for the events:

   onAddressChange({ typed }) {
     console.log('address changed: ', typed.street, typed.number);
   }
   
   onAddressSelected({ street, number }) {
     console.log('address selected', street, number);
   }
   
   onLandlineAvailabilityReady(coverage) {
     console.log('coverage info', coverage);
   }