@dhl-parcel/track-and-trace
    TypeScript icon, indicating that this package has built-in type declarations

    2.5.6 • Public • Published

    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

    Keywords

    none

    Install

    npm i @dhl-parcel/track-and-trace

    DownloadsWeekly Downloads

    241

    Version

    2.5.6

    License

    UNLICENSED

    Unpacked Size

    4.97 MB

    Total Files

    8

    Last publish

    Collaborators

    • gerbrand
    • snkjscom
    • dhl-parcel-ci
    • toebez
    • jandegroot