@dhl-parcel/track-and-trace

DHL Parcel Track & Trace

This project is built with React and serves as a web component for usage in multiple kinds of applications.

Usage for clients

1. Include <link type="text/css" rel="stylesheet" href="https://track-and-trace.dhlparcel.nl/track-and-trace.css"> in the HTML code of your application, preferably just before the closing </head> tag.
2. Include <script type="text/javascript" src="https://track-and-trace.dhlparcel.nl/track-and-trace.js"></script> in the HTML code of your application, preferably just before the closing </body> tag. Alternatively, to prevent styling collisions, include <script type="text/javascript" src="https://track-and-trace.dhlparcel.nl/track-and-trace-iframe.js"></script> to load the component wrapped in an iframe instead.
3. Add a div with id="dhl-track-and-trace-component" where you want the web component to appear.
4. If applicable, add the following options to your div:

<div
  id="dhl-track-and-trace-component"
  data-tracking-code="some tracking code"
  data-postcode="some postcode"
  data-locale="some locale"
></div>

None of the data- attributes are required. If they are not present, the values will be extracted from the query string part of the host URL instead, where tc (or tt) maps to data-tracking-code, pc maps to data-postcode and lc maps to data-locale. In this use case, only a tc (or tt) is required, pc and lc are optional.

Valid keys for the optional data-locale are en-BE, en-ES, en-NL, en-PT, es-ES, fr-BE, nl-BE, nl-NL or pt-PT. Defaults to en-NL.

Example: https://www.example.com?tc=TRACKING_CODE&pc=POSTCODE&lc=en-NL

Usage for developers

1. npm install @dhl-parcel/track-and-trace --save
2. Install the required peerDependencies
3. Add the component to your React application. NOTE: make sure you always wrap the component in a tag that contains id="dhl-track-and-trace-component", otherwise the styles will not apply (they are scoped under this id to prevent them from leaking to the rest of the app). For example:

import React from 'react'
import { render } from 'react-dom'
import TrackTraceComponent from '@dhl-parcel/track-and-trace'

render(
  <TrackTraceComponent
    trackingCode={'your tracking code'}
    postcode={'your postcode'}
    locale="en-NL"
  />,
  document.getElementById('dhl-track-and-trace-component')
)

or:

import React from 'react'
import TrackTraceComponent from '@dhl-parcel/track-and-trace'

const App = () => (
  <div id="dhl-track-and-trace-component">
    <TrackTraceComponent
      trackingCode={'your tracking code'}
      postcode={'your postcode'}
      locale="en-NL"
    />
  </div>
)

Install for development

1. Clone the repo
2. From the root folder run npm install
3. Serve the app with npm start
4. Optionally, run npm run styleguide to view the app styleguide

Formatting

• Run npm run fix:format

Linting

• Run npm run fix:lint

Type checking

• Optionally, run npm run flow-typed
• Run npm run type-check
• Optionally, run npm run flow:generate-module-name-mappers to update .flowconfig

Testing

• Run npm test
• Optionally, run npm run test:update to update the snapshots

Deploy for development

1. Run npm run build
2. Optionally, run npm run start:production to verify the build locally
3. To test using Cypress, run steps 1 and 2 first, then npm run e2e:open

Notes

• Pass in &env=accept to the URL to retrieve data from the accept environment
• Pass in &debug=true to the URL to enter time travelling mode