diff --git a/components/NewsletterSubscribe.tsx b/components/NewsletterSubscribe.tsx index 9b4a983bc69..3d9e0863dd6 100644 --- a/components/NewsletterSubscribe.tsx +++ b/components/NewsletterSubscribe.tsx @@ -1,4 +1,3 @@ -import { useTranslation } from 'next-i18next'; import React, { useState } from 'react'; import IconCircularLoader from '@/components/icons/CircularLoader'; @@ -6,6 +5,7 @@ import { ButtonType } from '@/types/components/buttons/ButtonPropsType'; import { InputTypes } from '@/types/components/InputBoxPropsType'; import { HeadingLevel, HeadingTypeStyle } from '@/types/typography/Heading'; +import { useTranslation } from '../utils/i18n'; import Button from './buttons/Button'; import InputBox from './InputBox'; import Loader from './Loader'; @@ -26,6 +26,7 @@ interface NewsletterSubscribeProps { title?: string; subtitle?: string; type?: string; + errorSubtitle?: string; } /** @@ -37,19 +38,21 @@ interface NewsletterSubscribeProps { * @param {string} props.title - The title of the Subscribe card. * @param {string} props.subtitle - The subtitle of the Subscribe card. * @param {string} props.type - The type of subscription. + * @param {string} props.errorSubtitle - The error subtitle to be displayed. */ export default function NewsletterSubscribe({ className = 'p-8 text-center text-black', dark = false, title = 'Subscribe to our newsletter to receive news about AsyncAPI.', subtitle = 'We respect your inbox. No spam, promise ✌️', - type = 'Newsletter' + type = 'Newsletter', + errorSubtitle = 'Subscription failed, please let us know about it by submitting a bug' }: NewsletterSubscribeProps) { const [email, setEmail] = useState(''); const [name, setName] = useState(''); const [status, setStatus] = useState(FormStatus.NORMAL); - const { t } = useTranslation('common'); + const { t, ready } = useTranslation('common', { keyPrefix: 'newsletterCTA' }); const headTextColor = dark ? 'text-white' : ''; const paragraphTextColor = dark ? 'text-gray-300' : ''; @@ -94,10 +97,10 @@ export default function NewsletterSubscribe({ return (
- {t('newsletterCTA.successTitle')} + {ready ? t('successTitle') : 'Thank you for subscribing!'} - {t('newsletterCTA.subtitle')} + {ready ? t('subtitle') : subtitle}
); @@ -107,12 +110,12 @@ export default function NewsletterSubscribe({ return (
- {t('newsletterCTA.errorTitle')} + {ready ? t('errorTitle') : 'Something went wrong'} - {t('newsletterCTA.errorSubtitle')}{' '} + {ready ? t('errorSubtitle') : errorSubtitle}{' '} - {t('newsletterCTA.errorLinkText')} + {ready ? t('errorLinkText') : 'here'}
@@ -122,10 +125,10 @@ export default function NewsletterSubscribe({ return (
- {title} + {ready ? t('title') : title} - {subtitle} + {ready ? t('subtitle') : subtitle} {status === 'loading' ? ( } dark={dark} /> @@ -134,20 +137,20 @@ export default function NewsletterSubscribe({