# broadband-coverage-address-search

> For changelog, see CHANGELOG.md file

Latest version **2.3.1** (published 2021-04-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install broadband-coverage-address-search
pnpm add broadband-coverage-address-search
yarn add broadband-coverage-address-search
bun add broadband-coverage-address-search
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.3.1 |
| Published | 2021-04-14 |
| First published | 2020-10-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 10 |
| Unpacked size | 125.3 KB |
| Known vulnerabilities | 0 (+25 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | ct-val |

## Links

- npm: https://www.npmjs.com/package/broadband-coverage-address-search
- npm.io page: https://npm.io/package/broadband-coverage-address-search

## Dependencies (10)

- [npm](https://npm.io/package/npm.md) ^6.0.0
- [axios](https://npm.io/package/axios.md) ^0.17.1
- [react](https://npm.io/package/react.md) ^16.2.0
- [redux](https://npm.io/package/redux.md) ^3.7.2
- [react-dom](https://npm.io/package/react-dom.md) ^16.2.0
- [react-redux](https://npm.io/package/react-redux.md) ^5.0.6
- [redux-thunk](https://npm.io/package/redux-thunk.md) ^2.2.0
- [redux-logger](https://npm.io/package/redux-logger.md) ^2.6.1
- [redux-promise](https://npm.io/package/redux-promise.md) ^0.5.3
- [command-line-args](https://npm.io/package/command-line-args.md) ^5.1.1

## Recent versions

- 2.3.1 (latest) — 2021-04-14
- 2.2.3 — 2020-10-08

## README

<p align="center">
  <img src="https://monosnap.com/image/DpJUpUj6AnShQYyU1DlJ3zPBKfY3EJ" width="300" alt="">
</p>

## Broadband coverage - Web component
<img src="https://monosnap.com/image/5pcUMUluWxIphvu8mRGkjys1Akko2Z" width="50%">

### How to integrate (non-react app)

1. Add the component

    Add the script tags with the address autocomplete component:
    
    ```html
    <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](https://www.npmjs.com/package/broadband-coverage-address-search) (current latest - `2.3.1`)
    
    The component will be automatically rendered inside this `div` with `data-role="ws-address-search"`.
    
    ```html
    <div data-role="ws-address-search"></div>
    ```

2. Receive events
    
    Listen for events of the component:
    
    ```js
    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:
    
        ```json
        {
            "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:
    
        ```json
        {
            "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:
        <details>
          <summary>Expand</summary>
          
        ```json5
        {
          "carriers": [
            {
              "name": "tim",
              "url": "https://www.tim.it",
              "img": "https://walletsaver-filesupload.s3.amazonaws.com/media/carrier_imgs/TIM_300x300.png",
              "adsl": 20,
              "fttc": 100,
              "ftth": 0,
              "fwa": 0,
              "is_openfiber": false,
              "is_openfiber_aree_bianche": false
            },
            {
              "name": "fastweb",
              "url": "https://www.fastweb.it",
              "img": "https://walletsaver-filesupload.s3.amazonaws.com/media/carrier_imgs/Fastweb_300x300.png",
              "adsl": 20,
              "fttc": 100,
              "ftth": 0,
              "fwa": 0,
              "is_openfiber": false,
              "is_openfiber_aree_bianche": false
            },
            {
              "name": "vodafone",
              "url": "https://www.vodafone.it",
              "img": "https://walletsaver-filesupload.s3.amazonaws.com/media/carrier_imgs/Vodafone_300x300.png",
              "adsl": 20,
              "fttc": 100,
              "ftth": 0,
              "fwa": 0,
              "is_openfiber": false,
              "is_openfiber_aree_bianche": false
            },
            {
              "name": "windtre",
              "url": "https://www.windtre.it/",
              "img": "https://walletsaver-filesupload.s3.amazonaws.com/media/carrier_imgs/WindTre_300x300.png",
              "adsl": 7,
              "fttc": 100,
              "ftth": 0,
              "fwa": 0,
              "is_openfiber": false,
              "is_openfiber_aree_bianche": false
            },
            {
              "name": "tiscali mobile",
              "url": "https://casa.tiscali.it",
              "img": "https://walletsaver-filesupload.s3.amazonaws.com/media/carrier_imgs/Tiscali_NEW_300x300.png",
              "adsl": 0,
              "fttc": 0,
              "ftth": 0,
              "fwa": 0,
              "is_openfiber": false,
              "is_openfiber_aree_bianche": false
            },
            {
              "name": "eolo",
              "url": "https://www.eolo.it",
              "img": "https://walletsaver-filesupload.s3.amazonaws.com/media/carrier_imgs/Eolo_300x300.png",
              "adsl": 0,
              "fttc": 0,
              "ftth": 0,
              "fwa": 0,
              "is_openfiber": false,
              "is_openfiber_aree_bianche": false
            },
            {
              "name": "linkem",
              "url": "http://web.linkem.com",
              "img": "https://walletsaver-filesupload.s3.amazonaws.com/media/carrier_imgs/Linkem_300x300.png",
              "adsl": 0,
              "fttc": 0,
              "ftth": 0,
              "fwa": 30,
              "is_openfiber": false,
              "is_openfiber_aree_bianche": false
            },
            {
              "name": "melita",
              "url": "https://www.melita.it/",
              "img": "https://walletsaver-filesupload.s3-eu-west-1.amazonaws.com/media/carrier_imgs/Melita_NEW_300x300.png",
              "adsl": 0,
              "fttc": 0,
              "ftth": 0,
              "fwa": 0,
              "is_openfiber": false,
              "is_openfiber_aree_bianche": false
            },
            {
              "name": "sky",
              "url": "https://www.sky.it/sky-wifi-fibra",
              "img": "https://walletsaver-filesupload.s3-eu-west-1.amazonaws.com/media/carrier_imgs/Sky_300x300.png",
              "adsl": 0,
              "fttc": 0,
              "ftth": 0,
              "fwa": 0,
              "is_openfiber": false,
              "is_openfiber_aree_bianche": false
            },
            {
              "name": "sorgenia",
              "url": "https://www.sorgenia.it/offerta-fibra",
              "img": "https://walletsaver-filesupload.s3-eu-west-1.amazonaws.com/media/carrier_imgs/Sorgenia_300x300.png",
              "adsl": 0,
              "fttc": 0,
              "ftth": 0,
              "fwa": 0,
              "is_openfiber": false,
              "is_openfiber_aree_bianche": false
            }
          ],
          "coverage": [
            {
              "technology": "ADSL",
              "speed": [
                {
                  "nominal_max": 20,
                  "expected_download_min": 13.5,
                  "expected_download_max": 16.6,
                  "expected_upload_min": 0.1,
                  "expected_upload_max": 1.5,
                  "active": "true"
                }
              ]
            },
            {
              "technology": "FTTC",
              "speed": [
                {
                  "nominal_max": 100,
                  "expected_download_min": 40,
                  "expected_download_max": 67,
                  "expected_upload_min": 0,
                  "expected_upload_max": 20,
                  "active": "true"
                }
              ]
            },
            {
              "technology": "FTTH",
              "speed": []
            },
            {
              "technology": "FWA",
              "speed": [
                {
                  "nominal_max": 30,
                  "active": "true"
                }
              ]
            }
          ],
          "meta-data": {
            "distance": {
              "cabinet": 566,
              "central": 707,
              "tower": 2000
            }
          }
        }
        ```
        </details>

### 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:

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

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

    ```js
    <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:

    ```js
    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);
    }
    ```

---
_Source: https://npm.io/package/broadband-coverage-address-search · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._