@transferwise/comparison-components 19.0.4 → 20.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/comparison-components",
-  "version": "19.0.4",
+  "version": "20.0.0",
   "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.jsx

@@ -18,10 +18,10 @@ import {
   ProviderComparisonWidgetTranslations,
 } from './provider-comparison-widget';
 import { hasEnoughProviders as hasEnoughLargestProviders } from './provider-filters/largest-provider';
-
+import DeliveryEstimationTranslations from './resources/assets/translations/translations.json';
+import { fetchQuotes } from './resources/clients';
 import transformQuotesResponse from './resources/clients/quotes/transformQuotesResponse';
 import transformQuotesResponseV2 from './resources/clients/quotes/transformQuotesResponseV2';
-import { fetchQuotes } from './resources/clients';
 import {
   isWiseQuote,
   isPartnerQuote,
@@ -34,7 +34,6 @@ import {
   calculateSavingAgainstMostExpensiveBankInSourceCurrency,
 } from './resources/savingsCalculator';
 import TransferFeeComparisonContainer from './transfer-fee-comparison';
-import DeliveryEstimationTranslations from './resources/assets/translations/translations.json';
 import { TravelMoney, TravelMoneyTranslations } from './travel-money';
 
 ComparisonContainer.componentType = 'comparison';

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

@@ -2,6 +2,7 @@ import { numberEqualsWithRelativeTolerance } from '../../../common/numberEqualsW
 import QuoteApi from '../../../domain/QuoteApi';
 import LegacyComparisons, {
   LegacyQuote,
+  Provider,
 } from '../../../transfer-fee-comparison/domain/LegacyComparisons';
 import TransferFeeComparisonQuote, {
   FeeBreakdown,
@@ -65,47 +66,22 @@ function extractFees(
 
 function transformQuotesResponseV2(
   quotesResults: LegacyComparisons,
-  quoteApi: QuoteApi,
+  quoteApi?: QuoteApi,
 ): TransformQuotesResponseType {
+  const wiseQuote = quotesResults.providers.find((provider) => provider.alias === TW_ALIAS)
+    ?.quotes[0].rate as number;
+
   const quotes = quotesResults.providers.map((p) => {
     // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
     const quote: LegacyQuote =
-      p.alias === TW_ALIAS
+      quoteApi && p.alias === TW_ALIAS
         ? extractWiseQuote(quoteApi)
         : extractQuote(p.quotes, quotesResults.targetCurrency);
-    const midmarketRate = quoteApi.rate;
-    const hiddenFee: number = extractHiddenFeeInSourceCurrency(
-      quotesResults.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 },
-      sendAmount: { value: quotesResults.sendAmount, currency: quotesResults.sourceCurrency },
-    };
+
+    // eslint-disable-next-line fp/no-mutation
+    const midMarketRate = quoteApi ? quoteApi.rate : wiseQuote;
+
+    return buildQuoteObject(quotesResults, p, quote, midMarketRate);
   });
 
   return {
@@ -113,4 +89,44 @@ function transformQuotesResponseV2(
   };
 }
 
+function buildQuoteObject(
+  quotesResults: LegacyComparisons,
+  provider: Provider,
+  quote: LegacyQuote,
+  midMarketRate: number,
+) {
+  const hiddenFee: number = extractHiddenFeeInSourceCurrency(
+    quotesResults.sendAmount,
+    quote.receivedAmount,
+    quote.fee,
+    midMarketRate,
+  );
+
+  const feesBreakdown: FeeBreakdown[] = extractFees(
+    quote.fee,
+    hiddenFee,
+    quotesResults.sourceCurrency,
+  );
+
+  return {
+    provider: {
+      alias: provider.alias,
+      name: provider.name,
+      logoUrl: provider.logo,
+      partner: provider.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 },
+    sendAmount: { value: quotesResults.sendAmount, currency: quotesResults.sourceCurrency },
+  };
+}
+
 export default transformQuotesResponseV2;

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

@@ -6,8 +6,8 @@ import MockIntersectionObserver from '../common/MockIntersectionObserver';
 import Locale from '../domain/Locale';
 
 import TransferFeeComparisonContainer from './TransferFeeComparisonContainer';
+import { QUOTE_API } from './mocks/QuoteApi';
 import { ALL_QUOTES } from './mocks/Quotes';
-import MIDMARKET_RATE from './mocks/midmarket-rate';
 import SEND_AMOUNT from './mocks/send-amount';
 import translations from './transfer-fee-comparison-table-row/fee-makeup-popover/assets/translations/translations.json';
 
@@ -26,7 +26,7 @@ describe('TransferFeeComparisonContainer', () => {
         <IntlProvider locale="en" messages={translations.en}>
           <TransferFeeComparisonContainer
             enableLargestProviderFiltering
-            midmarketRate={MIDMARKET_RATE}
+            quoteApi={QUOTE_API}
             locale={Locale.EN}
             quotes={ALL_QUOTES}
             sendAmount={SEND_AMOUNT}
@@ -48,7 +48,7 @@ describe('TransferFeeComparisonContainer', () => {
         <IntlProvider locale="en" messages={translations.en}>
           <TransferFeeComparisonContainer
             enableLargestProviderFiltering
-            midmarketRate={MIDMARKET_RATE}
+            quoteApi={QUOTE_API}
             locale={Locale.EN}
             quotes={ALL_QUOTES}
             sendAmount={SEND_AMOUNT}

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

@@ -9,6 +9,7 @@ import TransferFeeComparisonContainer, {
 import { ALL_QUOTES } from './mocks/Quotes';
 import MIDMARKET_RATE from './mocks/midmarket-rate';
 import SEND_AMOUNT from './mocks/send-amount';
+import { QUOTE_API } from './mocks/QuoteApi';
 
 export default {
   title: 'Transfer Fee Comparison',
@@ -23,7 +24,7 @@ export const ContainerWithLargestProviderFilteringEnabled = Template.bind({});
 ContainerWithLargestProviderFilteringEnabled.args = {
   sendAmount: SEND_AMOUNT,
   quotes: ALL_QUOTES,
-  midmarketRate: MIDMARKET_RATE,
+  quoteApi: QUOTE_API,
   locale: Locale.EN,
   urlLocale: 'gb',
   enableLargestProviderFiltering: true,
@@ -37,7 +38,7 @@ export const ContainerWithLargestProviderFilteringDisabled = Template.bind({});
 ContainerWithLargestProviderFilteringDisabled.args = {
   sendAmount: SEND_AMOUNT,
   quotes: ALL_QUOTES,
-  midmarketRate: MIDMARKET_RATE,
+  quoteApi: QUOTE_API,
   locale: Locale.EN,
   urlLocale: 'gb',
   enableLargestProviderFiltering: false,

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

@@ -11,11 +11,12 @@ 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;
   quotes: Quote[];
-  midmarketRate: number;
+  quoteApi?: QuoteApi;
   locale: Locale;
   urlLocale: string;
   enableLargestProviderFiltering: boolean;
@@ -27,7 +28,7 @@ export type TransferFeeComparisonContainerProps = {
 const TransferFeeComparisonContainer = ({
   sendAmount,
   quotes,
-  midmarketRate,
+  quoteApi,
   locale,
   urlLocale,
   enableLargestProviderFiltering,
@@ -38,6 +39,9 @@ const TransferFeeComparisonContainer = ({
 }: TransferFeeComparisonContainerProps): JSX.Element => {
   urlLocale = urlLocale.toLowerCase();
   locale = getSupportedLocale(locale);
+  const midmarketRate = quoteApi
+    ? quoteApi.rate
+    : (quotes.find((quote) => quote.provider.alias === TW_ALIAS)?.rate as number);
 
   const [providerFilteringOption, setProviderFilteringOption] = useState(
     enableLargestProviderFiltering

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

@@ -0,0 +1,9 @@
+const QUOTE_API = {
+  rate: 1.17454,
+  sourceCurrency: 'GBP',
+  targetCurrency: 'EUR',
+  preferredPayIn: 'BALANCE',
+  paymentOptions: [],
+};
+
+export { QUOTE_API };