@transferwise/comparison-components 17.1.11 → 17.1.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/comparison-components",
-  "version": "17.1.11",
+  "version": "17.1.15",
   "description": "Display a comparison table of providers given a route and amount.",
   "homepage": "https://wise.com/gb/compare/",
   "main": "dist/umd/comparison-components.js",

package/src/index.js

@@ -7,8 +7,10 @@ import { ComparisonTableContainer } from './comparison-table';
 import { ComparisonTableHero, ComparisonTableHeroContainer } from './comparison-table-hero';
 import ComparisonTableVersus from './comparison-table-versus';
 import { ProviderComparison } from './provider-comparison-widget';
+import { hasEnoughProviders as hasEnoughLargestProviders } from './provider-filters/largest-provider';
 import { fetchQuotes } from './resources/clients';
 import transformQuotesResponse from './resources/clients/quotes/transformQuotesResponse';
+import transformQuotesResponseV2 from './resources/clients/quotes/transformQuotesResponseV2';
 import {
   isWiseQuote,
   isPartnerQuote,
@@ -44,6 +46,8 @@ export {
   isPartnerQuote,
   isBankQuote,
   isMoneyTransferProviderQuote,
+  hasEnoughLargestProviders,
+  transformQuotesResponseV2,
 };
 
 export default {

package/src/provider-filters/largest-provider/config.ts

@@ -0,0 +1,12 @@
+import TW_ALIAS from '../../resources/provider-constants';
+const PAYPAL = 'paypal';
+const WESTERN_UNION = 'western-union';
+
+export const largestProviderByCountry: Map<string, Array<string>> = new Map([
+  ['gb', [PAYPAL, WESTERN_UNION, 'hsbc', 'barclays', 'lloyds', 'moneygram', TW_ALIAS]],
+  ['us', [PAYPAL, WESTERN_UNION, 'chase', 'moneygram', 'wells-fargo', 'xoom', TW_ALIAS]],
+  ['au', [PAYPAL, WESTERN_UNION, 'commonwealth-bank-of-australia', 'anz', 'westpac', 'national-australia-bank', TW_ALIAS]], //eslint-disable-line prettier/prettier
+  ['hk', [PAYPAL, WESTERN_UNION, 'hang-seng', 'hsbc-hk', 'ocbc', 'ccb-hk', TW_ALIAS]],
+  ['nl', [PAYPAL, WESTERN_UNION, 'lacaixa', 'bbva', 'sabadell', TW_ALIAS]],
+  ['es', [PAYPAL, WESTERN_UNION, 'ing-nl', 'abn-amro-bank', 'rabobank', TW_ALIAS]],
+]);

package/src/provider-filters/largest-provider/index.ts

@@ -0,0 +1,3 @@
+import { hasEnoughProviders, filter } from './largest-provider-filter';
+
+export { hasEnoughProviders, filter };

package/src/provider-filters/largest-provider/largest-provider-filter.spec.js

@@ -0,0 +1,62 @@
+import TW_ALIAS from '../../resources/provider-constants';
+
+import { largestProviderByCountry } from './config';
+import { filter, hasEnoughProviders, supportsCountry } from './largest-provider-filter';
+
+describe('largest-provider-filter', () => {
+  const quotes = [
+    { provider: { alias: 'lloyds' } },
+    { provider: { alias: TW_ALIAS } },
+    { provider: { alias: 'monzo' } },
+    { provider: { alias: 'barclays' } },
+    { provider: { alias: 'monese' } },
+  ];
+
+  // eslint-disable-next-line unicorn/prefer-spread
+  it.each(Array.from(largestProviderByCountry.keys()))(
+    'should return true for the country %s',
+    (country) => {
+      expect(supportsCountry(country)).toStrictEqual(true);
+    },
+  );
+
+  it.each(['invalid', 'in', 'sl'])('should return false for the country %s', (country) => {
+    expect(supportsCountry(country)).toStrictEqual(false);
+  });
+
+  it('should filter the quotes based on the largest providers', () => {
+    const filteredQuotes = filter(quotes, 'gb');
+
+    expect(filteredQuotes).toHaveLength(3);
+    expect(filteredQuotes).toStrictEqual([
+      { provider: { alias: 'lloyds' } },
+      { provider: { alias: TW_ALIAS } },
+      { provider: { alias: 'barclays' } },
+    ]);
+  });
+
+  it('should return the passed in quotes if could not find the supported countries', () => {
+    const filteredQuotes = filter(quotes, 'non-supported-country');
+
+    expect(filteredQuotes).toHaveLength(5);
+    expect(filteredQuotes).toStrictEqual(quotes);
+  });
+
+  it('hasEnoughProviders should return true if the country is supported and has the required number of providers', () => {
+    const result = hasEnoughProviders(quotes, 'gb', 3);
+
+    expect(result).toStrictEqual(true);
+  });
+
+  it('hasEnoughProviders should return false if the country is no supported', () => {
+    const result = hasEnoughProviders(quotes, 'in', 3);
+
+    expect(result).toStrictEqual(false);
+  });
+
+  it('hasEnoughProviders should return false if available largest providers are less than the required', () => {
+    const result = hasEnoughProviders(quotes, 'in', 1);
+
+    expect(result).toStrictEqual(false);
+  });
+});

package/src/provider-filters/largest-provider/largest-provider-filter.ts

@@ -0,0 +1,29 @@
+import Quote from '../../transfer-fee-comparison/domain/Quote';
+
+import { largestProviderByCountry } from './config';
+
+export const supportsCountry = (country: string): boolean => {
+  return largestProviderByCountry.has(country);
+};
+
+export const hasEnoughProviders = (
+  quotes: Quote[],
+  country: string,
+  requiredNumberOfProviders = 5,
+): boolean => {
+  if (!supportsCountry(country)) {
+    return false;
+  }
+
+  const filteredQuotes = filter(quotes, country);
+  return filteredQuotes.length >= requiredNumberOfProviders;
+};
+
+export const filter = (quotes: Quote[], country: string): Quote[] => {
+  if (!supportsCountry(country)) {
+    return quotes;
+  }
+
+  const largestProviders: Array<string> = largestProviderByCountry.get(country) || [];
+  return quotes.filter((quote) => largestProviders.includes(quote.provider.alias));
+};

package/src/resources/clients/quotes/__test__/transformQuotesResponseV2.spec.ts

@@ -0,0 +1,129 @@
+import { FeeType } from '../../../../transfer-fee-comparison/domain/Quote';
+import transformQuotesResponseV2 from '../transformQuotesResponseV2';
+
+describe('quotes v3 response transformations to the canonical model V2', () => {
+  const inputMidmarketRate = 1;
+
+  it('given two fees, should get the highest one (no hidden fees)', () => {
+    const providerWithMoreThanOneFee = {
+      providers: [
+        {
+          name: 'Monzo',
+          alias: 'monzo',
+          logo: 'https://dq8dwmysp7hk1.cloudfront.net/logos/monzo.svg',
+          partner: true,
+          quotes: [
+            {
+              rate: 1,
+              fee: 2,
+              dateCollected: new Date('2018-10-23T12:03:27'),
+              receivedAmount: 1278.44,
+              sendAmount: 1280.44,
+            },
+            {
+              rate: 1,
+              fee: 3,
+              dateCollected: new Date('2018-10-23T12:03:27'),
+              receivedAmount: 1277.44,
+              sendAmount: 1280.44,
+            },
+          ],
+        },
+      ],
+      sourceCurrency: 'GBP',
+      targetCurrency: 'EUR',
+    };
+
+    const expected = {
+      quotes: [
+        {
+          provider: {
+            name: 'Monzo',
+            alias: 'monzo',
+            logoUrl: 'https://dq8dwmysp7hk1.cloudfront.net/logos/monzo.svg',
+            partner: true,
+          },
+          route: {
+            sourceCurrency: 'GBP',
+            targetCurrency: 'EUR',
+          },
+          rate: 1,
+          fees: {
+            breakdown: [
+              {
+                type: FeeType.MARKETED,
+                amount: { value: 2, currency: 'GBP' },
+              },
+            ],
+            total: { value: 2, currency: 'GBP' },
+          },
+          receiveAmount: { value: 1278.44, currency: 'EUR' },
+        },
+      ],
+    };
+
+    expect(transformQuotesResponseV2(providerWithMoreThanOneFee, inputMidmarketRate)).toStrictEqual(
+      expected,
+    );
+  });
+
+  it('should show hidden fees when the rate is lower than the midmarket rate', () => {
+    const providerWithHiddenFee = {
+      providers: [
+        {
+          name: 'Western Union',
+          alias: 'western-union',
+          logo: 'https://dq8dwmysp7hk1.cloudfront.net/logos/western-union.svg',
+          partner: true,
+          quotes: [
+            {
+              rate: 0.98,
+              fee: 2,
+              dateCollected: new Date('2018-10-23T12:03:27'),
+              receivedAmount: 1252.8712,
+              sendAmount: 1280.44,
+            },
+          ],
+        },
+      ],
+      sourceCurrency: 'GBP',
+      targetCurrency: 'EUR',
+    };
+
+    const expected = {
+      quotes: [
+        {
+          provider: {
+            name: 'Western Union',
+            alias: 'western-union',
+            logoUrl: 'https://dq8dwmysp7hk1.cloudfront.net/logos/western-union.svg',
+            partner: true,
+          },
+          route: {
+            sourceCurrency: 'GBP',
+            targetCurrency: 'EUR',
+          },
+          rate: 0.98,
+          fees: {
+            breakdown: [
+              {
+                type: FeeType.MARKETED,
+                amount: { value: 2, currency: 'GBP' },
+              },
+              {
+                type: FeeType.HIDDEN,
+                amount: { value: 25.569, currency: 'GBP' },
+              },
+            ],
+            total: { value: 27.569, currency: 'GBP' },
+          },
+          receiveAmount: { value: 1252.8712, currency: 'EUR' },
+        },
+      ],
+    };
+
+    expect(transformQuotesResponseV2(providerWithHiddenFee, inputMidmarketRate)).toStrictEqual(
+      expected,
+    );
+  });
+});

package/src/resources/clients/quotes/transformQuotesResponseV2.ts

@@ -0,0 +1,97 @@
+import LegacyComparisons, {
+  LegacyQuote,
+} from '../../../transfer-fee-comparison/domain/LegacyComparisons';
+import TransferFeeComparisonQuote, {
+  FeeBreakdown,
+  FeeType,
+} from '../../../transfer-fee-comparison/domain/Quote';
+
+import extractQuote from './extractQuote';
+
+export type TransformQuotesResponseType = {
+  quotes: TransferFeeComparisonQuote[];
+};
+
+function extractHiddenFeeInSourceCurrency(
+  sendAmount: number,
+  receivedAmount: number,
+  marketedFee: number,
+  midmarketRate: number,
+) {
+  const expectedReceivedAmount = midmarketRate * (sendAmount - marketedFee);
+  const hiddenFeePaidOnTargetCurrency =
+    receivedAmount < expectedReceivedAmount ? expectedReceivedAmount - receivedAmount : 0;
+
+  return parseFloat((hiddenFeePaidOnTargetCurrency * (1 / midmarketRate)).toFixed(3));
+}
+
+function extractFees(
+  marketedFee: number,
+  hiddenFee: number,
+  sourceCurrency: string,
+): FeeBreakdown[] {
+  const fees: FeeBreakdown[] = [];
+
+  if (marketedFee > 0) {
+    fees.push({
+      type: FeeType.MARKETED,
+      amount: { value: marketedFee, currency: sourceCurrency },
+    });
+  }
+
+  if (hiddenFee > 0) {
+    fees.push({
+      type: FeeType.HIDDEN,
+      amount: { value: hiddenFee, currency: sourceCurrency },
+    });
+  }
+
+  return fees;
+}
+
+function transformQuotesResponseV2(
+  quotesResults: LegacyComparisons,
+  midmarketRate: number,
+): TransformQuotesResponseType {
+  const quotes = quotesResults.providers.map((p) => {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    const quote: LegacyQuote = extractQuote(p.quotes, quotesResults.targetCurrency);
+    const hiddenFee: number = extractHiddenFeeInSourceCurrency(
+      quote.sendAmount,
+      quote.receivedAmount,
+      quote.fee,
+      midmarketRate,
+    );
+
+    const feesBreakdown: FeeBreakdown[] = extractFees(
+      quote.fee,
+      hiddenFee,
+      quotesResults.sourceCurrency,
+    );
+
+    return {
+      provider: {
+        alias: p.alias,
+        name: p.name,
+        logoUrl: p.logo,
+        partner: p.partner,
+      },
+      route: {
+        sourceCurrency: quotesResults.sourceCurrency,
+        targetCurrency: quotesResults.targetCurrency,
+      },
+      rate: quote.rate,
+      fees: {
+        breakdown: feesBreakdown,
+        total: { value: quote.fee + hiddenFee, currency: quotesResults.sourceCurrency },
+      },
+      receiveAmount: { value: quote.receivedAmount, currency: quotesResults.targetCurrency },
+    };
+  });
+
+  return {
+    quotes,
+  };
+}
+
+export default transformQuotesResponseV2;

package/src/transfer-fee-comparison/TransferFeeComparison.module.less

@@ -0,0 +1,29 @@
+@component-spacing: 24px;
+
+.transfer-fee-comparison__container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.horizontally-centered() {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+
+.transfer-fee-comparison__provider-filter-toggle {
+  .horizontally-centered();
+
+  margin-bottom: @component-spacing;
+}
+
+.transfer-fee-comparison__table {
+  .horizontally-centered();
+
+  margin-bottom: @component-spacing;
+}
+
+.transfer-fee-comparison__footer {
+  .horizontally-centered();
+}

package/src/transfer-fee-comparison/TransferFeeComparison.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
 
+import styles from './TransferFeeComparison.module.less';
 import ProviderFilteringOption from './domain/ProviderFilteringOption';
 import Quote from './domain/Quote';
 import ProviderFilterToggle from './provider-filter-toggle';
-import TransferFeeComparisonFooter from './transfer-fee-comparison-footer/TransferFeeComparisonFooter';
+import TransferFeeComparisonFooter from './transfer-fee-comparison-footer';
 import TransferFeeComparisonTable from './transfer-fee-comparison-table';
 
 export type TransferFeeComparisonProps = {
@@ -26,21 +27,27 @@ const TransferFeeComparison = ({
   urlLocale,
 }: TransferFeeComparisonProps): JSX.Element => {
   return (
-    <div>
+    <div className={styles.transferFeeComparison__container}>
       {providerFiltering.showToggle ? (
-        <ProviderFilterToggle
-          activeToggle={providerFiltering.selectedOption}
-          onToggle={providerFiltering.onProviderFilteringOptionChange}
+        <div className={styles.transferFeeComparison__providerFilterToggle}>
+          <ProviderFilterToggle
+            activeToggle={providerFiltering.selectedOption}
+            onToggle={providerFiltering.onProviderFilteringOptionChange}
+            locale={locale}
+          />
+        </div>
+      ) : null}
+      <div className={styles.transferFeeComparison__table}>
+        <TransferFeeComparisonTable
+          quotes={quotes}
+          midmarketRate={midmarketRate}
+          urlLocale={urlLocale}
           locale={locale}
         />
-      ) : null}
-      <TransferFeeComparisonTable
-        quotes={quotes}
-        midmarketRate={midmarketRate}
-        urlLocale={urlLocale}
-        locale={locale}
-      />
-      <TransferFeeComparisonFooter urlLocale={urlLocale} />
+      </div>
+      <div className={styles.transferFeeComparison__footer}>
+        <TransferFeeComparisonFooter locale={locale} urlLocale={urlLocale} />
+      </div>
     </div>
   );
 };

package/src/transfer-fee-comparison/TransferFeeComparisonContainer.tsx

@@ -1,9 +1,10 @@
 import React, { useState } from 'react';
 
+import { filter, hasEnoughProviders } from '../provider-filters/largest-provider';
+
 import TransferFeeComparison from './TransferFeeComparison';
 import ProviderFilteringOption from './domain/ProviderFilteringOption';
 import Quote from './domain/Quote';
-import { supportsCountry, filter } from './largest-provider-filter';
 
 export type TransferFeeComparisonContainerProps = {
   quotes: Quote[];
@@ -11,6 +12,7 @@ export type TransferFeeComparisonContainerProps = {
   locale: string;
   urlLocale: string;
   enableLargestProviderFiltering: boolean;
+  requiredNumberOfLargestProviders?: number;
 };
 
 // TODO: Needs test
@@ -20,6 +22,7 @@ const TransferFeeComparisonContainer = ({
   locale,
   urlLocale,
   enableLargestProviderFiltering,
+  requiredNumberOfLargestProviders = 5,
 }: TransferFeeComparisonContainerProps): JSX.Element => {
   const [providerFilteringOption, setProviderFilteringOption] = useState(
     enableLargestProviderFiltering
@@ -31,9 +34,12 @@ const TransferFeeComparisonContainer = ({
     setProviderFilteringOption(newValue);
   };
 
+  const filterToggleEnabled =
+    enableLargestProviderFiltering &&
+    hasEnoughProviders(quotes, urlLocale, requiredNumberOfLargestProviders);
+
   const filteredQuotes: Quote[] =
-    providerFilteringOption === ProviderFilteringOption.LARGEST_PROVIDERS &&
-    supportsCountry(urlLocale)
+    providerFilteringOption === ProviderFilteringOption.LARGEST_PROVIDERS && filterToggleEnabled
       ? filter(quotes, urlLocale)
       : quotes;
 
@@ -42,7 +48,7 @@ const TransferFeeComparisonContainer = ({
       quotes={filteredQuotes}
       midmarketRate={midmarketRate}
       providerFiltering={{
-        showToggle: enableLargestProviderFiltering,
+        showToggle: filterToggleEnabled,
         selectedOption: providerFilteringOption,
         onProviderFilteringOptionChange: onProviderFilteringOptionChange,
       }}

package/src/transfer-fee-comparison/assets/translations/messages_id.json

@@ -1,4 +1,4 @@
 {
   "no-hidden-fees": "tanpa biaya tersembunyi",
-  "hidden-fees": "{{hiddenFee}} hiding in the rate"
+  "hidden-fees": "{{hiddenFee}} bersembunyi dalam nilai tukar"
 }

package/src/transfer-fee-comparison/domain/LegacyComparisons.ts

@@ -0,0 +1,24 @@
+type LegacyComparisons = {
+  providers: Provider[];
+  sourceCurrency: string;
+  targetCurrency: string;
+};
+
+type Provider = {
+  alias: string;
+  name: string;
+  logo: string;
+  partner: boolean;
+  quotes: LegacyQuote[];
+};
+
+type LegacyQuote = {
+  fee: number;
+  rate: number;
+  receivedAmount: number;
+  sendAmount: number;
+  dateCollected: Date;
+};
+
+export default LegacyComparisons;
+export type { LegacyQuote };

package/src/transfer-fee-comparison/domain/Quote.ts

@@ -30,4 +30,5 @@ type TransferFeeComparisonQuote = {
 };
 
 export default TransferFeeComparisonQuote;
+export type { FeeBreakdown };
 export { FeeType };

package/src/transfer-fee-comparison/provider-filter-toggle/ProviderFilterToggle.spec.tsx

@@ -34,10 +34,8 @@ describe('<ProviderFilterToggle />', () => {
       render(<ProviderFilterToggle activeToggle={activeToggle} onToggle={onToggle} locale="en" />);
 
       // expect:
-      expect(screen.getByText(activeToggleText)).toHaveClass('providerFilterToggle__activeButton');
-      expect(screen.getByText(inactiveToggleText)).not.toHaveClass(
-        'providerFilterToggle__activeButton',
-      );
+      expect(screen.getByText(activeToggleText)).toBeDisabled();
+      expect(screen.getByText(inactiveToggleText)).toBeEnabled();
     },
   );
 
@@ -61,8 +59,8 @@ describe('<ProviderFilterToggle />', () => {
     );
 
     // then::
-    expect(screen.getByText('Largest providers')).toHaveClass('providerFilterToggle__activeButton');
-    expect(screen.getByText('All providers')).not.toHaveClass('providerFilterToggle__activeButton');
+    expect(screen.getByText('Largest providers')).toBeDisabled();
+    expect(screen.getByText('All providers')).toBeEnabled();
   });
 
   it.each(TEST_CASES)(

package/src/transfer-fee-comparison/provider-filter-toggle/ProviderFilterToggle.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { FormattedMessage, IntlProvider } from 'react-intl';
 
 import ProviderFilteringOption from '../domain/ProviderFilteringOption';
-import translationsFile from '../translations.json';
+import translations from '../translations.json';
 
 import styles from './provider-filter-toggle.module.less';
 
@@ -18,43 +18,52 @@ export const ProviderFilterToggle = ({
   onToggle,
   locale,
 }: ProviderFilterToggleProps): JSX.Element => {
-  const typedTranslationFile: { [language: string]: typeof messages } = translationsFile;
-  const messages: Record<string, string> = typedTranslationFile[locale];
+  const typedTranslations: { [language: string]: typeof messages } = translations;
+  const messages: Record<string, string> = typedTranslations[locale];
 
   return (
     <IntlProvider messages={messages} locale={locale} defaultLocale="en">
       <div className={styles.providerFilterToggle__toggleContainer}>
-        <Button
-          className={[
-            styles.providerFilterToggle__leftButton,
-            activeToggle === ProviderFilteringOption.LARGEST_PROVIDERS
-              ? styles.providerFilterToggle__activeButton
-              : '',
-          ]}
-          onClick={() => {
-            activeToggle === ProviderFilteringOption.ALL_PROVIDERS &&
-              onToggle(ProviderFilteringOption.LARGEST_PROVIDERS);
-          }}
-        >
-          <FormattedMessage id="largest-providers" />
-        </Button>
-        <Button
-          className={[
-            styles.providerFilterToggle__rightButton,
-            activeToggle === ProviderFilteringOption.ALL_PROVIDERS
-              ? styles.providerFilterToggle__activeButton
-              : '',
-          ]}
-          onClick={() => {
-            activeToggle === ProviderFilteringOption.LARGEST_PROVIDERS &&
-              onToggle(ProviderFilteringOption.ALL_PROVIDERS);
-          }}
-        >
-          <FormattedMessage id="all-providers" />
-        </Button>
+        <Toggle
+          label={<FormattedMessage id="largest-providers" />}
+          value={ProviderFilteringOption.LARGEST_PROVIDERS}
+          isActive={activeToggle === ProviderFilteringOption.LARGEST_PROVIDERS}
+          onToggle={onToggle}
+        />
+        <Toggle
+          label={<FormattedMessage id="all-providers" />}
+          value={ProviderFilteringOption.ALL_PROVIDERS}
+          isActive={activeToggle === ProviderFilteringOption.ALL_PROVIDERS}
+          onToggle={onToggle}
+        />
       </div>
     </IntlProvider>
   );
 };
 
+type ToggleProps = {
+  label: JSX.Element;
+  value: ProviderFilteringOption;
+  isActive: boolean;
+  onToggle: (newValue: ProviderFilteringOption) => void;
+};
+
+const Toggle = ({ label, value, isActive, onToggle }: ToggleProps): JSX.Element => {
+  return (
+    <Button
+      className={`${styles.providerFilterToggle__button} ${
+        isActive
+          ? styles.providerFilterToggle__buttonActive
+          : styles.providerFilterToggle__buttonInactive
+      }`}
+      onClick={() => {
+        !isActive && onToggle(value);
+      }}
+      disabled={isActive}
+    >
+      {label}
+    </Button>
+  );
+};
+
 export default ProviderFilterToggle;

package/src/transfer-fee-comparison/provider-filter-toggle/messages_id.json

@@ -1,4 +1,4 @@
 {
-  "largest-providers": "Largest providers",
-  "all-providers": "All providers"
+  "largest-providers": "Penyedia terbesar",
+  "all-providers": "Semua penyedia"
 }