feature: order return request

src/app/extensions/return-request/components/return-request-items/return-request-items.component.html

@@ -0,0 +1,41 @@
+<ng-container *ngIf="orders.length; else noItems">
+  <ng-container *ngFor="let id of orderIds">
+    <h2 class="bg-light p-2">
+      {{ 'toolineo.account.return_overview.tab.content.order_from' | translate : { '0': id } }}
+      {{ groupOrders[id][0].creationDate | ishDate }}
+    </h2>
+    <ng-container *ngIf="groupOrders[id] as items">
+      <table class="table table-striped">
+        <thead>
+          <tr>
+            <th scope="col">{{ 'toolineo.account.return_overview.tab.content.column.return' | translate }}</th>
+            <th scope="col">{{ 'toolineo.account.return_overview.tab.content.column.dealer' | translate }}</th>
+            <th scope="col">
+              {{ 'toolineo.account.return_overview.tab.content.column.created_on' | translate }}
+            </th>
+            <th scope="col">{{ 'toolineo.account.return_overview.tab.content.column.article' | translate }}</th>
+            <th scope="col">{{ 'toolineo.account.return_overview.tab.content.column.status' | translate }}</th>
+            <th scope="col">&nbsp;</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr *ngFor="let item of items">
+            <th scope="row">
+              <a [routerLink]="item.productNumber">{{ item.productNumber }}</a>
+            </th>
+            <td>{{ item.supplierProductNumber }}</td>
+            <td>{{ item.creationDate | ishDate }}</td>
+            <td>{{ item.quantity }}</td>
+            <td>{{ item.status }}</td>
+            <!-- TODO: diplay document link only when it's available-->
+            <td>{{ 'toolineo.account.return_overview.tab.content.download_return_label' | translate }}</td>
+          </tr>
+        </tbody>
+      </table>
+    </ng-container>
+  </ng-container>
+</ng-container>
+
+<ng-template #noItems>
+  <p class="text-center font-weight-bold">{{ 'toolineo.account.return_overview.no_result_found' | translate }}</p>
+</ng-template>

src/app/extensions/return-request/components/return-request-items/return-request-items.component.spec.ts

@@ -0,0 +1,29 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { TranslateModule } from '@ngx-translate/core';
+
+import { ReturnRequestItemsComponent } from './return-request-items.component';
+
+describe('Return Request Items Component', () => {
+  let component: ReturnRequestItemsComponent;
+  let fixture: ComponentFixture<ReturnRequestItemsComponent>;
+  let element: HTMLElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TranslateModule.forRoot()],
+      declarations: [ReturnRequestItemsComponent],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ReturnRequestItemsComponent);
+    component = fixture.componentInstance;
+    element = fixture.nativeElement;
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+    expect(element).toBeTruthy();
+    expect(() => fixture.detectChanges()).not.toThrow();
+  });
+});

src/app/extensions/return-request/components/return-request-items/return-request-items.component.ts

@@ -0,0 +1,25 @@
+import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
+
+import { ReturnRequest } from '../../models/return-request/return-request.model';
+
+@Component({
+  selector: 'ish-return-request-items',
+  templateUrl: './return-request-items.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ReturnRequestItemsComponent implements OnInit {
+  @Input() orders: ReturnRequest[] = [];
+
+  groupOrders: { [key: string]: ReturnRequest[] };
+
+  orderIds: string[];
+
+  ngOnInit() {
+    this.groupOrders = this.orders.reduce<{ [key: string]: ReturnRequest[] }>((acc, nxt) => {
+      acc[nxt.orderId] = acc[nxt.orderId] ? [...acc[nxt.orderId], nxt] : [nxt];
+      return acc;
+    }, {});
+
+    this.orderIds = Object.keys(this.groupOrders);
+  }
+}

src/app/extensions/return-request/components/return-request-modal/return-request-modal.component.html

@@ -0,0 +1,66 @@
+<ng-container *ngIf="returnableItems$ | async as returnableItems">
+  <ng-container *ngIf="returnableItems?.length; else noReturnableItems">
+    <ish-modal-dialog
+      #returnRequestDialog
+      (closed)="hideModal()"
+      [options]="{
+        titleText: 'toolineo.account.return_request.modal.title' | translate,
+        size: 'xl'
+      }"
+    >
+      <div class="d-flex justify-content-between mb-2">
+        <div class="order-date">
+          <span class="h4">{{ 'toolineo.account.return_request.modal.orde_date' | translate }}</span>
+          {{ order.creationDate | ishDate }}
+        </div>
+        <div class="order-number">
+          <span class="h4">{{ 'toolineo.account.return_request.modal.orde_number' | translate }}</span>
+          {{ order.documentNo }}
+        </div>
+      </div>
+      <form [formGroup]="form" (submit)="submit()">
+        <label>
+          <input type="checkbox" formControlName="checkAll" />{{
+            'toolineo.account.return_request.modal.form.check_all_label' | translate
+          }}</label
+        >
+        <ish-returnable-items
+          [returnableItems]="returnableItems"
+          (itemsUpdated)="onItemsUpdate($event)"
+          [form]="form"
+          (quantityUpdated)="onQuantityUpdate($event)"
+        />
+        <div class="form-group">
+          <label for="comment">
+            <span class="h4">{{ 'toolineo.account.return_request.modal.form.comment_label' | translate }}<br /></span>
+            <span class="font-weight-norma">{{
+              'toolineo.account.return_request.modal.form.comment_sub_label' | translate
+            }}</span>
+          </label>
+          <textarea class="form-control" formControlName="comment" rows="3"></textarea>
+        </div>
+        <div class="row">
+          <div class="col-4 offset-8">
+            <div class="summary-section">
+              <h3>{{ 'toolineo.account.return_request.modal.summary.title' | translate }}</h3>
+              <span
+                >{{ selectedQuantity }} {{ 'toolineo.account.return_request.modal.summary.items' | translate }}</span
+              >
+              <button
+                type="submit"
+                [disabled]="form.invalid || selectedQuantity === 0"
+                class="btn-block btn btn-primary"
+              >
+                {{ 'toolineo.account.return_request.modal.form.btn.label' | translate }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </form>
+    </ish-modal-dialog>
+  </ng-container>
+</ng-container>
+
+<ng-template #noReturnableItems>
+  <h2 class="text-center">No Returnable Items found</h2>
+</ng-template>

src/app/extensions/return-request/components/return-request-modal/return-request-modal.component.spec.ts

@@ -0,0 +1,31 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { instance, mock } from 'ts-mockito';
+
+import { ReturnRequestFacade } from '../../facades/return-request.facade';
+
+import { ReturnRequestModalComponent } from './return-request-modal.component';
+
+describe('Return Request Modal Component', () => {
+  let component: ReturnRequestModalComponent;
+  let fixture: ComponentFixture<ReturnRequestModalComponent>;
+  let element: HTMLElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ReturnRequestModalComponent],
+      providers: [{ provide: ReturnRequestFacade, useFactory: () => instance(mock(ReturnRequestFacade)) }],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ReturnRequestModalComponent);
+    component = fixture.componentInstance;
+    element = fixture.nativeElement;
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+    expect(element).toBeTruthy();
+    expect(() => fixture.detectChanges()).not.toThrow();
+  });
+});

src/app/extensions/return-request/components/return-request-modal/return-request-modal.component.ts

@@ -0,0 +1,114 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  Input,
+  OnChanges,
+  OnInit,
+  Output,
+  ViewChild,
+} from '@angular/core';
+import { FormControl, FormGroup, UntypedFormGroup } from '@angular/forms';
+import { Observable } from 'rxjs';
+
+import { Order } from 'ish-core/models/order/order.model';
+import { ModalDialogComponent } from 'ish-shared/components/common/modal-dialog/modal-dialog.component';
+
+import { ReturnRequestFacade } from '../../facades/return-request.facade';
+import {
+  CreateReturnRequestPayload,
+  CreateReturnRequestPosition,
+  ReturnablePosition,
+} from '../../models/return-request/return-request.model';
+import { allowedStatus } from '../../util';
+
+@Component({
+  selector: 'ish-return-request-modal',
+  templateUrl: './return-request-modal.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ReturnRequestModalComponent implements OnInit, OnChanges {
+  @Input() order: Order;
+  @Input() isOpenModal: boolean;
+  @Input() isGuest: boolean;
+  @Output() closeModal = new EventEmitter<void>();
+  @ViewChild('returnRequestDialog') returnRequestDialog: ModalDialogComponent<unknown>;
+
+  form: UntypedFormGroup;
+  returnableItems$: Observable<ReturnablePosition[]>;
+
+  positions: CreateReturnRequestPosition[];
+  returnItemsLoaded = false;
+  selectedQuantity = 0;
+
+  constructor(private returnRequestFacade: ReturnRequestFacade, private cdr: ChangeDetectorRef) {}
+
+  ngOnInit() {
+    this.form = new FormGroup({
+      checkAll: new FormControl(false),
+      items: new FormGroup({}),
+      comment: new FormControl(''),
+    });
+    this.returnableItems$ = this.returnRequestFacade.getOrderReturnableItems$({
+      email: this.order?.email,
+      documentNo: this.order?.documentNo,
+      orderId: this.order?.id,
+      isGuest: this.isGuest,
+    });
+  }
+
+  ngOnChanges() {
+    if (this.isOpenModal) {
+      this.showModal();
+    }
+  }
+
+  showModal() {
+    this.returnRequestDialog.show();
+  }
+
+  hideModal() {
+    this.returnRequestDialog.hide();
+    this.closeModal.emit();
+  }
+
+  onItemsUpdate(data: CreateReturnRequestPosition[]) {
+    this.positions = data;
+  }
+
+  onQuantityUpdate(data: number) {
+    this.selectedQuantity = data;
+    this.cdr.markForCheck();
+  }
+
+  private getRequest(): CreateReturnRequestPayload {
+    const customAttributes = [];
+    if (this.form.get('comment').value) {
+      customAttributes.push({
+        key: 'comment',
+        value: this.form.get('comment').value,
+      });
+    }
+
+    return {
+      type: 'RETURN',
+      positions: this.positions,
+      customAttributes,
+      isGuest: this.isGuest,
+      orderId: this.order.id,
+      email: this.order.email,
+      documentNo: this.order.documentNo,
+    };
+  }
+
+  hasStatusCode(status: string) {
+    return allowedStatus(status);
+  }
+
+  submit() {
+    this.returnRequestFacade.createRequest(this.getRequest());
+    this.form.reset();
+    this.hideModal();
+  }
+}

src/app/extensions/return-request/components/return-request-product-info/return-request-product-info.component.html

@@ -0,0 +1,26 @@
+<div ishProductContext [sku]="sku">
+  <div class="row">
+    <div class="col-3">
+      <div class="ml-2">
+        <ish-product-image imageType="S" />
+      </div>
+    </div>
+    <div class="col-9">
+      <ish-product-name [link]="false" />
+      <div *ishProductContextAccess="let product = product">
+        <div>
+          <strong>{{ 'toolineo.account.return_request.modal.table.product.EAN' | translate }}</strong>
+          {{ getAttribute(product, 'EAN') }}
+        </div>
+        <div>
+          <strong>{{ 'toolineo.account.return_request.modal.table.product.item_number' | translate }}</strong>
+          {{ getAttribute(product, 'artnr') }}
+        </div>
+        <div>
+          <strong>{{ 'toolineo.account.return_request.modal.table.product.manufacturer_number' | translate }}</strong>
+          {{ getAttribute(product, 'mfg_number') }}
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/app/extensions/return-request/components/return-request-product-info/return-request-product-info.component.spec.ts

@@ -0,0 +1,37 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MockComponent, MockDirective } from 'ng-mocks';
+
+import { ProductContextDirective } from 'ish-core/directives/product-context.directive';
+import { ProductImageComponent } from 'ish-shared/components/product/product-image/product-image.component';
+import { ProductNameComponent } from 'ish-shared/components/product/product-name/product-name.component';
+
+import { ReturnRequestProductInfoComponent } from './return-request-product-info.component';
+
+describe('Return Request Product Info Component', () => {
+  let component: ReturnRequestProductInfoComponent;
+  let fixture: ComponentFixture<ReturnRequestProductInfoComponent>;
+  let element: HTMLElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [
+        MockComponent(ProductImageComponent),
+        MockComponent(ProductNameComponent),
+        MockDirective(ProductContextDirective),
+        ReturnRequestProductInfoComponent,
+      ],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ReturnRequestProductInfoComponent);
+    component = fixture.componentInstance;
+    element = fixture.nativeElement;
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+    expect(element).toBeTruthy();
+    expect(() => fixture.detectChanges()).not.toThrow();
+  });
+});

src/app/extensions/return-request/components/return-request-product-info/return-request-product-info.component.ts

@@ -0,0 +1,16 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+
+import { ProductView } from 'ish-core/models/product-view/product-view.model';
+
+@Component({
+  selector: 'ish-return-request-product-info',
+  templateUrl: './return-request-product-info.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ReturnRequestProductInfoComponent {
+  @Input() sku: string;
+
+  getAttribute(product: ProductView, name: string) {
+    return product.attributes?.find(attr => attr.name === name) ?? 'N/A';
+  }
+}