fix: make i18n work for the newsletter page (#3308)

Co-authored-by: Ansh Goyal <[email protected]>

components/NewsletterSubscribe.tsx

@@ -1,11 +1,11 @@
-import { useTranslation } from 'next-i18next';
 import React, { useState } from 'react';
 
 import IconCircularLoader from '@/components/icons/CircularLoader';
 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<string>('');
   const [name, setName] = useState<string>('');
   const [status, setStatus] = useState<FormStatus>(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 (
       <div className={className} data-testid='NewsletterSubscribe-main'>
         <Heading level={HeadingLevel.h3} textColor={headTextColor} typeStyle={HeadingTypeStyle.lg} className='mb-4'>
-          {t('newsletterCTA.successTitle')}
+          {ready ? t('successTitle') : 'Thank you for subscribing!'}
         </Heading>
         <Paragraph className='mb-8' textColor={paragraphTextColor}>
-          {t('newsletterCTA.subtitle')}
+          {ready ? t('subtitle') : subtitle}
         </Paragraph>
       </div>
     );
@@ -107,12 +110,12 @@ export default function NewsletterSubscribe({
     return (
       <div className={className} data-testid='NewsletterSubscribe-main'>
         <Heading level={HeadingLevel.h3} textColor={headTextColor} typeStyle={HeadingTypeStyle.lg} className='mb-4'>
-          {t('newsletterCTA.errorTitle')}
+          {ready ? t('errorTitle') : 'Something went wrong'}
         </Heading>
         <Paragraph className='mb-8' textColor={paragraphTextColor}>
-          {t('newsletterCTA.errorSubtitle')}{' '}
+          {ready ? t('errorSubtitle') : errorSubtitle}{' '}
           <TextLink href='https://github.com/asyncapi/website/issues/new?template=bug.md' target='_blank'>
-            {t('newsletterCTA.errorLinkText')}
+            {ready ? t('errorLinkText') : 'here'}
           </TextLink>
         </Paragraph>
       </div>
@@ -122,10 +125,10 @@ export default function NewsletterSubscribe({
   return (
     <div className={className} data-testid='NewsletterSubscribe-main'>
       <Heading level={HeadingLevel.h3} textColor={headTextColor} typeStyle={HeadingTypeStyle.lg} className='mb-4'>
-        {title}
+        {ready ? t('title') : title}
       </Heading>
       <Paragraph className='mb-8' textColor={paragraphTextColor}>
-        {subtitle}
+        {ready ? t('subtitle') : subtitle}
       </Paragraph>
       {status === 'loading' ? (
         <Loader loaderText={'Waiting for response...'} loaderIcon={<IconCircularLoader dark />} dark={dark} />
@@ -134,20 +137,20 @@ export default function NewsletterSubscribe({
           <InputBox
             inputType={InputTypes.TEXT}
             inputName='name'
-            placeholder={t('newsletterCTA.nameInput')}
+            placeholder={ready ? t('nameInput') : 'Your name'}
             inputValue={name}
             setInput={setName}
           />
           <InputBox
             inputType={InputTypes.EMAIL}
             inputName='email'
-            placeholder={t('newsletterCTA.emailInput')}
+            placeholder={ready ? t('emailInput') : 'Your email'}
             inputValue={email}
             setInput={setEmail}
           />
           <Button
             type={ButtonType.SUBMIT}
-            text={t('newsletterCTA.subscribeBtn')}
+            text={ready ? t('subscribeBtn') : 'Subscribe'}
             className='mt-2 w-full md:mr-2 md:mt-0 md:flex-1'
             href=''
           />

pages/[lang]/newsletter.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import Head from '@/components/Head';
+import Container from '@/components/layout/Container';
+import NewsletterSubscribe from '@/components/NewsletterSubscribe';
+import { getStaticPaths, makeStaticProps } from '@/utils/getStatic';
+
+const getStaticProps = makeStaticProps(['common']);
+
+export { getStaticPaths, getStaticProps };
+
+/**
+ * @description component that is used on landing page to embed newsletter and subscription option.
+ */
+export default function NewsletterIndexPage() {
+  return (
+    <div>
+      <Head title='Newsletter' />
+      <div className='mt-12 py-12'>
+        <Container wide>
+          <NewsletterSubscribe />
+        </Container>
+      </div>
+    </div>
+  );
+}

pages/newsletter.tsx

@@ -3,11 +3,14 @@ import React from 'react';
 import Head from '@/components/Head';
 import Container from '@/components/layout/Container';
 import NewsletterSubscribe from '@/components/NewsletterSubscribe';
+import { Redirect } from '@/utils/redirect';
 
 /**
  * @description component that is used on landing page to embed newsletter and subscription option.
  */
 export default function NewsletterIndexPage() {
+  Redirect();
+
   return (
     <div>
       <Head title='Newsletter' />

utils/i18n.ts

@@ -7,11 +7,13 @@ interface I18nPaths {
 export const i18nPaths: I18nPaths = {
   en: [
     '', // Homepage Route
-    '/tools/cli'
+    '/tools/cli',
+    '/newsletter'
   ],
   de: [
     '', // Homepage Route
-    '/tools/cli'
+    '/tools/cli',
+    '/newsletter'
   ]
 };