diff --git a/apps/blog/src/assets/i18n/en.json b/apps/blog/src/assets/i18n/en.json index 1b7ec03c..9701e4a9 100644 --- a/apps/blog/src/assets/i18n/en.json +++ b/apps/blog/src/assets/i18n/en.json @@ -25,6 +25,7 @@ "about": "About us", "meetups": "Angular Meetups", "become_author": "Become an author", + "newsletter": "Angular.letter", "navLinks": "Navigation links", "languagePicker": { "pl": "Polish", @@ -95,15 +96,20 @@ "title": "Sign up for our newsletter", "description": "Stay up-to-date with the trends and be a part of a thriving community.", "emailPlaceholder": "Your E-mail", + "namePlaceholder": "Your Name", "submitLabel": "Submit and sign up for a newsletter", "label": "Consent to process email for newsletter.", "consent": "I consent to Angular.love processing my email address for the purpose of sending the newsletter.", "error": "Something went wrong. Please try again." }, "newsletterPage": { - "title": "You have correctly signed up for the newsletter", - "description": "From now on you will be up to date with all the information we will make available on the blog.", - "button": "Return to the home page" + "title": "Newsletter Angular.love", + "description": "Staying up to date with Angular takes time. We know, because we work with it every day. That's why we created Angular.letter - a short, curated update with the most important news, tips, and events. No fluff, no spam. Just what really matters - delivered straight to your inbox every month.", + "success": { + "title": "Thank you for subscribing!", + "description": "You've successfully subscribed to our newsletter. We'll send you an email with the latest news and updates.", + "button": "Return to the home page" + } }, "notFoundPage": { "title": "404", diff --git a/apps/blog/src/assets/i18n/pl.json b/apps/blog/src/assets/i18n/pl.json index 4cd8996e..d7e12e24 100644 --- a/apps/blog/src/assets/i18n/pl.json +++ b/apps/blog/src/assets/i18n/pl.json @@ -25,6 +25,7 @@ "about": "O nas", "meetups": "Angular Meetups", "become_author": "Zostań autorem", + "newsletter": "Angular.letter", "navLinks": "Menu", "languagePicker": { "pl": "Polski", @@ -98,15 +99,20 @@ "title": "Zapisz się na nasz newsletter", "description": "Dołącz do community Angular.love i bądź na bieżąco z trendami.", "emailPlaceholder": "Twój e-mail", + "namePlaceholder": "Twoje imię", "submitLabel": "Wyślij i zapisz się na newsletter", "label": "Zgoda na przetwarzanie adresu email do newslettera.", "consent": "Wyrażam zgodę na przetwarzanie mojego adresu e-mail przez Angular.love w celu wysyłki newslettera.", "error": "Ups... coś poszło nie tak. Spróbuj ponownie." }, "newsletterPage": { - "title": "Pomyślnie zapisałeś się na newsletter!", - "description": "Od teraz będziesz na bieżąco ze wszystkimi informacjami jakie będziemy udostępniać na blogu.", - "button": "Powrót na stronę główną" + "title": "Newsletter Angular.love", + "description": "Bycie na bieżąco z Angularem to spore wyzwanie. Wiemy, bo pracujemy z nim na co dzień. Właśnie dlatego powstał newsletter Angular.letter — krótka, starannie dobrana dawka najważniejszych newsów, tipów i wydarzeń. Zero lania wody, zero spamu. Tylko to, co naprawdę ma znaczenie — prosto na Twoją skrzynkę.", + "success": { + "title": "Pomyślnie zapisałeś się na newsletter!", + "description": "Od teraz będziesz na bieżąco ze wszystkimi informacjami jakie będziemy udostępniać na blogu.", + "button": "Powrót na stronę główną" + } }, "notFoundPage": { "title": "404", diff --git a/libs/blog/layouts/ui-navigation/src/lib/navigation/navigation.component.ts b/libs/blog/layouts/ui-navigation/src/lib/navigation/navigation.component.ts index 35b96b7b..3da42a2c 100644 --- a/libs/blog/layouts/ui-navigation/src/lib/navigation/navigation.component.ts +++ b/libs/blog/layouts/ui-navigation/src/lib/navigation/navigation.component.ts @@ -50,6 +50,11 @@ export class NavigationComponent { link: ['become-author'], dataTestId: 'navigation-become-author', }, + { + translationPath: 'nav.newsletter', + link: ['newsletter'], + dataTestId: 'navigation-newsletter', + }, ]; protected navigated = output(); } diff --git a/libs/blog/newsletter/feature-newsletter/src/lib/feature-newsletter/newsletter.component.html b/libs/blog/newsletter/feature-newsletter/src/lib/feature-newsletter/newsletter.component.html index ac9f19bd..33c92ced 100644 --- a/libs/blog/newsletter/feature-newsletter/src/lib/feature-newsletter/newsletter.component.html +++ b/libs/blog/newsletter/feature-newsletter/src/lib/feature-newsletter/newsletter.component.html @@ -12,6 +12,16 @@

{{ t('description') }}

+ + +
('', { + validators: [Validators.required], + }), email: new FormControl('', { validators: [ Validators.required, diff --git a/libs/blog/newsletter/feature-newsletter/src/lib/page/newsletter-page.component.html b/libs/blog/newsletter/feature-newsletter/src/lib/page/newsletter-page.component.html new file mode 100644 index 00000000..965d0ace --- /dev/null +++ b/libs/blog/newsletter/feature-newsletter/src/lib/page/newsletter-page.component.html @@ -0,0 +1,26 @@ +@if (isConfirmationPage()) { + +} @else { + +

+ {{ t('title') }} +

+ + +
+
+

{{ t('description') }}

+
+
+ + + + + + +} diff --git a/libs/blog/newsletter/feature-newsletter/src/lib/page/newsletter-page.component.ts b/libs/blog/newsletter/feature-newsletter/src/lib/page/newsletter-page.component.ts index ea9b94b7..fdf51ac3 100644 --- a/libs/blog/newsletter/feature-newsletter/src/lib/page/newsletter-page.component.ts +++ b/libs/blog/newsletter/feature-newsletter/src/lib/page/newsletter-page.component.ts @@ -1,43 +1,37 @@ import { A11yModule } from '@angular/cdk/a11y'; -import { ChangeDetectionStrategy, Component } from '@angular/core'; -import { RouterLink } from '@angular/router'; +import { + ChangeDetectionStrategy, + Component, + computed, + inject, +} from '@angular/core'; +import { toSignal } from '@angular/core/rxjs-interop'; +import { ActivatedRoute } from '@angular/router'; import { TranslocoDirective } from '@jsverse/transloco'; -import { FastSvgComponent } from '@push-based/ngx-fast-svg'; -import { AlLocalizePipe } from '@angular-love/blog/i18n/util'; -import { ButtonComponent } from '@angular-love/blog/shared/ui-button'; +import { CardComponent } from '@angular-love/blog/shared/ui-card'; + +import { NewsletterComponent } from '../feature-newsletter/newsletter.component'; + +import { NewsletterSuccesComponent } from './newsletter-succes/newsletter-succes.component'; @Component({ selector: 'al-newsletter-page', imports: [ - RouterLink, - ButtonComponent, TranslocoDirective, A11yModule, - AlLocalizePipe, - FastSvgComponent, + CardComponent, + NewsletterComponent, + NewsletterSuccesComponent, ], - template: ` -
- -

- {{ t('title') }} -

-

- {{ t('description') }} -

- - - -
- `, + templateUrl: './newsletter-page.component.html', changeDetection: ChangeDetectionStrategy.OnPush, }) -export class NewsletterPageComponent {} +export class NewsletterPageComponent { + private route = inject(ActivatedRoute); + private params = toSignal(this.route.queryParams); + + protected readonly isConfirmationPage = computed( + () => this.params()?.['nm'] === 'confirmed', + ); +} diff --git a/libs/blog/newsletter/feature-newsletter/src/lib/page/newsletter-succes/newsletter-succes.component.html b/libs/blog/newsletter/feature-newsletter/src/lib/page/newsletter-succes/newsletter-succes.component.html new file mode 100644 index 00000000..9775557f --- /dev/null +++ b/libs/blog/newsletter/feature-newsletter/src/lib/page/newsletter-succes/newsletter-succes.component.html @@ -0,0 +1,19 @@ +
+ +

+ {{ t('success.title') }} +

+

+ {{ t('success.description') }} +

+ + + +
diff --git a/libs/blog/newsletter/feature-newsletter/src/lib/page/newsletter-succes/newsletter-succes.component.ts b/libs/blog/newsletter/feature-newsletter/src/lib/page/newsletter-succes/newsletter-succes.component.ts new file mode 100644 index 00000000..19a278ad --- /dev/null +++ b/libs/blog/newsletter/feature-newsletter/src/lib/page/newsletter-succes/newsletter-succes.component.ts @@ -0,0 +1,23 @@ +import { A11yModule } from '@angular/cdk/a11y'; +import { ChangeDetectionStrategy, Component } from '@angular/core'; +import { RouterLink } from '@angular/router'; +import { TranslocoDirective } from '@jsverse/transloco'; +import { FastSvgComponent } from '@push-based/ngx-fast-svg'; + +import { AlLocalizePipe } from '@angular-love/blog/i18n/util'; +import { ButtonComponent } from '@angular-love/blog/shared/ui-button'; + +@Component({ + selector: 'al-newsletter-success', + imports: [ + TranslocoDirective, + A11yModule, + FastSvgComponent, + RouterLink, + AlLocalizePipe, + ButtonComponent, + ], + templateUrl: './newsletter-succes.component.html', + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class NewsletterSuccesComponent {}