ISA-Frontend/apps/page/customer/src/lib/customer-details/customer-details.component.html

<ng-container *ngIf="customer$ | async; let customer">
  <a [routerLink]="['/customer', customer?.id, 'orders']" class="card-customer-orders">
    <span class="title">Bestellungen</span>
  </a>
  <a *ngIf="hasCustomerCard$ | async" [routerLink]="['/customer', customer?.id, 'card']" class="card-customer-card">
    <span class="title">Kundenkarte</span>
  </a>
  <div class="card-customer-details">
    <div class="header-container">
      <h1 class="title">{{ (customerType$ | async) === 'b2b' ? 'Firmendetails' : 'Kundendetails' }}</h1>
      <!-- <a class="button-customer-history">
        Historie
      </a> -->
    </div>
    <p class="info">Sind Ihre {{ (customerType$ | async) === 'b2b' ? 'Firmendaten' : 'Kundendaten' }} korrekt?</p>
    <div class="tags">
      <div class="tag" *ngFor="let feature of customerFeatures$ | async">
        <ui-icon icon="check" size="15px"></ui-icon>
        {{ feature.description }}
      </div>
    </div>
    <div class="details">
      <div class="detail">
        <span class="name">Erstellungsdatum</span>
        <span class="value">{{ customer.created | date: 'dd.MM.yy | HH:mm' }} Uhr</span>
      </div>
      <div class="detail">
        <span class="name">Kundennummer</span>
        <span class="value">{{ customer.customerNumber }}</span>
        <div class="grow"></div>
        <a
          [routerLink]="['/customer', customerId$ | async, 'edit', 'b2c']"
          class="edit-details"
          *ngIf="(canEdit$ | async) && (isB2b$ | async) === false"
          >Bearbeiten</a
        >
      </div>
      <ng-container *ngIf="isB2b$ | async">
        <div class="detail">
          <span class="name">Kundennummer-beeline</span>
          <span class="value">{{ (customer?.linkedRecords)[0]?.key }} {{ (customer?.linkedRecords)[0]?.value }}</span>
          <div class="grow"></div>
          <a [routerLink]="['/customer', customerId$ | async, 'edit', 'b2b']" class="edit-details" *ngIf="canEdit$ | async">Bearbeiten</a>
        </div>
      </ng-container>
    </div>
  </div>

  <ng-container [ngSwitch]="isB2b$ | async">
    <page-customer-data-b2b *ngSwitchCase="true" [customer]="customer" [customerType]="customerType$ | async"></page-customer-data-b2b>
    <page-customer-data-b2c *ngSwitchCase="false" [customer]="customer" [customerType]="customerType$ | async"></page-customer-data-b2c>
  </ng-container>

  <div class="address-wrapper">
    <div class="card-section-title">
      <h3>Rechnungsadresse</h3>
      <a
        *ngIf="(isB2b$ | async) === false && (canAdd$ | async) === true"
        class="button-add-address"
        [routerLink]="['/customer', customerId$ | async, 'payer', 'create', 'b2c']"
        >Hinzufügen</a
      >
    </div>
    <ng-container [ngSwitch]="isB2b$ | async">
      <div *ngSwitchCase="true" class="address-row">
        <span> {{ customer | address }} </span>
        <a *ngIf="canEdit$ | async" class="button-edit-address" [routerLink]="['/customer', customer?.id, 'edit', 'b2b']">Bearbeiten</a>
      </div>
      <ng-container *ngSwitchDefault>
        <ui-radio-group *ngIf="(customer | address) || customer.payers.length" class="card-customer-address" [(ngModel)]="selectedPayer">
          <div *ngIf="customer | address as defaultPayerAddress" class="address-row">
            <ui-radio-button>{{ defaultPayerAddress }}</ui-radio-button>
            <a *ngIf="canEdit$ | async" class="button-edit-address" [routerLink]="['/customer', customer?.id, 'edit', 'b2c']">Bearbeiten</a>
          </div>
          <div *ngFor="let payer of customer.payers" class="address-row">
            <ui-radio-button [value]="payer?.payer?.id">
              {{ payer?.payer?.data | address }}
            </ui-radio-button>
            <a
              *ngIf="canEdit$ | async"
              class="button-edit-address"
              [routerLink]="['/customer', customer?.id, 'payer', payer?.payer?.id, 'edit', 'b2c']"
              >Bearbeiten</a
            >
          </div>
        </ui-radio-group>
      </ng-container>
    </ng-container>

    <div class="card-section-title">
      <h3>Lieferadresse</h3>
      <a
        *ngIf="(canAdd$ | async) === true"
        class="button-add-address"
        [routerLink]="['/customer', customerId$ | async, 'shipping', 'create', (isB2b$ | async) ? 'b2b' : 'b2c']"
        >Hinzufügen</a
      >
    </div>

    <ui-radio-group
      *ngIf="(customer | address) || customer.shippingAddresses.length"
      class="card-customer-address"
      [(ngModel)]="selectedAddress"
    >
      <div *ngIf="customer | address as defaultShippingAddress" class="address-row">
        <ui-radio-button>{{ defaultShippingAddress }}</ui-radio-button>
        <a
          *ngIf="canEdit$ | async"
          class="button-edit-address"
          [routerLink]="['/customer', customer?.id, 'edit', (isB2b$ | async) ? 'b2b' : 'b2c']"
          >Bearbeiten</a
        >
      </div>
      <div *ngFor="let address of customer.shippingAddresses" class="address-row">
        <ui-radio-button [value]="address?.id">
          {{ address?.data | address }}
        </ui-radio-button>
        <a
          *ngIf="canEdit$ | async"
          class="button-edit-address"
          [routerLink]="['/customer', customer?.id, 'shipping', address?.id, 'edit', (isB2b$ | async) ? 'b2b' : 'b2c']"
          >Bearbeiten</a
        >
      </div>
    </ui-radio-group>
  </div>

  <div class="card-customer-footer">
    <button *ngIf="cartExists$ | async; else cartEmpty" class="cta-to-cart" (click)="continue()">
      Weiter zum Warenkorb
    </button>
    <ng-template #cartEmpty>
      <button class="cta-to-cart" (click)="continue()">
        Weiter zur Artikelsuche
      </button>
    </ng-template>
  </div>
</ng-container>