Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: make i18n work for the newsletter page #3308

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

fix: make i18n work for the newsletter page #3308

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 16 additions & 13 deletions components/NewsletterSubscribe.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -26,6 +26,7 @@ interface NewsletterSubscribeProps {
title?: string;
subtitle?: string;
type?: string;
errorSubtitle?: string;
}

/**
Expand All @@ -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' : '';
Expand Down Expand Up @@ -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>
);
Expand All @@ -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>
Expand All @@ -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} />
Expand All @@ -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=''
/>
Expand Down
26 changes: 26 additions & 0 deletions pages/[lang]/newsletter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
);
}
Comment on lines +1 to +26
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

Inconsistent import paths for NewsletterSubscribe component.

Several files import NewsletterSubscribe using both alias (@/components/NewsletterSubscribe) and relative paths (e.g., ../../components/NewsletterSubscribe). Please standardize the import paths to maintain consistency across the codebase.

🔗 Analysis chain

Great implementation of the newsletter page with i18n support.

This file successfully implements a new page for newsletter subscription, addressing the PR objectives. It follows React and Next.js best practices, including proper setup for internationalization. The code is clean, well-structured, and maintainable.

To ensure consistency across the project, let's verify the usage of the NewsletterSubscribe component:

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Check for consistent usage of NewsletterSubscribe component

# Test: Search for other usages of NewsletterSubscribe
echo "Checking for other usages of NewsletterSubscribe:"
rg "NewsletterSubscribe" --type tsx --type ts

# Test: Verify the import path for NewsletterSubscribe
echo "\nVerifying import path for NewsletterSubscribe:"
rg "import.*NewsletterSubscribe.*from" --type tsx --type ts

Length of output: 379

Script:

#!/bin/bash
# Description: Check for consistent usage of NewsletterSubscribe component

# Test: Search for other usages of NewsletterSubscribe in .ts and .tsx files
echo "Checking for other usages of NewsletterSubscribe:"
rg "NewsletterSubscribe" --glob "*.ts" --glob "*.tsx"

# Test: Verify the import path for NewsletterSubscribe in .ts and .tsx files
echo "\nVerifying import path for NewsletterSubscribe:"
rg "import.*NewsletterSubscribe.*from" --glob "*.ts" --glob "*.tsx"

Length of output: 3152

3 changes: 3 additions & 0 deletions pages/newsletter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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' />
Expand Down
6 changes: 4 additions & 2 deletions utils/i18n.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
]
};

Expand Down
Loading