I created a package component

src/app/app-routing.module.ts

@@ -3,11 +3,14 @@ import { Routes, RouterModule } from '@angular/router';
 
 import { HomeComponent } from './pages/home/home.component';
 import { HotelsComponent } from './pages/hotels/hotels.component';
+import { PackagesComponent } from './pages/packages/packages.component';
+
 
 const routes: Routes = [
   { path: '', redirectTo: '/home', pathMatch: 'full' },
   { path: 'home', component: HomeComponent },
   { path: 'hotels', component: HotelsComponent },
+  { path: 'packages', component: PackagesComponent },
   { path: '**', component: HomeComponent }
 ];
 

src/app/app.module.ts

@@ -10,7 +10,8 @@ import { FormComponent } from './components/form/form.component';
 import { HotelComponent } from './components/hotel/hotel.component';
 import { HomeComponent } from './pages/home/home.component';
 import { HotelsComponent } from './pages/hotels/hotels.component';
-
+import { PackagesComponent } from './pages/packages/packages.component';
+import { PackageComponent } from './components/package/package.component';
 
 @NgModule({
   declarations: [
@@ -20,6 +21,8 @@ import { HotelsComponent } from './pages/hotels/hotels.component';
     HotelComponent,
     HomeComponent,
     HotelsComponent,
+    PackagesComponent,
+    PackageComponent,
   ],
   imports: [
     BrowserModule,

src/app/components/form/form.component.html

@@ -11,15 +11,15 @@ <h1 class="page-title">
         <input 
         id="input-home"
         (change)="getLocation($event)"
-        (keyup.enter)="getHotels()"
+        (keyup.enter)="getAPI()"
         class="search-input" 
         placeholder="Vai pra onde?"
         #campoInput
         >
       </section>
 
       <button class="button" 
-      (click)="getHotels()"
+      (click)="getAPI()"
       >
         Pesquisar
         <i class="fas fa-search"></i>

src/app/components/form/form.component.ts

@@ -14,6 +14,14 @@ import { HeaderComponent } from './../header/header.component';
 
 export class FormComponent implements OnInit {
 
+  packages: Array<any>
+  photo: string
+  smallDescription: string
+  tags: Array<any>
+  people: string
+  night: string
+  city: string
+  state: string
   hotels: Array<any>
   location: string
   name: string
@@ -31,8 +39,6 @@ export class FormComponent implements OnInit {
   valueSlider: string
   value: string
   typeSearchOption: string
-  packageImage: Array<any>
-  smallDescription: string
 
   constructor(private hurbService: HurbService, private router: Router, private titleService: Title){
     this.currentPage = 1;
@@ -50,7 +56,8 @@ export class FormComponent implements OnInit {
     this.typeSearchOption = event;
   }
 
-  goToHotels(hotels: Array<any>, page: number, pagination: any, quantity: string, place: string, location: string) {
+  goToHotels(hotels: Array<any>, page: number, pagination: any, quantity: string, 
+    place: string, location: string) {
     this.router.navigateByUrl('/hotels', {
       state: { 
         hotels: this.hotels, 
@@ -63,20 +70,54 @@ export class FormComponent implements OnInit {
     });
   }
 
-  getHotels(page = 1, typeSearchOption, order: string, limited: string, quantityStars: Array<any>) {
-    this.hurbService.getData(this.location, this.typeSearchOption, page, order, limited, quantityStars).subscribe((data) => {
-      this.hotels = data.results;
-      this.pagination = data.pagination;
-      this.quantity = data.meta.count;
-      this.place = data.meta.query;
-      this.price = data.results.price;
-      this.stars = data.results.stars;
-      this.minPrice = ((data.filters.priceInterval.min)/100).toFixed(0);
-      this.maxPrice = ((data.filters.priceInterval.max)/100).toFixed(0);
-      this.currentPage = page;
-
-      this.titleService.setTitle(`Hotéis e Pacotes Para ${this.location} | Agência de Viagens - Hurb`);
-      this.goToHotels(this.hotels, this.currentPage, this.pagination, this.quantity, this.place, this.location)
+  goToPackages(packages: Array<any>, page: number, pagination: any, quantity: string,
+    place: string, location: string){
+      this.router.navigateByUrl('/packages', {
+        state: {
+          packages: this.packages,
+          page: this.currentPage,
+          pagination: this.pagination,
+          quantity: this.quantity,
+          place: this.place,
+          location: this.location
+        }
+      })
+    }
+
+  getAPI(page = 1, typeSearchOption, order: string, limited: string, quantityStars: Array<any>) {
+    this.hurbService.getData(this.location, this.typeSearchOption, page, order, limited, 
+      quantityStars).subscribe((data) => {
+
+      if(this.typeSearchOption === 'offer') {
+        this.packages = data.results;
+        this.pagination = data.pagination;
+        this.quantity = data.meta.count;
+        this.place = data.meta.query;
+        this.price = data.results.price;
+        this.stars = data.results.stars;
+        this.minPrice = ((data.filters.priceInterval.min)/100).toFixed(0);
+        this.maxPrice = ((data.filters.priceInterval.max)/100).toFixed(0);
+        this.currentPage = page;
+
+        this.titleService.setTitle(`Hotéis e Pacotes Para ${this.location} | Agência de Viagens - Hurb`);
+        this.goToPackages(this.packages, this.currentPage, this.pagination, this.quantity, this.place,
+        this.location)
+      }
+      else {
+        this.hotels = data.results;
+        this.pagination = data.pagination;
+        this.quantity = data.meta.count;
+        this.place = data.meta.query;
+        this.price = data.results.price;
+        this.stars = data.results.stars;
+        this.minPrice = ((data.filters.priceInterval.min)/100).toFixed(0);
+        this.maxPrice = ((data.filters.priceInterval.max)/100).toFixed(0);
+        this.currentPage = page;
+
+        this.titleService.setTitle(`Hotéis e Pacotes Para ${this.location} | Agência de Viagens - Hurb`);
+        this.goToHotels(this.hotels, this.currentPage, this.pagination, this.quantity, this.place, 
+        this.location)
+      }
     })
 
     this.quantity;

src/app/components/hotel/hotel.component.html

@@ -6,14 +6,14 @@
       <input 
       id="input-hotel"
       (change)="getLocation($event)"
-      (keyup.enter)="getHotels()"
+      (keyup.enter)="getAPI()"
       class="search-input" 
       placeholder="Vai pra onde?"
       #campoInput
       >
     </div>
 
-    <button class="button" (click)="getHotels()">
+    <button class="button" (click)="getAPI()">
       Pesquisar
       <i class="fas fa-search"></i>
     </button>
@@ -39,6 +39,7 @@
       </select>  
     </div>
   </div>
+
   <div class="body-hotel" id="hotel-container">
     <div *ngIf="hotels" class="ordenation" id="ordenation">
       <div class="slider" id="slider">
@@ -158,25 +159,25 @@
 
   <ul class="buttons-page" *ngIf="hotels">
     <li>
-      <button id="first-page" class="button-page" (click)="getHotels(1)" *ngIf="pagination.previousPage">
+      <button id="first-page" class="button-page" (click)="getAPI(1)" *ngIf="pagination.previousPage">
         <i class="fas fa-angle-double-left"></i>
         Primeira Página
       </button>
     </li>
     <li>
-      <button id="previous-page" class="button-page" (click)="getHotels(currentPage - 1)" *ngIf="pagination.previousPage">
+      <button id="previous-page" class="button-page" (click)="getAPI(currentPage - 1)" *ngIf="pagination.previousPage">
         <i class="fas fa-angle-left"></i>
         Página Anterior
     </button>
     </li>
     <li>
-      <button id="next-page" class="button-page" (click)="getHotels(currentPage + 1)" *ngIf="pagination.nextPage">
+      <button id="next-page" class="button-page" (click)="getAPI(currentPage + 1)" *ngIf="pagination.nextPage">
         Próxima Página
         <i class="fas fa-angle-right"></i>
       </button>
     </li>
     <li>
-      <button id="last-page" class="button-page" (click)="getHotels(pagination.count)" *ngIf="pagination.nextPage">
+      <button id="last-page" class="button-page" (click)="getAPI(pagination.count)" *ngIf="pagination.nextPage">
         Última Página
         <i class="fas fa-angle-double-right"></i>
       </button>

src/app/components/hotel/hotel.component.scss

@@ -691,9 +691,9 @@ $black: #000000;
 .hotel-location {
   color: $grey;
   font-size: 1.0rem;
-  font-weight: 900;
+  font-weight: 800;
   margin-left: 2.5rem;
-  letter-spacing: 0.2rem;
+  letter-spacing: 0.1rem;
   text-transform: uppercase;
 
   @include for-tablet-portrait-up {
@@ -742,7 +742,7 @@ $black: #000000;
 }
 
 .amenity-title {
-  color: #302E2E;
+  color: #757575aa;
   font-size: 12px;
   font-weight: 700;
 }
@@ -815,7 +815,7 @@ $black: #000000;
 .hotel-photo {
   width: 34rem;
   height: auto;
-  max-height: 27.1rem;
+  max-height: fit-content;
   border-radius: 6.0rem 6.0rem 0 6.0rem;
 
   @include for-tablet-portrait-up {

src/app/components/hotel/hotel.component.ts

@@ -13,6 +13,14 @@ import { HeaderComponent } from './../header/header.component';
 })
 export class HotelComponent implements OnInit {
 
+  packages: Array<any>
+  photo: string
+  smallDescription: string
+  tags: Array<any>
+  people: string
+  night: string
+  city: string
+  state: string
   hotels: Array<any>
   location: string
   name: string
@@ -30,8 +38,6 @@ export class HotelComponent implements OnInit {
   valueSlider: string
   value: string
   typeSearchOption: string
-  packageImage: Array<any>
-  smallDescription: string
 
   constructor(private hurbService: HurbService, private router: Router, private titleService: Title){
     const nav = this.router.getCurrentNavigation();
@@ -55,21 +61,69 @@ export class HotelComponent implements OnInit {
     this.typeSearchOption = event;
   }
 
-  getHotels(page = 1, typeSearchOption, order: string, limited: string, quantityStars: Array<any>) {
+  goToHotels(hotels: Array<any>, page: number, pagination: any, quantity: string, 
+    place: string, location: string) {
+    this.router.navigateByUrl('/hotels', {
+      state: { 
+        hotels: this.hotels, 
+        page: this.currentPage, 
+        pagination: this.pagination,
+        quantity: this.quantity,
+        place: this.place,
+        location: this.location
+      }
+    });
+  }
+
+  goToPackages(packages: Array<any>, page: number, pagination: any, quantity: string,
+    place: string, location: string){
+      this.router.navigateByUrl('/packages', {
+        state: {
+          packages: this.packages,
+          page: this.currentPage,
+          pagination: this.pagination,
+          quantity: this.quantity,
+          place: this.place,
+          location: this.location
+        }
+      })
+  }
+
+  getAPI(page = 1, typeSearchOption, order: string, limited: string, quantityStars: Array<any>) {
     this.hurbService.getData(this.location, this.typeSearchOption, page, order, limited, quantityStars).subscribe((data) => {
-      this.hotels = data.results;
-      this.pagination = data.pagination;
-      this.quantity = data.meta.count;
-      this.place = data.meta.query;
-      this.price = data.results.price;
-      this.stars = data.results.stars;
-      this.minPrice = ((data.filters.priceInterval.min)/100).toFixed(0);
-      this.maxPrice = ((data.filters.priceInterval.max)/100).toFixed(0);
-
-      this.titleService.setTitle(`Hotéis e Pacotes Para ${this.location} | Agência de Viagens - Hurb`);
+
+      if(this.typeSearchOption === 'offer') {
+        this.packages = data.results;
+        this.pagination = data.pagination;
+        this.quantity = data.meta.count;
+        this.place = data.meta.query;
+        this.price = data.results.price;
+        this.stars = data.results.stars;
+        this.minPrice = ((data.filters.priceInterval.min)/100).toFixed(0);
+        this.maxPrice = ((data.filters.priceInterval.max)/100).toFixed(0);
+        this.currentPage = page;
+
+        this.titleService.setTitle(`Hotéis e Pacotes Para ${this.location} | Agência de Viagens - Hurb`);
+        this.goToPackages(this.packages, this.currentPage, this.pagination, this.quantity, this.place,
+        this.location)
+      }
+      else {
+        this.hotels = data.results;
+        this.pagination = data.pagination;
+        this.quantity = data.meta.count;
+        this.place = data.meta.query;
+        this.price = data.results.price;
+        this.stars = data.results.stars;
+        this.minPrice = ((data.filters.priceInterval.min)/100).toFixed(0);
+        this.maxPrice = ((data.filters.priceInterval.max)/100).toFixed(0);
+        this.currentPage = page;
+
+        this.titleService.setTitle(`Hotéis e Pacotes Para ${this.location} | Agência de Viagens - Hurb`);
+        this.goToHotels(this.hotels, this.currentPage, this.pagination, this.quantity, this.place, 
+        this.location)
+      }
     })
 
-    this.currentPage = page;
     this.quantity;
     this.place;
 
@@ -97,23 +151,23 @@ export class HotelComponent implements OnInit {
     this.select = (<HTMLInputElement>document.getElementById("selectOrder")).value;
 
     if(this.select === 'moreRelevance') {
-      return this.getHotels(1, null,'&sort=score&sortOrder=DESC',null, null);
+      return this.getAPI(1, null,'&sort=score&sortOrder=DESC',null, null);
     }
 
     if(this.select  === 'lowPrice') {
-      return this.getHotels(1, null,'&sort=price&sortOrder=ASC',null, null);
+      return this.getAPI(1, null,'&sort=price&sortOrder=ASC',null, null);
     }
 
     if(this.select  === 'highPrice') {
-      return this.getHotels(1, null,'&sort=price&sortOrder=DESC',null, null);
+      return this.getAPI(1, null,'&sort=price&sortOrder=DESC',null, null);
     }
 
   }
 
   limitedByPrice(){
     this.valueSlider = (<HTMLInputElement>document.getElementById('range')).value;
 
-    return this.getHotels(1,null, null, `1,,price_max_${this.valueSlider}00|1`, null);
+    return this.getAPI(1,null, null, `1,,price_max_${this.valueSlider}00|1`, null);
   }
 
   getHotelsByStars() {
@@ -133,7 +187,7 @@ export class HotelComponent implements OnInit {
 
     const newArray = stars.filter(isChecked);
 
-    return this.getHotels(1,null, null, null, starsValue);
+    return this.getAPI(1,null, null, null, starsValue);
   }
 
   sendLocationToInput() {