iceholidays-frontend 0.4.0 → 0.6.0

data/app/assets/stylesheets/iceholidays/frontend/utils/_antd_overrides.scss

@@ -93,15 +93,30 @@ a{
   color: $primary-color;
 }
 
-.ant-select-outlined:not(.ant-select-disabled):not(.ant-select-customize-input):not(.ant-pagination-size-changer):hover .ant-select-selector{
-  border-color: $primary-color;
+.ant-select-dropdown .ant-select-item-option-active:not(.ant-select-item-option-disabled),
+.ant-select-dropdown .ant-select-item-option-selected:not(.ant-select-item-option-disabled){
+  background-color: transparent;
+  color: $primary-color;
 }
 
-.ant-select-item-option-selected:not(.ant-select-item-option-disabled):has(.country-filter_option){
-  color: $primary-color !important;
-  background-color: #FFFFFF;
+.ant-select-dropdown .ant-select-item{
+  color: #00000080;
 }
 
-.ant-select-item-option:not(.ant-select-item-option-selected):has(.country-filter_option){
-  color: #00000080;
+.ant-menu-light{
+  &.ant-menu-horizontal{
+
+    &>.ant-menu-item:hover,
+    &>.ant-menu-item-selected,
+    &>.ant-menu-item-active{
+  
+      &::after{
+        display: none;
+      }
+    }
+  }
+
+  .ant-menu-item-selected{
+    background-color: transparent;
+  }
 }

data/app/assets/stylesheets/iceholidays/frontend/utils/_variables.scss

@@ -1,3 +1,4 @@
 $font-default: Poppins, san-serif;
 $primary-color: #DCB062;
-$secondary-color: #F9E298;
+$supportive-color: #5B4713;
+$secondary-color: #F9E298;

data/app/assets/stylesheets/iceholidays/frontend/widgets/filter_pills.scss

@@ -17,22 +17,17 @@
   color: #836848;
   cursor: pointer;
   text-align: center;
-  min-width: 150px;
 
-  // &.year{
-  //   min-width: 90px;
-  // }
-  
-  // &.month{
-  //   min-width: 150px;
-  // }
+  &.default-filter{
+    background: #F9E298;
+  }
 
   span{
     font-family: $font-default;
-    font-size: 18px;
-    font-weight: 400;
-    line-height: 27px;
-    letter-spacing: 0.05em;
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 21px;
+    letter-spacing: 2%;
     text-align: left;
     text-underline-position: from-font;
     text-decoration-skip-ink: none;
@@ -43,3 +38,15 @@
     color: #FFFFFF;
   }
 }
+
+
+@media only screen and (min-width: 769px) {
+  .filter-pill{
+    span{
+      font-size: 18px;
+      font-weight: 400;
+      line-height: 27px;
+      letter-spacing: 0.05em;
+    }
+  }
+}

data/app/assets/stylesheets/iceholidays/frontend/widgets/search_bar.scss

@@ -103,6 +103,10 @@
         margin-bottom: 0;
       }
 
+      .ant-input{
+        min-width: 272px;
+      }
+
       .search-button{
         width: auto;
         margin-bottom: 3px;

data/app/controllers/iceholidays/frontend/posts_controller.rb

@@ -0,0 +1,14 @@
+module Iceholidays
+  module Frontend
+    class PostsController < ApplicationController
+
+      def index
+        @posts = current_brand.posts
+      end
+
+      def show
+        @post = current_brand.posts.find(params[:id])
+      end
+    end
+  end
+end

data/app/javascript/api-services/agents-api.service.ts

@@ -0,0 +1,33 @@
+import axios from "axios";
+import { Agent } from "../interfaces/agent.interface";
+
+class AgentsApi
+ {
+
+  getAgents(): Promise<Agent[]> {
+    const apiUrl = "/api/v1/users/agents";
+
+    return axios.get(apiUrl)
+    .then(response => {
+      const agents = response.data.agents.map(agentData => {
+        const agent:Agent = {
+          id: agentData.id,
+          name: agentData.full_name,
+          email: agentData.email,
+          image: agentData.image,
+          phone: agentData.phone,
+          whatsapp: agentData.whatsapp_no,
+          address: agentData.address,
+          city: agentData.city,
+          state: agentData.state,
+        }
+        return agent;
+      })
+      return Promise.resolve(agents);
+    });
+  }
+
+}
+
+export default AgentsApi
+;

data/app/javascript/api-services/locations-api.service.ts

@@ -1,5 +1,5 @@
 import axios from "axios";
-import { City, Country } from "../interfaces/country.interface";
+import { City, Country, Location } from "../interfaces/country.interface";
 
 class LocationsApi {
 
@@ -34,6 +34,28 @@ class LocationsApi {
     });
   }
 
+  getLocation(locationId:number): Promise<Location> {
+    const apiUrl = `/api/v1/locations/${locationId}`;
+
+
+    return axios.get(apiUrl)
+    .then(response => {
+      const locationData = response.data.data.attributes;
+      const location: Location = {
+        id: locationData.id,
+        cover: locationData.cover,
+        name: locationData.name,
+        ancestry: locationData.ancestors.map(a => {
+          return {
+            id: a.id,
+            name: a.name
+          }
+        })
+      }
+      return Promise.resolve(location);
+    });
+  }
+
   private mapCity(cityData): City{
     const city:City = {
       id: cityData.id,

data/app/javascript/api-services/series-api.service.ts

@@ -1,44 +1,64 @@
 import axios from "axios";
 import { Itinerary } from "../interfaces/itinerary.interface";
 
-interface SearchParams {
-  keyword: string;
-  year?: string;
-  month?: string;
-}
 
 class SeriesApi {
 
-  getItineraries(searchParams: SearchParams): Promise<Itinerary[]> {
-    const apiUrl = `/api/v1/series?keyword=${searchParams.keyword}&type=series`;
+  getItineraries(searchParamsObj): Promise<Itinerary[]> {
+    const searchParamsQuery = new URLSearchParams(searchParamsObj).toString()
+    const apiUrl = `/api/v1/series?${searchParamsQuery}&type=series`;
 
     return axios.get(apiUrl)
     .then(response => {
-      const itineraries:Itinerary[] = response.data.itineraries.map(itineraryData => {
-        const itinerary:Itinerary = {
-          id: itineraryData.id,
-          description: itineraryData.description,
-          caption: itineraryData.caption,
-          otherCaption: itineraryData.otherCaption,
-          code: itineraryData.code,
-          category: itineraryData.category,
-          country: itineraryData.country,
-          price: itineraryData.price,
-          images: itineraryData.images,
-          priceCurrency: itineraryData.price_currency,
-          departureDate: itineraryData.departure_date,
-          guranteedDepartureDates: itineraryData.guranteed_departure_dates,
-          almostGuaranteedDepartureDates: itineraryData.almost_guaranteed_departure_dates,
-          departureLocations: itineraryData.departure_locations,
-          totalItineraries: itineraryData.total_itineraries,
-        }
-
-        return itinerary;
-      })
+      const itineraries:Itinerary[] = response.data.itineraries.map(itineraryData => this.mapItinerary(itineraryData));
       return Promise.resolve(itineraries);
     });
   }
 
+
+  getItinerary(id): Promise<Itinerary>{
+    const apiUrl = `/api/v1/series/${id}`;
+
+    return axios.get(apiUrl)
+    .then(response => {
+      const itinerary = this.mapItinerary(response.data);
+      return Promise.resolve(itinerary);
+    });
+  }
+
+
+  private mapItinerary(itineraryData):Itinerary {
+    const itinerary:Itinerary = {
+      id: itineraryData.id,
+      description: itineraryData.description,
+      caption: itineraryData.caption,
+      otherCaption: itineraryData.otherCaption,
+      code: itineraryData.code,
+      category: itineraryData.category,
+      country: itineraryData.country,
+      price: itineraryData.price,
+      images: itineraryData.images,
+      coverImage: itineraryData.images[0],
+      priceCurrency: itineraryData.price_currency,
+      departureDate: itineraryData.departure_date,
+      guranteedDepartureDates: itineraryData.guranteed_departure_dates,
+      almostGuaranteedDepartureDates: itineraryData.almost_guaranteed_departure_dates,
+      departureLocations: itineraryData.departure_locations,
+      totalItineraries: itineraryData.total_itineraries,
+      fileUrl: itineraryData.file_url,
+
+      autoCancel: itineraryData.auto_cancel,
+      ccRate: itineraryData.cc_rate,
+      includings: itineraryData.includings,
+      maxBookingSeats: itineraryData.max_booking_seats,
+      remark: itineraryData.remark,
+      tourType: itineraryData.tour_type,
+      tours: itineraryData.tours,
+    }
+
+    return itinerary;
+  }
+
 }
 
 export default SeriesApi;

data/app/javascript/interfaces/agent.interface.ts

@@ -0,0 +1,11 @@
+export interface Agent {
+  id:number;
+  email:string;
+  name:string;
+  image?:string;
+  phone?:string;
+  whatsapp?:string;
+  address:string;
+  city?:string;
+  state:string;
+}

data/app/javascript/interfaces/country.interface.ts

@@ -9,10 +9,11 @@ export interface City extends Location {
 } 
 
 
-interface Location {
+export interface Location {
   id:number;
-  cover:string;
+  cover?:string;
   name:string;
-  tourCount:number;
+  tourCount?:number;
+  ancestry?: Location[];
 
 }

data/app/javascript/interfaces/itinerary.interface.ts

@@ -2,17 +2,110 @@ export interface Itinerary {
   id: number;
   description: string;
   code: string;
-  fileUrl?: string;
   category: string;
   caption: string;
   otherCaption: string;
   country: string;
-  price: string;
-  departureDate: string[];
-  guranteedDepartureDates: string[];
-  almostGuaranteedDepartureDates: string[];
-  departureLocations: string[];
+  fileUrl?: string;
+  price?: string;
+  departureDate?: string[];
+  guranteedDepartureDates?: string[];
+  almostGuaranteedDepartureDates?: string[];
+  departureLocations?: string[];
+  coverImage?:string[];
   images: string[];
-  priceCurrency: string;
-  totalItineraries: number;
+  priceCurrency?: string;
+  totalItineraries?: number;
+
+  autoCancel?:boolean;
+  ccRate?: number;
+  includings?: ItineraryIncludings;
+  maxBookingSeats?: number;
+  remark?: string;
+  tourType?: string;
+  tours?: Tour[];
+}
+
+interface ItineraryIncludings {
+  acf: boolean;
+  airport_taxes: boolean;
+  gratuities: boolean;
+  group_departure: boolean;
+  hotel: boolean;
+  luggage: boolean;
+  meal_onboard: boolean;
+  tour_leader: boolean;
+  wifi: boolean;
+}
+
+export interface Tour {
+  id:number;
+  addon_others:number;
+  allow_customer_pay: boolean;
+  arrival_date: string;
+  caption: string;
+  code: string;
+  compulsory_additional_fee: number;
+  credit_available: number;
+  customer_deposit: number;
+  day_before_departure: number;
+  departure_date: string;
+  departure_location: string;
+  deposit: number;
+  deposit_date: string;
+  dobw_available: any;
+  dobw_cor_available: any;
+  dobw_ret_available: any;
+  extra_deposit: number;
+  fare_type: string;
+  final_payment_date: string;
+  flights: any[];
+  fpxb2b_available:any;
+  fpxb2c_available:any;
+  guaranteed_departure: boolean;
+  guaranteed_indicator: string;
+  highlight: string;
+  insurance: string;
+  insurance_rebate: number;
+  latest_tour_confirmation: LatestTourConfirmation;
+  max_booking_seats: number;
+  min_dta: number;
+  pay_later: string;
+  pbb2_available: string;
+  pre_commisions: any[];
+  price: number;
+  prices: Price[];
+  red_luggage_protection: boolean;
+  single_supplement_price: string;
+  subtract_others: number;
+  visa_fee: number;
+}
+
+interface LatestTourConfirmation {
+  assembly_time: string;
+  confirmation_emergency_contact: string;
+  hand_carry_weight: string;
+  luggage_quantity: string;
+  luggage_weight: string;
+  meet_up_point: string;
+  tour_guide_chinese_name: string;
+  tour_guide_name: string;
+  tour_guide_phone: string;
+}
+
+interface Price {
+  display_price: string;
+  adult: number;
+  child_no_bed: number;
+  child_twin: number;
+  child_with_bed: number;
+  dta_adult: number;
+  dta_child_no_bed: number;
+  dta_child_twin: number;
+  dta_child_with_bed: number;
+  dta_infant: number;
+  dta_single_supplement: number;
+  infant: number;
+  single_supplement: number;
+  type: string;
 }

data/app/javascript/react/App.tsx

@@ -18,7 +18,7 @@ export default function App() {
        <Route path="/app" element={<MainLayout />}>
           <Route index element={<Homepage />} />
           <Route path="/app/listing" element={<ListingPage />} />
-          <Route path="/app/show" element={<ShowPage />} />
+          <Route path="/app/itinerary/:id" element={<ShowPage />} />
           <Route path="/app/about-us" element={<AboutUsPage />} />
           <Route path="/app/countries" element={<CountriesPage />} />
           <Route path="/app/blog" element={<BlogPage />} />

data/app/javascript/react/components/Destinations.tsx

@@ -1,19 +1,20 @@
-import { notification, Tabs, TabsProps } from "antd";
+import { notification, Select, Tabs, TabsProps } from "antd";
 import React from "react";
 import LocationsApi from "../../api-services/locations-api.service";
 import { Country } from "../../interfaces/country.interface";
-import Postcard from "./shared/Postcard";
-import { mdiMenuRight } from "@mdi/js";
+import { mdiFilterVariant, mdiMenuRight } from "@mdi/js";
 import Icon from "@mdi/react";
-import tour from "antd/es/tour";
 import { Link } from "react-router-dom";
+import LocationPostcards from "./shared/LocationPostcards";
+import LocationDropdown from "./shared/LocationDropdown";
 
 
 export default class Destinations extends React.Component {
   api = new LocationsApi;
 
   state = {
-    countries: []
+    countries: [],
+    activeTab: "1"
   }
 
   componentDidMount() {
@@ -30,30 +31,35 @@ export default class Destinations extends React.Component {
     const pluralize = (count: number, noun: string, suffix = 's') =>
       `${count} ${noun}${count > 1 ? suffix : ''}`;
 
-    const listingLink = (keyword: string) => {
-      return `/app/listing?keyword=${keyword}`;
+    const listingLink = (locationId: number) => {
+      return `/app/listing?location_id=${locationId}`;
     }
 
+    const changeTab = (selectedKey:string) => {
+      this.setState({activeTab:selectedKey.toString()})
+    }
+
+
     var items:TabsProps["items"] = this.state.countries.map((country:Country, index)=>{
       return {
-        key: index.toString(),
-        label: country.name,
+        key: country.id.toString(),
+        label: <>
+          {country.name}
+        </>,
         children: (
           <div>
-            <Link to={listingLink(country.name)} className="country">
+            <Link to={listingLink(country.id)} className="country">
               <img className="country-image" src={`${country.cover}`} />
               <h1 className="country-name"> {country.name} </h1>
-              <img className="bottom-logo" src="/iceholidays-assets/images/Frame71.png"></img>
+              <picture className="bottom-logo">
+                <img src="/iceholidays-assets/images/destinations_logo.png"></img>
+              </picture>
             </Link>
             {
               country.topCities?.length > 0 && 
               <div className="top-cities">
                 <h2>Top Cities</h2>
-                <div className="postcards">
-                  {
-                    country.topCities?.map((city, index)=><Postcard key={index} link={listingLink(city.name)} image={city.cover} name={city.name} tourCount={city.tourCount}/>)
-                  }
-                </div>
+                <LocationPostcards locations={country.topCities}/>
               </div>
             }
             {
@@ -63,7 +69,7 @@ export default class Destinations extends React.Component {
                 <div className="other-destinations">  
                   {
                     country.tags?.map((city, index)=>{
-                      return <Link key={index} to={listingLink(city.name)}> {city.name} </Link>
+                      return <Link key={index} to={listingLink(city.id)}> {city.name} </Link>
                     })
                   }
                 </div>
@@ -75,11 +81,11 @@ export default class Destinations extends React.Component {
                 <div className="highlights">  
                   {
                     country.highlights?.map((city, index)=>{
-                      return <Link key={index} to={listingLink(city.name)}>
+                      return <Link key={index} to={listingLink(city.id)}>
                         <div className="tour" style={{backgroundImage:`linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.8) 100%), url("${city.cover}")`}}>
                           <div className="details"> 
                             <span className="city-name"> {city.name}  </span>
-                            <span className="tour-count"> {pluralize(city.tourCount, "tour")} <Icon path={mdiMenuRight} size={1} /> </span>
+                            <span className="tour-count"> {pluralize(city.tourCount || 0, "tour")} <Icon path={mdiMenuRight} size={1} /> </span>
                           </div>
                         </div>
                       </Link>
@@ -96,10 +102,14 @@ export default class Destinations extends React.Component {
       <div id="popular-destinations">
         <h1>Explore Popular Destination</h1>
 
+        <LocationDropdown locations={this.state.countries} selectLocation={changeTab}/>
+
         <Tabs 
           defaultActiveKey="1" 
+          activeKey={this.state.activeTab}
           items={items}
-          type="card"/>
+          type="card"
+          onChange={changeTab}/>
 
       </div>
     )