@transferwise/comparison-components 19.0.5 → 20.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/comparison-components",
-  "version": "19.0.5",
+  "version": "20.0.1",
   "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/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 };