feat: newsletter subscription

docs/README.md

@@ -88,3 +88,4 @@ kb_sync_latest_only
 - [Guide - Monitoring with Prometheus](./guides/prometheus-monitoring.md)
 - [Guide - Store Locator with Google Maps](./guides/store-locator.md)
 - [Guide - Address Check with Address Doctor](./guides/address-doctor.md)
+- [Guide - E-Mail Marketing/Newsletter Subscription](./guides/newsletter-subscription.md)

docs/guides/newsletter-subscription.md

@@ -0,0 +1,26 @@
+<!--
+kb_guide
+kb_pwa
+kb_everyone
+kb_sync_latest_only
+-->
+
+# E-Mail Marketing/Newsletter Subscription
+
+## Introduction
+
+In the PWA registered users can subscribe/unsubscribe to a newsletter service.
+
+## Configuration
+
+To enable this feature an e-mail marketing provider has to be configured in the ICM channel preferences / E-mail Marketing.
+The PWA gets the information whether an e-mail provider is configured or not via the configurations REST call under `marketing.newsletterSubscriptionEnabled`.
+
+## Storefront
+
+If the newsletter subscription feature is enabled on the registration page and the account profile page a checkbox is shown that enables the user to subscribe or unsubscribe from the newsletter service.
+
+## Further References
+
+[Intershop Knowledge Base | Concept - E-Mail Marketing / Newsletter Subscription](https://support.intershop.com/kb/index.php/Display/2G9985)
+[Intershop Knowledge Base | Cookbook - E-Mail Marketing / Newsletter Subscription](https://support.intershop.com/kb/index.php/Display/30973Y)

e2e/cypress/e2e/specs/account/login-user.b2c.e2e-spec.ts

@@ -1,18 +1,23 @@
 import { at } from '../../framework';
+import { createUserViaREST } from '../../framework/users';
 import { LoginPage } from '../../pages/account/login.page';
 import { MyAccountPage } from '../../pages/account/my-account.page';
+import { sensibleDefaults } from '../../pages/account/registration.page';
 import { HomePage } from '../../pages/home.page';
 
 const _ = {
-  name: 'Patricia Miller',
-  email: 'patricia@test.intershop.de',
+  user: { ...sensibleDefaults, login: `testuser${new Date().getTime()}@test.intershop.de` },
   password: '!InterShop00!',
   wrongPassword: 'wrong',
 };
 
 describe('Returning User', () => {
   describe('with valid password', () => {
-    before(() => HomePage.navigateTo());
+    before(() => {
+      createUserViaREST(_.user);
+
+      HomePage.navigateTo();
+    });
 
     it('should press login and be routed to login page', () => {
       at(HomePage, page => {
@@ -24,11 +29,11 @@ describe('Returning User', () => {
     it('should enter credentials and submit and be directed to my-account', () => {
       at(LoginPage, page => {
         page.errorText.should('not.exist');
-        page.fillForm(_.email, _.password);
+        page.fillForm(_.user.login, _.password);
         page.submit().its('response.statusCode').should('equal', 200);
       });
       at(MyAccountPage, page => {
-        page.header.myAccountLink.should('have.text', _.name);
+        page.header.myAccountLink.should('have.text', `${_.user.firstName} ${_.user.lastName}`);
       });
     });
 
@@ -66,7 +71,7 @@ describe('Returning User', () => {
 
     it('should enter wrong credentials and submit and be be still at login page', () => {
       at(LoginPage, page => {
-        page.fillForm(_.email, _.wrongPassword);
+        page.fillForm(_.user.login, _.wrongPassword);
         page.submit().its('response.statusCode').should('equal', 401);
         page.errorText.should('be.visible');
       });

src/app/core/facades/account.facade.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 import { Store, select } from '@ngrx/store';
-import { Subject } from 'rxjs';
+import { Observable, Subject, of } from 'rxjs';
 import { map, switchMap, take, tap } from 'rxjs/operators';
 
 import { Address } from 'ish-core/models/address/address.model';
@@ -13,6 +13,7 @@ import { PaymentInstrument } from 'ish-core/models/payment-instrument/payment-in
 import { User } from 'ish-core/models/user/user.model';
 import { OrderListQuery } from 'ish-core/services/order/order.service';
 import { MessagesPayloadType } from 'ish-core/store/core/messages';
+import { getServerConfigParameter } from 'ish-core/store/core/server-config';
 import {
   createCustomerAddress,
   deleteCustomerAddress,
@@ -48,6 +49,7 @@ import {
   getCustomerApprovalEmail,
   getLoggedInCustomer,
   getLoggedInUser,
+  getNewsletterSubscriptionStatus,
   getPasswordReminderError,
   getPasswordReminderSuccess,
   getPriceDisplayType,
@@ -68,6 +70,7 @@ import {
   updateUserPassword,
   updateUserPasswordByPasswordReminder,
   updateUserPreferredPayment,
+  userNewsletterActions,
 } from 'ish-core/store/customer/user';
 import { whenTruthy } from 'ish-core/utils/operators';
 
@@ -259,6 +262,30 @@ export class AccountFacade {
     this.store.dispatch(updateCustomerAddress({ address }));
   }
 
+  // NEWSLETTER
+  subscribedToNewsletter$ = this.store.pipe(select(getNewsletterSubscriptionStatus));
+
+  loadNewsletterSubscription(): Observable<boolean> {
+    return this.store.pipe(
+      select(getServerConfigParameter<boolean>('marketing.newsletterSubscriptionEnabled')),
+      take(1),
+      switchMap(enabled => {
+        if (enabled) {
+          this.store.dispatch(userNewsletterActions.loadUserNewsletterSubscription());
+          return this.store.pipe(select(getNewsletterSubscriptionStatus));
+        }
+        return of(false);
+      })
+    );
+  }
+
+  // should only be called when the server-configuration-parameter 'marketing.newsletterSubscriptionEnabled' is true
+  updateNewsletterSubscription(subscribedToNewsletter: boolean) {
+    this.store.dispatch(
+      userNewsletterActions.updateUserNewsletterSubscription({ subscriptionStatus: subscribedToNewsletter })
+    );
+  }
+
   // DATA REQUESTS
 
   dataRequestLoading$ = this.store.pipe(select(getDataRequestLoading));

src/app/core/models/customer/customer.model.ts

@@ -35,6 +35,7 @@ export type CustomerUserType = {
 export type CustomerRegistrationType = {
   credentials?: Credentials;
   address: Address;
+  subscribedToNewsletter?: boolean;
 } & CustomerUserType &
   Captcha;
 

src/app/core/services/newsletter/newsletter.service.spec.ts

@@ -0,0 +1,107 @@
+import { TestBed } from '@angular/core/testing';
+import { MockStore, provideMockStore } from '@ngrx/store/testing';
+import { of, throwError } from 'rxjs';
+import { anything, instance, mock, verify, when } from 'ts-mockito';
+
+import { ApiService } from 'ish-core/services/api/api.service';
+import { getNewsletterSubscriptionStatus } from 'ish-core/store/customer/user';
+import { makeHttpError } from 'ish-core/utils/dev/api-service-utils';
+
+import { NewsletterService } from './newsletter.service';
+
+describe('Newsletter Service', () => {
+  let newsletterService: NewsletterService;
+  let apiServiceMock: ApiService;
+  let store$: MockStore;
+
+  let userEmail: string;
+
+  beforeEach(() => {
+    apiServiceMock = mock(ApiService);
+    TestBed.configureTestingModule({
+      providers: [{ provide: ApiService, useFactory: () => instance(apiServiceMock) }, provideMockStore()],
+    });
+    newsletterService = TestBed.inject(NewsletterService);
+    store$ = TestBed.inject(MockStore);
+
+    userEmail = 'user@test.com';
+
+    store$.overrideSelector(getNewsletterSubscriptionStatus, false);
+  });
+
+  it("should subscribe user to newsletter when 'updateNewsletterSubscriptionStatus' is called with 'true'", done => {
+    when(apiServiceMock.post(anything(), anything())).thenReturn(of(true));
+
+    const newStatus = true;
+
+    newsletterService.updateNewsletterSubscriptionStatus(newStatus, userEmail).subscribe(subscriptionStatus => {
+      verify(apiServiceMock.post(`subscriptions`, anything())).once();
+      expect(subscriptionStatus).toBeTrue();
+      done();
+    });
+  });
+
+  it("should unsubscribe user from the newsletter when 'updateNewsletterSubscriptionStatus' is called with 'false'", done => {
+    when(apiServiceMock.delete(anything())).thenReturn(of(false));
+    store$.overrideSelector(getNewsletterSubscriptionStatus, true);
+
+    const newStatus = false;
+
+    newsletterService.updateNewsletterSubscriptionStatus(newStatus, userEmail).subscribe(subscriptionStatus => {
+      verify(apiServiceMock.delete(`subscriptions/${userEmail}`)).once();
+      expect(subscriptionStatus).toBeFalse();
+      done();
+    });
+  });
+
+  it("should not make an API call when calling 'updateNewsletterSubscriptionStatus' and the status hasn't changed", done => {
+    when(apiServiceMock.delete(anything())).thenReturn(of(false));
+    store$.overrideSelector(getNewsletterSubscriptionStatus, true);
+
+    const newStatus = true;
+
+    newsletterService.updateNewsletterSubscriptionStatus(newStatus, userEmail).subscribe(subscriptionStatus => {
+      verify(apiServiceMock.delete(`subscriptions/${userEmail}`)).never();
+      expect(subscriptionStatus).toBeTrue();
+      done();
+    });
+  });
+
+  it("should get the users subscription-status when 'getSubscription' is called", done => {
+    when(apiServiceMock.get(anything())).thenReturn(of({ active: true }));
+
+    newsletterService.getSubscription(userEmail).subscribe(subscriptionStatus => {
+      verify(apiServiceMock.get(`subscriptions/${userEmail}`)).once();
+      expect(subscriptionStatus).toBeTrue();
+      done();
+    });
+
+    when(apiServiceMock.get(anything())).thenReturn(of({ active: false }));
+
+    newsletterService.getSubscription(userEmail).subscribe(subscriptionStatus => {
+      verify(apiServiceMock.get(`subscriptions/${userEmail}`)).once();
+      expect(subscriptionStatus).toBeFalse();
+      done();
+    });
+  });
+
+  it('should return false when "getSubscription" is called and a 404-error is thrown', done => {
+    when(apiServiceMock.get(anything())).thenReturn(
+      throwError(() => makeHttpError({ message: 'No subscription found', status: 404 }))
+    );
+
+    newsletterService.getSubscription(userEmail).subscribe(subscriptionStatus => {
+      verify(apiServiceMock.get(`subscriptions/${userEmail}`)).once();
+      expect(subscriptionStatus).toBeFalse();
+      done();
+    });
+
+    when(apiServiceMock.get(anything())).thenReturn(of({ active: false }));
+
+    newsletterService.getSubscription(userEmail).subscribe(subscriptionStatus => {
+      verify(apiServiceMock.get(`subscriptions/${userEmail}`)).once();
+      expect(subscriptionStatus).toBeFalse();
+      done();
+    });
+  });
+});

src/app/core/services/newsletter/newsletter.service.ts

@@ -0,0 +1,78 @@
+import { Injectable } from '@angular/core';
+import { Store, select } from '@ngrx/store';
+import { Observable, catchError, map, of, switchMap, take, throwError } from 'rxjs';
+
+import { ApiService } from 'ish-core/services/api/api.service';
+import { getNewsletterSubscriptionStatus } from 'ish-core/store/customer/user';
+
+/**
+ * The Newsletter Service handles the newsletter related interaction with the 'subscriptions' REST API.
+ */
+@Injectable({ providedIn: 'root' })
+export class NewsletterService {
+  constructor(private apiService: ApiService, private store: Store) {}
+
+  private newsletterSubscriptionStatus$ = this.store.pipe(select(getNewsletterSubscriptionStatus), take(1));
+
+  /**
+   * Gets the current newsletter subscription status of the user.
+   *
+   * @param userEmail    The user email.
+   * @returns            The current newsletter subscription status.
+   *                     Returns 'false' when a 404-error is thrown, which is the APIs response for "no subscription found".
+   */
+  getSubscription(userEmail: string): Observable<boolean> {
+    return this.apiService.get(`subscriptions/${userEmail}`).pipe(
+      map((params: { active: boolean }) => params.active),
+      catchError(error => {
+        if (error.status === 404) {
+          return of(false);
+        }
+        return throwError(() => error);
+      })
+    );
+  }
+
+  /**
+   * Updates the newsletter subscription status of the user.
+   * Doesn't make a REST call when newStatus and currentStatus are the same.
+   *
+   * @param newStatus        The new newsletter subscription status of the user.
+   * @param userEmail        The user e-mail.
+   * @returns                The new newsletter subscription status.
+   *                         Returns the current status when newStatus and currentStatus are the same.
+   */
+  updateNewsletterSubscriptionStatus(newStatus: boolean, userEmail: string): Observable<boolean> {
+    // only make a REST-call when the status has changed
+    return this.newsletterSubscriptionStatus$.pipe(
+      switchMap(currentStatus => {
+        if (currentStatus === newStatus) {
+          return of(currentStatus);
+        }
+
+        return newStatus ? this.subscribeToNewsletter(userEmail) : this.unsubscribeFromNewsletter(userEmail);
+      })
+    );
+  }
+
+  /**
+   * always returns 'true'
+   */
+  private subscribeToNewsletter(userEmail: string): Observable<boolean> {
+    const requestBody = {
+      name: 'Newsletter',
+      type: 'Subscription',
+      active: true,
+      recipient: userEmail,
+    };
+
+    return this.apiService.post(`subscriptions`, requestBody).pipe(map(() => true));
+  }
+
+  /**
+   * always returns 'false'
+   */
+  private unsubscribeFromNewsletter(userEmail: string): Observable<boolean> {
+    return this.apiService.delete(`subscriptions/${userEmail}`).pipe(map(() => false));
+  }
+}

src/app/core/store/customer/customer-store.module.ts

@@ -25,6 +25,7 @@ import { OrganizationManagementEffects } from './organization-management/organiz
 import { RequisitionManagementEffects } from './requisition-management/requisition-management.effects';
 import { SsoRegistrationEffects } from './sso-registration/sso-registration.effects';
 import { ssoRegistrationReducer } from './sso-registration/sso-registration.reducer';
+import { UserNewsletterEffects } from './user/user-newsletter.effects';
 import { UserEffects } from './user/user.effects';
 import { userReducer } from './user/user.reducer';
 
@@ -53,6 +54,7 @@ const customerEffects = [
   RequisitionManagementEffects,
   SsoRegistrationEffects,
   DataRequestsEffects,
+  UserNewsletterEffects,
 ];
 
 @Injectable()

src/app/core/store/customer/customer-store.spec.ts

@@ -21,6 +21,7 @@ import { ConfigurationService } from 'ish-core/services/configuration/configurat
 import { CountryService } from 'ish-core/services/country/country.service';
 import { DataRequestsService } from 'ish-core/services/data-requests/data-requests.service';
 import { FilterService } from 'ish-core/services/filter/filter.service';
+import { NewsletterService } from 'ish-core/services/newsletter/newsletter.service';
 import { OrderService } from 'ish-core/services/order/order.service';
 import { PaymentService } from 'ish-core/services/payment/payment.service';
 import { PricesService } from 'ish-core/services/prices/prices.service';
@@ -178,6 +179,7 @@ describe('Customer Store', () => {
         { provide: CookiesService, useFactory: () => instance(mock(CookiesService)) },
         { provide: DataRequestsService, useFactory: () => instance(mock(DataRequestsService)) },
         { provide: FilterService, useFactory: () => instance(mock(FilterService)) },
+        { provide: NewsletterService, useFactory: () => instance(mock(NewsletterService)) },
         { provide: OrderService, useFactory: () => instance(mock(OrderService)) },
         { provide: PaymentService, useFactory: () => instance(mock(PaymentService)) },
         { provide: PricesService, useFactory: () => instance(productPriceServiceMock) },