import { _ as __awaiter } from './tslib.es6-2e1f499a.js';
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
import { Info, Size, Breakpoint, Loader } from '@transferwise/components';
import { ThemeProvider } from '@wise/components-theming';
import React, { useState, useLayoutEffect, useEffect } from 'react';
import { f as fetchQuotes } from './fetchQuotes-31ac98ed.js';
import { n as numberEqualsWithRelativeTolerance, F as FeeType, i as isWiseQuote, s as sortTransferFeeComparisonQuoteByReceiveAmount, a as transformV2ToComparisonQuote, t as transformQuotesResponseV2 } from './transformQuotesResponseV2-6eb16ebc.js';
import { calculateSavingsWithRespectToWiseQuote } from './savingsCalculator.js';
import { m as getTrackingTriggerIndex, T as Table, l as trackTableViewed, n as trackFeePopoverClicked } from './tracking-7717c145.js';
import { s as styleInject } from './style-inject.es-1f59c1d0.js';
import { useIntl, FormattedMessage } from 'react-intl';
import { c as createUrl } from './createUrl-71d09e7b.js';
import { g as generateUrl, A as AvailablePages } from './generateUrl-3fc80d02.js';
import { formatMoney } from '@transferwise/formatting';
import { InView } from 'react-intersection-observer';
import { W as WISE_ALIAS } from './provider-constants-b35398f2.js';
import { s as sortByDeliveryDate } from './sortQuotesByDeliverySpeedEstimate-f8c8a1b8.js';
import { Check, Clock } from '@transferwise/icons';
import { P as ProviderLogo } from './ProviderLogo-cc9009cf.js';
import throttle from 'lodash.throttle';
import { h as hasDuration, f as formatDeliveryEstimation } from './deliveryEstimationFormatter-5aea20f1.js';

var css_248z$8 = ".cc_transfer-fee-comparison__container_3805190947 {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  padding: var(--size-4);\n}\n.cc_transfer-fee-comparison__header_3805190947 {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n}\n.cc_transfer-fee-comparison__table_3805190947 {\n  padding-top: var(--size-24);\n  background-color: unset;\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n}\n@media (min-width: 768px) {\n  .cc_transfer-fee-comparison__table_3805190947 {\n    margin: auto;\n    padding-top: var(--size-40);\n  }\n}\n.cc_transfer-fee-comparison__footer_3805190947 {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  margin: auto;\n  padding-right: var(--size-40);\n  padding-bottom: var(--size-24);\n}\n@media (max-width: 767px) {\n  .cc_transfer-fee-comparison__footer_3805190947 {\n    flex-direction: column;\n    align-items: center;\n    padding-right: 0;\n  }\n}\n.cc_loader-container_3805190947 {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--size-24) 0 var(--size-40);\n}\n\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy90cmFuc2Zlci1mZWUtY29tcGFyaXNvbi9UcmFuc2ZlckZlZUNvbXBhcmlzb25Db250YWluZXIubW9kdWxlLmxlc3MiLCJUcmFuc2ZlckZlZUNvbXBhcmlzb25Db250YWluZXIubW9kdWxlLmxlc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBR0E7RUFDRSxhQUFBO0VBQ0Esc0JBQUE7RUFDQSx1QkFBQTtFQUNBLHNCQUFBO0FDRkY7QURXQTtFQUxFLGFBQUE7RUFDQSxtQkFBQTtFQUNBLHVCQUFBO0FDSEY7QURVQTtFQUNFLDJCQUFBO0VBQ0EsdUJBQUE7RUFYQSxhQUFBO0VBQ0EsbUJBQUE7RUFDQSx1QkFBQTtBQ0lGO0FEUUU7RUFBQTtJQUNFLFlBQUE7SUFDQSwyQkFBQTtFQ0xGO0FBQ0Y7QURRQTtFQXBCRSxhQUFBO0VBQ0EsbUJBQUE7RUFDQSx1QkFBQTtFQXFCQSxZQUFBO0VBQ0EsNkJBQUE7RUFDQSw4QkFBQTtBQ0xGO0FET0U7RUFBQTtJQUNFLHNCQUFBO0lBQ0EsbUJBQUE7SUFDQSxnQkFBQTtFQ0pGO0FBQ0Y7QURPQTtFQUNFLGFBQUE7RUFDQSxtQkFBQTtFQUNBLHVCQUFBO0VBQ0Esd0NBQUE7QUNMRiIsImZpbGUiOiJUcmFuc2ZlckZlZUNvbXBhcmlzb25Db250YWluZXIubW9kdWxlLmxlc3MifQ== */";
var styles = {"transfer-fee-comparison__container":"cc_transfer-fee-comparison__container_3805190947","transferFeeComparison__container":"cc_transfer-fee-comparison__container_3805190947","transfer-fee-comparison__header":"cc_transfer-fee-comparison__header_3805190947","transferFeeComparison__header":"cc_transfer-fee-comparison__header_3805190947","transfer-fee-comparison__table":"cc_transfer-fee-comparison__table_3805190947","transferFeeComparison__table":"cc_transfer-fee-comparison__table_3805190947","transfer-fee-comparison__footer":"cc_transfer-fee-comparison__footer_3805190947","transferFeeComparison__footer":"cc_transfer-fee-comparison__footer_3805190947","loader-container":"cc_loader-container_3805190947","loaderContainer":"cc_loader-container_3805190947"};
styleInject(css_248z$8);

var css_248z$7 = ".cc_transfer-fee-comparison-footer__no-hidden-fees_3805190947 {\n  display: flex;\n  align-items: center;\n  padding-bottom: var(--size-16);\n  color: var(--color-content-primary);\n  font-family: var(--font-family-display, \"Wise Sans\", \"Inter\", sans-serif);\n  font-size: var(--font-size-32);\n}\n@media (min-width: 768px) {\n  .cc_transfer-fee-comparison-footer__no-hidden-fees_3805190947 {\n    padding: 0 var(--size-40);\n    white-space: nowrap;\n  }\n}\n.cc_transfer-fee-comparison-footer__disclaimer_3805190947 {\n  font-size: var(--font-size-14);\n  text-align: center;\n}\n@media (min-width: 768px) {\n  .cc_transfer-fee-comparison-footer__disclaimer_3805190947 {\n    width: calc(var(--size-24) * 20);\n    text-align: left;\n  }\n}\n.cc_transfer-fee-comparison-footer__link_3805190947 {\n  font-weight: var(--font-weight-bold);\n}\n\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy90cmFuc2Zlci1mZWUtY29tcGFyaXNvbi90cmFuc2Zlci1mZWUtY29tcGFyaXNvbi1mb290ZXIvVHJhbnNmZXJGZWVDb21wYXJpc29uRm9vdGVyLm1vZHVsZS5sZXNzIiwiVHJhbnNmZXJGZWVDb21wYXJpc29uRm9vdGVyLm1vZHVsZS5sZXNzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUdBO0VBQ0UsYUFBQTtFQUNBLG1CQUFBO0VBQ0EsOEJBQUE7RUFDQSxtQ0FBQTtFQUNBLHlFQUFBO0VBQ0EsOEJBQUE7QUNGRjtBRElFO0VBQUE7SUFDRSx5QkFBQTtJQUNBLG1CQUFBO0VDREY7QUFDRjtBRElBO0VBQ0UsOEJBQUE7RUFDQSxrQkFBQTtBQ0ZGO0FESUU7RUFBQTtJQUNFLGdDQUFBO0lBQ0EsZ0JBQUE7RUNERjtBQUNGO0FESUE7RUFDRSxvQ0FBQTtBQ0ZGIiwiZmlsZSI6IlRyYW5zZmVyRmVlQ29tcGFyaXNvbkZvb3Rlci5tb2R1bGUubGVzcyJ9 */";
var componentStyles$7 = {"transfer-fee-comparison-footer__no-hidden-fees":"cc_transfer-fee-comparison-footer__no-hidden-fees_3805190947","transferFeeComparisonFooter__noHiddenFees":"cc_transfer-fee-comparison-footer__no-hidden-fees_3805190947","transfer-fee-comparison-footer__disclaimer":"cc_transfer-fee-comparison-footer__disclaimer_3805190947","transferFeeComparisonFooter__disclaimer":"cc_transfer-fee-comparison-footer__disclaimer_3805190947","transfer-fee-comparison-footer__link":"cc_transfer-fee-comparison-footer__link_3805190947","transferFeeComparisonFooter__link":"cc_transfer-fee-comparison-footer__link_3805190947"};
styleInject(css_248z$7);

const TransferFeeComparisonFooter = () => {
    const { locale } = useIntl();
    const DISCLAIMER_LINK = createUrl(generateUrl(locale, 'compare/disclaimer', AvailablePages.COMPARISON_DISCLAIMER));
    return (jsxs(Fragment, { children: [jsx("div", Object.assign({ className: componentStyles$7.transferFeeComparisonFooter__noHiddenFees }, { children: jsx(FormattedMessage, { id: "no-hidden-fees" }) })), jsxs("div", Object.assign({ className: componentStyles$7.transferFeeComparisonFooter__disclaimer }, { children: [jsx(FormattedMessage, { id: "disclaimer" }), '. ', jsx("a", Object.assign({ className: componentStyles$7.transferFeeComparisonFooter__link, href: DISCLAIMER_LINK, target: "_blank", rel: "noreferrer" }, { children: jsx(FormattedMessage, { id: "how-we-get-information" }) }))] }))] }));
};

var css_248z$6 = ".cc_transfer-fee-comparison-header__container_3805190947 {\n  display: flex;\n  flex-direction: column;\n}\n.cc_transfer-fee-comparison-header__compare-pricing-speed_3805190947 {\n  color: var(--color-content-primary);\n  font-family: var(--font-family-display, \"Wise Sans\", \"Inter\", sans-serif);\n  font-size: calc(var(--font-size-12) * 4.5);\n  line-height: var(--size-48);\n  text-align: center;\n}\n@media (max-width: 767px) {\n  .cc_transfer-fee-comparison-header__compare-pricing-speed_3805190947 {\n    padding: var(--size-24) var(--size-4);\n    font-size: calc(4vw * 2.8);\n    line-height: calc(4vw * 2.3);\n  }\n}\n@media (min-width: 768px) {\n  .cc_transfer-fee-comparison-header__compare-pricing-speed_3805190947 {\n    width: calc(var(--size-40) * 20);\n    padding-top: var(--size-40);\n    padding-bottom: var(--size-24);\n  }\n}\n.cc_transfer-fee-comparison-header__find-out_3805190947 {\n  margin: auto;\n  font-size: var(--font-size-14);\n  text-align: center;\n}\n@media (max-width: 767px) {\n  .cc_transfer-fee-comparison-header__find-out_3805190947 {\n    width: calc(var(--size-24) * 12);\n  }\n}\n\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy90cmFuc2Zlci1mZWUtY29tcGFyaXNvbi90cmFuc2Zlci1mZWUtY29tcGFyaXNvbi1oZWFkZXIvVHJhbnNmZXJGZWVDb21wYXJpc29uSGVhZGVyLm1vZHVsZS5sZXNzIiwiVHJhbnNmZXJGZWVDb21wYXJpc29uSGVhZGVyLm1vZHVsZS5sZXNzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUdBO0VBQ0UsYUFBQTtFQUNBLHNCQUFBO0FDRkY7QURLQTtFQUNFLG1DQUFBO0VBQ0EseUVBQUE7RUFDQSwwQ0FBQTtFQUNBLDJCQUFBO0VBQ0Esa0JBQUE7QUNIRjtBREtFO0VBQUE7SUFDRSxxQ0FBQTtJQUNBLDBCQUFBO0lBQ0EsNEJBQUE7RUNGRjtBQUNGO0FESUU7RUFBQTtJQUNFLGdDQUFBO0lBQ0EsMkJBQUE7SUFDQSw4QkFBQTtFQ0RGO0FBQ0Y7QURJQTtFQUNFLFlBQUE7RUFDQSw4QkFBQTtFQUNBLGtCQUFBO0FDRkY7QURJRTtFQUFBO0lBQ0UsZ0NBQUE7RUNERjtBQUNGIiwiZmlsZSI6IlRyYW5zZmVyRmVlQ29tcGFyaXNvbkhlYWRlci5tb2R1bGUubGVzcyJ9 */";
var componentStyles$6 = {"transfer-fee-comparison-header__container":"cc_transfer-fee-comparison-header__container_3805190947","transferFeeComparisonHeader__container":"cc_transfer-fee-comparison-header__container_3805190947","transfer-fee-comparison-header__compare-pricing-speed":"cc_transfer-fee-comparison-header__compare-pricing-speed_3805190947","transferFeeComparisonHeader__comparePricingSpeed":"cc_transfer-fee-comparison-header__compare-pricing-speed_3805190947","transfer-fee-comparison-header__find-out":"cc_transfer-fee-comparison-header__find-out_3805190947","transferFeeComparisonHeader__findOut":"cc_transfer-fee-comparison-header__find-out_3805190947"};
styleInject(css_248z$6);

const TransferFeeComparisonHeader = ({ showSpeed = false, }) => {
    return (jsxs("div", Object.assign({ className: componentStyles$6.transferFeeComparisonHeader__container }, { children: [jsx("div", Object.assign({ className: componentStyles$6.transferFeeComparisonHeader__comparePricingSpeed }, { children: jsx(FormattedMessage, { id: showSpeed ? 'compare-pricing-speed' : 'find-out-how-much' }) })), showSpeed && (jsx("div", Object.assign({ className: componentStyles$6.transferFeeComparisonHeader__findOut }, { children: jsx(FormattedMessage, { id: "find-out-real" }) })))] })));
};

var css_248z$5 = ".cc_transfer-fee-comparison-table-row__border-line_3805190947 {\n  max-width: 90%;\n  margin: 0 auto;\n}\n.cc_transfer-fee-comparison-table-row__border_3805190947 {\n  display: none;\n}\n@media (max-width: 767px) {\n  .cc_transfer-fee-comparison-table-row__border_3805190947 {\n    display: table-row;\n  }\n}\n.cc_transfer-fee-comparison-table-row_3805190947 {\n  width: 100%;\n  min-width: calc(var(--size-8) * 66);\n  height: 124px;\n}\n.cc_transfer-fee-comparison-table-row--dark_3805190947 {\n  background: var(--color-forest-green);\n  color: var(--color-white);\n}\n.cc_transfer-fee-comparison-table-row_3805190947 .cc_cell-border_3805190947 {\n  position: relative;\n}\n.cc_transfer-fee-comparison-table-row_3805190947 .cc_cell-border_3805190947::after {\n  content: '';\n  position: absolute;\n  z-index: 1;\n  bottom: 0;\n  left: -49%;\n  width: 229%;\n  height: 2px;\n  background: rgba(0, 0, 0, 0.03);\n  pointer-events: none;\n}\n@media (max-width: 767px) {\n  .cc_transfer-fee-comparison-table-row_3805190947 .cc_cell-border_3805190947::after {\n    display: none;\n  }\n}\n.cc_transfer-fee-comparison-table-row--border_3805190947 td:nth-child(2) {\n  position: relative;\n}\n.cc_transfer-fee-comparison-table-row--border_3805190947 td:nth-child(2)::after {\n  content: '';\n  position: absolute;\n  z-index: 1;\n  bottom: 0;\n  left: -49%;\n  width: 229%;\n  height: 2px;\n  background: rgba(0, 0, 0, 0.03);\n  pointer-events: none;\n}\n@media (max-width: 767px) {\n  .cc_transfer-fee-comparison-table-row--border_3805190947 td:nth-child(2)::after {\n    display: none;\n  }\n}\n@media (max-width: 767px) {\n  .cc_transfer-fee-comparison-table-row_3805190947 {\n    display: flex;\n    flex-direction: column;\n    min-width: calc(var(--size-8) * 37);\n    height: 100%;\n    padding: var(--size-40) var(--size-32) var(--size-24) var(--size-8);\n  }\n}\n.cc_transfer-fee-comparison-table-row__provider-logo_3805190947 {\n  position: relative;\n  padding: 0 var(--size-40);\n}\n@media (max-width: 767px) {\n  .cc_transfer-fee-comparison-table-row__provider-logo_3805190947 {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding-right: 0;\n    padding-left: var(--size-8);\n  }\n}\n@media (min-width: 768px) {\n  .cc_transfer-fee-comparison-table-row__provider-logo--no-speed_3805190947 {\n    padding: 0 calc(var(--size-32) * 2);\n  }\n}\n.cc_transfer-fee-comparison-table-row__provider-logo--internal_3805190947 {\n  min-width: calc(var(--size-8) * 10);\n  max-width: 6em;\n  max-height: 1.5em;\n  margin: var(--size-4) 0;\n  object-fit: contain;\n  object-position: 0 0;\n}\n@media (min-width: 768px) {\n  .cc_transfer-fee-comparison-table-row__provider-logo--internal_3805190947 {\n    max-width: 8em;\n    max-height: 2em;\n  }\n}\n@media (max-width: 767px) {\n  .cc_transfer-fee-comparison-table-row__fee_3805190947 {\n    position: relative;\n    right: calc(-5 * var(--size-4));\n  }\n}\n@media (min-width: 768px) {\n  .cc_transfer-fee-comparison-table-row__fee_3805190947 {\n    width: 100%;\n    margin: 0 calc(var(--size-8) * 1.875);\n    padding-right: var(--size-32);\n    padding-left: calc(var(--size-32) * 2);\n  }\n}\n@media (min-width: 768px) {\n  .cc_transfer-fee-comparison-table-row__fee--no-speed_3805190947 {\n    padding-right: calc(var(--size-16) * 3);\n    padding-left: calc(var(--size-32) * 5);\n  }\n}\n.cc_transfer-fee-comparison-table-row__fee-vertical_3805190947 {\n  display: flex;\n  flex-direction: column;\n}\n.cc_transfer-fee-comparison-table-row__fee-label_3805190947 {\n  margin-bottom: var(--size-4);\n  padding-right: var(--size-24);\n  color: var(--color-content-primary);\n  font-family: var(--font-family-regular);\n  font-size: var(--font-size-20);\n  font-weight: var(--font-weight-semi-bold);\n  text-align: right;\n}\n.cc_transfer-fee-comparison-table-row__fee-label--dark_3805190947 {\n  color: var(--color-bright-green);\n}\n@media (max-width: 767px) {\n  .cc_transfer-fee-comparison-table-row__fee-label_3805190947 {\n    display: none;\n  }\n}\n.cc_transfer-fee-comparison-table-row__fee-label-mobile_3805190947 {\n  margin-bottom: var(--size-4);\n  padding-right: var(--size-24);\n  color: var(--color-content-primary);\n  font-family: var(--font-family-regular);\n  font-size: var(--font-size-20);\n  font-weight: var(--font-weight-semi-bold);\n  text-align: right;\n  display: none;\n  margin-bottom: 0;\n}\n.cc_transfer-fee-comparison-table-row__fee-label-mobile--dark_3805190947 {\n  color: var(--color-bright-green);\n}\n@media (max-width: 767px) {\n  .cc_transfer-fee-comparison-table-row__fee-label-mobile_3805190947 {\n    display: none;\n  }\n}\n.cc_transfer-fee-comparison-table-row__fee-label-mobile--dark_3805190947 {\n  color: var(--color-bright-green);\n}\n@media (max-width: 767px) {\n  .cc_transfer-fee-comparison-table-row__fee-label-mobile_3805190947 {\n    display: block;\n    padding-right: var(--size-4);\n  }\n}\n.cc_transfer-fee-comparison-table-row__last-right_3805190947 {\n  border-bottom-right-radius: var(--size-40);\n}\n.cc_transfer-fee-comparison-table-row__last-left_3805190947 {\n  border-bottom-left-radius: var(--size-40);\n}\n@media (max-width: 767px) {\n  .cc_transfer-fee-comparison-table-row__last-mobile_3805190947 {\n    border-bottom-right-radius: var(--size-40);\n    border-bottom-left-radius: var(--size-40);\n  }\n}\n.cc_transfer-fee-comparison-table-row__speed_3805190947 {\n  min-width: calc(var(--size-4) * 75);\n  padding-right: var(--size-40);\n  padding-left: calc(var(--size-32) * 2);\n  background: #f3f5f199;\n  text-align: right;\n}\n.cc_transfer-fee-comparison-table-row__speed--dark_3805190947 {\n  background: var(--color-forest-green);\n  color: var(--color-white);\n}\n@media (max-width: 767px) {\n  .cc_transfer-fee-comparison-table-row__speed_3805190947 {\n    display: none;\n    width: 0;\n    padding-right: 0;\n  }\n}\n.cc_transfer-fee-comparison-table-row__speed-mobile_3805190947 {\n  display: none;\n}\n@media (max-width: 767px) {\n  .cc_transfer-fee-comparison-table-row__speed-mobile_3805190947 {\n    display: block;\n    margin-right: var(--size-24);\n  }\n}\n.cc_transfer-fee-comparison-table-row__cheapestLabel_3805190947 {\n  display: block;\n  position: absolute;\n  z-index: 1;\n  top: calc(-7 * var(--size-4));\n  right: calc(-9 * calc(var(--size-4)));\n  bottom: unset;\n  left: unset;\n  padding: var(--size-4) var(--size-8);\n  border-radius: calc(var(--size-4) - 1px);\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@media (min-width: 768px) {\n  .cc_transfer-fee-comparison-table-row__cheapestLabel_3805190947 {\n    z-index: 1;\n    top: var(--size-8);\n    right: unset;\n    left: calc(-1 * var(--size-16));\n  }\n}\n.cc_transfer-fee-comparison-table-row__cheapestLabelTick_3805190947 {\n  display: inline-block;\n  height: var(--size-16);\n  margin-right: var(--size-8);\n  vertical-align: bottom;\n}\n\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy90cmFuc2Zlci1mZWUtY29tcGFyaXNvbi90cmFuc2Zlci1mZWUtY29tcGFyaXNvbi10YWJsZS1yb3cvVHJhbnNmZXJGZWVDb21wYXJpc29uVGFibGVSb3cubW9kdWxlLmxlc3MiLCJUcmFuc2ZlckZlZUNvbXBhcmlzb25UYWJsZVJvdy5tb2R1bGUubGVzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFLQTtFQUNFLGNBQUE7RUFDQSxjQUFBO0FDSkY7QURPQTtFQUNFLGFBQUE7QUNMRjtBRE9FO0VBQUE7SUFDRSxrQkFBQTtFQ0pGO0FBQ0Y7QURPQTtFQUNFLFdBQUE7RUFDQSxtQ0FBQTtFQUNBLGFBQUE7QUNMRjtBRE9FO0VBQ0UscUNBQUE7RUFDQSx5QkFBQTtBQ0xKO0FERkE7RUFXSSxrQkFBQTtBQ05KO0FEUUk7RUFDRSxXQUFBO0VBQ0Esa0JBQUE7RUFDQSxVQUFBO0VBQ0EsU0FBQTtFQUNBLFVBQUE7RUFDQSxXQUFBO0VBQ0EsV0FBQTtFQUNBLCtCQUFBO0VBQ0Esb0JBQUE7QUNOTjtBRFFNO0VBQUE7SUFDRSxhQUFBO0VDTE47QUFDRjtBRFNFO0VBbkJFLGtCQUFBO0FDYUo7QURYSTtFQUNFLFdBQUE7RUFDQSxrQkFBQTtFQUNBLFVBQUE7RUFDQSxTQUFBO0VBQ0EsVUFBQTtFQUNBLFdBQUE7RUFDQSxXQUFBO0VBQ0EsK0JBQUE7RUFDQSxvQkFBQTtBQ2FOO0FEWE07RUFBQTtJQUNFLGFBQUE7RUNjTjtBQUNGO0FETkU7RUFBQTtJQUNFLGFBQUE7SUFDQSxzQkFBQTtJQUNBLG1DQUFBO0lBQ0EsWUFBQTtJQUNBLG1FQUFBO0VDU0Y7QUFDRjtBRE5BO0VBQ0Usa0JBQUE7RUFDQSx5QkFBQTtBQ1FGO0FETkU7RUFBQTtJQUNFLGFBQUE7SUFDQSxtQkFBQTtJQUNBLDhCQUFBO0lBQ0EsZ0JBQUE7SUFDQSwyQkFBQTtFQ1NGO0FBQ0Y7QUROSTtFQUFBO0lBQ0UsbUNBQUE7RUNTSjtBQUNGO0FETEE7RUFDRSxtQ0FBQTtFQUNBLGNBQUE7RUFDQSxpQkFBQTtFQUNBLHVCQUFBO0VBQ0EsbUJBQUE7RUFDQSxvQkFBQTtBQ09GO0FETEU7RUFBQTtJQUNFLGNBQUE7SUFDQSxlQUFBO0VDUUY7QUFDRjtBREpFO0VBQUE7SUFDRSxrQkFBQTtJQUNBLCtCQUFBO0VDT0Y7QUFDRjtBRExFO0VBQUE7SUFDRSxXQUFBO0lBQ0EscUNBQUE7SUFDQSw2QkFBQTtJQUNBLHNDQUFBO0VDUUY7QUFDRjtBRExJO0VBQUE7SUFDRSx1Q0FBQTtJQUNBLHNDQUFBO0VDUUo7QUFDRjtBREpBO0VBQ0UsYUFBQTtFQUNBLHNCQUFBO0FDTUY7QURIQTtFQUNFLDRCQUFBO0VBQ0EsNkJBQUE7RUFDQSxtQ0FBQTtFQUNBLHVDQUFBO0VBQ0EsOEJBQUE7RUFDQSx5Q0FBQTtFQUNBLGlCQUFBO0FDS0Y7QURIRTtFQUNFLGdDQUFBO0FDS0o7QURGRTtFQUFBO0lBQ0UsYUFBQTtFQ0tGO0FBQ0Y7QURGQTtFQWpCRSw0QkFBQTtFQUNBLDZCQUFBO0VBQ0EsbUNBQUE7RUFDQSx1Q0FBQTtFQUNBLDhCQUFBO0VBQ0EseUNBQUE7RUFDQSxpQkFBQTtFQWNBLGFBQUE7RUFDQSxnQkFBQTtBQ1NGO0FEdEJFO0VBQ0UsZ0NBQUE7QUN3Qko7QURyQkU7RUFBQTtJQUNFLGFBQUE7RUN3QkY7QUFDRjtBRGZFO0VBQ0UsZ0NBQUE7QUNpQko7QURkRTtFQUFBO0lBQ0UsY0FBQTtJQUNBLDRCQUFBO0VDaUJGO0FBQ0Y7QURkQTtFQUNFLDBDQUFBO0FDZ0JGO0FEYkE7RUFDRSx5Q0FBQTtBQ2VGO0FEWEU7RUFBQTtJQUNFLDBDQUFBO0lBQ0EseUNBQUE7RUNjRjtBQUNGO0FEWEE7RUFDRSxtQ0FBQTtFQUNBLDZCQUFBO0VBQ0Esc0NBQUE7RUFDQSxxQkFBQTtFQUNBLGlCQUFBO0FDYUY7QURYRTtFQUNFLHFDQUFBO0VBQ0EseUJBQUE7QUNhSjtBRFZFO0VBQUE7SUFDRSxhQUFBO0lBQ0EsUUFBQTtJQUNBLGdCQUFBO0VDYUY7QUFDRjtBRFZBO0VBQ0UsYUFBQTtBQ1lGO0FEVkU7RUFBQTtJQUNFLGNBQUE7SUFDQSw0QkFBQTtFQ2FGO0FBQ0Y7QURWQTtFQUNFLGNBQUE7RUFDQSxrQkFBQTtFQUNBLFVBQUE7RUFDQSw2QkFBQTtFQUNBLHFDQUFBO0VBQ0EsYUFBQTtFQUNBLFdBQUE7RUFDQSxvQ0FBQTtFQUNBLHdDQUFBO0VBQ0EseUNBQUE7RUFDQSx5QkFBQTtFQUNBLDhCQUFBO0VBQ0EseUNBQUE7RUFDQSxjQUFBO0FDWUY7QURWRTtFQUFBO0lBQ0UsVUFBQTtJQUNBLGtCQUFBO0lBQ0EsWUFBQTtJQUNBLCtCQUFBO0VDYUY7QUFDRjtBRFZBO0VBQ0UscUJBQUE7RUFDQSxzQkFBQTtFQUNBLDJCQUFBO0VBQ0Esc0JBQUE7QUNZRiIsImZpbGUiOiJUcmFuc2ZlckZlZUNvbXBhcmlzb25UYWJsZVJvdy5tb2R1bGUubGVzcyJ9 */";
var componentStyles$5 = {"transfer-fee-comparison-table-row__border-line":"cc_transfer-fee-comparison-table-row__border-line_3805190947","transferFeeComparisonTableRow__borderLine":"cc_transfer-fee-comparison-table-row__border-line_3805190947","transfer-fee-comparison-table-row__border":"cc_transfer-fee-comparison-table-row__border_3805190947","transferFeeComparisonTableRow__border":"cc_transfer-fee-comparison-table-row__border_3805190947","transfer-fee-comparison-table-row":"cc_transfer-fee-comparison-table-row_3805190947","transferFeeComparisonTableRow":"cc_transfer-fee-comparison-table-row_3805190947","transfer-fee-comparison-table-row--dark":"cc_transfer-fee-comparison-table-row--dark_3805190947","transferFeeComparisonTableRowDark":"cc_transfer-fee-comparison-table-row--dark_3805190947","cell-border":"cc_cell-border_3805190947","cellBorder":"cc_cell-border_3805190947","transfer-fee-comparison-table-row--border":"cc_transfer-fee-comparison-table-row--border_3805190947","transferFeeComparisonTableRowBorder":"cc_transfer-fee-comparison-table-row--border_3805190947","transfer-fee-comparison-table-row__provider-logo":"cc_transfer-fee-comparison-table-row__provider-logo_3805190947","transferFeeComparisonTableRow__providerLogo":"cc_transfer-fee-comparison-table-row__provider-logo_3805190947","transfer-fee-comparison-table-row__provider-logo--no-speed":"cc_transfer-fee-comparison-table-row__provider-logo--no-speed_3805190947","transferFeeComparisonTableRow__providerLogoNoSpeed":"cc_transfer-fee-comparison-table-row__provider-logo--no-speed_3805190947","transfer-fee-comparison-table-row__provider-logo--internal":"cc_transfer-fee-comparison-table-row__provider-logo--internal_3805190947","transferFeeComparisonTableRow__providerLogoInternal":"cc_transfer-fee-comparison-table-row__provider-logo--internal_3805190947","transfer-fee-comparison-table-row__fee":"cc_transfer-fee-comparison-table-row__fee_3805190947","transferFeeComparisonTableRow__fee":"cc_transfer-fee-comparison-table-row__fee_3805190947","transfer-fee-comparison-table-row__fee--no-speed":"cc_transfer-fee-comparison-table-row__fee--no-speed_3805190947","transferFeeComparisonTableRow__feeNoSpeed":"cc_transfer-fee-comparison-table-row__fee--no-speed_3805190947","transfer-fee-comparison-table-row__fee-vertical":"cc_transfer-fee-comparison-table-row__fee-vertical_3805190947","transferFeeComparisonTableRow__feeVertical":"cc_transfer-fee-comparison-table-row__fee-vertical_3805190947","transfer-fee-comparison-table-row__fee-label":"cc_transfer-fee-comparison-table-row__fee-label_3805190947","transferFeeComparisonTableRow__feeLabel":"cc_transfer-fee-comparison-table-row__fee-label_3805190947","transfer-fee-comparison-table-row__fee-label--dark":"cc_transfer-fee-comparison-table-row__fee-label--dark_3805190947","transferFeeComparisonTableRow__feeLabelDark":"cc_transfer-fee-comparison-table-row__fee-label--dark_3805190947","transfer-fee-comparison-table-row__fee-label-mobile":"cc_transfer-fee-comparison-table-row__fee-label-mobile_3805190947","transferFeeComparisonTableRow__feeLabelMobile":"cc_transfer-fee-comparison-table-row__fee-label-mobile_3805190947","transfer-fee-comparison-table-row__fee-label-mobile--dark":"cc_transfer-fee-comparison-table-row__fee-label-mobile--dark_3805190947","transferFeeComparisonTableRow__feeLabelMobileDark":"cc_transfer-fee-comparison-table-row__fee-label-mobile--dark_3805190947","transfer-fee-comparison-table-row__last-right":"cc_transfer-fee-comparison-table-row__last-right_3805190947","transferFeeComparisonTableRow__lastRight":"cc_transfer-fee-comparison-table-row__last-right_3805190947","transfer-fee-comparison-table-row__last-left":"cc_transfer-fee-comparison-table-row__last-left_3805190947","transferFeeComparisonTableRow__lastLeft":"cc_transfer-fee-comparison-table-row__last-left_3805190947","transfer-fee-comparison-table-row__last-mobile":"cc_transfer-fee-comparison-table-row__last-mobile_3805190947","transferFeeComparisonTableRow__lastMobile":"cc_transfer-fee-comparison-table-row__last-mobile_3805190947","transfer-fee-comparison-table-row__speed":"cc_transfer-fee-comparison-table-row__speed_3805190947","transferFeeComparisonTableRow__speed":"cc_transfer-fee-comparison-table-row__speed_3805190947","transfer-fee-comparison-table-row__speed--dark":"cc_transfer-fee-comparison-table-row__speed--dark_3805190947","transferFeeComparisonTableRow__speedDark":"cc_transfer-fee-comparison-table-row__speed--dark_3805190947","transfer-fee-comparison-table-row__speed-mobile":"cc_transfer-fee-comparison-table-row__speed-mobile_3805190947","transferFeeComparisonTableRow__speedMobile":"cc_transfer-fee-comparison-table-row__speed-mobile_3805190947","transfer-fee-comparison-table-row__cheapestLabel":"cc_transfer-fee-comparison-table-row__cheapestLabel_3805190947","transferFeeComparisonTableRow__cheapestLabel":"cc_transfer-fee-comparison-table-row__cheapestLabel_3805190947","transfer-fee-comparison-table-row__cheapestLabelTick":"cc_transfer-fee-comparison-table-row__cheapestLabelTick_3805190947","transferFeeComparisonTableRow__cheapestLabelTick":"cc_transfer-fee-comparison-table-row__cheapestLabelTick_3805190947"};
styleInject(css_248z$5);

var css_248z$4 = ".cc_fee-makeup-popover__container_3805190947 {\n  margin-top: var(--size-4);\n  margin-left: var(--size-8);\n}\n.cc_fee-makeup-popover__container_3805190947 > span > span > span {\n  display: block;\n  width: var(--size-16);\n  height: var(--size-16);\n}\n.cc_fee-makeup-popover__container--dark_3805190947 > span > span > span > button > span > svg {\n  color: var(--color-white);\n}\n.cc_fee-makeup-popover__font-header_3805190947 {\n  margin-bottom: var(--size-16);\n  color: var(--color-content-primary);\n  font-family: var(--font-family-regular);\n  font-size: var(--font-size-16);\n  line-height: 120%;\n}\n.cc_fee-makeup-popover__font-paragraph_3805190947 {\n  color: var(--color-content-secondary);\n  font-family: var(--font-family-regular);\n  font-size: var(--font-size-14);\n  line-height: 150%;\n}\n.cc_fee-makeup-popover__font-paragraph_3805190947:last-child {\n  margin-bottom: 0;\n}\n.cc_fee-makeup-popover__total-amount_3805190947 {\n  font-family: var(--font-family-regular);\n  font-size: var(--font-size-16);\n  font-weight: var(--font-weight-bold);\n}\n.cc_fee-makeup-popover__warning-text_3805190947 {\n  color: var(--color-sentiment-negative);\n}\n.cc_fee-makeup-popover__positive-text_3805190947 {\n  color: var(--color-sentiment-positive);\n}\n.cc_fee-makeup-popover__rate-link_3805190947 {\n  color: var(--color-forest-green);\n}\n\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy90cmFuc2Zlci1mZWUtY29tcGFyaXNvbi90cmFuc2Zlci1mZWUtY29tcGFyaXNvbi10YWJsZS1yb3cvZmVlLW1ha2V1cC1wb3BvdmVyL0ZlZU1ha2V1cFBvcG92ZXIubW9kdWxlLmxlc3MiLCJGZWVNYWtldXBQb3BvdmVyLm1vZHVsZS5sZXNzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUdBO0VBQ0UseUJBQUE7RUFDQSwwQkFBQTtBQ0ZGO0FESUU7RUFDRSxjQUFBO0VBQ0EscUJBQUE7RUFDQSxzQkFBQTtBQ0ZKO0FETUk7RUFDRSx5QkFBQTtBQ0pOO0FEU0E7RUFDRSw2QkFBQTtFQUNBLG1DQUFBO0VBQ0EsdUNBQUE7RUFDQSw4QkFBQTtFQUNBLGlCQUFBO0FDUEY7QURVQTtFQUNFLHFDQUFBO0VBQ0EsdUNBQUE7RUFDQSw4QkFBQTtFQUNBLGlCQUFBO0FDUkY7QURVRTtFQUNFLGdCQUFBO0FDUko7QURZQTtFQUNFLHVDQUFBO0VBQ0EsOEJBQUE7RUFDQSxvQ0FBQTtBQ1ZGO0FEYUE7RUFDRSxzQ0FBQTtBQ1hGO0FEY0E7RUFDRSxzQ0FBQTtBQ1pGO0FEZUE7RUFDRSxnQ0FBQTtBQ2JGIiwiZmlsZSI6IkZlZU1ha2V1cFBvcG92ZXIubW9kdWxlLmxlc3MifQ== */";
var componentStyles$4 = {"fee-makeup-popover__container":"cc_fee-makeup-popover__container_3805190947","feeMakeupPopover__container":"cc_fee-makeup-popover__container_3805190947","fee-makeup-popover__container--dark":"cc_fee-makeup-popover__container--dark_3805190947","feeMakeupPopover__containerDark":"cc_fee-makeup-popover__container--dark_3805190947","fee-makeup-popover__font-header":"cc_fee-makeup-popover__font-header_3805190947","feeMakeupPopover__fontHeader":"cc_fee-makeup-popover__font-header_3805190947","fee-makeup-popover__font-paragraph":"cc_fee-makeup-popover__font-paragraph_3805190947","feeMakeupPopover__fontParagraph":"cc_fee-makeup-popover__font-paragraph_3805190947","fee-makeup-popover__total-amount":"cc_fee-makeup-popover__total-amount_3805190947","feeMakeupPopover__totalAmount":"cc_fee-makeup-popover__total-amount_3805190947","fee-makeup-popover__warning-text":"cc_fee-makeup-popover__warning-text_3805190947","feeMakeupPopover__warningText":"cc_fee-makeup-popover__warning-text_3805190947","fee-makeup-popover__positive-text":"cc_fee-makeup-popover__positive-text_3805190947","feeMakeupPopover__positiveText":"cc_fee-makeup-popover__positive-text_3805190947","fee-makeup-popover__rate-link":"cc_fee-makeup-popover__rate-link_3805190947","feeMakeupPopover__rateLink":"cc_fee-makeup-popover__rate-link_3805190947"};
styleInject(css_248z$4);

const NonTransparentFeeElement = ({ quote, midmarketRate, marketedFeesAmount, hiddenFeesAmount, }) => {
    const { locale } = useIntl();
    const RATE_LINK = createUrl(generateUrl(locale, 'mid-market-rate/', AvailablePages.MID_MARKET_RATE));
    return (jsxs("div", { children: [jsx("h2", Object.assign({ className: componentStyles$4.feeMakeupPopover__fontHeader }, { children: jsx(FormattedMessage, { id: "what-makes-up-this-fee" }) })), jsx("p", Object.assign({ className: componentStyles$4.feeMakeupPopover__fontParagraph }, { children: jsx(FormattedMessage, { id: "conversion-fees-details", values: {
                        sendAmount: formatMoney(quote.sendAmount.value, quote.sendAmount.currency),
                        providerName: quote.provider.name,
                        marketedFees: formatMoney(marketedFeesAmount, quote.fees.total.currency),
                    } }) })), jsxs("p", Object.assign({ className: componentStyles$4.feeMakeupPopover__fontParagraph }, { children: [jsx(FormattedMessage, { id: "exchange-rate-using", values: {
                            conversionRate: quote.rate.toFixed(5),
                            span: (chunks) => (jsx("span", Object.assign({ className: componentStyles$4.feeMakeupPopover__warningText }, { children: chunks }))),
                        } }), jsx(FormattedMessage, { id: "using-bad-conversion-rate", values: {
                            midmarketRate: midmarketRate.toFixed(5),
                            span: (chunks) => (jsx("span", Object.assign({ className: componentStyles$4.feeMakeupPopover__positiveText }, { children: chunks }))),
                        } })] })), jsx("p", Object.assign({ className: componentStyles$4.feeMakeupPopover__fontParagraph }, { children: jsx(FormattedMessage, { id: "this-adds-fees", values: { hiddenFeesAmount, hiddenFeesCurrency: quote.fees.total.currency } }) })), jsx("p", Object.assign({ className: componentStyles$4.feeMakeupPopover__fontParagraph }, { children: jsx(FormattedMessage, { id: "bringing-the-total", values: {
                        totalFee: formatMoney(quote.fees.total.value, quote.fees.total.currency),
                        span: (chunks) => (jsx("span", Object.assign({ className: componentStyles$4.feeMakeupPopover__totalAmount }, { children: chunks }))),
                    } }) })), jsx("p", Object.assign({ className: componentStyles$4.feeMakeupPopover__rateLink }, { children: jsx(FormattedMessage, { id: "why-is-it-better", values: {
                        a: (chunks) => (jsx("a", Object.assign({ href: RATE_LINK, target: "_blank", rel: "noreferrer" }, { children: chunks }))),
                    } }) }))] }));
};

const TransparentFeeElement = ({ quote, midmarketRate, marketedFeesAmount, isProviderWise, }) => {
    const { locale } = useIntl();
    const RATE_LINK = createUrl(generateUrl(locale, 'mid-market-rate/', AvailablePages.MID_MARKET_RATE));
    const currentProviderRate = isProviderWise ? midmarketRate : quote.rate;
    const conversionRateTextId = getRateTextId(currentProviderRate, midmarketRate);
    return (jsxs("div", { children: [jsx("h2", Object.assign({ className: componentStyles$4.feeMakeupPopover__fontHeader }, { children: jsx(FormattedMessage, { id: "what-makes-up-this-fee" }) })), jsx("p", Object.assign({ className: componentStyles$4.feeMakeupPopover__fontParagraph }, { children: jsx(FormattedMessage, { id: "conversion-fees-details", values: {
                        sendAmount: formatMoney(quote.sendAmount.value, quote.sendAmount.currency),
                        providerName: quote.provider.name,
                        marketedFees: formatMoney(marketedFeesAmount, quote.fees.total.currency),
                    } }) })), jsxs("p", Object.assign({ className: componentStyles$4.feeMakeupPopover__fontParagraph }, { children: [jsx(FormattedMessage, { id: "exchange-rate-using", values: {
                            conversionRate: currentProviderRate.toFixed(5),
                            span: (chunks) => (jsx("span", Object.assign({ className: componentStyles$4.feeMakeupPopover__positiveText }, { children: chunks }))),
                        } }), jsx(FormattedMessage, { id: conversionRateTextId, values: {
                            midmarketRate: midmarketRate.toFixed(5),
                            span: (chunks) => (jsx("span", Object.assign({ className: componentStyles$4.feeMakeupPopover__positiveText }, { children: chunks }))),
                        } })] })), jsx("p", Object.assign({ className: componentStyles$4.feeMakeupPopover__fontParagraph }, { children: jsx(FormattedMessage, { id: "only-charged-transfer-fees" }) })), jsx("p", Object.assign({ className: componentStyles$4.feeMakeupPopover__fontParagraph }, { children: jsx(FormattedMessage, { id: "bringing-the-total", values: {
                        totalFee: formatMoney(quote.fees.total.value, quote.fees.total.currency),
                        span: (chunks) => (jsx("span", Object.assign({ className: componentStyles$4.feeMakeupPopover__totalAmount }, { children: chunks }))),
                    } }) })), jsx("p", Object.assign({ className: componentStyles$4.feeMakeupPopover__rateLink }, { children: jsx(FormattedMessage, { id: "why-is-it-better", values: {
                        a: (chunks) => (jsx("a", Object.assign({ href: RATE_LINK, target: "_blank", rel: "noreferrer" }, { children: chunks }))),
                    } }) }))] }));
};
const getRateTextId = (quoteRate, midmarketRate) => {
    let TextId;
    (function (TextId) {
        TextId["GoodConversionRate"] = "using-good-conversion-rate";
        TextId["GreatConversionRate"] = "using-great-conversion-rate";
    })(TextId || (TextId = {}));
    const isQuoteSameAsMidmarketRate = numberEqualsWithRelativeTolerance(quoteRate, midmarketRate, 0.001);
    if (isQuoteSameAsMidmarketRate || quoteRate < midmarketRate) {
        return TextId.GoodConversionRate;
    }
    return TextId.GreatConversionRate;
};

const FeeMakeupPopover = ({ quote, midmarketRate, isFeaturedRow, onPopoverClick, open, onClose, }) => {
    const content = PopoverContent(quote, midmarketRate, isFeaturedRow);
    // eslint-disable-next-line jest/unbound-method
    const { formatMessage } = useIntl();
    return (jsx("div", Object.assign({ className: containerStyle(isFeaturedRow) }, { children: jsx(Info, { onClick: onPopoverClick, content: content, size: Size.SMALL, "aria-label": formatMessage({ id: 'what-makes-up-this-fee' }) }) })));
};
const containerStyle = (isFeaturedRow) => `${componentStyles$4.feeMakeupPopover__container} ${isFeaturedRow ? componentStyles$4.feeMakeupPopover__containerDark : ''}`;
const PopoverContent = (quote, midmarketRate, isProviderWise) => {
    const hiddenFeesAmount = isProviderWise ? 0 : getFeesSumByType(quote, FeeType.HIDDEN);
    const marketedFeesAmount = getFeesSumByType(quote, FeeType.MARKETED);
    if (hiddenFeesAmount > 0) {
        return (jsx(NonTransparentFeeElement, { quote: quote, midmarketRate: midmarketRate, marketedFeesAmount: marketedFeesAmount, hiddenFeesAmount: hiddenFeesAmount }));
    }
    else {
        return (jsx(TransparentFeeElement, { quote: quote, midmarketRate: midmarketRate, marketedFeesAmount: marketedFeesAmount, isProviderWise: isProviderWise }));
    }
};
function getFeesSumByType(quote, feeType) {
    return quote.fees.breakdown
        .filter((fee) => fee.type === feeType)
        .reduce((total, fee) => total + fee.amount.value, 0);
}

var css_248z$3 = ".cc_totalFee-label_3805190947 {\n  margin-bottom: 5px;\n  color: var(--color-content-primary);\n  font-family: var(--font-family-regular);\n  font-size: var(--font-size-20);\n  font-weight: var(--font-weight-semi-bold);\n  text-align: right;\n}\n.cc_totalFee-label--dark_3805190947 {\n  margin-bottom: 5px;\n  color: var(--color-content-primary);\n  font-family: var(--font-family-regular);\n  font-size: var(--font-size-20);\n  font-weight: var(--font-weight-semi-bold);\n  text-align: right;\n  color: var(--color-bright-green);\n}\n.cc_hiddenFee-row_3805190947 {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n.cc_hiddenFee-paragraph_3805190947 {\n  margin: auto;\n  margin-bottom: 0 !important;\n  color: var(--color-content-secondary);\n  font-family: var(--font-family-regular);\n  font-size: var(--font-size-14);\n  font-weight: var(--font-weight-regular);\n  text-align: right;\n  text-justify: distribute-center-last;\n}\n.cc_hiddenFee-paragraph--dark_3805190947 {\n  margin: auto;\n  margin-bottom: 0 !important;\n  color: var(--color-content-secondary);\n  font-family: var(--font-family-regular);\n  font-size: var(--font-size-14);\n  font-weight: var(--font-weight-regular);\n  text-align: right;\n  text-justify: distribute-center-last;\n  color: var(--color-white);\n  font-weight: var(--font-weight-medium);\n}\n.cc_hiddenFee-label_3805190947 {\n  display: inline-block;\n}\n.cc_hiddenFee-dot--good--dark_3805190947 {\n  display: inline-block;\n  width: var(--size-8);\n  height: var(--size-8);\n  margin-right: var(--size-8);\n  margin-left: var(--size-4);\n  border-radius: 100%;\n  background: var(--color-bright-green);\n}\n.cc_hiddenFee-dot--good_3805190947 {\n  display: inline-block;\n  width: var(--size-8);\n  height: var(--size-8);\n  margin-right: var(--size-8);\n  margin-left: var(--size-4);\n  border-radius: 100%;\n  background: var(--color-sentiment-positive);\n}\n.cc_hiddenFee-dot--bad_3805190947 {\n  display: inline-block;\n  width: var(--size-8);\n  height: var(--size-8);\n  margin-right: var(--size-8);\n  margin-left: var(--size-4);\n  border-radius: 100%;\n  background: var(--color-sentiment-negative);\n}\n.cc_hiddenFee-and-popover_3805190947 {\n  display: flex;\n  justify-content: flex-end;\n}\n.cc_row__fee_vertical_3805190947 {\n  display: flex;\n  flex-direction: column;\n  margin-right: var(--size-24);\n}\n\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy90cmFuc2Zlci1mZWUtY29tcGFyaXNvbi90cmFuc2Zlci1mZWUtY29tcGFyaXNvbi10YWJsZS1yb3cvaGlkZGVuLWZlZS1hbmQtcG9wb3Zlci9IaWRkZW5GZWVBbmRQb3BvdmVyLm1vZHVsZS5sZXNzIiwiSGlkZGVuRmVlQW5kUG9wb3Zlci5tb2R1bGUubGVzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHQTtFQUNFLGtCQUFBO0VBQ0EsbUNBQUE7RUFDQSx1Q0FBQTtFQUNBLDhCQUFBO0VBQ0EseUNBQUE7RUFDQSxpQkFBQTtBQ0ZGO0FES0E7RUFSRSxrQkFBQTtFQUNBLG1DQUFBO0VBQ0EsdUNBQUE7RUFDQSw4QkFBQTtFQUNBLHlDQUFBO0VBQ0EsaUJBQUE7RUFNQSxnQ0FBQTtBQ0NGO0FERUE7RUFDRSxhQUFBO0VBQ0EsbUJBQUE7RUFDQSxtQkFBQTtBQ0FGO0FER0E7RUFDRSxZQUFBO0VBQ0EsMkJBQUE7RUFDQSxxQ0FBQTtFQUNBLHVDQUFBO0VBQ0EsOEJBQUE7RUFDQSx1Q0FBQTtFQUNBLGlCQUFBO0VBQ0Esb0NBQUE7QUNERjtBRElBO0VBVkUsWUFBQTtFQUNBLDJCQUFBO0VBQ0EscUNBQUE7RUFDQSx1Q0FBQTtFQUNBLDhCQUFBO0VBQ0EsdUNBQUE7RUFDQSxpQkFBQTtFQUNBLG9DQUFBO0VBTUEseUJBQUE7RUFDQSxzQ0FBQTtBQ0lGO0FEREE7RUFDRSxxQkFBQTtBQ0dGO0FEVUE7RUFURSxxQkFBQTtFQUNBLG9CQUFBO0VBQ0EscUJBQUE7RUFDQSwyQkFBQTtFQUNBLDBCQUFBO0VBQ0EsbUJBQUE7RUFDQSxxQ0FBQTtBQ0VGO0FES0E7RUFiRSxxQkFBQTtFQUNBLG9CQUFBO0VBQ0EscUJBQUE7RUFDQSwyQkFBQTtFQUNBLDBCQUFBO0VBQ0EsbUJBQUE7RUFDQSwyQ0FBQTtBQ1dGO0FEQUE7RUFqQkUscUJBQUE7RUFDQSxvQkFBQTtFQUNBLHFCQUFBO0VBQ0EsMkJBQUE7RUFDQSwwQkFBQTtFQUNBLG1CQUFBO0VBQ0EsMkNBQUE7QUNvQkY7QURMQTtFQUNFLGFBQUE7RUFDQSx5QkFBQTtBQ09GO0FESkE7RUFDRSxhQUFBO0VBQ0Esc0JBQUE7RUFDQSw0QkFBQTtBQ01GIiwiZmlsZSI6IkhpZGRlbkZlZUFuZFBvcG92ZXIubW9kdWxlLmxlc3MifQ== */";
var componentStyles$3 = {"totalFee-label":"cc_totalFee-label_3805190947","totalFeeLabel":"cc_totalFee-label_3805190947","totalFee-label--dark":"cc_totalFee-label--dark_3805190947","totalFeeLabelDark":"cc_totalFee-label--dark_3805190947","hiddenFee-row":"cc_hiddenFee-row_3805190947","hiddenFeeRow":"cc_hiddenFee-row_3805190947","hiddenFee-paragraph":"cc_hiddenFee-paragraph_3805190947","hiddenFeeParagraph":"cc_hiddenFee-paragraph_3805190947","hiddenFee-paragraph--dark":"cc_hiddenFee-paragraph--dark_3805190947","hiddenFeeParagraphDark":"cc_hiddenFee-paragraph--dark_3805190947","hiddenFee-label":"cc_hiddenFee-label_3805190947","hiddenFeeLabel":"cc_hiddenFee-label_3805190947","hiddenFee-dot--good--dark":"cc_hiddenFee-dot--good--dark_3805190947","hiddenFeeDotGoodDark":"cc_hiddenFee-dot--good--dark_3805190947","hiddenFee-dot--good":"cc_hiddenFee-dot--good_3805190947","hiddenFeeDotGood":"cc_hiddenFee-dot--good_3805190947","hiddenFee-dot--bad":"cc_hiddenFee-dot--bad_3805190947","hiddenFeeDotBad":"cc_hiddenFee-dot--bad_3805190947","hiddenFee-and-popover":"cc_hiddenFee-and-popover_3805190947","hiddenFeeAndPopover":"cc_hiddenFee-and-popover_3805190947","row__fee_vertical":"cc_row__fee_vertical_3805190947"};
styleInject(css_248z$3);

var HiddenFeeLabelVariant;
(function (HiddenFeeLabelVariant) {
    HiddenFeeLabelVariant["Good"] = "good";
    HiddenFeeLabelVariant["Bad"] = "bad";
    HiddenFeeLabelVariant["GoodDark"] = "good--dark";
})(HiddenFeeLabelVariant || (HiddenFeeLabelVariant = {}));
const HiddenFeeAndPopover = ({ hiddenFee, quote, midmarketRate, isFeaturedRow, onPopoverClick, open, onClose, }) => {
    return (jsxs("div", Object.assign({ className: componentStyles$3.hiddenFeeAndPopover }, { children: [jsx(HiddenFeeLabelInternal, { variant: hasHiddenFee(hiddenFee)
                    ? HiddenFeeLabelVariant.Bad
                    : isWiseQuote(quote)
                        ? HiddenFeeLabelVariant.GoodDark
                        : HiddenFeeLabelVariant.Good, darkMode: isFeaturedRow, message: hasHiddenFee(hiddenFee) ? (jsx(FormattedMessage, { id: "hidden-fees-new", values: {
                        hiddenFee: printMoney$1(hiddenFee),
                        label: (chunks) => (jsx("span", Object.assign({ className: cssClass('hiddenFee-label') }, { children: chunks }))),
                    } })) : (jsx(FormattedMessage, { id: "no-hidden-fees" })) }), jsx(FeeMakeupPopover, { quote: quote, midmarketRate: midmarketRate, isFeaturedRow: isFeaturedRow, onPopoverClick: onPopoverClick, open: open, onClose: onClose })] })));
};
const HiddenFeeLabelInternal = ({ variant, darkMode, message, }) => (jsx("div", Object.assign({ className: cssClass('hiddenFee-row') }, { children: jsxs("p", Object.assign({ className: cssClass('hiddenFee-paragraph', darkMode) }, { children: [jsx("span", { className: cssClass(`hiddenFee-dot--${variant}`) }), jsx("span", { children: message })] })) })));
const cssClass = (className, darkMode = false) => componentStyles$3[`${className}${darkMode ? '--dark' : ''}`];
const hasHiddenFee = (hiddenFee) => hiddenFee.value > 0;
const printMoney$1 = (value) => formatMoney(parseFloat(value.value.toFixed(5)), value.currency);

// Copied from:
const THROTTLE_MS = 100;
const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
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;

function IsMobile() {
    const windowReference = typeof window === 'undefined' ? undefined : window;
    const [clientWidth] = useClientWidth({ ref: windowReference });
    return clientWidth <= Breakpoint.SMALL;
}

var css_248z$2 = ".cc_speed_3805190947 {\n  margin-bottom: 0 !important;\n  color: var(--color-content-primary);\n  font-family: var(--font-family-regular);\n  font-size: var(--font-size-14);\n  font-weight: var(--font-weight-regular);\n  text-align: right;\n  white-space: nowrap;\n}\n.cc_speed--dark_3805190947 {\n  color: var(--color-white);\n  font-weight: var(--font-weight-medium);\n}\n.cc_speed__duration-text_3805190947 {\n  font-weight: var(--font-weight-semi-bold);\n}\n.cc_speed__unavailable_3805190947 {\n  margin-bottom: 0 !important;\n  color: var(--color-content-primary);\n  font-family: var(--font-family-regular);\n  font-size: var(--font-size-14);\n  font-style: italic;\n  font-weight: var(--font-weight-regular);\n  text-align: right;\n  white-space: nowrap;\n}\n.cc_speed__unavailable--dark_3805190947 {\n  color: var(--color-white);\n  font-weight: var(--font-weight-medium);\n}\n\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy90cmFuc2Zlci1mZWUtY29tcGFyaXNvbi90cmFuc2Zlci1mZWUtY29tcGFyaXNvbi10YWJsZS1yb3cvc3BlZWQvU3BlZWRDb250ZW50Lm1vZHVsZS5sZXNzIiwiU3BlZWRDb250ZW50Lm1vZHVsZS5sZXNzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUdBO0VBQ0UsMkJBQUE7RUFDQSxtQ0FBQTtFQUNBLHVDQUFBO0VBQ0EsOEJBQUE7RUFDQSx1Q0FBQTtFQUNBLGlCQUFBO0VBQ0EsbUJBQUE7QUNGRjtBRElFO0VBQ0UseUJBQUE7RUFDQSxzQ0FBQTtBQ0ZKO0FETUE7RUFDRSx5Q0FBQTtBQ0pGO0FET0E7RUFDRSwyQkFBQTtFQUNBLG1DQUFBO0VBQ0EsdUNBQUE7RUFDQSw4QkFBQTtFQUNBLGtCQUFBO0VBQ0EsdUNBQUE7RUFDQSxpQkFBQTtFQUNBLG1CQUFBO0FDTEY7QURPRTtFQUNFLHlCQUFBO0VBQ0Esc0NBQUE7QUNMSiIsImZpbGUiOiJTcGVlZENvbnRlbnQubW9kdWxlLmxlc3MifQ== */";
var componentStyles$2 = {"speed":"cc_speed_3805190947","speed--dark":"cc_speed--dark_3805190947","speedDark":"cc_speed--dark_3805190947","speed__duration-text":"cc_speed__duration-text_3805190947","speed__durationText":"cc_speed__duration-text_3805190947","speed__unavailable":"cc_speed__unavailable_3805190947","speed__unavailable--dark":"cc_speed__unavailable--dark_3805190947","speed__unavailableDark":"cc_speed__unavailable--dark_3805190947"};
styleInject(css_248z$2);

const SpeedContent = ({ deliveryEstimation, isFeaturedRow = false, }) => {
    return hasDuration(deliveryEstimation)
        ? availableElement(isFeaturedRow, deliveryEstimation)
        : unavailableElement(isFeaturedRow);
};
const availableElement = (isFeaturedRow, deliveryEstimation) => {
    const { locale } = useIntl();
    return IsMobile()
        ? mobileSpeedElement(isFeaturedRow, locale, deliveryEstimation)
        : desktopSpeedElement(isFeaturedRow, locale, deliveryEstimation);
};
const speedStyle$1 = (isFeaturedRow) => `${componentStyles$2.speed} ${isFeaturedRow ? componentStyles$2.speedDark : ''}`;
const speedUnavailableStyle = (isFeaturedRow) => `${componentStyles$2.speed__unavailable} ${isFeaturedRow ? componentStyles$2.speed__unavailableDark : ''}`;
const mobileSpeedElement = (isFeaturedRow, locale, deliveryEstimation) => {
    const speedText = formatDeliveryEstimation(deliveryEstimation, { lang: locale }, { showAsBusiness: true, includePrefix: true, isSpeedFormat: true });
    return (jsx("div", Object.assign({ className: speedStyle$1(isFeaturedRow) }, { children: jsx(FormattedMessage, { id: "should-arrive", values: {
                speed: speedText,
                span: (chunks) => (jsx("span", Object.assign({ className: componentStyles$2.speed__durationText }, { children: chunks }))),
            } }) })));
};
const desktopSpeedElement = (isFeaturedRow, locale, deliveryEstimation) => {
    const speedText = formatDeliveryEstimation(deliveryEstimation, { lang: locale }, { showAsBusiness: true, includePrefix: false, isSpeedFormat: true });
    return (jsx("div", Object.assign({ className: speedStyle$1(isFeaturedRow) }, { children: jsxs("span", { children: [" ", speedText, " "] }) })));
};
const unavailableElement = (isFeaturedRow) => {
    const messageId = IsMobile() ? 'speed-unavailable' : 'unavailable';
    return (jsx("div", Object.assign({ className: speedUnavailableStyle(isFeaturedRow) }, { children: jsx(FormattedMessage, { id: messageId }) })));
};

const TransferFeeComparisonTableRow = ({ quote, nextQuote, midmarketRate, isCheapest = false, isFast = false, showSpeed, showFastestFlag, onFeePopoverClick, reference, }) => {
    var _a;
    const isFeaturedRow = isWiseQuote(quote);
    const showBorderRow = nextQuote && !isWiseQuote(nextQuote) && !isFeaturedRow;
    const showFastest = isFast && showSpeed && showFastestFlag;
    const hiddenFee = ((_a = quote.fees.breakdown.find((fee) => fee.type === FeeType.HIDDEN)) === null || _a === void 0 ? void 0 : _a.amount) || {
        currency: quote.route.sourceCurrency,
        value: 0,
    };
    const [feeBreakdownOpen, setFeeBreakdownOpen] = useState(false);
    const logo = isFeaturedRow
        ? 'https://wise.com/public-resources/assets/logos/wise-personal/logo_inverse.svg'
        : quote.provider.logoUrl;
    return (jsxs(Fragment, { children: [jsxs("tr", Object.assign({ ref: reference, className: rowStyle(isFeaturedRow, showBorderRow && showSpeed, !!nextQuote) }, { children: [jsxs("td", Object.assign({ className: rowProviderLogoStyle(showSpeed, !!nextQuote) }, { children: [isCheapest && !showFastest && (jsxs("span", Object.assign({ className: componentStyles$5.transferFeeComparisonTableRow__cheapestLabel }, { children: [jsx(Check, { className: componentStyles$5.transferFeeComparisonTableRow__cheapestLabelTick }), jsx(FormattedMessage, { id: "cheapest" })] }))), !isCheapest && showFastest && (jsxs("span", Object.assign({ className: componentStyles$5.transferFeeComparisonTableRow__cheapestLabel }, { children: [jsx(Clock, { className: componentStyles$5.transferFeeComparisonTableRow__cheapestLabelTick }), jsx(FormattedMessage, { id: "fastest" })] }))), isCheapest && showFastest && (jsxs("span", Object.assign({ className: componentStyles$5.transferFeeComparisonTableRow__cheapestLabel }, { children: [jsx(Check, { className: componentStyles$5.transferFeeComparisonTableRow__cheapestLabelTick }), jsx(FormattedMessage, { id: "cheapest-and-fastest" })] }))), jsx(ProviderLogo, { logo: logo, altText: quote.provider.logoAltText ? quote.provider.logoAltText : quote.provider.name, styles: {
                                    providerLogo: componentStyles$5.transferFeeComparisonTableRow__providerLogoInternal,
                                }, isPartner: quote.provider.partner, alias: quote.provider.alias }), jsx("div", Object.assign({ className: feeMobileStyle(isFeaturedRow) }, { children: printMoney(quote.fees.total) }))] })), jsx("td", Object.assign({ className: rowFeeStyle(showSpeed, !!nextQuote) }, { children: jsxs("div", Object.assign({ className: componentStyles$5.transferFeeComparisonTableRow__feeVertical }, { children: [jsx("div", Object.assign({ className: feeStyle(isFeaturedRow) }, { children: printMoney(quote.fees.total) })), jsx(HiddenFeeAndPopover, { hiddenFee: isFeaturedRow ? { value: 0, currency: hiddenFee.currency } : hiddenFee, quote: quote, midmarketRate: midmarketRate, isFeaturedRow: isFeaturedRow, onPopoverClick: onFeePopoverClick, open: feeBreakdownOpen, onClose: () => {
                                        setFeeBreakdownOpen(false);
                                    } }), showSpeed && (jsx("div", Object.assign({ className: componentStyles$5.transferFeeComparisonTableRow__speedMobile }, { children: jsx(SpeedContent, { deliveryEstimation: quote.deliveryEstimation, isFeaturedRow: isFeaturedRow }) })))] })) })), showSpeed && (jsx("td", Object.assign({ className: speedStyle(isFeaturedRow, !!nextQuote) }, { children: jsx(SpeedContent, { deliveryEstimation: quote.deliveryEstimation, isFeaturedRow: isFeaturedRow }) })))] })), jsx("tr", Object.assign({ className: showSpeed ? componentStyles$5.transferFeeComparisonTableRow__border : '' }, { children: showBorderRow && (jsx("td", Object.assign({ colSpan: 4 }, { children: jsx("hr", { className: componentStyles$5.transferFeeComparisonTableRow__borderLine }) }))) }))] }));
};
const rowStyle = (isFeaturedRow, showBorderRow, nextQuote) => `${componentStyles$5.transferFeeComparisonTableRow} ${isFeaturedRow ? componentStyles$5.transferFeeComparisonTableRowDark : ''} ${showBorderRow ? componentStyles$5.transferFeeComparisonTableRowBorder : ''} ${nextQuote ? '' : componentStyles$5.transferFeeComparisonTableRow__lastMobile}`;
const rowProviderLogoStyle = (showSpeed, nextQuote) => `${componentStyles$5.transferFeeComparisonTableRow__providerLogo} ${showSpeed ? '' : componentStyles$5.transferFeeComparisonTableRow__providerLogoNoSpeed} ${nextQuote ? '' : componentStyles$5.transferFeeComparisonTableRow__lastLeft}`;
const rowFeeStyle = (showSpeed, nextQuote) => `${componentStyles$5.transferFeeComparisonTableRow__fee} ${showSpeed ? '' : componentStyles$5.transferFeeComparisonTableRow__feeNoSpeed} ${nextQuote || showSpeed ? '' : componentStyles$5.transferFeeComparisonTableRow__lastRight}`;
const speedStyle = (isFeaturedRow, nextQuote) => `${componentStyles$5.transferFeeComparisonTableRow__speed} ${isFeaturedRow ? componentStyles$5.transferFeeComparisonTableRow__speedDark : ''} ${nextQuote ? '' : componentStyles$5.transferFeeComparisonTableRow__lastRight}`;
const feeStyle = (isFeaturedRow) => `${componentStyles$5.transferFeeComparisonTableRow__feeLabel} ${isFeaturedRow ? componentStyles$5.transferFeeComparisonTableRow__feeLabelDark : ''} `;
const feeMobileStyle = (isFeaturedRow) => `${componentStyles$5.transferFeeComparisonTableRow__feeLabelMobile} ${isFeaturedRow ? componentStyles$5.transferFeeComparisonTableRow__feeLabelMobileDark : ''}`;
const printMoney = (value) => formatMoney(parseFloat(value.value.toFixed(5)), value.currency);

var css_248z$1 = ".cc_speed-popover__container_3805190947 {\n  display: flex;\n  align-items: center;\n}\n.cc_speed-popover__font-header_3805190947 {\n  margin-bottom: 15px;\n  color: var(--color-content-primary);\n  font-family: var(--font-family-regular);\n  font-size: var(--font-size-16);\n  line-height: 120%;\n}\n.cc_speed-popover__font-paragraph_3805190947 {\n  color: var(--color-content-secondary);\n  font-family: var(--font-family-regular);\n  font-size: var(--font-size-14);\n  line-height: 150%;\n}\n.cc_speed-popover__font-paragraph_3805190947:last-child {\n  margin-bottom: 0;\n}\n\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy90cmFuc2Zlci1mZWUtY29tcGFyaXNvbi90cmFuc2Zlci1mZWUtY29tcGFyaXNvbi10YWJsZS9TcGVlZFBvcG92ZXIvU3BlZWRQb3BvdmVyLm1vZHVsZS5sZXNzIiwiU3BlZWRQb3BvdmVyLm1vZHVsZS5sZXNzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0VBQ0UsYUFBQTtFQUNBLG1CQUFBO0FDQ0Y7QURFQTtFQUNFLG1CQUFBO0VBQ0EsbUNBQUE7RUFDQSx1Q0FBQTtFQUNBLDhCQUFBO0VBQ0EsaUJBQUE7QUNBRjtBREdBO0VBQ0UscUNBQUE7RUFDQSx1Q0FBQTtFQUNBLDhCQUFBO0VBQ0EsaUJBQUE7QUNERjtBREdFO0VBQ0UsZ0JBQUE7QUNESiIsImZpbGUiOiJTcGVlZFBvcG92ZXIubW9kdWxlLmxlc3MifQ== */";
var componentStyles$1 = {"speed-popover__container":"cc_speed-popover__container_3805190947","speedPopover__container":"cc_speed-popover__container_3805190947","speed-popover__font-header":"cc_speed-popover__font-header_3805190947","speedPopover__fontHeader":"cc_speed-popover__font-header_3805190947","speed-popover__font-paragraph":"cc_speed-popover__font-paragraph_3805190947","speedPopover__fontParagraph":"cc_speed-popover__font-paragraph_3805190947"};
styleInject(css_248z$1);

const SpeedPopover = () => {
    const content = SpeedPopoverContent();
    // eslint-disable-next-line jest/unbound-method
    const { formatMessage } = useIntl();
    return (jsx("div", Object.assign({ className: componentStyles$1.speedPopover__container }, { children: jsx(Info, { content: content, "aria-label": formatMessage({ id: 'transfer-speed' }) }) })));
};
const SpeedPopoverContent = () => {
    return (jsxs("div", { children: [jsx("h2", Object.assign({ className: componentStyles$1.speedPopover__fontHeader }, { children: jsx(FormattedMessage, { id: "transfer-speed" }) })), jsx("p", Object.assign({ className: componentStyles$1.speedPopover__fontParagraph }, { children: jsx(FormattedMessage, { id: "estimated-time" }) })), jsx("p", Object.assign({ className: componentStyles$1.speedPopover__fontParagraph }, { children: jsx(FormattedMessage, { id: "information-from" }) })), jsx("p", Object.assign({ className: componentStyles$1.speedPopover__fontParagraph }, { children: jsx(FormattedMessage, { id: "different-payment-methods" }) }))] }));
};

var css_248z = ".cc_transfer-fee-comparison-table__rectangle_3805190947 {\n  margin-right: var(--size-4);\n  margin-left: var(--size-4);\n  border-radius: var(--size-40);\n  background: var(--color-white);\n  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.05);\n}\n@media (max-width: 767px) {\n  .cc_transfer-fee-comparison-table__rectangle_3805190947 {\n    width: 95%;\n  }\n}\n.cc_transfer-fee-comparison-table__header-border-row_3805190947 {\n  display: none;\n}\n@media (max-width: 767px) {\n  .cc_transfer-fee-comparison-table__header-border-row_3805190947 {\n    display: table-row;\n  }\n}\n.cc_transfer-fee-comparison-table__header-border_3805190947 {\n  width: 90%;\n  margin: 0 auto;\n}\n.cc_transfer-fee-comparison-table__header-with-speed_3805190947 .cc_cell-border_3805190947 {\n  position: relative;\n}\n.cc_transfer-fee-comparison-table__header-with-speed_3805190947 .cc_cell-border_3805190947::after {\n  content: '';\n  position: absolute;\n  z-index: 1;\n  bottom: 0;\n  left: -150%;\n  width: 232%;\n  height: 2px;\n  background: rgba(0, 0, 0, 0.03);\n  pointer-events: none;\n}\n@media (max-width: 767px) {\n  .cc_transfer-fee-comparison-table__header-with-speed_3805190947 .cc_cell-border_3805190947::after {\n    display: none;\n  }\n}\n.cc_transfer-fee-comparison-table__header-with-speed--border_3805190947 td:nth-child(2) {\n  position: relative;\n}\n.cc_transfer-fee-comparison-table__header-with-speed--border_3805190947 td:nth-child(2)::after {\n  content: '';\n  position: absolute;\n  z-index: 1;\n  bottom: 0;\n  left: -150%;\n  width: 232%;\n  height: 2px;\n  background: rgba(0, 0, 0, 0.03);\n  pointer-events: none;\n}\n@media (max-width: 767px) {\n  .cc_transfer-fee-comparison-table__header-with-speed--border_3805190947 td:nth-child(2)::after {\n    display: none;\n  }\n}\n.cc_transfer-fee-comparison-table__header-cost_3805190947 {\n  padding: var(--size-32) var(--size-14);\n  border-bottom: 0;\n}\n@media (max-width: 767px) {\n  .cc_transfer-fee-comparison-table__header-cost_3805190947 {\n    display: flex;\n    flex-direction: column;\n    padding: var(--size-24) var(--size-14);\n    padding-left: var(--size-16);\n  }\n}\n.cc_transfer-fee-comparison-table__header-cost_3805190947 > p {\n  margin-bottom: 0;\n}\n.cc_transfer-fee-comparison-table__header-cost-speed_3805190947 {\n  display: none;\n}\n@media (max-width: 767px) {\n  .cc_transfer-fee-comparison-table__header-cost-speed_3805190947 {\n    display: table-row;\n  }\n}\n.cc_transfer-fee-comparison-table__header-cost-text_3805190947 {\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@media (max-width: 767px) {\n  .cc_transfer-fee-comparison-table__header-cost-text_3805190947 {\n    display: flex;\n    flex-direction: column;\n    font-size: var(--font-size-18);\n  }\n}\n.cc_transfer-fee-comparison-table__header-cost-text_3805190947 > span {\n  display: inline-block;\n}\n.cc_transfer-fee-comparison-table__header-speed_3805190947 {\n  border-top-right-radius: var(--size-40);\n  background: #f3f5f199;\n}\n@media (max-width: 767px) {\n  .cc_transfer-fee-comparison-table__header-speed_3805190947 {\n    display: none;\n    width: 0;\n  }\n}\n.cc_transfer-fee-comparison-table__header-speed_3805190947 > div {\n  padding-left: var(--size-24);\n}\n@media (min-width: 768px) {\n  .cc_transfer-fee-comparison-table__header-speed_3805190947 > div {\n    justify-content: flex-end;\n    padding-right: calc(var(--size-12) * 3);\n  }\n}\n.cc_transfer-fee-comparison-table__header-speed_3805190947 > div > p {\n  margin-bottom: 0;\n}\n.cc_transfer-fee-comparison-table__header-speed_3805190947 > div > div {\n  padding-left: var(--size-8);\n}\n.cc_transfer-fee-comparison-table__header-speed_3805190947 > div > div > span > span > span > button > span > svg {\n  color: var(--color-content-primary);\n}\n.cc_transfer-fee-comparison-table__header-speed-popover_3805190947 {\n  display: flex;\n  justify-content: center;\n}\n@media (max-width: 767px) {\n  .cc_transfer-fee-comparison-table__header-speed-popover_3805190947 {\n    padding-top: var(--size-8);\n    padding-left: var(--size-24);\n  }\n}\n.cc_transfer-fee-comparison-table__header-speed-popover_3805190947 > p {\n  margin-right: var(--size-4);\n  margin-bottom: 0;\n  color: var(--color-content-primary);\n  font-size: var(--font-size-14);\n  font-weight: var(--font-weight-semi-bold);\n}\n@media (max-width: 767px) {\n  .cc_transfer-fee-comparison-table__header-speed-popover_3805190947 > p {\n    font-weight: var(--font-weight-regular);\n  }\n}\n\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy90cmFuc2Zlci1mZWUtY29tcGFyaXNvbi90cmFuc2Zlci1mZWUtY29tcGFyaXNvbi10YWJsZS9UcmFuc2ZlckZlZUNvbXBhcmlzb25UYWJsZS5tb2R1bGUubGVzcyIsIlRyYW5zZmVyRmVlQ29tcGFyaXNvblRhYmxlLm1vZHVsZS5sZXNzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU1BO0VBQ0UsMkJBQUE7RUFDQSwwQkFBQTtFQUNBLDZCQUFBO0VBQ0EsOEJBQUE7RUFDQSw0Q0FBQTtBQ0xGO0FET0U7RUFBQTtJQUNFLFVBQUE7RUNKRjtBQUNGO0FET0E7RUFDRSxhQUFBO0FDTEY7QURPRTtFQUFBO0lBQ0Usa0JBQUE7RUNKRjtBQUNGO0FET0E7RUFDRSxVQUFBO0VBQ0EsY0FBQTtBQ0xGO0FEUUE7RUFFSSxrQkFBQTtBQ1BKO0FEU0k7RUFDRSxXQUFBO0VBQ0Esa0JBQUE7RUFDQSxVQUFBO0VBQ0EsU0FBQTtFQUNBLFdBQUE7RUFDQSxXQUFBO0VBQ0EsV0FBQTtFQUNBLCtCQUFBO0VBQ0Esb0JBQUE7QUNQTjtBRFNNO0VBQUE7SUFDRSxhQUFBO0VDTk47QUFDRjtBRFVFO0VBbkJFLGtCQUFBO0FDWUo7QURWSTtFQUNFLFdBQUE7RUFDQSxrQkFBQTtFQUNBLFVBQUE7RUFDQSxTQUFBO0VBQ0EsV0FBQTtFQUNBLFdBQUE7RUFDQSxXQUFBO0VBQ0EsK0JBQUE7RUFDQSxvQkFBQTtBQ1lOO0FEVk07RUFBQTtJQUNFLGFBQUE7RUNhTjtBQUNGO0FESkE7RUFDRSxzQ0FBQTtFQUNBLGdCQUFBO0FDTUY7QURKRTtFQUFBO0lBQ0UsYUFBQTtJQUNBLHNCQUFBO0lBQ0Esc0NBQUE7SUFDQSw0QkFBQTtFQ09GO0FBQ0Y7QURMRTtFQUNFLGdCQUFBO0FDT0o7QURIQTtFQUNFLGFBQUE7QUNLRjtBREhFO0VBQUE7SUFDRSxrQkFBQTtFQ01GO0FBQ0Y7QURIQTtFQUNFLG1DQUFBO0VBQ0EsOEJBQUE7RUFDQSx5Q0FBQTtFQUNBLGtCQUFBO0FDS0Y7QURIRTtFQUFBO0lBQ0UsYUFBQTtJQUNBLHNCQUFBO0lBQ0EsOEJBQUE7RUNNRjtBQUNGO0FEaEJBO0VBYUkscUJBQUE7QUNNSjtBREZBO0VBQ0UsdUNBQUE7RUFDQSxxQkFBQTtBQ0lGO0FERkU7RUFBQTtJQUNFLGFBQUE7SUFDQSxRQUFBO0VDS0Y7QUFDRjtBREhFO0VBQ0UsNEJBQUE7QUNLSjtBREhJO0VBQUE7SUFDRSx5QkFBQTtJQUNBLHVDQUFBO0VDTUo7QUFDRjtBREpJO0VBQ0UsZ0JBQUE7QUNNTjtBREhJO0VBQ0UsMkJBQUE7QUNLTjtBREhNO0VBQ0UsbUNBQUE7QUNLUjtBRENBO0VBQ0UsYUFBQTtFQUNBLHVCQUFBO0FDQ0Y7QURDRTtFQUFBO0lBQ0UsMEJBQUE7SUFDQSw0QkFBQTtFQ0VGO0FBQ0Y7QURUQTtFQVVJLDJCQUFBO0VBQ0EsZ0JBQUE7RUFDQSxtQ0FBQTtFQUNBLDhCQUFBO0VBQ0EseUNBQUE7QUNFSjtBREFJO0VBQUE7SUFDRSx1Q0FBQTtFQ0dKO0FBQ0YiLCJmaWxlIjoiVHJhbnNmZXJGZWVDb21wYXJpc29uVGFibGUubW9kdWxlLmxlc3MifQ== */";
var componentStyles = {"transfer-fee-comparison-table__rectangle":"cc_transfer-fee-comparison-table__rectangle_3805190947","transferFeeComparisonTable__rectangle":"cc_transfer-fee-comparison-table__rectangle_3805190947","transfer-fee-comparison-table__header-border-row":"cc_transfer-fee-comparison-table__header-border-row_3805190947","transferFeeComparisonTable__headerBorderRow":"cc_transfer-fee-comparison-table__header-border-row_3805190947","transfer-fee-comparison-table__header-border":"cc_transfer-fee-comparison-table__header-border_3805190947","transferFeeComparisonTable__headerBorder":"cc_transfer-fee-comparison-table__header-border_3805190947","transfer-fee-comparison-table__header-with-speed":"cc_transfer-fee-comparison-table__header-with-speed_3805190947","transferFeeComparisonTable__headerWithSpeed":"cc_transfer-fee-comparison-table__header-with-speed_3805190947","cell-border":"cc_cell-border_3805190947","cellBorder":"cc_cell-border_3805190947","transfer-fee-comparison-table__header-with-speed--border":"cc_transfer-fee-comparison-table__header-with-speed--border_3805190947","transferFeeComparisonTable__headerWithSpeedBorder":"cc_transfer-fee-comparison-table__header-with-speed--border_3805190947","transfer-fee-comparison-table__header-cost":"cc_transfer-fee-comparison-table__header-cost_3805190947","transferFeeComparisonTable__headerCost":"cc_transfer-fee-comparison-table__header-cost_3805190947","transfer-fee-comparison-table__header-cost-speed":"cc_transfer-fee-comparison-table__header-cost-speed_3805190947","transferFeeComparisonTable__headerCostSpeed":"cc_transfer-fee-comparison-table__header-cost-speed_3805190947","transfer-fee-comparison-table__header-cost-text":"cc_transfer-fee-comparison-table__header-cost-text_3805190947","transferFeeComparisonTable__headerCostText":"cc_transfer-fee-comparison-table__header-cost-text_3805190947","transfer-fee-comparison-table__header-speed":"cc_transfer-fee-comparison-table__header-speed_3805190947","transferFeeComparisonTable__headerSpeed":"cc_transfer-fee-comparison-table__header-speed_3805190947","transfer-fee-comparison-table__header-speed-popover":"cc_transfer-fee-comparison-table__header-speed-popover_3805190947","transferFeeComparisonTable__headerSpeedPopover":"cc_transfer-fee-comparison-table__header-speed-popover_3805190947"};
styleInject(css_248z);

const TransferFeeComparisonTable = ({ sendAmount, quotes, route, midmarketRate, showSpeed = false, showFastestFlag = false, onCentreProviderView = () => { }, onFeePopoverClick = (providerName) => { }, }) => {
    const [isCentreProviderViewed, setIsCentreProviderViewed] = useState(false);
    const quotesSortedByReceiveAmount = sortTransferFeeComparisonQuoteByReceiveAmount(quotes);
    const quotesSortedBySpeed = sortByDeliveryDate(quotes);
    const highestReceivedAmount = quotesSortedByReceiveAmount.length > 0 ? quotesSortedByReceiveAmount[0].receiveAmount.value : 0;
    const fastestProviderAlias = quotesSortedBySpeed.length > 0 ? quotesSortedBySpeed[0].provider.alias : '';
    const isWiseCheapest = quotesSortedByReceiveAmount.length > 0
        ? quotesSortedByReceiveAmount[0].provider.alias === WISE_ALIAS
        : false;
    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call
    const centreProviderIndex = quotes ? getTrackingTriggerIndex(quotes.length) : null;
    return (jsxs("table", Object.assign({ className: componentStyles.transferFeeComparisonTable__rectangle }, { children: [jsxs("thead", { children: [jsxs("tr", Object.assign({ className: showSpeed && !isWiseCheapest && quotes.length > 0
                            ? componentStyles.transferFeeComparisonTable__headerWithSpeedBorder
                            : '' }, { children: [jsx("td", Object.assign({ colSpan: 2, className: componentStyles.transferFeeComparisonTable__headerCost }, { children: jsx(HeaderCost, { sendAmount: sendAmount, targetCurrency: route.targetCurrency, showSpeed: showSpeed }) })), showSpeed && (jsx("td", Object.assign({ className: componentStyles.transferFeeComparisonTable__headerSpeed }, { children: jsx(SpeedAndPopover, { messageKey: "transfer-speed" }) })))] })), jsx("tr", Object.assign({ className: showSpeed || quotes.length === 0
                            ? componentStyles.transferFeeComparisonTable__headerBorderRow
                            : '' }, { children: jsx("td", Object.assign({ colSpan: 4 }, { children: jsx("hr", { className: componentStyles.transferFeeComparisonTable__headerBorder }) })) }))] }), jsx("tbody", { children: quotesSortedByReceiveAmount.map((quote, index) => {
                    const isCheapest = quote.receiveAmount.value === highestReceivedAmount;
                    const isFastestProvider = quote.provider.alias === fastestProviderAlias;
                    const ProviderRow = React.forwardRef((props, reference) => {
                        return (jsx(TransferFeeComparisonTableRow, { quote: quote, nextQuote: quotesSortedByReceiveAmount[index + 1], midmarketRate: midmarketRate, isCheapest: isCheapest, isFast: isFastestProvider, showSpeed: showSpeed, showFastestFlag: showFastestFlag, onFeePopoverClick: () => {
                                onFeePopoverClick(quote.provider.name);
                            }, reference: reference }, quote.provider.alias));
                    });
                    return !isCentreProviderViewed && index === centreProviderIndex ? (jsx(InView, Object.assign({ onChange: (inView, _) => {
                            if (!inView) {
                                return;
                            }
                            setIsCentreProviderViewed(true);
                            onCentreProviderView();
                        }, threshold: 1, triggerOnce: true }, { children: ({ ref }) => {
                            return jsx(ProviderRow, { ref: ref });
                        } }))) : (jsx(ProviderRow, {}));
                }) })] })));
};
const HeaderCost = ({ sendAmount, targetCurrency, showSpeed, }) => {
    return (jsxs(Fragment, { children: [jsx("p", Object.assign({ className: componentStyles.transferFeeComparisonTable__headerCostText }, { children: jsx(FormattedMessage, { id: "real-cost", values: {
                        sendAmount: formatMoney(sendAmount.value, sendAmount.currency),
                        targetCurrency: targetCurrency,
                        span: (chunks) => (jsx("span", { children: jsx(Fragment, { children: chunks }) })),
                    } }) })), showSpeed && (jsx("div", Object.assign({ className: componentStyles.transferFeeComparisonTable__headerCostSpeed }, { children: jsx(SpeedAndPopover, { messageKey: "and-transfer-speed" }) })))] }));
};
const SpeedAndPopover = ({ messageKey }) => {
    return (jsxs("div", Object.assign({ className: componentStyles.transferFeeComparisonTable__headerSpeedPopover }, { children: [jsx("p", Object.assign({ className: componentStyles.transferFeeComparisonTable__text }, { children: jsx(FormattedMessage, { id: messageKey }) })), jsx(SpeedPopover, {})] })));
};

const getTrackingContext = (sendAmount, quotes, route, midMarketRate, excludePartners, showSpeed = false, showFastestFlag = false) => {
    const comparisonQuotes = quotes.map((quote) => transformV2ToComparisonQuote(quote));
    return {
        amount: sendAmount.value,
        source: route.sourceCurrency,
        target: route.targetCurrency,
        quotes: comparisonQuotes,
        componentType: Table.TransferFee,
        savingsAgainstWise: calculateSavingsWithRespectToWiseQuote(comparisonQuotes, excludePartners),
        showSpeed: showSpeed,
        showFastestFlag: showFastestFlag,
        midMarketRate: { rate: midMarketRate },
    };
};
const TransferFeeComparisonContainer = ({ sendAmount, quotes, route, midMarketRate, trackEvent = () => {
    /* do nothing. */
}, excludePartners = true, showSpeed = false, showFastestFlag = false, }) => {
    const [fetchedQuotes, setQuotes] = useState(quotes);
    const [isLoading, setIsLoading] = useState(false);
    const [isError, setIsError] = useState(false);
    useEffect(() => {
        if (quotes == null || quotes.length === 0) {
            const fetchNewQuotes = () => __awaiter(void 0, void 0, void 0, function* () {
                setIsLoading(true);
                setIsError(false);
                //@typescript-eslint/no-unsafe-assignment
                const newQuotes = yield fetchQuotes(route.sourceCurrency, route.targetCurrency, sendAmount.value, midMarketRate);
                const fetchedQuotes = transformQuotesResponseV2(newQuotes);
                setQuotes(fetchedQuotes.quotes);
                setIsLoading(false);
            });
            // eslint-disable-next-line no-console
            fetchNewQuotes().catch(() => {
                setIsLoading(false);
                setIsError(true);
            });
        }
    }, [sendAmount, route, midMarketRate]);
    const filteredQuotes = excludePartners
        ? fetchedQuotes.filter((quote) => !quote.provider.partner)
        : fetchedQuotes;
    const context = getTrackingContext(sendAmount, filteredQuotes, route, midMarketRate, excludePartners, showSpeed, showFastestFlag);
    const onCentreProviderView = () => {
        trackTableViewed(context, trackEvent);
    };
    const onFeePopoverClick = (providerName) => {
        const trackingContext = Object.assign(Object.assign({}, context), { providerName });
        trackFeePopoverClicked(trackingContext, trackEvent);
    };
    if (isLoading) {
        return jsx(Loader, { size: Size.MEDIUM, classNames: styles, "data-testid": "loader" });
    }
    if (isError) {
        return jsx(Fragment, {});
    }
    return (jsxs("div", Object.assign({ className: styles.transferFeeComparison__container }, { children: [jsx("div", Object.assign({ className: styles.transferFeeComparison__header }, { children: jsx(TransferFeeComparisonHeader, { showSpeed: showSpeed }) })), jsx(ThemeProvider, Object.assign({ theme: "personal", screenMode: "light", className: styles.transferFeeComparison__table }, { children: jsx(TransferFeeComparisonTable, { sendAmount: sendAmount, quotes: filteredQuotes, route: route, midmarketRate: midMarketRate, showSpeed: showSpeed, showFastestFlag: showFastestFlag, onCentreProviderView: onCentreProviderView, onFeePopoverClick: onFeePopoverClick }) })), jsx("div", Object.assign({ className: styles.transferFeeComparison__footer }, { children: jsx(TransferFeeComparisonFooter, {}) }))] })));
};

export { TransferFeeComparisonContainer as T, TransferFeeComparisonTable as a };
//# sourceMappingURL=TransferFeeComparisonContainer-402150e1.js.map
