import { Body, Box, Link } from '@biom3/react'; import { Checkout } from '@imtbl/checkout-sdk'; import { useState, useEffect } from 'react'; import { useTranslation } from 'react-i18next'; import { PASSPORT_URL } from '../../lib'; import { supportMessageBoxStyle, bodyStyle } from './SupportMessageStyles'; type SupportMessageProps = { checkout: Checkout, isPassport: boolean, }; export function SupportMessage({ checkout, isPassport, }: SupportMessageProps) { const { t } = useTranslation(); const [passportLink, setPassportLink] = useState(''); useEffect(() => { if (!checkout) return; setPassportLink(PASSPORT_URL[checkout.config.environment]); }, [checkout]); return ( {t('views.TRANSACTIONS.support.body1')} {t('views.TRANSACTIONS.support.body2')} } > {t('views.TRANSACTIONS.support.body3')} {isPassport && ( {t('views.TRANSACTIONS.support.passport.body1')} {' '} } > {t('views.TRANSACTIONS.support.passport.body2')} )} ); }