Skip to content
Home

Bring

Info
Demos

Description

The Bring connector allows you to use the Bring API to:

PostalCode API

Here is an example of how to use the Bring Postal Code API to connect the PostalCodeAndCity field to a form.

First, create a context with the config:

import { Connectors, Field, Form } from '@dnb/eufemia/extensions/forms'


const { withConfig } = Connectors.createContext({
  fetchConfig: {
    url: (value, { countryCode }) => {
      return `[YOUR-API-URL]/.../${countryCode}/.../${value}`
      // Real-world example using Bring's Postal Code API's get postal code endpoint, directly without proxy:
      // return `https://api.bring.com/address/api/{countryCode}/postal-codes/{value}`
    },
  },
})

[YOUR-API-URL] is the URL of your own API endpoint that proxies the Bring Postal Code API with a token.

Supported countries

The Bring API for PostalCode supports the following countries, by its country codes:

NO, DK, SE, FI, NL, DE, US, BE, FO, GL, IS, SJ

Endpoints and response format

Ensure you use one of the following endpoints from Bring via your proxy API, returning a list of postal codes in the following format:

{
  "postal_codes": [
    {
      "postal_code": "1391",
      "city": "Vollen"
      ...
    }
  ]
}

How to verify a postal code

Use the context to create a validator based on the validator connector.

You can use it for an onChangeValidator or onBlurValidator (recommended), depending on your use case.

const onBlurValidator = withConfig(Connectors.Bring.postalCode.validator)


function MyForm() {
  return (
    <Form.Handler>
      <Field.PostalCodeAndCity
        postalCode={{
          path: '/postalCode',
          onBlurValidator,
        }}
      />
    </Form.Handler>
  )
}

How to autofill a city name based on a postal code

Use the context to create the onChange event handler based on the autofill connector.

const onChange = withConfig(Connectors.Bring.postalCode.autofill, {
  cityPath: '/city',
})


function MyForm() {
  return (
    <Form.Handler>
      <Field.PostalCodeAndCity
        postalCode={{
          path: '/postalCode',
          onChange,
        }}
        city={{
          path: '/city',
        }}
      />
      <Form.SubmitButton />
    </Form.Handler>
  )
}

Verify a postal code

This demo contains only a mocked API call, so only a postal code of 1391 for Norway and 11432 for Sweden is valid.

Code Editor
const { withConfig } = Connectors.createContext({
  fetchConfig: {
    url: async (value, { countryCode }) => {
      await mockFetch(countryCode, getMockDataPostalCode(countryCode))
      return `[YOUR-API-URL]/${value}`
    },
  },
})
const onBlurValidator = withConfig(Connectors.Bring.postalCode.validator)
const onBlur = withConfig(Connectors.Bring.postalCode.autofill, {
  cityPath: '/city',
})
render(
  <Form.Handler onSubmit={console.log}>
    <Form.Card>
      <Field.PostalCodeAndCity
        countryCode="/countryCode"
        postalCode={{
          path: '/postalCode',
          onBlurValidator,
          onBlur,
          required: true,
        }}
        city={{
          path: '/city',
          required: true,
        }}
      />
      <Field.SelectCountry
        path="/countryCode"
        defaultValue="NO"
        filterCountries={({ iso }) => ['NO', 'SE'].includes(iso)}
      />
    </Form.Card>
    <Form.SubmitButton />
  </Form.Handler>,
)

Address Suggestions API

Here is an example of how to use the Bring Address API to connect the Address field to a form.

First, create a context with the config:

import { Connectors, Field, Form } from '@dnb/eufemia/extensions/forms'


const { withConfig } = Connectors.createContext({
  fetchConfig: {
    url: (value, { countryCode }) => {
      return `[YOUR-API-URL]/.../${countryCode}/.../${value}`
      // Real-world example using Bring's Address API's get address endpoint, directly without proxy:
      // return `https://api.bring.com/address/api/{countryCode}/addresses/suggestions?q=${value}`
    },
  },
})

Then create an element that will be used to render the autocomplete component to show the suggestions.

const addressSuggestionsElement = withConfig(
  Connectors.Bring.address.suggestionsElement,
  {
    countryCode: '/countryCode', // Can be "NO" or a path
    cityPath: '/city',
    postalCodePath: '/postalCode',
  },
)

And use the element in the Address field:

function MyForm() {
  return (
    <Form.Handler>
      <Field.Address.Street
        path="/streetAddress"
        element={addressSuggestionsElement}
      />
    </Form.Handler>
  )
}

Populate data to PostalCodeAndCity

You can auto fill the address fields based on the selected address.

function MyForm() {
  return (
    <Form.Handler>
      <Field.Address.Street
        path="/streetAddress"
        element={addressSuggestionsElement}
      />


      <Field.PostalCodeAndCity
        postalCode={{ path: '/postalCode' }}
        city={{ path: '/city' }}
      />
    </Form.Handler>
  )
}

Supported countries

The Bring API for Address supports the following countries, by its country codes:

NO

Endpoints and response format

Ensure you use one of the following endpoints from Bring via your proxy API, returning a list of addresses in the following format:

{
  "addresses": [
    {
      "address_id": "1398742",
      "street_name": "Gransvea",
      "house_number": 37,
      "postal_code": "1391",
      "city": "Vollen",
      "county": "Akershus",
      "municipality": "Asker",
      "type": "STREET"
    }
  ]
}

Translations

More info about translations can be found in the general localization and Eufemia Forms localization docs.

Keynb-NOen-GBsv-SEda-DK
StreetAddress.suggestionPlaceholderSkriv inn adressenEnter an addressAnge en adressIndtast en adresse

Address suggestion demos

This demo contains only a mocked API call, so you can enter anything in the Street field.

Code Editor
const { withConfig } = Connectors.createContext({
  fetchConfig: {
    url: async (value, { countryCode }) => {
      await mockFetch(countryCode, getMockDataAddress(countryCode))
      return `[YOUR-API-URL]/${value}`
    },
  },
})
const addressSuggestionsElement = withConfig(
  Connectors.Bring.address.suggestionsElement,
  {
    countryCode: '/countryCode',
    cityPath: '/city',
    postalCodePath: '/postalCode',
  },
)
render(
  <Form.Handler onSubmit={console.log}>
    <Form.Card>
      <Field.Address.Street
        path="/streetAddress"
        element={addressSuggestionsElement}
      />
      <Field.PostalCodeAndCity
        countryCode="/countryCode"
        postalCode={{
          path: '/postalCode',
          required: true,
        }}
        city={{
          path: '/city',
          required: true,
        }}
      />
      <Field.SelectCountry
        path="/countryCode"
        defaultValue="NO"
        filterCountries={({ iso }) => ['NO', 'SE'].includes(iso)}
      />
    </Form.Card>

    <Form.SubmitButton />
  </Form.Handler>,
)