feat: add an order to shopping cart (#1592)

---------

Co-authored-by: LucasHengelhaupt <l.hengelhaupt@intershop.com>
Co-authored-by: Silke <s.grueber@intershop.de>
Co-authored-by: Marcus Schmidt <MarSchmidt@intershop.com>
Co-authored-by: Lucas Hengelhaupt <LHengelhaupt@intershop.com>
Co-authored-by: MGlatter <m.glatter@intershop.de>

src/app/pages/account-order/account-order/account-order.component.html

@@ -98,6 +98,24 @@ <h1>{{ 'account.orderdetails.heading.default' | translate }}</h1>
         <h3>{{ 'checkout.order_summary.heading' | translate }}</h3>
         <ish-basket-cost-summary [totals]="order.totals" />
       </div>
+
+      <!-- Add Order Items to Cart -->
+      <button
+        type="button"
+        class="btn btn-secondary btn-block mb-3"
+        [disabled]="displaySpinner()"
+        (click)="addOrderToBasket()"
+        data-testing-id="create-cart-from-order"
+      >
+        <ng-container *ngIf="this.displaySpinner() !== true; else spinning">
+          {{ 'account.orderdetails.add_to_cart.button.label' | translate }}
+        </ng-container>
+        <!-- spinning animation after clicking button -->
+        <ng-template #spinning>
+          <fa-icon [icon]="['fas', 'spinner']" [spin]="true" ngClass="pr-3" />
+          <span>{{ 'common.button.spinning.label' | translate }}</span>
+        </ng-template>
+      </button>
     </div>
   </div>
 </ng-container>

src/app/pages/account-order/account-order/account-order.component.spec.ts

@@ -2,7 +2,11 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { TranslateModule } from '@ngx-translate/core';
 import { MockComponent, MockPipe } from 'ng-mocks';
+import { of } from 'rxjs';
+import { instance, mock, when } from 'ts-mockito';
 
+import { CheckoutFacade } from 'ish-core/facades/checkout.facade';
+import { ShoppingFacade } from 'ish-core/facades/shopping.facade';
 import { FeatureToggleModule } from 'ish-core/feature-toggle.module';
 import { DatePipe } from 'ish-core/pipes/date.pipe';
 import { ServerSettingPipe } from 'ish-core/pipes/server-setting.pipe';
@@ -22,6 +26,9 @@ describe('Account Order Component', () => {
   let element: HTMLElement;
 
   beforeEach(async () => {
+    const checkoutFacadeMock = mock(CheckoutFacade);
+    when(checkoutFacadeMock.basketLoading$).thenReturn(of(false));
+
     await TestBed.configureTestingModule({
       declarations: [
         AccountOrderComponent,
@@ -36,6 +43,10 @@ describe('Account Order Component', () => {
         MockPipe(ServerSettingPipe, path => path === 'shipping.messageToMerchant'),
       ],
       imports: [FeatureToggleModule.forTesting(), TranslateModule.forRoot()],
+      providers: [
+        { provide: CheckoutFacade, useFactory: () => instance(checkoutFacadeMock) },
+        { provide: ShoppingFacade, useFactory: () => instance(mock(ShoppingFacade)) },
+      ],
     }).compileComponents();
   });
 
@@ -76,4 +87,9 @@ describe('Account Order Component', () => {
     fixture.detectChanges();
     expect(element.querySelector('[data-testing-id="orders-link"]')).toBeTruthy();
   });
+
+  it('should display the create cart from order button after creation', () => {
+    fixture.detectChanges();
+    expect(element.querySelector('[data-testing-id="create-cart-from-order"]')).toBeTruthy();
+  });
 });

src/app/pages/account-order/account-order/account-order.component.ts

@@ -1,5 +1,8 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, Signal, effect, signal } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
 
+import { CheckoutFacade } from 'ish-core/facades/checkout.facade';
+import { ShoppingFacade } from 'ish-core/facades/shopping.facade';
 import { Order } from 'ish-core/models/order/order.model';
 
 /**
@@ -15,4 +18,29 @@ import { Order } from 'ish-core/models/order/order.model';
 })
 export class AccountOrderComponent {
   @Input({ required: true }) order: Order;
+
+  basketLoading: Signal<boolean>;
+  displaySpinner = signal(false);
+
+  constructor(private checkoutFacade: CheckoutFacade, private shoppingFacade: ShoppingFacade) {
+    this.basketLoading = toSignal(this.checkoutFacade.basketLoading$, { initialValue: false });
+    effect(
+      () => {
+        if (!this.basketLoading()) {
+          this.displaySpinner.set(this.basketLoading());
+        }
+      },
+      { allowSignalWrites: true }
+    );
+  }
+
+  addOrderToBasket() {
+    this.displaySpinner.set(true);
+
+    this.order.lineItems.forEach(lineItem => {
+      if (!lineItem.isFreeGift) {
+        this.shoppingFacade.addProductToBasket(lineItem.productSKU, lineItem.quantity.value);
+      }
+    });
+  }
 }

src/assets/i18n/de_DE.json

@@ -254,6 +254,7 @@
   "account.order_templates.delete_dialog.header": "{{0}} löschen",
   "account.order_templates.edit.confirmation": "Ihre Bestellvorlage \"{{0}}\" wurde aktualisiert.",
   "account.order_templates.edit_form.save_button.text": "Änderungen speichern",
+  "account.orderdetails.add_to_cart.button.label": "Erneut bestellen",
   "account.orderdetails.approved.text": "(genehmigt von {{0}} am {{1}})",
   "account.orderdetails.breadcrumb": "Bestelldetails",
   "account.orderdetails.date_of_order.label": "Bestelldatum",

src/assets/i18n/en_US.json

@@ -254,6 +254,7 @@
   "account.order_templates.delete_dialog.header": "Delete {{0}}",
   "account.order_templates.edit.confirmation": "Your order template \"{{0}}\" has been updated.",
   "account.order_templates.edit_form.save_button.text": "Save Changes",
+  "account.orderdetails.add_to_cart.button.label": "Reorder",
   "account.orderdetails.approved.text": "(approved by {{0}} on {{1}})",
   "account.orderdetails.breadcrumb": "Order Details",
   "account.orderdetails.date_of_order.label": "Date of Order",

src/assets/i18n/fr_FR.json

@@ -254,6 +254,7 @@
   "account.order_templates.delete_dialog.header": "Supprimer {{0}}",
   "account.order_templates.edit.confirmation": "Votre modèle de commande \"{{0}}\" a été mise à jour.",
   "account.order_templates.edit_form.save_button.text": "Enregistrer les modifications",
+  "account.orderdetails.add_to_cart.button.label": "Commander à nouveau",
   "account.orderdetails.approved.text": "(approuvé par {{0}} sur {{1}})",
   "account.orderdetails.breadcrumb": "Détails de la commande",
   "account.orderdetails.date_of_order.label": "Date de la commande",