@flower-city-online/itinerary-lib 0.0.7 → 0.0.10

package/src/lib/itinerary-app/modules/itineraries/components/delete-itineraries/delete-itineraries.component.html

@@ -0,0 +1,28 @@
+  <div class="delete-modal text-center" [formGroup]="deleteForm">
+    <img [ngSrc]="ICONS['delete']" height="46" width="46" class="mx-auto" />
+    
+    <h3 class="font-[Calistoga] mt-5">
+      {{ "SNACKBAR.DELETE_ITINERARY" | translate }}
+    </h3>
+    
+    <p class="text-white mb-2 max-w-[80%] ml-auto mr-auto mt-1 text-[10px]">
+      {{ "ADMIN.GRID.PERMANENT_DELETION" | translate }}
+    </p>
+    
+    <div class="check-box-field flex items-center justify-center gap-2">
+      <lib-dashed-checkbox formControlName="confirmDelete" class="check-box"></lib-dashed-checkbox>
+      <label class="text-[8px]">{{ "ADMIN.GRID.DELETE_ITEM_WARNING" | translate }}</label>
+    </div>
+    <ng-container *ngIf="showErrorMessage">
+      <p class="error-message text-[8px]">{{ "MAIN_ARCHIVES.DELETE_ERROR_MESSAGE" | translate }}</p>
+    </ng-container>
+    
+    <div class="flex justify-center gap-10 mt-5">
+      <button class="custom-flat-button font-[Calistoga]" (click)="closeModal()">
+        {{ "COMMON.KEEP" | translate }}
+      </button>
+      <button class="custom-flat-button-highlighted-font font-[Calistoga]" (click)="deleteItinerary()">
+        {{ "COMMON.DELETE" | translate }}
+      </button>
+    </div>
+  </div>

package/src/lib/itinerary-app/modules/itineraries/components/delete-itineraries/delete-itineraries.component.scss

@@ -0,0 +1,22 @@
+.check-box-field {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 10px;
+  margin-top: 30px;
+}
+
+.check-box-field {
+  span {
+    margin-left: 8px;
+  }
+}
+
+.check-box {
+  height: 20px !important;
+  width: 20px !important;
+}
+
+.error-message {
+  color: #c7472e;
+}

package/src/lib/itinerary-app/modules/itineraries/components/delete-itineraries/delete-itineraries.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DeleteItinerariesComponent } from './delete-itineraries.component';
+
+describe('DeleteItinerariesComponent', () => {
+  let component: DeleteItinerariesComponent;
+  let fixture: ComponentFixture<DeleteItinerariesComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [DeleteItinerariesComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DeleteItinerariesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/itinerary-app/modules/itineraries/components/delete-itineraries/delete-itineraries.component.ts

@@ -0,0 +1,48 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, OnInit, Output } from '@angular/core';
+import { ModalService } from '../../../../_services/modal.service';
+import { Iicon } from '../../../../_interface/icon'; 
+import { ICONS } from '../../../../_constants/constants';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+
+@Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  selector: 'app-delete-itineraries',
+  templateUrl: './delete-itineraries.component.html',
+  styleUrl: './delete-itineraries.component.scss',
+})
+export class DeleteItinerariesComponent implements OnInit {
+  @Output() deleteItineraryEvent: EventEmitter<string> = new EventEmitter<string>();
+  ICONS: Iicon = ICONS;
+  deleteForm!: FormGroup;
+  showErrorMessage: boolean = false;
+
+  constructor(
+    public modalService: ModalService,
+    private fb: FormBuilder
+  ) {
+    this.deleteForm = this.fb.group({
+      confirmDelete: [false, Validators.required] // initial value unchecked
+    });
+  }
+
+  closeModal(): void {
+    this.modalService.toggleModal = !this.modalService.toggleModal;
+  }
+
+  ngOnInit() {
+    this.deleteForm.valueChanges.subscribe(() => {
+      this.showErrorMessage = false;
+    });
+  }
+
+  onOk(): void {}
+
+  deleteItinerary(): void {
+    if(!this.deleteForm.value.confirmDelete) {
+      this.showErrorMessage = true;
+    } else {
+      this.deleteItineraryEvent.emit();
+      this.modalService.toggleModal = false;
+    }
+  }
+}

package/src/lib/itinerary-app/modules/itineraries/components/filter-menu/filter-menu.component.html

@@ -0,0 +1,13 @@
+<div [class]="cssClass + ' filter-menu py-3'">
+  <lib-selectable
+    (click)="changeSelection()"
+    (selectionchange)="changeSelection()"
+    [formControl]="filterControl"
+    [options]="options"
+    [singleSelectionOnly]="true"
+  >
+  </lib-selectable>
+  <lib-icon-btn (click)="handleFilterClick()">
+    <img [ngSrc]="ICONS['filter']" height="15" width="15" />
+  </lib-icon-btn>
+</div>

package/src/lib/itinerary-app/modules/itineraries/components/filter-menu/filter-menu.component.scss

@@ -0,0 +1,16 @@
+@use "../../../../_styles/colors" as *;
+
+$box-shadow-primary: 9.026px 8.205px 22.153px 2.051px rgba(17, 16, 20, 0.65);
+$box-shadow-secondary: -4.102px -4.102px 13.128px -2.462px
+  rgba(203, 199, 209, 0.25);
+
+.filter-menu {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 10px;
+}
+
+.checkmark-icon-btn img {
+  margin-left: 1.6px;
+}

package/src/lib/itinerary-app/modules/itineraries/components/filter-menu/filter-menu.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FilterMenuComponent } from './filter-menu.component';
+
+describe('FilterMenuComponent', () => {
+  let component: FilterMenuComponent;
+  let fixture: ComponentFixture<FilterMenuComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [FilterMenuComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(FilterMenuComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/itinerary-app/modules/itineraries/components/filter-menu/filter-menu.component.ts

@@ -0,0 +1,44 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+} from '@angular/core';
+import { FormControl } from '@angular/forms';  
+import { IFilterMenuOptions } from '../../../../_interface/filterMenuOptions';
+import { Iicon } from '../../../../_interface/icon';
+import { ApiService } from '../../../../_services/api.service';
+import { ICONS } from '../../../../_constants/constants';
+@Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  selector: 'app-filter-menu',
+  templateUrl: './filter-menu.component.html',
+  styleUrl: './filter-menu.component.scss',
+})
+export class FilterMenuComponent implements OnInit {
+  @Input() cssClass!: string;
+  @Output() onFilterClick: EventEmitter<void> = new EventEmitter<void>();
+  ICONS: Iicon = ICONS;
+  options: IFilterMenuOptions[] = [];
+  filterControl = new FormControl();
+  constructor(
+    public apiService: ApiService,
+    private cdr: ChangeDetectorRef,
+  ) {}
+
+  ngOnInit(): void {
+    this.apiService
+      .get('/assets/filterMenuOptionsData.json')
+      .subscribe((data) => {
+        this.options = data as IFilterMenuOptions[];
+        this.cdr.detectChanges();
+        this.filterControl.setValue(this.options[0].value);
+      });
+  }
+
+  changeSelection(): void {}
+  handleFilterClick = (): void => this.onFilterClick.emit();
+}

package/src/lib/itinerary-app/modules/itineraries/components/no-visual-map-filters/no-visual-map-filters.component.css

@@ -0,0 +1,30 @@
+.filter-title {
+    font-size: 16px;
+}
+
+.filters-description {
+    font-size: var(--font-size-medium);
+}
+
+.filter-button {
+    box-shadow: 4.1px 4.1px 8.2px 0px #00000052 inset;
+    box-shadow: -2.46px -2.46px 3.28px 0px #FFFFFF1A inset;
+    padding: 6.56px 13.13px;
+    border-radius: 27px;
+}
+
+.custom-select {
+    box-shadow: 4.1px 4.1px 8.2px 0px #00000052 inset;
+    box-shadow: -2.46px -2.46px 3.28px 0px #FFFFFF1A inset;
+    background: transparent;
+}
+
+.selectedbutton {
+    background: linear-gradient(94.44deg, #FE3C72 1.26%, #E15561 100%);
+}
+
+.filter-footer {
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+}

package/src/lib/itinerary-app/modules/itineraries/components/no-visual-map-filters/no-visual-map-filters.component.html

@@ -0,0 +1,104 @@
+<div>
+  <!-- Header -->
+  <div class="header-main-bar px-5 pt-5 pb-5 mr-3 flex items-center justify-between">
+    <lib-icon-btn class="checkmark-icon-button" (click)="firstButtonClick()">
+      <img [ngSrc]="ICONS['back']" height="12" width="13" />
+    </lib-icon-btn>
+    <div class="flex">
+      <h4 class="mr-1 filter-title font-[Calistoga]">
+        {{ "ITINERARY.MAP_FILTER" | translate }}
+      </h4>
+    </div>
+    <div></div>
+  </div>
+
+  <!-- Body -->
+  <div class="px-5 pt-5 pb-5 mr-3">
+    <div class="filters-description text-center">
+      Create and apply custom advanced filters to the map or select popular preset filters.
+    </div>
+
+    <!-- Preset Filter Buttons -->
+    <div class="preset-filters w-full pt-4 mt-4">
+      <button
+        class="filter-button font-[Gilroy] ml-2"
+        *ngFor="let preset of presetFilters"
+        (click)="applyPreset(preset)"
+        [class.selectedbutton]="selectedPresets?.includes(preset.name)"
+      >
+        {{ preset.name }}
+      </button>
+    </div>
+
+    <h4 class="font-[Gilroy] font-semibold mt-8 mb-2">Filters</h4>
+
+    <!-- Custom Filter Selectors -->
+    <div class="flex justify-left gap-10">
+      <!-- Field Dropdown -->
+      <div class="relative w-64">
+        <select
+          class="custom-select block w-full px-4 py-2 pr-10 text-lg border border-transparent rounded-full appearance-none transition-all duration-200 font-[Gilroy]"
+          [(ngModel)]="selectedField"
+          (change)="onFieldChange()"
+        >
+          <option value="" disabled selected>Field</option>
+          <option *ngFor="let field of filterFields" [value]="field">{{ field }}</option>
+        </select>
+        <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-4">
+          <svg class="h-5 w-5 text-red-500" xmlns="http://www.w3.org/2000/svg" fill="#FE3C72">
+            <path
+              fill-rule="evenodd"
+              d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+              clip-rule="evenodd"
+            />
+          </svg>
+        </div>
+      </div>
+
+      <!-- Condition Dropdown -->
+      <div class="relative w-64">
+        <select
+          class="custom-select block w-full px-4 py-2 pr-10 text-lg border border-transparent rounded-full appearance-none transition-all duration-200 font-[Gilroy]"
+          [(ngModel)]="selectedCondition"
+        >
+          <option value="" disabled selected>Condition</option>
+          <option *ngFor="let cond of filterConditions[selectedField]" [value]="cond">{{ cond }}</option>
+        </select>
+        <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-4">
+          <svg class="h-5 w-5 text-red-500" xmlns="http://www.w3.org/2000/svg" fill="#FE3C72">
+            <path
+              fill-rule="evenodd"
+              d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+              clip-rule="evenodd"
+            />
+          </svg>
+        </div>
+      </div>
+    </div>
+
+    <div class="flex flex-col gap-3 mt-3" *ngIf="conditionsArray?.length">
+      <div class="filter-container flex justify-between" *ngFor="let condition of conditionsArray; let i = index; ">
+        <button
+          class="filter-button font-[Gilroy] ml-2 selectedbutton"
+        >
+          {{ condition.name ? condition.name + '|' : '' }} {{ condition.field }} and {{ condition.condition }}
+        </button>
+
+        <img (click)="removeCondition(i)" [ngSrc]="ICONS['deletePink']" height="15" width="16" />
+      </div>
+    </div>
+
+    <!-- Add Filter Button -->
+    <div class="flex gap-2 mt-4">
+      <img src="assets/icons/plus.svg" />
+      <span (click)="applyCustomFilter()">Add Filter</span>
+    </div>
+  </div>
+</div>
+<div class="filter-footer">
+  <lib-footer-shared
+    (continueButtonClick)="applyFilter()"
+    [canContinue]="true"
+    continueButtonText="Apply"
+  ></lib-footer-shared>
+</div>

package/src/lib/itinerary-app/modules/itineraries/components/no-visual-map-filters/no-visual-map-filters.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NoVisualMapFiltersComponent } from './no-visual-map-filters.component';
+
+describe('NoVisualMapFiltersComponent', () => {
+  let component: NoVisualMapFiltersComponent;
+  let fixture: ComponentFixture<NoVisualMapFiltersComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [NoVisualMapFiltersComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(NoVisualMapFiltersComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/itinerary-app/modules/itineraries/components/no-visual-map-filters/no-visual-map-filters.component.ts

@@ -0,0 +1,87 @@
+import { Component, EventEmitter, Output } from "@angular/core";
+import { Iicon } from "../../../../_interface/icon";
+import { ICONS } from "../../../../_constants/constants";
+import { IConditions } from "../../../../_interface/conditions";
+import { IPresetRecord } from "../../../../_interface/presetRecord";
+
+@Component({
+  selector: 'lib-no-visual-map-filters',
+  templateUrl: './no-visual-map-filters.component.html',
+  styleUrl: './no-visual-map-filters.component.css'
+})
+export class NoVisualMapFiltersComponent {
+  ICONS: Iicon = ICONS;
+  selectedPresets: string[] = [];
+  conditionsArray: IConditions[] = [];
+
+  @Output() presetsChanged: EventEmitter<IPresetRecord[]> = new EventEmitter<IPresetRecord[]>();
+
+  @Output() backButtonClicked: EventEmitter<void> = new EventEmitter<void>();
+
+  // Example preset filters
+  presetFilters: Array<IPresetRecord> = [
+    { name: 'Restaurants', field: 'type', condition: 'restaurant' },
+    { name: 'Good Rating', field: 'rating', condition: '>=4' },
+    { name: 'Open Now', field: 'open_now', condition: true },
+  ];
+
+  
+
+  // Dynamic fields and their possible conditions
+  filterFields: string[] = ['type', 'rating', 'open_now'];
+
+  filterConditions: { [key: string]: any[] } = {
+    type: ['restaurant', 'cafe', 'lodging', 'store'],
+    rating: ['>=3', '>=4', '>=4.5'],
+    open_now: ['true', 'false'],
+  };
+
+  selectedField: string = '';
+  selectedCondition: string = '';
+  selectedPreset: any = null;
+
+  firstButtonClick() {
+    this.backButtonClicked.emit();
+  }
+
+  applyPreset(preset: IPresetRecord) {
+    if(this.selectedPresets.includes(preset.name)) {
+      this.selectedPresets = this.selectedPresets.filter(name => name !== preset.name);
+      this.conditionsArray = this.conditionsArray.filter(condition => condition.name !== preset.name);
+    } else {
+      this.selectedPresets.push(preset.name);
+      this.conditionsArray.push({
+        name: preset.name,
+        field: preset.field,
+        condition: preset.condition
+      });
+    }     
+  }
+
+  onFieldChange() {
+    this.selectedCondition = ''; // Reset condition when field changes
+  }
+
+  removeCondition(i: number) {
+    this.conditionsArray.splice(i, 1);
+  }
+
+  applyCustomFilter() {
+    this.conditionsArray.push({
+      name: '',
+      field: this.selectedField,
+      condition: this.selectedCondition
+    });
+    this.selectedField = '';
+    this.selectedCondition = '';
+  }
+
+  applyFilter() {
+    this.presetsChanged.emit(this.conditionsArray);
+    this.backButtonClicked.emit();
+  }
+
+  applyGooglePlacesFilter(field: string, condition: any) {
+    console.log(field, condition);
+  }
+}

package/src/lib/itinerary-app/modules/itineraries/components/report-itinerary-modal/report-itinerary-modal.component.html

@@ -0,0 +1,14 @@
+<div class="report-itineraies max-padd-container">
+  <h1 class="p-4">{{ popupTitle | translate }}</h1>
+  <div>
+    <lib-form-field [formFieldControl]="radio" [submitted]="false" [required]="true" [maxLength]="10"
+      [type]="FormFieldType.radio" [options]="options" [radioDeselectable]="false" class="mb-2"></lib-form-field>
+  </div>
+
+  <lib-text-box class="text-feild" [class.show]="selectedItem == 9" [class.hide]="selectedItem != 9"
+    [label]="'Please brief your issue'"></lib-text-box>
+  <div class="flex justify-center gap-10 mt-5">
+    <button class="custom-flat-button font-[Calistoga]" (click)="closeModal()">{{ "COMMON.CANCEL" | translate}}</button>
+    <button class="custom-flat-button-highlighted-font font-[Calistoga]"  (click)="onOk()">{{ "REPORT" | translate }}</button>
+  </div>
+</div>

package/src/lib/itinerary-app/modules/itineraries/components/report-itinerary-modal/report-itinerary-modal.component.scss

@@ -0,0 +1,35 @@
+.report-itineraies {
+  width: 330px;
+  border-radius: 10px;
+  overflow: hidden;
+  padding: 20px 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.report-itineraies h1 {
+  font-family: "Calistoga";
+}
+
+input {
+  box-shadow: none;
+}
+
+.text-feild {
+  position: relative;
+  width: 100%;
+  padding: 5px 0px;
+  transition: opacity 0.5s ease, max-height 0.5s ease;
+}
+
+.text-feild.show {
+  opacity: 1;
+  max-height: 200px;
+}
+
+.text-feild.hide {
+  opacity: 0;
+  max-height: 0;
+}

package/src/lib/itinerary-app/modules/itineraries/components/report-itinerary-modal/report-itinerary-modal.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ReportItineraryModalComponent } from './report-itinerary-modal.component';
+
+describe('ReportItineraryModalComponent', () => {
+  let component: ReportItineraryModalComponent;
+  let fixture: ComponentFixture<ReportItineraryModalComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ReportItineraryModalComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ReportItineraryModalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/itinerary-app/modules/itineraries/components/report-itinerary-modal/report-itinerary-modal.component.ts

@@ -0,0 +1,78 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  Input,
+  OnDestroy,
+  OnInit,
+} from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { FormFieldType } from '@naniteninja/ionic-lib';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators'; 
+import { ModalService } from '../../../../_services/modal.service';
+import { IReportOptions } from '../../../../_interface/reportOptions';
+import { ApiService } from '../../../../_services/api.service';
+import { ConstantsService } from '../../../../_services/constants.service';
+
+@Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  selector: 'app-report-itinerary-modal',
+  templateUrl: './report-itinerary-modal.component.html',
+  styleUrls: ['./report-itinerary-modal.component.scss'],
+})
+export class ReportItineraryModalComponent implements OnInit, OnDestroy {
+  @Input() popupTitle!: string;
+  selectedItem: number | undefined;
+  radio: FormControl = new FormControl(0);
+  options: IReportOptions[] = [];
+  private destroy$: Subject<void> = new Subject<void>();
+
+  constructor(
+    public constantService: ConstantsService,
+    public modalService: ModalService,
+    public apiService: ApiService,
+    private cdr: ChangeDetectorRef,
+  ) {}
+
+  radioChecked(): void {
+    if (this.radio.value === this.constantService.SPECIAL_VALUE) {
+      this.selectedItem = this.constantService.SPECIAL_VALUE;
+    } else {
+      this.selectedItem = 0;
+    }
+  }
+
+  ngOnInit(): void {
+    this.apiService
+      .get<IReportOptions[]>('/assets/reportsOptionsData.json')
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((data: IReportOptions[]) => {
+        this.options = data;
+        this.cdr.detectChanges();
+      });
+
+    this.radio.valueChanges
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((e: number | null) => {
+        this.selectedItem =
+          e === this.constantService.SPECIAL_VALUE
+            ? this.constantService.SPECIAL_VALUE
+            : 0;
+      });
+    
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  closeModal(): void {
+    this.modalService.toggleModal = !this.modalService.toggleModal;
+  }
+
+  onOk(): void {}
+
+  protected readonly FormFieldType = FormFieldType;
+}

package/src/lib/itinerary-app/modules/itineraries/components/send-to-client/send-to-client.component.css

@@ -0,0 +1,28 @@
+.check-box-field {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 10px;
+  margin-top: 30px;
+}
+
+.check-box-field {
+  span {
+    margin-left: 8px;
+  }
+}
+
+.check-box {
+  height: 20px !important;
+  width: 20px !important;
+}
+
+.modal-bottom-bar {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.suggest-client-title {
+  font-family: Calistoga;
+}

package/src/lib/itinerary-app/modules/itineraries/components/send-to-client/send-to-client.component.html

@@ -0,0 +1,10 @@
+<div class="delete-modal">
+  <h3 class="text-center mb-[25px] font-[Calistoga]">{{ "SNACKBAR.SUGGEST_TO_CLIENT" | translate }}</h3>
+  
+  <lib-matching-clients (clientSelectionChanged)="onClientSelectionChanged($event)"></lib-matching-clients>
+
+  <div class="flex justify-center gap-10 mt-5">
+    <button class="custom-flat-button font-[Calistoga]" (click)="closeSendClientModal()">{{ "COMMON.CANCEL" | translate}}</button>
+    <button class="custom-flat-button-highlighted-font font-[Calistoga]"  (click)="submitSendClient()">{{ "COMMON.SEND" | translate }}</button>
+  </div>
+</div>