@transferwise/comparison-components

Comparison Components

React components for Comparison.

• Comparison Table:
  Shows a comparison table of providers given a route and amount without showing any inputs.
• Comparison:
  Shows the comparison table with inputs provided for the route and amount.

The comparison components are currently used in multiple places including:

• Homepage.
• send-flow.
• currency-converter.
• multiple blog posts and external websites that use comparison-components as a widget.

Usage

Web Widget / Universal Loader™

The easiest way to use Comparison Components within an application is by using the Web Widget / Universal Loader™. Please see the docs here for more details.

NPM module

Alternatively, you can install this React widget as an npm module running:

yarn add @transferwise/comparison-components

Development

Written using React and built using Webpack and rollup.

To see and develop with the components locally run yarn storybook.

The demo page contains the two different components Comparison and Table, one underneath the other.

We are currently using node 16 as a limitaion of working with webpack 4, so we use Volta to assist in setting Node version. but feel free to use another tool, or set the node version manually.

Example:

// example/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Comparison } from '../src/';

const Root = () => {
  return (
    <div>
      <Comparison
        sourceCurrency="EUR"  // required
        targetCurrency="GBP"  // required
        sendAmount={5000} // required
        source="EUR"  // deprecated
        target="GBP"  // deprecated
        amount={5000} // deprecated
        providers={['transferwise', 'deutsche-bank', 'commerzbank']}
        sourceCountry="de"
        providerCountry="de"
        maxVisibleProviders={5}
        expandDisclaimer
        affiliateLink="http://transferwise.evyy.net/c/111111/22222/333"
      />
    </div>
  );
};

ReactDOM.render(<Root />, document.getElementById('root'));

• lang: string ISO 639-1. Default en
• sourceCountry: string ISO 3166-1 alpha-2. Filter results by source country. i.e the origin country from where a user may want to send money from.
• providerCountry: string ISO 3166-1 alpha-2. Filter by provider country. i.e the country which the provider belongs to (e.g Natwest - GB, ANZ - AU). This property is also useful for only showing national banks, rather than "global" providers (like Western Union, Moneygram etc)
• maxVisibleProviders: number by default shows 3 providers and the rest are hidden under Show more providers link.
• expandDisclaimer: boolean will render the table with the disclaimer already opened and scrolls the element into the visible area of the browser window
• affiliateLink: string Affiliate tracking link.
• trackEvent: func(eventName, trackingAttributes) is called on user interaction with the table and other table based events (for example, user changes the send amount or views at least 50% of the table).
• trackLeavePageEvent: func(eventName, trackingAttributes, callback) is called on page exit events (for example, on click to CTA).

All attributes are valid for <Comparison /> <ComparisonTable /> components

Tasks

yarn storybook                    - runs storybook on 9001
yarn test                         - runs `jest` for Comparison Table
yarn run build-web                - compiles the standalone comparison widget
yarn run build-npm                - compiles UMD and ES bundles for distribution on NPM 

Do not forget to update the version number in package.json when committing changes.

Bundle analysis

The project has webpack-bundle-analyzer and rollup-plugin-visualizer set up to inspect the compiled bundle files. They can be accessed by setting the environment variable ANALYZE and running the build command as normal.

$ ANALYZE=true yarn build-web
# Note this will open several browser tabs, one for each bundle
$ ANALYZE=true yarn build-npm

Creating a new component

To create a new Comparison Component that can be imported by others, the following changes are required:

• Create your component as the default export of ~/src/new-component
• Create a .stories.js file in the folder to show the component in Storybook
• ~/src/index.js: make the component a named export
• Translations:
• ~/rollup.config.js: add a new input
• ~/webpack.config.npm.umd.js: add a new componentEntry()
• ~/CODEOWNERS.md: make comparison team and your team owners of the ~/src/new-component folder
• Follow the normal versioning process, outlined in the PR template

Translations

How translations working in comparison components

Contributing

• Make your changes.
• We automatically assign a reviewer to your PR but if it's urgent then post to comparison-dev-public channel for code review.
• Create a changeset to describe your changes (see Versioning section below).
• Test your changes in storybook and validate chromatic changes.

Versioning

This project uses Changesets to manage versioning and changelogs.

When you make a change that needs to be published:

• Run yarn changeset to create a changeset
• Select the type of version change (major, minor, patch)
• Write a description of the change that will be added to the CHANGELOG.md

For more details, see the Changesets documentation.

Releasing

• Get your PR approved - we automatically assign a reviewer to your PR or ask for a review in comparison-dev-public.
• Merge the PR to master
• The GitHub Actions workflow will automatically:
  • Process all changesets
  • Update package.json version
  • Update CHANGELOG.md
  • Update prod-current-version
  • Publish to npm
  • Deploy to S3

Tracking

Read more about how tracking is working here.