Feature/newsletter page

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",

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",

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();
 }

libs/blog/newsletter/feature-newsletter/src/lib/feature-newsletter/newsletter.component.html

@@ -12,6 +12,16 @@
           <p class="py-4">{{ t('description') }}</p>
           <fieldset>
             <legend class="hidden">Newsletter sign up form</legend>
+
+            <input
+              aria-required="true"
+              type="text"
+              class="bg-al-background text-al-muted border-al-border my-2 h-[60px] w-full flex-grow rounded-md border p-6 text-sm focus:outline-none"
+              [attr.aria-label]="t('namePlaceholder')"
+              [placeholder]="t('namePlaceholder')"
+              formControlName="name"
+            />
+
             <div class="my-2 flex w-full flex-row">
               <input
                 aria-required="true"

libs/blog/newsletter/feature-newsletter/src/lib/feature-newsletter/newsletter.component.ts

@@ -38,6 +38,9 @@ import { NewsletterStore } from '@angular-love/data-access';
 })
 export class NewsletterComponent {
   protected readonly form = new FormGroup({
+    name: new FormControl<string>('', {
+      validators: [Validators.required],
+    }),
     email: new FormControl<string>('', {
       validators: [
         Validators.required,

libs/blog/newsletter/feature-newsletter/src/lib/page/newsletter-page.component.html

@@ -0,0 +1,26 @@
+@if (isConfirmationPage()) {
+  <al-newsletter-success />
+} @else {
+  <ng-container *transloco="let t; read: 'newsletterPage'">
+    <h2 class="py-4 text-[40px] font-bold">
+      {{ t('title') }}
+    </h2>
+
+    <al-card>
+      <section
+        alCardContent
+        aria-labelledby="angular-love"
+        class="flex flex-col p-2 lg:flex-row"
+      >
+        <div class="mr-14 flex w-full flex-col items-center justify-center">
+          <p class="text-xl md:px-12">{{ t('description') }}</p>
+        </div>
+        <al-newsletter class="hidden lg:block" />
+      </section>
+    </al-card>
+
+    <al-card alGradientCard class="mt-6 block md:mt-8 lg:hidden">
+      <al-newsletter alCardContent />
+    </al-card>
+  </ng-container>
+}

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: `
-    <div
-      *transloco="let t; read: 'newsletterPage'"
-      class="flex flex-col items-center justify-center py-5 text-center"
-      [cdkTrapFocusAutoCapture]="true"
-      cdkTrapFocus
-    >
-      <fast-svg name="circle-check" size="80" />
-      <h2 class="my-2 text-2xl font-bold">
-        {{ t('title') }}
-      </h2>
-      <p class="my-3">
-        {{ t('description') }}
-      </p>
-      <a [routerLink]="['/'] | alLocalize">
-        <button al-button type="button" cdkFocusInitial>
-          {{ t('button') }}
-        </button>
-      </a>
-    </div>
-  `,
+  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',
+  );
+}

libs/blog/newsletter/feature-newsletter/src/lib/page/newsletter-succes/newsletter-succes.component.html

@@ -0,0 +1,19 @@
+<div
+  *transloco="let t; read: 'newsletterPage'"
+  class="flex flex-col items-center justify-center py-5 text-center"
+  [cdkTrapFocusAutoCapture]="true"
+  cdkTrapFocus
+>
+  <fast-svg name="circle-check" size="80" />
+  <h2 class="my-2 text-2xl font-bold">
+    {{ t('success.title') }}
+  </h2>
+  <p class="my-3">
+    {{ t('success.description') }}
+  </p>
+  <a class="mt-4" [routerLink]="['/'] | alLocalize">
+    <button al-button type="button" cdkFocusInitial>
+      {{ t('success.button') }}
+    </button>
+  </a>
+</div>

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 {}