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

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

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

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

@@ -0,0 +1,43 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { ModalService } from '../../../../_services/modal.service';
+import { MatchingClients } from '../../../../_models/matching-clients';
+import { ModalSendClientService } from '../../../../_services/modal.sendclient.service';
+import { Itinerary } from '../../../../_models/Itinerary';
+import { ItineraryService } from '../../../../_services/itinerary.service';
+
+@Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  selector: 'lib-send-to-client',
+  templateUrl: './send-to-client.component.html',
+  styleUrl: './send-to-client.component.css'
+})
+export class SendToClientComponent {
+    clientsSelection: Array<MatchingClients> = [];
+
+    @Input() itinerary!: Itinerary;
+
+    constructor(
+      public modalService: ModalService,
+      public sendClientModalService: ModalSendClientService,
+      public itineraryApiService: ItineraryService
+    ) {}
+  
+    closeModal(): void {
+      this.modalService.toggleModal = !this.modalService.toggleModal;
+    }
+
+    closeSendClientModal(): void {
+      this.sendClientModalService.toggleModal = !this.sendClientModalService.toggleModal;
+    }
+
+    onClientSelectionChanged(clientsSelection: Array<MatchingClients>) {
+      this.clientsSelection = clientsSelection;
+    }
+
+    submitSendClient(): void {
+      this.itineraryApiService.sendItenaryToClients(this.itinerary, this.clientsSelection);
+      this.closeSendClientModal();
+    }
+  
+    onOk(): void {}
+}

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

@@ -0,0 +1,65 @@
+<div class="share-itinerary min-w-[300px] ">
+  <h2 class="title">Share Itinerary</h2>
+
+  <!-- Add People -->
+  <lib-search-bar class="search-field" [placeholderText]="'SEARCH_PEOPLE_GROUP' | translate"
+       [searchIcon]="ICONS['dashboardSearch']">
+  </lib-search-bar>
+
+  <!-- People with Access -->
+  <div class="section font-[Gilroy] font-bold text-[13.px] mt-4 mb-8">
+    <h3 class="mb-1 access-title">People with Access</h3>
+    <div class="person flex gap-2">
+      <img [src]="peopleWithAccess[0].avatar" alt="avatar" class="avatar object-cover" />
+      <div class="info">
+        <div class="person-name">{{ peopleWithAccess[0].name }}</div>
+        <div class="person-email">{{ peopleWithAccess[0].email }}</div>
+      </div>
+      <div class="role-text text-[#8B8B8B]">{{ peopleWithAccess[0].role }}</div>
+    </div>
+  </div>
+
+  <!-- General Access -->
+  <div class="section">
+    <h3 class="general-access-title  font-[Gilroy] mb-1">General Access</h3>
+    <div class="access-row">
+      <div class="icon mt-[7px]">
+        <img src="assets/icons/restricted_icon.png" class="h-[30px] w-[30px] object-cover p-[6px] rounded-full border-[0.68px] border-white"/>
+      </div>
+      <div [formGroup]="accessForm">
+        <div class="relative inline-block text-white">
+          <select formControlName="access" class="access-select appearance-none bg-transparent focus:outline-none">
+            <option value="Restricted">Restricted</option>
+            <option value="Public">Public</option>
+          </select>
+
+          <!-- Custom arrow icon -->
+          <div class="pointer-events-none absolute inset-y-0 right-1 flex items-center pl-6">
+            <svg width="7" height="4" viewBox="0 0 7 4" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M3.35156 3.61768L6.40146 0.567782H0.301668L3.35156 3.61768Z" fill="white"/>
+            </svg>
+          </div>
+</div>
+
+        <div class="permission-description">
+          <ng-container *ngIf="accessType === 'Restricted'">
+            {{ "ITINERARY.RESTRICTED_ACCESS_MESSAGE" | translate }}
+          </ng-container>
+          <ng-container  *ngIf="accessType === 'Public'">
+            {{ "ITINERARY.PUBLIC_ACCESS_MESSAGE" | translate }}
+          </ng-container>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Actions -->
+  <div class="flex justify-center gap-10 mt-5">
+    <button class="custom-flat-button font-[Calistoga]" (click)="copyLink()">
+      {{ "COMMON.COPY_LINK" | translate }}
+    </button>
+    <button class="custom-flat-button-highlighted-font font-[Calistoga]" (click)="close()">
+      {{ "COMMON.DONE" | translate }}
+    </button>
+  </div>
+</div>

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

@@ -0,0 +1,104 @@
+.title {
+  text-align: center;
+  font-family: 'Calistoga', serif;
+  margin-bottom: 20px;
+}
+
+.info {
+  flex: 1;
+}
+
+.name {
+  font-weight: 500;
+}
+
+.email {
+  font-size: 13px;
+  color: #a0a0a0;
+}
+
+.role {
+  font-size: 14px;
+  color: #c0c0c0;
+}
+
+.access-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.icon {
+  font-size: 20px;
+}
+
+select {
+  background: transparent;
+  color: white;
+  border: 1px solid #555;
+  border-radius: 6px;
+  padding: 4px 8px;
+}
+
+.desc {
+  font-size: 13px;
+  color: #a0a0a0;
+}
+
+.actions {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 20px;
+}
+
+.copy-btn {
+  color: #f9f4d4;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  font-weight: 600;
+}
+
+.done-btn {
+  color: #f85f75;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  font-weight: 600;
+}
+
+
+.access-title {
+  font-size: var(--font-size-medium);
+}
+
+.person-name, .person-email {
+  font-size: var(--font-size-small);
+}
+
+.person-email {
+  font-weight: normal;
+}
+
+.role-text {
+  font-size: var(--font-size-small);
+  font-weight: normal;
+}
+
+.general-access-title {
+  font-size: var(--font-size-medium);
+  font-weight: 700;
+}
+
+.access-select {
+  border: none !important;
+  padding-right: 12px;
+  padding-left: 0px;
+  font-family: var(--font-gilroy-bold);
+  font-size: var(--font-size-small);
+}
+
+.permission-description {
+  font-size: var(--font-size-small);
+  color: white;
+}

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

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

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

@@ -0,0 +1,81 @@
+import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+import { ICONS } from '../../../../_constants/constants';
+import { Iicon } from '../../../../_interface/icon';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { SharePopupDataService } from '../../../../_services/share-popup-data';
+import { Itinerary } from '../../../../_models/Itinerary';
+import { Router } from '@angular/router';
+import { PlatformLocation } from '@angular/common';
+import { ItinerariesRoutesEnum } from '../../../../_enums/ItenariesRoutes.enum';
+
+
+@Component({
+  selector: 'lib-share-popup',
+  templateUrl: './share-popup.component.html',
+  styleUrl: './share-popup.component.scss'
+})
+export class SharePopupComponent implements OnInit {
+  @Output() closeModal: EventEmitter<void> = new EventEmitter<void>();
+  ICONS: Iicon = ICONS;
+  accessForm!: FormGroup;
+  itinerary: Itinerary | null = null;
+
+  accessType = 'Restricted';
+  peopleWithAccess = [
+    {
+      name: 'M Ali (you)',
+      email: 'mali@gmail.com',
+      role: 'Owner',
+      avatar: 'assets/images/image7.jpg' // Example avatar URL
+    }
+  ];
+
+  constructor(
+    private fb: FormBuilder,
+    private sharePopupDataService: SharePopupDataService,
+    private router: Router,
+    private platformLocation: PlatformLocation
+  ) {}
+
+  copyButtonClicked(itineraryId: string) {
+  const baseUrl = `${this.platformLocation.protocol}//${this.platformLocation.hostname}` +
+                  (this.platformLocation.port ? `:${this.platformLocation.port}` : '');
+
+  const urlTree = this.router.createUrlTree([
+      ItinerariesRoutesEnum.ITINERARY,
+      ItinerariesRoutesEnum.ITINERARY_DETAIL,
+      itineraryId
+    ]);
+    const relativeUrl = this.router.serializeUrl(urlTree);
+    const fullUrl = baseUrl + relativeUrl;
+    navigator.clipboard.writeText(fullUrl);
+  }
+
+
+  copyLink() {
+    if(this.itinerary) {
+      this.copyButtonClicked(this.itinerary.id);
+    }
+  }
+
+  close() {
+    this.closeModal.emit();
+  }
+
+  ngOnInit() {
+    this.accessForm = this.fb.group({
+      access: ['Restricted'] // default value
+    });
+    this.accessForm.get('access')?.valueChanges.subscribe(value => {
+      this.performActionBasedOnAccess(value);
+    });
+    this.sharePopupDataService.popupData$.subscribe((data) => {
+      this.itinerary = data;
+    });
+  }
+
+  performActionBasedOnAccess(value: string) {
+    this.accessType = value;
+  }
+
+}

package/src/lib/itinerary-app/modules/itineraries/itineraries-routing.module.ts

@@ -0,0 +1,283 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { ItinerariesComponent } from './itineraries.component';
+import { AdvancedFiltersComponent } from './pages/advanced-filters/advanced-filters.component';
+import { BranchedItinerariesComponent } from './pages/branched-itineraries/branched-itineraries.component';
+import { BuilderComponent } from './pages/builder/builder.component';
+import { CreateItineraryDestinationComponent } from './pages/builder/pages/create-itinerary-destination/create-itinerary-destination.component';
+import { CreateItineraryMemberDetailsComponent } from './pages/builder/pages/create-itinerary-member-details/create-itinerary-member-details.component';
+import { CreateItineraryStartLocationComponent } from './pages/builder/pages/create-itinerary-start-location/create-itinerary-start-location.component';
+import { CreateItineraryUserSearchComponent } from './pages/builder/pages/create-itinerary-user-search/create-itinerary-user-search.component';
+import { CreateItineraryComponent } from './pages/builder/pages/create-itinerary/create-itinerary.component';
+import { CreatedItineraryDetailComponent } from './pages/builder/pages/created-itinerary-preview/created-itinerary-detail/created-itinerary-detail.component';
+import { CreatedItineraryMapComponent } from './pages/builder/pages/created-itinerary-preview/created-itinerary-map/created-itinerary-map.component';
+import { CreatedItineraryPreviewComponent } from './pages/builder/pages/created-itinerary-preview/created-itinerary-preview.component';
+import { CreatedItineraryComponent } from './pages/builder/pages/created-itinerary/created-itinerary.component';
+import { ItineraryAddPlaceComponent } from './pages/builder/pages/itinerary-add-place/itinerary-add-place.component';
+import { ItineraryPlaceBasicInfoComponent } from './pages/builder/pages/itinerary-add-place/itinerary-place-basic-info/itinerary-place-basic-info.component';
+import { ItineraryPlaceDateTimeComponent } from './pages/builder/pages/itinerary-add-place/itinerary-place-date-time/itinerary-place-date-time.component';
+import { ItineraryPlaceMembersComponent } from './pages/builder/pages/itinerary-add-place/itinerary-place-members/itinerary-place-members.component';
+import { LocationPickerComponent } from './pages/builder/pages/location-picker/location-picker.component';
+import { SelectItineraryEventComponent } from './pages/builder/pages/select-itinerary-event/select-itinerary-event.component';
+import { SuggestedEventsLocationComponent } from './pages/builder/pages/suggested-events-location/suggested-events-location.component';
+import { SuggestedEventsRouteRadiusComponent } from './pages/builder/pages/suggested-events-route-radius/suggested-events-route-radius.component';
+import { SuggestedEventsRouteTypeComponent } from './pages/builder/pages/suggested-events-route-type/suggested-events-route-type.component';
+import { CommentRepliesComponent } from './pages/comment-replies/comment-replies.component';
+import { CommentSearchComponent } from './pages/comments/comment-search/comment-search.component';
+import { CommentsPageComponent } from './pages/comments/comments-page.component';
+import { HandleUpdateCommentRequestComponent } from './pages/comments/handle-update-comment-request/handle-update-comment-request.component';
+import { ExploreComponent } from './pages/explore/explore.component';
+import { FavoritesComponent } from './pages/favorites/favorites.component';
+import { ItineraryAuthorHistoryComponent } from './pages/itinerary-author-history/itinerary-author-history.component';
+import { DetailsComponent } from './pages/itinerary-detail/components/details/details.component';
+import { MapComponent } from './pages/itinerary-detail/components/map/map.component';
+import { SummaryComponent } from './pages/itinerary-detail/components/summary/summary.component';
+import { ItineraryDetailComponent } from './pages/itinerary-detail/itinerary-detail.component';
+import { FriendRequestsComponent } from './pages/itinerary-friends/friend-requests/friend-requests.component';
+import { ItineraryFriendsComponent } from './pages/itinerary-friends/itinerary-friends.component';
+import { ListFriendUsersComponent } from './pages/itinerary-friends/list-friend-users/list-friend-users.component';
+import { SendFriendRequestComponent } from './pages/itinerary-friends/send-friend-request/send-friend-request.component';
+import { AllPeopleComponent } from './pages/itinerary-members/all-people/all-people.component';
+import { ItineraryMembersComponent } from './pages/itinerary-members/itinerary-members.component';
+import { ItinerarySentInvitesComponent } from './pages/itinerary-members/itinerary-sent-invites/itinerary-sent-invites.component';
+import { SendInviteComponent } from './pages/itinerary-members/send-invite/send-invite.component';
+import { ItineraryUpvoteUsersComponent } from './pages/itinerary-upvote-users/itinerary-upvote-users.component';
+import { ItineraryUsersComponent } from './pages/itinerary-users/itinerary-users.component';
+import { NotificationsComponent } from './pages/notifications/notifications.component';
+import { StoryComponent } from './pages/stories/story.component';
+import { ItinerariesRoutesEnum } from '../../_enums/ItenariesRoutes.enum';
+import { ItineraryWatchingUsersComponent } from './pages/itinerary-watching-users/itinerary-watching-users.component';
+import { CreateItineraryDrawModeComponent } from './pages/builder/pages/create-itinerary-draw-mode/create-itinerary-draw-mode.component';
+import { CreateItineraryDrawPreviewComponent } from './pages/builder/pages/create-itinerary-draw-preview/create-itinerary-draw-preview.component';
+import { CreateItineraryNoVisualFilterComponent } from './pages/builder/pages/create-itinerary-no-visual-filter/create-itinerary-no-visual-filter.component';
+import { CreateItineraryNoVisualPreviewComponent } from './pages/builder/pages/create-itinerary-no-visual-preview/create-itinerary-no-visual-preview.component';
+const routes: Routes = [
+  {
+    path: '',
+    component: ItinerariesComponent,
+    children: [
+      {
+        path: '',
+        redirectTo: ItinerariesRoutesEnum.EXPLORE,
+        pathMatch: 'full',
+      },
+      { path: ItinerariesRoutesEnum.EXPLORE, component: ExploreComponent },
+      { path: ItinerariesRoutesEnum.BUILDER, component: BuilderComponent },
+      { path: ItinerariesRoutesEnum.FAVORITES, component: FavoritesComponent },
+    ],
+  },
+  {
+    path: ItinerariesRoutesEnum.CREATE_ITINERARY,
+    component: CreateItineraryComponent,
+  },
+  {
+    path: `${ItinerariesRoutesEnum.LOCATION_PICKER}/:id`,
+    component: LocationPickerComponent,
+  },
+  {
+    path: `${ItinerariesRoutesEnum.SUGGESTED_EVENTS_LOCATION}/:id`,
+    component: SuggestedEventsLocationComponent,
+  },
+  {
+    path: `${ItinerariesRoutesEnum.SUGGESTED_EVENTS_ROUTE_TYPE}/:id`,
+    component: SuggestedEventsRouteTypeComponent,
+  },
+  {
+    path: `${ItinerariesRoutesEnum.SUGGESTED_EVENTS_ROUTE_RADIUS}/:id`,
+    component: SuggestedEventsRouteRadiusComponent,
+  },
+  {
+    path: `${ItinerariesRoutesEnum.CREATE_ITINERARY_ORIGIN}/:id`,
+    component: CreateItineraryStartLocationComponent,
+  },
+  {
+    path: `${ItinerariesRoutesEnum.CREATE_ITINERARY_DRAW_MODE}/${ItinerariesRoutesEnum.CREATE_ITINERARY_DRAW_MODE_CREATE}/:id`,
+    component: CreateItineraryDrawModeComponent,
+  },
+  {
+    path: `${ItinerariesRoutesEnum.CREATE_ITINERARY_DRAW_MODE}/${ItinerariesRoutesEnum.CREATE_ITINERARY_DRAW_MODE_PREVIEW}/:id`,
+    component: CreateItineraryDrawPreviewComponent,
+  },
+  {
+    path: `${ItinerariesRoutesEnum.CREATE_ITINERARY_NO_VISUAL_FILTER_MODE}/${ItinerariesRoutesEnum.CREATE_ITINERARY_NO_VISUAL_FILTER_MODE_CREATE}/:id`,
+    component: CreateItineraryNoVisualFilterComponent,
+  },
+  {
+    path: `${ItinerariesRoutesEnum.CREATE_ITINERARY_NO_VISUAL_FILTER_MODE}/${ItinerariesRoutesEnum.CREATE_ITINERARY_NO_VISUAL_FILTER_MODE_PREVIEW}/:id`,
+    component: CreateItineraryNoVisualPreviewComponent,
+  },
+  {
+    path: `${ItinerariesRoutesEnum.CREATE_ITINERARY_DESTINATION}/:id`,
+    component: CreateItineraryDestinationComponent,
+  },
+  {
+    path: `${ItinerariesRoutesEnum.SELECT_ITINERARY_EVENTS}/:id`,
+    component: SelectItineraryEventComponent,
+  },
+  {
+    path: `${ItinerariesRoutesEnum.CREATE_ITINERARY_USER_SEARCH}/:id`,
+    component: CreateItineraryUserSearchComponent,
+  },
+  {
+    path: `${ItinerariesRoutesEnum.CREATE_ITINERARY_MEMBER_DETAILS}/:id`,
+    component: CreateItineraryMemberDetailsComponent,
+  },
+  {
+    path: `${ItinerariesRoutesEnum.SELECT_ITINERARY_ADD_PLACE}/:id`,
+    component: ItineraryAddPlaceComponent,
+    children: [
+      {
+        path: '',
+        redirectTo: ItinerariesRoutesEnum.SELECT_ITINERARY_PLACE_BASIC_INFO,
+        pathMatch: 'full',
+      },
+      {
+        path: ItinerariesRoutesEnum.SELECT_ITINERARY_PLACE_BASIC_INFO,
+        component: ItineraryPlaceBasicInfoComponent,
+      },
+      {
+        path: ItinerariesRoutesEnum.SELECT_ITINERARY_PLACE_DATETIME,
+        component: ItineraryPlaceDateTimeComponent,
+      },
+      {
+        path: ItinerariesRoutesEnum.SELECT_ITINERARY_PLACE_MEMBERS,
+        component: ItineraryPlaceMembersComponent,
+      },
+    ],
+  },
+  {
+    path: `${ItinerariesRoutesEnum.CREATED_ITINERARY}/:id`,
+    component: CreatedItineraryComponent,
+  },
+  {
+    path: `${ItinerariesRoutesEnum.CREATED_ITINERARY_PREVIEW}/:id`,
+    component: CreatedItineraryPreviewComponent,
+    children: [
+      {
+        path: '',
+        redirectTo: ItinerariesRoutesEnum.CREATED_ITINERARY_DETAIL,
+        pathMatch: 'full',
+      },
+      {
+        path: ItinerariesRoutesEnum.CREATED_ITINERARY_DETAIL,
+        component: CreatedItineraryDetailComponent,
+      },
+      {
+        path: ItinerariesRoutesEnum.CREATED_ITINERARY_MAP,
+        component: CreatedItineraryMapComponent,
+      },
+    ],
+  },
+  { path: ItinerariesRoutesEnum.STORIES, component: StoryComponent },
+  {
+    path: ItinerariesRoutesEnum.COMMENTS_ROUTE,
+    component: CommentsPageComponent,
+  },
+  {
+    path: `${ItinerariesRoutesEnum.COMMENTS_ROUTE}/:id`,
+    component: CommentsPageComponent,
+  },
+  {
+    path: ItinerariesRoutesEnum.NOTIFICATIONS,
+    component: NotificationsComponent,
+  },
+   {
+    path: ItinerariesRoutesEnum.ITINERARY_WATCHING_USERS,
+    component: ItineraryWatchingUsersComponent,
+  },
+  {
+    path: ItinerariesRoutesEnum.COMMENT_UPDATE_REQUEST,
+    component: HandleUpdateCommentRequestComponent,
+  },
+  {
+    path: ItinerariesRoutesEnum.ITINERARY_MEMBERS,
+    component: ItineraryMembersComponent,
+  },
+  {
+    path: ItinerariesRoutesEnum.ALL_INVITES_SENT,
+    component: ItinerarySentInvitesComponent,
+  },
+  { path: ItinerariesRoutesEnum.SEND_INVITE, component: SendInviteComponent },
+  { path: ItinerariesRoutesEnum.All_PEOPLE, component: AllPeopleComponent },
+  {
+    path: ItinerariesRoutesEnum.BRANCHED_ITINERARIES,
+    component: BranchedItinerariesComponent,
+  },
+  {
+    path: `${ItinerariesRoutesEnum.BRANCHED_ITINERARIES}/:id`,
+    component: BranchedItinerariesComponent,
+  },
+  {
+    path: ItinerariesRoutesEnum.COMMENT_SEARCH,
+    component: CommentSearchComponent,
+  },
+  {
+    path: `${ItinerariesRoutesEnum.COMMENT_SEARCH}/${ItinerariesRoutesEnum.ADVANCED_FILTERS}`,
+    component: AdvancedFiltersComponent,
+  },
+  {
+    path: ItinerariesRoutesEnum.COMMENT_REPLIES,
+    component: CommentRepliesComponent,
+  },
+  {
+    path: `${ItinerariesRoutesEnum.ITINERARY_DETAIL}/${ItinerariesRoutesEnum.ITINERARY_USERS}`,
+    component: ItineraryUsersComponent,
+  },
+  {
+    path: `${ItinerariesRoutesEnum.ITINERARY_DETAIL}/${ItinerariesRoutesEnum.ITINERARY_UPVOTE_USERS}`,
+    component: ItineraryUpvoteUsersComponent,
+  },
+  {
+    path: `${ItinerariesRoutesEnum.ITINERARY_DETAIL}/${ItinerariesRoutesEnum.ITINERARY_WATCHING_USERS}`,
+    component: ItineraryUpvoteUsersComponent,
+  },
+  {
+    path: `${ItinerariesRoutesEnum.ITINERARY_DETAIL}/${ItinerariesRoutesEnum.ITINERARY_AUTHOR_HISTORY}`,
+    component: ItineraryAuthorHistoryComponent,
+  },
+  {
+    path: ItinerariesRoutesEnum.ITINERARY_DETAIL,
+    component: ItineraryDetailComponent,
+    children: [
+      {
+        path: '',
+        redirectTo: ItinerariesRoutesEnum.ITINERARY_SUMMARY,
+        pathMatch: 'full',
+      },
+      {
+        path: ItinerariesRoutesEnum.ITINERARY_SUMMARY,
+        component: SummaryComponent,
+      },
+      {
+        path: ItinerariesRoutesEnum.ITINERARY_MAP,
+        component: MapComponent,
+      },
+      {
+        path: ItinerariesRoutesEnum.ITINERARY_MORE_DETAIL,
+        component: DetailsComponent,
+      },
+    ],
+  },
+  {
+    path: ItinerariesRoutesEnum.ITINERARY_FRIENDS,
+    component: ItineraryFriendsComponent,
+  },
+  {
+    path: ItinerariesRoutesEnum.LIST_FRIENDS,
+    component: ListFriendUsersComponent,
+  },
+  {
+    path: ItinerariesRoutesEnum.FRIEND_REQUESTS,
+    component: FriendRequestsComponent,
+  },
+  {
+    path: ItinerariesRoutesEnum.SEND_FRIEND_REQUEST,
+    component: SendFriendRequestComponent,
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class ItinerariesRoutingModule {}

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

@@ -0,0 +1,38 @@
+<lib-app-header-desktop></lib-app-header-desktop>
+<div
+  class="pl-2 pr-4 sticky top-0 left-0 z-10 block md:hidden"
+  style="background-color: #27242c"
+>
+  <ng-template #search>
+    <img [src]="ICONS['search']" alt="right-icon" (click)="searchButtonClick()" />
+  </ng-template>
+
+  <app-header
+    (firstButton)="backButtonClick()"
+    [heading]="'SIDEBAR.ITINERARIES' | translate"
+    [headerSuffixTemplate]="search"
+  ></app-header>
+  <app-tab-bar></app-tab-bar>
+</div>
+<div class="flex">
+<lib-app-sidebar-desktop></lib-app-sidebar-desktop>
+<div
+  class="min-screen-main w-screen max-padd-container bg-transparent md:bg-[#686868] mobile-height-adjust-outer"
+>
+  <div
+    class="minScreen pl-4 pr-4 mobile-height-adjust"
+  >
+    <router-outlet></router-outlet>
+  </div>
+  <lib-popup [isOpen]="modalService.toggleModal">
+    <app-report-itinerary-modal
+      [popupTitle]="'Report Itinerary'"
+    ></app-report-itinerary-modal>
+  </lib-popup>
+  <app-footer></app-footer>
+  <lib-popup [customClass]="'custom-popup-container'" [isOpen]="shareModalService.toggleModal">
+    <lib-share-popup (closeModal)="closeUrlShareModal()" (copyClicked)="copyButtonClicked()"></lib-share-popup>
+  </lib-popup>
+</div>
+</div>
+

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

@@ -0,0 +1,17 @@
+.min-screen-main {
+  overflow-y: auto !important;
+}
+.bottom-padding {
+  min-height: 10px;
+}
+.min-screen {
+  padding-bottom: 60px;
+}
+@media (max-width: 767px) {
+  .mobile-height-adjust {
+    height: calc(100% - 102px) !important;
+  }
+  .mobile-height-adjust-outer {
+    height: calc(100% - 103px) !important;
+  }
+}