import { Info, Size, Popover, Position, Loader } from '@transferwise/components';
import { ThemeProvider } from '@wise/components-theming';
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { fetchQuotes, fetchRate } from './clients.js';
import { i as isWiseQuote } from './quoteFilters-9ddc9e2f.js';
import { formatMoney, getRateInAllFormats } from '@transferwise/formatting';
import { Check, More } from '@transferwise/icons';
import { InView } from 'react-intersection-observer';
import { useIntl, FormattedMessage, injectIntl } from 'react-intl';
import { f as filterQuotes, i as isWisePresentAndNotCheapest, C as CurrencyRouteDescription, S as ShowMoreProviders, R as ReceiveAmount } from './ReceiveAmount-cf275e96.js';
import { f as formatDeliveryEstimation, i as isDeliveryEstimationCollectedForAllProviders } from './deliveryEstimationFormatter-39a5e91c.js';
import { s as styleInject } from './style-inject.es-1f59c1d0.js';
import { E as ExchangeRateIndicator } from './ExchangeRateIndicator-7977c22d.js';
import { L as Label } from './Label-19e06f9d.js';
import { P as ProviderLogo } from './ProviderLogo-d98111d0.js';
import { C as ConditionalWrapper, T as TransferFee } from './TransferFee-05335190.js';
import { c as createUrl } from './createUrl-71d09e7b.js';
import { g as generateUrl, A as AvailablePages } from './generateUrl-3fc80d02.js';
import { i as isWiseAlias } from './aliasFilter-a7b9c811.js';
import { i as isConsideredMidmarketRate } from './isConsideredMidmarketRate-4f12041d.js';
import { calculateSavingsWithRespectToWiseQuote } from './savingsCalculator.js';
import { s as sortQuotesByReceivedAmount, T as Table, l as trackTableViewed, m as getTrackingTriggerIndex } from './tracking-7717c145.js';

var css_248z$3 = ".cc_delivery-estimation-hero_3296223122 {\n  font-size: smaller;\n  font-weight: normal;\n}\n@media (max-width: 340px) {\n  .cc_delivery-estimation-hero_3296223122 {\n    font-size: 12px;\n  }\n}\n.cc_delivery-estimation-hero_3296223122 .cc_estimation_3296223122 {\n  font-weight: bold;\n}\n@media not ((min-width: 768px)) {\n  .cc_delivery-estimation-hero_3296223122.cc_extraPadding_3296223122 {\n    padding-right: 20px;\n  }\n}\n\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy9jb21tb24vRGVsaXZlcnlFc3RpbWF0aW9uSGVyby5tb2R1bGUubGVzcyIsIkRlbGl2ZXJ5RXN0aW1hdGlvbkhlcm8ubW9kdWxlLmxlc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRUE7RUFDRSxrQkFBQTtFQUNBLG1CQUFBO0FDREY7QURHRTtFQUFBO0lBQ0UsZUFBQTtFQ0FGO0FBQ0Y7QUROQTtFQVNJLGlCQUFBO0FDQUo7QURJSTtFQUFBO0lBQ0UsbUJBQUE7RUNESjtBQUNGIiwiZmlsZSI6IkRlbGl2ZXJ5RXN0aW1hdGlvbkhlcm8ubW9kdWxlLmxlc3MifQ== */";
var componentStyles$1 = {"delivery-estimation-hero":"cc_delivery-estimation-hero_3296223122","deliveryEstimationHero":"cc_delivery-estimation-hero_3296223122","estimation":"cc_estimation_3296223122","extraPadding":"cc_extraPadding_3296223122"};
styleInject(css_248z$3);

/* eslint-disable react/jsx-filename-extension */
const DeliveryEstimationHero = ({
  deliveryEstimation,
  styles
}) => {
  const derivedStyles = {
    ...componentStyles$1,
    ...styles
  };
  const {
    locale
  } = useIntl();
  function getDeliveryEstimation() {
    const translationOptions = {
      params: {
        estimationClassNames: derivedStyles.estimation
      },
      keySuffix: 'should-arrive'
    };
    return formatDeliveryEstimation(deliveryEstimation, {
      locale,
      translationOptions
    });
  }
  return /*#__PURE__*/React.createElement("div", {
    className: derivedStyles['delivery-estimation-hero']
  }, getDeliveryEstimation());
};
DeliveryEstimationHero.propTypes = {
  deliveryEstimation: PropTypes.shape({
    duration: PropTypes.shape({
      min: PropTypes.string,
      max: PropTypes.string
    }),
    providerGivesEstimate: PropTypes.bool
  }).isRequired,
  styles: PropTypes.shape({
    'delivery-estimation-hero': PropTypes.string
  })
};
DeliveryEstimationHero.defaultProps = {
  styles: {}
};

var css_248z$2 = ".cc_badge-warning_3296223122 {\n  background: #df8700;\n}\n.cc_fee-disclaimer_3296223122 {\n  display: inline-block;\n  min-width: 16px;\n  min-width: var(--size-16);\n  padding: 5px 8px;\n  padding: 5px var(--size-8);\n  font-size: 10px;\n  font-weight: 600;\n  font-weight: var(--font-weight-semi-bold);\n  color: #fff;\n  line-height: 1.2;\n  line-height: var(--line-height-control);\n  vertical-align: middle;\n  white-space: nowrap;\n  text-align: center;\n  background-color: #e74848;\n  background-color: var(--color-interactive-negative);\n  border-radius: 16px;\n  border-radius: var(--radius-medium);\n  top: -1px;\n  position: relative;\n  background: #df8700;\n}\n\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy9jb21tb24vRmVlRGlzY2xhaW1lci5tb2R1bGUubGVzcyIsIkZlZURpc2NsYWltZXIubW9kdWxlLmxlc3MiLCJub2RlX21vZHVsZXMvQHRyYW5zZmVyd2lzZS9uZXB0dW5lLWNzcy9kaXN0L2Nzcy9iYWRnZS5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBR0E7RUFDRSxtQkFBQTtBQ0ZGO0FES0E7RUVORSxxQkFBQTtFQUNBLGVBQUE7RUFDQSx5QkFBQTtFQUNBLGdCQUFBO0VBQ0EsMEJBQUE7RUFDQSxlQUFBO0VBQ0EsZ0JBQUE7RUFDQSx5Q0FBQTtFQUNBLFdBQUE7RUFDQSxnQkFBQTtFQUNBLHVDQUFBO0VBQ0Esc0JBQUE7RUFDQSxtQkFBQTtFQUNBLGtCQUFBO0VBQ0EseUJBQUE7RUFDQSxtREFBQTtFQUNBLG1CQUFBO0VBQ0EsbUNBQUE7RUFDQSxTQUFBO0VBQ0Esa0JBQUE7RUZoQkEsbUJBQUE7QUNxQkYiLCJmaWxlIjoiRmVlRGlzY2xhaW1lci5tb2R1bGUubGVzcyJ9 */";
var componentStyles = {"badge-warning":"cc_badge-warning_3296223122","badgeWarning":"cc_badge-warning_3296223122","fee-disclaimer":"cc_fee-disclaimer_3296223122","feeDisclaimer":"cc_fee-disclaimer_3296223122"};
styleInject(css_248z$2);

const FeeDisclaimer = props => {
  const {
    style,
    text
  } = props;
  return /*#__PURE__*/React.createElement("span", {
    className: style,
    "data-testid": "fee-disclaimer"
  }, text);
};
FeeDisclaimer.propTypes = {
  style: PropTypes.string,
  text: PropTypes.string.isRequired
};
FeeDisclaimer.defaultProps = {
  style: componentStyles['fee-disclaimer']
};

var css_248z$1 = ".cc_transparency-banner__footer_3296223122 {\n  display: flex;\n  box-sizing: border-box;\n  flex-direction: column;\n  width: 100%;\n  max-width: 886px;\n  margin: auto;\n  padding: var(--size-32);\n  color: var(--color-content-secondary);\n  font-family: var(--font-family-regular);\n  font-size: var(--font-size-14);\n  line-height: var(--line-height-24);\n  text-align: center;\n}\n@media (min-width: 768px) {\n  .cc_transparency-banner__footer_3296223122 {\n    flex-direction: row;\n    background: none;\n    text-align: left;\n  }\n}\n.cc_transparency-banner__slogan_3296223122 {\n  width: 100%;\n  margin-bottom: var(--size-16);\n  color: var(--color-content-primary);\n  font-family: var(--font-family-display);\n  font-size: var(--font-size-32);\n  font-weight: bold;\n}\n.cc_transparency-banner__text_3296223122 {\n  margin: 0;\n}\n\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy9jb21tb24vVHJhbnNwYXJlbmN5QmFubmVyLm1vZHVsZS5sZXNzIiwiVHJhbnNwYXJlbmN5QmFubmVyLm1vZHVsZS5sZXNzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU9FO0VBQ0UsYUFBQTtFQUNBLHNCQUFBO0VBQ0Esc0JBQUE7RUFDQSxXQUFBO0VBQ0EsZ0JBQUE7RUFDQSxZQUFBO0VBQ0EsdUJBQUE7RUFDQSxxQ0FBQTtFQUNBLHVDQUFBO0VBQ0EsOEJBQUE7RUFDQSxrQ0FBQTtFQUNBLGtCQUFBO0FDTko7QURRSTtFQUFBO0lBQ0UsbUJBQUE7SUFDQSxnQkFBQTtJQUNBLGdCQUFBO0VDTEo7QUFDRjtBRFFFO0VBQ0UsV0FBQTtFQUNBLDZCQUFBO0VBQ0EsbUNBQUE7RUFDQSx1Q0FBQTtFQUNBLDhCQUFBO0VBQ0EsaUJBQUE7QUNOSjtBRFNFO0VBQ0UsU0FBQTtBQ1BKIiwiZmlsZSI6IlRyYW5zcGFyZW5jeUJhbm5lci5tb2R1bGUubGVzcyJ9 */";
var style = {"transparency-banner__footer":"cc_transparency-banner__footer_3296223122","transparencyBanner__footer":"cc_transparency-banner__footer_3296223122","transparency-banner__slogan":"cc_transparency-banner__slogan_3296223122","transparencyBanner__slogan":"cc_transparency-banner__slogan_3296223122","transparency-banner__text":"cc_transparency-banner__text_3296223122","transparencyBanner__text":"cc_transparency-banner__text_3296223122"};
styleInject(css_248z$1);

const TransparencyBanner = () => {
  const {
    locale
  } = useIntl();
  const MISSION_URL = createUrl(generateUrl(locale, 'about/our-story', AvailablePages.ABOUT_OUR_STORY));
  const DISCLAIMER_URL = createUrl(generateUrl(locale, 'compare/disclaimer', AvailablePages.COMPARISON_DISCLAIMER));
  return /*#__PURE__*/React.createElement("div", {
    className: style['transparency-banner__footer']
  }, /*#__PURE__*/React.createElement("div", {
    className: style['transparency-banner__slogan'],
    role: "heading",
    "aria-level": 2
  }, /*#__PURE__*/React.createElement(FormattedMessage, {
    id: "no-hidden-fees"
  })), /*#__PURE__*/React.createElement("p", {
    className: style['transparency-banner__text']
  }, /*#__PURE__*/React.createElement(FormattedMessage, {
    id: "disclaimer-mission"
  }), "\xA0", /*#__PURE__*/React.createElement("a", {
    href: MISSION_URL
  }, /*#__PURE__*/React.createElement(FormattedMessage, {
    id: "disclaimer-without-borders"
  })), "\xA0", /*#__PURE__*/React.createElement(FormattedMessage, {
    id: "disclaimer-charges"
  }), "\xA0", /*#__PURE__*/React.createElement("a", {
    href: DISCLAIMER_URL
  }, /*#__PURE__*/React.createElement(FormattedMessage, {
    id: "disclaimer-how-do-we-collect"
  }))));
};

var css_248z = ".cc_feeText_3296223122 {\n  display: flex;\n  font-weight: 600;\n  line-height: 16px;\n  white-space: nowrap;\n}\n@media (min-width: 768px) {\n  .cc_feeText_3296223122 {\n    line-height: var(--line-height-body);\n  }\n}\n.cc_feeDisclaimer_3296223122 {\n  color: #df8700;\n  font-size: small;\n  font-weight: 600;\n}\n.cc_goodExchangeRate_3296223122 {\n  display: flex;\n  order: 1;\n  margin-left: var(--size-4);\n}\n.cc_goodExchangeRate_3296223122::before {\n  content: '';\n  width: var(--size-8);\n  height: var(--size-8);\n  margin-top: -2px;\n  border-radius: 100%;\n  background: var(--color-sentiment-positive);\n}\n.cc_badExchangeRate_3296223122 {\n  display: flex;\n  order: 1;\n  margin-left: var(--size-4);\n}\n.cc_badExchangeRate_3296223122::before {\n  content: '';\n  width: var(--size-8);\n  height: var(--size-8);\n  margin-top: -2px;\n  border-radius: 100%;\n  background: var(--color-sentiment-negative);\n}\n.cc_rateAndIndicator_3296223122 {\n  display: flex !important;\n  align-items: center;\n}\n@media (min-width: 768px) {\n  .cc_rateAndIndicator-md_3296223122 {\n    display: flex !important;\n  }\n}\n.cc_rate_3296223122 {\n  font-weight: var(--font-weight-semi-bold);\n}\n.cc_positiveDelta_3296223122 {\n  display: flex !important;\n  align-items: center;\n  white-space: nowrap;\n}\n.cc_positiveDelta_3296223122::before {\n  content: '';\n  width: 0;\n  height: 0;\n  margin-right: var(--size-4);\n  border-right: 5px solid transparent;\n  border-bottom: 7px solid var(--color-sentiment-positive);\n  border-left: 5px solid transparent;\n}\n.cc_negativeDelta_3296223122 {\n  display: flex !important;\n  align-items: center;\n  color: var(--color-sentiment-negative);\n  white-space: nowrap;\n}\n.cc_negativeDelta_3296223122::before {\n  content: '';\n  width: 0;\n  height: 0;\n  margin-right: var(--size-4);\n  border-top: 7px solid var(--color-sentiment-negative);\n  border-right: 5px solid transparent;\n  border-left: 5px solid transparent;\n}\n.cc_receiveCell_3296223122 {\n  display: flex !important;\n  flex-direction: column;\n  align-items: flex-end;\n}\n@media (min-width: 992px) {\n  .cc_receiveCell_3296223122 {\n    align-items: flex-start;\n  }\n}\n.cc_receiveText_3296223122 {\n  display: inline-block;\n  margin-bottom: var(--size-8);\n  color: var(--color-content-primary);\n  font-size: var(--font-size-20);\n  font-weight: var(--font-weight-semi-bold);\n  white-space: nowrap;\n}\n@media (min-width: 768px) {\n  .cc_receiveText_3296223122 {\n    margin-bottom: 0;\n  }\n}\n@media not ((min-width: 768px)) {\n  .cc_receiveText_3296223122.cc_extraPadding_3296223122 {\n    padding-right: 20px;\n  }\n}\n.cc_badge-warning_3296223122 {\n  background: #df8700;\n}\n.cc_fee-disclaimer_3296223122 {\n  display: inline-block;\n  min-width: 16px;\n  min-width: var(--size-16);\n  padding: 5px 8px;\n  padding: 5px var(--size-8);\n  font-size: 10px;\n  font-weight: 600;\n  font-weight: var(--font-weight-semi-bold);\n  color: #fff;\n  line-height: 1.2;\n  line-height: var(--line-height-control);\n  vertical-align: middle;\n  white-space: nowrap;\n  text-align: center;\n  background-color: #e74848;\n  background-color: var(--color-interactive-negative);\n  border-radius: 16px;\n  border-radius: var(--radius-medium);\n  top: -1px;\n  position: relative;\n  background: #df8700;\n}\n.cc_toggle_3296223122 {\n  display: inline-flex;\n  flex-direction: row-reverse;\n  align-items: center;\n  color: var(--color-core-contrast);\n  font-size: var(--font-size-14);\n  font-weight: var(--font-weight-semi-bold);\n  letter-spacing: 0;\n  text-decoration: none !important;\n}\n.cc_toggle_3296223122:hover,\n.cc_toggle_3296223122:focus {\n  outline: none;\n  color: var(--color-content-link-hover);\n  text-decoration: underline !important;\n}\n.cc_toggle_3296223122:active {\n  color: var(--color-content-link-active);\n}\n.cc_toggle_3296223122 .cc_tw-icon_3296223122,\n.cc_toggle_3296223122 [class^='tw-icon '] {\n  display: inline;\n  width: initial;\n  height: initial;\n  margin-right: var(--size-12);\n  margin-left: 0;\n  padding: var(--size-8);\n  border-radius: var(--radius-full);\n  background-color: var(--color-background-neutral);\n}\n.cc_transparency-banner__footer_3296223122 {\n  display: flex;\n  box-sizing: border-box;\n  flex-direction: column;\n  width: 100%;\n  max-width: 886px;\n  margin: auto;\n  padding: var(--size-32);\n  color: var(--color-content-secondary);\n  font-family: var(--font-family-regular);\n  font-size: var(--font-size-14);\n  line-height: var(--line-height-24);\n  text-align: center;\n}\n@media (min-width: 768px) {\n  .cc_transparency-banner__footer_3296223122 {\n    flex-direction: row;\n    background: none;\n    text-align: left;\n  }\n}\n.cc_transparency-banner__slogan_3296223122 {\n  width: 100%;\n  margin-bottom: var(--size-16);\n  color: var(--color-content-primary);\n  font-family: var(--font-family-display);\n  font-size: var(--font-size-32);\n  font-weight: bold;\n}\n.cc_transparency-banner__text_3296223122 {\n  margin: 0;\n}\n.cc_delivery-estimation-hero_3296223122 {\n  font-size: smaller;\n  font-weight: normal;\n}\n@media (max-width: 340px) {\n  .cc_delivery-estimation-hero_3296223122 {\n    font-size: 12px;\n  }\n}\n.cc_delivery-estimation-hero_3296223122 .cc_estimation_3296223122 {\n  font-weight: bold;\n}\n@media not ((min-width: 768px)) {\n  .cc_delivery-estimation-hero_3296223122.cc_extraPadding_3296223122 {\n    padding-right: 20px;\n  }\n}\n.cc_theme-without-bg_3296223122 {\n  background-color: unset;\n}\n.cc_table-hero_3296223122 {\n  position: relative;\n  width: 100%;\n  max-width: 886px;\n  overflow: auto;\n  table-layout: fixed;\n  border: 1px solid var(--color-background-screen);\n  border-radius: var(--size-40);\n  background: var(--color-white);\n  color: var(--color-content-secondary);\n  font-family: var(--font-family-regular);\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  letter-spacing: var(--letter-spacing-md);\n}\n@media (min-width: 768px) {\n  .cc_table-hero_3296223122 {\n    margin: var(--size-40) auto;\n    table-layout: inherit;\n    border: 0;\n  }\n}\n@media (max-width: 767px) {\n  .cc_table-hero_3296223122 .cc_table-hero__row_3296223122:last-child .cc_table-hero__cell_3296223122 {\n    border-bottom: 0;\n  }\n}\n@media (max-width: 575px) {\n  .cc_table-hero_3296223122 {\n    overflow: hidden;\n  }\n}\n.cc_table-hero__thead_3296223122 > tr {\n  border-radius: var(--size-40);\n}\n.cc_table-hero__thead_3296223122 > tr th:nth-of-type(1)::before {\n  border-radius: var(--size-40);\n  box-shadow: none;\n}\n.cc_table-hero__thead_3296223122 > tr th:last-of-type {\n  border-radius: 0 var(--size-40) 0 0;\n}\n.cc_table-hero__th_3296223122 {\n  padding: var(--size-16) 0;\n  color: var(--color-content-primary);\n  font-size: var(--font-size-14);\n  font-weight: var(--font-weight-semi-bold);\n  text-align: center;\n}\n.cc_table-hero__th_3296223122:nth-of-type(1) {\n  display: flex;\n  justify-content: center;\n  width: 200%;\n}\n.cc_table-hero__th_3296223122:nth-of-type(2),\n.cc_table-hero__th_3296223122:nth-of-type(3),\n.cc_table-hero__th_3296223122:nth-of-type(4) {\n  display: none;\n}\n@media (min-width: 768px) {\n  .cc_table-hero__th_3296223122 {\n    margin-right: var(--size-40);\n    padding: var(--size-16) calc(var(--size-8) * 8) var(--size-16) 0;\n    font-weight: bolder;\n    text-align: right;\n  }\n  .cc_table-hero__th_3296223122:nth-of-type(1) {\n    display: table-cell;\n    width: inherit;\n    padding-right: 0;\n    padding-left: calc(var(--size-8) * 8);\n    text-align: left;\n  }\n  .cc_table-hero__th_3296223122:nth-of-type(3) {\n    width: 15%;\n    padding-right: 0;\n  }\n  .cc_table-hero__th_3296223122:nth-of-type(2),\n  .cc_table-hero__th_3296223122:nth-of-type(3),\n  .cc_table-hero__th_3296223122:nth-of-type(4) {\n    display: table-cell;\n  }\n}\n.cc_table-hero__cell_3296223122 {\n  position: relative;\n  padding: var(--size-24) var(--size-32);\n  border-top: 1px solid var(--color-border-neutral);\n}\n.cc_featuredRow_3296223122 .cc_table-hero__cell_3296223122 {\n  border-top: 0;\n}\n.cc_table-hero__cell_3296223122:nth-of-type(2) {\n  text-align: right;\n}\n.cc_table-hero__cell_3296223122:nth-of-type(3),\n.cc_table-hero__cell_3296223122:nth-of-type(4) {\n  display: none;\n}\n@media (min-width: 768px) {\n  .cc_table-hero__cell_3296223122 {\n    height: calc(var(--size-8) * 15);\n    padding: 0 calc(var(--size-8) * 8) 0 0;\n    border-top: 0;\n    text-align: right;\n  }\n  .cc_table-hero__cell_3296223122:nth-of-type(1) {\n    padding-left: calc(var(--size-8) * 8);\n    text-align: left;\n  }\n  .cc_table-hero__cell_3296223122:nth-of-type(3) {\n    padding-right: 0;\n  }\n  .cc_table-hero__cell_3296223122:nth-of-type(3),\n  .cc_table-hero__cell_3296223122:nth-of-type(4) {\n    display: table-cell;\n  }\n}\n@media (min-width: 992px) {\n  .cc_table-hero__cell_3296223122 .cc_receiveCell_3296223122 {\n    align-items: flex-end !important;\n  }\n}\n/* The cheaperst label position */\n.cc_cheapestLabel_3296223122 {\n  display: none;\n}\n@media (min-width: 768px) {\n  .cc_cheapestLabel_3296223122 {\n    display: block;\n    position: absolute;\n    z-index: 1;\n    bottom: calc(var(--size-8) * 11);\n    left: calc(-1 * var(--size-8));\n    padding: var(--size-4) var(--size-8);\n    border-radius: 3px;\n    background: var(--color-content-positive);\n    color: var(--color-white);\n    font-size: var(--font-size-14);\n    font-weight: var(--font-weight-semi-bold);\n    line-height: 1;\n  }\n}\n.cc_cheapestLabelTick_3296223122 {\n  display: inline-block;\n  height: 16px;\n  margin-right: var(--size-8);\n  vertical-align: bottom;\n}\n.cc_headingInfo_3296223122 {\n  display: block;\n  margin-top: var(--size-4);\n  font-size: var(--font-size-12);\n  font-weight: normal;\n}\n/* Desktop tier styling */\n@media (min-width: 768px) {\n  .cc_table-hero__thead_3296223122 {\n    /* Desktop styling */\n    /*  The top shadow of the first tier is applied to the first th via ::before pseudo element */\n  }\n  .cc_table-hero__thead_3296223122 th:nth-of-type(1),\n  .cc_table-hero__thead_3296223122 th:nth-of-type(2) {\n    background: var(--color-white);\n  }\n  .cc_table-hero__thead_3296223122 th:nth-of-type(1)::before {\n    content: '';\n    position: absolute;\n    top: calc(-1 * var(--size-16));\n    left: 0;\n    width: 60%;\n    height: var(--size-32);\n    transform: rotate(180deg);\n    border-radius: 3px;\n    background: var(--color-white);\n    box-shadow: 0 3px 55px 24px rgba(34, 48, 73, 0.05);\n    -webkit-clip-path: polygon(-40% 50%, 140% 50%, 140% 250%, -40% 250%);\n    clip-path: polygon(-40% 50%, 140% 50%, 140% 250%, -40% 250%);\n  }\n  .cc_table-hero__row_3296223122 {\n    background-color: var(--color-background-screen) !important;\n    /* The horizantal shadow of the first tier is applied to the second element of each row via ::after pseudo-element */\n    /* The bottom shadow is applied to the second element of each row via ::after pseudo-element */\n    /* The rows separation is applyed to the third cell via pseudo element */\n  }\n  .cc_table-hero__row_3296223122 td:nth-of-type(1),\n  .cc_table-hero__row_3296223122 td:nth-of-type(2) {\n    width: 30%;\n    background: var(--color-white);\n  }\n  .cc_table-hero__row_3296223122 td:nth-of-type(2),\n  .cc_table-hero__row_3296223122 th:nth-of-type(2) {\n    position: relative;\n  }\n  .cc_table-hero__row_3296223122 td:nth-of-type(2)::after,\n  .cc_table-hero__row_3296223122 th:nth-of-type(2)::after {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: -111%;\n    width: 222%;\n    height: 100%;\n    pointer-events: none;\n  }\n  .cc_table-hero__row_3296223122:last-child td:nth-of-type(1) {\n    position: inherit;\n  }\n  .cc_table-hero__row_3296223122 .cc_cell-border_3296223122 {\n    position: relative;\n  }\n  .cc_table-hero__row_3296223122 .cc_cell-border_3296223122::after {\n    content: '';\n    position: absolute;\n    z-index: 1;\n    bottom: 0;\n    left: -354%;\n    width: 580%;\n    height: 2px;\n    background: rgba(0, 0, 0, 0.03);\n    pointer-events: none;\n  }\n  .cc_table-hero__row_3296223122 th:nth-child(3) {\n    position: relative;\n  }\n  .cc_table-hero__row_3296223122 th:nth-child(3)::after {\n    content: '';\n    position: absolute;\n    z-index: 1;\n    bottom: 0;\n    left: -354%;\n    width: 580%;\n    height: 2px;\n    background: rgba(0, 0, 0, 0.03);\n    pointer-events: none;\n  }\n  .cc_table-hero__row_3296223122:not(:last-child) td:nth-child(3) {\n    position: relative;\n  }\n  .cc_table-hero__row_3296223122:not(:last-child) td:nth-child(3)::after {\n    content: '';\n    position: absolute;\n    z-index: 1;\n    bottom: 0;\n    left: -354%;\n    width: 580%;\n    height: 2px;\n    background: rgba(0, 0, 0, 0.03);\n    pointer-events: none;\n  }\n  .cc_table-hero__row_3296223122 td:nth-last-child(-n + 2) {\n    background-color: #f3f5f199 !important;\n  }\n  .cc_table-hero__row_3296223122:last-of-type td:last-of-type {\n    border-radius: 0 0 var(--size-40) 0;\n  }\n}\n@media (max-width: 886px) {\n  .cc_table-hero__row_3296223122 td:nth-of-type(2)::after,\n  .cc_table-hero__row_3296223122 th:nth-of-type(2)::after {\n    background: none;\n  }\n}\n.cc_featuredRow_3296223122 {\n  background-color: var(--color-forest-green) !important;\n  color: var(--color-white);\n}\n.cc_featuredRow_3296223122 .cc_negativeDeltaHero_3296223122 {\n  color: var(--color-sentiment-negative);\n  display: flex !important;\n  align-items: center;\n}\n.cc_featuredRow_3296223122 .cc_negativeDeltaHero_3296223122::before {\n  content: '';\n  width: 0;\n  height: 0;\n  margin-right: var(--size-4);\n  border-top: 7px solid var(--color-sentiment-negative);\n  border-right: 5px solid transparent;\n  border-left: 5px solid transparent;\n}\n.cc_featuredRow_3296223122 > * {\n  background-color: var(--color-forest-green) !important;\n}\n.cc_featuredRow_3296223122 td:nth-of-type(1),\n.cc_featuredRow_3296223122 td:nth-of-type(2),\n.cc_featuredRow_3296223122 td:nth-last-child(-n + 2) {\n  background-color: var(--color-forest-green) !important;\n}\n.cc_featuredCell_3296223122 {\n  position: relative;\n}\n/* TransferFee */\n.cc_fee_3296223122 {\n  display: flex;\n  font-weight: 600;\n  line-height: 16px;\n  white-space: nowrap;\n  justify-content: flex-end;\n  color: var(--color-content-primary);\n  font-size: var(--font-size-14);\n}\n@media (min-width: 768px) {\n  .cc_fee_3296223122 {\n    line-height: var(--line-height-body);\n  }\n}\n.cc_highlightedFee_3296223122 {\n  display: flex;\n  font-weight: 600;\n  line-height: 16px;\n  white-space: nowrap;\n  justify-content: flex-end;\n  color: var(--color-white);\n  font-size: var(--font-size-14);\n}\n@media (min-width: 768px) {\n  .cc_highlightedFee_3296223122 {\n    line-height: var(--line-height-body);\n  }\n}\n.cc_highlightedLabelLink_3296223122 {\n  color: var(--color-white);\n  font-size: var(--font-size-12);\n  text-decoration: none;\n}\n/* Exchange Rate */\n.cc_exchangeRate_3296223122 {\n  display: flex !important;\n  display: inline-flex;\n  align-items: center;\n  justify-content: flex-end;\n  font-size: var(--font-size-14);\n  line-height: var(--line-height-body);\n}\n@media (min-width: 768px) {\n  .cc_exchangeRate-md_3296223122 {\n    display: flex !important;\n  }\n}\n.cc_exchangeRate_3296223122 .cc_goodExchangeRate_3296223122::before {\n  background-color: var(--color-bright-green);\n}\n/* Receive Amount */\n.cc_receiveAmount_3296223122 {\n  display: inline-block;\n  margin-bottom: var(--size-8);\n  color: var(--color-content-primary);\n  font-size: var(--font-size-20);\n  font-weight: var(--font-weight-semi-bold);\n  white-space: nowrap;\n  margin-bottom: 0;\n  font-size: var(--font-size-16);\n  font-weight: bold;\n}\n@media (min-width: 768px) {\n  .cc_receiveAmount_3296223122 {\n    margin-bottom: 0;\n  }\n}\n@media not ((min-width: 768px)) {\n  .cc_receiveAmount_3296223122.cc_extraPadding_3296223122 {\n    padding-right: 20px;\n  }\n}\n@media (min-width: 768px) {\n  .cc_receiveAmount_3296223122 {\n    font-size: var(--font-size-20);\n  }\n}\n.cc_receiveAmountHero_3296223122 {\n  display: inline-block;\n  margin-bottom: var(--size-8);\n  color: var(--color-content-primary);\n  font-size: var(--font-size-20);\n  font-weight: var(--font-weight-semi-bold);\n  white-space: nowrap;\n  margin-bottom: 0;\n  font-size: var(--font-size-16);\n  font-weight: bold;\n  color: var(--color-white);\n}\n@media (min-width: 768px) {\n  .cc_receiveAmountHero_3296223122 {\n    margin-bottom: 0;\n  }\n}\n@media not ((min-width: 768px)) {\n  .cc_receiveAmountHero_3296223122.cc_extraPadding_3296223122 {\n    padding-right: 20px;\n  }\n}\n@media (min-width: 768px) {\n  .cc_receiveAmountHero_3296223122 {\n    font-size: var(--font-size-20);\n  }\n}\n.cc_negativeDeltaHero_3296223122 {\n  display: flex !important;\n  align-items: center;\n  white-space: nowrap;\n  display: block;\n  color: var(--color-sentiment-negative);\n  font-size: var(--font-size-14);\n  font-weight: var(--font-weight-semi-bold);\n}\n.cc_negativeDeltaHero_3296223122::before {\n  content: '';\n  width: 0;\n  height: 0;\n  margin-right: var(--size-4);\n  border-top: 7px solid var(--color-sentiment-negative);\n  border-right: 5px solid transparent;\n  border-left: 5px solid transparent;\n}\n.cc_negativeDeltaHero_3296223122::before {\n  margin-right: var(--size-4);\n}\n@media (min-width: 768px) {\n  .cc_negativeDeltaHero_3296223122 {\n    margin-top: var(--size-4);\n    font-size: var(--font-size-16);\n  }\n  .cc_negativeDeltaHero_3296223122::before {\n    margin-right: var(--size-8);\n  }\n}\n@media not ((min-width: 768px)) {\n  .cc_negativeDeltaHero_3296223122 {\n    padding-right: 20px;\n  }\n}\n.cc_positiveDeltaHero_3296223122 {\n  display: flex !important;\n  align-items: center;\n  white-space: nowrap;\n  display: block;\n  color: var(--color-sentiment-positive);\n  font-size: var(--font-size-14);\n  font-weight: var(--font-weight-semi-bold);\n}\n.cc_positiveDeltaHero_3296223122::before {\n  content: '';\n  width: 0;\n  height: 0;\n  margin-right: var(--size-4);\n  border-right: 5px solid transparent;\n  border-bottom: 7px solid var(--color-sentiment-positive);\n  border-left: 5px solid transparent;\n}\n.cc_positiveDeltaHero_3296223122::before {\n  margin-right: var(--size-4);\n}\n@media (min-width: 768px) {\n  .cc_positiveDeltaHero_3296223122 {\n    margin-top: var(--size-4);\n    font-size: var(--font-size-16);\n  }\n  .cc_positiveDeltaHero_3296223122::before {\n    margin-right: var(--size-8);\n  }\n}\n@media not ((min-width: 768px)) {\n  .cc_positiveDeltaHero_3296223122 {\n    padding-right: 20px;\n  }\n}\n.cc_positiveDeltaHighlighted_3296223122 {\n  display: block;\n  color: var(--color-bright-green);\n  font-size: var(--font-size-14);\n  font-weight: var(--font-weight-semi-bold);\n  font-size: calc(var(--font-size-16) - 1);\n}\n.cc_positiveDeltaHighlighted_3296223122::before {\n  margin-right: var(--size-4);\n}\n@media (min-width: 768px) {\n  .cc_positiveDeltaHighlighted_3296223122 {\n    margin-top: var(--size-4);\n    font-size: var(--font-size-16);\n  }\n  .cc_positiveDeltaHighlighted_3296223122::before {\n    margin-right: var(--size-8);\n  }\n}\n@media not ((min-width: 768px)) {\n  .cc_positiveDeltaHighlighted_3296223122 {\n    padding-right: 20px;\n  }\n}\n.cc_disclaimerPopover_3296223122 {\n  display: inline-block;\n  position: absolute;\n  top: 28px;\n  right: 4px;\n  margin-top: var(--size-4);\n  margin-right: var(--size-8);\n}\n@media (min-width: 768px) {\n  .cc_disclaimerPopover_3296223122 {\n    top: 47px;\n    right: 32px;\n  }\n}\n@media not ((min-width: 768px)) {\n  .cc_disclaimerPopover_3296223122 {\n    display: none;\n  }\n}\n.cc_disclaimerPopover_3296223122 [data-toggle='popover']:not(.cc_btn_3296223122) {\n  height: var(--size-16);\n  border-bottom: 0 !important;\n}\n.cc_disclaimerPopover_3296223122 .cc_tw-icon_3296223122,\n.cc_disclaimerPopover_3296223122 [class^='tw-icon '] {\n  display: inline-block;\n}\n.cc_disclaimerPopover_3296223122 .cc_tw-icon_3296223122 svg,\n.cc_disclaimerPopover_3296223122 [class^='tw-icon '] svg {\n  display: block;\n}\n.cc_moreInformationPopover_3296223122 {\n  position: absolute;\n  top: 40%;\n  right: -5px;\n  margin-right: var(--size-8);\n  padding-right: var(--size-8);\n}\n@media (min-width: 768px) {\n  .cc_moreInformationPopover_3296223122 {\n    display: none;\n  }\n}\n.cc_moreInformationPopover_3296223122 .cc_tw-icon_3296223122,\n.cc_moreInformationPopover_3296223122 [class^='tw-icon '] {\n  display: inline-block;\n  transform: rotate(90deg);\n}\n.cc_moreInformationPopover_3296223122 .cc_tw-icon_3296223122.cc_featuredRow_3296223122,\n.cc_moreInformationPopover_3296223122 [class^='tw-icon '].cc_featuredRow_3296223122 {\n  color: var(--color-interactive-accent);\n}\n.cc_alignmentContainer_3296223122 {\n  display: flex;\n}\n.cc_alignmentContainer_3296223122 .cc_alignLeft_3296223122 {\n  flex: 1;\n  text-align: left;\n}\n.cc_alignmentContainer_3296223122 .cc_alignRight_3296223122 {\n  flex: 1;\n  text-align: right;\n}\n.cc_you-receive__fee-disclaimer_3296223122 {\n  display: inline-block;\n  min-width: 16px;\n  min-width: var(--size-16);\n  padding: 5px 8px;\n  padding: 5px var(--size-8);\n  font-size: 10px;\n  font-weight: 600;\n  font-weight: var(--font-weight-semi-bold);\n  color: #fff;\n  line-height: 1.2;\n  line-height: var(--line-height-control);\n  vertical-align: middle;\n  white-space: nowrap;\n  text-align: center;\n  background-color: #e74848;\n  background-color: var(--color-interactive-negative);\n  border-radius: 16px;\n  border-radius: var(--radius-medium);\n  top: -1px;\n  position: relative;\n  background: #df8700;\n  margin-top: var(--size-8);\n}\n@media (min-width: 768px) {\n  .cc_you-receive__fee-disclaimer_3296223122 {\n    display: none;\n  }\n}\n.cc_toggleContainer_3296223122 {\n  display: flex;\n  justify-content: center;\n  width: 100%;\n  max-width: 886px;\n  margin: auto;\n}\n@media (min-width: 768px) {\n  .cc_toggleContainer_3296223122 {\n    justify-content: flex-start;\n  }\n}\n.cc_toggleHero_3296223122 {\n  display: inline-flex;\n  align-items: center;\n  font-size: var(--font-size-14);\n  font-weight: var(--font-weight-semi-bold);\n  letter-spacing: 0;\n  text-decoration: none !important;\n  flex-direction: row-reverse;\n  justify-content: center;\n  padding: var(--size-24);\n  border-radius: var(--size-40);\n  color: var(--color-core-contrast);\n  font-family: var(--font-family-regular);\n  line-height: var(--line-height-body);\n  text-align: center;\n  text-decoration: none;\n}\n.cc_toggleHero_3296223122:hover,\n.cc_toggleHero_3296223122:focus {\n  outline: none;\n  color: var(--color-content-link-hover);\n  text-decoration: underline !important;\n}\n.cc_toggleHero_3296223122:active {\n  color: var(--color-content-link-active);\n}\n.cc_toggleHero_3296223122 .cc_tw-icon_3296223122,\n.cc_toggleHero_3296223122 [class^='tw-icon '] {\n  display: inline;\n  width: initial;\n  height: initial;\n  margin-right: var(--size-12);\n  margin-left: 0;\n  padding: var(--size-8);\n  border-radius: var(--radius-full);\n  background-color: var(--color-background-neutral);\n}\n@media (max-width: 767px) {\n  [class*='bg-primary'] .cc_toggleHero_3296223122,\n  [class*='bg--dark'] .cc_toggleHero_3296223122 {\n    color: var(--color-white);\n  }\n}\n@media (min-width: 768px) {\n  .cc_toggleHero_3296223122 {\n    position: relative;\n    z-index: 1;\n    width: 60%;\n    margin-top: calc(-1 * var(--size-40));\n    padding: var(--size-16) 0;\n  }\n  .cc_toggleHero_3296223122::after {\n    content: '';\n    position: absolute;\n    z-index: 1;\n    top: 0;\n    left: calc(var(--size-8) * 8);\n    width: calc(100% - calc(var(--size-8) * 8));\n    height: 2px;\n    background: rgba(0, 0, 0, 0.03);\n    pointer-events: none;\n  }\n  .cc_toggleHero_3296223122::before {\n    content: '';\n    position: absolute;\n    z-index: -1;\n    top: -56px;\n    left: 0;\n    width: 100%;\n    height: calc(var(--size-8) * 14);\n    border-radius: var(--size-40);\n    background: var(--color-white);\n    -webkit-clip-path: polygon(-40% 50%, 140% 50%, 140% 250%, -40% 250%);\n    clip-path: polygon(-40% 50%, 140% 50%, 140% 250%, -40% 250%);\n  }\n}\n.cc_table-hero_3296223122.cc_without-show-more-option_3296223122 .cc_table-hero__row_3296223122:last-of-type td:first-of-type {\n  border-radius: 0 0 0 var(--size-40);\n}\n\n/*# sourceMappingURL=data:application/json;base64,  */";
var styles = {"feeText":"cc_feeText_3296223122","feeDisclaimer":"cc_fee-disclaimer_3296223122","goodExchangeRate":"cc_goodExchangeRate_3296223122","badExchangeRate":"cc_badExchangeRate_3296223122","rateAndIndicator":"cc_rateAndIndicator_3296223122","rateAndIndicator-md":"cc_rateAndIndicator-md_3296223122","rateAndIndicatorMd":"cc_rateAndIndicator-md_3296223122","rate":"cc_rate_3296223122","positiveDelta":"cc_positiveDelta_3296223122","negativeDelta":"cc_negativeDelta_3296223122","receiveCell":"cc_receiveCell_3296223122","receiveText":"cc_receiveText_3296223122","extraPadding":"cc_extraPadding_3296223122","badge-warning":"cc_badge-warning_3296223122","badgeWarning":"cc_badge-warning_3296223122","fee-disclaimer":"cc_fee-disclaimer_3296223122","toggle":"cc_toggle_3296223122","tw-icon":"cc_tw-icon_3296223122","twIcon":"cc_tw-icon_3296223122","transparency-banner__footer":"cc_transparency-banner__footer_3296223122","transparencyBanner__footer":"cc_transparency-banner__footer_3296223122","transparency-banner__slogan":"cc_transparency-banner__slogan_3296223122","transparencyBanner__slogan":"cc_transparency-banner__slogan_3296223122","transparency-banner__text":"cc_transparency-banner__text_3296223122","transparencyBanner__text":"cc_transparency-banner__text_3296223122","delivery-estimation-hero":"cc_delivery-estimation-hero_3296223122","deliveryEstimationHero":"cc_delivery-estimation-hero_3296223122","estimation":"cc_estimation_3296223122","theme-without-bg":"cc_theme-without-bg_3296223122","themeWithoutBg":"cc_theme-without-bg_3296223122","table-hero":"cc_table-hero_3296223122","tableHero":"cc_table-hero_3296223122","table-hero__row":"cc_table-hero__row_3296223122","tableHero__row":"cc_table-hero__row_3296223122","table-hero__cell":"cc_table-hero__cell_3296223122","tableHero__cell":"cc_table-hero__cell_3296223122","table-hero__thead":"cc_table-hero__thead_3296223122","tableHero__thead":"cc_table-hero__thead_3296223122","table-hero__th":"cc_table-hero__th_3296223122","tableHero__th":"cc_table-hero__th_3296223122","featuredRow":"cc_featuredRow_3296223122","cheapestLabel":"cc_cheapestLabel_3296223122","cheapestLabelTick":"cc_cheapestLabelTick_3296223122","headingInfo":"cc_headingInfo_3296223122","cell-border":"cc_cell-border_3296223122","cellBorder":"cc_cell-border_3296223122","negativeDeltaHero":"cc_negativeDeltaHero_3296223122","featuredCell":"cc_featuredCell_3296223122","fee":"cc_fee_3296223122","highlightedFee":"cc_highlightedFee_3296223122","highlightedLabelLink":"cc_highlightedLabelLink_3296223122","exchangeRate":"cc_exchangeRate_3296223122","exchangeRate-md":"cc_exchangeRate-md_3296223122","exchangeRateMd":"cc_exchangeRate-md_3296223122","receiveAmount":"cc_receiveAmount_3296223122","receiveAmountHero":"cc_receiveAmountHero_3296223122","positiveDeltaHero":"cc_positiveDeltaHero_3296223122","positiveDeltaHighlighted":"cc_positiveDeltaHighlighted_3296223122","disclaimerPopover":"cc_disclaimerPopover_3296223122","btn":"cc_btn_3296223122","moreInformationPopover":"cc_moreInformationPopover_3296223122","alignmentContainer":"cc_alignmentContainer_3296223122","alignLeft":"cc_alignLeft_3296223122","alignRight":"cc_alignRight_3296223122","you-receive__fee-disclaimer":"cc_you-receive__fee-disclaimer_3296223122","youReceive__feeDisclaimer":"cc_you-receive__fee-disclaimer_3296223122","toggleContainer":"cc_toggleContainer_3296223122","toggleHero":"cc_toggleHero_3296223122","without-show-more-option":"cc_without-show-more-option_3296223122","withoutShowMoreOption":"cc_without-show-more-option_3296223122"};
styleInject(css_248z);

/* eslint-disable react/jsx-max-depth */ /* eslint-disable fp/no-mutation */
function extractHighestReceivedAmount(sortedQuotes) {
  return sortedQuotes.length > 0 ? sortedQuotes[0].receivedAmount : 0;
}
function getProviderDependentStyles(alias, styles) {
  if (isWiseAlias(alias)) {
    return {
      row: styles.featuredRow,
      cell: styles.featuredCell,
      receiveAmountText: styles.receiveAmountHero,
      cheapestDelta: styles.positiveDeltaHighlighted,
      feeText: styles.highlightedFee
    };
  }
  return {
    row: '',
    cell: '',
    receiveAmountText: styles.receiveAmount,
    cheapestDelta: '',
    feeText: styles.fee
  };
}
class ComparisonTableHero extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showingAllQuotes: false,
      centreProviderViewed: false
    };
  }
  componentDidMount() {
    this.callOnTableRendered();
  }
  componentDidUpdate() {
    this.callOnTableRendered();
  }
  static getDerivedStateFromProps(props) {
    const {
      excludePartners,
      quotes,
      sourceCurrency,
      targetCurrency,
      sendAmount
    } = props;
    const filteredQuotes = filterQuotes(quotes, {
      excludePartners
    });
    const sortedQuotes = sortQuotesByReceivedAmount(filteredQuotes);
    const savingsAgainstWise = calculateSavingsWithRespectToWiseQuote(sortedQuotes, excludePartners);
    return {
      quotes: sortedQuotes,
      sourceCurrency,
      targetCurrency,
      sendAmount,
      savingsAgainstWise
    };
  }
  toggleShowAllQuotes = () => {
    this.setState(state => ({
      showingAllQuotes: !state.showingAllQuotes
    }));
  };
  setCentreProviderViewed = () => {
    this.setState({
      centreProviderViewed: true
    });
  };
  callOnTableRendered = () => {
    const {
      onTableRendered
    } = this.props;
    onTableRendered(this.state);
  };
  onTableView = inView => {
    if (!inView) {
      return;
    }
    this.setCentreProviderViewed();
    const {
      sendAmount,
      sourceCurrency,
      targetCurrency,
      maxVisibleProviders,
      trackEvent
    } = this.props;
    const {
      quotes,
      showingAllQuotes,
      savingsAgainstWise
    } = this.state;
    const visibleQuotes = showingAllQuotes ? quotes : quotes.slice(0, maxVisibleProviders);
    const trackingContext = {
      amount: sendAmount,
      source: sourceCurrency,
      target: targetCurrency,
      quotes: visibleQuotes,
      savingsAgainstWise,
      componentType: Table.Hero
    };
    trackTableViewed(trackingContext, trackEvent);
  };

  // eslint-disable-next-line sonarjs/cognitive-complexity
  render() {
    const {
      sourceCurrency,
      targetCurrency,
      sendAmount,
      midMarketRate,
      maxVisibleProviders,
      styles: styles$1,
      deliveryEstimationEnabled,
      isTransparencyFooterHidden,
      intl
    } = this.props;
    const currentLocale = intl.locale;

    // eslint-disable-next-line react/destructuring-assignment
    const locale = currentLocale.replace('_', '-');
    const derivedStyles = {
      ...styles,
      ...styles$1
    };
    const {
      quotes,
      showingAllQuotes,
      centreProviderViewed,
      savingsAgainstWise
    } = this.state;
    const showDeliveryEstimation = deliveryEstimationEnabled && isDeliveryEstimationCollectedForAllProviders(quotes);
    const highestReceivedAmount = extractHighestReceivedAmount(quotes);
    const wisePresentAndNotCheapest = isWisePresentAndNotCheapest(quotes);
    const displayShowMoreProvidersToggle = maxVisibleProviders && quotes.length > maxVisibleProviders;
    const visibleQuotes = showingAllQuotes ? quotes : quotes.slice(0, maxVisibleProviders);
    const centreProviderIndex = visibleQuotes ? getTrackingTriggerIndex(visibleQuotes.length) : null;
    const thClassKey = 'table-hero__th';
    const cellClassKey = 'table-hero__cell';
    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("table", {
      className: `${derivedStyles['table-hero']} ${displayShowMoreProvidersToggle ? '' : derivedStyles['without-show-more-option']}`
    }, /*#__PURE__*/React.createElement("thead", {
      className: derivedStyles['table-hero__thead']
    }, /*#__PURE__*/React.createElement("tr", {
      className: derivedStyles['table-hero__row']
    }, /*#__PURE__*/React.createElement("th", {
      className: derivedStyles[thClassKey]
    }, /*#__PURE__*/React.createElement(FormattedMessage, {
      values: {
        money: formatMoney(sendAmount, sourceCurrency, locale, {
          alwaysShowDecimals: true
        })
      },
      id: "sending-with"
    })), /*#__PURE__*/React.createElement("th", {
      className: derivedStyles[thClassKey]
    }, /*#__PURE__*/React.createElement(FormattedMessage, {
      id: "recipient-gets"
    }), /*#__PURE__*/React.createElement("span", {
      className: derivedStyles.headingInfo
    }, "(", /*#__PURE__*/React.createElement(FormattedMessage, {
      id: "total-after-fees"
    }), ")")), /*#__PURE__*/React.createElement("th", {
      className: derivedStyles[thClassKey]
    }, /*#__PURE__*/React.createElement(FormattedMessage, {
      id: "transfer-fee"
    })), /*#__PURE__*/React.createElement("th", {
      className: derivedStyles[thClassKey]
    }, /*#__PURE__*/React.createElement(FormattedMessage, {
      id: "exchange-rate"
    }), /*#__PURE__*/React.createElement("span", {
      className: derivedStyles.headingInfo
    }, /*#__PURE__*/React.createElement(CurrencyRouteDescription, {
      sourceCurrency: sourceCurrency,
      targetCurrency: targetCurrency,
      exchangeRate: midMarketRate,
      styles: styles$1
    }))))), /*#__PURE__*/React.createElement("tbody", null, visibleQuotes.map((quote, index) => {
      // TODO: Find a nicer way to parameterise the logo if possible rather than hardcoding.
      const logo = isWiseQuote(quote) ? `https://wise.com/public-resources/assets/logos/wise-personal/logo_inverse.svg` : quote.logos.normal.svgUrl;
      const isCheapest = quote.receivedAmount === highestReceivedAmount;
      const providerDependentStyles = getProviderDependentStyles(quote.alias, derivedStyles);
      const ProviderRow = /*#__PURE__*/React.forwardRef((props, reference) => {
        const {
          isCentre
        } = props;
        return /*#__PURE__*/React.createElement("tr", {
          key: quote.alias,
          className: `${derivedStyles['table-hero__row']} ${providerDependentStyles.row} ${isWiseQuote(quote) ? 'np-theme-personal--forest-green' : ''}`,
          ref: reference,
          "data-testid": isCentre ? 'centre-provider-row' : 'provider-row'
        }, /*#__PURE__*/React.createElement("td", {
          className: `${derivedStyles[cellClassKey]} ${providerDependentStyles.cell}`
        }, /*#__PURE__*/React.createElement(ProviderLogo, {
          logo: logo,
          altText: quote.logos.altText ? quote.logos.altText : quote.name,
          name: quote.name,
          alias: quote.alias,
          isPartner: quote.partner
        }), isCheapest && /*#__PURE__*/React.createElement("span", {
          className: derivedStyles.cheapestLabel
        }, /*#__PURE__*/React.createElement(Check, {
          className: derivedStyles.cheapestLabelTick
        }), /*#__PURE__*/React.createElement(FormattedMessage, {
          id: "cheapest"
        }))), /*#__PURE__*/React.createElement("td", {
          className: derivedStyles[cellClassKey]
        }, /*#__PURE__*/React.createElement(ReceiveAmount, {
          styles: {
            receiveText: `${providerDependentStyles.receiveAmountText} ${derivedStyles.extraPadding}`,
            negativeDelta: derivedStyles.negativeDeltaHero,
            positiveDelta: derivedStyles.positiveDeltaHero
          },
          amount: quote.receivedAmount,
          currency: targetCurrency,
          differenceToCheapest: quote.receivedAmount - highestReceivedAmount
        }), wisePresentAndNotCheapest && !isWiseQuote(quote) && isCheapest && /*#__PURE__*/React.createElement(NotCheapestDisclaimer, {
          styles: derivedStyles
        }), /*#__PURE__*/React.createElement(MoreInformationPopover, {
          styles: derivedStyles,
          notCheapest: wisePresentAndNotCheapest && !isWiseQuote(quote) && isCheapest,
          rate: quote.rate,
          fee: quote.fees,
          sourceCurrency: sourceCurrency,
          targetCurrency: targetCurrency,
          isFeaturedRow: isWiseQuote(quote)
        }), isCheapest && isWiseQuote(quote) && savingsAgainstWise > 0 && /*#__PURE__*/React.createElement("span", {
          className: `${providerDependentStyles.cheapestDelta}`
        }, /*#__PURE__*/React.createElement(FormattedMessage, {
          values: {
            savings: formatMoney(savingsAgainstWise, targetCurrency, locale, {
              alwaysShowDecimals: true
            })
          },
          id: "savings"
        })), quote.feeDisclaimer && /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(FeeDisclaimer, {
          text: quote.feeDisclaimer,
          style: derivedStyles['you-receive__fee-disclaimer']
        })), showDeliveryEstimation && /*#__PURE__*/React.createElement(DeliveryEstimationHero, {
          deliveryEstimation: quote.deliveryEstimation,
          styles: {
            'delivery-estimation-hero': `${derivedStyles['delivery-estimation-hero']} ${derivedStyles.extraPadding}`
          }
        })), /*#__PURE__*/React.createElement("td", {
          className: derivedStyles[cellClassKey]
        }, /*#__PURE__*/React.createElement(TransferFee, {
          styles: {
            feeText: `${providerDependentStyles.feeText}`
          },
          currency: sourceCurrency,
          fee: quote.fees,
          label: quote.feeDisclaimer ? /*#__PURE__*/React.createElement(FeeDisclaimer, {
            text: quote.feeDisclaimer
          }) : null
        })), /*#__PURE__*/React.createElement("td", {
          className: derivedStyles[cellClassKey]
        }, /*#__PURE__*/React.createElement(ExchangeRateIndicator, {
          styles: {
            rateAndIndicator: derivedStyles.exchangeRate
          },
          referenceRate: midMarketRate,
          rate: quote.rate,
          label: isConsideredMidmarketRate(quote.rate, midMarketRate) ? /*#__PURE__*/React.createElement(Label, {
            styles: {
              labelLink: 'highlightedLabelLink'
            },
            message: "mid-market-rate"
          }) : null,
          sourceCurrency: sourceCurrency,
          targetCurrency: targetCurrency
        })));
      });
      const isCentreProvider = index === centreProviderIndex;
      return (
        /*#__PURE__*/
        // eslint-disable-next-line react/jsx-key
        React.createElement(ConditionalWrapper, {
          condition: !centreProviderViewed && isCentreProvider,
          wrapper: children => /*#__PURE__*/React.createElement(InView, {
            onChange: (inView, _) => this.onTableView(inView),
            threshold: 1,
            triggerOnce: true
          }, ({
            _,
            ref
          }) => /*#__PURE__*/React.cloneElement(children, {
            ref: ref,
            isCentre: true
          }))
        }, /*#__PURE__*/React.createElement(ProviderRow, null))
      );
    }))), displayShowMoreProvidersToggle && /*#__PURE__*/React.createElement("div", {
      className: `text-xs-center p-b-2 ${derivedStyles.toggleContainer}`
    }, /*#__PURE__*/React.createElement(ShowMoreProviders, {
      styles: {
        toggle: derivedStyles.toggleHero
      },
      isExpanded: showingAllQuotes,
      onToggle: this.toggleShowAllQuotes
    })), !isTransparencyFooterHidden && /*#__PURE__*/React.createElement(TransparencyBanner, {
      styles: derivedStyles
    }));
  }
}
ComparisonTableHero.propTypes = {
  sourceCurrency: PropTypes.string.isRequired,
  targetCurrency: PropTypes.string.isRequired,
  sendAmount: PropTypes.number.isRequired,
  // eslint-disable-next-line react/no-unused-prop-types
  quotes: PropTypes.arrayOf(PropTypes.shape({
    // eslint-disable-line react/no-unused-prop-types
    id: PropTypes.number.isRequired,
    name: PropTypes.string.isRequired,
    alias: PropTypes.string.isRequired,
    logos: PropTypes.shape({
      normal: PropTypes.shape({
        svgUrl: PropTypes.string,
        pngUrl: PropTypes.string
      }),
      altText: PropTypes.string.isRequired
    }),
    partner: PropTypes.bool,
    rate: PropTypes.number.isRequired,
    fees: PropTypes.number.isRequired,
    receivedAmount: PropTypes.number.isRequired,
    dateCollected: PropTypes.string.isRequired
  })).isRequired,
  midMarketRate: PropTypes.number,
  styles: PropTypes.shape({
    featuredRow: PropTypes.string,
    featuredCell: PropTypes.string,
    receiveAmountHero: PropTypes.string,
    positiveDeltaHighlighted: PropTypes.string,
    toggleHero: PropTypes.string,
    highlightedFee: PropTypes.string,
    receiveAmount: PropTypes.string,
    fee: PropTypes.string,
    'table-hero': PropTypes.string,
    'table-hero__thead': PropTypes.string,
    'table-hero__row': PropTypes.string,
    'table-hero__th': PropTypes.string,
    headingInfo: PropTypes.string,
    'table-hero__cell': PropTypes.string,
    cheapestLabel: PropTypes.string,
    cheapestLabelTick: PropTypes.string,
    negativeDeltaHero: PropTypes.string,
    positiveDeltaHero: PropTypes.string,
    exchangeRate: PropTypes.string,
    disclaimerPopover: PropTypes.string,
    helpCircle: PropTypes.string,
    moreInformationPopover: PropTypes.string,
    alignmentContainer: PropTypes.string,
    alignLeft: PropTypes.string,
    alignRight: PropTypes.string,
    extraPadding: PropTypes.string,
    'delivery-estimation-hero': PropTypes.string
  }),
  excludePartners: PropTypes.bool,
  // eslint-disable-line react/no-unused-prop-types
  maxVisibleProviders: PropTypes.number,
  onTableRendered: PropTypes.func,
  deliveryEstimationEnabled: PropTypes.bool,
  isTransparencyFooterHidden: PropTypes.bool,
  trackEvent: PropTypes.func
};
ComparisonTableHero.defaultProps = {
  styles: {},
  midMarketRate: undefined,
  excludePartners: true,
  maxVisibleProviders: undefined,
  deliveryEstimationEnabled: false,
  onTableRendered: () => {},
  isTransparencyFooterHidden: false,
  trackEvent: () => {}
};
const NotCheapestDisclaimer = ({
  styles
}) => {
  // eslint-disable-next-line jest/unbound-method
  const {
    formatMessage
  } = useIntl();
  return /*#__PURE__*/React.createElement("div", {
    className: styles.disclaimerPopover
  }, /*#__PURE__*/React.createElement(Info, {
    content: /*#__PURE__*/React.createElement(FormattedMessage, {
      id: "not-cheapest-disclaimer"
    }),
    size: Size.SMALL,
    "aria-label": formatMessage({
      id: 'disclaimer'
    })
  }));
};
NotCheapestDisclaimer.propTypes = {
  styles: PropTypes.shape({
    disclaimerPopover: PropTypes.string,
    helpCircle: PropTypes.string
  })
};
NotCheapestDisclaimer.defaultProps = {
  styles: {}
};
const MoreInformationPopover = ({
  styles,
  notCheapest,
  rate,
  fee,
  sourceCurrency,
  targetCurrency,
  isFeaturedRow
}) => {
  const {
    formatMessage
  } = useIntl();
  const content = /*#__PURE__*/React.createElement(MoreInformationContent, {
    styles: styles,
    notCheapest: notCheapest,
    rate: rate,
    fee: fee,
    sourceCurrency: sourceCurrency,
    targetCurrency: targetCurrency
  });
  return /*#__PURE__*/React.createElement("span", {
    className: styles.moreInformationPopover
  }, /*#__PURE__*/React.createElement(Popover, {
    content: content,
    preferredPlacement: Position.BOTTOM
  }, /*#__PURE__*/React.createElement("button", {
    type: "button",
    "aria-label": formatMessage({
      id: 'more-info'
    }),
    className: "btn-unstyled ",
    children: /*#__PURE__*/React.createElement(More, {
      size: 24,
      className: isFeaturedRow ? styles.featuredRow : ''
    })
  })));
};
const MoreInformationContent = ({
  styles,
  notCheapest,
  rate,
  fee,
  sourceCurrency,
  targetCurrency
}) => {
  const {
    locale
  } = useIntl();
  const rateInAllFormats = getRateInAllFormats(rate, sourceCurrency, targetCurrency, {}, locale);
  return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("span", {
    className: styles.alignmentContainer
  }, /*#__PURE__*/React.createElement("p", {
    className: styles.alignLeft
  }, /*#__PURE__*/React.createElement(FormattedMessage, {
    id: "exchange-rate"
  })), /*#__PURE__*/React.createElement("p", {
    className: styles.alignRight
  }, /*#__PURE__*/React.createElement("b", null, rateInAllFormats ? rateInAllFormats.formats?.equation?.calculationInDecimal : null))), /*#__PURE__*/React.createElement("span", {
    className: styles.alignmentContainer
  }, /*#__PURE__*/React.createElement("p", {
    className: styles.alignLeft
  }, /*#__PURE__*/React.createElement(FormattedMessage, {
    id: "transfer-fee"
  })), /*#__PURE__*/React.createElement("p", {
    className: styles.alignRight
  }, /*#__PURE__*/React.createElement("b", null, formatMoney(fee, sourceCurrency, locale, {
    alwaysShowDecimals: true
  })))), /*#__PURE__*/React.createElement("span", null, notCheapest && /*#__PURE__*/React.createElement(FormattedMessage, {
    id: "not-cheapest-disclaimer"
  })));
};
MoreInformationPopover.propTypes = {
  styles: PropTypes.shape({
    moreInformationPopover: PropTypes.string,
    featuredRow: PropTypes.string,
    alignmentContainer: PropTypes.string,
    alignLeft: PropTypes.string,
    alignRight: PropTypes.string
  })
};
MoreInformationPopover.defaultProps = {
  styles: {}
};
var ComparisonTableHero$1 = injectIntl(ComparisonTableHero);

/* eslint-disable react/jsx-filename-extension */
function extractTwRate(quotes) {
  const twQuotes = quotes.filter(quote => isWiseQuote(quote));
  return twQuotes.length > 0 ? twQuotes[0].rate : null;
}
class ComparisonTableHeroContainer extends Component {
  constructor(props) {
    super(props);
    const {
      initialQuotes,
      midMarketRate
    } = this.props;
    this.state = {
      loadingQuotes: !initialQuotes.length,
      quotes: initialQuotes,
      midMarketRate,
      loadingMidMarketRate: !midMarketRate
    };
  }
  async componentDidMount() {
    const {
      initialQuotes,
      sourceCurrency,
      targetCurrency,
      sendAmount,
      midMarketRate
    } = this.props;
    let quotesPromise;
    if (!initialQuotes.length) {
      quotesPromise = this.loadQuotes(sourceCurrency, targetCurrency, sendAmount);
    } else {
      quotesPromise = Promise.resolve(initialQuotes);
    }
    if (!midMarketRate) {
      const midMarketRatePromise = this.loadMidMarketRate(sourceCurrency, targetCurrency);
      const fetchedQuotes = await quotesPromise;
      let fetchedMidMarketRate = extractTwRate(fetchedQuotes);
      if (!fetchedMidMarketRate) {
        try {
          fetchedMidMarketRate = await midMarketRatePromise;
        } catch (error) {
          // eslint-disable-next-line no-console
          console.error('Failed to fetch mid-market rate', error);
          return;
          // Ignore
        }
      }
      this.setState({
        midMarketRate: fetchedMidMarketRate,
        loadingMidMarketRate: false
      });
    }
  }
  componentDidUpdate(previousProps) {
    const {
      sourceCurrency,
      targetCurrency,
      sendAmount
    } = this.props;
    if (sourceCurrency !== previousProps.sourceCurrency || targetCurrency !== previousProps.targetCurrency || sendAmount !== previousProps.sendAmount) {
      this.loadQuotes(sourceCurrency, targetCurrency, sendAmount);
    }
  }
  async loadQuotes(sourceCurrency, targetCurrency, sendAmount) {
    const quotesResponse = await fetchQuotes(sourceCurrency, targetCurrency, sendAmount);
    const {
      quotes
    } = quotesResponse;
    this.setState({
      quotes,
      loadingQuotes: false
    });
    return quotes;
  }
  loadMidMarketRate(sourceCurrency, targetCurrency) {
    this.setState({
      loadingMidMarketRate: true
    });
    return fetchRate(sourceCurrency, targetCurrency).then(response => response.route.rate).catch(error => {
      // eslint-disable-next-line no-console
      console.error('Failed to fetch mid-market rate', error);
    });
  }
  render() {
    const {
      sourceCurrency,
      targetCurrency,
      sendAmount,
      excludePartners,
      maxVisibleProviders,
      deliveryEstimationEnabled,
      isTransparencyFooterHidden,
      trackEvent
    } = this.props;
    const {
      loadingQuotes,
      quotes,
      midMarketRate,
      loadingMidMarketRate
    } = this.state;
    return /*#__PURE__*/React.createElement(ThemeProvider, {
      theme: "personal",
      screenMode: "light",
      className: styles['theme-without-bg']
    }, loadingQuotes || loadingMidMarketRate ? /*#__PURE__*/React.createElement("div", null, ' ', /*#__PURE__*/React.createElement(Loader, {
      classNames: styles,
      "data-testid": "loader"
    })) : /*#__PURE__*/React.createElement(ComparisonTableHero$1, {
      sourceCurrency: sourceCurrency,
      targetCurrency: targetCurrency,
      sendAmount: sendAmount,
      quotes: quotes,
      midMarketRate: midMarketRate,
      excludePartners: excludePartners,
      maxVisibleProviders: maxVisibleProviders,
      deliveryEstimationEnabled: deliveryEstimationEnabled,
      isTransparencyFooterHidden: isTransparencyFooterHidden,
      trackEvent: trackEvent
    }));
  }
}
ComparisonTableHeroContainer.propTypes = {
  sourceCurrency: PropTypes.string.isRequired,
  targetCurrency: PropTypes.string.isRequired,
  sendAmount: PropTypes.number.isRequired,
  midMarketRate: PropTypes.number,
  initialQuotes: PropTypes.arrayOf(PropTypes.shape({
    id: PropTypes.number.isRequired,
    name: PropTypes.string.isRequired,
    alias: PropTypes.string.isRequired,
    logo: PropTypes.string.isRequired,
    rate: PropTypes.number.isRequired,
    fees: PropTypes.number.isRequired,
    receivedAmount: PropTypes.number.isRequired,
    dateCollected: PropTypes.string.isRequired
  })),
  excludePartners: PropTypes.bool,
  maxVisibleProviders: PropTypes.number,
  deliveryEstimationEnabled: PropTypes.bool,
  isTransparencyFooterHidden: PropTypes.bool,
  trackEvent: PropTypes.func
};
ComparisonTableHeroContainer.defaultProps = {
  initialQuotes: [],
  midMarketRate: undefined,
  maxVisibleProviders: undefined,
  excludePartners: true,
  deliveryEstimationEnabled: false,
  isTransparencyFooterHidden: false,
  trackEvent: () => {}
};

export { ComparisonTableHero$1 as C, ComparisonTableHeroContainer as a };
//# sourceMappingURL=ComparisonTableHeroContainer-ef61d39c.js.map
