@dhl-parcel/track-and-trace
v2.5.6
Published
DHL Parcel Track & Trace Component.
Downloads
315
Keywords
Readme
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
- 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. - 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. - Add a
div
withid="dhl-track-and-trace-component"
where you want the web component to appear. - 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
npm install @dhl-parcel/track-and-trace --save
- Install the required
peerDependencies
- 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
- Clone the repo
- From the root folder run
npm install
- Serve the app with
npm start
- 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
- Run
npm run build
- Optionally, run
npm run start:production
to verify the build locally - 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