@transferwise/comparison-components 20.1.0-beta.1 → 20.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/comparison-components",
-  "version": "20.1.0-beta.1",
+  "version": "20.1.3",
   "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/resources/clients/quotes/__test__/transformQuotesResponseV2.spec.ts

@@ -483,4 +483,181 @@ describe('quotes v3 response transformations to the canonical model V2', () => {
 
     expect(transformQuotesResponseV2(providers, wiseProvider)).toStrictEqual(expected);
   });
+
+  it('given a route with a small send amount with a decimal currency, and provider does have a hidden fee, do show the hidden fee', () => {
+    const wiseProvider = {
+      ...wiseQuoteApiAdjusted,
+      rate: 0.88665,
+    };
+    const providers = {
+      providers: [
+        {
+          name: 'Western Union',
+          alias: 'western-union',
+          logo: 'https://dq8dwmysp7hk1.cloudfront.net/logos/western-union.svg',
+          partner: true,
+          quotes: [
+            {
+              rate: 0.00759645,
+              fee: 0,
+              dateCollected: new Date('2018-10-23T12:03:27'),
+              receivedAmount: 21.67,
+            },
+          ],
+        },
+      ],
+      sendAmount: 25,
+      sourceCurrency: 'USD',
+      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: 'USD',
+            targetCurrency: 'EUR',
+          },
+          rate: 0.00759645,
+          fees: {
+            breakdown: [
+              {
+                type: FeeType.HIDDEN,
+                amount: { value: 0.55, currency: 'USD' },
+              },
+            ],
+            total: { value: 0.55, currency: 'USD' },
+          },
+          receiveAmount: { value: 21.67, currency: 'EUR' },
+          sendAmount: { value: 25, currency: 'USD' },
+        },
+      ],
+    };
+
+    expect(transformQuotesResponseV2(providers, wiseProvider)).toStrictEqual(expected);
+  });
+
+  it('given a route with a small send amount with a non-decimal currency as source, and provider doesnt have a hidden fee, dont show the hidden fee', () => {
+    const wiseProvider = {
+      ...wiseQuoteApiAdjusted,
+      rate: 0.0000612414,
+    };
+    const providers = {
+      providers: [
+        {
+          name: 'Western Union',
+          alias: 'western-union',
+          logo: 'https://dq8dwmysp7hk1.cloudfront.net/logos/western-union.svg',
+          partner: true,
+          quotes: [
+            {
+              rate: 0.00759645,
+              fee: 12175,
+              dateCollected: new Date('2018-10-23T12:03:27'),
+              receivedAmount: 0.17,
+            },
+          ],
+        },
+      ],
+      sendAmount: 15000,
+      sourceCurrency: 'IDR',
+      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: 'IDR',
+            targetCurrency: 'EUR',
+          },
+          rate: 0.00759645,
+          fees: {
+            breakdown: [
+              {
+                type: FeeType.MARKETED,
+                amount: { value: 12175, currency: 'IDR' },
+              },
+            ],
+            total: { value: 12175, currency: 'IDR' },
+          },
+          receiveAmount: { value: 0.17, currency: 'EUR' },
+          sendAmount: { value: 15000, currency: 'IDR' },
+        },
+      ],
+    };
+
+    expect(transformQuotesResponseV2(providers, wiseProvider)).toStrictEqual(expected);
+  });
+
+  it('given a route with a small send amount with a non-decimal currency as target, and provider doesnt have a hidden fee, dont show the hidden fee', () => {
+    const wiseProvider = {
+      ...wiseQuoteApiAdjusted,
+      rate: 0.0000612414,
+    };
+    const providers = {
+      providers: [
+        {
+          name: 'Western Union',
+          alias: 'western-union',
+          logo: 'https://dq8dwmysp7hk1.cloudfront.net/logos/western-union.svg',
+          partner: true,
+          quotes: [
+            {
+              rate: 0.00759645,
+              fee: 1.31,
+              dateCollected: new Date('2018-10-23T12:03:27'),
+              receivedAmount: 253,
+            },
+          ],
+        },
+      ],
+      sendAmount: 3,
+      sourceCurrency: 'GBP',
+      targetCurrency: 'JPY',
+    };
+
+    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: 'JPY',
+          },
+          rate: 0.00759645,
+          fees: {
+            breakdown: [
+              {
+                type: FeeType.MARKETED,
+                amount: { value: 1.31, currency: 'GBP' },
+              },
+            ],
+            total: { value: 1.31, currency: 'GBP' },
+          },
+          receiveAmount: { value: 253, currency: 'JPY' },
+          sendAmount: { value: 3, currency: 'GBP' },
+        },
+      ],
+    };
+
+    expect(transformQuotesResponseV2(providers, wiseProvider)).toStrictEqual(expected);
+  });
 });

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

@@ -0,0 +1,28 @@
+// From ISO 4217 (06/12/2021)
+const CURRENCIES_WITHOUT_DECIMALS = new Set([
+  'CVE',
+  'IDR',
+  'ISK',
+  'BIF',
+  'CLP',
+  'DJF',
+  'GNF',
+  'ISK',
+  'JPY',
+  'KMF',
+  'KRW',
+  'PYG',
+  'RWF',
+  'UGX',
+  'UYI',
+  'VND',
+  'VUV',
+  'XAF',
+  'XOF',
+  'XPF',
+]);
+
+const isCurrencyWithoutDecimals = (currencyCode: string): boolean =>
+  CURRENCIES_WITHOUT_DECIMALS.has(currencyCode);
+
+export default isCurrencyWithoutDecimals;

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

@@ -10,6 +10,7 @@ import TransferFeeComparisonQuote, {
 } from '../../../transfer-fee-comparison/domain/Quote';
 import TW_ALIAS from '../../provider-constants';
 
+import isCurrencyWithoutDecimals from './currenciesWithoutDecimals';
 import extractQuote from './extractQuote';
 import extractWiseQuote from './extractWiseQuote';
 
@@ -18,29 +19,29 @@ export type TransformQuotesResponseType = {
 };
 
 function extractHiddenFeeInSourceCurrency(
+  targetCurrencyCode: string,
   sendAmount: number,
   receivedAmount: number,
   marketedFee: number,
   midmarketRate: number,
 ) {
-  const toleranceAmountInPercentage = 0.01;
-  const expectedReceivedAmount = midmarketRate * (sendAmount - marketedFee);
+  const noDecimalsCurrencyTolerance = isCurrencyWithoutDecimals(targetCurrencyCode) ? 0.5 : 0;
+  const toleranceAmountInPercentage = 0.00001;
+  const expectedReceivedAmount = floorToTwoDecimalNumbers(
+    midmarketRate * (sendAmount - marketedFee) - noDecimalsCurrencyTolerance,
+  );
 
   const receivedTheExpectedAmount = numberEqualsWithRelativeTolerance(
     receivedAmount,
     expectedReceivedAmount,
     toleranceAmountInPercentage,
   );
-  const receivedHigherThanExpected =
-    !receivedTheExpectedAmount && receivedAmount > expectedReceivedAmount;
-
-  const expectedHasMoreThanACentMissing = expectedReceivedAmount - receivedAmount >= 0.01;
+  const receivedHigherThanExpected = receivedAmount > expectedReceivedAmount;
 
-  const hasHiddenFee =
-    !receivedTheExpectedAmount && !receivedHigherThanExpected && expectedHasMoreThanACentMissing;
+  const hasHiddenFee = !receivedTheExpectedAmount && !receivedHigherThanExpected;
   const hiddenFeePaidOnTargetCurrency = hasHiddenFee ? expectedReceivedAmount - receivedAmount : 0;
 
-  return parseFloat((hiddenFeePaidOnTargetCurrency * (1 / midmarketRate)).toFixed(2));
+  return parseFloat((hiddenFeePaidOnTargetCurrency / midmarketRate).toFixed(2));
 }
 
 function extractFees(
@@ -99,6 +100,7 @@ function buildQuoteObject(
   midMarketRate: number,
 ) {
   const hiddenFee: number = extractHiddenFeeInSourceCurrency(
+    quotesResults.targetCurrency,
     quotesResults.sendAmount,
     quote.receivedAmount,
     quote.fee,
@@ -132,4 +134,8 @@ function buildQuoteObject(
   };
 }
 
+function floorToTwoDecimalNumbers(value: number): number {
+  return Math.floor(value * 100) / 100;
+}
+
 export default transformQuotesResponseV2;

package/src/resources/tracking/types.ts

@@ -28,6 +28,7 @@ export enum EventName {
   MobileFeeBreakdownStarted = 'MobileFeeBreakdownStarted',
   LargestProviderTableRendered = 'LargestProviderTableRendered',
   RowWasSeen = 'RowWasSeen',
+  WiseHasHiddenFee = 'WiseHasHiddenFee',
 }
 
 export enum WidgetName {

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

@@ -24,6 +24,7 @@ export type TransferFeeComparisonProps = {
   onFeePopoverClick?: (providerName: string) => void;
   onMobileRowClick?: (providerName: string) => void;
   onRowVisible?: (providerName: string) => void;
+  onWiseWithHiddenFees?: () => void;
 };
 
 const TransferFeeComparison = ({
@@ -36,6 +37,7 @@ const TransferFeeComparison = ({
   onFeePopoverClick,
   onMobileRowClick,
   onRowVisible,
+  onWiseWithHiddenFees,
 }: TransferFeeComparisonProps): JSX.Element => {
   return (
     <div className={styles.transferFeeComparison__container}>
@@ -58,6 +60,7 @@ const TransferFeeComparison = ({
           onFeePopoverClick={onFeePopoverClick}
           onMobileRowClick={onMobileRowClick}
           onRowVisible={onRowVisible}
+          onWiseWithHiddenFees={onWiseWithHiddenFees}
         />
       </div>
       <div className={styles.transferFeeComparison__footer}>

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

@@ -7,7 +7,7 @@ import Locale from '../domain/Locale';
 
 import TransferFeeComparisonContainer from './TransferFeeComparisonContainer';
 import { QUOTE_API } from './mocks/QuoteApi';
-import { ALL_QUOTES } from './mocks/Quotes';
+import { ALL_QUOTES, WISE_QUOTE_WITH_HIDDEN_FEE } from './mocks/Quotes';
 import SEND_AMOUNT from './mocks/send-amount';
 import translations from './transfer-fee-comparison-table-row/fee-makeup-popover/assets/translations/translations.json';
 
@@ -66,5 +66,26 @@ describe('TransferFeeComparisonContainer', () => {
 
       expect(trackEventMock).toHaveBeenCalledTimes(2);
     });
+
+    it('should call the tracking function when wise has hidden fees', () => {
+      render(
+        <IntlProvider locale="en" messages={translations.en}>
+          <TransferFeeComparisonContainer
+            enableLargestProviderFiltering
+            quoteApi={QUOTE_API}
+            locale={Locale.EN}
+            quotes={[WISE_QUOTE_WITH_HIDDEN_FEE]}
+            sendAmount={SEND_AMOUNT}
+            urlLocale="gb"
+            trackEvent={trackEventMock}
+            requiredNumberOfLargestProviders={1}
+          />
+        </IntlProvider>,
+      );
+
+      const feePopovers = screen.queryAllByRole('button', { name: 'What makes up this fee' });
+      expect(feePopovers.length).toBeGreaterThan(0);
+      expect(trackEventMock).toHaveBeenCalledTimes(1);
+    });
   });
 });

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

@@ -3,6 +3,7 @@ import React, { useEffect, useState } from 'react';
 
 import { getSupportedLocale } from '../common/getSupportedLocale/getSupportedLocale';
 import Locale from '../domain/Locale';
+import QuoteApi from '../domain/QuoteApi';
 import { filter, hasEnoughProviders } from '../provider-filters/largest-provider';
 import TW_ALIAS from '../resources/provider-constants';
 import { EventName, TrackEventFn, WidgetName } from '../resources/tracking/types';
@@ -11,7 +12,6 @@ import TransferFeeComparison from './TransferFeeComparison';
 import Money from './domain/Money';
 import ProviderFilteringOption from './domain/ProviderFilteringOption';
 import Quote from './domain/Quote';
-import QuoteApi from '../domain/QuoteApi';
 
 export type TransferFeeComparisonContainerProps = {
   sendAmount: Money;
@@ -108,6 +108,13 @@ const TransferFeeComparisonContainer = ({
     });
   };
 
+  const onWiseWithHiddenFees = () => {
+    const trackingAttribute = getTrackingAttributes();
+    trackEvent(WidgetName.TransferFeeComparison, EventName.WiseHasHiddenFee, {
+      ...trackingAttribute,
+    });
+  };
+
   const filterToggleEnabled =
     enableLargestProviderFiltering &&
     hasEnoughProviders(quotes, urlLocale, requiredNumberOfLargestProviders);
@@ -134,6 +141,7 @@ const TransferFeeComparisonContainer = ({
       onFeePopoverClick={onFeePopoverClick}
       onMobileRowClick={onMobileRowClick}
       onRowVisible={onRowVisible}
+      onWiseWithHiddenFees={onWiseWithHiddenFees}
     />
   );
 };

package/src/transfer-fee-comparison/mocks/Quotes.ts

@@ -1,6 +1,50 @@
 import TransferFeeComparisonQuote, { FeeType } from '../domain/Quote';
 import MIDMARKET_RATE from '../mocks/midmarket-rate';
 
+const WISE_QUOTE_WITH_HIDDEN_FEE = {
+  provider: {
+    alias: 'transferwise',
+    name: 'Wise',
+    logoUrl: 'https://wise.com/public-resources/assets/logos/wise/brand_logo_inverse.svg',
+    partner: false,
+  },
+  route: {
+    sourceCurrency: 'GBP',
+    targetCurrency: 'EUR',
+  },
+  rate: MIDMARKET_RATE,
+  fees: {
+    breakdown: [
+      {
+        type: FeeType.MARKETED,
+        amount: {
+          currency: 'GBP',
+          value: 3.69,
+        },
+      },
+      {
+        type: FeeType.HIDDEN,
+        amount: {
+          currency: 'GBP',
+          value: 1,
+        },
+      },
+    ],
+    total: {
+      currency: 'GBP',
+      value: 4.69,
+    },
+  },
+  receiveAmount: {
+    currency: 'EUR',
+    value: 1170.21,
+  },
+  sendAmount: {
+    currency: 'GBP',
+    value: 996.2,
+  },
+};
+
 const WISE_QUOTE = {
   provider: {
     alias: 'transferwise',
@@ -165,6 +209,7 @@ const ALL_QUOTES: TransferFeeComparisonQuote[] = [
 
 export {
   WISE_QUOTE,
+  WISE_QUOTE_WITH_HIDDEN_FEE,
   TRANSPARENT_PARTNER_QUOTE,
   TRANSPARENT_NON_PARTNER_QUOTE,
   NON_TRANSPARENT_NON_PARTNER_QUOTE,

package/src/transfer-fee-comparison/transfer-fee-comparison-table/TransferFeeComparisonTable.tsx

@@ -19,6 +19,7 @@ export type TransferFeeComparisonTableProps = {
   onFeePopoverClick?: (providerName: string) => void;
   onMobileRowClick?: (providerName: string) => void;
   onRowVisible?: (providerName: string) => void;
+  onWiseWithHiddenFees?: () => void;
 };
 
 export const TransferFeeComparisonTable = ({
@@ -30,6 +31,7 @@ export const TransferFeeComparisonTable = ({
   onFeePopoverClick,
   onMobileRowClick,
   onRowVisible,
+  onWiseWithHiddenFees,
 }: TransferFeeComparisonTableProps): JSX.Element => {
   return (
     <table className={componentStyles.transferFeeComparisonTable__rectangle}>

package/src/transfer-fee-comparison/transfer-fee-comparison-table-row/TransferFeeComparisonTableRow.tsx

@@ -20,6 +20,7 @@ export type TransferFeeComparisonTableRowProps = {
   onFeePopoverClick?: (providerName: string) => void;
   onMobileRowClick?: (providerName: string) => void;
   onRowVisible?: (providerName: string) => void;
+  onWiseWithHiddenFees?: () => void;
 };
 
 const TransferFeeComparisonTableRow = ({
@@ -31,6 +32,7 @@ const TransferFeeComparisonTableRow = ({
   onFeePopoverClick,
   onMobileRowClick,
   onRowVisible,
+  onWiseWithHiddenFees,
 }: TransferFeeComparisonTableRowProps): JSX.Element => {
   const hiddenFee = quote.fees.breakdown.find((fee) => fee.type === FeeType.HIDDEN)?.amount || {
     currency: quote.route.sourceCurrency,
@@ -39,6 +41,10 @@ const TransferFeeComparisonTableRow = ({
   const [feeBreakdownOpen, setFeeBreakdownOpen] = useState(false);
   const isMobile = IsMobile();
 
+  if (quote.provider.alias === TW_ALIAS && hiddenFee.value > 0) {
+    onWiseWithHiddenFees?.();
+  }
+
   const { ref, inView } = useInView({
     threshold: 0.5,
     triggerOnce: true,
@@ -78,7 +84,9 @@ const TransferFeeComparisonTableRow = ({
         <td className={componentStyles.row__fee}>
           <TotalFeeAndHiddenFee
             totalFee={quote.fees.total}
-            hiddenFee={hiddenFee}
+            hiddenFee={
+              isProviderWise(quote) ? { value: 0, currency: hiddenFee.currency } : hiddenFee
+            }
             darkMode={isProviderWise(quote)}
             locale={locale}
           />
@@ -91,6 +99,7 @@ const TransferFeeComparisonTableRow = ({
             onClose={() => setFeeBreakdownOpen(false)}
             urlLocale={urlLocale}
             locale={locale}
+            isProviderWise={isProviderWise(quote)}
             onPopoverClick={() => {
               onFeePopoverClick && onFeePopoverClick(quote.provider.name);
             }}

package/src/transfer-fee-comparison/transfer-fee-comparison-table-row/fee-makeup-popover/FeeMakeupPopover.tsx

@@ -18,6 +18,7 @@ export type FeeMakeupPopoverProps = {
   onClose: () => void;
   urlLocale: string;
   locale: Locale;
+  isProviderWise: boolean;
   onPopoverClick?: () => void;
 };
 
@@ -28,9 +29,10 @@ const FeeMakeupPopover = ({
   onClose,
   urlLocale,
   locale,
+  isProviderWise,
   onPopoverClick,
 }: FeeMakeupPopoverProps): JSX.Element => {
-  const content = PopoverContent(quote, midmarketRate, urlLocale);
+  const content = PopoverContent(quote, midmarketRate, urlLocale, isProviderWise);
   const messages = translations[locale];
   const intl = createIntl({ locale: locale, messages: messages });
 
@@ -60,8 +62,9 @@ const PopoverContent = (
   quote: TransferFeeComparisonQuote,
   midmarketRate: number,
   urlLocale: string,
+  isProviderWise: boolean,
 ): JSX.Element => {
-  const hiddenFeesAmount = getFeesSumByType(quote, FeeType.HIDDEN);
+  const hiddenFeesAmount = isProviderWise ? 0 : getFeesSumByType(quote, FeeType.HIDDEN);
   const marketedFeesAmount = getFeesSumByType(quote, FeeType.MARKETED);
 
   if (hiddenFeesAmount > 0) {
@@ -81,6 +84,7 @@ const PopoverContent = (
         midmarketRate={midmarketRate}
         marketedFeesAmount={marketedFeesAmount}
         urlLocale={urlLocale}
+        isProviderWise={isProviderWise}
       />
     );
   }

package/src/transfer-fee-comparison/transfer-fee-comparison-table-row/fee-makeup-popover/fee-element/TransparentFeeElement.tsx

@@ -12,6 +12,7 @@ type TransparentFeeElementProps = {
   midmarketRate: number;
   marketedFeesAmount: number;
   urlLocale: string;
+  isProviderWise: boolean;
 };
 
 const TransparentFeeElement = ({
@@ -19,12 +20,15 @@ const TransparentFeeElement = ({
   midmarketRate,
   marketedFeesAmount,
   urlLocale,
+  isProviderWise,
 }: TransparentFeeElementProps): JSX.Element => {
   const COMPARE_LINK = createUrl(
     `/${urlLocale}/compare?sourceCurrency=${quote.route.sourceCurrency}&targetCurrency=${quote.route.targetCurrency}`,
   );
 
-  const conversionRateTextId: string = getRateTextId(quote.rate, midmarketRate);
+  const currentProviderRate = isProviderWise ? midmarketRate : quote.rate;
+
+  const conversionRateTextId: string = getRateTextId(currentProviderRate, midmarketRate);
 
   return (
     <div className={componentStyles.feeMakeupPopover__contentContainer}>
@@ -46,7 +50,7 @@ const TransparentFeeElement = ({
           id={conversionRateTextId}
           values={{
             providerName: quote.provider.name,
-            conversionRate: quote.rate.toFixed(5),
+            conversionRate: currentProviderRate.toFixed(5),
             midmarketRate: midmarketRate.toFixed(5),
             a: (chunks: string) => (
               <a href={COMPARE_LINK} target="_blank" rel="noreferrer">