@transferwise/comparison-components 18.1.24 → 18.1.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/comparison-components",
-  "version": "18.1.24",
+  "version": "18.1.25",
   "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/transfer-fee-comparison-table/TransferFeeComparisonTable.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable */
 import { formatMoney } from '@transferwise/formatting';
 import React from 'react';
 import { FormattedMessage, IntlProvider } from 'react-intl';
@@ -33,26 +32,11 @@ export const TransferFeeComparisonTable = ({
   return (
     <table className={componentStyles.transferFeeComparisonTable__rectangle}>
       <thead>
-        <IntlProvider
-          locale={locale}
-          messages={translations[locale]}
-          defaultLocale={Locale.DEFAULT}
-        >
-          <p className={componentStyles.transferFeeComparisonTable__header}>
-            <FormattedMessage
-              id="real-cost"
-              values={{
-                sendAmount: formatMoney(sendAmount.value, sendAmount.currency),
-                targetCurrency: quotes[0].route.targetCurrency,
-                span: (chunks: string) => (
-                  <span className={componentStyles.transferFeeComparisonTable__headerText}>
-                    {chunks}
-                  </span>
-                ),
-              }}
-            />
-          </p>
-        </IntlProvider>
+        <tr>
+          <td colSpan={3}>
+            <HeaderInternal locale={locale} sendAmount={sendAmount} quotes={quotes} />
+          </td>
+        </tr>
       </thead>
       <tbody>
         {quotes.map((quote: TransferFeeComparisonQuote, index: number) => {
@@ -74,4 +58,31 @@ export const TransferFeeComparisonTable = ({
   );
 };
 
+type HeaderInternalProps = {
+  locale: Locale;
+  sendAmount: Money;
+  quotes: TransferFeeComparisonQuote[];
+};
+
+const HeaderInternal = ({ locale, sendAmount, quotes }: HeaderInternalProps): JSX.Element => {
+  return (
+    <IntlProvider locale={locale} messages={translations[locale]} defaultLocale={Locale.DEFAULT}>
+      <p className={componentStyles.transferFeeComparisonTable__header}>
+        <FormattedMessage
+          id="real-cost"
+          values={{
+            sendAmount: formatMoney(sendAmount.value, sendAmount.currency),
+            targetCurrency: quotes[0].route.targetCurrency,
+            span: (chunks: string) => (
+              <span className={componentStyles.transferFeeComparisonTable__headerText}>
+                {chunks}
+              </span>
+            ),
+          }}
+        />
+      </p>
+    </IntlProvider>
+  );
+};
+
 export default TransferFeeComparisonTable;

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

@@ -87,7 +87,9 @@ const TransferFeeComparisonTableRow = ({
         <tr />
       ) : (
         <tr>
-          <hr className={componentStyles.transferFeeComparisonTableRow__border} />
+          <td colSpan={3}>
+            <hr className={componentStyles.transferFeeComparisonTableRow__border} />
+          </td>
         </tr>
       )}
     </>