[HIMA-54] FE: Choose pay method dialog

Created choose pay method dialog
2025-12-31 09:37:15 +01:00 · 2019-02-09 14:58:24 +01:00
parent 9e44fce9ce
commit 9aeaf152da
13 changed files with 274 additions and 10 deletions
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -37,6 +37,7 @@ import { FilterState } from './core/store/state/filter.state';
 import { CheckoutComponent } from './components/checkout/checkout.component';
 import { ModalComponent } from './shared/components/modal/modal.component';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { SharedModule } from './shared/shared.module';

 const states = [FeedState, ProcessState, BreadcrumbsState, FilterState];

@@ -70,13 +71,13 @@ export function _feedServiceEndpointProviderFactory(conf: ConfigService) {
    ProductCardComponent,
    ProductDetailsComponent,
    CheckoutComponent,
-    ModalComponent,
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    ComponentsModule,
+    SharedModule,
    HttpClientModule,
    NgxsModule.forRoot(states, { developmentMode: !environment.production }),
    NgxsReduxDevtoolsPluginModule.forRoot(),
--- a/src/app/modules/cart/cart-modul.ts
+++ b/src/app/modules/cart/cart-modul.ts
@@ -5,13 +5,16 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';

 import { SharedModule } from 'src/app/shared/shared.module';
 import { CartReviewComponent } from './components/cart-review/cart-review.component';
+import { PayMethodComponent } from './components/pay-method/pay-method.component';

@NgModule({
  declarations: [
-   CartReviewComponent
+   CartReviewComponent,
+   PayMethodComponent
  ],
  exports: [
-    CartReviewComponent
+    CartReviewComponent,
+    PayMethodComponent
  ],
  imports: [CommonModule, FormsModule, ReactiveFormsModule, SharedModule]
 })
--- a/src/app/modules/cart/components/cart-review/cart-review.component.html
+++ b/src/app/modules/cart/components/cart-review/cart-review.component.html
@@ -72,7 +72,9 @@
            <span class="overview-price">Zwischensumme {{ booksTotalSumString }} {{ currency }}</span>
            <span class="overview-tax">ohne Versandkosten</span>
          </div>
-          <a class="btn">Weiter</a>
+          <a class="btn" (click)="next()">Weiter</a>
        </div>
      </div>
-</div>
+</div>
+
+<app-pay-method #payMethod></app-pay-method>
--- a/src/app/modules/cart/components/cart-review/cart-review.component.ts
+++ b/src/app/modules/cart/components/cart-review/cart-review.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
 import { FormGroup, Validators, FormBuilder } from '@angular/forms';
 import { Router } from '@angular/router';
 import { Store, Select } from '@ngxs/store';
@@ -9,6 +9,7 @@ import { ChangeCurrentRoute, AddBreadcrumb } from '../../../../core/store/action
 import { Breadcrumb } from '../../../../core/models/breadcrumb.model';
 import { ItemDTO, CatImageService } from 'cat-service';
 import { Cart } from '../../../../core/models/cart.model';
+import { PayMethodComponent } from '../pay-method/pay-method.component';

 const points = 60;

@@ -27,7 +28,7 @@ export interface BookData {
 export class CartReviewComponent implements OnInit {
  @Select(ProcessState.getActiveUser) user$: Observable<User>;
  @Select(ProcessState.getCart) cart$: Observable<Cart[]>;
-
+  @ViewChild('payMethod') payMethodDialog: PayMethodComponent;

  user: User;
  invoiceForm: FormGroup;
@@ -199,6 +200,10 @@ export class CartReviewComponent implements OnInit {
    }
  }

+  next() {
+    this.payMethodDialog.openDialog();
+  }
+
  private setInputData (field: string, val: string, form: FormGroup) {
    form.get(field).patchValue(val);
    form.get(field).disable();
--- a/src/app/modules/cart/components/pay-method/pay-method.component.html
+++ b/src/app/modules/cart/components/pay-method/pay-method.component.html
@@ -0,0 +1,56 @@
+<app-modal id="pay-method-modal">
+
+  <div class="pay-method-modal">
+    <div class="header">
+      <h1>Wie möchten Sie bezahlen um die Bestellung abzuschließen?</h1>
+      <img (click)="closeModal()" class="close-icon" src="../../../../../assets/images/close.svg" alt="close">
+    </div>
+    <div class="body">
+      <div class="actions">
+        <a class="active">
+          <img src="../../../../../assets/images/Empfehlungen_Icon.svg" alt="megafon">
+          Kundenkarte anlegen
+        </a>
+        <a>Paypal</a>
+        <a>Karte</a>
+        <a>Kasse</a>
+        <a>Gutschein</a>
+      </div>
+      <div class="descriptions">
+        <div>
+          <span class="label">Exklusivität</span>
+          <span class="text">Exklusive Angebote und Aktionen genießen</span>
+        </div>
+        <div>
+          <span class="label">Lesepunkte</span>
+          <span class="text">250 Lesepunkte beim jetzigen Einkauf einlösen</span>
+        </div>
+        <div>
+          <span class="label">Ermäßigungen</span>
+          <span class="text">Ermäßigter Eintritt bei Veranstaltungen</span>
+        </div>
+        <ng-container *ngIf="!toggleMore">
+            <div>
+              <span class="label">Überraschungen</span>
+              <span class="text">Geburtstagsüberraschung per E-Mail</span>
+            </div>
+            <div>
+              <span class="label">Prämien</span>
+              <span class="text">Stetig wechselndes Prämienangebot</span>
+            </div>
+        </ng-container>
+
+        <div class="more" *ngIf="toggleMore" (click)="more()">
+          <span class="more-label">Weitere Vorteile</span>
+          <img src="../../../../../assets/images/Arrow_Next-with-body.svg" alt="more">
+        </div>
+
+        <div class="more" *ngIf="!toggleMore" (click)="more()">
+          <img src="../../../../../assets/images/Arrow_back.svg" alt="less">
+          <span class="less-label">Weniger Vorteile</span>
+        </div>
+      </div>
+    </div>
+  </div>
+
+</app-modal>
--- a/src/app/modules/cart/components/pay-method/pay-method.component.scss
+++ b/src/app/modules/cart/components/pay-method/pay-method.component.scss
@@ -0,0 +1,118 @@
+@import "../../../../../assets/scss/variables";
+
+.pay-method-modal {
+  font-family: 'Open Sans';
+  line-height: 21px;
+  margin: 16px 0;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  min-height: 367px;
+  width: 728px;
+
+  h1 {
+    font-size: 20px;
+    font-weight: bold;
+    text-align: center;
+    width: 350px;
+    margin-top: 20px;
+  }
+
+  .header {
+    .close-icon {
+      position: absolute;
+      top: 25px;
+      right: 25px;
+      height: 21px;
+    }
+
+    .close-icon:hover {
+      cursor: pointer;
+    }
+  }
+
+  .body {
+    margin-top: 40px;
+    width: 88%;
+
+    .actions{
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      a {
+        font-size: 18px;
+        font-weight: bold;
+        color: $hima-button-color;
+
+        &.active {
+          background-color: $hima-button-color;
+          color: #fff;
+          border-radius: 25px;
+          outline: none;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          padding: 14px 20px;
+
+          img {
+            padding-right: 5px;
+            height: 18px;
+            width: 26px;
+            color: #fff;
+          }
+        }
+      }
+    }
+
+    .descriptions {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      align-items: flex-start;
+      text-align: left;
+      margin-top: 40px;
+
+      div {
+        padding: 7px 20px;
+      }
+
+      .more {
+        padding: 20px 20px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        &-label {
+          font-size: 16px;
+          font-weight: bold;
+          color: #5a728a;
+          text-align: left;
+          margin-right: 8px;
+        }
+
+        .less-label {
+          font-size: 16px;
+          font-weight: bold;
+          color: #5a728a;
+          text-align: left;
+          margin-left: 8px;
+        }
+      }
+
+      .label {
+        font-size: 18px;
+        font-weight: bold;
+        color: #000000;
+        margin-right: 20px;
+      }
+
+      .text {
+        font-size: 16px;
+        color: #000000;
+        text-align: left;
+        line-height: 21px;
+      }
+    }
+  }
+}
--- a/src/app/modules/cart/components/pay-method/pay-method.component.spec.ts
+++ b/src/app/modules/cart/components/pay-method/pay-method.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PayMethodComponent } from './pay-method.component';
+
+describe('PayMethodComponent', () => {
+  let component: PayMethodComponent;
+  let fixture: ComponentFixture<PayMethodComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PayMethodComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PayMethodComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/modules/cart/components/pay-method/pay-method.component.ts
+++ b/src/app/modules/cart/components/pay-method/pay-method.component.ts
@@ -0,0 +1,30 @@
+import { Component, OnInit } from '@angular/core';
+import { ModalService } from 'src/app/core/services/modal.service';
+
+@Component({
+  selector: 'app-pay-method',
+  templateUrl: './pay-method.component.html',
+  styleUrls: ['./pay-method.component.scss']
+})
+export class PayMethodComponent implements OnInit {
+  id = 'pay-method-modal';
+  toggleMore = true;
+
+  constructor(private modalService: ModalService,) { }
+
+  ngOnInit() {
+  }
+
+  openDialog() {
+    this.modalService.open(this.id);
+  }
+
+  closeModal(dialogSubmited: boolean = false) {
+    this.modalService.close(this.id);
+  }
+
+  more(){
+    this.toggleMore = !this.toggleMore;
+  }
+
+}
--- a/src/app/modules/cart/index.ts
+++ b/src/app/modules/cart/index.ts
@@ -1 +1,2 @@
-export * from './components/cart-review/cart-review.component';
+export * from './components/cart-review/cart-review.component';
+export * from './components/pay-method/pay-method.component';
--- a/src/app/modules/components.module.ts
+++ b/src/app/modules/components.module.ts
@@ -31,7 +31,7 @@ import { CartModule } from './cart/cart-modul';
    MenuComponent,
    BreadcrumbsComponent,
    FilterComponent,
-    FilterItemComponent
+    FilterItemComponent,
  ],
  imports: [
    CommonModule,
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -1,8 +1,9 @@
 import { CardComponent } from './components/card/card.component';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { ModalComponent } from './components/modal/modal.component';

-const components = [CardComponent];
+const components = [CardComponent, ModalComponent];
@NgModule({
  imports: [CommonModule],
  exports: [...components],
--- a/src/assets/images/Arrow_Next-with-body.svg
+++ b/src/assets/images/Arrow_Next-with-body.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="15px" height="13px" viewBox="0 0 15 13" 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_Next</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="UC1_21_Hugendubel_Instoreapp_Kunden_Warenkorb_Popup_Zahlungsart" transform="translate(-217.000000, -649.000000)" fill="#5A728A" stroke="#5A728A" stroke-width="0.1">
+            <path d="M230.733819,656.417268 C230.809301,656.367042 230.880065,656.306645 230.943808,656.235936 C231.028396,656.141781 231.093784,656.03705 231.140412,655.926559 C231.19823,655.788212 231.226645,655.640759 231.225548,655.493711 C231.227742,655.229338 231.134487,654.963638 230.943808,654.75163 C230.880065,654.680921 230.809301,654.620513 230.733819,654.570298 L225.970888,650.281854 C225.520301,649.876326 224.82714,649.912754 224.421644,650.363013 C224.016039,650.813272 224.052463,651.507005 224.502502,651.912402 L227.252764,654.38856 L219.097118,654.38856 C218.49124,654.38856 218,654.879796 218,655.485681 C218,656.091555 218.49124,656.582801 219.097118,656.582801 L227.270428,656.582801 L224.502502,659.075163 C224.052463,659.480549 224.016039,660.174292 224.421644,660.62455 C224.82714,661.074776 225.520301,661.1112 225.970888,660.705704 L230.733819,656.417268 Z" id="Arrow_Next"></path>
+        </g>
+    </g>
+</svg>
--- a/src/assets/images/Arrow_back.svg
+++ b/src/assets/images/Arrow_back.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="15px" height="13px" viewBox="0 0 15 13" 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_Next</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="UC1_21_Hugendubel_Instoreapp_Kunden_Warenkorb_Popup_Zahlungsart_More" transform="translate(-80.000000, -683.000000)" fill="#5A728A" stroke="#5A728A" stroke-width="0.1">
+            <path d="M93.7338186,690.417268 C93.8093005,690.367042 93.8800648,690.306645 93.9438075,690.235936 C94.0283955,690.141781 94.0937839,690.03705 94.1404115,689.926559 C94.1982298,689.788212 94.2266452,689.640759 94.2255481,689.493711 C94.2277424,689.229338 94.1344871,688.963638 93.9438075,688.75163 C93.8800648,688.680921 93.8093005,688.620513 93.7338186,688.570298 L88.9708884,684.281854 C88.5203009,683.876326 87.8271401,683.912754 87.4216442,684.363013 C87.0160387,684.813272 87.0524631,685.507005 87.502502,685.912402 L90.2527643,688.38856 L82.0971175,688.38856 C81.4912403,688.38856 81,688.879796 81,689.485681 C81,690.091555 81.4912403,690.582801 82.0971175,690.582801 L90.2704279,690.582801 L87.502502,693.075163 C87.0524631,693.480549 87.0160387,694.174292 87.4216442,694.62455 C87.8271401,695.074776 88.5203009,695.1112 88.9708884,694.705704 L93.7338186,690.417268 Z" id="Arrow_Next" transform="translate(87.612793, 689.493768) rotate(-180.000000) translate(-87.612793, -689.493768) "></path>
+        </g>
+    </g>
+</svg>