# Comparison Components

[![Owners](https://img.shields.io/badge/Owner-SEO%20PRODUCT%20Team-blue.svg?logo=slack&longCache=true&style=for-the-badge)](https://wise.enterprise.slack.com/archives/C8ZQB918X)


React components for Comparison.

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

The comparison components are currently used in multiple places including:
- [Homepage](https://github.com/transferwise/multi-currency-account-homepage).
- [send-flow](https://github.com/transferwise/send-flow).
- [currency-converter](https://github.com/transferwise/seo-landing-pages/).
- 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](https://github.com/transferwise/widgets/blob/master/README.md) 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](https://volta.sh/) to assist in setting Node version.
but feel free to use another tool, or set the node version manually.

### Example:

```javascript
// 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.

```bash
$ 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](./src/localisation/I18n.md)

## Contributing
1. Make your changes.
2. We automatically assign a reviewer to your PR but if it's urgent then post to [comparison-dev-public](https://wise.slack.com/archives/C5VRAGYQ1) channel for code review.
3. Create a changeset to describe your changes (see [Versioning](#versioning) section below).
4. Test your changes in storybook and validate chromatic changes.

## Versioning
This project uses [Changesets](https://github.com/changesets/changesets) to manage versioning and changelogs.

When you make a change that needs to be published:

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

For more details, see the [Changesets documentation](./docs/CHANGESETS.md).

## Releasing
1. Get your PR approved - we automatically assign a reviewer to your PR or ask for a review in [comparison-dev-public](https://wise.slack.com/archives/C5VRAGYQ1).
2. Merge the PR to master
3. 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](./docs/TRACKING.md).