iceholidays-frontend 0.3.0 → 0.4.0

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,138 +1,69 @@
-import { faCaretRight } from "@fortawesome/free-solid-svg-icons/faCaretRight";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Tabs, TabsProps } from "antd";
+import { notification, 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 Icon from "@mdi/react";
+import tour from "antd/es/tour";
+import { Link } from "react-router-dom";
 
-const countries = [
-  {
-    name: "Africa",
-    image: "iceholidays-assets/images/africa.png",
-    topCities: [{
-      name: "Kenya",       
-      image: "iceholidays-assets/images/kenya.png",
-    },
-    {
-      name: "South Africa",             
-      image: "iceholidays-assets/images/southafrica.png",
-    },
-    {
-      name: "Tanzania", 
-      image: "iceholidays-assets/images/tanzania.png",
-    },
-    {
-      name: "Uaganda",      
-      image: "iceholidays-assets/images/uganda.png",
-    }]
-  },
-  {
-    name: "China",    
-    image: "iceholidays-assets/images/china.png",
-    topCities: [{
-      name: "Chong Qing",
-      image: "iceholidays-assets/images/china.png",
-    },
-    {
-      name: "Guangzhou", 
-      image: "iceholidays-assets/images/guangzhou.png",
-    },
-    {
-      name: "Guilin",       
-      image: "iceholidays-assets/images/guilin.png",
-    },
-    {
-      name: "Hongkong",       
-      image: "iceholidays-assets/images/hongkong.png",
-    }],
-    moreCities: [
-      "Leizhou", "Ningxia", "Qinghai", "Shanghai", "Tibet", "Xiamen", "Yunnan"
-    ],
-    tours: [
-      {
-        name: "Harbin",        
-        image: "iceholidays-assets/images/harbin.png",
-      },
-      {
-        name: "Inner Mongolia",        
-        image: "iceholidays-assets/images/inner_mongolia.png",
-      },
-      {
-        name: "Jiangxi",        
-        image: "iceholidays-assets/images/jiangxi.png",
-      },
-      {
-        name: "Kun Ming",        
-        image: "iceholidays-assets/images/kunming.png",
-      },
-      {
-        name: "Silk Road",        
-        image: "iceholidays-assets/images/slikroad.png",
-      }
-    ]
-  },
-  {
-    name: "Europe"
-  },
-  {
-    name: "Exotic"
-  },
-  {
-    name: "japan"
-  },
-  {
-    name: "korea"
-  },
-  {
-    name: "maldives"
-  },
-  {
-    name: "taiwan"
-  },
-]
 
-function Destinations(){
-  var items:TabsProps["items"] = countries.map((country, index)=>{
-    return {
-      key: index.toString(),
-      label: country.name,
-      children: (
-        <>
+export default class Destinations extends React.Component {
+  api = new LocationsApi;
+
+  state = {
+    countries: []
+  }
+
+  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 listingLink = (keyword: string) => {
+      return `/app/listing?keyword=${keyword}`;
+    }
+
+    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}`} />
+            <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="iceholidays-assets/images/Frame71.png"></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}`}/>
-                        <div className="city-details">
-                          <span className="city-name">{city.name}</span>
-                          <span className="tour-count">1 Tour <FontAwesomeIcon icon={faCaretRight}/> </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>
@@ -140,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 <FontAwesomeIcon icon={faCaretRight}/> </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>
+    )
+  }
+}

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

@@ -1,19 +1,75 @@
-import { faPenNib } from "@fortawesome/free-solid-svg-icons/faPenNib";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Carousel } from "antd";
+import { Carousel, notification } from "antd";
 import React from "react";
 import SlickButtonFix from "./shared/SlickButtonFix";
-import { faCaretLeft } from "@fortawesome/free-solid-svg-icons/faCaretLeft";
-import { faCaretRight } from "@fortawesome/free-solid-svg-icons/faCaretRight";
+import { mdiFountainPenTip, mdiMenuLeft, mdiMenuRight } from "@mdi/js";
+import Icon from "@mdi/react";
+import RibbonSection from "./shared/RibbonSection";
+import TestimonialsApi from "../../api-services/testimonials-api.service";
+import { Testimonial } from "../../interfaces/testimonial.interface";
+import createDOMPurify from 'dompurify'
 
+const DOMPurify = createDOMPurify(window)
 
-const contentStyle: React.CSSProperties = {
-  height: '160px',
-  color: '#fff',
-  lineHeight: '160px',
-  textAlign: 'center',
-  background: '#364d79',
-};
+export default class Testimonials extends React.Component {
+  api = new TestimonialsApi;
+
+  state = {
+    reviews: []
+  }
+
+  componentDidMount() {
+    this.api.getTestimonials()
+      .then(testimonialsData => {
+        this.setState({reviews: testimonialsData})
+      })
+      .catch(error => {
+        notification.error({ message: 'An error occured while loading testimonials.'});
+      });
+  }
+
+  render(){
+    return (
+      <RibbonSection title="Testimonial">
+        <div id="testimonials">
+          <Carousel autoplay arrows dots={false} draggable slidesToScroll= {1} slidesToShow={this.state.reviews.length > 3 ? 3 : this.state.reviews.length}
+            prevArrow={
+              <SlickButtonFix>
+                <Icon path={mdiMenuLeft} size={4} />
+              </SlickButtonFix>
+            }
+            nextArrow={
+              <SlickButtonFix>
+                <Icon path={mdiMenuRight} size={4} />
+              </SlickButtonFix>
+            }>
+            {
+              this.state.reviews.map((review:Testimonial)=>{
+                return (
+                  <div key={review.id} className="testimonial">
+                    <img src="/iceholidays-assets/images/5star.png" className="stars-icon"/>
+                    <div className="tour">
+                      <img src="/iceholidays-assets/images/logomark.png" className="st-logo"/>
+                      <div>
+                        <span> {review.tour} </span>
+                      </div>
+                    </div>
+                    <div className="comment">
+                      <span dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(review.comment) }} />
+                    </div>
+                    <div className="author">
+                      <Icon path={mdiFountainPenTip} size={1} className="author-icon" />
+                      <span>{review.author}</span>
+                    </div>
+                  </div>
+                )
+              })
+            }
+          </Carousel>
+        </div>
+      </RibbonSection>
+    )
+  }
+}
 
 const reviews = [
   {
@@ -37,52 +93,3 @@ const reviews = [
   },
 ]
 
-function Testimonials(){
-  return (
-    <div id="testimonial">
-      <div id="testimonial-header" style={{backgroundImage: "url('iceholidays-assets/images/Layer_1.png')"}}>
-        <span>Testimonial</span>
-      </div>
-
-      <div id="testimonials">
-        <Carousel autoplay arrows dots={false} draggable slidesToScroll= {1} slidesToShow={3}
-          prevArrow={
-            <SlickButtonFix>
-              <FontAwesomeIcon icon={faCaretLeft} size="4x"/>
-            </SlickButtonFix>
-          }
-          nextArrow={
-            <SlickButtonFix>
-              <FontAwesomeIcon icon={faCaretRight} size="4x"/>
-            </SlickButtonFix>
-          }>
-          {
-            reviews?.map((review)=>{
-              return (
-                <div key={review.key} className="testimonial">
-                  <img src="iceholidays-assets/images/5star.png" className="stars-icon"/>
-                  <div className="itinerary-summary">
-                    <img src="iceholidays-assets/images/logomark.png" className="st-logo"/>
-                    <div>
-                      <span> {review.itinerarySummaryTitle} </span>
-                      <span> {review.itinerarySummaryDesc} </span>
-                    </div>
-                  </div>
-                  <div className="comment">
-                    <span>{review.comment}</span>
-                  </div>
-                  <div className="customer-name">
-                    <FontAwesomeIcon icon={faPenNib} className="author-icon" />
-                    <span>{review.customerName}</span>
-                  </div>
-                </div>
-              )
-            })
-          }
-        </Carousel>
-      </div>
-    </div>
-  )
-}
-
-export default Testimonials;

data/app/javascript/react/components/shared/Headline.tsx

@@ -0,0 +1,29 @@
+import { Breadcrumb } from "antd";
+import React, { JSX } from "react";
+import SearchBarWidget from "../../widgets/SearchBarWidget";
+
+
+const Headline = (
+  props: {
+    bannerImage: string;
+    title?: string;
+    children?: JSX.Element;
+    breadcrumbs: any[];
+  }
+) => {
+  const { bannerImage, title, children, breadcrumbs } = props;
+  return (
+    <>
+      <SearchBarWidget/>
+      <div id="headline">
+        <div id="headline_banner" style={{backgroundImage: `url(${bannerImage})`}}></div>
+        <div id="headline_header"> 
+          { title ? <h1> {title} </h1> : children}
+        </div>
+        <Breadcrumb items={breadcrumbs} separator=">"/>
+      </div>
+    </>
+  )
+}
+
+export default Headline;