import { formatMoney } from '@transferwise/formatting';
import PropTypes from 'prop-types';
import React, { useState } from 'react';
import { InView } from 'react-intersection-observer';
import { useIntl, FormattedMessage } from 'react-intl';
import { T as TransferFee, C as ConditionalWrapper } from './TransferFee-05335190.js';
import { m as getTrackingTriggerIndex, T as Table, l as trackTableViewed } from './tracking-7717c145.js';
import { s as styleInject } from './style-inject.es-1f59c1d0.js';
import { D as DeliveryEstimation } from './DeliveryEstimation-28e7c50f.js';
import { E as ExchangeRateIndicator } from './ExchangeRateIndicator-7977c22d.js';
import { c as createClassNamesFromStyles } from './createClassNamesFromStyles-24575b97.js';
import { g as getCurrencyForCode } from './currencies-1f1f52ab.js';
import { Button, Size, ControlType, Priority } from '@transferwise/components';
import { CheckCircle } from '@transferwise/icons';
import { c as createUrl } from './createUrl-71d09e7b.js';
import { c as convertDurationToMaximumUnits, S as SECONDS, M as MINUTES, H as HOURS, D as DAYS } from './deliveryEstimationFormatter-39a5e91c.js';

var css_248z = ".cc_comparison-widget_3296223122 a,\n.cc_comparison-table_3296223122 a {\n  border-bottom: none;\n  color: var(--color-content-link);\n}\n.cc_comparison-widget_3296223122 ul,\n.cc_comparison-table_3296223122 ul {\n  margin: 0;\n  padding: 8px;\n}\n.cc_comparison-widget_3296223122 ul,\n.cc_comparison-table_3296223122 ul,\n.cc_comparison-widget_3296223122 ol,\n.cc_comparison-table_3296223122 ol {\n  margin: 0;\n}\n.cc_comparison-widget_3296223122 ul li,\n.cc_comparison-table_3296223122 ul li {\n  margin: 0;\n  list-style-type: none;\n}\n.cc_comparison-widget_3296223122 ul li::before,\n.cc_comparison-table_3296223122 ul li::before {\n  content: none;\n}\n.cc_comparison-widget_3296223122 ul ul,\n.cc_comparison-table_3296223122 ul ul,\n.cc_comparison-widget_3296223122 ol ul,\n.cc_comparison-table_3296223122 ol ul,\n.cc_comparison-widget_3296223122 ul ol,\n.cc_comparison-table_3296223122 ul ol,\n.cc_comparison-widget_3296223122 ol ol,\n.cc_comparison-table_3296223122 ol ol {\n  margin: 0;\n}\n.cc_comparison-widget_3296223122 p,\n.cc_comparison-table_3296223122 p {\n  margin: 0 0 var(--line-height-24);\n}\n.cc_comparison-widget_3296223122 b,\n.cc_comparison-table_3296223122 b {\n  color: var(--color-content-primary);\n  font-weight: var(--font-weight-semi-bold);\n  letter-spacing: 0;\n}\n.cc_comparison-widget_3296223122 table.cc_table-plain_3296223122,\n.cc_comparison-table_3296223122 table.cc_table-plain_3296223122 {\n  display: table;\n  width: 100%;\n}\nhtml {\n  -ms-text-size-adjust: 100%;\n  -webkit-text-size-adjust: 100%;\n}\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  margin: 0;\n  font: inherit;\n}\nbutton,\nhtml input[type=\"button\"],\ninput[type=\"reset\"],\ninput[type=\"submit\"] {\n  -webkit-appearance: button;\n  cursor: pointer;\n}\nbutton {\n  overflow: visible;\n}\nbutton,\nselect {\n  text-transform: none;\n}\nth {\n  text-align: left;\n}\nsup {\n  top: -0.5em;\n}\nsub,\nsup {\n  position: relative;\n  font-size: 75%;\n  line-height: 0;\n  vertical-align: baseline;\n}\n.cc_alert_3296223122 {\n  margin-bottom: var(--space-small);\n  padding: var(--space-small);\n  border-radius: calc(var(--size-4) - 1px);\n  background-color: var(--color-white);\n  color: var(--color-content-secondary);\n}\n@media (min-width: 576px) {\n  .cc_alert_3296223122 {\n    margin-bottom: var(--size-24);\n    padding: var(--size-24);\n  }\n}\n@media (min-width: 992px) {\n  .cc_alert_3296223122 {\n    margin-bottom: var(--size-32);\n    padding: var(--size-32);\n  }\n}\n.cc_alert-info_3296223122 {\n  background-color: var(--color-border-neutral);\n  color: var(--color-content-secondary);\n}\n.cc_form-group_3296223122 {\n  margin-bottom: var(--size-24);\n}\n.cc_form-group-lg_3296223122 {\n  position: relative;\n}\n.cc_form-group-lg_3296223122 .cc_control-label_3296223122 {\n  position: absolute;\n  z-index: 1;\n  top: 12px;\n  left: 14px;\n  margin-bottom: 0;\n}\n.cc_form-group-lg_3296223122 .cc_input-lg_3296223122 {\n  height: var(--size-72);\n  padding: var(--size-12) var(--size-16);\n  border-radius: calc(var(--size-4) - 1px);\n  font-size: var(--font-size-22);\n  line-height: var(--line-height-32);\n}\n.cc_form-group-lg_3296223122 .cc_input-group-lg_3296223122 > .cc_form-control_3296223122,\n.cc_form-group-lg_3296223122 .cc_input-group-lg_3296223122 > .cc_input-group-addon_3296223122 {\n  height: var(--size-72);\n  padding: calc(var(--size-4) + var(--size-24)) var(--size-12) var(--size-4);\n  font-size: var(--font-size-22);\n  line-height: var(--line-height-32);\n}\n.cc_form-control_3296223122 {\n  display: block;\n  width: 100%;\n  height: var(--line-height-48);\n  padding: var(--size-12) var(--size-16);\n  transition: border-color ease-in-out 0.15s;\n  border: 1px solid var(--color-interactive-secondary);\n  border-radius: var(--radius-small);\n  background-clip: padding-box;\n  background-image: none;\n  color: var(--color-content-primary);\n  font-size: var(--font-size-16);\n  font-weight: var(--font-weight-regular);\n  line-height: var(--line-height-24);\n}\n.cc_form-control_3296223122:focus {\n  border-color: var(--color-interactive-primary);\n  outline: 0;\n}\n.cc_label_3296223122 {\n  display: inline-block;\n  max-width: 100%;\n}\n.cc_label_3296223122,\n.cc_secondary_3296223122 {\n  transition: color ease-in-out 0.15s;\n  font-size: var(--font-size-14);\n  line-height: 20px;\n}\n.cc_container_3296223122 {\n  margin-right: auto;\n  margin-left: auto;\n  padding-right: var(--space-small);\n  padding-left: var(--space-small);\n}\n@media (min-width: 576px) {\n  .cc_container_3296223122 {\n    padding-right: var(--size-24);\n    padding-left: var(--size-24);\n  }\n}\n@media (min-width: 992px) {\n  .cc_container_3296223122 {\n    padding-right: var(--size-32);\n    padding-left: var(--size-32);\n  }\n}\n@media (min-width: 1200px) {\n  .cc_container_3296223122 {\n    max-width: 1164px;\n  }\n}\n[class*='col-'] {\n  position: relative;\n  min-height: 1px;\n  padding-right: 12px;\n  padding-left: 12px;\n}\n@media (max-width: 575px) {\n  [class*='col-'] {\n    padding-right: 8px;\n    padding-left: 8px;\n  }\n}\n[class*='col-xs'] {\n  float: left;\n}\n.cc_col-xs-12_3296223122 {\n  width: 100%;\n}\n@media (min-width: 576px) {\n  .cc_col-sm-10_3296223122 {\n    width: 83.33333333%;\n  }\n}\n@media (min-width: 576px) {\n  .cc_col-sm-offset-1_3296223122 {\n    margin-left: 8.33333333%;\n  }\n}\n.cc_clearfix__3296223122::before,\n.cc_form-horizontal_3296223122 .cc_form-group_3296223122::before,\n.cc_btn-group-vertical_3296223122 > .cc_btn-group_3296223122::before,\n.cc_container_3296223122::before,\n.cc_container-fluid_3296223122::before,\n.cc_row_3296223122::before,\n.cc_dl-horizontal_3296223122 dd::before,\n.cc_clearfix__3296223122::after,\n.cc_form-horizontal_3296223122 .cc_form-group_3296223122::after,\n.cc_btn-group-vertical_3296223122 > .cc_btn-group_3296223122::after,\n.cc_container_3296223122::after,\n.cc_container-fluid_3296223122::after,\n.cc_row_3296223122::after,\n.cc_dl-horizontal_3296223122 dd::after {\n  content: ' ';\n  display: table;\n}\n.cc_clearfix__3296223122::after,\n.cc_form-horizontal_3296223122 .cc_form-group_3296223122::after,\n.cc_btn-group-vertical_3296223122 > .cc_btn-group_3296223122::after,\n.cc_container_3296223122::after,\n.cc_container-fluid_3296223122::after,\n.cc_row_3296223122::after,\n.cc_dl-horizontal_3296223122 dd::after {\n  clear: both;\n}\n.cc_loader_3296223122 {\n  display: flex;\n  justify-content: center;\n}\n.cc_sr-only_3296223122 {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  padding: 0;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n.cc_anchor_3296223122 {\n  border: 0;\n  background: transparent;\n  color: var(--color-content-primary);\n  font-weight: var(--font-weight-semi-bold);\n  letter-spacing: 0;\n  text-decoration: underline;\n}\n.cc_anchor_3296223122:focus,\n.cc_anchor_3296223122:hover {\n  background: transparent;\n  color: var(--color-content-link-hover);\n  text-decoration: underline;\n}\n.cc_anchor_3296223122:active {\n  background: transparent;\n  color: var(--color-content-link-active);\n}\n.cc_anchor--dark_3296223122 {\n  color: var(--color-content-link);\n}\n.cc_img-responsive_3296223122 {\n  max-width: 100%;\n}\n.cc_text-xs-left_3296223122 {\n  text-align: left;\n}\n.cc_text-xs-center_3296223122 {\n  text-align: center;\n}\n@media (min-width: 768px) {\n  .cc_text-md-left_3296223122 {\n    text-align: left;\n  }\n}\n.cc_text-success_3296223122 {\n  color: var(--color-sentiment-positive);\n}\n.cc_text-content-secondary_3296223122 {\n  color: var(--color-content-secondary);\n}\n.cc_small_3296223122 {\n  font-size: var(--font-size-14);\n  line-height: var(--line-height-24);\n}\n.cc_strong_3296223122 {\n  font-weight: var(--font-weight-semi-bold);\n  letter-spacing: 0;\n}\n.cc_h3_3296223122,\n.cc_h4_3296223122 {\n  margin-top: 0;\n  margin-bottom: 0;\n  color: var(--color-content-primary);\n  font-family: 'Inter', Helvetica, Arial, sans-serif;\n  font-weight: var(--font-weight-semi-bold);\n  letter-spacing: 0;\n  line-height: var(--line-height-title);\n  text-transform: none;\n}\n.cc_h3_3296223122 .cc_small_3296223122,\n.cc_h4_3296223122 .cc_small_3296223122 {\n  font-weight: 300;\n  line-height: 1;\n}\n.cc_h3_3296223122 {\n  font-size: var(--font-size-16);\n  line-height: var(--line-height-title);\n}\n.cc_h4_3296223122 {\n  font-size: var(--font-size-14);\n  line-height: var(--line-height-title);\n}\n@media (min-width: 768px) {\n  .cc_h3_3296223122 {\n    margin-bottom: 2px;\n    font-size: var(--font-size-20);\n    line-height: var(--line-height-title);\n  }\n  .cc_h4_3296223122 {\n    font-size: var(--font-size-16);\n    line-height: var(--line-height-title);\n  }\n}\n.cc_font-weight-bold_3296223122 {\n  font-weight: var(--font-weight-semi-bold) !important;\n}\n.cc_text-xs-nowrap_3296223122 {\n  white-space: nowrap;\n}\ntable,\n.cc_table_3296223122 {\n  display: table;\n  width: 100%;\n  max-width: 100%;\n  margin-bottom: var(--line-height-24);\n  border-spacing: 0;\n  border-collapse: separate;\n}\n.cc_table_3296223122 > thead,\n.cc_table_3296223122 > tfoot {\n  font-size: var(--font-size-14);\n}\n.cc_table-responsive_3296223122 {\n  min-height: 0.01%;\n  overflow-x: auto;\n}\n.cc_table-condensed_3296223122 th,\n.cc_table-condensed_3296223122 td {\n  padding: 8px;\n}\n.cc_form-group_3296223122 {\n  position: relative;\n  font-size: 14px;\n}\n.cc_input-group-addon_3296223122 {\n  display: table-cell;\n  width: 1%;\n  padding: var(--size-12) var(--size-16);\n  transition: border-color ease-in-out 0.15s;\n  font-size: var(--font-size-16);\n  line-height: var(--line-height-24);\n  text-align: center;\n  vertical-align: middle;\n  white-space: nowrap;\n}\n.cc_input-group-addon_3296223122.cc_input-lg_3296223122 {\n  padding: var(--size-12) var(--size-16) !important;\n}\n.cc_input-group-addon_3296223122 .cc_tw-icon_3296223122 {\n  display: inline-block;\n  margin-top: -2px;\n  margin-right: -5px;\n  margin-left: -4px;\n  font-size: 24px;\n  vertical-align: middle;\n}\n.cc_input-group_3296223122 {\n  display: table;\n  position: relative;\n  width: 100%;\n  border-collapse: separate;\n}\n.cc_input-group_3296223122 .cc_input-group-btn_3296223122,\n.cc_input-group_3296223122 .cc_input-group-addon_3296223122,\n.cc_input-group_3296223122 .cc_form-control_3296223122 {\n  border-radius: 0;\n  background-color: unset;\n}\n.cc_input-group_3296223122 .cc_input-group-btn_3296223122:first-child,\n.cc_input-group_3296223122 .cc_input-group-addon_3296223122:first-child,\n.cc_input-group_3296223122 .cc_form-control_3296223122:first-child {\n  border-top-left-radius: calc(var(--size-4) - 1px);\n  border-bottom-left-radius: calc(var(--size-4) - 1px);\n}\n.cc_input-group_3296223122 .cc_input-group-btn_3296223122:last-child,\n.cc_input-group_3296223122 .cc_input-group-addon_3296223122:last-child,\n.cc_input-group_3296223122 .cc_form-control_3296223122:last-child {\n  border-right-width: 1px;\n  border-top-right-radius: calc(var(--size-4) - 1px);\n  border-bottom-right-radius: calc(var(--size-4) - 1px);\n}\n.cc_input-group_3296223122 .cc_input-group-btn_3296223122:not(:first-child),\n.cc_input-group_3296223122 .cc_input-group-addon_3296223122:not(:first-child),\n.cc_input-group_3296223122 .cc_form-control_3296223122:not(:first-child) {\n  border-left: 0;\n}\n.cc_input-group_3296223122 .cc_input-group-btn_3296223122:not(:last-child),\n.cc_input-group_3296223122 .cc_input-group-addon_3296223122:not(:last-child),\n.cc_input-group_3296223122 .cc_form-control_3296223122:not(:last-child) {\n  border-right: 0;\n}\n.cc_focus_3296223122 .cc_input-group_3296223122 .cc_form-control_3296223122,\n.cc_has-focus_3296223122 .cc_input-group_3296223122 .cc_form-control_3296223122,\n.cc_input-group_3296223122:focus-within .cc_form-control_3296223122,\n.cc_focus_3296223122 .cc_input-group_3296223122 .cc_input-group-addon_3296223122,\n.cc_has-focus_3296223122 .cc_input-group_3296223122 .cc_input-group-addon_3296223122,\n.cc_input-group_3296223122:focus-within .cc_input-group-addon_3296223122 {\n  border: 0;\n}\n.cc_input-group-lg_3296223122 > .cc_form-control_3296223122 {\n  margin-bottom: 0;\n}\n.cc_form-control_3296223122 {\n  box-shadow: none;\n}\n.cc_input-group-addon_3296223122 + .cc_form-control_3296223122 {\n  padding-left: 0;\n}\n.cc_input-group-btn_3296223122 {\n  display: table-cell;\n  width: 1%;\n  vertical-align: middle;\n  white-space: nowrap;\n}\n.cc_dot-success_3296223122 {\n  display: flex;\n  order: 1;\n  margin-left: var(--size-4);\n}\n.cc_dot-success_3296223122::before {\n  content: '';\n  width: var(--size-8);\n  height: var(--size-8);\n  margin-top: -2px;\n  border-radius: 100%;\n  background: var(--color-sentiment-positive);\n}\n.cc_dot-fail_3296223122 {\n  display: flex;\n  order: 1;\n  margin-left: var(--size-4);\n}\n.cc_dot-fail_3296223122::before {\n  content: '';\n  width: var(--size-8);\n  height: var(--size-8);\n  margin-top: -2px;\n  border-radius: 100%;\n  background: var(--color-sentiment-negative);\n}\n.cc_d-flex_3296223122 {\n  display: flex !important;\n}\n@media (min-width: 768px) {\n  .cc_d-flex-md_3296223122 {\n    display: flex !important;\n  }\n}\n.cc_flex-center_3296223122 {\n  align-items: center;\n  justify-content: center;\n}\n@media (min-width: 768px) {\n  .cc_flex-center-md_3296223122 {\n    align-items: center;\n    justify-content: center;\n  }\n}\n.cc_flex-left_3296223122 {\n  align-items: flex-start;\n  justify-content: flex-start;\n}\n@media (min-width: 768px) {\n  .cc_flex-left-md_3296223122 {\n    align-items: flex-start;\n    justify-content: flex-start;\n  }\n}\n.cc_flex-column_3296223122 {\n  flex-direction: column;\n}\n@media (min-width: 768px) {\n  .cc_flex-row-md_3296223122 {\n    flex-direction: row;\n  }\n}\n.cc_flex-grow_3296223122 {\n  flex: 1 0 auto;\n}\n.cc_flex-shrink_3296223122 {\n  flex: 0 1 auto;\n}\n.cc_justify-content-center_3296223122 {\n  justify-content: center;\n}\n.cc_justify-content-end_3296223122 {\n  justify-content: flex-end;\n}\n.cc_align-items-center_3296223122 {\n  align-items: center;\n}\n.cc_align-items-end_3296223122 {\n  align-items: flex-end;\n}\n@media (min-width: 768px) {\n  .cc_m-x-md-4_3296223122 {\n    margin-right: var(--size-32) !important;\n    margin-left: var(--size-32) !important;\n  }\n}\n.cc_m-t-2_3296223122 {\n  margin-top: var(--size-16) !important;\n}\n.cc_m-t-3_3296223122 {\n  margin-top: var(--size-24) !important;\n}\n.cc_m-t-5_3296223122 {\n  margin-top: var(--size-24) !important;\n}\n.cc_m-r-1_3296223122 {\n  margin-right: var(--size-8) !important;\n}\n.cc_m-r-2_3296223122 {\n  margin-right: var(--size-16) !important;\n}\n.cc_m-b-1_3296223122 {\n  margin-bottom: var(--size-8) !important;\n}\n.cc_m-b-3_3296223122 {\n  margin-bottom: var(--size-8) !important;\n}\n.cc_m-b-4_3296223122 {\n  margin-bottom: var(--size-32) !important;\n}\n.cc_m-b-5_3296223122 {\n  margin-bottom: var(--size-40) !important;\n}\n@media (min-width: 768px) {\n  .cc_m-b-5-md_3296223122 {\n    margin-bottom: var(--size-40) !important;\n  }\n}\n@media (min-width: 768px) {\n  .cc_m-b-0-md_3296223122 {\n    margin-bottom: 0 !important;\n  }\n}\n.cc_m-l-1_3296223122 {\n  margin-left: var(--size-8) !important;\n}\n.cc_p-t-3_3296223122 {\n  padding-top: var(--size-24);\n}\n.cc_p-t-4_3296223122 {\n  padding-top: var(--size-32);\n}\n.cc_p-t-5_3296223122 {\n  padding-top: var(--size-40);\n}\n.cc_p-r-0_3296223122 {\n  padding-right: 0;\n}\n.cc_p-b-4_3296223122 {\n  padding-bottom: var(--size-32);\n}\n.cc_p-b-5_3296223122 {\n  padding-bottom: var(--size-40);\n}\n.cc_p-b-9_3296223122 {\n  padding-bottom: calc(var(--size-8) * 9);\n}\n.cc_size-1-of-1_3296223122 {\n  width: 100%;\n}\n.cc_text-no-wrap_3296223122 {\n  white-space: nowrap;\n}\n@media (min-width: 768px) {\n  .cc_only-mobile_3296223122 {\n    display: none;\n  }\n}\n.cc_border-radius-a_3296223122 {\n  border-radius: var(--size-40);\n}\n.cc_border-radius-t_3296223122 {\n  border-radius: var(--size-40) var(--size-40) 0 0;\n}\n.cc_border-radius-t-l_3296223122 {\n  border-radius: var(--size-40) var(--size-40) 0 0;\n}\n.cc_border-radius-t-r_3296223122 {\n  border-radius: var(--size-40) var(--size-40) 0 0;\n}\n.cc_border-radius-b_3296223122 {\n  border-radius: 0 0 var(--size-40) var(--size-40);\n}\n.cc_border-radius-b-l_3296223122 {\n  border-radius: 0 0 var(--size-40) var(--size-40);\n}\n.cc_border-radius-b-r_3296223122 {\n  border-radius: 0 0 var(--size-40) var(--size-40);\n}\n.cc_comparison-widget_3296223122,\n.cc_comparison-table_3296223122 {\n  position: relative;\n  min-width: calc(var(--size-8) * 37);\n  max-width: 976px;\n  margin: 0 12px;\n  border-radius: 3px;\n  color: var(--color-content-link);\n  font-family: var(--font-family-regular);\n  font-size: calc(var(--font-size-16) - 1px);\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  letter-spacing: 0.016em;\n  line-height: var(--line-height-24);\n}\n.cc_comparison-widget--wide_3296223122,\n.cc_comparison-table--wide_3296223122 {\n  max-width: 1128px;\n}\n.cc_comparison-widget_3296223122 *,\n.cc_comparison-table_3296223122 * {\n  box-sizing: border-box;\n}\n@media (min-width: 768px) {\n  .cc_comparison-widget_3296223122,\n  .cc_comparison-table_3296223122 {\n    min-width: calc(var(--size-8) * 66);\n    margin: auto;\n    font-size: var(--font-size-16);\n  }\n}\n.cc_card_3296223122 {\n  border-radius: var(--size-40) var(--size-40) 0% 0%;\n  background: var(--color-background-elevated);\n  box-shadow: none;\n}\n.cc_card-table_3296223122 {\n  border-radius: 0% 0% var(--size-40) var(--size-40);\n  background-color: transparent;\n  box-shadow: none;\n}\n.cc_comparison-widget_3296223122 [class*='comparison-table'] {\n  margin: 0;\n}\n.cc_comparison-widget_3296223122 [class*='card-table'] {\n  clip-path: polygon(-30% -2%, 0% -2%, 0% 0%, 100% 0%, 100% -2%, 130% -2%, 130% 130%, -30% 130%);\n}\n.cc_card-header_3296223122 {\n  padding: var(--size-40);\n}\n@media (max-width: 767px) {\n  .cc_card-header_3296223122 {\n    padding: var(--size-40) var(--size-16);\n  }\n}\n.cc_card-header_3296223122 a {\n  text-decoration: none;\n}\n.cc_table-plain_3296223122 {\n  width: 100%;\n  overflow: hidden;\n  border-collapse: collapse;\n  border-radius: var(--size-40);\n}\n.cc_table-plain__caption_3296223122 {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  padding: 0;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n.cc_table-plain_3296223122 .cc_tfoot_3296223122 {\n  display: table-caption;\n  caption-side: bottom;\n  border-top: 1px solid #e2e6e8;\n}\n.cc_table-plain_3296223122 .cc_tfoot_3296223122 .cc_alert_3296223122 {\n  margin-bottom: 0;\n  background-color: var(--color-white);\n  font-size: var(--font-size-14);\n}\n.cc_table-plain_3296223122 .cc_tfoot_3296223122 .cc_alert--dark_3296223122 {\n  background-color: var(--color-background-elevated);\n}\n.cc_table-plain_3296223122 .cc_tfoot_3296223122 > tr {\n  display: inline-table;\n  width: 100%;\n  text-align: center;\n}\n.cc_table-plain_3296223122 .cc_tfoot_3296223122 > tr > td {\n  border-radius: 0% 0% var(--size-40) var(--size-40);\n}\n.cc_table-plain_3296223122 .cc_tfoot--dark_3296223122 {\n  border-top-color: var(--color-border-neutral);\n}\n@media (max-width: 767px) {\n  .cc_table-plain_3296223122 {\n    border-top: 1px solid var(--color-white);\n  }\n  .cc_table-plain_3296223122 .cc_thead_3296223122 {\n    display: none;\n  }\n}\n.cc_table-plain__row_3296223122 {\n  background-color: #f3f5f199;\n}\n@media (min-width: 768px) {\n  .cc_table-plain__row_3296223122 {\n    height: 80px;\n  }\n}\n@media (max-width: 767px) {\n  .cc_table-plain__row_3296223122 {\n    display: flex;\n    position: relative;\n    flex-direction: column;\n    padding-top: var(--size-16);\n    padding-bottom: var(--size-16);\n  }\n  .cc_table-plain__row_3296223122::before {\n    content: '';\n    position: absolute;\n    right: var(--size-32);\n    bottom: 0;\n    left: var(--size-32);\n    width: calc(100% - calc(var(--size-8) * 8));\n    height: 1px;\n    background: var(--color-border-neutral);\n  }\n  .cc_table-plain__row_3296223122:last-child::before {\n    content: none;\n  }\n}\n@media (min-width: 992px) {\n  .cc_table-plain__row_3296223122:last-of-type .cc_featured--last-cell_3296223122::before {\n    content: '';\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    width: 100%;\n    height: var(--size-8);\n    background: var(--color-background-screen);\n    clip-path: polygon(-30% 100%, 100% 100%, 100% -170%, 120% -170%, 120% 700%, -30% 700%);\n  }\n}\n.cc_table-plain__row--dark_3296223122 {\n  background-color: var(--color-background-elevated);\n}\n.cc_table-plain__th_3296223122 {\n  position: sticky;\n  z-index: 1;\n  top: 0;\n  padding: var(--size-24) var(--size-16);\n  border: 0;\n  background-color: var(--color-forest-green);\n  color: var(--color-white);\n  font-size: var(--font-size-16);\n  font-weight: var(--font-weight-semi-bold);\n  vertical-align: top;\n}\n.cc_table-plain__th_3296223122:first-child {\n  padding-left: var(--size-32);\n  border-radius: var(--size-40) 0% 0% 0%;\n  text-align: left;\n}\n.cc_table-plain__th_3296223122:last-child {\n  padding-right: var(--size-32);\n  border-radius: 0% var(--size-40) 0% 0%;\n  text-align: left;\n}\n.cc_table-plain__th--small_3296223122 {\n  display: block;\n  color: #a8afbb;\n  font-size: var(--font-size-14);\n  font-weight: normal;\n  white-space: unset;\n  hyphens: auto;\n}\n.cc_table-plain__th--dark_3296223122 {\n  background-color: var(--color-background-screen);\n}\n.cc_table-plain__cell_3296223122 {\n  position: relative;\n  padding: var(--size-8) var(--size-16);\n  border: 0;\n  border-bottom: 1px solid var(--color-border-neutral);\n  font-size: var(--font-size-14);\n  text-align: left;\n}\n.cc_table-plain__cell_3296223122:first-child {\n  padding-left: var(--size-32);\n}\n.cc_table-plain__cell_3296223122:last-child {\n  padding-right: var(--size-32);\n}\n@media (max-width: 767px) {\n  .cc_table-plain__cell_3296223122 {\n    display: flex;\n    justify-content: space-between;\n    padding-top: var(--size-4);\n    padding-right: var(--size-16);\n    padding-bottom: var(--size-4);\n    padding-left: 0;\n    border: none;\n    color: var(--color-content-secondary);\n    line-height: 16px;\n  }\n  .cc_table-plain__cell_3296223122::before {\n    content: attr(data-label);\n    padding-left: var(--size-16);\n  }\n  .cc_table-plain__cell_3296223122:first-child {\n    padding-left: var(--size-16);\n  }\n  .cc_table-plain__cell_3296223122:first-child::before {\n    content: none;\n  }\n  .cc_table-plain__cell_3296223122:last-child {\n    flex-direction: column;\n    padding-right: var(--size-16);\n  }\n  .cc_table-plain__cell_3296223122:last-child::before {\n    position: absolute;\n  }\n}\n@media (min-width: 992px) {\n  .cc_featured--th_3296223122 {\n    width: 179px;\n    padding-left: var(--size-16);\n  }\n}\n.cc_featured--last-cell_3296223122 {\n  position: relative;\n  text-align: left;\n}\ntable tbody tr:last-of-type td {\n  border-bottom: none;\n}\n.cc_flag-icon_3296223122 {\n  max-width: 30px;\n  margin-left: var(--size-8);\n}\n.cc_pricing-disclaimer_3296223122 {\n  display: inline-block;\n}\n.cc_pricing-disclaimer_3296223122 .cc_tw-icon_3296223122,\n.cc_pricing-disclaimer_3296223122 [class^='tw-icon '] {\n  display: inline;\n  width: initial;\n  height: initial;\n}\n.cc_pricing-disclaimer_3296223122 .cc_tw-alert-icon_3296223122 {\n  position: absolute;\n  right: -2px;\n  margin-top: calc(-1 * var(--size-16));\n  color: #df8700 !important;\n}\n@media (min-width: 768px) {\n  .cc_pricing-disclaimer_3296223122 .cc_tw-alert-icon_3296223122 {\n    right: 10px;\n    margin-top: 2px;\n  }\n}\n.cc_pricing-disclaimer-popover_3296223122 .cc_popover_3296223122 {\n  text-align: left;\n}\n.cc_pricing-disclaimer-popover_3296223122 .cc_popover_3296223122 .cc_popover-content_3296223122 {\n  margin: 0;\n  font-size: var(--font-size-12);\n}\n@media (min-width: 768px) {\n  .cc_pricing-disclaimer-popover_3296223122 .cc_popover_3296223122 .cc_popover-content_3296223122 {\n    font-size: var(--font-size-14);\n  }\n}\n.cc_pricing-disclaimer-popover_3296223122 .cc_popover_3296223122 .cc_popover-title_3296223122 {\n  margin-bottom: var(--size-8);\n  font-size: var(--font-size-14);\n}\n@media (min-width: 768px) {\n  .cc_pricing-disclaimer-popover_3296223122 .cc_popover_3296223122 .cc_popover-title_3296223122 {\n    font-size: var(--font-size-16);\n  }\n}\n.cc_popover-title__route_3296223122 {\n  display: inline-flex;\n  align-items: center;\n  margin-right: var(--size-8);\n}\n.cc_popover-title__route_3296223122 [class^=\"tw-icon \"] {\n  margin: 0 var(--size-8);\n}\n.cc_btn-container_3296223122 {\n  clear: both;\n}\n@media (max-width: 767px) {\n  .cc_btn-container_3296223122 {\n    display: block;\n    width: 100%;\n  }\n}\n.cc_send-with-tw-cta_provider_3296223122 {\n  text-decoration: none;\n}\n@media (max-width: 767px) {\n  .cc_send-with-tw-cta_provider_3296223122 {\n    /* stylelint-disable at-rule-no-unknown, no-eol-whitespace, declaration-empty-line-before */\n    left: var(--size-8);\n    width: 100%;\n    margin-top: var(--size-16);\n  }\n}\n.cc_send-with-tw-cta_provider_3296223122:hover,\n.cc_send-with-tw-cta_provider_3296223122:focus {\n  outline: none !important;\n  text-decoration: none !important;\n}\n.cc_table-plain__row_3296223122 .cc_featured--last-cell_3296223122 .cc_negativeDelta_3296223122::before {\n  display: none;\n}\n.cc_headingInfo_3296223122 {\n  display: block;\n  margin: 0;\n  font-size: var(--font-size-12);\n  font-weight: normal;\n}\n.cc_disclaimer-close-btn_3296223122 {\n  display: inline-flex;\n  align-items: center;\n  text-decoration: none;\n}\n.cc_disclaimer-close-btn_3296223122 .cc_close-disclaimer-icon_3296223122 {\n  display: inline-block;\n  width: initial;\n  height: initial;\n  margin-right: var(--size-12);\n  margin-left: 0;\n  padding: var(--size-8);\n  border-radius: var(--radius-full);\n  background-color: var(--color-background-neutral);\n}\n.cc_rate-description_3296223122 {\n  margin-bottom: 0;\n  font-size: 12px;\n  line-height: 18px;\n}\n.cc_rate-description--dark_3296223122 {\n  color: var(--color-content-secondary);\n}\n.cc_tw-swap-icon_3296223122 {\n  margin: var(--size-16) 0;\n  color: var(--color-interactive-primary);\n  cursor: pointer;\n}\n@media (min-width: 768px) {\n  .cc_tw-swap-icon_3296223122 {\n    margin: 0 var(--size-16);\n  }\n}\n.cc_tw-chevron_3296223122 {\n  display: inline-block;\n  transition: var(--transition-transform);\n}\n.cc_tw-chevron_3296223122.cc_right_3296223122 {\n  transform: rotate(90deg);\n}\n.cc_tw-chevron_3296223122.cc_top_3296223122 {\n  transform: rotate(0deg);\n}\n.cc_tw-chevron_3296223122.cc_left_3296223122 {\n  transform: rotate(270deg);\n}\n.cc_tw-chevron_3296223122.cc_bottom_3296223122 {\n  transform: rotate(180deg);\n}\n.cc_tw-select_3296223122 .cc_tw-icon_3296223122 {\n  display: inline-block;\n  margin-top: -2px;\n  margin-right: var(--space-8);\n  vertical-align: middle;\n}\n.cc_tw-select_3296223122 .cc_dropdown-toggle_3296223122 .cc_tw-select-chevron_3296223122 {\n  margin: 0;\n}\n.cc_tw-select_3296223122 .cc_dropdown-toggle_3296223122 > span > .cc_tw-icon_3296223122 {\n  display: inline-block;\n  position: static;\n}\n.cc_tw-select_3296223122 [class*='small'] {\n  color: #5d7079;\n  font-size: var(--font-size-14);\n  line-height: calc(var(--line-height-24) - 1px);\n}\n@media (max-width: 480px) {\n  .cc_OptionsForm__buy_3296223122 .cc_tw-select_3296223122 [class*='small'],\n  .cc_OptionsForm__pay_3296223122 .cc_tw-select_3296223122 [class*='small'] {\n    display: none;\n  }\n}\n.cc_tw-select_3296223122 [class*='m-l-1'] {\n  margin-left: var(--size-8) !important;\n}\n.cc_tw-select-filter_3296223122 {\n  padding: 0 !important;\n  border: 0;\n}\n.cc_tw-select-filter-link_3296223122:active,\n.cc_tw-select-filter-link_3296223122:hover {\n  background-color: var(--color-white) !important;\n}\n@media (max-width: 575px) {\n  .cc_dropup_3296223122 > .cc_tw-select_3296223122.cc_dropdown-menu_3296223122,\n  .cc_dropdown_3296223122 > .cc_tw-select_3296223122.cc_dropdown-menu_3296223122 {\n    transition: none !important;\n  }\n  [class^='tw-select'][class*='select-overlay'] {\n    display: block !important;\n    position: fixed;\n    z-index: 999;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    animation: cc_twSelectFadeIn_3296223122 0.2s cubic-bezier(0.6, 0.2, 0.1, 1) both;\n    background: rgba(0, 0, 0, 0.3);\n  }\n  .cc_tw-select_3296223122 .cc_tw-dropdown-item_3296223122 a {\n    text-decoration: none;\n  }\n  .cc_tw-select_3296223122.cc_dropdown-menu_3296223122 {\n    display: none;\n    position: fixed;\n    top: auto;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    width: 100% !important;\n    max-width: 100%;\n    max-height: 50vh;\n    font-family: var(--font-family-regular);\n  }\n  .cc_tw-select_3296223122.cc_dropdown-menu--open_3296223122 {\n    display: block;\n    visibility: visible;\n    overflow: auto;\n    animation: cc_twSelectFadeUp_3296223122 0.2s cubic-bezier(0.6, 0.2, 0.1, 1) both;\n    opacity: 1;\n  }\n}\n@keyframes cc_twSelectFadeIn_3296223122 {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n@keyframes cc_twSelectFadeUp_3296223122 {\n  from {\n    transform: translateY(100%);\n    opacity: 0;\n  }\n  to {\n    transform: none;\n    opacity: 1;\n  }\n}\n.cc_positiveDelta_3296223122 {\n  display: flex !important;\n  align-items: center;\n  white-space: nowrap;\n}\n.cc_positiveDelta_3296223122::before {\n  content: '';\n  width: 0;\n  height: 0;\n  margin-right: var(--size-4);\n  border-right: 5px solid transparent;\n  border-bottom: 7px solid var(--color-sentiment-positive);\n  border-left: 5px solid transparent;\n}\n.cc_negativeDelta_3296223122 {\n  display: flex !important;\n  align-items: center;\n  color: var(--color-sentiment-negative);\n  white-space: nowrap;\n}\n.cc_negativeDelta_3296223122::before {\n  content: '';\n  width: 0;\n  height: 0;\n  margin-right: var(--size-4);\n  border-top: 7px solid var(--color-sentiment-negative);\n  border-right: 5px solid transparent;\n  border-left: 5px solid transparent;\n}\n.cc_receiveCell_3296223122 {\n  display: flex !important;\n  flex-direction: column;\n  align-items: flex-end;\n}\n@media (min-width: 992px) {\n  .cc_receiveCell_3296223122 {\n    align-items: flex-start;\n  }\n}\n.cc_receiveText_3296223122 {\n  display: inline-block;\n  margin-bottom: var(--size-8);\n  color: var(--color-content-primary);\n  font-size: var(--font-size-20);\n  font-weight: var(--font-weight-semi-bold);\n  white-space: nowrap;\n}\n@media (min-width: 768px) {\n  .cc_receiveText_3296223122 {\n    margin-bottom: 0;\n  }\n}\n@media not ((min-width: 768px)) {\n  .cc_receiveText_3296223122.cc_extraPadding_3296223122 {\n    padding-right: 20px;\n  }\n}\n@media (--screen-md) {\n}@media (--screen-md) {\n}.cc_delivery-estimation_3296223122 {\n  display: flex;\n  align-items: center;\n}\n.cc_delivery-estimation_3296223122 .cc_tw-icon_3296223122,\n.cc_delivery-estimation_3296223122 [class^='tw-icon '] {\n  display: inline;\n}\n.cc_delivery-estimation_3296223122 .cc_tw-icon_3296223122 svg,\n.cc_delivery-estimation_3296223122 [class^='tw-icon '] svg {\n  display: block;\n}\n.cc_delivery-estimation_3296223122 [data-toggle='popover']:not(.cc_btn_3296223122) {\n  height: var(--size-16);\n  border-bottom: 0 !important;\n}\n@media (max-width: 991px) {\n  .cc_delivery-estimation_3296223122 {\n    margin-top: unset;\n  }\n}\n.cc_delivery-estimation-data_3296223122 {\n  margin-right: var(--size-8);\n  font-size: var(--font-size-14);\n  font-weight: var(--font-weight-semi-bold);\n}\n.cc_delivery-estimation-tool-tip_3296223122 {\n  line-height: 8px;\n  cursor: pointer;\n}\n.cc_Currency_3296223122 {\n  margin-bottom: var(--size-16);\n}\n.cc_Currency__container_3296223122 {\n  display: flex;\n  align-items: center;\n  margin-bottom: var(--size-8);\n}\n.cc_Currency__flag_3296223122:first-child {\n  margin-right: var(--size-8);\n}\n@media (min-width: 768px) {\n  .cc_Currency__flag_3296223122:first-child {\n    margin-right: var(--size-16);\n  }\n}\n.cc_Currency__acronym_3296223122 {\n  color: var(--color-content-primary);\n  font-size: var(--font-size-16);\n  font-weight: var(--font-weight-semi-bold);\n}\n.cc_Currency__name_3296223122 {\n  margin-right: var(--size-8);\n  color: var(--color-content-secondary);\n  font-size: var(--font-size-12);\n  font-weight: normal;\n}\n@media (min-width: 768px) {\n  .cc_Currency__name_3296223122 {\n    font-size: var(--font-size-16);\n  }\n}\n@media (min-width: 768px) {\n  .cc_Currency_3296223122 {\n    margin-bottom: 0;\n  }\n}\n.cc_send-with-tw-heading_3296223122 {\n  font-size: var(--font-size-14);\n}\n@media (min-width: 768px) {\n  .cc_send-with-tw-heading__item_3296223122 {\n    display: block;\n    transform: translateX(8px);\n  }\n}\n.cc_send-with-tw-heading__logo_3296223122 {\n  display: block;\n  width: 120px;\n  margin: auto;\n}\n.cc_CompareCard_3296223122 {\n  padding-top: var(--size-16);\n  padding-bottom: var(--size-16);\n  color: var(--color-content-primary);\n  line-height: var(--line-height-body);\n  text-align: left;\n}\n@media (max-width: 767px) {\n  .cc_CompareCard_3296223122 {\n    padding: var(--size-16);\n    border-radius: var(--size-8);\n  }\n}\n@media (min-width: 768px) {\n  .cc_CompareCard_3296223122 {\n    margin-right: calc(-1 * var(--size-8));\n    margin-left: var(--size-8);\n    padding-top: var(--size-16);\n    padding-bottom: var(--size-16);\n    background: transparent;\n  }\n}\n.cc_CompareCard__figure_3296223122 {\n  width: 120px;\n  margin: auto;\n  margin-bottom: var(--size-24);\n  margin-left: 0;\n}\n@media (min-width: 768px) {\n  .cc_CompareCard__figure_3296223122 {\n    display: none;\n  }\n}\n@media (max-width: 767px) {\n  .cc_CompareCard__figure_3296223122 {\n    margin-left: -10px;\n  }\n}\n.cc_CompareCard__item_3296223122 {\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: var(--size-4);\n  font-weight: normal;\n}\n.cc_CompareCard__text_3296223122 {\n  flex: 1 0 68%;\n  padding-right: var(--size-24);\n  color: var(--color-content-secondary);\n}\n.cc_CompareCard__text__delivery-estimation_3296223122:has(> [class*='cc_delivery-estimation_']) > [class*='cc_delivery-estimation_'] {\n  margin-top: 35%;\n}\n@media (max-width: 991px) {\n  .cc_CompareCard__text__delivery-estimation_3296223122:has(> [class*='cc_delivery-estimation_']) > [class*='cc_delivery-estimation_'] {\n    margin-top: unset;\n  }\n}\n.cc_CompareCard__label_3296223122 {\n  display: flex;\n  position: absolute;\n  top: 16px;\n  right: 0;\n  flex-direction: row;\n  align-items: center;\n  justify-content: left;\n  min-width: 60%;\n  padding: 5px 8px;\n  background: var(--color-background-neutral);\n  color: var(--color-sentiment-positive);\n  gap: 8px;\n}\n@media (max-width: 991px) {\n  .cc_CompareCard__label_3296223122 {\n    min-width: 40%;\n  }\n}\n@media (max-width: 767px) {\n  .cc_receive-amount_3296223122 {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-end;\n    order: -1;\n    margin-bottom: -90px;\n  }\n  .cc_receive-amount_3296223122::before {\n    content: '';\n  }\n}\n[class*='comparison-widget'] .cc_card-provider-table_3296223122 {\n  box-shadow: none;\n}\n.cc_card-provider-table_3296223122 .cc_btn-send_3296223122 {\n  color: var(--color-white);\n}\n.cc_card-provider-table_3296223122 .cc_table-plain_3296223122 {\n  border-radius: unset !important;\n}\n.cc_table-plain_3296223122 {\n  margin-bottom: 0;\n  overflow: hidden;\n}\n@media (max-width: 767px) {\n  .cc_table-plain__row_3296223122::before {\n    content: unset;\n    right: 0;\n    bottom: calc(var(--size-16) - 1px);\n    left: 0;\n    width: 100%;\n  }\n}\n@media (max-width: 767px) {\n  .cc_table-plain__row_3296223122:last-child {\n    padding-bottom: 0;\n  }\n}\n.cc_table-plain__th_3296223122:last-child {\n  text-align: center;\n}\n@media (min-width: 768px) {\n  .cc_table-plain__th_3296223122 {\n    padding-right: var(--size-4);\n    padding-left: var(--size-4);\n  }\n}\n@media (min-width: 992px) {\n  .cc_table-plain__th_3296223122 {\n    padding-right: var(--size-16);\n    padding-left: var(--size-16);\n  }\n  .cc_table-plain__th_3296223122:nth-last-child(2) {\n    padding-right: calc(var(--size-16) + var(--size-16));\n    text-align: unset;\n  }\n}\n.cc_table-plain__cell_3296223122 {\n  padding-right: var(--size-16);\n  padding-left: var(--size-16);\n  color: var(--color-content-primary);\n  font-size: var(--font-size-14);\n  font-weight: var(--font-weight-regular);\n}\n.cc_table-plain__cell_3296223122::before {\n  padding-left: 0;\n}\n@media (min-width: 768px) {\n  .cc_table-plain__cell_3296223122 {\n    padding-right: var(--size-4);\n    padding-left: var(--size-4);\n  }\n  .cc_table-plain__cell_3296223122:last-child {\n    text-align: left;\n  }\n}\n@media (min-width: 992px) {\n  .cc_table-plain__cell_3296223122 {\n    padding-right: var(--size-16);\n    padding-left: var(--size-16);\n  }\n  .cc_table-plain__cell_3296223122:nth-last-child(2) {\n    padding-right: calc(var(--size-16) + var(--size-16));\n  }\n}\n.cc_table-plain__cell--received-amount_3296223122 {\n  text-align: right;\n}\n@media (max-width: 767px) {\n  .cc_table-plain__cell--received-amount_3296223122 {\n    order: -1;\n  }\n}\n@media (max-width: 767px) {\n  .cc_table-plain__cell--currency_3296223122 {\n    margin-top: calc(-1 * calc(var(--size-8) * 8));\n  }\n}\n.cc_table-plain__cell--provider_3296223122 {\n  order: -2;\n  margin-bottom: var(--size-4);\n}\n.cc_table-plain_3296223122 .cc_featured--last-cell_3296223122 {\n  padding-top: 0;\n  padding-bottom: 0;\n}\n@media (max-width: 767px) {\n  .cc_table-plain_3296223122 .cc_featured--last-cell_3296223122 {\n    margin: var(--size-8);\n    margin-top: var(--size-8);\n    border-radius: var(--size-24);\n  }\n}\n.cc_ProviderLogo_3296223122 {\n  height: 14px;\n}\n.cc_btn-send_3296223122 {\n  width: 100%;\n}\n.cc_send-with-tw-cta_3296223122 {\n  text-decoration: none !important;\n}\n@media (max-width: 767px) {\n  .cc_send-with-tw-cta_3296223122 {\n    /* stylelint-disable at-rule-no-unknown, no-eol-whitespace, declaration-empty-line-before */\n    display: block;\n    width: 100%;\n  }\n}\n.cc_send-with-tw-cta_3296223122:hover,\n.cc_send-with-tw-cta_3296223122:focus {\n  outline: none !important;\n  text-decoration: none !important;\n}\n.cc_card_3296223122:has(.cc_card-provider-table_3296223122) {\n  border-radius: var(--size-40);\n}\n.cc_tapestryCardContent_3296223122:has(.cc_card-provider-table_3296223122) {\n  border-radius: var(--size-40);\n}\n\n/*# sourceMappingURL=data:application/json;base64,  */";
var style = {"comparison-widget":"cc_comparison-widget_3296223122","comparisonWidget":"cc_comparison-widget_3296223122","comparison-table":"cc_comparison-table_3296223122","comparisonTable":"cc_comparison-table_3296223122","table-plain":"cc_table-plain_3296223122","tablePlain":"cc_table-plain_3296223122","alert":"cc_alert_3296223122","alert-info":"cc_alert-info_3296223122","alertInfo":"cc_alert-info_3296223122","form-group":"cc_form-group_3296223122","formGroup":"cc_form-group_3296223122","form-group-lg":"cc_form-group-lg_3296223122","formGroupLg":"cc_form-group-lg_3296223122","control-label":"cc_control-label_3296223122","controlLabel":"cc_control-label_3296223122","input-lg":"cc_input-lg_3296223122","inputLg":"cc_input-lg_3296223122","input-group-lg":"cc_input-group-lg_3296223122","inputGroupLg":"cc_input-group-lg_3296223122","form-control":"cc_form-control_3296223122","formControl":"cc_form-control_3296223122","input-group-addon":"cc_input-group-addon_3296223122","inputGroupAddon":"cc_input-group-addon_3296223122","label":"cc_label_3296223122","secondary":"cc_secondary_3296223122","container":"cc_container_3296223122","col-xs-12":"cc_col-xs-12_3296223122","colXs12":"cc_col-xs-12_3296223122","col-sm-10":"cc_col-sm-10_3296223122","colSm10":"cc_col-sm-10_3296223122","col-sm-offset-1":"cc_col-sm-offset-1_3296223122","colSmOffset1":"cc_col-sm-offset-1_3296223122","clearfix_":"cc_clearfix__3296223122","form-horizontal":"cc_form-horizontal_3296223122","formHorizontal":"cc_form-horizontal_3296223122","btn-group-vertical":"cc_btn-group-vertical_3296223122","btnGroupVertical":"cc_btn-group-vertical_3296223122","btn-group":"cc_btn-group_3296223122","btnGroup":"cc_btn-group_3296223122","container-fluid":"cc_container-fluid_3296223122","containerFluid":"cc_container-fluid_3296223122","row":"cc_row_3296223122","dl-horizontal":"cc_dl-horizontal_3296223122","dlHorizontal":"cc_dl-horizontal_3296223122","loader":"cc_loader_3296223122","sr-only":"cc_sr-only_3296223122","srOnly":"cc_sr-only_3296223122","anchor":"cc_anchor_3296223122","anchor--dark":"cc_anchor--dark_3296223122","anchorDark":"cc_anchor--dark_3296223122","img-responsive":"cc_img-responsive_3296223122","imgResponsive":"cc_img-responsive_3296223122","text-xs-left":"cc_text-xs-left_3296223122","textXsLeft":"cc_text-xs-left_3296223122","text-xs-center":"cc_text-xs-center_3296223122","textXsCenter":"cc_text-xs-center_3296223122","text-md-left":"cc_text-md-left_3296223122","textMdLeft":"cc_text-md-left_3296223122","text-success":"cc_text-success_3296223122","textSuccess":"cc_text-success_3296223122","text-content-secondary":"cc_text-content-secondary_3296223122","textContentSecondary":"cc_text-content-secondary_3296223122","small":"cc_small_3296223122","strong":"cc_strong_3296223122","h3":"cc_h3_3296223122","h4":"cc_h4_3296223122","font-weight-bold":"cc_font-weight-bold_3296223122","fontWeightBold":"cc_font-weight-bold_3296223122","text-xs-nowrap":"cc_text-xs-nowrap_3296223122","textXsNowrap":"cc_text-xs-nowrap_3296223122","table":"cc_table_3296223122","table-responsive":"cc_table-responsive_3296223122","tableResponsive":"cc_table-responsive_3296223122","table-condensed":"cc_table-condensed_3296223122","tableCondensed":"cc_table-condensed_3296223122","tw-icon":"cc_tw-icon_3296223122","twIcon":"cc_tw-icon_3296223122","input-group":"cc_input-group_3296223122","inputGroup":"cc_input-group_3296223122","input-group-btn":"cc_input-group-btn_3296223122","inputGroupBtn":"cc_input-group-btn_3296223122","focus":"cc_focus_3296223122","has-focus":"cc_has-focus_3296223122","hasFocus":"cc_has-focus_3296223122","dot-success":"cc_dot-success_3296223122","dotSuccess":"cc_dot-success_3296223122","dot-fail":"cc_dot-fail_3296223122","dotFail":"cc_dot-fail_3296223122","d-flex":"cc_d-flex_3296223122","dFlex":"cc_d-flex_3296223122","d-flex-md":"cc_d-flex-md_3296223122","dFlexMd":"cc_d-flex-md_3296223122","flex-center":"cc_flex-center_3296223122","flexCenter":"cc_flex-center_3296223122","flex-center-md":"cc_flex-center-md_3296223122","flexCenterMd":"cc_flex-center-md_3296223122","flex-left":"cc_flex-left_3296223122","flexLeft":"cc_flex-left_3296223122","flex-left-md":"cc_flex-left-md_3296223122","flexLeftMd":"cc_flex-left-md_3296223122","flex-column":"cc_flex-column_3296223122","flexColumn":"cc_flex-column_3296223122","flex-row-md":"cc_flex-row-md_3296223122","flexRowMd":"cc_flex-row-md_3296223122","flex-grow":"cc_flex-grow_3296223122","flexGrow":"cc_flex-grow_3296223122","flex-shrink":"cc_flex-shrink_3296223122","flexShrink":"cc_flex-shrink_3296223122","justify-content-center":"cc_justify-content-center_3296223122","justifyContentCenter":"cc_justify-content-center_3296223122","justify-content-end":"cc_justify-content-end_3296223122","justifyContentEnd":"cc_justify-content-end_3296223122","align-items-center":"cc_align-items-center_3296223122","alignItemsCenter":"cc_align-items-center_3296223122","align-items-end":"cc_align-items-end_3296223122","alignItemsEnd":"cc_align-items-end_3296223122","m-x-md-4":"cc_m-x-md-4_3296223122","mXMd4":"cc_m-x-md-4_3296223122","m-t-2":"cc_m-t-2_3296223122","mT2":"cc_m-t-2_3296223122","m-t-3":"cc_m-t-3_3296223122","mT3":"cc_m-t-3_3296223122","m-t-5":"cc_m-t-5_3296223122","mT5":"cc_m-t-5_3296223122","m-r-1":"cc_m-r-1_3296223122","mR1":"cc_m-r-1_3296223122","m-r-2":"cc_m-r-2_3296223122","mR2":"cc_m-r-2_3296223122","m-b-1":"cc_m-b-1_3296223122","mB1":"cc_m-b-1_3296223122","m-b-3":"cc_m-b-3_3296223122","mB3":"cc_m-b-3_3296223122","m-b-4":"cc_m-b-4_3296223122","mB4":"cc_m-b-4_3296223122","m-b-5":"cc_m-b-5_3296223122","mB5":"cc_m-b-5_3296223122","m-b-5-md":"cc_m-b-5-md_3296223122","mB5Md":"cc_m-b-5-md_3296223122","m-b-0-md":"cc_m-b-0-md_3296223122","mB0Md":"cc_m-b-0-md_3296223122","m-l-1":"cc_m-l-1_3296223122","mL1":"cc_m-l-1_3296223122","p-t-3":"cc_p-t-3_3296223122","pT3":"cc_p-t-3_3296223122","p-t-4":"cc_p-t-4_3296223122","pT4":"cc_p-t-4_3296223122","p-t-5":"cc_p-t-5_3296223122","pT5":"cc_p-t-5_3296223122","p-r-0":"cc_p-r-0_3296223122","pR0":"cc_p-r-0_3296223122","p-b-4":"cc_p-b-4_3296223122","pB4":"cc_p-b-4_3296223122","p-b-5":"cc_p-b-5_3296223122","pB5":"cc_p-b-5_3296223122","p-b-9":"cc_p-b-9_3296223122","pB9":"cc_p-b-9_3296223122","size-1-of-1":"cc_size-1-of-1_3296223122","size1Of1":"cc_size-1-of-1_3296223122","text-no-wrap":"cc_text-no-wrap_3296223122","textNoWrap":"cc_text-no-wrap_3296223122","only-mobile":"cc_only-mobile_3296223122","onlyMobile":"cc_only-mobile_3296223122","border-radius-a":"cc_border-radius-a_3296223122","borderRadiusA":"cc_border-radius-a_3296223122","border-radius-t":"cc_border-radius-t_3296223122","borderRadiusT":"cc_border-radius-t_3296223122","border-radius-t-l":"cc_border-radius-t-l_3296223122","borderRadiusTL":"cc_border-radius-t-l_3296223122","border-radius-t-r":"cc_border-radius-t-r_3296223122","borderRadiusTR":"cc_border-radius-t-r_3296223122","border-radius-b":"cc_border-radius-b_3296223122","borderRadiusB":"cc_border-radius-b_3296223122","border-radius-b-l":"cc_border-radius-b-l_3296223122","borderRadiusBL":"cc_border-radius-b-l_3296223122","border-radius-b-r":"cc_border-radius-b-r_3296223122","borderRadiusBR":"cc_border-radius-b-r_3296223122","comparison-widget--wide":"cc_comparison-widget--wide_3296223122","comparisonWidgetWide":"cc_comparison-widget--wide_3296223122","comparison-table--wide":"cc_comparison-table--wide_3296223122","comparisonTableWide":"cc_comparison-table--wide_3296223122","card":"cc_card_3296223122","card-table":"cc_card-table_3296223122","cardTable":"cc_card-table_3296223122","card-header":"cc_card-header_3296223122","cardHeader":"cc_card-header_3296223122","table-plain__caption":"cc_table-plain__caption_3296223122","tablePlain__caption":"cc_table-plain__caption_3296223122","tfoot":"cc_tfoot_3296223122","alert--dark":"cc_alert--dark_3296223122","alertDark":"cc_alert--dark_3296223122","tfoot--dark":"cc_tfoot--dark_3296223122","tfootDark":"cc_tfoot--dark_3296223122","thead":"cc_thead_3296223122","table-plain__row":"cc_table-plain__row_3296223122","tablePlain__row":"cc_table-plain__row_3296223122","featured--last-cell":"cc_featured--last-cell_3296223122","featuredLastCell":"cc_featured--last-cell_3296223122","table-plain__row--dark":"cc_table-plain__row--dark_3296223122","tablePlain__rowDark":"cc_table-plain__row--dark_3296223122","table-plain__th":"cc_table-plain__th_3296223122","tablePlain__th":"cc_table-plain__th_3296223122","table-plain__th--small":"cc_table-plain__th--small_3296223122","tablePlain__thSmall":"cc_table-plain__th--small_3296223122","table-plain__th--dark":"cc_table-plain__th--dark_3296223122","tablePlain__thDark":"cc_table-plain__th--dark_3296223122","table-plain__cell":"cc_table-plain__cell_3296223122","tablePlain__cell":"cc_table-plain__cell_3296223122","featured--th":"cc_featured--th_3296223122","featuredTh":"cc_featured--th_3296223122","flag-icon":"cc_flag-icon_3296223122","flagIcon":"cc_flag-icon_3296223122","pricing-disclaimer":"cc_pricing-disclaimer_3296223122","pricingDisclaimer":"cc_pricing-disclaimer_3296223122","tw-alert-icon":"cc_tw-alert-icon_3296223122","twAlertIcon":"cc_tw-alert-icon_3296223122","pricing-disclaimer-popover":"cc_pricing-disclaimer-popover_3296223122","pricingDisclaimerPopover":"cc_pricing-disclaimer-popover_3296223122","popover":"cc_popover_3296223122","popover-content":"cc_popover-content_3296223122","popoverContent":"cc_popover-content_3296223122","popover-title":"cc_popover-title_3296223122","popoverTitle":"cc_popover-title_3296223122","popover-title__route":"cc_popover-title__route_3296223122","popoverTitle__route":"cc_popover-title__route_3296223122","btn-container":"cc_btn-container_3296223122","btnContainer":"cc_btn-container_3296223122","send-with-tw-cta_provider":"cc_send-with-tw-cta_provider_3296223122","sendWithTwCta_provider":"cc_send-with-tw-cta_provider_3296223122","negativeDelta":"cc_negativeDelta_3296223122","headingInfo":"cc_headingInfo_3296223122","disclaimer-close-btn":"cc_disclaimer-close-btn_3296223122","disclaimerCloseBtn":"cc_disclaimer-close-btn_3296223122","close-disclaimer-icon":"cc_close-disclaimer-icon_3296223122","closeDisclaimerIcon":"cc_close-disclaimer-icon_3296223122","rate-description":"cc_rate-description_3296223122","rateDescription":"cc_rate-description_3296223122","rate-description--dark":"cc_rate-description--dark_3296223122","rateDescriptionDark":"cc_rate-description--dark_3296223122","tw-swap-icon":"cc_tw-swap-icon_3296223122","twSwapIcon":"cc_tw-swap-icon_3296223122","tw-chevron":"cc_tw-chevron_3296223122","twChevron":"cc_tw-chevron_3296223122","right":"cc_right_3296223122","top":"cc_top_3296223122","left":"cc_left_3296223122","bottom":"cc_bottom_3296223122","tw-select":"cc_tw-select_3296223122","twSelect":"cc_tw-select_3296223122","dropdown-toggle":"cc_dropdown-toggle_3296223122","dropdownToggle":"cc_dropdown-toggle_3296223122","tw-select-chevron":"cc_tw-select-chevron_3296223122","twSelectChevron":"cc_tw-select-chevron_3296223122","OptionsForm__buy":"cc_OptionsForm__buy_3296223122","OptionsForm__pay":"cc_OptionsForm__pay_3296223122","tw-select-filter":"cc_tw-select-filter_3296223122","twSelectFilter":"cc_tw-select-filter_3296223122","tw-select-filter-link":"cc_tw-select-filter-link_3296223122","twSelectFilterLink":"cc_tw-select-filter-link_3296223122","dropup":"cc_dropup_3296223122","dropdown-menu":"cc_dropdown-menu_3296223122","dropdownMenu":"cc_dropdown-menu_3296223122","dropdown":"cc_dropdown_3296223122","twSelectFadeIn":"cc_twSelectFadeIn_3296223122","tw-dropdown-item":"cc_tw-dropdown-item_3296223122","twDropdownItem":"cc_tw-dropdown-item_3296223122","dropdown-menu--open":"cc_dropdown-menu--open_3296223122","dropdownMenuOpen":"cc_dropdown-menu--open_3296223122","twSelectFadeUp":"cc_twSelectFadeUp_3296223122","positiveDelta":"cc_positiveDelta_3296223122","receiveCell":"cc_receiveCell_3296223122","receiveText":"cc_receiveText_3296223122","extraPadding":"cc_extraPadding_3296223122","delivery-estimation":"cc_delivery-estimation_3296223122","deliveryEstimation":"cc_delivery-estimation_3296223122","btn":"cc_btn_3296223122","delivery-estimation-data":"cc_delivery-estimation-data_3296223122","deliveryEstimationData":"cc_delivery-estimation-data_3296223122","delivery-estimation-tool-tip":"cc_delivery-estimation-tool-tip_3296223122","deliveryEstimationToolTip":"cc_delivery-estimation-tool-tip_3296223122","Currency":"cc_Currency_3296223122","Currency__container":"cc_Currency__container_3296223122","Currency__flag":"cc_Currency__flag_3296223122","Currency__acronym":"cc_Currency__acronym_3296223122","Currency__name":"cc_Currency__name_3296223122","send-with-tw-heading":"cc_send-with-tw-heading_3296223122","sendWithTwHeading":"cc_send-with-tw-heading_3296223122","send-with-tw-heading__item":"cc_send-with-tw-heading__item_3296223122","sendWithTwHeading__item":"cc_send-with-tw-heading__item_3296223122","send-with-tw-heading__logo":"cc_send-with-tw-heading__logo_3296223122","sendWithTwHeading__logo":"cc_send-with-tw-heading__logo_3296223122","CompareCard":"cc_CompareCard_3296223122","CompareCard__figure":"cc_CompareCard__figure_3296223122","CompareCard__item":"cc_CompareCard__item_3296223122","CompareCard__text":"cc_CompareCard__text_3296223122","CompareCard__text__delivery-estimation":"cc_CompareCard__text__delivery-estimation_3296223122","CompareCard__text__deliveryEstimation":"cc_CompareCard__text__delivery-estimation_3296223122","CompareCard__label":"cc_CompareCard__label_3296223122","receive-amount":"cc_receive-amount_3296223122","receiveAmount":"cc_receive-amount_3296223122","card-provider-table":"cc_card-provider-table_3296223122","cardProviderTable":"cc_card-provider-table_3296223122","btn-send":"cc_btn-send_3296223122","btnSend":"cc_btn-send_3296223122","table-plain__cell--received-amount":"cc_table-plain__cell--received-amount_3296223122","tablePlain__cellReceivedAmount":"cc_table-plain__cell--received-amount_3296223122","table-plain__cell--currency":"cc_table-plain__cell--currency_3296223122","tablePlain__cellCurrency":"cc_table-plain__cell--currency_3296223122","table-plain__cell--provider":"cc_table-plain__cell--provider_3296223122","tablePlain__cellProvider":"cc_table-plain__cell--provider_3296223122","ProviderLogo":"cc_ProviderLogo_3296223122","send-with-tw-cta":"cc_send-with-tw-cta_3296223122","sendWithTwCta":"cc_send-with-tw-cta_3296223122","tapestryCardContent":"cc_tapestryCardContent_3296223122"};
styleInject(css_248z);

/* eslint-disable fp/no-mutation */
const createClassNames$2 = createClassNamesFromStyles(style);
const COMPARATORS = {
  BETTER: 'BETTER',
  SAME: 'SAME',
  WORSE: 'WORSE'
};
const SPEED_OPTIONS = {
  BETTER: 'speed-better',
  SAME: 'speed-same',
  WORSE: 'speed-worse'
};
const COST_OPTIONS = {
  BETTER: 'cost-better',
  SAME: 'cost-same',
  WORSE: 'cost-worse'
};

// Generates "Save 10 GBP", "Get 123.23 EUR", "3 USD more"
const renderSavings = (savings, receivedAmount, targetCurrency, locale, costComparison) => {
  if (!costComparison) {
    return null;
  }
  const format = amount => /*#__PURE__*/React.createElement("span", {
    className: createClassNames$2(['font-weight-bold', 'text-xs-nowrap'])
  }, formatMoney(amount, targetCurrency, locale));
  let amount;
  if (COMPARATORS.BETTER === costComparison) {
    amount = savings;
  }
  if (COMPARATORS.SAME === costComparison) {
    amount = receivedAmount;
  }
  if (COMPARATORS.WORSE === costComparison) {
    amount = savings * -1;
  }
  const messageId = `savings-${costComparison.toLowerCase()}`;
  return /*#__PURE__*/React.createElement(FormattedMessage, {
    values: {
      formattedAmount: format(amount)
    },
    id: messageId
  });
};

// prettier-ignore
const generateCtaUrl = (sendAmount, sourceCurrency, targetCurrency) => createUrl('/' + `?sourceAmount=${sendAmount}` + `&sourceCurrency=${sourceCurrency}` + `&targetCurrency=${targetCurrency}`);
const SendWithTw = ({
  deliveryEstimate,
  speedComparison,
  savings,
  receivedAmount,
  costComparison,
  supportedRoute,
  sendAmount,
  sourceCurrency,
  targetCurrency,
  showDeliveryEstimates,
  onCallToActionClick
}) => {
  const {
    formatMessage,
    locale
  } = useIntl();
  // prettier-ignore
  const same = speedComparison === COMPARATORS.SAME && costComparison === COMPARATORS.SAME;
  // prettier-ignore
  const worse = speedComparison === COMPARATORS.WORSE && costComparison === COMPARATORS.WORSE;
  const buttonProps = {};
  if (supportedRoute) {
    buttonProps.label = formatMessage({
      id: 'cta-for-supported-route'
    });
    buttonProps.url = generateCtaUrl(sendAmount, sourceCurrency, targetCurrency);
  } else {
    buttonProps.label = formatMessage({
      id: 'cta-for-unsupported-route'
    });
    buttonProps.url = 'https://wise.com/wishes';
  }
  return /*#__PURE__*/React.createElement("div", {
    className: createClassNames$2(['CompareCard'])
  }, /*#__PURE__*/React.createElement("div", {
    className: createClassNames$2(['CompareCard__figure'])
  }, /*#__PURE__*/React.createElement("img", {
    src: "https://wise.com/public-resources/assets/logos/wise-personal/logo.svg",
    alt: formatMessage({
      id: 'wise-logo-alt-text'
    })
  })), supportedRoute && /*#__PURE__*/React.createElement(React.Fragment, null, !worse && !same && /*#__PURE__*/React.createElement(React.Fragment, null, showDeliveryEstimates && /*#__PURE__*/React.createElement("div", {
    className: createClassNames$2(['CompareCard__item'])
  }, /*#__PURE__*/React.createElement("span", {
    className: createClassNames$2(['CompareCard__text'])
  }, /*#__PURE__*/React.createElement("span", {
    className: createClassNames$2(['CompareCard__label']),
    "data-testid": "cost-comparator"
  }, /*#__PURE__*/React.createElement(CheckCircle, null), `${SPEED_OPTIONS[speedComparison] ? formatMessage({
    id: SPEED_OPTIONS[speedComparison]
  }) + ',' : ''} ${formatMessage({
    id: COST_OPTIONS[costComparison]
  })}`), /*#__PURE__*/React.createElement("span", {
    className: `${style['font-weight-bold']} ${createClassNames$2(['CompareCard__text__delivery-estimation'])}`
  }, deliveryEstimate && /*#__PURE__*/React.createElement(DeliveryEstimation, {
    deliveryEstimation: deliveryEstimate,
    alias: "transferwise",
    onClickingDeliveryEstimationTooltip: () => {},
    isPartner: false,
    styles: style
  })))), /*#__PURE__*/React.createElement("div", {
    className: createClassNames$2(['CompareCard__item'])
  }, /*#__PURE__*/React.createElement("span", {
    className: createClassNames$2(['CompareCard__text']),
    "data-testid": "savings"
  }, renderSavings(savings, receivedAmount, targetCurrency, locale, costComparison)))), worse && /*#__PURE__*/React.createElement("div", {
    className: createClassNames$2(['CompareCard__item'])
  }, /*#__PURE__*/React.createElement("span", {
    className: createClassNames$2(['CompareCard__text', 'text-xs-center', 'p-r-0'])
  }, formatMessage({
    id: 'compare-worse'
  }))), same && /*#__PURE__*/React.createElement("div", {
    className: createClassNames$2(['CompareCard__item'])
  }, /*#__PURE__*/React.createElement("span", {
    className: createClassNames$2(['CompareCard__text', 'text-xs-center', 'p-r-0'])
  }, formatMessage({
    id: 'compare-same'
  })))), !supportedRoute && /*#__PURE__*/React.createElement("div", {
    className: createClassNames$2(['CompareCard__item'])
  }, /*#__PURE__*/React.createElement("span", {
    className: createClassNames$2(['CompareCard__text', 'text-xs-center', 'p-r-0'])
  }, formatMessage({
    id: 'route-unsupported'
  }))), /*#__PURE__*/React.createElement("a", {
    href: buttonProps.url,
    "data-testid": "comparison-cta",
    "data-tracking-id": "comparison-cta",
    "data-tracking-targetcurrency": targetCurrency,
    "data-tracking-cost-comparison": costComparison,
    "data-tracking-speed-comparison": speedComparison,
    "data-tracking-savings": savings,
    className: createClassNames$2(['send-with-tw-cta'])
  }, /*#__PURE__*/React.createElement(Button, {
    size: Size.SMALL,
    type: ControlType.POSITIVE,
    priority: Priority.PRIMARY,
    block: true,
    className: createClassNames$2(['send-with-tw-cta']),
    onClick: onCallToActionClick
  }, buttonProps.label)));
};
SendWithTw.propTypes = {
  costComparison: PropTypes.oneOf(Object.keys(COMPARATORS)),
  speedComparison: PropTypes.oneOf(Object.keys(COMPARATORS)),
  supportedRoute: PropTypes.bool,
  sendAmount: PropTypes.number,
  sourceCurrency: PropTypes.string,
  targetCurrency: PropTypes.string,
  deliveryEstimate: PropTypes.shape({}),
  savings: PropTypes.number,
  receivedAmount: PropTypes.number,
  showDeliveryEstimates: PropTypes.bool,
  onCallToActionClick: PropTypes.func
};
SendWithTw.defaultProps = {
  costComparison: 'BETTER',
  speedComparison: 'BETTER',
  supportedRoute: false,
  sendAmount: 0,
  sourceCurrency: null,
  targetCurrency: null,
  deliveryEstimate: null,
  savings: 0,
  receivedAmount: 0,
  showDeliveryEstimates: false,
  onCallToActionClick: () => {}
};

// Used when comparing 2 rounded durations
const getUnitRank = unit => {
  switch (unit) {
    case DAYS:
      return 4;
    case HOURS:
      return 3;
    case MINUTES:
      return 2;
    case SECONDS:
      return 1;
    default:
      return 0;
  }
};
const getCostComparison = (twReceivedAmount, provReceivedAmount) => {
  if (twReceivedAmount > provReceivedAmount) {
    return 'BETTER';
  }
  if (twReceivedAmount < provReceivedAmount) {
    return 'WORSE';
  }
  return 'SAME';
};
const getSavings = (twReceivedAmount, provReceivedAmount) => twReceivedAmount - provReceivedAmount;

// TODO: optional?.chaining
// prettier-ignore
const canCompareDeliveryEstimations = (twEstimation, provEstimation) => provEstimation && twEstimation && twEstimation.duration && provEstimation.duration && provEstimation.providerGivesEstimate;
const getSpeedComparison = (twEstimation, provEstimation) => {
  // 0. Able to compare estimations
  if (!canCompareDeliveryEstimations(twEstimation, provEstimation)) {
    return null;
  }
  const {
    duration: {
      max: twMax,
      min: twMin
    }
  } = twEstimation;
  const {
    duration: {
      max: provMax,
      min: provMin
    }
  } = provEstimation;
  const twMaxDuration = twEstimation.duration.max;
  const provMaxDuration = provEstimation.duration.max;
  const twMinDuration = twEstimation.duration.min;
  const provMinDuration = provEstimation.duration.min;

  // 1. Compare MAX duration
  if (twMax && provMax) {
    // Round up in format { total: Number, units: String }
    const twMaxRounded = convertDurationToMaximumUnits(twMaxDuration);
    const provMaxRounded = convertDurationToMaximumUnits(provMaxDuration);

    // Are the durations an order of magnitude different?
    const twUnitRank = getUnitRank(twMaxRounded.units);
    const provUnitRank = getUnitRank(provMaxRounded.units);
    if (twUnitRank < provUnitRank) {
      return 'BETTER';
    }
    if (provUnitRank < twUnitRank) {
      return 'WORSE';
    }

    // No, units are same rank. Compare numeric value within range.
    if (twMaxRounded.total < provMaxRounded.total) {
      return 'BETTER';
    }
    if (provMaxRounded.total < twMaxRounded.total) {
      return 'WORSE';
    }

    // Max estimates are the same.
    // If no min value to compare, this is as far as we go.
    if (!provMin || !twMin) {
      return 'SAME';
    }
  }

  // 2. Compare MIN duration
  if (twMin && provMin) {
    // Round up in format { total: Number, units: String }
    const twMinRounded = convertDurationToMaximumUnits(twMinDuration);
    const provMinRounded = convertDurationToMaximumUnits(provMinDuration);

    // If both under a minute, considered the same
    if (twMinRounded.units === SECONDS && provMinRounded.units === SECONDS) {
      return 'SAME';
    }

    // Are the durations an order of magnitude different?
    const twUnitRank = getUnitRank(twMinRounded.units);
    const provUnitRank = getUnitRank(provMinRounded.units);
    if (twUnitRank < provUnitRank) {
      return 'BETTER';
    }
    if (provUnitRank < twUnitRank) {
      return 'WORSE';
    }

    // No, units are same rank. Compare numeric value within range.
    if (twMinRounded.total < provMinRounded.total) {
      return 'BETTER';
    }
    if (provMinRounded.total < twMinRounded.total) {
      return 'WORSE';
    }

    // Min estimates are the same.
    return 'SAME';
  }

  // Error state, not enough data provided
  return null;
};

/**
 * This Higher-Order Component accepts a quote from 2 providers
 * for the same route and compares them.
 * It passes in the correct props for <SendWithTw /> to render correctly.
 * @param {*} Component
 */
const withQuoteComparison = Component => {
  const Wrapped = ({
    baseProviderQuote,
    comparedProviderQuote,
    showDeliveryEstimates,
    sendAmount,
    onCallToActionClick
  }) => {
    if (!comparedProviderQuote.supportedRoute) {
      return /*#__PURE__*/React.createElement(Component, {
        supportedRoute: false
      });
    }
    const costComparison = getCostComparison(comparedProviderQuote.receivedAmount, baseProviderQuote.receivedAmount);
    const savings = getSavings(comparedProviderQuote.receivedAmount, baseProviderQuote.receivedAmount);
    const speedComparison = getSpeedComparison(comparedProviderQuote.deliveryEstimation, baseProviderQuote.deliveryEstimation);
    const {
      sourceCurrency,
      targetCurrency,
      receivedAmount
    } = baseProviderQuote;
    return /*#__PURE__*/React.createElement(Component, {
      supportedRoute: true,
      speedComparison: speedComparison,
      savings: savings,
      costComparison: costComparison,
      deliveryEstimate: comparedProviderQuote.deliveryEstimation,
      sourceCurrency: sourceCurrency,
      targetCurrency: targetCurrency,
      receivedAmount: receivedAmount,
      showDeliveryEstimates: showDeliveryEstimates,
      sendAmount: sendAmount,
      onCallToActionClick: onCallToActionClick
    });
  };
  Wrapped.propTypes = {
    baseProviderQuote: PropTypes.shape({
      receivedAmount: PropTypes.number,
      deliveryEstimation: PropTypes.shape({}),
      sourceCurrency: PropTypes.string,
      targetCurrency: PropTypes.string
    }).isRequired,
    comparedProviderQuote: PropTypes.shape({
      supportedRoute: PropTypes.bool,
      receivedAmount: PropTypes.number,
      deliveryEstimation: PropTypes.shape({})
    }).isRequired,
    showDeliveryEstimates: PropTypes.bool,
    sendAmount: PropTypes.number,
    onCallToActionClick: PropTypes.func
  };
  Wrapped.defaultProps = {
    showDeliveryEstimates: false,
    sendAmount: 0,
    onCallToActionClick: () => {}
  };
  return Wrapped;
};
withQuoteComparison.propTypes = {
  Component: PropTypes.element.isRequired
};

const createClassNames$1 = createClassNamesFromStyles(style);
const SendComparison = withQuoteComparison(SendWithTw);
const RouteRow = /*#__PURE__*/React.forwardRef(({
  name,
  alias,
  logo,
  baseProviderQuote,
  comparedProviderQuote,
  showDeliveryEstimates,
  sendAmount,
  isCentre,
  onCallToActionClick
}, reference) => {
  const {
    formatMessage,
    locale
  } = useIntl();
  const {
    sourceCurrency,
    targetCurrency,
    deliveryEstimation,
    fee,
    rate,
    receivedAmount
  } = baseProviderQuote;
  const currencyNameId = getCurrencyForCode(targetCurrency).nameTranslationKey;
  const currencyName = currencyNameId && formatMessage({
    id: currencyNameId
  });
  return /*#__PURE__*/React.createElement("tr", {
    className: style['table-plain__row'],
    "data-testid": isCentre ? 'centre-route-row' : 'route-row',
    ref: reference
  }, /*#__PURE__*/React.createElement("td", {
    className: createClassNames$1(['table-plain__cell', 'table-plain__cell--currency'])
  }, /*#__PURE__*/React.createElement("div", {
    className: createClassNames$1(['Currency'])
  }, /*#__PURE__*/React.createElement("div", {
    className: createClassNames$1(['Currency__container'])
  }, /*#__PURE__*/React.createElement("i", {
    className: `${createClassNames$1(['Currency__flag'])} currency-flag currency-flag-lg currency-flag-${targetCurrency.toLowerCase()}`
  }), /*#__PURE__*/React.createElement("span", {
    className: createClassNames$1(['Currency__acronym'])
  }, targetCurrency)), /*#__PURE__*/React.createElement("span", {
    className: createClassNames$1(['Currency__name'])
  }, currencyName))), /*#__PURE__*/React.createElement("td", {
    className: createClassNames$1(['table-plain__cell', 'table-plain__cell--provider', 'only-mobile'])
  }, logo && /*#__PURE__*/React.createElement("img", {
    className: createClassNames$1(['ProviderLogo']),
    src: logo,
    alt: formatMessage({
      id: 'provider-logo-alt-text'
    }, {
      name
    })
  })), showDeliveryEstimates && /*#__PURE__*/React.createElement("td", {
    className: style['table-plain__cell'],
    "data-label": formatMessage({
      id: 'should-arrive'
    })
  }, deliveryEstimation && /*#__PURE__*/React.createElement(DeliveryEstimation, {
    alias: alias,
    onClickingDeliveryEstimationTooltip: () => {},
    deliveryEstimation: deliveryEstimation,
    isPartner: false,
    styles: style
  })), /*#__PURE__*/React.createElement("td", {
    className: style['table-plain__cell'],
    "data-label": formatMessage({
      id: 'transfer-fee'
    })
  }, /*#__PURE__*/React.createElement(TransferFee, {
    currency: sourceCurrency,
    fee: fee
  })), /*#__PURE__*/React.createElement("td", {
    className: style['table-plain__cell'],
    "data-label": formatMessage({
      id: 'exchange-rate'
    })
  }, /*#__PURE__*/React.createElement(ExchangeRateIndicator, {
    rate: rate,
    sourceCurrency: sourceCurrency,
    targetCurrency: targetCurrency
  })), /*#__PURE__*/React.createElement("td", {
    className: createClassNames$1(['table-plain__cell', 'table-plain__cell--received-amount']),
    "data-testid": "received-amount"
  }, /*#__PURE__*/React.createElement("span", {
    className: style.receiveText
  }, formatMoney(receivedAmount, targetCurrency, locale))), /*#__PURE__*/React.createElement("td", {
    className: createClassNames$1(['table-plain__cell', 'featured--last-cell'])
  }, /*#__PURE__*/React.createElement(SendComparison, {
    baseProviderQuote: baseProviderQuote,
    comparedProviderQuote: comparedProviderQuote,
    showDeliveryEstimates: showDeliveryEstimates,
    sendAmount: sendAmount,
    onCallToActionClick: onCallToActionClick
  })));
});
RouteRow.propTypes = {
  name: PropTypes.string.isRequired,
  alias: PropTypes.string.isRequired,
  logo: PropTypes.string,
  baseProviderQuote: PropTypes.shape({
    sourceCurrency: PropTypes.string.isRequired,
    targetCurrency: PropTypes.string.isRequired,
    deliveryEstimation: PropTypes.shape(DeliveryEstimation.propTypes.deliveryEstimation).isRequired,
    fee: PropTypes.number.isRequired,
    rate: PropTypes.number.isRequired,
    receivedAmount: PropTypes.number.isRequired
  }).isRequired,
  comparedProviderQuote: PropTypes.shape({}).isRequired,
  showDeliveryEstimates: PropTypes.bool,
  sendAmount: PropTypes.number,
  isCentre: PropTypes.bool
};
RouteRow.defaultProps = {
  logo: '',
  showDeliveryEstimates: false,
  sendAmount: 0,
  isCentre: false
};

/* eslint-disable sonarjs/no-duplicate-string */
function createClassNames(classNames) {
  return classNames.map(className => `${style[className]}`).join(' ');
}
const SHOW_DELIVERY_ESTIMATES = true;
const ProviderComparisonTable = ({
  name,
  alias,
  logo,
  sendAmount,
  sourceCurrency,
  routes,
  trackEvent,
  onCallToActionClick
}) => {
  const {
    locale,
    formatMessage
  } = useIntl();
  const [centreRouteViewed, setCentreRouteViewed] = useState(false);
  const centreRouteIndex = routes ? getTrackingTriggerIndex(routes.length) : null;
  const onTableView = inView => {
    if (!inView) {
      return;
    }
    setCentreRouteViewed(true);
    const trackingContext = {
      provider: {
        name
      },
      amount: sendAmount,
      source: sourceCurrency,
      componentType: Table.ProviderComparison,
      routes
    };
    trackTableViewed(trackingContext, trackEvent);
  };
  return /*#__PURE__*/React.createElement("div", {
    className: style['card-provider-table']
  }, /*#__PURE__*/React.createElement("table", {
    className: style['table-plain']
  }, /*#__PURE__*/React.createElement("caption", {
    className: style['table-plain__caption']
  }, /*#__PURE__*/React.createElement(FormattedMessage, {
    values: {
      name
    },
    id: "table-caption"
  })), /*#__PURE__*/React.createElement("thead", {
    className: createClassNames(['thead'])
  }, /*#__PURE__*/React.createElement("tr", {
    className: style['table-plain__row']
  }, /*#__PURE__*/React.createElement("th", {
    className: style['table-plain__th']
  }, /*#__PURE__*/React.createElement(FormattedMessage, {
    id: "currency"
  })), /*#__PURE__*/React.createElement("th", {
    className: createClassNames(['table-plain__th', 'only-mobile'])
  }, /*#__PURE__*/React.createElement(FormattedMessage, {
    id: "provider"
  })), /*#__PURE__*/React.createElement("th", {
    className: style['table-plain__th']
  }, /*#__PURE__*/React.createElement(FormattedMessage, {
    id: "should-arrive"
  })), /*#__PURE__*/React.createElement("th", {
    className: style['table-plain__th']
  }, /*#__PURE__*/React.createElement(FormattedMessage, {
    id: "transfer-fee"
  })), /*#__PURE__*/React.createElement("th", {
    className: style['table-plain__th']
  }, /*#__PURE__*/React.createElement(FormattedMessage, {
    id: "exchange-rate"
  })), /*#__PURE__*/React.createElement("th", {
    className: style['table-plain__th']
  }, /*#__PURE__*/React.createElement(FormattedMessage, {
    id: "you-receive"
  }), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("span", {
    className: style['table-plain__th--small'],
    "data-testid": "sending-amount"
  }, /*#__PURE__*/React.createElement(FormattedMessage, {
    values: {
      amountWithCurrency: formatMoney(sendAmount, sourceCurrency, locale)
    },
    id: "sending-amount"
  }))), /*#__PURE__*/React.createElement("th", {
    className: createClassNames(['table-plain__th', 'featured--th', 'send-with-tw-heading'])
  }, /*#__PURE__*/React.createElement("span", {
    className: style['send-with-tw-heading__item']
  }, /*#__PURE__*/React.createElement(FormattedMessage, {
    values: {
      logo: /*#__PURE__*/React.createElement("img", {
        className: style['send-with-tw-heading__logo'],
        src: "https://wise.com/public-resources/assets/logos/wise-personal/logo_inverse.svg",
        alt: formatMessage({
          id: 'wise-logo-alt-text'
        })
      })
    },
    id: "sending-with-wise"
  }))))), /*#__PURE__*/React.createElement("tbody", null, routes.map(({
    baseProviderQuote,
    comparedProviderQuote
  }, index) => {
    const isCentreRoute = index === centreRouteIndex;
    return (
      /*#__PURE__*/
      // eslint-disable-next-line react/jsx-key
      React.createElement(ConditionalWrapper, {
        condition: !centreRouteViewed && isCentreRoute,
        wrapper: children => /*#__PURE__*/React.createElement(InView, {
          onChange: (inView, _) => onTableView(inView),
          threshold: 1,
          triggerOnce: true
        }, ({
          _,
          ref
        }) => /*#__PURE__*/React.cloneElement(children, {
          ref: ref,
          isCentre: true
        })),
        key: comparedProviderQuote.targetCurrency
      }, /*#__PURE__*/React.createElement(RouteRow, {
        key: baseProviderQuote.targetCurrency,
        name: name,
        alias: alias,
        logo: logo,
        baseProviderQuote: baseProviderQuote,
        comparedProviderQuote: comparedProviderQuote,
        locale: locale,
        showDeliveryEstimates: SHOW_DELIVERY_ESTIMATES,
        sendAmount: sendAmount,
        onCallToActionClick: onCallToActionClick
      }))
    );
  }))));
};
ProviderComparisonTable.propTypes = {
  name: PropTypes.string.isRequired,
  alias: PropTypes.string.isRequired,
  logo: PropTypes.string,
  sendAmount: PropTypes.number.isRequired,
  sourceCurrency: PropTypes.string.isRequired,
  routes: PropTypes.arrayOf(PropTypes.shape({})),
  trackEvent: PropTypes.func,
  onCallToActionClick: PropTypes.func
};
ProviderComparisonTable.defaultProps = {
  logo: '',
  routes: [],
  trackEvent: () => {},
  onCallToActionClick: () => {}
};

export { ProviderComparisonTable as P };
//# sourceMappingURL=ProviderComparisonTable-577b39d8.js.map
