Merge branch 'develop' into feature/GH-8499

feature-libs/organization/README.md

@@ -1,5 +1,5 @@
-# Spartacus Organization
+# Spartacus My Account
 
-`@spartacus/organization` is a package that you can include in your application, which allows you to use various organization features.
+`@spartacus/my-account` is a package that you can include in your application, which allows you to use various my-account features.
 
 For more information, see [Spartacus](https://github.com/SAP/spartacus).

feature-libs/organization/administration/assets/translations/en/cost-center.i18n.ts

@@ -22,11 +22,8 @@ export const costCenter = {
     confirmDisabled: 'Cost Center {{ item.name }} disabled successfully',
   },
 
-  title: 'Details Cost Center',
-  subtitle: 'Cost Center: {{ item.name }}',
-
   details: {
-    title: 'Details Cost Center',
+    title: 'Cost Center Details',
     subtitle: 'Cost Center: {{ item.name }}',
   },
 

feature-libs/organization/administration/assets/translations/en/units.i18n.ts

@@ -37,13 +37,21 @@ export const unit = {
     expandAll: 'Expand all',
     collapseAll: 'Collapse all',
   },
+
   children: {
     create: {
       title: 'Create child unit',
       subtitle: '',
     },
   },
 
+  costCenters: {
+    create: {
+      title: 'Create cost center',
+      subtitle: '',
+    },
+  },
+
   form: {
     parentOrgUnit: 'Parent business unit',
     create: 'Create Unit',
@@ -74,10 +82,6 @@ export const unit = {
       changes: 'Changes are saved automatically.',
     },
   },
-  // costCenters: {
-  //   header: 'Cost centers in {{code}}',
-  //   new: 'New cost center',
-  // },
 
   breadcrumbs: {
     list: 'All units',
@@ -87,6 +91,7 @@ export const unit = {
     approvers: 'Approvers',
     addresses: 'Shipping addresses',
     addressDetails: '{{formattedAddress}}',
+    costCenters: 'Cost Centers',
   },
 };
 

feature-libs/organization/administration/components/cost-center/form/cost-center-form.component.spec.ts

@@ -33,11 +33,15 @@ class MockOrgUnitService {
 }
 
 class MockCurrencyService {
-  getAll() {}
+  getAll() {
+    return of();
+  }
 }
 
 class MockOrganizationItemService {
-  getForm() {}
+  getForm() {
+    return mockForm;
+  }
 }
 
 describe('CostCenterFormComponent', () => {
@@ -78,15 +82,13 @@ describe('CostCenterFormComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(CostCenterFormComponent);
     component = fixture.componentInstance;
-    component.ngOnInit();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
 
   it('should render form controls', () => {
-    component.form = mockForm;
     fixture.detectChanges();
     const formControls = fixture.debugElement.queryAll(By.css('input'));
     expect(formControls.length).toBeGreaterThan(0);
@@ -100,18 +102,10 @@ describe('CostCenterFormComponent', () => {
   });
 
   it('should get currencies from service', () => {
-    component.form = mockForm;
     expect(currencyService.getAll).toHaveBeenCalled();
   });
 
   it('should get active units from service', () => {
-    component.form = mockForm;
     expect(b2bUnitService.getActiveUnitList).toHaveBeenCalled();
   });
-
-  it('should load list of b2bUnits on subscription', () => {
-    component.form = mockForm;
-    fixture.detectChanges();
-    expect(b2bUnitService.loadList).toHaveBeenCalled();
-  });
 });

feature-libs/organization/administration/components/cost-center/form/cost-center-form.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { FormGroup } from '@angular/forms';
 import { CostCenter, Currency, CurrencyService } from '@spartacus/core';
 import {
@@ -10,6 +10,7 @@ import { OrganizationItemService } from '../../shared/organization-item.service'
 import { CostCenterItemService } from '../services/cost-center-item.service';
 
 @Component({
+  selector: 'cx-cost-center-form',
   templateUrl: './cost-center-form.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   providers: [
@@ -19,8 +20,19 @@ import { CostCenterItemService } from '../services/cost-center-item.service';
     },
   ],
 })
-export class CostCenterFormComponent implements OnInit {
+export class CostCenterFormComponent {
   form: FormGroup = this.itemService.getForm();
+  /**
+   * Initialize the business unit for the cost center.
+   *
+   * If there's a unit provided, we disable the form control.
+   */
+  @Input() set unitKey(value: string) {
+    if (value) {
+      this.form?.get('unit.uid').setValue(value);
+      this.form?.get('unit')?.disable();
+    }
+  }
 
   units$: Observable<B2BUnitNode[]> = this.unitService.getActiveUnitList();
   currencies$: Observable<Currency[]> = this.currencyService.getAll();
@@ -30,8 +42,4 @@ export class CostCenterFormComponent implements OnInit {
     protected unitService: OrgUnitService,
     protected currencyService: CurrencyService
   ) {}
-
-  ngOnInit(): void {
-    this.unitService.loadList();
-  }
 }

feature-libs/organization/administration/components/cost-center/form/cost-center-form.module.ts

@@ -23,6 +23,5 @@ import { CostCenterFormComponent } from './cost-center-form.component';
   declarations: [CostCenterFormComponent],
   exports: [CostCenterFormComponent],
   providers: [CurrencyService, OrgUnitService],
-  entryComponents: [CostCenterFormComponent],
 })
 export class CostCenterFormModule {}

feature-libs/organization/administration/components/shared/organization-form/organization-form.component.ts

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { FormGroup } from '@angular/forms';
 import { Observable } from 'rxjs';
-import { first, map, switchMap } from 'rxjs/operators';
+import { first, map } from 'rxjs/operators';
 import { OrganizationItemService } from '../organization-item.service';
 
 /**
@@ -25,19 +25,15 @@ export class OrganizationFormComponent<T> {
    */
   i18n: string;
 
-  form$: Observable<FormGroup> = this.itemService.unit$.pipe(
-    switchMap((unitUid) =>
-      this.itemService.current$.pipe(
-        map((item) => {
-          this.setI18nRoot(item);
-          if (!item && unitUid) {
-            // TODO: as long as we do not have harmonized unit property, we have to workaround here,
-            item = { parentOrgUnit: { uid: unitUid } } as any;
-          }
-          return this.itemService.getForm(item);
-        })
-      )
-    )
+  form$: Observable<FormGroup> = this.itemService.current$.pipe(
+    map((item) => {
+      this.setI18nRoot(item);
+      if (!item) {
+        // we trick the form builder...
+        item = {} as any;
+      }
+      return this.itemService.getForm(item);
+    })
   );
 
   constructor(protected itemService: OrganizationItemService<T>) {}
@@ -48,7 +44,7 @@ export class OrganizationFormComponent<T> {
     });
   }
 
-  protected setI18nRoot(item) {
+  protected setI18nRoot(item: T): void {
     // concatenate the i18n root with .edit or .create suffix
     this.i18n = this.i18nRoot + (item ? '.edit' : '.create');
   }

feature-libs/organization/administration/components/shared/organization-form/organization-form.service.ts

@@ -11,12 +11,19 @@ export abstract class OrganizationFormService<T> {
   protected abstract build(item?: T): void;
 
   getForm(item?: T): FormGroup {
+    if (this.form && !!item) {
+      this.patchData(item);
+      return this.form;
+    }
+
     if (!this.form) {
       this.build(item);
     }
+
     // while we should be able to reset with initial value, this doesn't always work
     // hence, we're patching afterwards.
     this.form.reset();
+
     this.form.enable();
     this.patchData(item);
     return this.form;

feature-libs/organization/administration/components/shared/organization-sub-list/assign-cell.component.spec.ts

@@ -71,10 +71,6 @@ describe('AssignCellComponent', () => {
       expect(component).toBeTruthy();
     });
 
-    it('should not have an item', () => {
-      expect(component.hasItem).toBeFalsy();
-    });
-
     it('should not be assigned', () => {
       expect(component.isAssigned).toBeFalsy();
     });
@@ -91,10 +87,6 @@ describe('AssignCellComponent', () => {
       expect(component).toBeTruthy();
     });
 
-    it('should have item', () => {
-      expect(component.hasItem).toBeTruthy();
-    });
-
     it('should be assigned', () => {
       expect(component.isAssigned).toBeTruthy();
     });

feature-libs/organization/administration/components/shared/organization-sub-list/assign-cell.component.ts

@@ -6,7 +6,8 @@ import {
 import { OrganizationItemService } from '../organization-item.service';
 import { OrganizationListService } from '../organization-list/organization-list.service';
 import { MessageService } from '../organization-message/services/message.service';
-import { OrganizationSubListService } from './organization-sub-list.service';
+import { OrganizationSubListService } from '../organization-sub-list/organization-sub-list.service';
+import { OrganizationCellComponent } from '../organization-table/organization-cell.component';
 
 @Component({
   template: `
@@ -16,7 +17,9 @@ import { OrganizationSubListService } from './organization-sub-list.service';
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class AssignCellComponent<T> implements OnDestroy {
+export class AssignCellComponent<T>
+  extends OrganizationCellComponent
+  implements OnDestroy {
   /**
    * Indicates that we need to show a notification message.
    */
@@ -27,13 +30,8 @@ export class AssignCellComponent<T> implements OnDestroy {
     protected organizationItemService: OrganizationItemService<T>,
     protected messageService: MessageService,
     protected organizationSubListService: OrganizationListService<T>
-  ) {}
-
-  /**
-   * Indicates whether the item is loaded.
-   */
-  get hasItem(): boolean {
-    return !!this.item && Object.keys(this.item).length > 0;
+  ) {
+    super(outlet);
   }
 
   get isAssigned(): boolean {
@@ -81,14 +79,6 @@ export class AssignCellComponent<T> implements OnDestroy {
     );
   }
 
-  protected get item(): T | null {
-    if (!this.outlet.context) {
-      return null;
-    }
-    const { _field, _options, _type, _i18nRoot, ...all } = this.outlet.context;
-    return all as T;
-  }
-
   ngOnDestroy() {
     // We're playing a dirty trick here; The store is not equipped with a
     // selector to select any updated assignments. Moreover, as soon as

feature-libs/organization/administration/components/shared/organization-table/organization-cell.component.ts

@@ -59,4 +59,19 @@ export class OrganizationCellComponent {
   get type(): string {
     return this.model._type;
   }
+
+  /**
+   * Indicates whether the item is loaded.
+   */
+  get hasItem(): boolean {
+    return !!this.item && Object.keys(this.item).length > 0;
+  }
+
+  protected get item(): any {
+    if (!this.outlet.context) {
+      return null;
+    }
+    const { _field, _options, _type, _i18nRoot, ...all } = this.outlet.context;
+    return all;
+  }
 }

feature-libs/organization/administration/components/unit/form/unit-form.component.html

@@ -1,5 +1,5 @@
 <cx-organization-form [i18nRoot]="i18nRoot">
-  <ng-container *ngIf="form" [formGroup]="form" main>
+  <ng-container *ngIf="form$ | async as form" [formGroup]="form" main>
     <label>
       <span class="label-content required">{{
         'unit.name' | cxTranslate

feature-libs/organization/administration/components/unit/form/unit-form.component.spec.ts

@@ -33,7 +33,12 @@ class MockOrgUnitService {
 }
 
 class MockOrganizationItemService {
-  getForm() {}
+  get unit$() {
+    return of('uid');
+  }
+  getForm() {
+    return mockForm;
+  }
 }
 
 describe('UnitFormComponent', () => {
@@ -67,41 +72,36 @@ describe('UnitFormComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(UnitFormComponent);
     component = fixture.componentInstance;
-    component.ngOnInit();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
 
   it('should render form controls', () => {
-    component.form = mockForm;
     fixture.detectChanges();
     const formControls = fixture.debugElement.queryAll(By.css('input'));
     expect(formControls.length).toBeGreaterThan(0);
   });
 
-  it('should not render any form controls if the form is falsy', () => {
-    component.form = undefined;
-    fixture.detectChanges();
-    const formControls = fixture.debugElement.queryAll(By.css('input'));
-    expect(formControls.length).toBe(0);
-  });
-
   it('should get active units from service', () => {
-    component.form = mockForm;
+    fixture.detectChanges();
     expect(b2bUnitService.getActiveUnitList).toHaveBeenCalled();
   });
 
   it('should get currencies from service', () => {
-    component.form = mockForm;
     expect(b2bUnitService.getApprovalProcesses).toHaveBeenCalled();
   });
 
   it('should load list of b2bUnits on init', () => {
-    component.form = mockForm;
     component.ngOnInit();
-    fixture.detectChanges();
     expect(b2bUnitService.loadList).toHaveBeenCalled();
   });
+
+  it('should disable parentOrgUnit form control', () => {
+    component.createChildUnit = true;
+    let result: FormGroup;
+    component.form$.subscribe((form) => (result = form)).unsubscribe();
+    expect(result.get('parentOrgUnit.uid').disabled).toBeTruthy();
+  });
 });