refactor: replace unmaintained angular2-uuid lib (#1203)

* refactor: replace unmaintained angular2-uuid lib

BREAKING CHANGES: We removed the unmaintained `angular2-uuid` library in favor of the standard `uuid` library (see [Migrations / 2.4 to 3.0](https://github.com/intershop/intershop-pwa/blob/develop/docs/guides/migrations.md#24-to-30) for more details).

docs/guides/migrations.md

@@ -12,6 +12,9 @@ kb_sync_latest_only
 Since the used deferred load library is no longer maintained it is removed and replaced with similar standard browser functionality [`loading="lazy"`](https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading#images_and_iframes).
 All uses of the `(deferLoad)` directive in custom code need to be replaced.
 
+We removed the unmaintained `angular2-uuid` library in favor of the standard `uuid` library that is already included as an Angular dependency.
+In order to match our changes, replace all occurrences of `angular2-uuid` in your custom code (see #1203).
+
 ## 2.3 to 2.4
 
 The PWA 2.4 contains an Angular update to version 13.3.10 and many other dependencies updates.

package.json

@@ -87,7 +87,6 @@
     "@rx-angular/state": "1.6.0",
     "@sentry/browser": "^6.19.7",
     "angular-oauth2-oidc": "13.0.1",
-    "angular2-uuid": "^1.1.1",
     "angulartics2": "^12.1.0",
     "bootstrap": "^4.6.1",
     "date-fns": "^2.28.0",
@@ -132,6 +131,7 @@
     "@types/jest": "^27.5.1",
     "@types/lodash-es": "^4.17.6",
     "@types/node": "^16.11.36",
+    "@types/uuid": "^8.3.4",
     "@types/webpack": "^5.28.0",
     "@typescript-eslint/eslint-plugin": "5.26.0",
     "@typescript-eslint/parser": "5.26.0",

projects/organization-management/src/app/pages/user-create/user-create-page.component.ts

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
-import { UUID } from 'angular2-uuid';
 import { Observable } from 'rxjs';
+import { v4 as uuid } from 'uuid';
 
 import { HttpError } from 'ish-core/models/http-error/http-error.model';
 import { markAsDirtyRecursive } from 'ish-shared/forms/utils/form-utils';
@@ -58,7 +58,7 @@ export class UserCreatePageComponent implements OnInit {
       active: formValue.profile.active,
       phoneHome: formValue.profile.phoneHome,
       birthday: formValue.profile.birthday === '' ? undefined : formValue.birthday, // TODO: see IS-22276
-      businessPartnerNo: `U${UUID.UUID()}`,
+      businessPartnerNo: `U${uuid()}`,
       roleIDs: formValue.roleIDs,
       userBudget: formValue.userBudget.currency
         ? {

src/app/core/store/customer/sso-registration/sso-registration.effects.ts

@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { Actions, createEffect, ofType } from '@ngrx/effects';
-import { UUID } from 'angular2-uuid';
 import { map, mergeMap } from 'rxjs/operators';
+import { v4 as uuid } from 'uuid';
 
 import { FeatureToggleService } from 'ish-core/feature-toggle.module';
 import { SsoRegistrationType } from 'ish-core/models/customer/customer.model';
@@ -27,7 +27,7 @@ export class SsoRegistrationEffects {
           .createUser({
             address: data.address,
             customer: {
-              customerNo: UUID.UUID(),
+              customerNo: uuid(),
               companyName: data.companyInfo.companyName1,
               companyName2: data.companyInfo.companyName2,
               isBusinessCustomer: this.featureToggleService.enabled('businessCustomerRegistration'),

src/app/extensions/punchout/pages/account-punchout-create/account-punchout-create-page.component.ts

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
-import { UUID } from 'angular2-uuid';
 import { Observable } from 'rxjs';
+import { v4 as uuid } from 'uuid';
 
 import { HttpError } from 'ish-core/models/http-error/http-error.model';
 
@@ -26,7 +26,7 @@ export class AccountPunchoutCreatePageComponent implements OnInit {
   }
 
   submitForm(user: PunchoutUser) {
-    const email = user.login + UUID.UUID();
+    const email = user.login + uuid();
     this.punchoutFacade.addPunchoutUser({ ...user, email });
   }
 }

src/app/extensions/tacton/store/tacton-config/tacton-config.selectors.ts

@@ -1,5 +1,5 @@
 import { createSelector } from '@ngrx/store';
-import { UUID } from 'angular2-uuid';
+import { v4 as uuid } from 'uuid';
 
 import { Customer } from 'ish-core/models/customer/customer.model';
 import { User } from 'ish-core/models/user/user.model';
@@ -15,7 +15,7 @@ export const getSelfServiceApiConfiguration = createSelector(getTactonConfig, co
 export const getNewExternalId = createSelector(
   getLoggedInCustomer,
   getLoggedInUser,
-  (customer: Customer, user: User) => customer && user && `${customer.companyName}(${user.login}) - ${UUID.UUID()}`
+  (customer: Customer, user: User) => customer && user && `${customer.companyName}(${user.login}) - ${uuid()}`
 );
 
 const productMappings = createSelector(getTactonConfig, state => state?.productMappings || {});

src/app/pages/registration/services/registration-form-configuration/registration-form-configuration.service.ts

@@ -4,9 +4,9 @@ import { FormGroup, Validators } from '@angular/forms';
 import { ActivatedRouteSnapshot, Router } from '@angular/router';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { FormlyFieldConfig, FormlyFormOptions } from '@ngx-formly/core';
-import { UUID } from 'angular2-uuid';
 import { Observable, combineLatest, from, iif, merge, noop, of, race } from 'rxjs';
 import { filter, map, switchMap, take, tap } from 'rxjs/operators';
+import { v4 as uuid } from 'uuid';
 
 import { AccountFacade } from 'ish-core/facades/account.facade';
 import { Address } from 'ish-core/models/address/address.model';
@@ -138,7 +138,7 @@ export class RegistrationFormConfigurationService {
     } else {
       const customer: Customer = {
         isBusinessCustomer: false,
-        customerNo: UUID.UUID(), // TODO: customerNo should be generated by the server - IS-24884
+        customerNo: uuid(), // TODO: customerNo should be generated by the server - IS-24884
       };
 
       const user: User = {

src/app/shared/components/product/product-quantity/product-quantity.component.ts

@@ -1,8 +1,8 @@
 import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
-import { UUID } from 'angular2-uuid';
 import { range } from 'lodash-es';
 import { Observable, combineLatest } from 'rxjs';
 import { filter, map } from 'rxjs/operators';
+import { v4 as uuid } from 'uuid';
 
 import { ProductContextFacade } from 'ish-core/facades/product-context.facade';
 
@@ -14,7 +14,7 @@ import { ProductContextFacade } from 'ish-core/facades/product-context.facade';
 })
 export class ProductQuantityComponent implements OnInit {
   @Input() type: 'input' | 'select' | 'counter' = 'counter';
-  @Input() id: string = UUID.UUID();
+  @Input() id: string = uuid();
 
   visible$: Observable<boolean>;
   quantity$: Observable<number>;

src/app/shared/components/product/product-variation-select/product-variation-select.component.ts

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
-import { UUID } from 'angular2-uuid';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
+import { v4 as uuid } from 'uuid';
 
 import { ProductContextFacade } from 'ish-core/facades/product-context.facade';
 import { ProductVariationHelper } from 'ish-core/models/product-variation/product-variation.helper';
@@ -13,7 +13,7 @@ import { VariationOptionGroup } from 'ish-core/models/product-variation/variatio
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ProductVariationSelectComponent implements OnInit {
-  uuid = UUID.UUID();
+  uuid = uuid();
   variationOptions$: Observable<VariationOptionGroup[]>;
   visible$: Observable<boolean>;