feat: newsletter page (#451)

Co-authored-by: maja <[email protected]>

Author: marcin-hoa

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,28 @@
     "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",
+    "subtitle": "Join Angular.letter and get insights every 2 weeks",
+    "description1": "Staying up to date with Angular takes time - we know this because we work with it every day.",
+    "description2": "That’s why we created <b>Angular.letter</b> - a short, curated update <b>written by developers from Angular.love community</b> for developers like you.",
+    "description3": "It’s sent once every two weeks at most and is packed with only the essentials:",
+    "subsection1": "top news,",
+    "subsection2": "Angular practical tips, ",
+    "subsection3": "event invitations: meetups, conferences, Angular Camps",
+    "subsection4": "Conference ticket discounts for community members.",
+    "sampleNewsletters": "Check out sample newsletters:",
+    "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,28 @@
     "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",
+    "subtitle": "Dołącz do Angular.letter i co dwa tygodnie otrzymuj solidną dawkę wiedzy o Angularze",
+    "description1": "Bycie na bieżąco z Angularem wymaga czasu - wiemy o tym, ponieważ pracujemy z nim na co dzień.",
+    "description2": "Dlatego stworzyliśmy <b>Angular.letter</b> - newsletter <b>pisany przez programistów z community Angular.love</b> dla programistów takich jak Ty.",
+    "description3": "Newsletter wysyłany jest maksymalnie raz na dwa tygodnie i zawiera tylko najciekawsze informacje:",
+    "subsection1": "Najważniejsze wiadomości,",
+    "subsection2": "Praktyczne wskazówki dotyczące Angulara,",
+    "subsection3": "Zaproszenia na wydarzenia: spotkania, konferencje, Angular Camps",
+    "subsection4": "Zniżki na bilety konferencyjne dla członków społeczności.",
+    "sampleNewsletters": "Zobacz nasze przykładowe newslettery:",
+    "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-layouts/src/lib/header/header.component.ts

@@ -27,7 +27,7 @@ import {
       >
         <al-header-logo />
 
-        <al-navigation class="hidden lg:block" />
+        <al-navigation class="hidden lg:block" [showNewsletter]="false" />
 
         <div class="flex flex-row items-center">
           <al-language-picker

libs/blog/layouts/ui-navigation/src/lib/navigation/navigation.component.html

@@ -12,7 +12,7 @@
     }"
     [attr.aria-label]="t('nav.navLinks')"
   >
-    @for (item of navItems; track $index) {
+    @for (item of filteredNavItems(); track $index) {
       @if (!item.externalLink) {
         <li
           [ngClass]="{

libs/blog/layouts/ui-navigation/src/lib/navigation/navigation.component.ts

@@ -2,6 +2,7 @@ import { NgClass } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
+  computed,
   input,
   output,
 } from '@angular/core';
@@ -15,6 +16,7 @@ export type NavItem = {
   link: string[];
   dataTestId: string;
   externalLink?: boolean;
+  showElement?: boolean;
 };
 
 @Component({
@@ -32,6 +34,14 @@ export type NavItem = {
 })
 export class NavigationComponent {
   readonly layout = input<'vertical' | 'horizontal'>('horizontal');
+  showNewsletter = input(true);
+
+  readonly filteredNavItems = computed(() => {
+    return this.navItems.filter(
+      (item) =>
+        item.translationPath !== 'nav.newsletter' || this.showNewsletter(),
+    );
+  });
 
   readonly navItems: NavItem[] = [
     {
@@ -50,6 +60,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"
@@ -58,6 +68,11 @@
                     class="border-al-muted mr-2 mt-1 flex aspect-square h-[14px] items-center justify-center rounded border"
                     [attr.aria-label]="t('label')"
                     [attr.aria-checked]="form.controls.checkbox.value"
+                    (click)="
+                      form.controls['checkbox'].setValue(
+                        !form.controls['checkbox'].value
+                      )
+                    "
                     (keydown.enter)="
                       form.controls['checkbox'].setValue(
                         !form.controls['checkbox'].value

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,