import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import { Field, Input, SelectInput, SelectInputOptionContent, Info, InfoPresentation, Size, Alert, AvatarView, Loader, Link } from '@transferwise/components';
import { u as useComparisonTableHeroV2TableTrackingContext, c as clsx, t as transformComparisonV4Response, C as ComparisonTableHeroV2TableTrackingContextProvider } from '../ComparisonTableHeroV2TrackingContext-3f2aabac.js';
import { useIntl, FormattedMessage } from 'react-intl';
import { R as REVOLUT_WITH_DISCLAIMER } from '../ProviderWithDisclaimer-4516782f.js';
import { c as createUrl } from '../createUrl-71d09e7b.js';
import { g as generateUrl, A as AvailablePages } from '../generateUrl-3fc80d02.js';
import { n as trackFeePopoverClicked, T as Table, e as trackClickToSeeAvailableComparison } from '../tracking-6183d916.js';
import { s as styleInject } from '../style-inject.es-1f59c1d0.js';
import { formatAmount, getRateInAllFormats, formatRate, formatPercentage, formatMoney } from '@transferwise/formatting';
import { Flag } from '@wise/art';
import { useState, useMemo, useEffect } from 'react';
import { p as parseAmount } from '../parseAmount-e5e98480.js';
import { d as debounce } from '../debounce-1301bca0.js';
import { ArrowRight, Bank } from '@transferwise/icons';
import { P as ProviderLogo } from '../ProviderLogo-3ce2d546.js';
import { i as isConsideredMidmarketRate } from '../isConsideredMidmarketRate-4f12041d.js';
import 'duration-fns';
import '../savingsCalculator.js';
import '../quoteFilters-9ddc9e2f.js';
import '../provider-constants-b35398f2.js';
import '../sortQuotesByDeliverySpeedEstimate-f8c8a1b8.js';
import 'date-fns';
import '@wise/components-theming';
import '../aliasFilter-a7b9c811.js';

var css_248z$3 = ".cc_themeWrapper_4099316779 {\n  width: 100%;\n  background: none;\n}\n.cc_ccv2wrapper_4099316779 {\n  width: 100%;\n  margin-bottom: 40px;\n  padding: 32px 0 20px;\n  border-collapse: collapse;\n  border-radius: 30px;\n  background-color: var(--color-background-screen);\n  box-shadow: 0 6px 20px #00000014;\n}\n.cc_ccv2wrapper_4099316779:last-child {\n  margin-bottom: 0;\n}\n.cc_loadingWrapper_4099316779 {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 380px;\n}\n.cc_footer_4099316779 {\n  padding-top: 20px;\n  border-top: 1px solid var(--color-border-neutral);\n  text-align: center;\n}\n\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy9jb21wYXJpc29uLXRhYmxlLXYyL0NvbXBhcmlzb25UYWJsZVYyLm1vZHVsZS5sZXNzIiwiQ29tcGFyaXNvblRhYmxlVjIubW9kdWxlLmxlc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFDRSxXQUFBO0VBQ0EsZ0JBQUE7QUNDRjtBREVBO0VBQ0UsV0FBQTtFQUNBLG1CQUFBO0VBQ0Esb0JBQUE7RUFDQSx5QkFBQTtFQUNBLG1CQUFBO0VBQ0EsZ0RBQUE7RUFDQSxnQ0FBQTtBQ0FGO0FERUU7RUFDRSxnQkFBQTtBQ0FKO0FESUE7RUFDRSxhQUFBO0VBQ0EsbUJBQUE7RUFDQSx1QkFBQTtFQUNBLGlCQUFBO0FDRkY7QURLQTtFQUNFLGlCQUFBO0VBQ0EsaURBQUE7RUFDQSxrQkFBQTtBQ0hGIiwiZmlsZSI6IkNvbXBhcmlzb25UYWJsZVYyLm1vZHVsZS5sZXNzIn0= */";
var styles$1 = {"themeWrapper":"cc_themeWrapper_4099316779","ccv2wrapper":"cc_ccv2wrapper_4099316779","loadingWrapper":"cc_loadingWrapper_4099316779","footer":"cc_footer_4099316779"};
styleInject(css_248z$3);

var css_248z$2 = ".cc_controlsWrapper_4099316779 {\n  padding: 0 40px 32px;\n}\n.cc_controlsContainer_4099316779 {\n  display: grid;\n  grid-template-columns: repeat(3, calc(33% - 13px));\n  gap: 24px;\n}\n.cc_controlsContainer_4099316779 .form-group {\n  margin-bottom: 0;\n}\n\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy9jb21wYXJpc29uLXRhYmxlLXYyL2VsZW1lbnRzL0NvbXBhcmlzb25JbnB1dHMvQ29tcGFyaXNvbklucHV0cy5tb2R1bGUubGVzcyIsIkNvbXBhcmlzb25JbnB1dHMubW9kdWxlLmxlc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFDRSxvQkFBQTtBQ0NGO0FERUE7RUFDRSxhQUFBO0VBQ0Esa0RBQUE7RUFDQSxTQUFBO0FDQUY7QURIQTtFQU1JLGdCQUFBO0FDQUoiLCJmaWxlIjoiQ29tcGFyaXNvbklucHV0cy5tb2R1bGUubGVzcyJ9 */";
var styles = {"controlsWrapper":"cc_controlsWrapper_4099316779","controlsContainer":"cc_controlsContainer_4099316779"};
styleInject(css_248z$2);

const getFullCurrency = (currencies) => (code) => {
    return (currencies.find((currency) => currency.code === code) || {
        code,
        name: '',
        countryKeywords: [],
    });
};
const transformCurrencyToOption = (currencies) => (routeCurrency) => {
    const currency = getFullCurrency(currencies)(routeCurrency.currencyCode);
    return {
        type: 'option',
        value: routeCurrency.currencyCode,
        filterMatchers: [currency.code, currency.name].concat(currency.countryKeywords),
    };
};
const sortByPopularity = (items) => {
    return items.sort((a, b) => (a.popularityIndex || 0) - (b.popularityIndex || 0));
};
const partitionByPopualrity = (items) => {
    const { popular, regular } = items.reduce((accumulator, item) => {
        accumulator[(item === null || item === void 0 ? void 0 : item.popularityIndex) !== undefined ? 'popular' : 'regular'].push(item);
        return accumulator;
    }, { popular: [], regular: [] });
    return {
        popular: sortByPopularity(popular),
        regular: sortByPopularity(regular),
    };
};
const getOptions = (currencies, items) => {
    const { popular, regular } = partitionByPopualrity(items);
    return [
        {
            type: 'group',
            label: 'Popular currencies',
            options: popular.map(transformCurrencyToOption(currencies)),
        },
        {
            type: 'group',
            label: 'All currencies',
            options: regular.map(transformCurrencyToOption(currencies)),
        },
    ];
};
const renderCurrencySelectOption = (currencies) => function (o) {
    const currency = getFullCurrency(currencies)(o);
    return (jsx(SelectInputOptionContent, { title: o, note: currency.name, icon: jsx(Flag, { code: o, intrinsicSize: 24 }) }));
};
const getTargetsFromSourceCode = (sourceCurrencies, sourceCode) => {
    const sourceCurrency = sourceCurrencies.find(({ currencyCode }) => currencyCode === sourceCode);
    return ((sourceCurrency === null || sourceCurrency === void 0 ? void 0 : sourceCurrency.targetCurrencies.filter(({ currencyCode }) => currencyCode !== sourceCode)) || []);
};
const ComparisonInputs = ({ amount, sourceCurrencyCode, targetCurrencyCode, routes, currencies, onChange, }) => {
    const { locale, formatMessage } = useIntl();
    const { sourceCurrencies } = routes;
    const formatOurAmount = (value) => formatAmount(value, sourceCurrencyCode || '', locale);
    const parseOurAmount = (value) => parseAmount(value, sourceCurrencyCode || '', locale);
    const [formattedAmount, setFormattedAmount] = useState(formatOurAmount(amount));
    const onChangeDebounced = useMemo(() => debounce(500, onChange), [onChange]);
    useEffect(() => {
        if (amount) {
            setFormattedAmount(formatOurAmount(amount));
        }
    }, [amount]);
    const handleAmountChange = (event) => {
        const newValue = event.target.value;
        const newParsedAmount = parseOurAmount(newValue);
        const newFormattedAmount = formatOurAmount(newParsedAmount);
        setFormattedAmount(newFormattedAmount);
        if (newParsedAmount && amount !== newParsedAmount) {
            onChangeDebounced({
                sourceCurrencyCode: selectedSource,
                targetCurrencyCode: selectedTarget || targetCurrencyCode,
                amount: newParsedAmount,
            });
        }
    };
    const [selectedSource, setSelectedSource] = useState(sourceCurrencyCode || 'GBP');
    const [selectedTarget, setSelectedTarget] = useState(targetCurrencyCode || 'EUR');
    useEffect(() => {
        setSelectedSource(sourceCurrencyCode);
    }, [sourceCurrencyCode]);
    useEffect(() => {
        setSelectedTarget(targetCurrencyCode);
    }, [targetCurrencyCode]);
    const handleSourceChange = (code) => {
        const newTargets = getTargetsFromSourceCode(sourceCurrencies, code);
        const currentTargetIsValid = newTargets.some(({ currencyCode }) => currencyCode === selectedTarget);
        let target = selectedTarget;
        if (!currentTargetIsValid) {
            const newValidTarget = partitionByPopualrity(newTargets).popular[0];
            // eslint-disable-next-line fp/no-mutation
            target = newValidTarget.currencyCode;
            setSelectedTarget(newValidTarget.currencyCode);
        }
        setSelectedSource(code);
        if (formattedAmount) {
            onChange({
                sourceCurrencyCode: code,
                targetCurrencyCode: target,
                amount: parseOurAmount(formattedAmount),
            });
        }
    };
    const handleTargetChange = (code) => {
        setSelectedTarget(code);
        if (formattedAmount) {
            onChange({
                sourceCurrencyCode: selectedSource,
                targetCurrencyCode: code,
                amount: parseOurAmount(formattedAmount),
            });
        }
    };
    return (jsx("div", Object.assign({ className: styles.controlsWrapper }, { children: jsxs("div", Object.assign({ className: styles.controlsContainer }, { children: [jsx(Field, Object.assign({ label: formatMessage({ id: 'cthv2-amount' }) }, { children: jsx(Input, { placeholder: "0", inputMode: "decimal", autoComplete: "off", value: formattedAmount, onChange: handleAmountChange }) })), jsx(Field, Object.assign({ label: formatMessage({ id: 'cthv2-from' }) }, { children: jsx(SelectInput, { filterable: true, value: selectedSource, items: getOptions(currencies, sourceCurrencies), renderValue: renderCurrencySelectOption(currencies), onChange: handleSourceChange }) })), jsx(Field, Object.assign({ label: formatMessage({ id: 'cthv2-to' }) }, { children: jsx(SelectInput, { filterable: true, onChange: handleTargetChange, value: selectedTarget, items: getOptions(currencies, getTargetsFromSourceCode(sourceCurrencies, selectedSource)), renderValue: renderCurrencySelectOption(currencies) }) }))] })) })));
};

const getCalculations = (quote, { locale, midMarketRate }) => {
    var _a;
    const exchangeRate = quote.rate || 0;
    const exchangeRateMarkup = exchangeRate
        ? ((midMarketRate - exchangeRate) * quote.sendAmount.value) / midMarketRate
        : 0;
    const costOfTransfer = exchangeRateMarkup + (((_a = quote.fee) === null || _a === void 0 ? void 0 : _a.value) || 0);
    const exchangeRateInAllFormats = getRateInAllFormats(exchangeRate, quote.sourceCurrency, quote.targetCurrency, {}, locale);
    const formattedExchangeRateEquation = exchangeRateInAllFormats === null || exchangeRateInAllFormats === void 0 ? void 0 : exchangeRateInAllFormats.formats.equation;
    return {
        costOfTransfer,
        exchangeRateMarkup,
        formattedExchangeRateEquation,
    };
};

const getInfoContent = (exchangeRateMarkup, midMarketRate, exchangeRate, sourceCurrency, targetCurrency, locale, formattedExchangeRateEquation) => {
    var _a;
    const isInvertedRate = formattedExchangeRateEquation.reference === 'target';
    const formattedExchangeRate = isInvertedRate
        ? formattedExchangeRateEquation.calculationInDecimal
        : formatRate(exchangeRate, {}, locale);
    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
    const formattedMidMarketRate = isInvertedRate
        ? // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
            (_a = getRateInAllFormats(midMarketRate, sourceCurrency, targetCurrency, {}, locale).formats
                .equation) === null || _a === void 0 ? void 0 : _a.calculationInDecimal
        : formatRate(midMarketRate, {}, locale);
    if (isConsideredMidmarketRate(exchangeRate, midMarketRate, 0.01)) {
        return (jsxs(Fragment, { children: [jsx(FormattedMessage, { tagName: "p", id: "cthv2-row-info-popover-details", values: {
                        rate: jsx("span", Object.assign({ className: "text-positive" }, { children: formattedExchangeRate })),
                        rateDetails: (jsx(FormattedMessage, { id: "cthv2-row-info-popover-same-rate-details", values: {
                                midMarketRate: jsx("span", Object.assign({ className: "text-positive" }, { children: formattedMidMarketRate })),
                            } })),
                    } }), jsx(FormattedMessage, { id: "cthv2-row-info-popover-conclusion-same", tagName: "p" })] }));
    }
    else if (midMarketRate > exchangeRate) {
        const percentageDifference = (midMarketRate - exchangeRate) / midMarketRate;
        return (jsxs(Fragment, { children: [jsx(FormattedMessage, { tagName: "p", id: "cthv2-row-info-popover-details", values: {
                        rate: jsx("span", Object.assign({ className: "text-negative" }, { children: formattedExchangeRate })),
                        rateDetails: (jsx(FormattedMessage, { id: "cthv2-row-info-popover-worse-rate-details", values: {
                                percentage: `${formatPercentage(percentageDifference)}`,
                                midMarketRate: jsx("span", Object.assign({ className: "text-positive" }, { children: formattedMidMarketRate })),
                            } })),
                    } }), jsx(FormattedMessage, { id: "cthv2-row-info-popover-conclusion-worse", values: {
                        additionalFees: formatMoney(exchangeRateMarkup, sourceCurrency, locale),
                    }, tagName: "p" })] }));
    }
    else {
        return (jsxs(Fragment, { children: [jsx(FormattedMessage, { tagName: "p", id: "cthv2-row-info-popover-details", values: {
                        rate: jsx("span", Object.assign({ className: "text-positive" }, { children: formattedExchangeRate })),
                        rateDetails: (jsx(FormattedMessage, { id: "cthv2-row-info-popover-better-rate-details", values: {
                                midMarketRate: jsx("span", Object.assign({ className: "text-positive" }, { children: formattedMidMarketRate })),
                            } })),
                    } }), jsx(FormattedMessage, { id: "cthv2-row-info-popover-conclusion-better", tagName: "p" })] }));
    }
};
const ExchangeRateInfo = ({ sourceCurrency, targetCurrency, providerName, exchangeRate, midMarketRate, sendMoneyValue, }) => {
    var _a;
    const { locale, formatMessage } = useIntl();
    const { trackingContext, trackEvent } = useComparisonTableHeroV2TableTrackingContext();
    const exchangeRateMarkup = exchangeRate
        ? ((midMarketRate - exchangeRate) * sendMoneyValue) / midMarketRate
        : null;
    const exchangeRateInAllFormats = exchangeRate
        ? getRateInAllFormats(exchangeRate, sourceCurrency, targetCurrency, {}, locale)
        : null;
    const formattedExchangeRateEquation = (_a = exchangeRateInAllFormats === null || exchangeRateInAllFormats === void 0 ? void 0 : exchangeRateInAllFormats.formats) === null || _a === void 0 ? void 0 : _a.equation;
    const shouldRender = exchangeRateMarkup !== null && exchangeRate;
    return shouldRender ? (jsx(Info, { title: formatMessage({ id: 'cthv2-row-info-popover-title' }), content: getInfoContent(exchangeRateMarkup, midMarketRate, exchangeRate, sourceCurrency, targetCurrency, locale, formattedExchangeRateEquation), presentation: InfoPresentation.POPOVER, size: Size.LARGE, "aria-label": formatMessage({ id: 'cthv2-row-info-popover-title' }), onClick: () => {
            const popOverTrackingContext = Object.assign(Object.assign({}, trackingContext), { providerName });
            trackFeePopoverClicked(popOverTrackingContext, trackEvent);
        } })) : (jsx(Fragment, {}));
};

const MidMarketRateInfo = ({ midMarketRate }) => {
    const { locale, formatMessage } = useIntl();
    const { trackingContext, trackEvent } = useComparisonTableHeroV2TableTrackingContext();
    return (jsx(Info, { title: formatMessage({ id: 'cthv2-row-mid-popover-title' }), content: jsx(FormattedMessage, { id: "cthv2-row-mid-popover-content", values: {
                rate: jsx("span", Object.assign({ className: "text-positive" }, { children: formatRate(midMarketRate, {}, locale) })),
            } }), presentation: InfoPresentation.POPOVER, size: Size.LARGE, "aria-label": formatMessage({ id: 'cthv2-row-mid-popover-title' }), onClick: () => {
            const popOverTrackingContext = Object.assign(Object.assign({}, trackingContext), { providerName: 'wise' });
            trackFeePopoverClicked(popOverTrackingContext, trackEvent);
        } }));
};

var css_248z$1 = ".cc_header_4099316779 {\n  width: 220px;\n  height: 60px;\n  padding: 0 16px 0 0;\n  font-size: 16px;\n  font-weight: 400;\n}\n.cc_headerLabel_4099316779 {\n  margin: 0;\n}\n.cc_highlighted_4099316779:last-child {\n  border-bottom-right-radius: 10px;\n  border-bottom-left-radius: 10px;\n}\n.cc_entry_4099316779 {\n  text-align: center;\n}\n.cc_entryBold_4099316779 {\n  font-weight: 600;\n}\n.cc_fallback_4099316779 {\n  display: flex;\n  flex-direction: column;\n  padding: 24px 94px;\n  text-align: center;\n  gap: 32px;\n}\n\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy9jb21wYXJpc29uLXRhYmxlLXYyL2VsZW1lbnRzL1Byb3ZpZGVyUm93L1Byb3ZpZGVyUm93Lm1vZHVsZS5sZXNzIiwiUHJvdmlkZXJSb3cubW9kdWxlLmxlc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFDRSxZQUFBO0VBQ0EsWUFBQTtFQUNBLG1CQUFBO0VBQ0EsZUFBQTtFQUNBLGdCQUFBO0FDQ0Y7QURFQTtFQUNFLFNBQUE7QUNBRjtBREdBO0VBQ0UsZ0NBQUE7RUFDQSwrQkFBQTtBQ0RGO0FESUE7RUFDRSxrQkFBQTtBQ0ZGO0FES0E7RUFDRSxnQkFBQTtBQ0hGO0FETUE7RUFDRSxhQUFBO0VBQ0Esc0JBQUE7RUFDQSxrQkFBQTtFQUNBLGtCQUFBO0VBQ0EsU0FBQTtBQ0pGIiwiZmlsZSI6IlByb3ZpZGVyUm93Lm1vZHVsZS5sZXNzIn0= */";
var rowStyles = {"header":"cc_header_4099316779","headerLabel":"cc_headerLabel_4099316779","highlighted":"cc_highlighted_4099316779","entry":"cc_entry_4099316779","entryBold":"cc_entryBold_4099316779","fallback":"cc_fallback_4099316779"};
styleInject(css_248z$1);

const ProviderRow = ({ label, quotes, getValue, cheapestProviderAlias, bold = false, highlightClassName, getTooltip, }) => (jsxs("tr", { children: [jsx("th", Object.assign({ className: rowStyles.header }, { children: jsx("p", Object.assign({ className: rowStyles.headerLabel }, { children: label })) })), quotes.map((quote) => (jsxs("td", Object.assign({ className: clsx(rowStyles.entry, {
                [highlightClassName]: cheapestProviderAlias === quote.provider.alias,
                [rowStyles.entryBold]: bold,
            }) }, { children: [jsx("span", { children: getValue(quote) }), getTooltip ? jsx("span", Object.assign({ className: "m-l-1" }, { children: getTooltip === null || getTooltip === void 0 ? void 0 : getTooltip(quote) })) : null] }), quote.provider.alias)))] }));

var css_248z = ".cc_ccv2container_4099316779 {\n  width: 100%;\n  background: none;\n}\n.cc_ccv2AlertContainer_4099316779,\n.cc_ccv2container_4099316779 {\n  margin-bottom: 24px;\n  padding: 0 20px 0 40px;\n}\n.cc_ccv2AlertContainer_4099316779:last-child,\n.cc_ccv2container_4099316779:last-child {\n  margin-bottom: 0;\n}\n.cc_providerAlias_4099316779 {\n  position: relative;\n  min-width: 185px;\n  padding: 18px 40px;\n  border-radius: 12px 12px 0 0;\n  font-size: 16px;\n  font-weight: 600;\n  text-align: center;\n}\n.cc_providerAlias_4099316779::after {\n  content: '';\n  position: absolute;\n  right: 20px;\n  bottom: 0;\n  left: 20px;\n  border-bottom: 1px solid var(--color-border-neutral);\n}\n.cc_providerHighlighted_4099316779 {\n  background: var(--color-bright-green);\n}\n.cc_tbody_4099316779 tr:last-child .cc_providerHighlighted_4099316779 {\n  border-bottom-right-radius: 12px;\n  border-bottom-left-radius: 12px;\n}\n.cc_recipientFeesHeader_4099316779 {\n  margin-bottom: 4px;\n}\n.cc_recipientFees_4099316779 {\n  color: var(--color-content-tertiary);\n  font-size: 14px;\n  font-weight: 400;\n}\n.cc_sublabel_4099316779 {\n  display: flex;\n  align-items: center;\n  font-size: 12px;\n  gap: 2px;\n}\n.cc_sublabel_4099316779 svg {\n  width: 12px;\n  height: 12px;\n}\n.cc_v2logoContainer_4099316779 {\n  display: flex;\n  justify-content: center;\n  margin-bottom: 10px;\n}\n.cc_v2logoContainer_4099316779 > img {\n  width: 40px;\n  min-width: 0;\n  max-width: none;\n  height: 40px;\n  max-height: none;\n  margin: 0;\n}\n\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy9jb21wYXJpc29uLXRhYmxlLXYyL2VsZW1lbnRzL0NvbXBhcmlzb25UYWJsZUVsZW1lbnQvQ29tcGFyaXNvblRhYmxlRWxlbWVudC5tb2R1bGUubGVzcyIsIkNvbXBhcmlzb25UYWJsZUVsZW1lbnQubW9kdWxlLmxlc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRUE7RUFDRSxXQUFBO0VBQ0EsZ0JBQUE7QUNERjtBRElBOztFQUVFLG1CQUFBO0VBQ0Esc0JBQUE7QUNGRjtBRElFOztFQUNFLGdCQUFBO0FDREo7QURLQTtFQUNFLGtCQUFBO0VBQ0EsZ0JBQUE7RUFDQSxrQkFBQTtFQUNBLDRCQUFBO0VBQ0EsZUFBQTtFQUNBLGdCQUFBO0VBQ0Esa0JBQUE7QUNIRjtBREtFO0VBQ0UsV0FBQTtFQUNBLGtCQUFBO0VBQ0EsV0FBQTtFQUNBLFNBQUE7RUFDQSxVQUFBO0VBQ0Esb0RBQUE7QUNISjtBRE9BO0VBQ0UscUNBQUE7QUNMRjtBRE9FO0VBQ0UsZ0NBQUE7RUFDQSwrQkFBQTtBQ0xKO0FEU0E7RUFDRSxrQkFBQTtBQ1BGO0FEVUE7RUFDRSxvQ0FBQTtFQUNBLGVBQUE7RUFDQSxnQkFBQTtBQ1JGO0FEV0E7RUFDRSxhQUFBO0VBQ0EsbUJBQUE7RUFDQSxlQUFBO0VBQ0EsUUFBQTtBQ1RGO0FES0E7RUFPSSxXQUFBO0VBQ0EsWUFBQTtBQ1RKO0FEYUE7RUFDRSxhQUFBO0VBQ0EsdUJBQUE7RUFDQSxtQkFBQTtBQ1hGO0FEUUE7RUFNSSxXQUFBO0VBQ0EsWUFBQTtFQUNBLGVBQUE7RUFDQSxZQUFBO0VBQ0EsZ0JBQUE7RUFDQSxTQUFBO0FDWEoiLCJmaWxlIjoiQ29tcGFyaXNvblRhYmxlRWxlbWVudC5tb2R1bGUubGVzcyJ9 */";
var tableStyles = {"ccv2container":"cc_ccv2container_4099316779","ccv2AlertContainer":"cc_ccv2AlertContainer_4099316779","providerAlias":"cc_providerAlias_4099316779","providerHighlighted":"cc_providerHighlighted_4099316779","tbody":"cc_tbody_4099316779","recipientFeesHeader":"cc_recipientFeesHeader_4099316779","recipientFees":"cc_recipientFees_4099316779","sublabel":"cc_sublabel_4099316779","v2logoContainer":"cc_v2logoContainer_4099316779"};
styleInject(css_248z);

const HIGHLIGHTED_CLASS = tableStyles.providerHighlighted;
const highlightedAlias = 'wise';
const ComparisonTableElement = ({ quotes, midMarketRate, exchangeRateEquationIsTarget, providersWithDisclaimers, }) => {
    const { locale } = useIntl();
    const renderedProviders = quotes.slice(0, 4);
    return (jsxs("table", Object.assign({ className: tableStyles.ccv2container }, { children: [jsx("thead", { children: jsxs("tr", { children: [jsx("th", {}), renderedProviders.map((quote) => {
                            var _a;
                            return (jsxs("th", Object.assign({ className: clsx(tableStyles.providerAlias, {
                                    [HIGHLIGHTED_CLASS]: quote.provider.alias === highlightedAlias,
                                }) }, { children: [jsx(ProviderLogo, { logo: quote.provider.logoCircleUrl || quote.provider.logoUrl, altText: quote.provider.logoAltText, isPartner: quote.provider.partner, alias: quote.provider.alias, styles: {
                                            logoContainer: tableStyles.v2logoContainer,
                                        } }), jsxs("div", Object.assign({ className: "d-flex justify-content-center" }, { children: [jsx("div", Object.assign({ className: clsx('body-1', tableStyles.providerName) }, { children: quote.provider.name })), (_a = providersWithDisclaimers === null || providersWithDisclaimers === void 0 ? void 0 : providersWithDisclaimers.find((provider) => provider.alias === quote.provider.alias)) === null || _a === void 0 ? void 0 : _a.disclaimer] }))] }), quote.provider.alias));
                        })] }) }), jsxs("tbody", Object.assign({ className: tableStyles.tbody }, { children: [jsx(ProviderRow, { label: jsxs("div", { children: [jsx("p", Object.assign({ className: tableStyles.recipientFeesHeader }, { children: jsx(FormattedMessage, { id: "cthv2-header-recipient-gets" }) })), jsx("span", Object.assign({ className: tableStyles.recipientFees }, { children: jsx(FormattedMessage, { id: "cthv2-header-total-after-fees" }) }))] }), quotes: renderedProviders, getValue: (quote) => formatMoney(quote.receivedAmount.value, quote.receivedAmount.currency), cheapestProviderAlias: highlightedAlias, highlightClassName: HIGHLIGHTED_CLASS, bold: true }), jsx(ProviderRow, { label: jsx(FormattedMessage, { id: "cthv2-row-info-popover-title" }), quotes: renderedProviders, getValue: (quote) => formatMoney(getCalculations(quote, { locale, midMarketRate }).exchangeRateMarkup, quote.sendAmount.currency), getTooltip: (quote) => highlightedAlias === quote.provider.alias ? (jsx(MidMarketRateInfo, { midMarketRate: midMarketRate })) : (jsx(ExchangeRateInfo, { providerName: quote.provider.name, exchangeRate: quote.rate, midMarketRate: midMarketRate, sourceCurrency: quote.sourceCurrency, targetCurrency: quote.targetCurrency, sendMoneyValue: quote.sendAmount.value })), cheapestProviderAlias: highlightedAlias, highlightClassName: HIGHLIGHTED_CLASS }), jsx(ProviderRow, { label: jsxs("div", { children: [jsx("p", Object.assign({ className: tableStyles.recipientFeesHeader }, { children: jsx(FormattedMessage, { id: "cthv2-row-info-exchange-rate" }) })), jsxs("div", Object.assign({ className: clsx('text-muted', tableStyles.sublabel) }, { children: [jsxs("span", { children: ["(1", ' ', exchangeRateEquationIsTarget
                                                    ? quotes[0].targetCurrency
                                                    : quotes[0].sourceCurrency] }), jsx(ArrowRight, {}), jsxs("span", { children: [exchangeRateEquationIsTarget
                                                    ? quotes[0].sourceCurrency
                                                    : quotes[0].targetCurrency, ")"] })] }))] }), quotes: renderedProviders, getValue: (quote) => getCalculations(quote, { locale, midMarketRate }).formattedExchangeRateEquation
                            .calculationInDecimal, cheapestProviderAlias: highlightedAlias, highlightClassName: HIGHLIGHTED_CLASS }), jsx(ProviderRow, { label: jsx(FormattedMessage, { id: "cthv2-row-info-transfer-fee" }), quotes: renderedProviders, getValue: (quote) => { var _a; return formatMoney(((_a = quote.fee) === null || _a === void 0 ? void 0 : _a.value) || 0, quote.sendAmount.currency); }, cheapestProviderAlias: highlightedAlias, highlightClassName: HIGHLIGHTED_CLASS }), jsx(ProviderRow, { label: jsx(FormattedMessage, { id: "cthv2-row-info-transfer-cost" }), quotes: renderedProviders, getValue: (quote) => formatMoney(getCalculations(quote, { locale, midMarketRate }).costOfTransfer, quote.sendAmount.currency), cheapestProviderAlias: highlightedAlias, highlightClassName: HIGHLIGHTED_CLASS })] }))] })));
};

const Fallback = () => {
    const { formatMessage } = useIntl();
    return (jsxs(Fragment, { children: [jsx("div", Object.assign({ className: tableStyles.ccv2AlertContainer }, { children: jsx(Alert, { type: "neutral", message: formatMessage({ id: 'no-comparison-for-route' }) }) })), jsxs("table", Object.assign({ className: tableStyles.ccv2container }, { children: [jsx("thead", { children: jsxs("tr", { children: [jsxs("th", Object.assign({ className: clsx(tableStyles.providerAlias, tableStyles.providerHighlighted) }, { children: [jsx(ProviderLogo, { logo: "https://dq8dwmysp7hk1.cloudfront.net/logos/wise-mark.svg", altText: "Wise", isPartner: false, alias: "Wise", styles: {
                                                logoContainer: tableStyles.v2logoContainer,
                                            } }), jsx("div", Object.assign({ className: clsx('body-1', tableStyles.providerName) }, { children: "Wise" }))] })), jsxs("th", Object.assign({ className: tableStyles.providerAlias }, { children: [jsx("div", Object.assign({ className: tableStyles.v2logoContainer }, { children: jsx(AvatarView, Object.assign({ size: 40 }, { children: jsx(Bank, {}) })) })), jsx("div", Object.assign({ className: clsx('body-1', tableStyles.providerName) }, { children: formatMessage({ id: 'competitors' }) }))] }))] }) }), jsx("tbody", Object.assign({ className: tableStyles.tbody }, { children: jsxs("tr", { children: [jsx("td", Object.assign({ className: clsx(rowStyles.entry, tableStyles.providerHighlighted) }, { children: jsx("div", Object.assign({ className: rowStyles.fallback }, { children: jsx("p", Object.assign({ className: "np-text-body-large" }, { children: formatMessage({ id: 'wise-mid-market-fallback' }) })) })) })), jsx("td", Object.assign({ className: rowStyles.entry }, { children: jsx("div", Object.assign({ className: rowStyles.fallback }, { children: jsx("p", Object.assign({ className: "np-text-body-large" }, { children: formatMessage({ id: 'competitors-mid-market-fallback' }) })) })) }))] }) }))] }))] }));
};

const isQuoteWise = ({ provider }) => provider.alias === 'wise';
const ComparisonTableV2 = ({ comparisonResponse, excludePartners = true, disclaimerContent, routes, currencies, onChange, footerContent, loading = false, trackEvent = () => {
    /* do nothing. */
}, }) => {
    var _a, _b;
    const { locale } = useIntl();
    const baseQuotes = transformComparisonV4Response(comparisonResponse, excludePartners);
    const sortedQuotes = baseQuotes.sort((q1, q2) => { var _a, _b; return (((_a = q2 === null || q2 === void 0 ? void 0 : q2.receivedAmount) === null || _a === void 0 ? void 0 : _a.value) || 0) - (((_b = q1 === null || q1 === void 0 ? void 0 : q1.receivedAmount) === null || _b === void 0 ? void 0 : _b.value) || 0); });
    const wiseQuote = baseQuotes.find(isQuoteWise);
    const wiseQuoteIdx = sortedQuotes.findIndex(isQuoteWise);
    const finalQuotes = wiseQuoteIdx > 3 ? sortedQuotes.splice(3, 0, wiseQuote) : sortedQuotes;
    const midMarketRate = (wiseQuote === null || wiseQuote === void 0 ? void 0 : wiseQuote.rate) || 1;
    const footertUrl = createUrl(generateUrl(locale, `compare?sendAmount=${comparisonResponse === null || comparisonResponse === void 0 ? void 0 : comparisonResponse.amount}&sourceCurrency=${comparisonResponse === null || comparisonResponse === void 0 ? void 0 : comparisonResponse.sourceCurrency}&targetCurrency=${comparisonResponse === null || comparisonResponse === void 0 ? void 0 : comparisonResponse.targetCurrency}`, AvailablePages.COMPARISON_HOMEPAGE));
    const trackingData = {
        comparisonResponse,
        componentType: Table.ComparisonV2,
        excludePartners: excludePartners,
        midMarketRate,
    };
    const noData = finalQuotes.length === 0;
    const onlyWise = finalQuotes.length === 1;
    const shouldShowFallback = !loading && (noData || onlyWise);
    const exchangeRateEquationIsTarget = noData
        ? false
        : getCalculations(wiseQuote, { locale, midMarketRate }).formattedExchangeRateEquation
            .reference === 'target';
    const PROVIDERS_WITH_DISCLAIMERS = [REVOLUT_WITH_DISCLAIMER];
    return (jsx(ComparisonTableHeroV2TableTrackingContextProvider, Object.assign({ trackEvent: trackEvent, trackingData: trackingData }, { children: jsxs("div", Object.assign({ className: clsx('np-theme-personal', styles$1.themeWrapper) }, { children: [jsxs("div", Object.assign({ className: styles$1.ccv2wrapper }, { children: [jsx(ComparisonInputs, { routes: routes, currencies: currencies, amount: comparisonResponse.amount, sourceCurrencyCode: comparisonResponse.sourceCurrency, targetCurrencyCode: comparisonResponse.targetCurrency, onChange: onChange }), loading ? (jsx("div", Object.assign({ className: styles$1.loadingWrapper }, { children: jsx(Loader, { size: "xl" }) }))) : shouldShowFallback ? (jsx(Fallback, {})) : (jsx(ComparisonTableElement, { quotes: finalQuotes, midMarketRate: midMarketRate, exchangeRateEquationIsTarget: exchangeRateEquationIsTarget, providersWithDisclaimers: PROVIDERS_WITH_DISCLAIMERS })), !shouldShowFallback && (jsx("div", Object.assign({ className: styles$1.footer }, { children: footerContent || (jsx(Link, Object.assign({ href: footertUrl, onClick: () => {
                                    trackClickToSeeAvailableComparison(comparisonResponse === null || comparisonResponse === void 0 ? void 0 : comparisonResponse.amount, trackingData, trackEvent);
                                } }, { children: jsx(FormattedMessage, { id: "cthv2-footer-more-providers" }) }))) })))] })), !shouldShowFallback && ((_b = (_a = baseQuotes === null || baseQuotes === void 0 ? void 0 : baseQuotes[0]) === null || _a === void 0 ? void 0 : _a.provider) === null || _b === void 0 ? void 0 : _b.alias) !== 'wise' && (jsx("div", Object.assign({ className: "row d-flex justify-content-center" }, { children: jsx("div", Object.assign({ className: "col-md-8" }, { children: jsx("p", Object.assign({ className: "text-xs-center np-text-body-default" }, { children: jsx(FormattedMessage, { id: "not-cheapest-disclaimer" }) })) })) }))), disclaimerContent] })) })));
};

export { ComparisonTableV2 };
//# sourceMappingURL=index.js.map
