fix: Show error msg when B2B register failed (#19084)

feature-libs/organization/user-registration/assets/translations/en/userRegistration.json

@@ -60,6 +60,7 @@
     "goToLoginButtonLabel": "Already registered? Go to Sign in",
     "httpHandlers": {
       "conflict": "User with this e-mail address already exists."
-    }
+    },
+    "messageToFailedToRegister": "Failed to register. Please contact your admin for further assistance."
   }
 }

feature-libs/organization/user-registration/components/form/user-registration-form.component.spec.ts

@@ -4,15 +4,23 @@ import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { By } from '@angular/platform-browser';
 import { RouterTestingModule } from '@angular/router/testing';
 import { NgSelectModule } from '@ng-select/ng-select';
-import { Country, I18nTestingModule, Region, Title } from '@spartacus/core';
+import {
+  Country,
+  GlobalMessageService,
+  GlobalMessageType,
+  I18nTestingModule,
+  Region,
+  Title,
+  Translatable,
+} from '@spartacus/core';
 import { OrganizationUserRegistrationForm } from '@spartacus/organization/user-registration/root';
 import {
   FormErrorsModule,
   NgSelectA11yDirective,
   SpinnerComponent,
 } from '@spartacus/storefront';
 import { MockFeatureDirective } from 'projects/storefrontlib/shared/test/mock-feature-directive';
-import { Observable, of } from 'rxjs';
+import { Observable, of, throwError } from 'rxjs';
 import { UserRegistrationFormComponent } from './user-registration-form.component';
 import { UserRegistrationFormService } from './user-registration-form.service';
 
@@ -36,6 +44,10 @@ const mockTitles: Title[] = [
   },
 ];
 
+class MockGlobalMessageService implements Partial<GlobalMessageService> {
+  add(_: string | Translatable, __: GlobalMessageType, ___?: number): void {}
+}
+
 const mockCountries: Country[] = [
   {
     isocode: 'CA',
@@ -113,6 +125,7 @@ describe('UserRegistrationFormComponent', () => {
   let component: UserRegistrationFormComponent;
   let fixture: ComponentFixture<UserRegistrationFormComponent>;
   let el: DebugElement;
+  let msgServcie: MockGlobalMessageService;
 
   let userRegistrationFormService: UserRegistrationFormService;
 
@@ -137,10 +150,15 @@ describe('UserRegistrationFormComponent', () => {
           provide: UserRegistrationFormService,
           useClass: MockUserRegistrationFormService,
         },
+        {
+          provide: GlobalMessageService,
+          useClass: MockGlobalMessageService,
+        },
       ],
     });
 
     userRegistrationFormService = TestBed.inject(UserRegistrationFormService);
+    msgServcie = TestBed.inject(GlobalMessageService);
   }));
 
   beforeEach(() => {
@@ -203,6 +221,27 @@ describe('UserRegistrationFormComponent', () => {
     );
   });
 
+  it('should show error message if service response failed ', () => {
+    spyOn(userRegistrationFormService, 'registerUser').and.returnValue(
+      throwError(() => new Error('Simulated error'))
+    );
+    component.registerForm.patchValue({
+      ...mockOrganizationUser,
+      companyName: 'New Company Inc.',
+    });
+    spyOn(msgServcie, 'add').and.callThrough();
+    component.registerForm.markAllAsTouched();
+
+    component.submit();
+
+    const spinner = fixture.debugElement.query(By.css('cx-spinner'));
+    expect(spinner).toBeNull();
+    expect(msgServcie.add).toHaveBeenCalledWith(
+      { key: 'userRegistrationForm.messageToFailedToRegister' },
+      GlobalMessageType.MSG_TYPE_ERROR
+    );
+  });
+
   it('should not register organization user with invalid form', () => {
     spyOn(userRegistrationFormService, 'registerUser').and.callThrough();
     component.registerForm.reset();

feature-libs/organization/user-registration/components/form/user-registration-form.component.ts

@@ -4,9 +4,19 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { ChangeDetectionStrategy, Component, OnDestroy } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  inject,
+  OnDestroy,
+} from '@angular/core';
 import { FormGroup } from '@angular/forms';
-import { Country, Region } from '@spartacus/core';
+import {
+  Country,
+  GlobalMessageService,
+  GlobalMessageType,
+  Region,
+} from '@spartacus/core';
 import { Title } from '@spartacus/user/profile/root';
 import { BehaviorSubject, Observable, Subscription } from 'rxjs';
 import { UserRegistrationFormService } from './user-registration-form.service';
@@ -31,6 +41,10 @@ export class UserRegistrationFormComponent implements OnDestroy {
 
   protected subscriptions = new Subscription();
 
+  protected globalMessageService = inject(GlobalMessageService, {
+    optional: true,
+  });
+
   constructor(
     protected userRegistrationFormService: UserRegistrationFormService
   ) {}
@@ -43,7 +57,13 @@ export class UserRegistrationFormComponent implements OnDestroy {
           .registerUser(this.registerForm)
           .subscribe({
             complete: () => this.isLoading$.next(false),
-            error: () => this.isLoading$.next(false),
+            error: () => {
+              this.isLoading$.next(false);
+              this.globalMessageService?.add(
+                { key: 'userRegistrationForm.messageToFailedToRegister' },
+                GlobalMessageType.MSG_TYPE_ERROR
+              );
+            },
           })
       );
     } else {