iceholidays-frontend 0.2.0 → 0.4.0

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

@@ -3,6 +3,38 @@ module Iceholidays
     class SiteController < ApplicationController
       def index
       end
+
+      def listing
+        render :index
+      end
+
+      def show
+        render :index
+      end
+
+      def about_us
+        render :index
+      end
+
+      def countries
+        render :index
+      end
+
+      def blog
+        render :index
+      end
+
+      def show_blog
+        render :index
+      end
+
+      def contact_agents
+        render :index
+      end
+
+      def contact_us
+        render :index
+      end
     end
   end
 end

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

@@ -0,0 +1,28 @@
+import axios from "axios";
+import { Banner } from "../interfaces/banner.interface";
+
+class BannersApi {
+
+  getBanners(): Promise<Banner[]> {
+    const apiUrl = "/api/v1/banner";
+
+    return axios.get(apiUrl)
+    .then(response => {
+      const banners = response.data.data.attributes.slides.map(slide => {
+        const banner:Banner = {
+          title: slide.title,
+          url: slide.url,
+          target: slide.target,
+          sortOrder: slide.sort_order,
+          desktopImage: slide.image.desktop,
+          mobileImage: slide.image.mobile
+        }
+        return banner;
+      })
+      return Promise.resolve(banners);
+    });
+  }
+
+}
+
+export default BannersApi;

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

@@ -0,0 +1,49 @@
+import axios from "axios";
+import { City, Country } from "../interfaces/country.interface";
+
+class LocationsApi {
+
+  getCountries(): Promise<Country[]> {
+    const apiUrl = "/api/v1/locations";
+
+    return axios.get(apiUrl)
+    .then(response => {
+      const countries = response.data.map(locationData => {
+        const countryData = locationData.data.attributes;
+        const citiesData = countryData.children.map(childrenData => this.mapCity(childrenData.data.attributes));
+        
+        const allCities = [...citiesData];
+        const citiesWithImages = allCities.filter(x => x.cover != null);
+        const topCities = citiesWithImages.splice(0,4);
+        const highlights = citiesWithImages.splice(0,5);
+        
+        const country:Country = {
+          id: countryData.id,
+          name: countryData.name,
+          cover: countryData.cover,
+          tourCount: countryData.itineraries,
+          cities: allCities,
+          topCities: topCities,
+          highlights: highlights,
+          tags: allCities.filter(city => !topCities.includes(city) && !highlights.includes(city)),
+        }
+
+        return country;
+      })
+      return Promise.resolve(countries);
+    });
+  }
+
+  private mapCity(cityData): City{
+    const city:City = {
+      id: cityData.id,
+      name: cityData.name,
+      cover: cityData.cover,
+      tourCount: cityData.itineraries
+    };
+    return city;
+  }
+
+}
+
+export default LocationsApi;

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

@@ -0,0 +1,16 @@
+import axios from "axios";
+
+class SearchApi {
+
+  search(keyword:string, month?:number): Promise<any[]> {
+    const apiUrl = `/api/v1/series?keyword=${keyword}${month && `&month=${month}`}&type=series`;
+
+    return axios.get(apiUrl)
+    .then(response => {
+      return Promise.resolve(response.data);
+    });
+  }
+
+}
+
+export default SearchApi;

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

@@ -0,0 +1,44 @@
+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`;
+
+    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;
+      })
+      return Promise.resolve(itineraries);
+    });
+  }
+
+}
+
+export default SeriesApi;

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

@@ -0,0 +1,27 @@
+import axios from "axios";
+import { Testimonial } from "../interfaces/testimonial.interface";
+
+class TestimonialsApi {
+
+  getTestimonials(): Promise<Testimonial[]> {
+    const apiUrl = "/api/v1/testimonials";
+
+    return axios.get(apiUrl)
+    .then(response => {
+      const testimonials = response.data.data.map(responseData => {
+        const testimonialData = responseData.attributes;
+        const testimonial:Testimonial = {
+          id: testimonialData.id,
+          tour: testimonialData.tour,
+          author: testimonialData.author,
+          comment: testimonialData.body,
+        }
+        return testimonial;
+      })
+      return Promise.resolve(testimonials);
+    });
+  }
+
+}
+
+export default TestimonialsApi;

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

@@ -0,0 +1,10 @@
+export interface Banner {
+  id?:number;
+  title:string;
+  url?:string;
+  target?:string;
+  sortOrder?:number;
+  isActive?:boolean;
+  desktopImage?:string;
+  mobileImage?:string;
+}

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

@@ -0,0 +1,18 @@
+export interface Country extends Location {
+  cities:City[];
+  topCities:City[];
+  highlights:City[];
+  tags:City[];
+}
+
+export interface City extends Location {
+} 
+
+
+interface Location {
+  id:number;
+  cover:string;
+  name:string;
+  tourCount:number;
+
+}

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

@@ -0,0 +1,18 @@
+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[];
+  images: string[];
+  priceCurrency: string;
+  totalItineraries: number;
+}

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

@@ -0,0 +1,6 @@
+export interface Testimonial {
+  id:number;
+  tour:string;
+  comment:string;
+  author:string;
+}

data/app/javascript/react/App.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import Homepage from "./pages/Homepage";
+import ListingPage from "./pages/ListingPage";
+import ShowPage from "./pages/ShowPage";
+import MainLayout from "./layouts/MainLayout";
+import AboutUsPage from "./pages/AboutUsPage";
+import CountriesPage from "./pages/CountriesPage";
+import BlogPage from "./pages/BlogPage";
+import ContactAgentsPage from "./pages/ContactAgentsPage";
+import ContactUsPage from "./pages/ContactUsPage";
+import BlogShowPage from "./pages/BlogShowPage";
+
+export default function App() {
+  return (
+    <BrowserRouter>
+      <Routes>
+       <Route path="/app" element={<MainLayout />}>
+          <Route index element={<Homepage />} />
+          <Route path="/app/listing" element={<ListingPage />} />
+          <Route path="/app/show" element={<ShowPage />} />
+          <Route path="/app/about-us" element={<AboutUsPage />} />
+          <Route path="/app/countries" element={<CountriesPage />} />
+          <Route path="/app/blog" element={<BlogPage />} />
+          <Route path="/app/blog/1" element={<BlogShowPage />} />
+          <Route path="/app/contact-agents" element={<ContactAgentsPage />} />
+          <Route path="/app/contact-us" element={<ContactUsPage />} />
+        </Route>
+      </Routes>
+    </BrowserRouter>
+  );
+}

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

@@ -1,167 +1,69 @@
-import { Tabs, TabsProps } from "antd";
+import { notification, Tabs, TabsProps } from "antd";
 import React from "react";
-import africa from "../../../assets/images/iceholidays/frontend/africa.png";
+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 Icon from "@mdi/react";
+import tour from "antd/es/tour";
+import { Link } from "react-router-dom";
 
-import kenya from "../../../assets/images/iceholidays/frontend/kenya.png";
-import kenya2 from "../../../assets/images/iceholidays/frontend/kenya2.png";
-import southafrica from "../../../assets/images/iceholidays/frontend/southafrica.png";
 
-import tanzania from "../../../assets/images/iceholidays/frontend/tanzania.png";
-import uganda from "../../../assets/images/iceholidays/frontend/uganda.png";
+export default class Destinations extends React.Component {
+  api = new LocationsApi;
 
-import china from "../../../assets/images/iceholidays/frontend/china.png";
-import china2 from "../../../assets/images/iceholidays/frontend/china2.png";
-import chongqing from "../../../assets/images/iceholidays/frontend/chongqing.png";
-import guangzhou from "../../../assets/images/iceholidays/frontend/guangzhou.png";
+  state = {
+    countries: []
+  }
 
-import frame71 from "../../../assets/images/iceholidays/frontend/Frame71.png";
-import guilin from "../../../assets/images/iceholidays/frontend/guilin.png";
-import hongkong from "../../../assets/images/iceholidays/frontend/hongkong.png";
-import harbin from "../../../assets/images/iceholidays/frontend/harbin.png";
-import inner_mongolia from "../../../assets/images/iceholidays/frontend/inner_mongolia.png";
-import jiangxi from "../../../assets/images/iceholidays/frontend/jiangxi.png";
-import kunming from "../../../assets/images/iceholidays/frontend/kunming.png";
-import slikroad from "../../../assets/images/iceholidays/frontend/slikroad.png";
+  componentDidMount() {
+    this.api.getCountries()
+      .then(locationsData => {
+        this.setState({countries: locationsData})
+      })
+      .catch(error => {
+        notification.error({ message: 'An error occured while loading countries.'});
+      });
+  }
 
+  render(){
+    const pluralize = (count: number, noun: string, suffix = 's') =>
+      `${count} ${noun}${count > 1 ? suffix : ''}`;
 
-const countries = [
-  {
-    name: "Africa",
-    image: africa,
-    image2: africa,
-    topCities: [{
-      name: "Kenya", 
-      image: kenya,
-      image2: kenya2,
-    },
-    {
-      name: "South Africa", 
-      image: southafrica,
-    },
-    {
-      name: "Tanzania", 
-      image: tanzania,
-    },
-    {
-      name: "Uaganda",
-      image: uganda,
-    }]
-  },
-  {
-    name: "China",
-    image: china,
-    image2: china2,
-    topCities: [{
-      name: "Chong Qing",
-      image: chongqing,
-    },
-    {
-      name: "Guangzhou", 
-      image: guangzhou,
-    },
-    {
-      name: "Guilin", 
-      image: guilin,
-    },
-    {
-      name: "Hongkong", 
-      image: hongkong,
-    }],
-    moreCities: [
-      "Leizhou", "Ningxia", "Qinghai", "Shanghai", "Tibet", "Xiamen", "Yunnan"
-    ],
-    tours: [
-      {
-        name: "Harbin",
-        image: harbin,
-      },
-      {
-        name: "Inner Mongolia",
-        image: inner_mongolia,
-      },
-      {
-        name: "Jiangxi",
-        image: jiangxi,
-      },
-      {
-        name: "Kun Ming",
-        image: kunming,
-      },
-      {
-        name: "Silk Road",
-        image: slikroad,
-      }
-    ]
-  },
-  {
-    name: "Europe"
-  },
-  {
-    name: "Exotic"
-  },
-  {
-    name: "japan"
-  },
-  {
-    name: "korea"
-  },
-  {
-    name: "maldives"
-  },
-  {
-    name: "taiwan"
-  },
-]
+    const listingLink = (keyword: string) => {
+      return `/app/listing?keyword=${keyword}`;
+    }
 
-function Destinations(){
-  var items:TabsProps["items"] = countries.map((country, index)=>{
-    return {
-      key: index.toString(),
-      label: country.name,
-      children: (
-        <>
+    var items:TabsProps["items"] = this.state.countries.map((country:Country, index)=>{
+      return {
+        key: index.toString(),
+        label: country.name,
+        children: (
           <div>
-            <div className="country-info">
-              <img className="country-image" 
-                src={`${country.image}`}
-                onMouseOver={e => (e.currentTarget.src = `${country.image2}`)}
-                onMouseOut={e => (e.currentTarget.src = `${country.image}`)}/>
+            <Link to={listingLink(country.name)} className="country">
+              <img className="country-image" src={`${country.cover}`} />
               <h1 className="country-name"> {country.name} </h1>
-              <img className="bottom-logo" src={frame71}></img>
-            </div>
+              <img className="bottom-logo" src="/iceholidays-assets/images/Frame71.png"></img>
+            </Link>
             {
-              country.topCities?.length && 
+              country.topCities?.length > 0 && 
               <div className="top-cities">
                 <h2>Top Cities</h2>
-                <div id="city-group">
+                <div className="postcards">
                   {
-                    country.topCities?.map((city, index)=>{
-                      return (
-                        <div key={index} className="city-cover">
-                        <img 
-                          src={`${city.image}`}
-                          onMouseOver={e => (e.currentTarget.src = `${city.image2}`)}
-                          onMouseOut={e => (e.currentTarget.src = `${city.image}`)}/>
-                        <div className="city-details">
-                          <span className="city-name">{city.name}</span>
-                          <span className="tour-count">1 Tour</span>
-                        </div>
-                      </div>
-                      )
-                    })
+                    country.topCities?.map((city, index)=><Postcard key={index} link={listingLink(city.name)} image={city.cover} name={city.name} tourCount={city.tourCount}/>)
                   }
                 </div>
               </div>
             }
-
             {
-              country.moreCities?.length && 
+              country.tags?.length > 0 && 
               <div className="more-cities">
                 <h2>Browse more {country.name} destination</h2>
                 <div className="other-destinations">  
                   {
-                    country.moreCities?.map((otherCity, index)=>{
-                      return <a key={index} href="/"> {otherCity} </a>
+                    country.tags?.map((city, index)=>{
+                      return <Link key={index} to={listingLink(city.name)}> {city.name} </Link>
                     })
                   }
                 </div>
@@ -169,37 +71,37 @@ function Destinations(){
             }
 
             {
-              country.tours?.length && 
-                <div className="other-tours">  
+              country.highlights?.length > 0 && 
+                <div className="highlights">  
                   {
-                    country.tours?.map((tour, index)=>{
-                      return <div key={index} className={"tour-story"} style={{backgroundImage:`linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.8) 100%), url("${tour.image}")`}}>
-                        <div className="tour-detail"> 
-                          <span className="city-name"> {tour.name}  </span>
-                          <span className="tour-count"> 1 tour </span>
+                    country.highlights?.map((city, index)=>{
+                      return <Link key={index} to={listingLink(city.name)}>
+                        <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>
+                          </div>
                         </div>
-                      </div>
+                      </Link>
                     })
                   }
                 </div>
             }
           </div>
-        </>
-      )
-    }
-  })
-
-  return (
-    <div id="popular-destinations">
-      <h1>Explore Popular Destination</h1>
+        )
+      }
+    })
 
-      <Tabs 
-        defaultActiveKey="1" 
-        items={items}
-        type="card"/>
+    return (
+      <div id="popular-destinations">
+        <h1>Explore Popular Destination</h1>
 
-    </div>
-  )
-}
+        <Tabs 
+          defaultActiveKey="1" 
+          items={items}
+          type="card"/>
 
-export default Destinations;
+      </div>
+    )
+  }
+}