iceholidays-frontend 0.3.0 → 0.5.0

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

@@ -0,0 +1,52 @@
+
+.filter-title{
+  font-family: $font-default;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 18px;
+  letter-spacing: 0.05em;
+  text-align: left;
+  text-underline-position: from-font;
+  text-decoration-skip-ink: none;
+  color: #545047;
+}
+.filter-pill{
+  padding: 6px 13px 6px 13px;
+  border-radius: 10px;
+  background: linear-gradient(360deg, $primary-color 5.04%, #F9E298 99.13%);
+  color: #836848;
+  cursor: pointer;
+  text-align: center;
+
+  &.default-filter{
+    background: #F9E298;
+  }
+
+  span{
+    font-family: $font-default;
+    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;
+  }
+
+  &.selected{
+    background: #836848;
+    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

@@ -0,0 +1,116 @@
+
+.ant-input{
+  field-sizing: content;
+}
+  
+
+#search-bar{
+  width: 100%;
+  height: auto;
+  filter: drop-shadow(0 3px 3px #00000026) drop-shadow(0 1px 1px #DFB16399);
+
+  img{
+    display: none;
+  }
+
+  #search-bar-widget{
+    width: 100%;
+    padding: 25px;
+    gap: 7px;
+    opacity: 0px;
+    background: #F7F4EB;
+    position: relative;  
+    
+    .ant-picker{
+      width: 100%;
+    }
+  
+    .ant-form-item{
+      margin-bottom: 10px;
+  
+      .ant-form-item-label{
+        padding-bottom: 3px;
+        
+        label{
+          font-family: $font-default;
+          font-size: 12px;
+          font-weight: 400;
+          line-height: 16.5px;
+          letter-spacing: 0.05em;
+          text-align: left;
+          text-underline-position: from-font;
+          text-decoration-skip-ink: none;
+        }
+      }
+    }
+  
+    .search-button{
+      width: 172px;
+      margin-top: 20px;
+  
+      span{
+        font-family: $font-default;
+        font-size: 12px;
+        font-weight: 600;
+        line-height: 18px;
+        text-align: center;
+        text-underline-position: from-font;
+        text-decoration-skip-ink: none;
+  
+      }
+    }
+  
+    .ant-picker .ant-picker-input span.ant-picker-suffix {
+      margin-left: 1px;
+      margin-right: 10px;
+      order: -1;
+      color: #AA853E;
+    }
+  }
+}
+
+
+@media only screen and (min-width: 769px) {
+  #search-bar{
+    top: 0;
+    left: 0;
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    z-index: 1;
+
+    img{
+      display: block;
+      margin: 0 -1px; //to hide visible shadow line in between
+    }
+
+    #search-bar-widget{
+      width: auto;
+      padding: 15px;
+
+      .ant-space{
+        flex-direction: unset;
+        align-items: flex-end;
+      }
+  
+      .ant-form{
+        display: inline-flex;
+        gap: 7px;
+        height: 100%;
+      }
+
+      .ant-form-item{
+        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/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/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/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,71 @@
+import axios from "axios";
+import { City, Country, Location } 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);
+    });
+  }
+
+  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,
+      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,64 @@
+import axios from "axios";
+import { Itinerary } from "../interfaces/itinerary.interface";
+
+
+class SeriesApi {
+
+  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 => 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/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/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/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,19 @@
+export interface Country extends Location {
+  cities:City[];
+  topCities:City[];
+  highlights:City[];
+  tags:City[];
+}
+
+export interface City extends Location {
+} 
+
+
+export interface Location {
+  id:number;
+  cover?:string;
+  name:string;
+  tourCount?:number;
+  ancestry?: Location[];
+
+}

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

@@ -0,0 +1,111 @@
+export interface Itinerary {
+  id: number;
+  description: string;
+  code: string;
+  category: string;
+  caption: string;
+  otherCaption: string;
+  country: string;
+  fileUrl?: string;
+  price?: string;
+  departureDate?: string[];
+  guranteedDepartureDates?: string[];
+  almostGuaranteedDepartureDates?: string[];
+  departureLocations?: string[];
+  coverImage?:string[];
+  images: string[];
+  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/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/itinerary/:id" 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>
+  );
+}