Dialog Versandoptionsauswahl

angular.json

@@ -1736,6 +1736,46 @@
           }
         }
       }
+    },
+    "@page/checkout": {
+      "projectType": "library",
+      "root": "apps/page/checkout",
+      "sourceRoot": "apps/page/checkout/src",
+      "prefix": "page",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:ng-packagr",
+          "options": {
+            "tsConfig": "apps/page/checkout/tsconfig.lib.json",
+            "project": "apps/page/checkout/ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "apps/page/checkout/tsconfig.lib.prod.json"
+            }
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "apps/page/checkout/src/test.ts",
+            "tsConfig": "apps/page/checkout/tsconfig.spec.json",
+            "karmaConfig": "apps/page/checkout/karma.conf.js"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "apps/page/checkout/tsconfig.lib.json",
+              "apps/page/checkout/tsconfig.spec.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
     }
   },
   "defaultProject": "sales"

apps/domain/checkout/src/lib/checkout.service.ts

@@ -1,6 +1,7 @@
 import { Injectable } from '@angular/core';
 import { StringDictionary } from '@cmf/core';
 import {
+  BranchDTO,
   BuyerDTO,
   BuyerResult,
   CheckoutDTO,
@@ -117,4 +118,8 @@ export class CheckoutService {
   checkout(processId: number): Observable<CheckoutDTO> {
     throw new Error('Not Implemented');
   }
+
+  getBranches(): Observable<BranchDTO[]> {
+    throw new Error('');
+  }
 }

apps/page/checkout/README.md

@@ -0,0 +1,25 @@
+# Checkout
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 10.1.2.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project checkout` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project checkout`.
+
+> Note: Don't forget to add `--project checkout` or else it will be added to the default project in your `angular.json` file.
+
+## Build
+
+Run `ng build checkout` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build checkout`, go to the dist folder `cd dist/checkout` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test checkout` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).

apps/page/checkout/karma.conf.js

@@ -0,0 +1,32 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma'),
+    ],
+    client: {
+      clearContext: false, // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, '../../../coverage/page/checkout'),
+      reports: ['html', 'lcovonly', 'text-summary'],
+      fixWebpackSourcePaths: true,
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true,
+  });
+};

apps/page/checkout/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../../dist/page/checkout",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

apps/page/checkout/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@page/checkout",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^10.1.2",
+    "@angular/core": "^10.1.2"
+  },
+  "dependencies": {
+    "tslib": "^2.0.0"
+  }
+}

apps/page/checkout/src/lib/index.ts

@@ -0,0 +1,4 @@
+// start:ng42.barrel
+export * from './page-checkout.module';
+export * from './page-checkout-modals.module';
+// end:ng42.barrel

apps/page/checkout/src/lib/modals/purchasing-options-modal/b2b-delivery-option/b2b-delivery-option.component.html

@@ -0,0 +1,15 @@
+<div class="option-icon">
+  <ui-icon size="50px" icon="spinner"></ui-icon>
+</div>
+
+<h4>B2B Versand</h4>
+<p>
+  Als B2B Kunde können wir Ihnen den Artikel auch liefern.
+</p>
+<span class="price">20,99 EUR</span>
+<div class="grow"></div>
+<div>
+  <button type="button" class="select-option" (click)="select()">
+    Auswählen
+  </button>
+</div>

apps/page/checkout/src/lib/modals/purchasing-options-modal/b2b-delivery-option/b2b-delivery-option.component.ts

@@ -0,0 +1,16 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { PurchasingOptionsModalStore } from '../purchasing-options-modal.store';
+
+@Component({
+  selector: 'page-b2b-delivery-option',
+  templateUrl: 'b2b-delivery-option.component.html',
+  styleUrls: ['../option.scss', 'b2b-delivery-option.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class B2BDeliveryOptionComponent {
+  constructor(private purchasingOptionsModalStore: PurchasingOptionsModalStore) {}
+
+  select() {
+    this.purchasingOptionsModalStore.setOption('b2b-delivery');
+  }
+}

apps/page/checkout/src/lib/modals/purchasing-options-modal/b2b-delivery-option/index.ts

@@ -0,0 +1,3 @@
+// start:ng42.barrel
+export * from './b2b-delivery-option.component';
+// end:ng42.barrel

apps/page/checkout/src/lib/modals/purchasing-options-modal/delivery-option/delivery-option.component.html

@@ -0,0 +1,14 @@
+<div class="option-icon">
+  <ui-icon size="50px" icon="spinner"></ui-icon>
+</div>
+<h4>Versand</h4>
+<p>
+  Möchten Sie den Artikel geliefert bekommen?
+</p>
+<span class="price">20,99 EUR</span>
+<div class="grow"></div>
+<div>
+  <button type="button" class="select-option" (click)="select()">
+    Auswählen
+  </button>
+</div>

apps/page/checkout/src/lib/modals/purchasing-options-modal/delivery-option/delivery-option.component.ts

@@ -0,0 +1,16 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { PurchasingOptionsModalStore } from '../purchasing-options-modal.store';
+
+@Component({
+  selector: 'page-delivery-option',
+  templateUrl: 'delivery-option.component.html',
+  styleUrls: ['../option.scss', 'delivery-option.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DeliveryOptionComponent {
+  constructor(private purchasingOptionsModalStore: PurchasingOptionsModalStore) {}
+
+  select() {
+    this.purchasingOptionsModalStore.setOption('delivery');
+  }
+}

apps/page/checkout/src/lib/modals/purchasing-options-modal/delivery-option/index.ts

@@ -0,0 +1,3 @@
+// start:ng42.barrel
+export * from './delivery-option.component';
+// end:ng42.barrel

apps/page/checkout/src/lib/modals/purchasing-options-modal/dig-delivery-option/dig-delivery-option.component.html

@@ -0,0 +1,12 @@
+<div class="option-icon">
+  <ui-icon size="50px" icon="spinner"></ui-icon>
+</div>
+<h4>DIG Versand</h4>
+<p>Möchten Sie den Artikel geliefert bekommen?</p>
+<span class="price">20,99 EUR</span>
+<div class="grow"></div>
+<div>
+  <button type="button" class="select-option" (click)="select()">
+    Auswählen
+  </button>
+</div>

apps/page/checkout/src/lib/modals/purchasing-options-modal/dig-delivery-option/dig-delivery-option.component.ts

@@ -0,0 +1,16 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { PurchasingOptionsModalStore } from '../purchasing-options-modal.store';
+
+@Component({
+  selector: 'page-dig-delivery-option',
+  templateUrl: 'dig-delivery-option.component.html',
+  styleUrls: ['../option.scss', 'dig-delivery-option.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DigDeliveryOptionComponent {
+  constructor(private purchasingOptionsModalStore: PurchasingOptionsModalStore) {}
+
+  select() {
+    this.purchasingOptionsModalStore.setOption('dig-delivery');
+  }
+}

apps/page/checkout/src/lib/modals/purchasing-options-modal/dig-delivery-option/index.ts

@@ -0,0 +1,3 @@
+// start:ng42.barrel
+export * from './dig-delivery-option.component';
+// end:ng42.barrel

apps/page/checkout/src/lib/modals/purchasing-options-modal/index.ts

@@ -0,0 +1,6 @@
+// start:ng42.barrel
+export * from './options';
+export * from './purchasing-options-modal.component';
+export * from './purchasing-options-modal.data';
+export * from './purchasing-options-modal.module';
+// end:ng42.barrel

apps/page/checkout/src/lib/modals/purchasing-options-modal/option.scss

@@ -0,0 +1,29 @@
+:host {
+  @apply flex flex-col box-border text-center;
+  width: 200px;
+}
+
+.option-icon {
+  @apply text-ucla-blue mx-auto;
+  width: 50px;
+}
+
+h4 {
+  @apply text-2xl mt-4 mb-0;
+}
+
+p {
+  @apply my-2;
+}
+
+.price {
+  @apply font-bold my-2;
+}
+
+.grow {
+  @apply flex-grow;
+}
+
+.select-option {
+  @apply mt-2 mb-4 border-2 border-solid border-brand text-brand text-cta-l font-bold bg-white rounded-full py-3 px-6;
+}

apps/page/checkout/src/lib/modals/purchasing-options-modal/options.ts

@@ -0,0 +1,7 @@
+// start:ng42.barrel
+export * from './b2b-delivery-option';
+export * from './delivery-option';
+export * from './dig-delivery-option';
+export * from './pick-up-option';
+export * from './take-away-option';
+// end:ng42.barrel

apps/page/checkout/src/lib/modals/purchasing-options-modal/pick-up-option/index.ts

@@ -0,0 +1,3 @@
+// start:ng42.barrel
+export * from './pick-up-option.component';
+// end:ng42.barrel

apps/page/checkout/src/lib/modals/purchasing-options-modal/pick-up-option/pick-up-option.component.html

@@ -0,0 +1,14 @@
+<div class="option-icon">
+  <ui-icon size="50px" icon="spinner"></ui-icon>
+</div>
+<h4>Abholung</h4>
+<p>
+  Möchten Sie den Artikel in einer unserer Filialen abholen?
+</p>
+<span class="price">20,99 EUR</span>
+<div class="grow"></div>
+<div>
+  <button type="button" class="select-option" (click)="select()">
+    Auswählen
+  </button>
+</div>

apps/page/checkout/src/lib/modals/purchasing-options-modal/pick-up-option/pick-up-option.component.ts

@@ -0,0 +1,27 @@
+import { Component, ChangeDetectionStrategy, OnInit } from '@angular/core';
+import { BranchDTO } from '@swagger/checkout';
+import { PurchasingOptionsModalStore } from '../purchasing-options-modal.store';
+
+@Component({
+  selector: 'page-pick-up-option',
+  templateUrl: 'pick-up-option.component.html',
+  styleUrls: ['../option.scss', 'pick-up-option.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class PickUpOptionComponent implements OnInit {
+  branches$ = this.purchasingOptionsModalStore.selectAvailableBranches;
+
+  constructor(private purchasingOptionsModalStore: PurchasingOptionsModalStore) {}
+
+  ngOnInit() {
+    this.purchasingOptionsModalStore.loadBranches();
+  }
+
+  select() {
+    this.purchasingOptionsModalStore.setOption('pick-up');
+  }
+
+  setBranch(branch: BranchDTO) {
+    this.purchasingOptionsModalStore.setBranch(branch);
+  }
+}

apps/page/checkout/src/lib/modals/purchasing-options-modal/purchasing-options-modal.component.html

@@ -0,0 +1,48 @@
+<ng-container *ngIf="(hasOption$ | async) === false">
+  <h3 class="modal-title">Wie möchten Sie den Artikel erhalten?</h3>
+  <button class="close-btn" (click)="modalRef.close()">
+    <ui-icon icon="close" size="21px"></ui-icon>
+  </button>
+
+  <div class="options-wrapper">
+    <ng-container *ngFor="let option of availableOptions$ | async" [ngSwitch]="option">
+      <page-take-away-option *ngSwitchCase="'take-away'"></page-take-away-option>
+      <page-pick-up-option *ngSwitchCase="'pick-up'"></page-pick-up-option>
+      <page-delivery-option *ngSwitchCase="'delivery'"></page-delivery-option>
+      <page-dig-delivery-option *ngSwitchCase="'dig-delivery'"></page-dig-delivery-option>
+      <page-b2b-delivery-option *ngSwitchCase="'b2b-delivery'"></page-b2b-delivery-option>
+    </ng-container>
+  </div>
+</ng-container>
+
+<ng-container *ngIf="hasOption$ | async">
+  <h3 class="modal-title">Artikel dem Warenkorb hinzufügen</h3>
+  <button class="close-btn" (click)="modalRef.close()">
+    <ui-icon icon="close" size="21px"></ui-icon>
+  </button>
+
+  <div class="option-product-summary">
+    <h5 class="option-name">{{ option$ | async }}</h5>
+    <hr />
+    <div class="product">
+      <div class="thumbnail">
+        <img src="https://produktbilder-test.paragon-data.net/9783551354013.jpg?showDummy=true" />
+      </div>
+      <div class="details">
+        <h6 class="title">Rowling, J. K.; Fritz, Klaus - Harry Potter und der Stein der Weisen</h6>
+        <div class="format">Taschenbuch (Kartoniert, Paperback)</div>
+        <div class="price">8,99 EUR</div>
+      </div>
+    </div>
+    <hr />
+    <div>
+      <div class="reading-points">
+        1 Artikel | 90 Lesepunkte
+      </div>
+      <div class="subtotal">
+        Zwischensumme 8,99 EUR
+      </div>
+    </div>
+  </div>
+  <div class="actions"></div>
+</ng-container>

apps/page/checkout/src/lib/modals/purchasing-options-modal/purchasing-options-modal.component.scss

@@ -0,0 +1,23 @@
+:host {
+  @apply block box-border relative;
+}
+
+.modal-title {
+  @apply text-center mt-2 text-xl;
+}
+
+.close-btn {
+  @apply absolute top-0 right-0 text-ucla-blue border-none bg-transparent;
+}
+
+.options-wrapper {
+  @apply flex flex-row justify-evenly items-stretch;
+}
+
+.option-product-summary {
+  @apply flex flex-col box-border;
+}
+
+.option-name {
+  @apply font-bold text-card-sub mb-3 mt-1;
+}

apps/page/checkout/src/lib/modals/purchasing-options-modal/purchasing-options-modal.component.ts

@@ -0,0 +1,28 @@
+import { Component, ChangeDetectionStrategy, OnInit } from '@angular/core';
+import { UiModalRef } from '@ui/modal';
+import { PurchasingOptionsModalData } from './purchasing-options-modal.data';
+import { PurchasingOptionsModalStore } from './purchasing-options-modal.store';
+
+@Component({
+  selector: 'page-purchasing-options-modal',
+  templateUrl: 'purchasing-options-modal.component.html',
+  styleUrls: ['purchasing-options-modal.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [PurchasingOptionsModalStore],
+})
+export class PurchasingOptionsModalComponent implements OnInit {
+  readonly availableOptions$ = this.purchasingOptionsModalStore.selectAvailableOptions;
+
+  readonly option$ = this.purchasingOptionsModalStore.selectOption;
+
+  readonly hasOption$ = this.purchasingOptionsModalStore.selectHasOption;
+
+  constructor(
+    public modalRef: UiModalRef<any, PurchasingOptionsModalData>,
+    private purchasingOptionsModalStore: PurchasingOptionsModalStore
+  ) {
+    this.purchasingOptionsModalStore.setAvailableOptions(this.modalRef.data.availableOptions);
+  }
+
+  ngOnInit(): void {}
+}

apps/page/checkout/src/lib/modals/purchasing-options-modal/purchasing-options-modal.data.ts

@@ -0,0 +1,5 @@
+import { PurchasingOptions } from './purchasing-options-modal.store';
+
+export interface PurchasingOptionsModalData {
+  availableOptions: PurchasingOptions[];
+}

apps/page/checkout/src/lib/modals/purchasing-options-modal/purchasing-options-modal.module.ts

@@ -0,0 +1,27 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import {
+  B2BDeliveryOptionComponent,
+  TakeAwayOptionComponent,
+  PickUpOptionComponent,
+  DeliveryOptionComponent,
+  DigDeliveryOptionComponent,
+} from './options';
+
+import { PurchasingOptionsModalComponent } from './purchasing-options-modal.component';
+import { UiIconModule } from '@ui/icon';
+
+@NgModule({
+  imports: [CommonModule, UiIconModule],
+  exports: [PurchasingOptionsModalComponent],
+  declarations: [
+    PurchasingOptionsModalComponent,
+    B2BDeliveryOptionComponent,
+    TakeAwayOptionComponent,
+    PickUpOptionComponent,
+    DeliveryOptionComponent,
+    DigDeliveryOptionComponent,
+  ],
+})
+export class PurchasingOptionsModalModule {}

apps/page/checkout/src/lib/modals/purchasing-options-modal/purchasing-options-modal.store.ts

@@ -0,0 +1,75 @@
+import { Injectable } from '@angular/core';
+import { CheckoutService } from '@domain/checkout';
+import { ComponentStore } from '@ngrx/component-store';
+import { AvailabilityDTO } from '@swagger/availability';
+import { BranchDTO } from '@swagger/checkout';
+import { tap } from 'rxjs/operators';
+
+export type PurchasingOptions = 'take-away' | 'pick-up' | 'delivery' | 'dig-delivery' | 'b2b-delivery' | 'download';
+
+interface PurchasingOptionsModalState {
+  option?: PurchasingOptions;
+  branch?: BranchDTO;
+  availability?: AvailabilityDTO;
+  availableOptions: PurchasingOptions[];
+  availableBranches: BranchDTO[];
+}
+
+@Injectable()
+export class PurchasingOptionsModalStore extends ComponentStore<PurchasingOptionsModalState> {
+  readonly selectOption = this.select((s) => s.option);
+
+  readonly selectHasOption = this.select((s) => !!s.option);
+
+  readonly selectBranch = this.select((s) => s.branch);
+
+  readonly selectAvailability = this.select((s) => s.availability);
+
+  readonly selectAvailableOptions = this.select((s) => s.availableOptions);
+
+  readonly selectAvailableBranches = this.select((s) => s.availableBranches);
+
+  constructor(private checkoutService: CheckoutService) {
+    super({
+      availableBranches: [],
+      availableOptions: [],
+    });
+  }
+
+  readonly setOption = this.updater((state, option: PurchasingOptions) => ({
+    ...state,
+    option,
+  }));
+
+  readonly setBranch = this.updater((state, branch: BranchDTO) => ({
+    ...state,
+    branch,
+  }));
+
+  readonly setAvailability = this.updater((state, availability: AvailabilityDTO) => ({
+    ...state,
+    availability,
+  }));
+
+  readonly setAvailableOptions = this.updater((state, availableOptions: PurchasingOptions[]) => {
+    let option = undefined;
+    if (availableOptions?.length === 1) {
+      option = availableOptions[0];
+    }
+
+    return {
+      ...state,
+      availableOptions,
+      option,
+    };
+  });
+
+  readonly setAvailableBranches = this.updater((state, availableBranches: BranchDTO[]) => ({
+    ...state,
+    availableBranches,
+  }));
+
+  loadBranches = this.effect(() =>
+    this.checkoutService.getBranches().pipe(tap((branches: BranchDTO[]) => this.setAvailableBranches(branches)))
+  );
+}

apps/page/checkout/src/lib/modals/purchasing-options-modal/take-away-option/index.ts

@@ -0,0 +1,3 @@
+// start:ng42.barrel
+export * from './take-away-option.component';
+// end:ng42.barrel

apps/page/checkout/src/lib/modals/purchasing-options-modal/take-away-option/take-away-option.component.html

@@ -0,0 +1,14 @@
+<div class="option-icon">
+  <ui-icon size="50px" icon="spinner"></ui-icon>
+</div>
+<h4>Rücklage / Filialentnahme</h4>
+<p>
+  Möchten Sie den Artikel zurücklegen lassen oder sofort mitnehmen?
+</p>
+<span class="price">20,99 EUR</span>
+<div class="grow"></div>
+<div>
+  <button type="button" class="select-option" (click)="select()">
+    Auswählen
+  </button>
+</div>

apps/page/checkout/src/lib/modals/purchasing-options-modal/take-away-option/take-away-option.component.ts

@@ -0,0 +1,16 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { PurchasingOptionsModalStore } from '../purchasing-options-modal.store';
+
+@Component({
+  selector: 'page-take-away-option',
+  templateUrl: 'take-away-option.component.html',
+  styleUrls: ['../option.scss', 'take-away-option.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TakeAwayOptionComponent {
+  constructor(private purchasingOptionsModalStore: PurchasingOptionsModalStore) {}
+
+  select() {
+    this.purchasingOptionsModalStore.setOption('take-away');
+  }
+}

apps/page/checkout/src/lib/page-checkout-modals.module.ts

@@ -0,0 +1,9 @@
+import { NgModule } from '@angular/core';
+
+import { PurchasingOptionsModalModule } from './modals/purchasing-options-modal';
+
+@NgModule({
+  imports: [PurchasingOptionsModalModule],
+  exports: [PurchasingOptionsModalModule],
+})
+export class PageCheckoutModalsModule {}

apps/page/checkout/src/lib/page-checkout.module.ts

@@ -0,0 +1,8 @@
+import { NgModule } from '@angular/core';
+import { PageCheckoutModalsModule } from './page-checkout-modals.module';
+
+@NgModule({
+  imports: [PageCheckoutModalsModule],
+  exports: [PageCheckoutModalsModule],
+})
+export class PageCheckoutModule {}

apps/page/checkout/src/public-api.ts

@@ -0,0 +1,5 @@
+/*
+ * Public API Surface of checkout
+ */
+
+export * from './lib';

apps/page/checkout/src/test.ts

@@ -0,0 +1,24 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/zone';
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
+
+declare const require: {
+  context(
+    path: string,
+    deep?: boolean,
+    filter?: RegExp
+  ): {
+    keys(): string[];
+    <T>(id: string): T;
+  };
+};
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);

apps/page/checkout/tsconfig.lib.json

@@ -0,0 +1,25 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../out-tsc/lib",
+    "target": "es2015",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": [],
+    "lib": [
+      "dom",
+      "es2018"
+    ]
+  },
+  "angularCompilerOptions": {
+    "skipTemplateCodegen": true,
+    "strictMetadataEmit": true,
+    "enableResourceInlining": true
+  },
+  "exclude": [
+    "src/test.ts",
+    "**/*.spec.ts"
+  ]
+}

apps/page/checkout/tsconfig.lib.prod.json

@@ -0,0 +1,10 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "enableIvy": false
+  }
+}

apps/page/checkout/tsconfig.spec.json

@@ -0,0 +1,17 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "files": [
+    "src/test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}

apps/page/checkout/tslint.json

@@ -0,0 +1,17 @@
+{
+  "extends": "../../../tslint.json",
+  "rules": {
+    "directive-selector": [
+      true,
+      "attribute",
+      "page",
+      "camelCase"
+    ],
+    "component-selector": [
+      true,
+      "element",
+      "page",
+      "kebab-case"
+    ]
+  }
+}

apps/sales/src/app/modules/product/pages/product-details/product-details.component.ts

@@ -5,7 +5,7 @@ import { ItemDTO, ReviewDTO } from '@swagger/cat';
 import { Observable, of, Subject, forkJoin, combineLatest } from 'rxjs';
 import { Store } from '@ngxs/store';
 import { PhotoGalleryComponent, ButtonComponent } from '@libs/ui';
-import { map, delay, takeUntil, switchMap, catchError, tap, filter, take } from 'rxjs/operators';
+import { map, delay, takeUntil, switchMap, catchError, tap, filter, take, first } from 'rxjs/operators';
 import { ProductReview } from '../../../../core/models/product-review.model';
 import { ProductDisplay } from '../../../../core/models/product-display.model';
 import { AddBreadcrumb, UpdateCurrentBreadcrumbName } from '../../../../core/store/actions/breadcrumb.actions';
@@ -35,6 +35,10 @@ import { isNullOrUndefined } from 'util';
 import { SetSelectedItemIfMissingOrChanged } from 'apps/sales/src/app/core/store/actions/process.actions';
 import { ProductOtherFormatsComponent } from '../../components/product-other-formats/product-other-formats.component';
 import { allowedAvailabilityStatusCodes } from 'apps/sales/src/app/core/utils/product.util';
+import { UiModalService } from '@ui/modal';
+import { PurchasingOptionsModalComponent } from 'apps/page/checkout/src/lib/modals/purchasing-options-modal/purchasing-options-modal.component';
+import { PurchasingOptionsModalData } from 'apps/page/checkout/src/lib/modals/purchasing-options-modal';
+import { PurchasingOptions } from 'apps/page/checkout/src/lib/modals/purchasing-options-modal/purchasing-options-modal.store';
 
 @Component({
   selector: 'app-product-details',
@@ -302,7 +306,8 @@ export class ProductDetailsComponent implements OnInit, OnDestroy {
     private bookImagePipe: BookImagePipe,
     private cdrf: ChangeDetectorRef,
     private printer: PrinterService,
-    private datePipe: DatePipe
+    private datePipe: DatePipe,
+    private uiModal: UiModalService
   ) {}
 
   ngOnInit() {
@@ -897,12 +902,43 @@ export class ProductDetailsComponent implements OnInit, OnDestroy {
     return preferredAvailability; // ? preferredAvailability : availability[0];
   }
 
-  openModal() {
-    if (this.productAvailable) {
-      this.checkoutDialog.openDialog();
-    } else {
-      this.addToCartBtn.startLoading();
+  async openModal() {
+    let availableOptions: PurchasingOptions[] = [];
+
+    if (await this.takeNowAvailable.pipe(first()).toPromise()) {
+      availableOptions.push('take-away');
     }
+
+    if (await this.downloadAvailable.pipe(first()).toPromise()) {
+      availableOptions.push('download');
+    }
+
+    if (await this.storeAvailable.pipe(first()).toPromise()) {
+      availableOptions.push('pick-up');
+      availableOptions.push('b2b-delivery');
+    }
+
+    if (await this.shippingAvailable.pipe(first()).toPromise()) {
+      availableOptions.push('dig-delivery');
+    }
+
+    if (availableOptions.includes('dig-delivery') && availableOptions.includes('b2b-delivery')) {
+      availableOptions.push('delivery');
+      availableOptions = availableOptions.filter((option) => !(option === 'dig-delivery' || option === 'b2b-delivery'));
+    }
+
+    this.uiModal.open({
+      content: PurchasingOptionsModalComponent,
+      data: {
+        availableOptions,
+      } as PurchasingOptionsModalData,
+    });
+
+    // if (this.productAvailable) {
+    //   this.checkoutDialog.openDialog();
+    // } else {
+    //   this.addToCartBtn.startLoading();
+    // }
   }
 
   cartActionCompleted(open: boolean) {}

apps/sales/src/app/modules/product/product.module.ts

@@ -39,6 +39,7 @@ import { StockInfoLoadingComponent } from './components/stock-info-loading/stock
 import { SmallDoubleChoiceSwitchModule } from '@libs/ui/lib/small-double-choice-switch';
 import { GetAuthorsPipe } from './components/product-card/get-authors.pipe';
 import { UiIconModule } from '@ui/icon';
+import { PageCheckoutModalsModule } from '@page/checkout';
 
 @NgModule({
   imports: [
@@ -68,6 +69,7 @@ import { UiIconModule } from '@ui/icon';
     UiSwitchModule,
     SmallDoubleChoiceSwitchModule,
     UiIconModule,
+    PageCheckoutModalsModule,
   ],
   declarations: [
     ProductResultsComponent,

apps/sales/src/app/refact-imp/checkout.refact-imp.ts

@@ -4,6 +4,7 @@ import { CartService } from '@domain/cart';
 import { CheckoutService } from '@domain/checkout';
 import { Store } from '@ngxs/store';
 import {
+  BranchDTO,
   BuyerDTO,
   BuyerResult,
   CheckoutDTO,
@@ -58,6 +59,14 @@ export class CheckoutRefactImp implements CheckoutService {
     );
   }
 
+  getBranches(): Observable<BranchDTO[]> {
+    return this.checkoutService
+      .StoreCheckoutGetBranches({
+        take: 999,
+      })
+      .pipe(map((r) => r.result));
+  }
+
   createShoppingCart(processId: number): Observable<ShoppingCartDTO> {
     throw new Error('Method not implemented.');
   }

package-lock.json

@@ -5188,6 +5188,14 @@
         }
       }
     },
+    "@ngrx/component-store": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/@ngrx/component-store/-/component-store-11.0.0.tgz",
+      "integrity": "sha512-dq8c7eleroBvN8JvLNr+PpLeC23QKl/V7Rc1rpkfESXUi7mq2NmCcU3gXvfqhDM8+Kuxwj9D0Ljd59Hfz3Z8LQ==",
+      "requires": {
+        "tslib": "^2.0.0"
+      }
+    },
     "@ngrx/effects": {
       "version": "10.0.0",
       "resolved": "https://registry.npmjs.org/@ngrx/effects/-/effects-10.0.0.tgz",

package.json

@@ -49,6 +49,7 @@
     "@isa/remi-api": "^0.0.56",
     "@ng-idle/core": "^8.0.0-beta.4",
     "@ng-idle/keepalive": "^8.0.0-beta.4",
+    "@ngrx/component-store": "^11.0.0",
     "@ngrx/effects": "^10.0.0",
     "@ngrx/entity": "^10.0.0",
     "@ngrx/store": "^10.0.0",

tsconfig.json

@@ -165,7 +165,10 @@
         "apps/domain/oms/src/public-api.ts"
       ],
       "@ui/datepicker": [
-        "apps/ui/datepicker/src/public-api.ts",
+        "apps/ui/datepicker/src/public-api.ts"
+      ],
+      "@page/checkout": [
+        "apps/page/checkout/src/public-api.ts"
       ]
     }
   }