@transferwise/comparison-components 18.1.8 → 18.1.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/comparison-components",
-  "version": "18.1.8",
+  "version": "18.1.12",
   "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/common/IsMobile/IsMobile.ts

@@ -0,0 +1,9 @@
+import { Breakpoint } from '@transferwise/components';
+
+import { default as useClientWidth } from '../UseClientWidth';
+
+export function IsMobile(): boolean {
+  const windowReference = typeof window === 'undefined' ? undefined : window;
+  const [clientWidth] = useClientWidth({ ref: windowReference }) as unknown as number[];
+  return clientWidth <= Breakpoint.SMALL;
+}

package/src/common/IsMobile/index.js

@@ -0,0 +1 @@
+export { IsMobile as default } from './IsMobile';

package/src/common/UseClientWidth/index.js

@@ -0,0 +1 @@
+export { useClientWidth as default } from './useClientWidth';

package/src/common/UseClientWidth/useClientWidth.js

@@ -0,0 +1,43 @@
+// Copied from:
+// https://github.com/transferwise/neptune-web/blob/5e97eae7a6b0575faf7853b802a35a000459472c/packages/components/src/common/hooks/useClientWidth/useClientWidth.js
+import throttle from 'lodash.throttle';
+import { useLayoutEffect, useState, useEffect } from 'react';
+
+const THROTTLE_MS = 100;
+
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+
+export const useClientWidth = ({ ref, throttleMs = THROTTLE_MS }) => {
+  const [clientWidth, setClientWidth] = useState(null);
+
+  useIsomorphicLayoutEffect(() => {
+    // eslint-disable-next-line unicorn/consistent-function-scoping
+    const updateClientWidth = () => {
+      if (ref) {
+        // when `ref` is a window
+        if (ref.innerWidth) {
+          setClientWidth(ref.innerWidth);
+        }
+        // when `ref` is an element
+        else if (ref.current) {
+          setClientWidth(ref.current.clientWidth);
+        }
+      }
+    };
+    // This assignment saves a reference to the function so it will be the same passed to both addEventListener removeEventListener.
+    // If throttle gets passed directly to both add and removeEventListenet the results will be that the event
+    // won't get removed even if the component is unmounted.
+    const attachedFunction = throttle(updateClientWidth, throttleMs);
+
+    window.addEventListener('resize', attachedFunction, true);
+
+    updateClientWidth();
+
+    return () => window.removeEventListener('resize', attachedFunction, true);
+  }, []);
+
+  return [clientWidth];
+};
+
+// eslint-disable-next-line fp/no-mutation
+useClientWidth.THROTTLE_MS = THROTTLE_MS;

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

@@ -18,18 +18,17 @@ describe('quotes v3 response transformations to the canonical model V2', () => {
               fee: 2,
               dateCollected: new Date('2018-10-23T12:03:27'),
               receivedAmount: 1278.44,
-              sendAmount: 1280.44,
             },
             {
               rate: 1,
               fee: 3,
               dateCollected: new Date('2018-10-23T12:03:27'),
               receivedAmount: 1277.44,
-              sendAmount: 1280.44,
             },
           ],
         },
       ],
+      sendAmount: 1280.44,
       sourceCurrency: 'GBP',
       targetCurrency: 'EUR',
     };
@@ -81,11 +80,11 @@ describe('quotes v3 response transformations to the canonical model V2', () => {
               fee: 2,
               dateCollected: new Date('2018-10-23T12:03:27'),
               receivedAmount: 1252.8712,
-              sendAmount: 1280.44,
             },
           ],
         },
       ],
+      sendAmount: 1280.44,
       sourceCurrency: 'GBP',
       targetCurrency: 'EUR',
     };
@@ -112,10 +111,10 @@ describe('quotes v3 response transformations to the canonical model V2', () => {
               },
               {
                 type: FeeType.HIDDEN,
-                amount: { value: 25.569, currency: 'GBP' },
+                amount: { value: 25.57, currency: 'GBP' },
               },
             ],
-            total: { value: 27.569, currency: 'GBP' },
+            total: { value: 27.57, currency: 'GBP' },
           },
           receiveAmount: { value: 1252.8712, currency: 'EUR' },
         },

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

@@ -20,9 +20,9 @@ function extractHiddenFeeInSourceCurrency(
 ) {
   const expectedReceivedAmount = midmarketRate * (sendAmount - marketedFee);
   const hiddenFeePaidOnTargetCurrency =
-    receivedAmount < expectedReceivedAmount ? expectedReceivedAmount - receivedAmount : 0;
+    receivedAmount < expectedReceivedAmount - 0.1 ? expectedReceivedAmount - receivedAmount : 0;
 
-  return parseFloat((hiddenFeePaidOnTargetCurrency * (1 / midmarketRate)).toFixed(3));
+  return parseFloat((hiddenFeePaidOnTargetCurrency * (1 / midmarketRate)).toFixed(2));
 }
 
 function extractFees(
@@ -57,7 +57,7 @@ function transformQuotesResponseV2(
     // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
     const quote: LegacyQuote = extractQuote(p.quotes, quotesResults.targetCurrency);
     const hiddenFee: number = extractHiddenFeeInSourceCurrency(
-      quote.sendAmount,
+      quotesResults.sendAmount,
       quote.receivedAmount,
       quote.fee,
       midmarketRate,

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

@@ -57,6 +57,8 @@ const TransferFeeComparisonContainer = ({
       ? filter(quotes, urlLocale)
       : quotes;
 
+  filteredQuotes.sort((a, b) => a.fees.total.value - b.fees.total.value);
+
   const getTrackingAttributes = () => {
     return {
       largestProviderEnabled: enableLargestProviderFiltering,

package/src/transfer-fee-comparison/domain/LegacyComparisons.ts

@@ -2,6 +2,7 @@ type LegacyComparisons = {
   providers: Provider[];
   sourceCurrency: string;
   targetCurrency: string;
+  sendAmount: number;
 };
 
 type Provider = {
@@ -16,7 +17,6 @@ type LegacyQuote = {
   fee: number;
   rate: number;
   receivedAmount: number;
-  sendAmount: number;
   dateCollected: Date;
 };
 

package/src/transfer-fee-comparison/transfer-fee-comparison-table-row/TransferFeeComparisonTableRow.module.less

@@ -28,7 +28,7 @@
 .row__provider-logo {
   position: relative;
   flex: 1;
-  margin-left: @spacer;
+  margin-left: @spacer * 1.5;
 
   @media (min-width: @screen-md) {
     margin-left: @spacer * 6;
@@ -50,7 +50,7 @@
 }
 
 .row__fee {
-  margin: 0 (@spacer * 0.5);
+  margin: 0 (@spacer * 1.5);
 
   @media (min-width: @screen-md) {
     margin: 0 (@spacer * 1.5);
@@ -58,13 +58,10 @@
 }
 
 .row__fee-makeup {
-  position: relative;
-  width: 24px;
-  height: 24px;
-  margin-top: -25px;
-  margin-right: @spacer;
-
   @media (min-width: @screen-md) {
+    position: relative;
+    width: 24px;
+    height: 24px;
     margin-top: -24px;
     margin-right: @spacer * 3;
   }

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

@@ -1,6 +1,6 @@
-import React from 'react';
-// eslint-disable-next-line no-restricted-imports
+import React, { useState, MouseEvent } from 'react';
 
+import IsMobile from '../../common/IsMobile';
 import ProviderLogo from '../../common/ProviderLogo';
 import Locale from '../../domain/Locale';
 import TW_ALIAS from '../../resources/provider-constants';
@@ -29,6 +29,15 @@ const TransferFeeComparisonTableRow = ({
     currency: quote.route.sourceCurrency,
     value: 0,
   };
+  const [feeBreakdownOpen, setFeeBreakdownOpen] = useState(false);
+  const isMobile = IsMobile() as boolean;
+
+  const handleRowClick = (event: MouseEvent<HTMLDivElement>) => {
+    const target = event.target as HTMLElement;
+    if (isMobile && !(isTargetAnotherBottomSheet(target) || feeBreakdownOpen)) {
+      setFeeBreakdownOpen(true);
+    }
+  };
 
   const logo: string =
     quote.provider.alias === TW_ALIAS
@@ -36,8 +45,8 @@ const TransferFeeComparisonTableRow = ({
       : quote.provider.logoUrl;
 
   return (
-    <div>
-      <tr className={containerStyle(quote)}>
+    <>
+      <tr onClick={handleRowClick} className={containerStyle(quote)}>
         <td className={componentStyles.row__providerLogo}>
           <ProviderLogo
             logo={logo}
@@ -59,17 +68,23 @@ const TransferFeeComparisonTableRow = ({
           <FeeMakeupPopover
             quote={quote}
             midmarketRate={midmarketRate}
+            open={feeBreakdownOpen}
+            onClose={() => setFeeBreakdownOpen(false)}
             urlLocale={urlLocale}
             locale={locale}
           />
         </td>
       </tr>
       {!nextQuote || isProviderWise(quote) || isProviderWise(nextQuote) ? (
-        ''
+        <tr />
       ) : (
-        <hr className={componentStyles.transferFeeComparisonTableRow__border} />
+        <tr>
+          <td>
+            <hr className={componentStyles.transferFeeComparisonTableRow__border} />
+          </td>
+        </tr>
       )}
-    </div>
+    </>
   );
 };
 
@@ -79,4 +94,29 @@ const containerStyle = (quote: TransferFeeComparisonQuote) =>
 const isProviderWise = (quote: TransferFeeComparisonQuote) =>
   quote && quote.provider.alias === TW_ALIAS;
 
+/**
+ * Neptune's Bottomsheet propagates the onClick events to child components, and this is an issue here because
+ * the user can trigger the opening of a bottom sheet when trying to close another one.
+ *
+ * This is problematic specially because we have the "PoweredBy" bottom sheet in each row, too.
+ *
+ * This function takes the target (the element the user clicked) and check if it's clicking on top of the
+ * "Powered By" element, or on another bottom sheet.
+ *
+ * @param target
+ */
+const isTargetAnotherBottomSheet = (target: HTMLElement): boolean => {
+  const targetClassName = target.className;
+  if (typeof target.className !== 'string') {
+    return false;
+  }
+  return (
+    targetClassName.startsWith('twLogo') ||
+    targetClassName.startsWith('poweredBy') ||
+    targetClassName.startsWith('np-popover') ||
+    targetClassName.startsWith('np-bottom-sheet') ||
+    targetClassName.includes('dimmer')
+  );
+};
+
 export default TransferFeeComparisonTableRow;

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

@@ -1,7 +1,8 @@
-import { Info, Size } from '@transferwise/components';
+import { BottomSheet, Info, Size } from '@transferwise/components';
 import React from 'react';
 import { IntlProvider } from 'react-intl';
 
+import { default as IsMobile } from '../../../common/IsMobile';
 import Locale from '../../../domain/Locale';
 import TransferFeeComparisonQuote, { FeeType } from '../../domain/Quote';
 
@@ -13,6 +14,8 @@ import componentStyles from './fee-makeup-popover.module.less';
 export type FeeMakeupPopoverProps = {
   quote: TransferFeeComparisonQuote;
   midmarketRate: number;
+  open: boolean;
+  onClose: () => void;
   urlLocale: string;
   locale: Locale;
 };
@@ -20,13 +23,23 @@ export type FeeMakeupPopoverProps = {
 const FeeMakeupPopover = ({
   quote,
   midmarketRate,
+  open,
+  onClose,
   urlLocale,
   locale,
 }: FeeMakeupPopoverProps): JSX.Element => {
+  const content = PopoverContent(quote, midmarketRate, urlLocale, locale);
+
   return (
     <div className={componentStyles.feeMakeupPopover__container}>
       <IntlProvider locale={locale} messages={translations[locale]} defaultLocale={Locale.DEFAULT}>
-        <Info content={PopoverContent(quote, midmarketRate, urlLocale, locale)} size={Size.SMALL} />
+        {IsMobile() ? (
+          <BottomSheet open={open} onClose={onClose}>
+            {content}
+          </BottomSheet>
+        ) : (
+          <Info content={content} size={Size.SMALL} aria-label={translations[locale].close} />
+        )}
       </IntlProvider>
     </div>
   );

package/src/transfer-fee-comparison/transfer-fee-comparison-table-row/fee-makeup-popover/fee-makeup-popover.module.less

@@ -12,17 +12,31 @@
 
 .fee-makeup-popover__font-header {
   margin-bottom: 15px;
+  padding-right: 16px;
+  padding-left: 16px;
   color: @brand-navy;
   font-family: @font-family-base;
   font-size: @font-size-medium;
   line-height: 120%;
+
+  @media (min-width: @screen-md) {
+    padding-right: 0;
+    padding-left: 0;
+  }
 }
 
 .fee-makeup-popover__font-paragraph {
+  padding-right: 16px;
+  padding-left: 16px;
   color: @brand-grey;
   font-family: @font-family-base;
   font-size: @font-size-small;
   line-height: 150%;
+
+  @media (min-width: @screen-md) {
+    padding-right: 0;
+    padding-left: 0;
+  }
 }
 
 .fee-makeup-popover__total-amount {