mirror of
https://dev.azure.com/hugendubel/ISA/_git/ISA-Frontend
synced 2025-12-28 22:42:11 +01:00
Nino Righi
committed by
Lorenz Hilpert
Lorenz Hilpert
parent
bd332b6bd9
commit
60d007d9eb
@@ -77,8 +77,7 @@ button {
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 2px;
|
||||
@apply bg-[#EDEFF0];
|
||||
@apply bg-[#EDEFF0] h-[0.125rem];
|
||||
}
|
||||
|
||||
h1 {
|
||||
|
||||
@@ -1,167 +1,207 @@
|
||||
<div class="card">
|
||||
<div class="check-icon-wrapper">
|
||||
<span class="icon-circle">
|
||||
<ui-icon class="check-icon" icon="check" size="36px"></ui-icon>
|
||||
</span>
|
||||
<div class="flex flex-col bg-white rounded pt-10">
|
||||
<div class="rounded-[50%] bg-[#26830C] w-8 h-8 flex items-center justify-center self-center">
|
||||
<shared-icon class="text-white" icon="done" [size]="24"></shared-icon>
|
||||
</div>
|
||||
|
||||
<h1 class="order-header">Bestellbestätigung</h1>
|
||||
<p class="order-info">
|
||||
Nachfolgend erhalten Sie <br />
|
||||
die Übersicht Ihrer Bestellung.
|
||||
<h1 class="text-center text-h2 my-1 font-bold">Bestellbestätigung</h1>
|
||||
<p class="text-center text-p1 mb-10">
|
||||
Nachfolgend erhalten Sie die Übersicht Ihrer Bestellung.
|
||||
</p>
|
||||
|
||||
<ng-container *ngFor="let displayOrder of displayOrders$ | async; let i = index">
|
||||
<div class="row">
|
||||
<div class="order-customer" *ngIf="i === 0">
|
||||
{{ displayOrder?.buyer | buyerName }}
|
||||
</div>
|
||||
<div class="grow"></div>
|
||||
<button class="cta-print" (click)="openPrintModal(displayOrder.id)">
|
||||
Drucken
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="sub-row small">
|
||||
<span class="label">Belegnummer</span>
|
||||
<a class="order-number" [routerLink]="['/kunde', processId, 'customer', displayOrder.buyerNumber, 'order', displayOrder.id]">{{
|
||||
displayOrder.orderNumber
|
||||
}}</a>
|
||||
</div>
|
||||
<div
|
||||
class="sub-row between"
|
||||
*ngIf="displayOrder?.features?.orderType === 'Abholung' || displayOrder?.features?.orderType === 'Rücklage'"
|
||||
>
|
||||
<span>Zielfiliale</span>
|
||||
<strong class="value">{{ displayOrder.targetBranch?.name }}</strong>
|
||||
</div>
|
||||
<div class="sub-row between" *ngIf="displayOrder?.features?.orderType === 'Download'">
|
||||
<span>E-Mail</span>
|
||||
<strong class="value">{{ displayOrder.buyer?.communicationDetails?.email }}</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="sub-row small">
|
||||
<span class="label">Bestelldatum</span>
|
||||
<strong>{{ displayOrder.orderDate | date }}</strong>
|
||||
</div>
|
||||
<div class="sub-row between start">
|
||||
<ng-container *ngIf="displayOrder?.features?.orderType === 'Abholung' || displayOrder?.features?.orderType === 'Rücklage'">
|
||||
<span>Adresse</span>
|
||||
<strong class="value">{{ displayOrder.targetBranch | branchAddress }}</strong>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="displayOrder?.features?.orderType !== 'Abholung' && displayOrder?.features?.orderType !== 'Rücklage'">
|
||||
<span>Lieferadresse</span>
|
||||
<strong class="value">{{ displayOrder.shippingAddress | shippingAddress }}</strong>
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="top-line" />
|
||||
<ng-container *ngFor="let order of displayOrder.items">
|
||||
<div class="row between">
|
||||
<div class="product-name">
|
||||
<a [routerLink]="getProductSearchDetailsPath(order?.product?.ean)" [queryParams]="{ main_qs: order?.product?.ean }">
|
||||
<img class="thumbnail" [src]="order.product?.ean | productImage: 30:50:true" />
|
||||
</a>
|
||||
<a
|
||||
class="name"
|
||||
[routerLink]="getProductSearchDetailsPath(order?.product?.ean)"
|
||||
[queryParams]="{ main_qs: order?.product?.ean }"
|
||||
>{{ order?.product?.name }}</a
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="product-details">
|
||||
<div class="info-row">
|
||||
<ng-container *ngIf="order?.product?.format && order?.product?.formatDetail">
|
||||
<img class="order-icon" [src]="'/assets/images/Icon_' + order?.product?.format + '.svg'" alt="book-icon" />
|
||||
<span class="format">{{ order.product?.format }}</span>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="order?.product?.contributors">
|
||||
<span class="separator" *ngIf="order?.product?.format && order?.product?.formatDetail">|</span>
|
||||
<span class="contributors">{{ order?.product?.contributors }}</span>
|
||||
</ng-container>
|
||||
</div>
|
||||
<div class="delivery-row" [ngSwitch]="order?.features?.orderType">
|
||||
<ng-container *ngSwitchCase="'Abholung'">
|
||||
<span class="supplier">{{ (order?.subsetItems)[0].supplierLabel }}</span>
|
||||
<span class="separator">|</span>
|
||||
<span class="order-type"
|
||||
>Abholung ab {{ (order?.subsetItems)[0]?.estimatedShippingDate | date }}
|
||||
<ng-container [ngTemplateOutlet]="abholfrist" [ngTemplateOutletContext]="{ order: order }"> </ng-container>
|
||||
</span>
|
||||
</ng-container>
|
||||
<ng-container *ngSwitchCase="'Rücklage'">
|
||||
<ng-container *ngIf="(order?.subsetItems)[0].supplierLabel; let supplierLabel">
|
||||
<span class="supplier">{{ supplierLabel }}</span>
|
||||
<span class="separator">|</span>
|
||||
</ng-container>
|
||||
<span class="order-type"
|
||||
>{{ order?.features?.orderType }}
|
||||
<ng-container [ngTemplateOutlet]="abholfrist" [ngTemplateOutletContext]="{ order: order }"> </ng-container>
|
||||
</span>
|
||||
</ng-container>
|
||||
<ng-container *ngSwitchCase="['Versand', 'B2B-Versand', 'DIG-Versand'].indexOf(order?.features?.orderType) > -1">
|
||||
<span class="supplier">{{ (order?.subsetItems)[0].supplierLabel }}</span>
|
||||
<span class="separator">|</span>
|
||||
<ng-container *ngIf="(order?.subsetItems)[0]?.estimatedDelivery; else estimatedShippingDate">
|
||||
<span class="order-type"
|
||||
>Zustellung zwischen {{ ((order?.subsetItems)[0]?.estimatedDelivery?.start | date: 'EEE, dd.MM.')?.replace('.', '') }} und
|
||||
{{ ((order?.subsetItems)[0]?.estimatedDelivery?.stop | date: 'EEE, dd.MM.')?.replace('.', '') }}</span
|
||||
>
|
||||
</ng-container>
|
||||
<ng-template #estimatedShippingDate>
|
||||
<span class="order-type">Versanddatum {{ (order?.subsetItems)[0]?.estimatedShippingDate | date }}</span>
|
||||
</ng-template>
|
||||
</ng-container>
|
||||
<ng-container *ngSwitchDefault>
|
||||
<ng-container *ngIf="(order?.subsetItems)[0].supplierLabel; let supplierLabel">
|
||||
<span class="supplier">{{ supplierLabel }}</span>
|
||||
<span class="separator">|</span>
|
||||
</ng-container>
|
||||
<span class="order-type">{{ order?.features?.orderType }}</span>
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="product-price">
|
||||
<span class="quantity">{{ order.quantity }}x</span>
|
||||
<span class="price">{{ order.price?.value?.value | currency: ' ' }} {{ order.price?.value?.currency }}</span>
|
||||
<ng-container *ngFor="let displayOrder of displayOrders$ | async; let i = index; let orderLast = last">
|
||||
<ng-container *ngIf="i === 0">
|
||||
<div class="flex flex-row items-center bg-white shadow-card min-h-[3.3125rem]">
|
||||
<div class="text-h3 font-bold px-5 py-[0.875rem]">
|
||||
{{ displayOrder?.buyer | buyerName }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
</ng-container>
|
||||
|
||||
<div class="flex flex-row items-center bg-[#F5F7FA] min-h-[3.3125rem]">
|
||||
<div class="flex flex-row items-center justify-center px-5 py-[0.875rem]">
|
||||
<shared-icon
|
||||
*ngIf="displayOrder?.features?.orderType !== 'Dummy'"
|
||||
class="mr-2"
|
||||
[size]="displayOrder?.features?.orderType === 'B2B-Versand' ? 36 : 24"
|
||||
[icon]="
|
||||
displayOrder?.features?.orderType === 'Abholung'
|
||||
? 'isa-box-out'
|
||||
: displayOrder?.features?.orderType === 'Versand'
|
||||
? 'isa-truck'
|
||||
: displayOrder?.features?.orderType === 'Rücklage'
|
||||
? 'isa-shopping-bag'
|
||||
: displayOrder?.features?.orderType === 'B2B-Versand'
|
||||
? 'isa-b2b-truck'
|
||||
: displayOrder?.features?.orderType === 'Download'
|
||||
? 'isa-download'
|
||||
: 'isa-truck'
|
||||
"
|
||||
></shared-icon>
|
||||
<p class="text-p1 font-bold mr-3">{{ displayOrder?.features?.orderType }}</p>
|
||||
<div
|
||||
*ngIf="displayOrder?.features?.orderType === 'Abholung' || displayOrder?.features?.orderType === 'Rücklage'; else shippingAddress"
|
||||
>
|
||||
{{ displayOrder.targetBranch?.name }}, {{ displayOrder.targetBranch | branchAddress }}
|
||||
</div>
|
||||
<ng-template #shippingAddress>
|
||||
{{ displayOrder.shippingAddress | branchAddress }}
|
||||
</ng-template>
|
||||
<div *ngIf="displayOrder?.features?.orderType === 'Download'">| {{ displayOrder.buyer?.communicationDetails?.email }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<div class="flex flex-col px-5 pt-7 pb-[1.875rem] bg-white">
|
||||
<div class="flex flex-row justify-between items-center mb-[0.375rem]">
|
||||
<div class="flex flex-row">
|
||||
<span class="w-32">Belegnummer</span>
|
||||
<a
|
||||
class="font-bold text-[#0556B4] no-underline"
|
||||
[routerLink]="['/kunde', processId, 'customer', displayOrder.buyerNumber, 'order', displayOrder.id]"
|
||||
>{{ displayOrder.orderNumber }}</a
|
||||
>
|
||||
</div>
|
||||
<button
|
||||
*ifRole="'Store'"
|
||||
type="button"
|
||||
class="cta-print bg-transparent text-brand font-bold text-p1 outline-none border-none pr-0"
|
||||
(click)="openPrintModal(displayOrder.id)"
|
||||
>
|
||||
Drucken
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row justify-between items-center">
|
||||
<div class="flex flex-row">
|
||||
<span class="w-32">Bestelldatum</span>
|
||||
<strong>{{ displayOrder.orderDate | date }}</strong>
|
||||
</div>
|
||||
<button
|
||||
(click)="expanded[i] = !expanded[i]"
|
||||
type="button"
|
||||
class="text-[#0556B4] font-bold flex flex-row items-center justify-center"
|
||||
[class.flex-row-reverse]="!expanded[i]"
|
||||
>
|
||||
<shared-icon
|
||||
class="mr-1"
|
||||
icon="arrow-back"
|
||||
[size]="20"
|
||||
[class.ml-1]="!expanded[i]"
|
||||
[class.rotate-180]="!expanded[i]"
|
||||
></shared-icon>
|
||||
{{ expanded[i] ? 'Weniger' : 'Mehr' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ng-container *ngFor="let order of displayOrder.items; let last = last">
|
||||
<ng-container *ngIf="expanded[i]">
|
||||
<div
|
||||
class="page-checkout-summary__items-tablet px-5 pb-[1.875rem] bg-white"
|
||||
[class.page-checkout-summary__items]="isDesktop$ | async"
|
||||
[class.last]="last"
|
||||
>
|
||||
<div class="page-checkout-summary__items-thumbnail flex flex-row">
|
||||
<a [routerLink]="getProductSearchDetailsPath(order?.product?.ean)" [queryParams]="{ main_qs: order?.product?.ean }">
|
||||
<img class="w-[3.125rem] h-20 mr-2" [src]="order.product?.ean | productImage: 195:315:true" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="page-checkout-summary__items-title whitespace-nowrap overflow-ellipsis overflow-hidden">
|
||||
<a
|
||||
class="font-bold no-underline text-[#0556B4]"
|
||||
[routerLink]="getProductSearchDetailsPath(order?.product?.ean)"
|
||||
[queryParams]="{ main_qs: order?.product?.ean }"
|
||||
>{{ order?.product?.name }}</a
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="page-checkout-summary__items-ssc" *ngIf="(order?.subsetItems)[0]; let subsetItem">
|
||||
<span class="mr-2">{{ subsetItem.supplierName }}</span>
|
||||
<span *ngIf="subsetItem?.ssc && subsetItem?.sscText" class="font-bold border-l border-black pl-2"
|
||||
>{{ subsetItem.ssc }} - {{ subsetItem.sscText }}</span
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="page-checkout-summary__items-quantity font-bold justify-self-end">
|
||||
<span> {{ order.quantity }}x </span>
|
||||
</div>
|
||||
|
||||
<div class="page-checkout-summary__items-price font-bold justify-self-end">
|
||||
<span> {{ order.price?.value?.value | currency: ' ' }} {{ order.price?.value?.currency }} </span>
|
||||
</div>
|
||||
|
||||
<div class="page-checkout-summary__items-delivery product-details">
|
||||
<div class="delivery-row" [ngSwitch]="order?.features?.orderType">
|
||||
<ng-container *ngSwitchCase="'Abholung'">
|
||||
<span class="order-type"
|
||||
>Abholung ab {{ (order?.subsetItems)[0]?.estimatedShippingDate | date }}
|
||||
<ng-container [ngTemplateOutlet]="abholfrist" [ngTemplateOutletContext]="{ order: order }"> </ng-container>
|
||||
</span>
|
||||
</ng-container>
|
||||
<ng-container *ngSwitchCase="'Rücklage'">
|
||||
<span class="order-type"
|
||||
>{{ order?.features?.orderType }}
|
||||
<ng-container [ngTemplateOutlet]="abholfrist" [ngTemplateOutletContext]="{ order: order }"> </ng-container>
|
||||
</span>
|
||||
</ng-container>
|
||||
<ng-container *ngSwitchCase="['Versand', 'B2B-Versand', 'DIG-Versand'].indexOf(order?.features?.orderType) > -1">
|
||||
<ng-container *ngIf="(order?.subsetItems)[0]?.estimatedDelivery; else estimatedShippingDate">
|
||||
<span class="order-type"
|
||||
>Zustellung zwischen
|
||||
{{ ((order?.subsetItems)[0]?.estimatedDelivery?.start | date: 'EEE, dd.MM.')?.replace('.', '') }} und
|
||||
{{ ((order?.subsetItems)[0]?.estimatedDelivery?.stop | date: 'EEE, dd.MM.')?.replace('.', '') }}</span
|
||||
>
|
||||
</ng-container>
|
||||
<ng-template #estimatedShippingDate>
|
||||
<span class="order-type">Versanddatum {{ (order?.subsetItems)[0]?.estimatedShippingDate | date }}</span>
|
||||
</ng-template>
|
||||
</ng-container>
|
||||
<ng-container *ngSwitchDefault>
|
||||
<span class="order-type">{{ order?.features?.orderType }}</span>
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<hr *ngIf="last" />
|
||||
</ng-container>
|
||||
<ng-container *ngIf="orderLast">
|
||||
<div class="flex flex-row justify-between items-center min-h-[3.3125rem] bg-white px-5 py-4 rounded-b">
|
||||
<span *ngIf="totalReadingPoints$ | async; let totalReadingPoints" class="text-p2 font-bold"
|
||||
>{{ totalItemCount$ | async }} Artikel | {{ totalReadingPoints }} Lesepunkte</span
|
||||
>
|
||||
|
||||
<div class="flex flex-row items-center justify-center">
|
||||
<div class="text-p1 font-bold flex flex-row items-center">
|
||||
<div class="mr-1">Gesamtsumme {{ totalPrice$ | async | currency: ' ' }} {{ totalPriceCurrency$ | async }}</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="bg-brand text-white font-bold text-p1 outline-none border-none rounded-full px-6 py-3 ml-2"
|
||||
*ngIf="(takeNowOrders$ | async)?.length === 1 && (isB2BCustomer$ | async)"
|
||||
>
|
||||
<button class="cta-goods-out" (click)="navigateToGoodsOut()">Zur Warenausgabe</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<div class="overview">
|
||||
<span *ngIf="totalReadingPoints$ | async; let totalReadingPoints" class="promotion-points"
|
||||
>{{ totalItemCount$ | async }} Artikel | {{ totalReadingPoints }} Lesepunkte</span
|
||||
>
|
||||
|
||||
<div class="price-wrapper">
|
||||
<div class="total-price">Gesamtsumme {{ totalPrice$ | async | currency: ' ' }} {{ totalPriceCurrency$ | async }}</div>
|
||||
<div class="price-info" *ngIf="containsDeliveryOrder$ | async">ohne Versandkosten</div>
|
||||
</div>
|
||||
|
||||
<div class="actions" *ngIf="(takeNowOrders$ | async)?.length === 1 && (isB2BCustomer$ | async)">
|
||||
<button class="cta-goods-out" (click)="navigateToGoodsOut()">Zur Warenausgabe</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ng-template #abholfrist let-order="order">
|
||||
<div *ngIf="!(updatingPreferredPickUpDate$ | async)[(order?.subsetItems)[0].id]" class="inline-flex">
|
||||
<button [uiOverlayTrigger]="deadlineDatepicker" #deadlineDatepickerTrigger="uiOverlayTrigger" class="cta-pickup-deadline">
|
||||
<span class="mx-2">bis</span>
|
||||
<strong>
|
||||
<button [uiOverlayTrigger]="deadlineDatepicker" #deadlineDatepickerTrigger="uiOverlayTrigger" class="flex flex-row items-center">
|
||||
<span class="mx-[0.625rem] font-normal">bis</span>
|
||||
<strong class="border-r border-[#AEB7C1] pr-4 text-[#AEB7C1]">
|
||||
{{ ((order?.subsetItems)[0]?.preferredPickUpDate | date: 'dd.MM.yy') || 'Auswählen' }}
|
||||
</strong>
|
||||
<ui-icon class="ml-2" [rotate]="deadlineDatepickerTrigger.opened ? '270deg' : '90deg'" icon="arrow_head"> </ui-icon>
|
||||
|
||||
<shared-icon class="text-[#596470] ml-4" [size]="24" icon="isa-calendar"></shared-icon>
|
||||
</button>
|
||||
<ui-datepicker
|
||||
#deadlineDatepicker
|
||||
|
||||
@@ -1,142 +1,66 @@
|
||||
:host {
|
||||
@apply block box-border;
|
||||
@apply box-border bg-transparent rounded overflow-scroll h-split-screen-tablet desktop-small:h-split-screen-desktop flex flex-col justify-between;
|
||||
}
|
||||
|
||||
.fetching {
|
||||
@apply w-28 h-px-20 bg-wild-blue-yonder ml-4;
|
||||
@apply w-28 h-5 bg-wild-blue-yonder ml-4;
|
||||
animation: load 1s linear infinite;
|
||||
}
|
||||
|
||||
.card {
|
||||
@apply bg-white rounded shadow-card overflow-scroll;
|
||||
height: calc(100vh - 410px);
|
||||
hr {
|
||||
@apply bg-[#EDEFF0] h-[0.125rem];
|
||||
}
|
||||
|
||||
.order-header {
|
||||
@apply text-center text-3xl my-2 mb-2 font-bold;
|
||||
.page-checkout-summary__items-tablet {
|
||||
@apply grid grid-flow-row gap-x-3;
|
||||
grid-template-columns: 3.125rem 75% auto;
|
||||
grid-template-rows: 1.6875rem 1.6875rem auto;
|
||||
grid-template-areas:
|
||||
'thumbnail title price'
|
||||
'thumbnail ssc quantity'
|
||||
'thumbnail delivery delivery';
|
||||
}
|
||||
|
||||
.order-info {
|
||||
@apply text-center text-lg my-0 mb-2;
|
||||
.page-checkout-summary__items {
|
||||
@apply grid grid-flow-row gap-x-3;
|
||||
grid-template-columns: 3.125rem 37.5% 42.5% auto;
|
||||
grid-template-rows: 1.6875rem auto;
|
||||
grid-template-areas:
|
||||
'thumbnail title . price'
|
||||
'thumbnail ssc delivery quantity';
|
||||
}
|
||||
|
||||
.order-number {
|
||||
@apply font-bold text-active-customer no-underline;
|
||||
.page-checkout-summary__items-thumbnail {
|
||||
grid-area: thumbnail;
|
||||
}
|
||||
|
||||
.check-icon-wrapper {
|
||||
@apply flex flex-row justify-center;
|
||||
|
||||
.icon-circle {
|
||||
@apply mt-px-40 mb-1;
|
||||
background-color: #26830c;
|
||||
border-radius: 50%;
|
||||
width: 34px;
|
||||
}
|
||||
|
||||
.check-icon {
|
||||
@apply mx-auto text-white;
|
||||
width: 18px;
|
||||
}
|
||||
.page-checkout-summary__items-title {
|
||||
grid-area: title;
|
||||
}
|
||||
|
||||
.row {
|
||||
@apply flex flex-row items-center mx-8 my-4;
|
||||
|
||||
.sub-row {
|
||||
@apply flex flex-row flex-grow items-center;
|
||||
width: 55%;
|
||||
}
|
||||
|
||||
.small {
|
||||
width: 45%;
|
||||
}
|
||||
|
||||
.label {
|
||||
width: 140px;
|
||||
}
|
||||
|
||||
.value {
|
||||
@apply ml-4 text-right;
|
||||
}
|
||||
|
||||
.order-customer {
|
||||
@apply font-bold text-h3;
|
||||
}
|
||||
|
||||
.grow {
|
||||
@apply flex-grow;
|
||||
}
|
||||
|
||||
.cta-print {
|
||||
@apply bg-transparent text-brand font-bold text-xl outline-none border-none pr-0;
|
||||
}
|
||||
|
||||
.cta-print:disabled {
|
||||
@apply text-cool-grey;
|
||||
}
|
||||
.page-checkout-summary__items-price {
|
||||
grid-area: price;
|
||||
}
|
||||
|
||||
.cta-pickup-deadline {
|
||||
@apply flex flex-row items-center;
|
||||
.page-checkout-summary__items-quantity {
|
||||
grid-area: quantity;
|
||||
}
|
||||
|
||||
.abholfrist-wrapper {
|
||||
@apply flex flex-row my-1;
|
||||
|
||||
.label {
|
||||
width: 145px;
|
||||
}
|
||||
|
||||
.value {
|
||||
@apply flex flex-row font-bold;
|
||||
|
||||
ui-icon {
|
||||
@apply flex items-center;
|
||||
}
|
||||
}
|
||||
|
||||
.loader {
|
||||
width: 130px;
|
||||
}
|
||||
.page-checkout-summary__items-delivery {
|
||||
grid-area: delivery;
|
||||
}
|
||||
|
||||
.top-line {
|
||||
@apply mt-8;
|
||||
}
|
||||
|
||||
.order-details {
|
||||
@apply mt-4;
|
||||
}
|
||||
|
||||
.product-name {
|
||||
@apply flex flex-row;
|
||||
|
||||
.thumbnail {
|
||||
@apply mr-2;
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
.name {
|
||||
@apply font-bold whitespace-nowrap overflow-ellipsis overflow-hidden mx-2 text-active-customer no-underline;
|
||||
width: 170px;
|
||||
}
|
||||
.page-checkout-summary__items-ssc {
|
||||
grid-area: ssc;
|
||||
}
|
||||
|
||||
.product-details {
|
||||
@apply flex flex-col whitespace-nowrap overflow-ellipsis overflow-hidden;
|
||||
width: 390px;
|
||||
|
||||
.info-row {
|
||||
@apply flex items-center whitespace-nowrap overflow-ellipsis overflow-hidden;
|
||||
}
|
||||
|
||||
.order-icon {
|
||||
@apply w-px-15 text-ucla-blue;
|
||||
height: 18px;
|
||||
width: 35px;
|
||||
}
|
||||
|
||||
.format {
|
||||
@apply w-px-40;
|
||||
}
|
||||
@@ -168,47 +92,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
@apply flex flex-col justify-center items-center h-px-100 bg-white;
|
||||
box-shadow: 0px -2px 24px 0px #dce2e9;
|
||||
|
||||
.overview {
|
||||
@apply flex flex-row items-center justify-end;
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
.promotion-points {
|
||||
@apply text-ucla-blue text-p2 font-bold flex-grow;
|
||||
}
|
||||
|
||||
.total-price {
|
||||
@apply font-bold text-p1;
|
||||
}
|
||||
|
||||
.price-info {
|
||||
@apply text-right text-p3;
|
||||
}
|
||||
|
||||
.actions {
|
||||
.cta-goods-out {
|
||||
@apply bg-brand text-white font-bold text-lg outline-none border-none rounded-full px-6 py-3 ml-2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 2px;
|
||||
@apply bg-disabled-customer;
|
||||
}
|
||||
|
||||
.between {
|
||||
@apply justify-between;
|
||||
}
|
||||
|
||||
.start {
|
||||
@apply items-start;
|
||||
}
|
||||
|
||||
.separator {
|
||||
@apply mx-1;
|
||||
.last {
|
||||
@apply pb-5;
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { ChangeDetectionStrategy, Component, OnDestroy } from '@angular/core';
|
||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
|
||||
import { DomainCheckoutService } from '@domain/checkout';
|
||||
import { UiErrorModalComponent, UiModalService } from '@ui/modal';
|
||||
import { PrintModalComponent, PrintModalData } from '@modal/printer';
|
||||
@@ -11,9 +11,10 @@ import { DisplayOrderDTO, DisplayOrderItemDTO, DisplayOrderItemSubsetDTO } from
|
||||
import { BreadcrumbService } from '@core/breadcrumb';
|
||||
import { ApplicationService } from '@core/application';
|
||||
import { DomainPrinterService } from '@domain/printer';
|
||||
import { BehaviorSubject, combineLatest, NEVER, of, Subject } from 'rxjs';
|
||||
import { BehaviorSubject, combineLatest, NEVER, Subject } from 'rxjs';
|
||||
import { DateAdapter } from '@ui/common';
|
||||
import { CheckoutNavigationService, ProductCatalogNavigationService } from '@shared/services';
|
||||
import { EnvironmentService } from '@core/environment';
|
||||
|
||||
@Component({
|
||||
selector: 'page-checkout-summary',
|
||||
@@ -21,7 +22,7 @@ import { CheckoutNavigationService, ProductCatalogNavigationService } from '@sha
|
||||
styleUrls: ['checkout-summary.component.scss'],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
})
|
||||
export class CheckoutSummaryComponent implements OnDestroy {
|
||||
export class CheckoutSummaryComponent implements OnInit, OnDestroy {
|
||||
private _onDestroy$ = new Subject();
|
||||
processId = Date.now();
|
||||
selectedDate = this.dateAdapter.today();
|
||||
@@ -112,6 +113,12 @@ export class CheckoutSummaryComponent implements OnDestroy {
|
||||
map((displayOrders) => displayOrders.filter((o) => o.items.find((oi) => oi.features?.orderType === 'Rücklage') != null))
|
||||
);
|
||||
|
||||
get isDesktop$() {
|
||||
return this._environmentService.matchDesktopLarge$;
|
||||
}
|
||||
|
||||
expanded: boolean[] = [];
|
||||
|
||||
constructor(
|
||||
private domainCheckoutService: DomainCheckoutService,
|
||||
private customerService: CrmCustomerService,
|
||||
@@ -125,7 +132,9 @@ export class CheckoutSummaryComponent implements OnDestroy {
|
||||
private domainPrinterService: DomainPrinterService,
|
||||
private dateAdapter: DateAdapter,
|
||||
private _navigation: CheckoutNavigationService,
|
||||
private _productNavigationService: ProductCatalogNavigationService
|
||||
private _productNavigationService: ProductCatalogNavigationService,
|
||||
private _environmentService: EnvironmentService,
|
||||
private _cdr: ChangeDetectorRef
|
||||
) {
|
||||
this.breadcrumb
|
||||
.getBreadcrumbsByKeyAndTags$(this.applicationService.activatedProcessId, ['checkout'])
|
||||
@@ -147,6 +156,16 @@ export class CheckoutSummaryComponent implements OnDestroy {
|
||||
});
|
||||
}
|
||||
|
||||
async ngOnInit() {
|
||||
const displayOrders = await this.displayOrders$.pipe(first()).toPromise();
|
||||
if (displayOrders?.length === 1) {
|
||||
this.expanded = [true];
|
||||
} else {
|
||||
this.expanded = [];
|
||||
}
|
||||
this._cdr.markForCheck();
|
||||
}
|
||||
|
||||
async ngOnDestroy() {
|
||||
const checkoutProcess = await this.applicationService
|
||||
.getLastActivatedProcessWithSectionAndType$('customer', 'cart-checkout')
|
||||
|
||||
@@ -2,7 +2,6 @@ import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
import { CheckoutSummaryComponent } from './checkout-summary.component';
|
||||
import { UiIconModule } from '@ui/icon';
|
||||
import { PageCheckoutPipeModule } from '../pipes/page-checkout-pipe.module';
|
||||
import { ProductImageModule } from 'apps/cdn/product-image/src/public-api';
|
||||
import { ModalPrinterModule } from '@modal/printer';
|
||||
@@ -10,18 +9,21 @@ import { RouterModule } from '@angular/router';
|
||||
import { UiCommonModule } from '@ui/common';
|
||||
import { UiSpinnerModule } from '@ui/spinner';
|
||||
import { UiDatepickerModule } from '@ui/datepicker';
|
||||
import { IconModule } from '@shared/components/icon';
|
||||
import { AuthModule } from '@core/auth';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
RouterModule,
|
||||
UiIconModule,
|
||||
PageCheckoutPipeModule,
|
||||
ProductImageModule,
|
||||
ModalPrinterModule,
|
||||
IconModule,
|
||||
UiCommonModule,
|
||||
UiSpinnerModule,
|
||||
UiDatepickerModule,
|
||||
AuthModule,
|
||||
],
|
||||
exports: [CheckoutSummaryComponent],
|
||||
declarations: [CheckoutSummaryComponent],
|
||||
|
||||
Reference in New Issue
Block a user