Walletsaver-address-search-v2 NPM

General info

NEW VERSION OF COMPONENT IS DEPLOYED TO walletsaver-address-search-v2 NPM REPO (it uses new BC API)

If you are integrating this component in a React app, see "How to integrate with a react app" below. Otherwise, see "How to integrate (non-react app)".

Testing and product demo distribution

The project uses Firebase Hosting for a few demo webpages. /example dir has all the files deployed to the hosting. Mostly, it's used for demo pages which we send to the clients to give a try of the service. There are also test pages: prod.html and dev.html, which uses PROD/DEV verisons BC API.

Shared docs

How to integrate (non-react app)

Shared Gists created for partners:

How to integrate (non-react app)

Adding the component

You need to add the CSS and script tags with the address autocomplete component like this:

<script src="https://walletsaver-address-search-v2.s3.eu-central-1.amazonaws.com/prod/js/ws-addr-search-bundle.min.js"></script>
<script>WSAddressSearch.config = {'api_key': "N9QndvQZLs4zY6kCilQSxrCZXXyHMpB28jO9Z1t1",'env': 'prod','user': 'tariffa'}</script>

And, where you want the autocomplete component, you should add a div like this:

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

The component will be automatically rendered inside this div.

Configurations

After the inclusion of the library, you can define some configurations using WSAddressSearch.config object, like this:

WSAddressSearch.config = {
    "api_key": "N9QndvQZLs4zY6kCilQSxrCZXXyHMpB28jO9Z1t1",
    'env': 'prod',
    'user': 'tariffa'
};

api_key - API for Broadband coverage REST API used by web component
env - type of environment to use (default: prod)
user - name of the user for component authentification

Events

After the inclusion of the library, you can listen for events in the component using

WSAddressSearch.addEventListener('event', function(value) {
  // Do whatever is needed
});

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, Milano, Milano",
  "number": "20"
}
```
The content is exactly what user typed.
address-selected
Once the user finishes typing and selecting both the street and the number, right before the component calls the API to fetch availability, this event is triggered.
This event is useful to show a loading animation or something similar to the user, in order to let him know that the availability is being fetched.
The callback function will be called with the following parameter:
```
{
  "street": {"id": 146223, "description": "Corso Italia, Milano, Milano"},
  "number": {"id": "22", "description":"22"}
}
```
The content is the address components in Walletsaver's system.

landline-availability-ready

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

The JSON is the complete availability. It includes:

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

Here is an example of event received by the callback:

{
  "carriers": [
    {
      "name": "tim",
      "url": "https://www.tim.it",
      "img": "https://walletsaver-filesupload.s3.amazonaws.com/media/carrier_imgs/TIM_300x300.png",
      "adsl": 20,
      "fttc": 200,
      "ftth": 1000,
      "fwa": 0
    },
    {
      "name": "fastweb",
      "url": "https://www.fastweb.it",
      "img": "https://walletsaver-filesupload.s3.amazonaws.com/media/carrier_imgs/Fastweb_300x300.png",
      "adsl": 20,
      "fttc": 200,
      "ftth": 0,
      "fwa": 0,
      "is_openfiber": "true"
    },
    {
      "name": "vodafone",
      "url": "https://www.vodafone.it",
      "img": "https://walletsaver-filesupload.s3.amazonaws.com/media/carrier_imgs/Vodafone_300x300.png",
      "adsl": 20,
      "fttc": 200,
      "ftth": 0,
      "fwa": 0,
      "is_openfiber": "true"
    },
    {
      "name": "wind infostrada",
      "url": "https://www.infostrada.it",
      "img": "https://walletsaver-filesupload.s3.amazonaws.com/media/carrier_imgs/infostrada_300x300.png",
      "adsl": 20,
      "fttc": 200,
      "ftth": 0,
      "fwa": 0,
      "is_openfiber": "true"
    },
    {
      "name": "tiscali mobile",
      "url": "https://casa.tiscali.it",
      "img": "https://walletsaver-filesupload.s3.amazonaws.com/media/carrier_imgs/Tiscali_NEW_300x300.png",
      "adsl": 20,
      "fttc": 200,
      "ftth": 1000,
      "fwa": 0,
      "is_openfiber": "true"
    },
    {
      "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": 30
    },
    {
      "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
    },
    {
      "name": "tre",
      "url": "https://www.tre.it/",
      "img": "https://walletsaver-filesupload.s3.amazonaws.com/media/carrier_imgs/Tre_300x300.png",
      "adsl": 20,
      "fttc": 200,
      "ftth": 0,
      "fwa": 0,
      "is_openfiber": "true"
    }
  ],
  "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": 67,
          "expected_download_max": 83,
          "expected_upload_min": 20,
          "expected_upload_max": 30,
          "active": "true"
        },
        {
          "nominal_max": 200,
          "expected_download_min": 83,
          "expected_download_max": 100,
          "expected_upload_min": 20,
          "expected_upload_max": 30,
          "active": "true"
        }
      ]
    },
    {
      "technology": "FTTH",
      "speed": [
        {
          "nominal_max": 1000,
          "active": "true"
        }
      ]
    },
    {
      "technology": "FWA",
      "speed": [
        {
          "nominal_max": 30,
          "active": "true"
        }
      ]
    }
  ],
  "meta-data": {
    "distance": {
      "cabinet": 206,
      "central": 650,
      "tower": 1000
    }
  }
}

How to integrate with a React app

In your app project, run yarn add walletsaver-address-search-v2

Import the address search component:

import { AddressSearch } from 'ws-address-search';

Place the component where you wish to use it:
```
<AddressSearch
    apiKey="N9QndvQZLs4zY6kCilQSxrCZXXyHMpB28jO9Z1t1"
    onAddressChange={this.onAddressChange.bind(this)}
    onAddressSelected={this.onAddressSelected.bind(this)}
    onLandlineAvailabilityReady={this.onLandlineAvailabilityReady.bind(this)}
    streetInputText="Default street name"
    numberInputText="22"
/>
```
Properties:
- apiKey: Mandatory. The API key used to connect to backend services
- onAddressChange: Callback to be called when user types something in the input boxes
- onAddressSelected: Callback to be called when the user finishes selecting an address
- onLandlineAvailabilityReady: Callback that will receive the API data for availability
- streetInputText: Initial text of street field (optional)
- numberInputText: Initial text of civic number field (optional)
You also need to add the styles to your project. The stylesheet is provided in this package as a SCSS file.
You can just import it in your own SCSS stylesheet, as following: @import 'walletsaver-address-search-v2/src/js/components/styles';.
Then, customise the stylesheet it as you need.

Implement the methods to listen for the events that will happen in the AddressSearch component, like this:

    onAddressChange({ typed }) {
      console.log('address changed: ', typed.street, typed.number);
    }

    onAddressSelected({ street, number }) {
      console.log('address selected', street, number);
    }

    onLandlineAvailabilityReady(availabilityData) {
      console.log('availability data', availabilityData);
    }

Creating new partner

SSH instance
Run docker-compose exec pico python manage.py shell
Then:

from wscore.models import Partner
p = Partner.objects.create(name='ComparaERisparmia')

from wsauth.models import WSUser
u = WSUser.objects.create(username='impetum', partner=p)
u.set_password('1111')
u.save()

from django.contrib.auth.models import Permission
perm = Permission.objects.get(codename='can_check_address')
u.user_permissions.add(perm)
u.save()

from wspartner.models import PartnerToken

PartnerToken.objects.create(partner=p, user=u, key='LAMBDA_API_KEY')