mirror of
https://dev.azure.com/hugendubel/ISA/_git/ISA-Frontend
synced 2025-12-31 09:37:15 +01:00
[HIMA-44] FE: logic for checkout dialogs updated
The flow in dialogs is working as expected. What is done: - Updated design of dropdowns - Updated functionality of checkout dialogs to work as requested What still needs to be done: - Number of selected items in the shopping cart info in the tab navigation has to get increased - The button “Weiter einkaufen” will store the selected item in the local storage (?) - The button “Bezahlen” is redirecting the user to “Kundensuche”
This commit is contained in:
Milos Jovanov
@@ -27,7 +27,6 @@ import { ProductDetailsComponent } from './components/product-details/product-de
|
||||
import { FeedServiceModule, FeedService, FeedMockService } from 'feed-service';
|
||||
import { CheckoutComponent } from './components/checkout/checkout.component';
|
||||
import { ModalComponent } from './shared/components/modal/modal.component';
|
||||
import { ShoppingCartFeedbackComponent } from './components/shopping-cart-feedback/shopping-cart-feedback.component';
|
||||
|
||||
const rootReducer = {
|
||||
processes: processReducer,
|
||||
@@ -56,7 +55,6 @@ export function _basicAuthorizationInterceptorFactory(conf: ConfigService) {
|
||||
ProductDetailsComponent,
|
||||
CheckoutComponent,
|
||||
ModalComponent,
|
||||
ShoppingCartFeedbackComponent,
|
||||
],
|
||||
imports: [
|
||||
BrowserModule,
|
||||
|
||||
@@ -1,38 +1,97 @@
|
||||
<app-modal id="checkout-modal">
|
||||
<div class="modal">
|
||||
<div class="modal__header">
|
||||
|
||||
<div class="modal-step-1" *ngIf="stepOne">
|
||||
<div class="header">
|
||||
<h1>Wie möchten Sie den Artikel erhalten?</h1>
|
||||
<img (click)="closeModal()" class="close-icon" src="../../../assets/images/close.svg" alt="close">
|
||||
</div>
|
||||
<div class="modal__body">
|
||||
<div class="modal__body__option">
|
||||
<img class="modal__body__option__img" src="../../../assets/images/Take_now.svg" alt="take now">
|
||||
<h2 class="modal__body__option__title__take_now">Jetzt mitnehmen</h2>
|
||||
<span class="modal__body__option__description modal__body__option__description__take_now">Möchten Sie den Artikel jetzt gleich mit nach Hause nehmen?</span>
|
||||
<span class="modal__body__option__price modal__body__option__price__take_now">16,95 EUR</span>
|
||||
<a class="modal__body__option__btn modal__body__option__btn__active" (click)="selectedAction('mitnehmen')">Auswählen</a>
|
||||
<div class="body">
|
||||
<div class="option">
|
||||
<img class="img" src="../../../assets/images/Take_now.svg" alt="take now">
|
||||
<h2 class="title-take-now">Jetzt mitnehmen</h2>
|
||||
<span class="description description-take-now">Möchten Sie den Artikel jetzt gleich mit nach Hause nehmen?</span>
|
||||
<span class="price price-take-now">16,95 EUR</span>
|
||||
<a class="btn btn-active" (click)="selectedAction('mitnehmen')">Auswählen</a>
|
||||
</div>
|
||||
<div class="modal__body__option">
|
||||
<img class="modal__body__option__img" src="../../../assets/images/Package_Icon.svg" alt="package">
|
||||
<div class="option">
|
||||
<img class="img" src="../../../assets/images/Package_Icon.svg" alt="package">
|
||||
<h2>Abholung</h2>
|
||||
<span class="modal__body__option__description modal__body__option__description__take_away">Möchten Sie den Artikel in einer unserer Fillialen abholen?</span>
|
||||
<div class="modal__body__option__location modal__body__option__location__take_away" (click)="openDropdown(dropdown)">{{ currentLocation.name }} <img class="" src="../../../assets/images/Arrow_Down_2.svg" alt="arrow"></div>
|
||||
<span class="modal__body__option__location__date modal__body__option__location__date__take_away">Lieferdatum {{ currentPickUpDate }}</span>
|
||||
<div class="modal__body__option__location__dropdown" #dropdown>
|
||||
<span *ngFor="let item of locations; let i = index" (click)="selectLocation(i, dropdown)">{{ item.name }}</span>
|
||||
<span class="description description-take-away">Möchten Sie den Artikel in einer unserer Fillialen abholen?</span>
|
||||
|
||||
<div class="dropdown-select-text" (click)="openDropdown(dropdown)" #selectedText [class.dropdown-select-text-active]="displayDropdown">
|
||||
<span class="location location-take-away">{{ currentLocation.name }}</span>
|
||||
<img class="dropdown-icon" src="../../../assets/images/Arrow_Down_2.svg" alt="arrow" *ngIf="!displayDropdown">
|
||||
<img class="dropdown-icon" src="../../../assets/images/Arrow_Up.svg" alt="arrow" *ngIf="displayDropdown">
|
||||
</div>
|
||||
<span class="modal__body__option__price modal__body__option__price__take_away">16,95 EUR</span>
|
||||
<a class="modal__body__option__btn" (click)="selectedAction('abholung')">Auswählen</a>
|
||||
|
||||
<span class="location location-date-take-away">Lieferdatum {{ currentPickUpDate }}</span>
|
||||
<div class="location location-dropdown" #dropdown>
|
||||
<ul>
|
||||
<li *ngFor="let item of locations; let i = index" (click)="selectLocation(i, dropdown)">{{ item.name }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<span class="price price-take-away">16,95 EUR</span>
|
||||
<a class="btn" (click)="selectedAction('abholung')">Auswählen</a>
|
||||
</div>
|
||||
<div class="modal__body__option">
|
||||
<img class="modal__body__option__img" src="../../../assets/images/truck_Icon.svg" alt="truck">
|
||||
<div class="option">
|
||||
<img class="img" src="../../../assets/images/truck_Icon.svg" alt="truck">
|
||||
<h2>Versand</h2>
|
||||
<span class="modal__body__option__description modal__body__option__description__delivery">Möchten Sie den Artikel nach Hause geliefert bekommen?</span>
|
||||
<div class="modal__body__option__delivery" (click)="openDropdown(dropdown)"><img class="modal__body__option__img__check" src="../../../assets/images/Check-green.svg" alt="arrow">Versandkostenfrei</div>
|
||||
<span class="modal__body__option__delivery__date">Lieferdatum {{ currentPickUpDate }}</span>
|
||||
<span class="modal__body__option__price modal__body__option__price__order">16,95 EUR</span>
|
||||
<a class="modal__body__option__btn" (click)="selectedAction('versand')">Auswählen</a>
|
||||
<span class="description description-delivery">Möchten Sie den Artikel nach Hause geliefert bekommen?</span>
|
||||
<div class="delivery" (click)="openDropdown(dropdown)"><img class="check" src="../../../assets/images/Check-green.svg" alt="arrow">Versandkostenfrei</div>
|
||||
<span class="delivery-date">Lieferdatum {{ currentPickUpDate }}</span>
|
||||
<span class="price price-order">16,95 EUR</span>
|
||||
<a class="btn" (click)="selectedAction('versand')">Auswählen</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-step-2" *ngIf="!stepOne">
|
||||
<div class="header">
|
||||
<h1>Artikel wurde dem Warenkorb hinzugefügt</h1>
|
||||
<img (click)="closeModal()" class="close-icon" src="../../../assets/images/close.svg" alt="close">
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="body-heading">
|
||||
<img (click)="closeModal()" class="close-icon" src="../../../assets/images/{{ stepTwoImgType }}" alt="truck">
|
||||
<h1>Versand</h1>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<div class="body-content">
|
||||
<img src="../../../assets/images/Book-2x.png" alt="book">
|
||||
<span class="book-title">Silberfischchtsy</span>
|
||||
<div class="order-details">
|
||||
<span><img class="order-book-icon" src="../../../assets/images/Book_Icon.svg" alt="book-icon"> TB I Inger-Maria Mahlke</span>
|
||||
<span class="order-details-delivery-info">DHL I Lieferung 18.01.</span>
|
||||
</div>
|
||||
<span class="price">{{ currentPrice }} EUR</span>
|
||||
<div class="dropdown_container">
|
||||
<div (click)="openDropdown(dropdown)" class="dropdown-selected-text" [class.dropdown-selected-text-active]="displayDropdown">
|
||||
<span class="">{{ currentNumberOfItems }}</span>
|
||||
<img class="dropdown-icon" src="../../../assets/images/Arrow_Down_2.svg" alt="arrow" *ngIf="!displayDropdown">
|
||||
<img class="dropdown-icon" src="../../../assets/images/Arrow_Up.svg" alt="arrow" *ngIf="displayDropdown">
|
||||
</div>
|
||||
<div class="dropdown-options" #dropdown>
|
||||
<ul>
|
||||
<li *ngFor="let item of possibleItems" (click)="setNumberOfItems(item, dropdown)">{{ item }}</li>
|
||||
</ul>
|
||||
<!-- <span *ngFor="let item of possibleItems" (click)="setNumberOfItems(item, dropdown)">{{ item }}</span> -->
|
||||
</div>
|
||||
</div>
|
||||
<a class="btn" (click)="switchSteps(true)">Ändern</a>
|
||||
</div>
|
||||
<div class="line bottom-line"></div>
|
||||
<div class="overview">
|
||||
<span class="items">{{ displayItemsNumber }} Artikel I {{ currentPoints }} Lesepunkte</span>
|
||||
<div class="overview-price-container">
|
||||
<span class="overview-price">Zwischensumme {{ currentPrice }} EUR</span>
|
||||
<span class="overview-tax">ohne Versandkosten</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a class="btn secondary" (click)="updateCart()">Weiter einkaufen</a>
|
||||
<a class="btn active" (click)="itemsConfirmed()">Bezahlen</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</app-modal>
|
||||
|
||||
@@ -1,24 +1,19 @@
|
||||
.modal {
|
||||
// COMMON STYLES
|
||||
.modal-step-1,
|
||||
.modal-step-2 {
|
||||
font-family: 'Open Sans';
|
||||
line-height: 21px;
|
||||
margin: 16px 0;
|
||||
height: 479px;
|
||||
width: 728px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
font-family: 'Open Sans';
|
||||
line-height: 21px;
|
||||
|
||||
&__header {
|
||||
padding-top: 20px;
|
||||
|
||||
h1 {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: #000000;
|
||||
}
|
||||
h1 {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.header {
|
||||
.close-icon {
|
||||
position: absolute;
|
||||
top: 25px;
|
||||
@@ -30,8 +25,19 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__body {
|
||||
// FIRST STEP DESIGN
|
||||
.modal-step-1 {
|
||||
height: 479px;
|
||||
width: 728px;
|
||||
justify-content: center;
|
||||
|
||||
.header {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@@ -39,29 +45,29 @@
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
|
||||
&__option {
|
||||
.option {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
|
||||
&__description {
|
||||
.description {
|
||||
font-size: 16px;
|
||||
max-width: 193px;
|
||||
margin-bottom: 25px;
|
||||
|
||||
&__take_away {
|
||||
&-take-away {
|
||||
position: relative;
|
||||
top: 12px;
|
||||
}
|
||||
|
||||
&__take_now {
|
||||
&-take-now {
|
||||
position: relative;
|
||||
top: 15px;
|
||||
}
|
||||
|
||||
&__delivery {
|
||||
&-delivery {
|
||||
position: relative;
|
||||
top: 9px;
|
||||
}
|
||||
@@ -74,44 +80,49 @@
|
||||
top: 156px;
|
||||
}
|
||||
|
||||
&__title__take_now {
|
||||
.title-take-now {
|
||||
width: 153px;
|
||||
}
|
||||
|
||||
&__img {
|
||||
.img {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 112px;
|
||||
|
||||
&__check {
|
||||
height: 12px;
|
||||
width: 16px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
&__price {
|
||||
.dropdown-icon {
|
||||
height: 9px;
|
||||
width: 17px;
|
||||
}
|
||||
|
||||
.check {
|
||||
height: 12px;
|
||||
width: 16px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
.price {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
// margin-bottom: 20px;
|
||||
|
||||
&__take_away {
|
||||
&-take-away {
|
||||
position: relative;
|
||||
top: 32px;
|
||||
}
|
||||
|
||||
&__take_now {
|
||||
&-take-now {
|
||||
position: relative;
|
||||
top: 57px;
|
||||
}
|
||||
|
||||
&__order {
|
||||
&-order {
|
||||
position: relative;
|
||||
top: 33px;
|
||||
}
|
||||
}
|
||||
|
||||
&__btn {
|
||||
.btn {
|
||||
font-family: 'Open Sans';
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
@@ -123,7 +134,7 @@
|
||||
bottom: 25px;
|
||||
|
||||
|
||||
&__active, &:hover {
|
||||
&-active, &:hover {
|
||||
background-color: #f70400;
|
||||
border: none;
|
||||
border-radius: 25px;
|
||||
@@ -131,7 +142,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
&__delivery {
|
||||
.delivery {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
@@ -143,73 +154,357 @@
|
||||
position: relative;
|
||||
top: 7px;
|
||||
|
||||
&__date {
|
||||
&-date {
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
width: 165px;
|
||||
|
||||
position: relative;
|
||||
top: 4px;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&__location {
|
||||
.location {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 165px;
|
||||
width: 135px;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
|
||||
&__take_away{
|
||||
position: relative;
|
||||
top: 8px;
|
||||
&-take-away {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&__date {
|
||||
&-date-take-away {
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
cursor: default;
|
||||
width: 165px;
|
||||
text-align: left;
|
||||
padding-top: 3px;
|
||||
|
||||
&__take_away{
|
||||
position: relative;
|
||||
top: 5px;
|
||||
}
|
||||
|
||||
&__order{
|
||||
position: relative;
|
||||
top: 5px;
|
||||
}
|
||||
|
||||
|
||||
position: relative;
|
||||
top: 5px;
|
||||
left: 7px;
|
||||
}
|
||||
|
||||
&__dropdown {
|
||||
&-dropdown {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 165px;
|
||||
position: fixed;
|
||||
top: 330px;
|
||||
top: 344px;
|
||||
left: 224px;
|
||||
z-index: 10;
|
||||
display: none;
|
||||
cursor: pointer;
|
||||
width: 225px;
|
||||
background-color: #ffffff;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0px -2px 24px 0px #dce2e9;
|
||||
overflow: hidden;
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
width: 100%;
|
||||
padding: 15px 10px;
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
// padding: 5px 0 5px 20px;
|
||||
padding: 7px 10px;
|
||||
font-weight: 300;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: block;
|
||||
|
||||
&:hover {
|
||||
background-color: #E9EDF9;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
padding: 5px 0;
|
||||
background-color: #E9EDF9;
|
||||
padding: 5px 0 5px 20px;
|
||||
font-weight: 300;
|
||||
width: 100%;
|
||||
|
||||
&:hover {
|
||||
background-color: #acbcce;
|
||||
background-color: #E9EDF9;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-select-text {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
top: 9px;
|
||||
padding: 5px;
|
||||
|
||||
&-active {
|
||||
background-color: #E9EDF9;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// SECOND STEP DESIGN
|
||||
|
||||
.modal-step-2 {
|
||||
height: 394px;
|
||||
width: 728px;
|
||||
justify-content: flex-start;
|
||||
|
||||
.header {
|
||||
h1 {
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
margin-top: 15px;
|
||||
|
||||
.body-heading {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
margin-bottom: 8px;
|
||||
|
||||
img {
|
||||
height: 16px;
|
||||
width: 26px;
|
||||
margin-right: 13px;
|
||||
margin-top: 3px;
|
||||
margin-left: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.line {
|
||||
height: 3px;
|
||||
width: 100%;
|
||||
background-image: url('../../../assets/images/Line.svg');
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
|
||||
.body-content {
|
||||
margin-top: 15px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
width: 97%;
|
||||
text-align: left;
|
||||
|
||||
img {
|
||||
height: 39px;
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
.book-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
width: 112px;
|
||||
}
|
||||
|
||||
.order-details {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
height: 50px;
|
||||
width: 215px;
|
||||
position: relative;
|
||||
top: 13px;
|
||||
|
||||
.order-book-icon {
|
||||
height: 18px;
|
||||
width: 13px;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 16px;
|
||||
text-align: left;
|
||||
line-height: 25px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&-delivery-info {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.price {
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
line-height: 25px;
|
||||
}
|
||||
|
||||
.dropdown_container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 35px;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
img {
|
||||
height: 9px;
|
||||
width: 17px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.dropdown-selected-text {
|
||||
padding: 5px;
|
||||
|
||||
&-active {
|
||||
background-color: #E9EDF9;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-options {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: fixed;
|
||||
top: 220px;
|
||||
z-index: 10;
|
||||
display: none;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
right: 115px;
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 15px 10px;
|
||||
margin: 0;
|
||||
background-color: #ffffff;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0px -2px 24px 0px #dce2e9;
|
||||
padding: 15px 0;
|
||||
width: 60px;
|
||||
|
||||
li {
|
||||
padding: 7px 10px;
|
||||
font-weight: 300;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: block;
|
||||
|
||||
&:hover {
|
||||
background-color: #E9EDF9;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #f70400;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-line {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.overview {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
justify-items: center;
|
||||
width: 93%;
|
||||
margin-top: 30px;
|
||||
|
||||
.items {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: rgba(167, 185, 203, 1);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.overview-price-container {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
justify-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
.overview-price {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.overview-tax {
|
||||
font-size: 14px;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
width: 93%;
|
||||
margin-top: 30px;
|
||||
|
||||
.btn {
|
||||
font-family: 'Open Sans';
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #f70400;
|
||||
cursor: pointer;
|
||||
padding: 14px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.secondary {
|
||||
width: 160px;
|
||||
|
||||
&:hover {
|
||||
background-color: #f70400;
|
||||
border: none;
|
||||
border-radius: 25px;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
background-color: #f70400;
|
||||
border: none;
|
||||
border-radius: 25px;
|
||||
color: #ffffff;
|
||||
margin-left: 30px;
|
||||
width: 121px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,12 @@
|
||||
import { Component, OnInit, Output, EventEmitter } from '@angular/core';
|
||||
import { ModalService } from '../../core/services/modal.service';
|
||||
import { Store } from '@ngrx/store';
|
||||
import { AppState } from '../../../app/app.state';
|
||||
import { Router } from '@angular/router';
|
||||
import { ChangeCurrentRoute } from '../../../app/core/actions/process.actions';
|
||||
|
||||
const points = 60;
|
||||
const price = 16.95;
|
||||
|
||||
@Component({
|
||||
selector: 'app-checkout',
|
||||
@@ -8,8 +15,10 @@ import { ModalService } from '../../core/services/modal.service';
|
||||
})
|
||||
export class CheckoutComponent implements OnInit {
|
||||
id = 'checkout-modal';
|
||||
stepOne = true;
|
||||
stepTwoImgType = '';
|
||||
|
||||
// Mocked data
|
||||
// Step one mock data
|
||||
locations = [
|
||||
{ name: 'Filliale Stachus', date:'18.02.2019'},
|
||||
{ name: 'Filliale Berlin', date:'20.02.2019'},
|
||||
@@ -17,18 +26,76 @@ export class CheckoutComponent implements OnInit {
|
||||
];
|
||||
currentLocation = this.locations[0];
|
||||
currentPickUpDate = this.locations[0].date;
|
||||
|
||||
|
||||
// Step two mock data
|
||||
currentNumberOfItems = 1;
|
||||
possibleItems = [1, 2, 3, 4];
|
||||
displayItemsNumber = 1;
|
||||
currentPrice = price.toLocaleString().replace('.', ',');
|
||||
currentPoints = points;
|
||||
|
||||
// Toggle for dropdown
|
||||
displayDropdown = false;
|
||||
|
||||
// Trigger other functionality if needed
|
||||
@Output() closed: EventEmitter<boolean> = new EventEmitter();
|
||||
|
||||
constructor(private modalService: ModalService) { }
|
||||
constructor(
|
||||
private modalService: ModalService,
|
||||
private store: Store<AppState>,
|
||||
private router: Router
|
||||
) { }
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
// STEP ONE
|
||||
selectLocation (locationIndx: number, dropdown: any) {
|
||||
this.currentLocation = this.locations[locationIndx];
|
||||
this.currentPickUpDate = this.currentLocation.date;
|
||||
this.toggleDropdown(dropdown);
|
||||
}
|
||||
|
||||
selectedAction(action: string) {
|
||||
if (action === 'mitnehmen') {
|
||||
this.stepTwoImgType = 'Take_now.svg';
|
||||
} else if (action === 'abholung') {
|
||||
this.stepTwoImgType = 'Package_Icon.svg';
|
||||
} else {
|
||||
this.stepTwoImgType = 'truck_Icon.svg';
|
||||
}
|
||||
this.switchSteps();
|
||||
|
||||
// Logic later
|
||||
}
|
||||
|
||||
// STEP TWO
|
||||
setNumberOfItems (numberOfItems: number, element: any) {
|
||||
this.currentNumberOfItems = numberOfItems;
|
||||
this.displayItemsNumber = numberOfItems;
|
||||
this.currentPoints = numberOfItems * points;
|
||||
this.currentPrice = (Math.round((numberOfItems * price) * 100) / 100).toLocaleString().replace('.', ',');
|
||||
this.toggleDropdown(element);
|
||||
}
|
||||
|
||||
updateCart() {
|
||||
// Save item to store
|
||||
|
||||
this.store.dispatch(new ChangeCurrentRoute('article-search'));
|
||||
this.router.navigate(['article-search']);
|
||||
this.closeModal();
|
||||
}
|
||||
|
||||
itemsConfirmed () {
|
||||
// Redirect to 'Kundensuche'
|
||||
this.closeModal();
|
||||
}
|
||||
|
||||
// COMMON
|
||||
openDropdown(element: any,) {
|
||||
this.toggleDropdown(element);
|
||||
}
|
||||
|
||||
openDialog() {
|
||||
this.modalService.open(this.id);
|
||||
}
|
||||
@@ -36,21 +103,16 @@ export class CheckoutComponent implements OnInit {
|
||||
closeModal(dialogSubmited: boolean = false) {
|
||||
this.closed.emit(dialogSubmited);
|
||||
this.modalService.close(this.id);
|
||||
this.defaultValues();
|
||||
}
|
||||
|
||||
selectedAction(action: string) {
|
||||
// Logic later
|
||||
this.closeModal(true);
|
||||
}
|
||||
|
||||
selectLocation (locationIndx: number, element: any) {
|
||||
this.currentLocation = this.locations[locationIndx];
|
||||
this.currentPickUpDate = this.currentLocation.date;
|
||||
this.toggleDropdown(element);
|
||||
}
|
||||
|
||||
openDropdown(element: any) {
|
||||
this.toggleDropdown(element);
|
||||
|
||||
switchSteps(reset:boolean = false) {
|
||||
if (reset) {
|
||||
this.defaultValues();
|
||||
}
|
||||
|
||||
this.displayDropdown = false;
|
||||
this.stepOne = !this.stepOne;
|
||||
}
|
||||
|
||||
private toggleDropdown(element: any) {
|
||||
@@ -58,4 +120,11 @@ export class CheckoutComponent implements OnInit {
|
||||
this.displayDropdown = !this.displayDropdown;
|
||||
}
|
||||
|
||||
private defaultValues() {
|
||||
this.currentNumberOfItems = 1;
|
||||
this.displayItemsNumber = 1;
|
||||
this.currentPoints = points;
|
||||
this.currentPrice = price.toLocaleString().replace('.', ',');
|
||||
this.stepOne = true;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,5 +3,5 @@
|
||||
</p>
|
||||
<button class="btn" (click)="openModal()">Open checkout</button>
|
||||
|
||||
<app-checkout #checkout (closed)="openFeedbackModal($event)"></app-checkout>
|
||||
<app-shopping-cart-feedback #feedback></app-shopping-cart-feedback>
|
||||
<app-checkout #checkout (closed)="cartActionCompleted($event)"></app-checkout>
|
||||
<!-- <app-shopping-cart-feedback #feedback></app-shopping-cart-feedback> -->
|
||||
|
||||
@@ -2,7 +2,6 @@ import { Component, OnInit, ViewChild } from '@angular/core';
|
||||
import { Store } from '@ngrx/store';
|
||||
import { AppState } from 'src/app/app.state';
|
||||
import { CheckoutComponent } from '../checkout/checkout.component';
|
||||
import { ShoppingCartFeedbackComponent } from '../shopping-cart-feedback/shopping-cart-feedback.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-product-details',
|
||||
@@ -11,7 +10,6 @@ import { ShoppingCartFeedbackComponent } from '../shopping-cart-feedback/shoppin
|
||||
})
|
||||
export class ProductDetailsComponent implements OnInit {
|
||||
@ViewChild('checkout') checkoutDialog: CheckoutComponent;
|
||||
@ViewChild('feedback') feedbackDialog: ShoppingCartFeedbackComponent;
|
||||
|
||||
id: number;
|
||||
|
||||
@@ -28,13 +26,7 @@ export class ProductDetailsComponent implements OnInit {
|
||||
this.checkoutDialog.openDialog();
|
||||
}
|
||||
|
||||
openCheckoutModal() {
|
||||
this.checkoutDialog.openDialog();
|
||||
}
|
||||
|
||||
openFeedbackModal(open: boolean) {
|
||||
if (open) {
|
||||
this.feedbackDialog.openDialog();
|
||||
}
|
||||
cartActionCompleted(open: boolean) {
|
||||
// Logic if needed
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,46 +0,0 @@
|
||||
<app-modal id="feedback-modal">
|
||||
<div class="modal">
|
||||
<div class="header">
|
||||
<h1>Artikel wurde dem Warenkorb hinzugefügt</h1>
|
||||
<img (click)="closeModal()" class="close-icon" src="../../../assets/images/close.svg" alt="close">
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="body-heading">
|
||||
<img (click)="closeModal()" class="close-icon" src="../../../assets/images/truck_Icon.svg" alt="truck">
|
||||
<h1>Versand</h1>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<div class="body-content">
|
||||
<img src="../../../assets/images/Book-2x.png" alt="book">
|
||||
<span class="book-title">Silberfischchtsy</span>
|
||||
<div class="order-details">
|
||||
<span><img class="order-book-icon" src="../../../assets/images/Book_Icon.svg" alt="book-icon"> TB I Inger-Maria Mahlke</span>
|
||||
<span class="bold">DHL I Lieferung 18.01.</span>
|
||||
</div>
|
||||
<span class="price">{{ currentPrice }} EUR</span>
|
||||
<div class="dropdown_container">
|
||||
<div (click)="openDropdown(dropdown)">
|
||||
<span class="">{{ currentNumberOfItems }}</span>
|
||||
<img class="dropdown-arrow" src="../../../assets/images/Arrow_Down_2.svg" alt="arrow">
|
||||
</div>
|
||||
<div class="dropdown-options" #dropdown>
|
||||
<span *ngFor="let item of possibleItems" (click)="setNumberOfItems(item, dropdown)">{{ item }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<a class="btn" (click)="setDisplayNumber()">Ändern</a>
|
||||
</div>
|
||||
<div class="line bottom-line"></div>
|
||||
<div class="overview">
|
||||
<span class="items">{{ displayItemsNumber }} Artikel I {{ currentPoints }} Lesepunkte</span>
|
||||
<div class="overview-price-container">
|
||||
<span class="overview-price">Zwischensumme {{ currentPrice }} EUR</span>
|
||||
<span class="overview-tax">ohne Versandkosten</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a class="btn secondary" (click)="closeModal()">Weiter einkaufen</a>
|
||||
<a class="btn active" (click)="itemsConfirmed()">Bezahlen</a>
|
||||
</div>
|
||||
</div>
|
||||
</app-modal>
|
||||
@@ -1,247 +0,0 @@
|
||||
.modal {
|
||||
margin: 16px 0;
|
||||
height: 394px;
|
||||
width: 728px;
|
||||
font-family: 'Open Sans';
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
line-height: 21px;
|
||||
|
||||
h1 {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.header {
|
||||
flex-grow: 0;
|
||||
|
||||
h1 {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.close-icon {
|
||||
position: absolute;
|
||||
top: 25px;
|
||||
right: 25px;
|
||||
height: 21px;
|
||||
}
|
||||
|
||||
.close-icon:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
margin-top: 15px;
|
||||
|
||||
.body-heading {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
margin-bottom: 8px;
|
||||
|
||||
img {
|
||||
height: 16px;
|
||||
width: 26px;
|
||||
margin-right: 13px;
|
||||
margin-top: 3px;
|
||||
margin-left: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.line {
|
||||
height: 3px;
|
||||
width: 100%;
|
||||
background-image: url('../../../assets/images/Line.svg');
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
|
||||
.body-content {
|
||||
margin-top: 15px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
width: 97%;
|
||||
text-align: left;
|
||||
|
||||
img {
|
||||
height: 39px;
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
.book-title {
|
||||
font-family: 'Open Sans';
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
width: 112px;
|
||||
}
|
||||
|
||||
.order-details {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
height: 50px;
|
||||
width: 215px;
|
||||
position: relative;
|
||||
top: 13px;
|
||||
|
||||
.order-book-icon {
|
||||
height: 18px;
|
||||
width: 13px;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 16px;
|
||||
text-align: left;
|
||||
line-height: 25px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.price {
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
line-height: 25px;
|
||||
}
|
||||
|
||||
.dropdown_container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 35px;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
img {
|
||||
height: 9px;
|
||||
width: 17px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.dropdown-options {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 38px;
|
||||
position: fixed;
|
||||
top: 205px;
|
||||
z-index: 10;
|
||||
display: none;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
|
||||
span {
|
||||
padding: 5px 0;
|
||||
background-color: #E9EDF9;
|
||||
|
||||
&:hover {
|
||||
background-color: #acbcce;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
font-family: 'Open Sans';
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #f70400;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-line {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.overview {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
justify-items: center;
|
||||
width: 93%;
|
||||
margin-top: 30px;
|
||||
|
||||
.items {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: rgba(167, 185, 203, 1);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.overview-price-container {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
justify-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
.overview-price {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.overview-tax {
|
||||
font-size: 14px;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
width: 93%;
|
||||
margin-top: 30px;
|
||||
|
||||
.btn {
|
||||
font-family: 'Open Sans';
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #f70400;
|
||||
cursor: pointer;
|
||||
padding: 14px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.secondary {
|
||||
width: 160px;
|
||||
|
||||
&:hover {
|
||||
background-color: #f70400;
|
||||
border: none;
|
||||
border-radius: 25px;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
background-color: #f70400;
|
||||
border: none;
|
||||
border-radius: 25px;
|
||||
color: #ffffff;
|
||||
margin-left: 30px;
|
||||
width: 121px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
@@ -1,25 +0,0 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { ShoppingCartFeedbackComponent } from './shopping-cart-feedback.component';
|
||||
|
||||
describe('ShoppingCartFeedbackComponent', () => {
|
||||
let component: ShoppingCartFeedbackComponent;
|
||||
let fixture: ComponentFixture<ShoppingCartFeedbackComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ ShoppingCartFeedbackComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(ShoppingCartFeedbackComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -1,64 +0,0 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { ModalService } from '../../core/services/modal.service';
|
||||
|
||||
const points = 60;
|
||||
const price = 16.95;
|
||||
|
||||
@Component({
|
||||
selector: 'app-shopping-cart-feedback',
|
||||
templateUrl: './shopping-cart-feedback.component.html',
|
||||
styleUrls: ['./shopping-cart-feedback.component.scss']
|
||||
})
|
||||
export class ShoppingCartFeedbackComponent implements OnInit {
|
||||
id = 'feedback-modal';
|
||||
|
||||
// Mocked data
|
||||
currentNumberOfItems = 1;
|
||||
possibleItems = [1, 2, 3, 4, 5];
|
||||
displayItemsNumber = 1;
|
||||
currentPrice = price.toLocaleString().replace('.', ',');
|
||||
currentPoints = points;
|
||||
|
||||
// Toggle for dropdown
|
||||
displayDropdown = false;
|
||||
|
||||
|
||||
constructor(private modalService: ModalService) { }
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
openDialog() {
|
||||
this.modalService.open(this.id);
|
||||
}
|
||||
|
||||
closeModal() {
|
||||
this.modalService.close(this.id);
|
||||
}
|
||||
|
||||
setNumberOfItems (numberOfItems: number, element: any) {
|
||||
this.currentNumberOfItems = numberOfItems;
|
||||
this.toggleDropdown(element);
|
||||
}
|
||||
|
||||
openDropdown(element: any) {
|
||||
this.toggleDropdown(element);
|
||||
}
|
||||
|
||||
setDisplayNumber() {
|
||||
this.displayItemsNumber = this.currentNumberOfItems;
|
||||
this.currentPoints = this.currentNumberOfItems * points;
|
||||
this.currentPrice = (Math.round((this.currentNumberOfItems * price) * 100) / 100).toLocaleString().replace('.', ',');
|
||||
}
|
||||
|
||||
itemsConfirmed () {
|
||||
// Logic to be
|
||||
this.closeModal();
|
||||
}
|
||||
|
||||
private toggleDropdown(element: any) {
|
||||
console.log(element);
|
||||
element.style.display = this.displayDropdown ? 'none' : 'flex';
|
||||
this.displayDropdown = !this.displayDropdown;
|
||||
}
|
||||
}
|
||||
11
src/assets/images/Arrow_Up.svg
Normal file
11
src/assets/images/Arrow_Up.svg
Normal file
@@ -0,0 +1,11 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="18px" height="11px" viewBox="0 0 18 11" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>Arrow_Down Copy 8</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
|
||||
<g id="Hugendubel_PoC_Dropdown" transform="translate(-1186.000000, -267.000000)" stroke="#B3C3D4" stroke-width="2.3">
|
||||
<polyline id="Arrow_Down-Copy-8" transform="translate(1195.000000, 272.500000) rotate(-180.000000) translate(-1195.000000, -272.500000) " points="1188 269 1195 276 1202 269"></polyline>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 824 B |
Reference in New Issue
Block a user