Feature/#4202/create new card

src/app/app.component.scss

@@ -1,4 +1,4 @@
-@import 'src/typography/typography';
+@import '../typography/typography';
 
 .offline {
   top: 50px;

src/app/ubs/ubs-admin/components/shared/components/modal-text/modal-text.component.html

@@ -6,13 +6,13 @@
     <p class="modal-text">{{ text | translate }}{{ text2 | translate: { bagName: bagName } }}</p>
   </div>
   <div class="d-flex justify-content-end buttons" mat-dialog-actions>
-    <button *ngIf="!check(modalData.name)" class="secondary-global-button btn m-0 mr-2" mat-button (click)="onNoClick(false)">
+    <button *ngIf="!check(modalData.name)" class="button secondary-global-button" mat-button (click)="onNoClick(false)">
       {{ 'modal-text.cancel' | translate }}
     </button>
-    <button *ngIf="check(modalData.name)" class="secondary-global-button btn m-0 mr-2" mat-button (click)="onNoClick(false)">
+    <button *ngIf="check(modalData.name)" class="button secondary-global-button" mat-button (click)="onNoClick(false)">
       {{ 'modal-text.no' | translate }}
     </button>
-    <button class="primary-global-button btn m-0" (click)="onNoClick(true)">
+    <button class="button primary-global-button btn m-0" (click)="onNoClick(true)">
       {{ action | translate }}
     </button>
   </div>

src/app/ubs/ubs-admin/components/shared/components/modal-text/modal-text.component.scss

@@ -1,27 +1,23 @@
+#modal-wrapper {
+  width: 480px;
+}
+
+.button {
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 24px;
+  padding: 8px 24px;
+  color: var(--ubs-freinacht-black);
+}
+
 .secondary-global-button {
-  height: 36px;
   border: 1px solid var(--ubs-quaternary-dark-grey);
-  color: var(--ubs-quaternary-dark-grey);
   margin-right: 1rem !important;
-  font-weight: bold;
-  font-size: 14px;
-  line-height: 20px;
 }
 
 .primary-global-button {
-  font-weight: bold;
-  font-size: 14px;
-  line-height: 20px;
-  height: 36px;
-  padding: 8px 14px;
-  color: var(--ubs-quaternary-dark-grey);
   border-color: var(--ubs-button-light-green);
   background: var(--ubs-button-light-green);
-
-  &:disabled {
-    background: var(--ubs-quaternary-light-grey);
-    border-color: var(--ubs-quaternary-light-grey);
-  }
 }
 
 .title {

src/app/ubs/ubs-admin/components/shared/components/tariff-confirmation-pop-up/tariff-confirmation-pop-up.component.html

@@ -0,0 +1,52 @@
+<div class="w-100">
+  <p class="title">{{ title | translate }}</p>
+</div>
+<app-dialog-tariff [row]="form" [newDate]="newDate" [name]="name" [edit]="true"></app-dialog-tariff>
+<ng-template #form>
+  <div class="form">
+    <div class="form-block">
+      <div class="ua-part">
+        <label class="label">{{ 'ubs-tariffs.courier' | translate }}</label>
+        <p class="text">{{ courierName }}</p>
+      </div>
+      <div class="en-part">
+        <label class="label">Courier</label>
+        <p class="text">{{ courierEnglishName }}</p>
+      </div>
+    </div>
+    <div class="form-block">
+      <div class="ua-part">
+        <label class="label">{{ 'ubs-tariffs.station' | translate }}</label>
+        <p *ngFor="let stationName of stationNames" class="text">{{ stationName }}</p>
+      </div>
+    </div>
+    <div class="form-block">
+      <div class="ua-part">
+        <label class="label">{{ 'ubs-tariffs.region' | translate }}</label>
+        <p class="text">{{ regionName }}</p>
+      </div>
+      <div class="en-part">
+        <label class="label">Region</label>
+        <p class="text">{{ regionEnglishName }}</p>
+      </div>
+    </div>
+    <div class="form-block">
+      <div class="ua-part">
+        <label class="label">{{ 'ubs-tariffs.city' | translate }}</label>
+        <p *ngFor="let locationName of locationNames" class="text">{{ locationName }}</p>
+      </div>
+      <div class="en-part">
+        <label class="label">City</label>
+        <p *ngFor="let locationEnglishName of locationEnglishNames" class="text">{{ locationEnglishName }}</p>
+      </div>
+    </div>
+  </div>
+  <div class="buttons-wrapper" mat-dialog-actions>
+    <button class="button secondary-global-button" mat-button (click)="onNoClick()">
+      {{ 'ubs-tariffs-add-location-pop-up.cancel_button' | translate }}
+    </button>
+    <button class="button primary-global-button" (click)="actionClick()">
+      {{ action | translate }}
+    </button>
+  </div>
+</ng-template>

src/app/ubs/ubs-admin/components/shared/components/tariff-confirmation-pop-up/tariff-confirmation-pop-up.component.scss

@@ -0,0 +1,59 @@
+.title {
+  font-family: var(--ubs-quaternary-font);
+  font-style: normal;
+  color: var(--ubs-quaternary-dark-grey);
+  font-weight: bold;
+  font-size: 24px;
+  line-height: 32px;
+  letter-spacing: 0.002em;
+}
+
+.form-block {
+  display: flex;
+  font-family: var(--ubs-quaternary-font);
+  margin-bottom: 24px;
+
+  .ua-part,
+  .en-part {
+    width: 246px;
+  }
+}
+
+.label {
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+  color: var(--ubs-secondary-grey);
+  margin-bottom: 8px;
+}
+
+.text {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--ubs-freinacht-black);
+  margin-bottom: 0;
+}
+
+.buttons-wrapper {
+  display: flex;
+  justify-content: flex-end;
+  margin: 40px 0 32px;
+}
+
+.button {
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 24px;
+  padding: 8px 24px;
+  color: var(--ubs-freinacht-black);
+}
+
+.secondary-global-button {
+  border: 1px solid var(--ubs-quaternary-dark-grey);
+  margin-right: 1rem !important;
+}
+
+.primary-global-button {
+  border-color: var(--ubs-button-light-green);
+  background: var(--ubs-button-light-green);
+}

src/app/ubs/ubs-admin/components/shared/components/tariff-confirmation-pop-up/tariff-confirmation-pop-up.component.spec.ts

@@ -0,0 +1,37 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { MatDialog, MatDialogModule, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { TranslateModule } from '@ngx-translate/core';
+import { of } from 'rxjs';
+
+import { TariffConfirmationPopUpComponent } from './tariff-confirmation-pop-up.component';
+
+describe('TariffConfirmationPopUpComponent', () => {
+  let component: TariffConfirmationPopUpComponent;
+  let fixture: ComponentFixture<TariffConfirmationPopUpComponent>;
+
+  const matDialogMock = jasmine.createSpyObj('matDialog', ['open']);
+  const fakeMatDialogRef = jasmine.createSpyObj(['close', 'afterClosed']);
+  fakeMatDialogRef.afterClosed.and.returnValue(of(true));
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [TariffConfirmationPopUpComponent],
+      imports: [MatDialogModule, TranslateModule.forRoot()],
+      providers: [
+        { provide: MAT_DIALOG_DATA, useValue: {} },
+        { provide: MatDialog, useValue: matDialogMock },
+        { provide: MatDialogRef, useValue: fakeMatDialogRef }
+      ]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TariffConfirmationPopUpComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/ubs/ubs-admin/components/shared/components/tariff-confirmation-pop-up/tariff-confirmation-pop-up.component.ts

@@ -0,0 +1,71 @@
+import { DatePipe } from '@angular/common';
+import { Component, Inject, OnInit } from '@angular/core';
+import { LocalStorageService } from '@global-service/localstorage/local-storage.service';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { ModalTextComponent } from '../modal-text/modal-text.component';
+
+@Component({
+  selector: 'app-tariff-confirmation-pop-up',
+  templateUrl: './tariff-confirmation-pop-up.component.html',
+  styleUrls: ['./tariff-confirmation-pop-up.component.scss']
+})
+export class TariffConfirmationPopUpComponent implements OnInit {
+  public name: string;
+  public datePipe = new DatePipe('ua');
+  public newDate = this.datePipe.transform(new Date(), 'MMM dd, yyyy');
+  unsubscribe: Subject<any> = new Subject();
+  title: string;
+  courierName: string;
+  courierEnglishName: string;
+  stationNames: Array<string>;
+  regionName: string;
+  regionEnglishName: string;
+  locationNames: Array<string>;
+  locationEnglishNames: Array<string>;
+  action: string;
+
+  constructor(
+    private localeStorageService: LocalStorageService,
+    @Inject(MAT_DIALOG_DATA) public modalData: any,
+    public dialog: MatDialog,
+    public dialogRef: MatDialogRef<TariffConfirmationPopUpComponent>
+  ) {}
+
+  ngOnInit(): void {
+    this.title = this.modalData.title;
+    this.courierName = this.modalData.courierName ?? '';
+    this.courierEnglishName = this.modalData.courierEnglishName ?? '';
+    this.stationNames = this.modalData.stationNames ?? '';
+    this.regionName = this.modalData.regionName ?? '';
+    this.regionEnglishName = this.modalData.regionEnglishName ?? '';
+    this.locationNames = this.modalData.locationNames ?? '';
+    this.locationEnglishNames = this.modalData.locationEnglishNames ?? '';
+    this.action = this.modalData.action;
+    this.localeStorageService.firstNameBehaviourSubject.pipe(takeUntil(this.unsubscribe)).subscribe((firstName) => {
+      this.name = firstName;
+    });
+  }
+
+  public onNoClick(): void {
+    const matDialogRef = this.dialog.open(ModalTextComponent, {
+      hasBackdrop: true,
+      panelClass: 'address-matDialog-styles-w-100',
+      data: {
+        name: 'cancel',
+        text: 'modal-text.cancel-message',
+        action: 'modal-text.yes'
+      }
+    });
+    matDialogRef.afterClosed().subscribe((res) => {
+      if (res) {
+        this.dialogRef.close(false);
+      }
+    });
+  }
+
+  public actionClick(): void {
+    this.dialogRef.close(true);
+  }
+}