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

package/src/lib/itinerary-app/modules/itineraries/pages/branched-itineraries/branched-itineraries.component.ts

@@ -0,0 +1,179 @@
+import { Location } from '@angular/common';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { LibMenuItem } from '@naniteninja/ionic-lib'; 
+import { ItinerariesRoutesEnum } from '../../../../_enums/ItenariesRoutes.enum';
+import { UserRoutes } from '../../../../_enums/userRoutes.enum';
+import { CustomDropdownMenuService } from '../../../../_services/custom-dropdown-menu.service';
+import { ICONS } from '../../../../_constants/constants';
+import { Iicon } from '../../../../_interface/icon';
+ 
+@Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  selector: 'app-branched-itineraries',
+  templateUrl: './branched-itineraries.component.html',
+  styleUrl: './branched-itineraries.component.scss',
+})
+export class BranchedItinerariesComponent {
+  libMenuItem: LibMenuItem[] = [
+    {
+      title: 'New File',
+      titlePrefix: 'Create',
+      titleSuffix: '',
+      iconUrl: '/assets/icons/new-file.svg',
+      iconName: 'note_add',
+      cssClass: 'menu-new-file',
+      active: false,
+      disabled: false,
+      separator: false,
+      listItem: { id: 6, type: 'file' },
+      listItemIndex: 0,
+      command: (_item?: LibMenuItem) => {},
+    },
+    {
+      title: 'Open File',
+      titlePrefix: 'Browse',
+      titleSuffix: '',
+      iconUrl: '/assets/icons/open-file.svg',
+      iconName: 'folder_open',
+      cssClass: 'menu-open-file',
+      active: false,
+      disabled: false,
+      separator: false,
+      listItem: { id: 7, type: 'file' },
+      listItemIndex: 1,
+      command: (_item?: LibMenuItem) => {},
+    },
+    {
+      title: 'Save File',
+      titlePrefix: 'Save',
+      titleSuffix: 'Changes',
+      iconUrl: '/assets/icons/save.svg',
+      iconName: 'save',
+      cssClass: 'menu-save-file',
+      active: false,
+      disabled: false,
+      separator: false,
+      listItem: { id: 8, type: 'file' },
+      listItemIndex: 2,
+      command: (_item?: LibMenuItem) => {},
+    },
+    {
+      title: 'Print',
+      titlePrefix: 'Print',
+      titleSuffix: '',
+      iconUrl: '/assets/icons/print.svg',
+      iconName: 'print',
+      cssClass: 'menu-print',
+      active: false,
+      disabled: false,
+      separator: false,
+      listItem: { id: 9, type: 'action' },
+      listItemIndex: 3,
+      command: (_item?: LibMenuItem) => {},
+    },
+    {
+      title: 'Exit',
+      titlePrefix: 'Close',
+      titleSuffix: 'Application',
+      iconUrl: '/assets/icons/close.svg',
+      iconName: 'close',
+      cssClass: 'menu-exit',
+      active: false,
+      disabled: false,
+      separator: false,
+      listItem: { id: 10, type: 'action' },
+      listItemIndex: 4,
+      command: (_item?: LibMenuItem) => {},
+    },
+  ];
+
+  ICONS: Iicon = ICONS;
+  temps: string[] = Array(10)
+    .fill('')
+    .map(() => Math.floor(Math.random() * 1000).toString());
+
+  constructor(
+    private customMenuList: CustomDropdownMenuService,
+    private location: Location,
+    private router: Router,
+
+    private activeRoute: ActivatedRoute,
+  ) {}
+
+  ngOnInit(): void {
+    this.activeRoute.params.subscribe(() => {
+      this.initializeTemps();
+    });
+    this.libMenuItem = this.customMenuList.getMenuList('itineraries');
+  }
+
+  initializeTemps(): void {
+    this.temps = Array(10)
+      .fill('')
+      .map(() => Math.floor(Math.random() * 1000).toString());
+  }
+
+  //NAVIGATIONS
+  back = (): void => this.location.back();
+
+  navToComment(): void {
+    this.router.navigate([
+      ItinerariesRoutesEnum.ITINERARY,
+      ItinerariesRoutesEnum.COMMENTS_ROUTE,
+    ]);
+  }
+
+  navigateToDetail(_item: LibMenuItem) {
+    this.router.navigate([
+      `itineraries/${ItinerariesRoutesEnum.ITINERARY_DETAIL}`,
+    ]);
+  }
+
+  navToBranchItinerary = (id: string): void => {
+    this.router.navigate([
+      ItinerariesRoutesEnum.ITINERARY,
+      ItinerariesRoutesEnum.BRANCHED_ITINERARIES,
+      id,
+    ]);
+  };
+
+  navToUsers = (): void => {
+    this.router.navigate([UserRoutes.profile]);
+  };
+
+  navToDetail = (): void => {
+    this.router.navigate([
+      ItinerariesRoutesEnum.ITINERARY,
+      ItinerariesRoutesEnum.ITINERARY_DETAIL,
+    ]);
+  };
+
+  navToMoreDetail = (): void => {
+    this.router.navigate([
+      ItinerariesRoutesEnum.ITINERARY,
+      ItinerariesRoutesEnum.ITINERARY_DETAIL,
+      ItinerariesRoutesEnum.ITINERARY_MORE_DETAIL,
+    ]);
+  };
+
+  navToStories(): void {
+    this.router.navigate([
+      ItinerariesRoutesEnum.ITINERARY,
+      ItinerariesRoutesEnum.STORIES,
+    ]);
+  }
+
+  navToNotifications(): void {
+    this.router.navigate([
+     ItinerariesRoutesEnum.ITINERARY,
+      ItinerariesRoutesEnum.ITINERARY_WATCHING_USERS,
+    ]);
+  }
+   navToWatching(): void {
+    this.router.navigate([
+      ItinerariesRoutesEnum.ITINERARY,
+      ItinerariesRoutesEnum.ITINERARY_WATCHING_USERS,
+    ]);
+  }
+}

package/src/lib/itinerary-app/modules/itineraries/pages/builder/builder.component.html

@@ -0,0 +1,50 @@
+<!-- @if (draftItinerary.length === 0) { -->
+<div class="flex items-center justify-center flex-col mt-4">
+  <div class="w-full font-[Calistoga]"><lib-icon-button (click)="handleAddButton()" buttonText="Create new Itinerary"></lib-icon-button></div>
+  <div class="w-full flex justify-between text-[11.5px] mt-[18.5px] mb-[18.5px]">
+      <div>{{ "ITINERARY.MY_CREATIONS" | translate }}</div>
+      <a (click)="navigateArchives()" class="flex gap-[4px] archives-link cursor-pointer"><img [src]="ICONS['archives']" alt="map" loading="lazy" /> {{"MAIN_ARCHIVES.ARCHIVES" | translate }}</a>
+  </div>
+  <ng-container *ngIf="!loading && ((libMenuItems?.length ?? 0) > 0)">
+      <div class="pb-10 w-full">
+        <div
+          class="grid-columns sm:mt-3 md:mt-10 grid grid-cols-1 md:grid-cols-3 sm:gap-y-5 md:gap-y-10 gap-x-10"
+        >
+          <ng-container *ngFor="let item of libMenuItems; let i = index">
+            <app-cutom-card
+              [libMenuItem]="libMenuItem"
+              [cardData]="item"
+              [isDraft]="false"
+              [itineraryStarted]="true"
+              [displayPublishStatus]="true"
+              (menuClicked)="menuClicked($event)"
+            ></app-cutom-card>
+          </ng-container>
+        </div>
+      </div>
+  </ng-container>
+  <ng-container *ngIf="!loading && libMenuItems?.length === 0">
+    <img [src]="ICONS['map']" alt="map" loading="lazy" />
+    <h3
+      class="mt-2 font-Calistoga font-normal text-[23px] leading-[160%] tracking-[0px]"
+    >
+      {{ "ITINERARY.ITENARY_NOT_FOUND" | translate }}
+    </h3>
+    <p class="mt-2 mb-2">{{ "ITINERARY.CREATE_ITENARY_MESSAGE" | translate }}</p>
+  </ng-container>
+ 
+  <div *ngIf="openActionMenu" class="fixed inset-0 bg-black/50 z-40 flex flex-col justify-end">
+    <div class="pl-4 pr-4 mb-2">
+      <ng-container *ngFor="let singleActionItem of createActionMenuItems;">
+        <lib-action-card
+          (actionCardClicked)="actionCardClicked()"
+          [actionName]="singleActionItem.actionItem"
+          [icon]="singleActionItem.icon"
+          [title]="singleActionItem.title"
+          [description]="singleActionItem.description"
+        ></lib-action-card>
+      </ng-container>
+      <lib-primary-btn (click)="hideActionMenu()">{{"ITINERARY.BACK" | translate }}</lib-primary-btn>
+    </div>
+  </div>
+</div>

package/src/lib/itinerary-app/modules/itineraries/pages/builder/builder.component.scss

@@ -0,0 +1,7 @@
+a.archives-link {
+    color: var(--cyrano-pink-shade-1)
+}
+
+.lib-bottom-modal-actions {
+    background-color: transparent;
+}

package/src/lib/itinerary-app/modules/itineraries/pages/builder/builder.component.ts

@@ -0,0 +1,104 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core'; 
+import { Router } from '@angular/router';
+import { ItinerariesRoutesEnum } from '../../../../_enums/ItenariesRoutes.enum';
+import { Iicon } from '../../../../_interface/icon';
+import { Itinerary } from '../../../../_models/Itinerary'; 
+import { ICONS } from '../../../../_constants/constants';
+import { ItineraryService } from '../../../../_services/itinerary.service';
+import { CustomDropdownMenuService } from '../../../../_services/custom-dropdown-menu.service';
+import { LibMenuItem } from '@naniteninja/ionic-lib';
+import { SharePopupDataService } from '../../../../_services/share-popup-data';
+import { TranslateService } from '@ngx-translate/core';
+
+@Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  selector: 'app-builder',
+  templateUrl: './builder.component.html',
+  styleUrl: './builder.component.scss',
+})
+export class BuilderComponent implements OnInit {
+  ICONS: Iicon = ICONS;
+  draftItinerary: Itinerary[] = [];
+  libMenuItems: Itinerary[] = [];
+  libMenuItem: Array<LibMenuItem> = [];
+  loading = true;
+  openActionMenu = false;
+  createActionMenuItems: Array<{
+    actionItem: string;
+    icon: string;
+    title: string;
+    description: string;
+  }> = [];
+  currentItinerary: Itinerary | undefined = undefined;
+  
+  //LIFE CYCLES
+  constructor(
+    private router: Router,
+    private itineraryService: ItineraryService,
+    private cd: ChangeDetectorRef,
+    public customMenuList: CustomDropdownMenuService,
+    private translate: TranslateService,
+    public sharePopupDataService: SharePopupDataService
+  ) {
+  }
+
+  initializeActions(translate: TranslateService) {
+    this.createActionMenuItems = [{
+      actionItem: 'create_custom',
+      icon: "assets/icons/custom_itinerary.svg",
+      title: translate.instant("ITINERARY.CREATE_CUSTOM_ITINERARY"),
+      description: translate.instant("ITINERARY.CREATE_CUSTOM_ITINERARY_DESCRIPTION")
+    }, {
+      actionItem: 'create_quick',
+      icon: "assets/icons/quick_itinerary.svg",
+      title: translate.instant("ITINERARY.CREATE_QUICK_ITINERARY"),
+      description: translate.instant("ITINERARY.CREATE_QUICK_ITINERARY_DESCRIPTION")
+    }, {
+      actionItem: 'create_lucky',
+      icon: "assets/icons/lucky_itinerary.svg",
+      title: translate.instant("ITINERARY.FEELING_LUCKY"),
+      description: translate.instant("ITINERARY.FEELING_LUCKY_DESCRIPTION")
+    }];
+  }
+
+  navigateArchives(): void {
+    this.router.navigate(['/archives/archives']);
+  }
+
+  actionCardClicked(): void {
+    this.router.navigate([ItinerariesRoutesEnum.ITINERARY, ItinerariesRoutesEnum.CREATE_ITINERARY]);
+  }
+
+  ngOnInit(): void {
+    this.itineraryService.getItinerariesByUserId().subscribe((data: Itinerary[]) => {
+      this.libMenuItems = data;
+      this.libMenuItem = this.customMenuList.getMenuList('builder');
+      this.loading = false;
+      this.initializeActions(this.translate);
+      this.cd.detectChanges();
+    });
+  }
+
+  handleAddButton() {
+    // this.router.navigate([ItinerariesRoutesEnum.ITINERARY, ItinerariesRoutesEnum.CREATE_ITINERARY]);
+    this.openActionMenu = true;
+  }
+
+  hideActionMenu() {
+    this.openActionMenu = false;
+  }
+  //UI LOGIC
+
+  //NAVIGATIONS
+  navToCreateItinerary(): void {
+    this.router.navigate([
+      ItinerariesRoutesEnum.ITINERARY,
+      ItinerariesRoutesEnum.CREATE_ITINERARY,
+    ]);
+  }
+
+  menuClicked(item: Itinerary) {
+    this.currentItinerary = item;
+    this.sharePopupDataService.setPopupData(item);
+  }
+}

package/src/lib/itinerary-app/modules/itineraries/pages/builder/components/create-itinerary/create-itinerary.component.html

@@ -0,0 +1,15 @@
+<lib-secondary-btn (click)="openModal()" class="builder-add-btn p-5 mt-6">
+  <span>
+    <img [ngSrc]="ICONS['plus']" height="13" width="16" />
+  </span>
+  Create New Itinerary
+</lib-secondary-btn>
+<lib-bottom-modal
+  #testModal
+  class="custom-bottom-modal"
+  (isOpenChange)="enableBack = !enableBack"
+  [isOpen]="modalService.bottomToggleModal"
+  [customClass]="'custom-modal'"
+>
+  <app-create-itinerary-modal></app-create-itinerary-modal>
+</lib-bottom-modal>

package/src/lib/itinerary-app/modules/itineraries/pages/builder/components/create-itinerary/create-itinerary.component.scss

@@ -0,0 +1,3 @@
+.builder-add-btn span {
+  margin-right: 10px;
+}

package/src/lib/itinerary-app/modules/itineraries/pages/builder/components/create-itinerary/create-itinerary.component.spec.ts

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

package/src/lib/itinerary-app/modules/itineraries/pages/builder/components/create-itinerary/create-itinerary.component.ts

@@ -0,0 +1,89 @@
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  OnInit,
+  ViewChild,
+} from '@angular/core'; 
+import { ModalService } from '../../../../../../_services/modal.service';
+import { Iicon } from '../../../../../../_interface/icon';
+import { ShadowRootHandlerService } from '../../../../../../_services/shadow-root-handler.service';
+import { ICONS } from '../../../../../../_constants/constants';
+
+@Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  selector: 'app-create-itinerary',
+  templateUrl: './create-itinerary.component.html',
+  styleUrl: './create-itinerary.component.scss',
+})
+export class CreateItineraryComponent implements OnInit, AfterViewInit {
+  @ViewChild('testModal', { static: false })
+  testModal: CreateItineraryComponent | undefined;
+  enableBack: boolean = true;
+  cssClass = ['create-itinerary-modal'];
+  ICONS: Iicon = ICONS;
+
+  constructor(
+    public modalService: ModalService,
+    private el: ElementRef,
+    private shadowrootHandler: ShadowRootHandlerService,
+  ) {}
+
+  ngAfterViewInit(): void {
+    this.initShadowrootHandler();
+  }
+
+  initShadowrootHandler(): void {
+    const targetNode = this.el.nativeElement;
+    this.shadowrootHandler.accessShadowRoot(
+      targetNode,
+      'lib-bottom-modal',
+      () => {
+        this.applyStylesToDialog();
+      },
+    );
+  }
+
+  applyStylesToDialog(): void {
+    const targetNode = this.el.nativeElement.querySelector(
+      'lib-bottom-modal',
+    ) as HTMLElement;
+
+    if (targetNode) {
+      const classNameElements =
+        targetNode.getElementsByClassName('lib-bottom-modal');
+
+      if (classNameElements.length > 0) {
+        const dialogDiv = classNameElements[0].shadowRoot?.querySelector(
+          'div[role="dialog"]',
+        ) as HTMLElement;
+
+        if (dialogDiv) {
+          const modalHandle = dialogDiv.getElementsByClassName(
+            'modal-handle',
+          )[0] as HTMLElement;
+          if (modalHandle) {
+            modalHandle.style.display = 'none';
+          } else {
+          }
+          // Apply the desired styles
+          dialogDiv.style.backgroundColor = 'transparent'; // Example modification
+          dialogDiv.style.boxShadow = 'none';
+          //remove the dialog uppar bar
+        } else {
+        }
+      } else {
+      }
+    } else {
+    }
+  }
+
+  ngOnInit(): void {
+    this.modalService.bottomToggleModal = false;
+  }
+
+  openModal(): void {
+    this.modalService.bottomToggleModal = !this.modalService.bottomToggleModal;
+  }
+}

package/src/lib/itinerary-app/modules/itineraries/pages/builder/components/create-itinerary-modal/create-itinerary-modal.component.html

@@ -0,0 +1,21 @@
+<div class="bottom-modal-items">
+  <app-create-itinerary-modal-item
+    *ngFor="let item of contentList"
+    [icon]="item.icon"
+    [title]="item.title"
+    [description]="item.description"
+    [shortTitle]="item.shortTitle"
+    (clickEvent)="modalClick(item.id)"
+    class="craete-itinerary-modal"
+  >
+  </app-create-itinerary-modal-item>
+</div>
+
+<div class="pl-4 pr-4">
+  <lib-primary-btn
+    class="btn-back mt-5"
+    [hoverOutline]="true"
+    (click)="backButton()"
+    >{{ "ITINERARY.BACK" | translate }}</lib-primary-btn
+  >
+</div>

package/src/lib/itinerary-app/modules/itineraries/pages/builder/components/create-itinerary-modal/create-itinerary-modal.component.spec.ts

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

package/src/lib/itinerary-app/modules/itineraries/pages/builder/components/create-itinerary-modal/create-itinerary-modal.component.ts

@@ -0,0 +1,53 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  OnInit,
+  ViewEncapsulation,
+} from '@angular/core'; 
+import { ModalService } from '../../../../../../_services/modal.service';
+import { Iicon } from '../../../../../../_interface/icon';
+import { ICONS } from '../../../../../../_constants/constants';
+
+@Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  selector: 'app-create-itinerary-modal',
+  templateUrl: './create-itinerary-modal.component.html',
+  styleUrl: './create-itinerary-modal.component.scss',
+  encapsulation: ViewEncapsulation.Emulated,
+})
+export class CreateItineraryModalComponent implements OnInit {
+  ICONS: Iicon = ICONS;
+  constructor(public modalService: ModalService) {}
+  ngOnInit(): void {
+    this.modalService.bottomToggleModal = false;
+  }
+  contentList = [
+    {
+      id: 1,
+      title: 'ITINERARY.CREATE_CUSTOM_ITINERARY',
+      description: 'ITINERARY.CREATE_CUSTOM_ITINERARY_DESCRIPTION',
+      icon: ICONS['createLocation'],
+      shortTitle: false,
+    },
+    {
+      id: 2,
+      title: 'ITINERARY.CREATE_QUICK_ITINERARY',
+      description: 'ITINERARY.CREATE_QUICK_ITINERARY_DESCRIPTION',
+      icon: ICONS['robot'],
+      shortTitle: false,
+    },
+    {
+      id: 3,
+      title: 'ITINERARY.FEELING_LUCKY',
+      description: 'ITINERARY.FEELING_LUCKY_DESCRIPTION',
+      icon: ICONS['starBuilder'],
+      shortTitle: true,
+    },
+  ];
+
+  backButton(): void {
+    this.modalService.bottomToggleModal = !this.modalService.bottomToggleModal;
+  }
+
+  modalClick(_itemId: number): void {}
+}

package/src/lib/itinerary-app/modules/itineraries/pages/builder/components/create-itinerary-modal-item/create-itinerary-modal-item.component.html

@@ -0,0 +1,24 @@
+<div class="main-content" (click)="clickEventEmitter()">
+  <div class="main-content-sub">
+    <div class="content">
+      <span class="content-icon">
+        <img [ngSrc]="icon" height="60" width="61" />
+      </span>
+      <div class="content-text">
+        <span class="font-bold">
+          <div *ngIf="shortTitle">
+            <span class="heading-sub-part">{{ titleList[0] | translate }}</span>
+          </div>
+          <div *ngIf="!shortTitle">
+            {{ titleList[0] | translate }}
+            <span class="heading-sub-part">{{ titleList[1] | translate }}</span>
+          </div>
+        </span>
+        <p>{{ description | translate }}</p>
+      </div>
+    </div>
+    <span class="content-icon-last">
+      <img [ngSrc]="ICONS['moveForward']" height="50" width="51" />
+    </span>
+  </div>
+</div>

package/src/lib/itinerary-app/modules/itineraries/pages/builder/components/create-itinerary-modal-item/create-itinerary-modal-item.component.scss

@@ -0,0 +1,46 @@
+@use "../../../../../../_styles/colors" as *;
+
+.main-content {
+  background: $background-color-1;
+  padding: 20px 0px 20px 0px;
+  border-radius: 10px;
+  box-shadow: 9.03px 8.2px 22.15px 2.05px $box-shadow-6;
+  margin-top: 10px;
+  overflow: hidden;
+  position: relative;
+}
+
+.main-content-sub,
+.content {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: row;
+  position: relative;
+  left: 10px;
+}
+
+.content-icon-last {
+  margin-right: 5px;
+}
+
+.content-text {
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  flex-direction: column;
+  font-size: 15px;
+  margin-left: 10px;
+}
+
+.heading-sub-part {
+  color: var(--secondary-color);
+}
+
+.content p {
+  color: $text-color-3;
+  font-size: 9px;
+  margin-top: 5px;
+  width: 200px;
+  text-align: start;
+}

package/src/lib/itinerary-app/modules/itineraries/pages/builder/components/create-itinerary-modal-item/create-itinerary-modal-item.component.spec.ts

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