@transferwise/comparison-components 17.1.21 → 17.1.25

package/src/comparison-table-hero/assets/translations/translations.json

@@ -15,9 +15,6 @@
 		"disclaimer-without-borders": "за хората без граници.",
 		"disclaimer-charges": "Таксуваме възможно най-малко и винаги ви показваме информацията предварително. Няма скрити такси. Няма лоши валутни курсове. Няма изненади.",
 		"disclaimer-how-do-we-collect": "Как събираме тези данни?",
-		"powered-by": "С подкрепата на",
-		"powered-by-wise": "Powered by Wise",
-		"powered-by-wise-description": "We've partnered with other providers who believe in fairness and transparency. That’s why all providers powered by Wise have the same price.",
 		"show-less-providers": "Показване на по-малко доставчици",
 		"show-more-providers": "Показване на още доставчици",
 		"should-arrive": "Трябва да пристигне",
@@ -39,9 +36,6 @@
 		"disclaimer-without-borders": "pro lidi bez hranic.",
 		"disclaimer-charges": "Účtujeme si jak nejméně to jen jde a vždy Vám vše ukážeme předem. Žádné skryté poplatky. Žádné špatné kurzy, Žádná překvapení.",
 		"disclaimer-how-do-we-collect": "Jak shromažďujeme tato data?",
-		"powered-by": "Pomocí",
-		"powered-by-wise": "Powered by Wise",
-		"powered-by-wise-description": "We've partnered with other providers who believe in fairness and transparency. That’s why all providers powered by Wise have the same price.",
 		"show-less-providers": "Zobrazit méně poskytovatelů",
 		"show-more-providers": "Zobrazit více poskytovatelů",
 		"should-arrive": "Mělo by dorazit",
@@ -63,9 +57,6 @@
 		"disclaimer-without-borders": "für Menschen ohne Grenzen.",
 		"disclaimer-charges": "Wir berechnen so wenig wie möglich und zeigen es dir immer vorab an. Keine versteckten Gebühren. Keine schlechten Wechselkurse. Keine Überraschungen.",
 		"disclaimer-how-do-we-collect": "Wie ermitteln wir diese Daten? ",
-		"powered-by": "Powered by",
-		"powered-by-wise": "Powered by Wise",
-		"powered-by-wise-description": "Wir haben mit anderen Anbietern, die an Fairness und Transparenz glauben, kooperiert. Deshalb bieten dir alle Anbieter, die \"Powered by Wise\" sind, den gleichen Preis.",
 		"show-less-providers": "Weniger Anbieter anzeigen",
 		"show-more-providers": "Weitere Anbieter anzeigen",
 		"should-arrive": "Sollte ankommen",
@@ -87,9 +78,6 @@
 		"disclaimer-without-borders": "for people without borders.",
 		"disclaimer-charges": "We charge as little as possible, and we always show you upfront. No hidden fees. No bad exchange rates. No surprises.",
 		"disclaimer-how-do-we-collect": "How do we collect this data?",
-		"powered-by": "Powered by",
-		"powered-by-wise": "Powered by Wise",
-		"powered-by-wise-description": "We've partnered with other providers who believe in fairness and transparency. That’s why all providers powered by Wise have the same price.",
 		"show-less-providers": "Show fewer providers",
 		"show-more-providers": "Show more providers",
 		"should-arrive": "Θα φτάσει",
@@ -111,9 +99,6 @@
 		"disclaimer-without-borders": "for people without borders.",
 		"disclaimer-charges": "We charge as little as possible, and we always show you upfront. No hidden fees. No bad exchange rates. No surprises.",
 		"disclaimer-how-do-we-collect": "How do we collect this data?",
-		"powered-by": "Powered by",
-		"powered-by-wise": "Powered by Wise",
-		"powered-by-wise-description": "We've partnered with other providers who believe in fairness and transparency. That’s why all providers powered by Wise have the same price.",
 		"show-less-providers": "Show fewer providers",
 		"show-more-providers": "Show more providers",
 		"should-arrive": "Should arrive",
@@ -135,9 +120,6 @@
 		"disclaimer-without-borders": "para la gente sin fronteras.",
 		"disclaimer-charges": "Te cobramos lo menos posible, y siempre te lo mostramos por adelantado. Sin comisiones ocultas. Sin tipos de cambio desfavorables. Sin sorpresas desagradables.",
 		"disclaimer-how-do-we-collect": "¿Cómo recolectamos esta información?",
-		"powered-by": "Operado por",
-		"powered-by-wise": "Desarrollado por Wise",
-		"powered-by-wise-description": "Nos hemos aliado con otros proveedores que también creen en la transparencia y justicia. Es por ello que todos los proveedores que operan con Wise tienen el mismo precio.",
 		"show-less-providers": "Mostrar menos proveedores",
 		"show-more-providers": "Mostrar más proveedores",
 		"should-arrive": "Debería llegar",
@@ -159,9 +141,6 @@
 		"disclaimer-without-borders": "pour les personnes sans frontières.",
 		"disclaimer-charges": "Nous facturons aussi peu que possible et nous vous montrons toujours cela à l'avance. Pas de frais cachés. Pas de mauvais taux de change. Pas de surprise.",
 		"disclaimer-how-do-we-collect": "Comment collectons-nous ces données ?",
-		"powered-by": "Powered by",
-		"powered-by-wise": "Fourni par Wise",
-		"powered-by-wise-description": "Nous nous sommes associés à d'autres prestataires croyant aussi en l'honnêteté et la transparence. C'est la raison pour laquelle tous les prestataires partenaires de Wise ont les mêmes prix.",
 		"show-less-providers": "Afficher moins de prestataires",
 		"show-more-providers": "Afficher plus de prestataires",
 		"should-arrive": "Devrait arriver",
@@ -183,9 +162,6 @@
 		"disclaimer-without-borders": "azoknak, akik számára nincs határ",
 		"disclaimer-charges": "Mindig a lehető legalacsonyabb díjat kínáljuk neked, és előre megmutatjuk, mennyit fogsz fizetni. Rejtett költségek nélkül. Kedvezőtlen átváltási árfolyamok nélkül. Kellemetlen meglepetések nélkül.",
 		"disclaimer-how-do-we-collect": "Hogyan gyűjtöttük össze ezeket az adatokat?",
-		"powered-by": "A szolgáltatást biztosítja:",
-		"powered-by-wise": "A Wise támogatásával",
-		"powered-by-wise-description": "Olyan szolgáltatókat választottunk partnereinknek, akik szintén hisznek a korrekt és átlátható pénzügyekben. Ennek köszönhetően a Wise által támogatott összes szolgáltató ugyanazt a remek árfolyamot használja, amit mi.",
 		"show-less-providers": "Kevesebb szolgáltató mutatása",
 		"show-more-providers": "Több szolgáltató mutatása",
 		"should-arrive": "Becsült érkezési idő:",
@@ -207,9 +183,6 @@
 		"disclaimer-without-borders": "bagi mereka yang tinggal di lintas negara.",
 		"disclaimer-charges": "Kami mengenakan biaya sekecil mungkin, dan selalu menunjukkannya kepada Anda di depan. Tanpa biaya tersembunyi. Tanpa nilai tukar yang buruk. Tanpa kejutan.",
 		"disclaimer-how-do-we-collect": "Bagaimana kami mengumpulkan data ini?",
-		"powered-by": "Didukung oleh",
-		"powered-by-wise": "Didukung oleh Wise",
-		"powered-by-wise-description": "Kami bermitra dengan penyedia lain yang juga percaya akan keadilan dan keterbukaan. Itulah alasan semua penyedia layanan yang didukung oleh Wise memiliki harga yang sama.",
 		"show-less-providers": "Tampilkan lebih sedikit penyedia",
 		"show-more-providers": "Tampilkan lebih banyak penyedia",
 		"should-arrive": "Akan tiba",
@@ -231,9 +204,6 @@
 		"disclaimer-without-borders": "per chi vive senza confini.",
 		"disclaimer-charges": "Ti richiediamo la minor commissione possibile, definendola sempre chiaramente. Niente scritte in piccolo. Nessun ritocco al tasso di cambio. Nessuna cattiva sorpresa.",
 		"disclaimer-how-do-we-collect": "Come raccogliamo questi dati?",
-		"powered-by": "Fornito da",
-		"powered-by-wise": "Offerto da Wise",
-		"powered-by-wise-description": "Siamo partner di altri operatori che credono nella trasparenza e nell'onestà. Per questo, ogni operatore che usa la tecnologia Wise offre anche le stesse tariffe.",
 		"show-less-providers": "Mostra meno operatori",
 		"show-more-providers": "Mostra più operatori",
 		"should-arrive": "Dovrebbe arrivare",
@@ -255,9 +225,6 @@
 		"disclaimer-without-borders": "海外送金を行う全ての方へ。",
 		"disclaimer-charges": "弊社では可能な限り、送金にかかるコスト(手数料)を提示しています。隠れコストなどはございません。",
 		"disclaimer-how-do-we-collect": "データの収集方法について",
-		"powered-by": "Powered by",
-		"powered-by-wise": "Powered by Wise",
-		"powered-by-wise-description": "Wiseは公平性と透明性を取り入れている他の事業会社と業務提携をしています。そのため、業務提携をしている事業会社では、Wiseと同じ料金プランが適用されています。",
 		"show-less-providers": "元に戻す",
 		"show-more-providers": "もっと見る",
 		"should-arrive": "着金予定日時",
@@ -279,9 +246,6 @@
 		"disclaimer-without-borders": "for people without borders.",
 		"disclaimer-charges": "We charge as little as possible, and we always show you upfront. No hidden fees. No bad exchange rates. No surprises.",
 		"disclaimer-how-do-we-collect": "Hoe verzamelen wij deze gegevens?",
-		"powered-by": "Powered by",
-		"powered-by-wise": "Powered by Wise",
-		"powered-by-wise-description": "We've partnered with other providers who believe in fairness and transparency. That’s why all providers powered by Wise have the same price.",
 		"show-less-providers": "Show fewer providers",
 		"show-more-providers": "Show more providers",
 		"should-arrive": "Verwachte aankomsttijd",
@@ -303,9 +267,6 @@
 		"disclaimer-without-borders": "for people without borders.",
 		"disclaimer-charges": "We charge as little as possible, and we always show you upfront. No hidden fees. No bad exchange rates. No surprises.",
 		"disclaimer-how-do-we-collect": "How do we collect this data?",
-		"powered-by": "Powered by",
-		"powered-by-wise": "Powered by Wise",
-		"powered-by-wise-description": "We've partnered with other providers who believe in fairness and transparency. That’s why all providers powered by Wise have the same price.",
 		"show-less-providers": "Show fewer providers",
 		"show-more-providers": "Show more providers",
 		"should-arrive": "Bør ankomme",
@@ -327,9 +288,6 @@
 		"disclaimer-without-borders": "dla tych bez granic.",
 		"disclaimer-charges": "Pobieramy opłatę najmniejszą, jaka jest możliwa i zawsze z góry pokazujemy koszty. Żadnych ukrytych opłat. Żadnych niekorzystnych kursów wymiany. Żadnych niespodzianek.",
 		"disclaimer-how-do-we-collect": "Jak zbieramy dane?",
-		"powered-by": "Wspierane przez",
-		"powered-by-wise": "Wspierane przez Wise",
-		"powered-by-wise-description": "Jesteśmy partnerami z innymi dostawcami, którzy wierzą w sprawiedliwość i przejrzystość. Dlatego też wszyscy dostawcy wspierani przez Wise, posiadają takie same opłaty.",
 		"show-less-providers": "Pokaż mniej usługodawców",
 		"show-more-providers": "Pokaż więcej usługodawców",
 		"should-arrive": "Powinny dotrzeć",
@@ -351,9 +309,6 @@
 		"disclaimer-without-borders": "para pessoas que vivem sem fronteiras.",
 		"disclaimer-charges": "Cobramos o mínimo possível e sempre mostramos o valor antecipadamente. Sem tarifas escondidas. Sem câmbio ruim. Sem surpresas.",
 		"disclaimer-how-do-we-collect": "Como coletamos esses dados?",
-		"powered-by": "Potencializado pela",
-		"powered-by-wise": "Oferecido pela Wise",
-		"powered-by-wise-description": "Fizemos parcerias com outros prestadores de serviços que acreditam em justiça e transparência. É por isso que todos os provedores com a tecnologia da Wise têm o mesmo preço.",
 		"show-less-providers": "Exibir menos provedores",
 		"show-more-providers": "Exibir mais provedores",
 		"should-arrive": "Deve chegar",
@@ -375,9 +330,6 @@
 		"disclaimer-without-borders": "pentru oameni fără frontiere.",
 		"disclaimer-charges": "Încasăm cât mai puțin posibil și îți arătăm întotdeauna taxa încă de la început. Fără taxe ascunse. Fără rate de schimb neavantajoase. Fără surprize.",
 		"disclaimer-how-do-we-collect": "Cum colectăm aceste date?",
-		"powered-by": "Susținut de",
-		"powered-by-wise": "Susținut de Wise",
-		"powered-by-wise-description": "Avem parteneriate cu alți furnizori care cred în corectitudine și transparență. De aceea toți furnizorii susținuți de Wise au același preț.",
 		"show-less-providers": "Arată mai puțini furnizori",
 		"show-more-providers": "Arată mai mulți furnizori",
 		"should-arrive": "Ar trebui să ajungă",
@@ -399,9 +351,6 @@
 		"disclaimer-without-borders": "для тех, кто живет без границ.",
 		"disclaimer-charges": "Наша комиссия максимально низкая, и Вы всегда заранее узнаете ее размер. Нет - скрытым комиссиям. Нет - невыгодному обменному курсу. Нет - неприятным сюрпризам.",
 		"disclaimer-how-do-we-collect": "Откуда мы получаем данные?",
-		"powered-by": "При поддержке",
-		"powered-by-wise": "При поддержке Wise",
-		"powered-by-wise-description": "Мы начали сотрудничество с провайдерами, которые верят в справедливость и прозрачность. Именно поэтому все провайдеры, которых поддерживает Wise, предлагают одинаковую комиссию.",
 		"show-less-providers": "Показать меньше провайдеров",
 		"show-more-providers": "Показать больше провайдеров",
 		"should-arrive": "Ожидаемое время доставки",
@@ -423,9 +372,6 @@
 		"disclaimer-without-borders": "for people without borders.",
 		"disclaimer-charges": "We charge as little as possible, and we always show you upfront. No hidden fees. No bad exchange rates. No surprises.",
 		"disclaimer-how-do-we-collect": "How do we collect this data?",
-		"powered-by": "Powered by",
-		"powered-by-wise": "Powered by Wise",
-		"powered-by-wise-description": "We've partnered with other providers who believe in fairness and transparency. That’s why all providers powered by Wise have the same price.",
 		"show-less-providers": "Show fewer providers",
 		"show-more-providers": "Show more providers",
 		"should-arrive": "Peniaze by mali doraziť",
@@ -447,9 +393,6 @@
 		"disclaimer-without-borders": "för människor utan gränser.",
 		"disclaimer-charges": "Vi debiterar så lite som möjligt och vi visar dig alltid i förväg. Inga dolda avgifter. Inga dåliga valutakurser. Inga överraskningar.",
 		"disclaimer-how-do-we-collect": "Hur samlar vi in dessa data?",
-		"powered-by": "Tillhandahålls av",
-		"powered-by-wise": "Drivs av Wise",
-		"powered-by-wise-description": "Wise samarbetar med leverantörer som också tror på rättvisa och öppenhet. Därför erbjuder samtliga av våra leverantörer samma pris.",
 		"show-less-providers": "Visa färre leverantörer",
 		"show-more-providers": "Visa fler leverantörer",
 		"should-arrive": "Bör komma fram",
@@ -471,9 +414,6 @@
 		"disclaimer-without-borders": "sınırlara takılmayan insanlar için.",
 		"disclaimer-charges": "Olabildiğince düşük ücretlendirir ve ücreti önden gösteririz. Gizli ücretler yok. Kötü döviz kurları yok. Şaşırtmaca yok.",
 		"disclaimer-how-do-we-collect": "Bu verileri nasıl toplarız?",
-		"powered-by": "Destekleyen",
-		"powered-by-wise": "Wise tarafından",
-		"powered-by-wise-description": "Adalet ve şeffaflığa inanan diğer sağlayıcılarla ortaklık kurduk. O nedenle Wise tarafından desteklenen tüm sağlayıcılar aynı fiyatı verir.",
 		"show-less-providers": "Daha az sağlayıcı göster",
 		"show-more-providers": "Daha fazla sağlayıcı göster",
 		"should-arrive": "Ulaşması gereken zaman:",
@@ -495,9 +435,6 @@
 		"disclaimer-without-borders": "та стерти кордони в грошових переказах.",
 		"disclaimer-charges": "Наша комісія максимально низька, і Ви завжди заздалегідь знаєте її розмір. Ні — прихованим комісіям і невигідним курсам. Усе максимально прозоро, стабільно й передбачувано.",
 		"disclaimer-how-do-we-collect": "Як ми збираємо ці дані?",
-		"powered-by": "На платформі",
-		"powered-by-wise": "На платформі Wise",
-		"powered-by-wise-description": "Ми співпрацюємо з іншими постачальниками, що поділяють наше прагнення до справедливості та прозорості. Саме тому постачальники на платформі Wise надають такі ж ціни.",
 		"show-less-providers": "Приховати частину постачальників",
 		"show-more-providers": "Показати більше постачальників",
 		"should-arrive": "Очікуваний час надходження",
@@ -519,9 +456,6 @@
 		"disclaimer-without-borders": "給無國界的人。",
 		"disclaimer-charges": "我們盡可能收得最平，亦會預先顯示收費。沒有隱藏收費。沒有糟透的匯率。沒有驚喜。",
 		"disclaimer-how-do-we-collect": "我們如何收集此資料？",
-		"powered-by": "技術支援：",
-		"powered-by-wise": "由Wise提供支持",
-		"powered-by-wise-description": "我們與其他同樣相信公平透明的代理合作。這是為甚麼所有由Wise支持的代理會有相同的價格。",
 		"show-less-providers": "顯示更少匯款代理",
 		"show-more-providers": "顯示更多匯款代理",
 		"should-arrive": "預計到賬日期",

package/src/comparison-table-hero/components/ComparisonTableHero.js

@@ -178,7 +178,12 @@ class ComparisonTableHero extends React.Component {
                   <td
                     className={`${derivedStyles['table-hero__cell']} ${providerDependentStyles.cell}`}
                   >
-                    <ProviderLogo logo={logo} name={quote.name} isPartner={quote.partner} />
+                    <ProviderLogo
+                      logo={logo}
+                      name={quote.name}
+                      isPartner={quote.partner}
+                      locale={lang}
+                    />
                     {isCheapest && (
                       <span className={derivedStyles.cheapestLabel}>
                         <CheckIcon className={derivedStyles.cheapestLabelTick} />

package/src/comparison-table-versus/components/ComparisonTableVersus.js

@@ -38,6 +38,7 @@ var ComparisonTableVersus = ({
                     styles={{ providerLogo: derivedStyles['table-versus__provider_logo'] }}
                     logo={quote.logo}
                     name={quote.name}
+                    locale={lang}
                   />
                 </td>
                 <td className={derivedStyles['table-versus__cell']}>

package/src/comparison-table-versus/components/ComparisonTableVersus.stories.js

@@ -101,6 +101,7 @@ const someLogo = (
     styles={{ logoContainer: { display: 'inherit' } }}
     logo="https://dq8dwmysp7hk1.cloudfront.net/logos/monzo--white.svg"
     name="WU"
+    locale="en"
   />
 );
 

package/src/domain/Locale.ts

@@ -0,0 +1,27 @@
+enum Locale {
+  DEFAULT = 'en',
+  BG = 'bg',
+  CS = 'cs',
+  DE = 'de',
+  EL = 'el',
+  EN = 'en',
+  ES = 'es',
+  FR = 'fr',
+  HU = 'hu',
+  ID = 'id',
+  IT = 'it',
+  JA = 'ja',
+  NL = 'nl',
+  NO = 'no',
+  PL = 'pl',
+  PT = 'pt',
+  RO = 'ro',
+  RU = 'ru',
+  SK = 'sk',
+  SV = 'sv',
+  TR = 'tr',
+  UK = 'uk',
+  ZH = 'zh',
+}
+
+export default Locale;

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

@@ -2,6 +2,8 @@ import { action } from '@storybook/addon-actions';
 import { Meta, Story } from '@storybook/react';
 import React from 'react';
 
+import Locale from '../domain/Locale';
+
 import TransferFeeComparison, { TransferFeeComparisonProps } from './TransferFeeComparison';
 import ProviderFilteringOption from './domain/ProviderFilteringOption';
 import { ALL_QUOTES } from './mocks/Quotes';
@@ -26,6 +28,6 @@ Presentational.args = {
     selectedOption: ProviderFilteringOption.ALL_PROVIDERS,
     onProviderFilteringOptionChange: action('providerFiltering.onProviderFilteringOptionChange'),
   },
-  locale: 'en',
+  locale: Locale.EN,
   urlLocale: 'gb',
 };

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

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import Locale from '../domain/Locale';
+
 import styles from './TransferFeeComparison.module.less';
 import ProviderFilteringOption from './domain/ProviderFilteringOption';
 import Quote from './domain/Quote';
@@ -15,7 +17,7 @@ export type TransferFeeComparisonProps = {
     selectedOption: ProviderFilteringOption;
     onProviderFilteringOptionChange: (newValue: ProviderFilteringOption) => void;
   };
-  locale: string;
+  locale: Locale;
   urlLocale: string;
 };
 

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

@@ -1,6 +1,8 @@
 import { Meta, Story } from '@storybook/react';
 import React from 'react';
 
+import Locale from '../domain/Locale';
+
 import TransferFeeComparisonContainer, {
   TransferFeeComparisonContainerProps,
 } from './TransferFeeComparisonContainer';
@@ -20,16 +22,17 @@ export const ContainerWithLargestProviderFilteringEnabled = Template.bind({});
 ContainerWithLargestProviderFilteringEnabled.args = {
   quotes: ALL_QUOTES,
   midmarketRate: MIDMARKET_RATE,
-  locale: 'en',
+  locale: Locale.EN,
   urlLocale: 'gb',
   enableLargestProviderFiltering: true,
+  requiredNumberOfLargestProviders: 3,
 };
 
 export const ContainerWithLargestProviderFilteringDisabled = Template.bind({});
 ContainerWithLargestProviderFilteringDisabled.args = {
   quotes: ALL_QUOTES,
   midmarketRate: MIDMARKET_RATE,
-  locale: 'en',
+  locale: Locale.EN,
   urlLocale: 'gb',
   enableLargestProviderFiltering: false,
 };

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

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 
+import Locale from '../domain/Locale';
 import { filter, hasEnoughProviders } from '../provider-filters/largest-provider';
 
 import TransferFeeComparison from './TransferFeeComparison';
@@ -9,7 +10,7 @@ import Quote from './domain/Quote';
 export type TransferFeeComparisonContainerProps = {
   quotes: Quote[];
   midmarketRate: number;
-  locale: string;
+  locale: Locale;
   urlLocale: string;
   enableLargestProviderFiltering: boolean;
   requiredNumberOfLargestProviders?: number;

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

@@ -1,6 +1,7 @@
 import { render, fireEvent, screen } from '@testing-library/react';
 import * as React from 'react';
 
+import Locale from '../../domain/Locale';
 import ProviderFilteringOption from '../domain/ProviderFilteringOption';
 
 import ProviderFilterToggle from './ProviderFilterToggle';
@@ -31,7 +32,9 @@ describe('<ProviderFilterToggle />', () => {
     'renders the component with activeToggle $activeToggle selected',
     ({ activeToggle, activeToggleText, inactiveToggleText }) => {
       // setup:
-      render(<ProviderFilterToggle activeToggle={activeToggle} onToggle={onToggle} locale="en" />);
+      render(
+        <ProviderFilterToggle activeToggle={activeToggle} onToggle={onToggle} locale={Locale.EN} />,
+      );
 
       // expect:
       expect(screen.getByText(activeToggleText)).toBeDisabled();
@@ -45,7 +48,7 @@ describe('<ProviderFilterToggle />', () => {
       <ProviderFilterToggle
         activeToggle={ProviderFilteringOption.ALL_PROVIDERS}
         onToggle={onToggle}
-        locale="en"
+        locale={Locale.EN}
       />,
     );
 
@@ -54,7 +57,7 @@ describe('<ProviderFilterToggle />', () => {
       <ProviderFilterToggle
         activeToggle={ProviderFilteringOption.LARGEST_PROVIDERS}
         onToggle={onToggle}
-        locale="en"
+        locale={Locale.EN}
       />,
     );
 
@@ -67,7 +70,9 @@ describe('<ProviderFilterToggle />', () => {
     'toggling with $activeToggle pre-selected calls the onToggle callback',
     ({ activeToggle, inactiveToggleText, expectedEventPayloadOnToggle }) => {
       // setup:
-      render(<ProviderFilterToggle activeToggle={activeToggle} onToggle={onToggle} locale="en" />);
+      render(
+        <ProviderFilterToggle activeToggle={activeToggle} onToggle={onToggle} locale={Locale.EN} />,
+      );
 
       expect(onToggle).toHaveBeenCalledTimes(0);
 
@@ -84,7 +89,9 @@ describe('<ProviderFilterToggle />', () => {
     'clicking the pre-selected $activeToggle toggle doesnt call the onToggle callback',
     ({ activeToggle, activeToggleText }) => {
       // setup:
-      render(<ProviderFilterToggle activeToggle={activeToggle} onToggle={onToggle} locale="en" />);
+      render(
+        <ProviderFilterToggle activeToggle={activeToggle} onToggle={onToggle} locale={Locale.EN} />,
+      );
 
       expect(onToggle).toHaveBeenCalledTimes(0);
 

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

@@ -2,6 +2,7 @@ import { action } from '@storybook/addon-actions';
 import { Meta, Story } from '@storybook/react';
 import React from 'react';
 
+import Locale from '../../domain/Locale';
 import ProviderFilteringOption from '../domain/ProviderFilteringOption';
 
 import ProviderFilterToggle, { ProviderFilterToggleProps } from './ProviderFilterToggle';
@@ -18,6 +19,6 @@ const Template: Story<ProviderFilterToggleProps> = (args) => {
 export const Toggle = Template.bind({});
 Toggle.args = {
   activeToggle: ProviderFilteringOption.LARGEST_PROVIDERS,
-  locale: 'en',
+  locale: Locale.EN,
   onToggle: action('onToggle'),
 };

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

@@ -2,15 +2,16 @@ import { Button } from '@transferwise/components';
 import React from 'react';
 import { FormattedMessage, IntlProvider } from 'react-intl';
 
+import Locale from '../../domain/Locale';
 import ProviderFilteringOption from '../domain/ProviderFilteringOption';
-import translations from './assets/translations/translations.json';
 
+import translations from './assets/translations/translations.json';
 import styles from './provider-filter-toggle.module.less';
 
 export type ProviderFilterToggleProps = {
   activeToggle: ProviderFilteringOption;
   onToggle: (toggleValue: ProviderFilteringOption) => void;
-  locale: string;
+  locale: Locale;
 };
 
 export const ProviderFilterToggle = ({
@@ -18,11 +19,8 @@ export const ProviderFilterToggle = ({
   onToggle,
   locale,
 }: ProviderFilterToggleProps): JSX.Element => {
-  const typedTranslations: { [language: string]: typeof messages } = translations;
-  const messages: Record<string, string> = typedTranslations[locale];
-
   return (
-    <IntlProvider messages={messages} locale={locale} defaultLocale="en">
+    <IntlProvider messages={translations[locale]} locale={locale} defaultLocale={Locale.DEFAULT}>
       <div className={styles.providerFilterToggle__toggleContainer}>
         <Toggle
           label={<FormattedMessage id="largest-providers" />}
@@ -51,11 +49,7 @@ type ToggleProps = {
 const Toggle = ({ label, value, isActive, onToggle }: ToggleProps): JSX.Element => {
   return (
     <Button
-      className={`${styles.providerFilterToggle__button} ${
-        isActive
-          ? styles.providerFilterToggle__buttonActive
-          : styles.providerFilterToggle__buttonInactive
-      }`}
+      className={styles.providerFilterToggle__button}
       onClick={() => {
         !isActive && onToggle(value);
       }}

package/src/transfer-fee-comparison/provider-filter-toggle/provider-filter-toggle.module.less

@@ -1,8 +1,7 @@
 @import (reference) '@transferwise/neptune-css/dist/less/neptune-tokens.less';
 
 .provider-filter-toggle__toggle-container {
-  display: flex;
-  flex-direction: row;
+  display: inline-block;
   padding: 4px 5.5px;
   border-radius: 3px;
   border-color: @color-base-white;
@@ -13,37 +12,35 @@
   margin-left: 9px;
 }
 
-.provider-filter-toggle__button {
-  width: 180px;
+button.provider-filter-toggle__button {
+  width: 290px; // Portuguese has the longest copy
   border: none;
-}
 
-.provider-filter-toggle__button--inactive {
-  width: 180px;
-  border: none;
-  background-color: @color-base-white;
-  color: @color-accent;
-
-  &:active:hover,
-  &:hover,
-  &:active,
-  &:focus {
+  &:not([disabled]) {
     background-color: @color-base-white;
     color: @color-accent;
-  }
-}
 
-button.provider-filter-toggle__button[disabled] {
-  background-color: @color-accent;
-  color: @color-base-white;
+    &:active:hover,
+    &:hover,
+    &:active,
+    &:focus {
+      background-color: @color-base-white;
+      color: @color-accent;
+    }
+  }
 
-  &:active:hover,
-  &:hover,
-  &:active,
-  &:focus {
+  &[disabled] {
     background-color: @color-accent;
     color: @color-base-white;
-  }
 
-  cursor: initial;
+    &:active:hover,
+    &:hover,
+    &:active,
+    &:focus {
+      background-color: @color-accent;
+      color: @color-base-white;
+    }
+
+    cursor: initial;
+  }
 }

package/src/transfer-fee-comparison/transfer-fee-comparison-footer/TransferFeeComparisonFooter.stories.tsx

@@ -1,6 +1,8 @@
 import { Meta, Story } from '@storybook/react';
 import React from 'react';
 
+import Locale from '../../domain/Locale';
+
 import TransferFeeComparisonFooter, {
   TransferFeeComparisonFooterProps,
 } from './TransferFeeComparisonFooter';
@@ -17,6 +19,6 @@ const Template: Story<TransferFeeComparisonFooterProps> = (args) => {
 export const Footer = Template.bind({});
 
 Footer.args = {
-  locale: 'en',
+  locale: Locale.EN,
   urlLocale: 'gb',
 };

package/src/transfer-fee-comparison/transfer-fee-comparison-footer/TransferFeeComparisonFooter.tsx

@@ -1,13 +1,14 @@
 import React from 'react';
 import { FormattedMessage, IntlProvider } from 'react-intl';
 
+import Locale from '../../domain/Locale';
 import createUrl from '../../resources/createUrl';
-import translations from './assets/translations/translations.json';
 
+import translations from './assets/translations/translations.json';
 import componentStyles from './transfer-fee-comparison-footer.module.less';
 
 export type TransferFeeComparisonFooterProps = {
-  locale: string;
+  locale: Locale;
   urlLocale: string;
 };
 
@@ -15,13 +16,10 @@ const TransferFeeComparisonFooter = ({
   locale,
   urlLocale,
 }: TransferFeeComparisonFooterProps): JSX.Element => {
-  const typedTranslations: { [language: string]: typeof messages } = translations;
-  const messages: Record<string, string> = typedTranslations[locale];
-
   const LINK = createUrl(`/${urlLocale}/compare/disclaimer`);
 
   return (
-    <IntlProvider messages={messages} locale={locale} defaultLocale="en">
+    <IntlProvider messages={translations[locale]} locale={locale} defaultLocale={Locale.DEFAULT}>
       <div className={componentStyles.transferFeeComparisonFooter__disclaimer}>
         <FormattedMessage id="disclaimer" />
         {'. '}

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

@@ -1,6 +1,7 @@
 import { Meta, Story } from '@storybook/react';
 import React from 'react';
 
+import Locale from '../../domain/Locale';
 import { ALL_QUOTES } from '../mocks/Quotes';
 import MIDMARKET_RATE from '../mocks/midmarket-rate';
 
@@ -23,5 +24,5 @@ Table.args = {
   quotes: ALL_QUOTES,
   midmarketRate: MIDMARKET_RATE,
   urlLocale: 'gb',
-  locale: 'en',
+  locale: Locale.EN,
 };

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

@@ -1,12 +1,13 @@
 import React from 'react';
 
+import Locale from '../../domain/Locale';
 import TransferFeeComparisonQuote from '../domain/Quote';
 
 export type TransferFeeComparisonTableProps = {
   quotes: TransferFeeComparisonQuote[];
   midmarketRate: number;
   urlLocale: string;
-  locale: string;
+  locale: Locale;
 };
 
 const TransferFeeComparisonTable = ({