Merge branch '278-3-mon-compte-gestion-de-la-newsletters-dans-son-profil' into 'dev'

feat(profile): manage newsletter subscription

See merge request !561

src/app/form/footer-form/footer-form.component.ts

@@ -135,7 +135,7 @@ export class FooterFormComponent implements OnChanges {
       try {
         await firstValueFrom(this.authService.register(user));
         if (this.acceptNewsletter) {
-          this.newsletterService.newsletterSubscribe(user.email);
+          this.newsletterService.subscribe(user.email);
         }
         document.getElementsByClassName('page')[0].scrollTo(0, 0);
         this.changeCurrentStep.emit(accountFormStep.confirmEmailSentInfo);

src/app/newsletter-subscription/newsletter-subscription.component.ts

@@ -50,7 +50,7 @@ export class NewsletterSubscriptionComponent implements OnInit {
     }
     this.loading = true;
     if (this.subscriptionMod) {
-      await lastValueFrom(this.newsletterService.newsletterSubscribe(this.f.email.value))
+      await lastValueFrom(this.newsletterService.subscribe(this.f.email.value))
         .then(() => {
           this.notificationService.showSuccess(`L'email ${this.f.email.value} a bien été ajouté à la newsletter`);
           this.router.navigate(['']);
@@ -70,7 +70,7 @@ export class NewsletterSubscriptionComponent implements OnInit {
         });
     }
     if (!this.subscriptionMod) {
-      await lastValueFrom(this.newsletterService.newsletterUnsubscribe(this.f.email.value))
+      await lastValueFrom(this.newsletterService.unsubscribe(this.f.email.value))
         .then(() => {
           this.notificationService.showSuccess(`L'email ${this.f.email.value} a bien été retiré de la newsletter`);
           this.router.navigate(['']);

src/app/profile/profile-newsletter/profile-newsletter.component.html

+<div *ngIf="isSubscribed">
+  <p>Vous êtes abonné·e à la newsletter Rés'in.</p>
+  <app-button
+    [text]="'Me désabonner de la newsletter'"
+    [style]="buttonTypeEnum.Secondary"
+    [disabled]="isLoading"
+    (click)="handleUnsubscribe()"
+  />
+</div>
+<div *ngIf="!isSubscribed">
+  <p>Vous n’êtes pas encore abonné·e à la newsletter Rés'in.</p>
+  <app-button
+    [text]="'M\'abonner à la newsletter'"
+    [style]="buttonTypeEnum.Primary"
+    [disabled]="isLoading"
+    (click)="handleSubscribe()"
+  />
+</div>

src/app/profile/profile-newsletter/profile-newsletter.component.ts

+import { Component, Input, OnInit } from '@angular/core';
+import { NewsletterService } from '../../services/newsletter.service';
+import { NotificationService } from '../../services/notification.service';
+import { ButtonType } from '../../shared/components/button/buttonType.enum';
+
+@Component({
+  selector: 'app-profile-newsletter',
+  templateUrl: './profile-newsletter.component.html',
+})
+export class ProfileNewsletterComponent implements OnInit {
+  @Input() public userEmail: string;
+  public buttonTypeEnum = ButtonType;
+  public isSubscribed = false;
+  public isLoading = true;
+
+  constructor(private newsletterService: NewsletterService, private notificationService: NotificationService) {}
+
+  ngOnInit(): void {
+    this.newsletterService.find(this.userEmail).subscribe({
+      next: (result) => {
+        this.isSubscribed = result !== null;
+        this.isLoading = false;
+      },
+    });
+  }
+
+  public handleSubscribe() {
+    this.isLoading = true;
+    this.newsletterService.subscribe(this.userEmail).subscribe({
+      next: (result) => {
+        this.notificationService.showSuccess(`L'email ${result.email} a bien été ajouté à la newsletter`);
+        this.isSubscribed = true;
+        this.isLoading = false;
+      },
+      error: (error) => {
+        if (error.status === 418) {
+          this.notificationService.showError(
+            "Merci de vérifier l'email que vous souhaitez inscrire",
+            `L'email ${this.userEmail} semble factice ou invalide`
+          );
+        } else {
+          this.notificationService.showErrorPleaseRetry(`L'email ${this.userEmail} n'a pu être ajouté à la newsletter`);
+        }
+        this.isLoading = false;
+      },
+    });
+  }
+
+  public handleUnsubscribe() {
+    this.isLoading = true;
+    this.newsletterService.unsubscribe(this.userEmail).subscribe({
+      next: (result) => {
+        this.notificationService.showSuccess(`L'email ${result.email} a bien été retiré à la newsletter`);
+        this.isSubscribed = false;
+        this.isLoading = false;
+      },
+      error: (error) => {
+        if (error.status === 404) {
+          this.notificationService.showError(
+            "Merci de vérifier l'email que vous souhaitez désinscrire",
+            `L'email ${this.userEmail} n'est pas inscrit à la newsletter`
+          );
+        } else {
+          this.notificationService.showErrorPleaseRetry(
+            `L'email ${this.userEmail} n'a pu être retiré de la newsletter`
+          );
+        }
+        this.isLoading = false;
+      },
+    });
+  }
+}

src/app/profile/profile.component.html

@@ -133,15 +133,17 @@
     </div>
   </section>
 
-  <!-- Features not implemented yet -->
-  <!-- <section *ngIf="!isPublic">
+  <section *ngIf="!isPublic">
     <div class="header">
-      <h1>Ressources</h1>
+      <h1>Newsletter</h1>
     </div>
+    <app-profile-newsletter [userEmail]="this.userProfile.email" />
   </section>
-  <section *ngIf="!isPublic">
+
+  <!-- Features not implemented yet -->
+  <!-- <section *ngIf="!isPublic">
     <div class="header">
-      <h1>Newsletter</h1>
+      <h1>Ressources</h1>
     </div>
   </section> -->
 </div>

src/app/profile/profile.module.ts

@@ -14,6 +14,7 @@ import { NoInformationComponent } from './structure-edition-summary/no-informati
 import { StructureEditionSummaryComponent } from './structure-edition-summary/structure-edition-summary.component';
 import { StructureMembersManagementComponent } from './structure-members-management/structure-members-management.component';
 import { StructuresManagementComponent } from './structures-management/structures-management.component';
+import { ProfileNewsletterComponent } from './profile-newsletter/profile-newsletter.component';
 
 @NgModule({
   declarations: [
@@ -29,6 +30,7 @@ import { StructuresManagementComponent } from './structures-management/structure
     StructuresManagementComponent,
     PersonalOfferComponent,
     PersonalOfferEditionComponent,
+    ProfileNewsletterComponent,
   ],
   imports: [CommonModule, ProfileRoutingModule, SharedModule],
 })

src/app/services/newsletter.service.ts

 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
+import { NewsletterSubscription } from '../models/subscription.model';
 
 @Injectable({
   providedIn: 'root',
@@ -8,11 +9,15 @@ import { Observable } from 'rxjs';
 export class NewsletterService {
   constructor(private http: HttpClient) {}
 
-  public newsletterSubscribe(email: string): Observable<any> {
-    return this.http.post('/api/newsletter/subscribe', {email});
+  public subscribe(email: string): Observable<NewsletterSubscription> {
+    return this.http.post<NewsletterSubscription>('/api/newsletter/subscribe', { email });
   }
 
-  public newsletterUnsubscribe(email: string): Observable<any> {
-    return this.http.post('/api/newsletter/unsubscribe', {email});
+  public unsubscribe(email: string): Observable<NewsletterSubscription> {
+    return this.http.post<NewsletterSubscription>('/api/newsletter/unsubscribe', { email });
+  }
+
+  public find(email: string): Observable<NewsletterSubscription> {
+    return this.http.get<NewsletterSubscription>(`/api/newsletter?email=${email}`);
   }
 }