{"version":3,"file":"assets/js/WidgetSetup.7475c3ff0d32c0b04cfe.min.js","mappings":"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","sources":["webpack://payex-web/./src/icons/flywire-header-logo.svg","webpack://payex-web/./src/components/Widget/Widget.tsx","webpack://payex-web/./src/components/WidgetSetup/WidgetSetup.tsx"],"sourcesContent":["var _g;\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nimport * as React from \"react\";\nconst SvgFlywireHeaderLogo = props => /*#__PURE__*/React.createElement(\"svg\", _extends({\n  height: 39,\n  width: 116,\n  xmlns: \"http://www.w3.org/2000/svg\",\n  viewBox: \"0 19 76 27\"\n}, props), _g || (_g = /*#__PURE__*/React.createElement(\"g\", {\n  fill: \"#1274C4\",\n  fillRule: \"evenodd\"\n}, /*#__PURE__*/React.createElement(\"path\", {\n  d: \"m16.06 39.063 3.148-20.02h2.556l-3.148 20.02H16.06m15.615-.385c-.605 3.897-2.86 5.93-6.405 5.93-2.172 0-3.876-.808-5.03-2.172l1.43-1.782c.99 1.17 2.17 1.726 3.572 1.726 2.145 0 3.464-1.252 3.877-3.702l.163-.974h-.055c-1.154 1.086-2.5 1.67-3.986 1.67-2.748 0-4.068-1.392-4.068-4.036 0-.5.055-1.03.138-1.614l1.29-8.236h2.528l-1.262 8.236c-.083.445-.11.807-.11 1.14 0 1.504.66 2.256 2.144 2.256 1.54 0 2.914-.947 3.85-2.59l1.426-9.042h2.557l-2.06 13.19m28.768-10.741.54-2.5h-2.52l-2.144 13.66h2.557l1.135-7.332c.502-2.69 2.47-4.022 4.555-4.022.254 0 .44 0 .643.02l.38-2.43c-2.41-.378-4.218.863-5.146 2.604m-9.637-2.449-4.193 9.45-1.492-9.45h-2.48l-4.313 9.45-1.422-9.45H34.32l2.176 13.66h2.625l4.22-9.468 1.47 9.47h2.6l6.08-13.662h-2.685m.892 13.662 2.144-13.662H56.4l-2.145 13.66h-2.557\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n  d: \"M66.918 30.835c.413-2.313 1.818-3.587 3.96-3.587 1.568 0 2.58.754 2.58 1.922 0 1.433-1.003 2.1-3.16 2.1h-3.46l.08-.435zm2.14 6.257c-.936.02-1.655-.258-2.13-.822-.497-.593-.63-1.568-.416-2.9h3.736c1.127 0 2.65-.152 3.87-.903 1.196-.737 1.803-1.863 1.803-3.348 0-1.03-.437-2.04-1.2-2.774-.887-.852-2.157-1.302-3.672-1.302-5.542 0-6.218 3.98-6.762 7.18l-.193 1.22c-.234 1.704.08 3.08.958 4.206.818 1.047 2.217 1.623 3.94 1.623 5.58 0 6.085-4.75 6.085-4.75h-2.35s-.11 2.498-3.666 2.57zm-59.52-7.826.25-1.495H.66l.375-2.377h9.123l.177-1.138c.523-3.31 2.715-5.216 6.042-5.212h1.827l-.36 2.317-1.71-.002c-1.85-.002-2.908.925-3.242 2.992l-.163 1.043h3.526l-.374 2.378H12.36l-1.925 11.52c-.523 3.31-2.75 5.204-6.095 5.2h-.192l.39-2.512h.125c1.883 0 2.896-.806 3.228-2.864l1.25-7.47H0l.375-2.378h9.163zm47.514-6.519c0 .82-.657 1.482-1.467 1.482s-1.467-.664-1.467-1.483c0-.818.657-1.48 1.467-1.48s1.467.662 1.467 1.48\"\n}))));\nexport { SvgFlywireHeaderLogo as ReactComponent };\nexport default __webpack_public_path__ + \"assets/media/flywire-header-logo.1adf23ad62abb9d5f118716034d3ee70.svg\";","\nimport type { ConnectedProps } from 'react-redux';\nimport { connect } from 'react-redux';\n\nimport { setFieldValue } from 'actions';\nimport { Autocomplete } from 'components/Autocomplete/Autocomplete';\nimport { MoneyInput } from 'components/FieldList/Field/MoneyInputField/MoneyInput';\nimport flywire from 'icons/flywire-header-logo.svg';\nimport type { RootState } from 'reducers/types';\nimport {\n  getCurrentCountry,\n  getCurrentCurrency,\n  getGatewayUrl,\n  getItems,\n  getRecipientCountries,\n  getWidgetMessage,\n} from 'selectors';\nimport { useTranslations } from 'utils';\n\ntype WidgetProps = ConnectedProps<typeof connector>;\n\nconst toOptions = (countries: { name: string; code: string }[]) =>\n  countries.map(country => ({\n    label: country.name,\n    value: country.code,\n  }));\n\nconst countryFieldName = 'sender_country';\n\nconst WidgetComponent = ({\n  countries = [],\n  country,\n  currency,\n  items,\n  gatewayURL,\n  setFieldValue,\n  widgetMessage,\n}: WidgetProps) => {\n  const i18n = useTranslations();\n  const hasOneItem = items.length === 1;\n  const hasWidgetMessage = widgetMessage && widgetMessage.length > 0;\n  const countryOptions = toOptions(countries);\n\n  const handleCountryChange = (value: string) => {\n    setFieldValue(countryFieldName, value);\n  };\n\n  return (\n    <div className=\"padding-md\">\n      <img alt=\"flywire\" className=\"marginBottom-lg\" src={flywire} />\n      {hasWidgetMessage && <p className=\"WidgetMessage\">{widgetMessage}</p>}\n      <Autocomplete\n        name={countryFieldName}\n        data-testid={countryFieldName}\n        onChange={handleCountryChange}\n        options={countryOptions}\n        selected={country?.code}\n      >\n        <Autocomplete.Input\n          data-testid={countryFieldName}\n          placeholder={i18n.t('widget.country') as string}\n        />\n        <Autocomplete.Options />\n      </Autocomplete>\n\n      {hasOneItem && (\n        <MoneyInput\n          currencySymbol={currency?.symbol}\n          decimalMark={currency?.decimalMark}\n          label={items[0].label}\n          maxLength={12}\n          name={items[0].id}\n          onChange={setFieldValue}\n          subunitToUnit={currency?.subunitToUnit}\n          symbolFirst={currency?.symbolFirst}\n          thousandsSeparator={currency?.thousandsSeparator}\n          value={items[0].defaultValue as number}\n        />\n      )}\n      <p>{i18n.t('widget.continue.hint')}</p>\n      <a\n        data-testid=\"widgetContinue\"\n        href={gatewayURL}\n        rel=\"noopener noreferrer\"\n        target=\"_blank\"\n        className=\"Button Button--primary\"\n      >\n        {i18n.t('widget.continue.button')}\n      </a>\n    </div>\n  );\n};\n\nconst mapStateToProps = (state: RootState) => ({\n  countries: getRecipientCountries(state),\n  country: getCurrentCountry(state),\n  currency: getCurrentCurrency(state),\n  gatewayURL: getGatewayUrl(state),\n  items: getItems(state),\n  widgetMessage: getWidgetMessage(state),\n});\n\nconst mapDispatchToProps = {\n  setFieldValue,\n};\n\nconst connector = connect(mapStateToProps, mapDispatchToProps);\nconst Widget = connector(WidgetComponent);\n\nexport { Widget };\n","import { useEffect, useMemo, useState } from 'react';\nimport { useSelector } from 'react-redux';\nimport { useSearchParams } from 'react-router-dom';\n\nimport isEmpty from 'lodash/isEmpty';\n\nimport { useDispatch } from 'store/configureStore';\n\nimport {\n  fetchCountries,\n  fetchRecipientByCode,\n  fetchRecipientCountries,\n} from 'actions';\nimport { InvalidRecipient } from 'components/InvalidRecipient/InvalidRecipient';\nimport { Spinner } from 'components/Spinner/Spinner';\nimport { Widget } from 'components/Widget/Widget';\nimport type { RootState } from 'reducers/types';\nimport {\n  entityHasErrors,\n  getCountries,\n  getRecipientCountries,\n  getRecipientId,\n} from 'selectors';\n\nfunction WidgetSetup() {\n  const [isFetching, setIsFetching] = useState(true);\n  const [searchParams] = useSearchParams();\n  const dispatch = useDispatch();\n\n  const countries = useSelector((state: RootState) => getCountries(state));\n  const recipientCountries = useSelector((state: RootState) =>\n    getRecipientCountries(state),\n  );\n  const recipientCode = useSelector((state: RootState) =>\n    getRecipientId(state),\n  );\n  const hasRecipientErrors = useSelector((state: RootState) =>\n    entityHasErrors(state, 'recipient'),\n  );\n\n  const subdomain = searchParams.get('subdomain');\n  const recipient =\n    searchParams.get('recipient') || searchParams.get('destination');\n\n  const areCountriesFetched = useMemo(() => !isEmpty(countries), [countries]);\n  const areRecipientCountriesFetched = useMemo(\n    () => !isEmpty(recipientCountries),\n    [recipientCountries],\n  );\n\n  function addWidgetStyles() {\n    // @ts-expect-error not sure\n    import('./WidgetSetup.scss');\n  }\n\n  useEffect(() => {\n    if (areCountriesFetched && areRecipientCountriesFetched && isFetching) {\n      setIsFetching(false);\n    }\n\n    if (recipientCode && isFetching) {\n      dispatch(fetchRecipientCountries(recipientCode));\n    }\n  }, [\n    areCountriesFetched,\n    areRecipientCountriesFetched,\n    recipientCode,\n    dispatch,\n    isFetching,\n  ]);\n\n  useEffect(() => {\n    addWidgetStyles();\n    dispatch(fetchCountries('en'));\n\n    if (subdomain) {\n      dispatch(fetchRecipientByCode(subdomain));\n    } else if (recipient) {\n      dispatch(fetchRecipientByCode(recipient));\n    }\n  }, []); // eslint-disable-line\n\n  if (hasRecipientErrors) {\n    return <InvalidRecipient />;\n  }\n  if (isFetching) {\n    return <Spinner />;\n  }\n\n  return <Widget />;\n}\n\nexport { WidgetSetup };\n"],"names":["countryFieldName","mapDispatchToProps","setFieldValue","Widget","connect","state","countries","getRecipientCountries","country","getCurrentCountry","currency","getCurrentCurrency","gatewayURL","getGatewayUrl","items","getItems","widgetMessage","getWidgetMessage","connector","_ref","i18n","useTranslations","hasOneItem","length","hasWidgetMessage","countryOptions","map","label","name","value","code","toOptions","_jsxs","className","children","_jsx","alt","src","flywire","Autocomplete","onChange","options","selected","Input","placeholder","t","Options","MoneyInput","currencySymbol","symbol","decimalMark","maxLength","id","subunitToUnit","symbolFirst","thousandsSeparator","defaultValue","href","rel","target","WidgetSetup","isFetching","setIsFetching","useState","searchParams","useSearchParams","dispatch","useDispatch","useSelector","getCountries","recipientCountries","recipientCode","getRecipientId","hasRecipientErrors","entityHasErrors","subdomain","get","recipient","areCountriesFetched","useMemo","isEmpty","areRecipientCountriesFetched","useEffect","fetchRecipientCountries","fetchCountries","fetchRecipientByCode","InvalidRecipient","Spinner"],"sourceRoot":""}