iceholidays-frontend 0.4.0 → 0.5.0

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>
     )

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

@@ -0,0 +1,146 @@
+
+import { List, Card, Space } from "antd";
+import React from "react";
+import { data } from "react-router-dom";
+
+
+const pricingCategory = {
+  "adult": "Adult",
+  "child_no_bed": "Child no bed",
+  "child_twin": "Child twin",
+  "child_with_bed": "Child with bed",
+  "infant": "Infant",
+  "single_supplement": "Single Supplement",
+  "dta_adult": "DTA Adult",
+  "dta_child_no_bed": "DTA Child no bed",
+  "dta_child_twin": "DTA Child twin",
+  "dta_child_with_bed": "DTA Child with bed",
+  "dta_infant": "DTA Infant",
+  "dta_single_supplement": "DTA Single Supplement",
+};
+
+const priceTypes = {
+  "normal": "normal",
+  "normal1": "normal 1",
+  "normal2": "normal 2",
+  "normal3": "normal 3",
+  "normal4": "normal 4",
+  "normal5": "normal 5",
+  "normal6": "normal 6",
+  "normal7": "normal 7",
+  "normal8": "normal 8",
+  "normal9": "normal 9",
+  "early_bird": "early bird",
+  "specialoffer": "special offer",
+  "specialdeal": "special deal",
+  "superpromo": "super promo",
+  "promo": "promo",
+  "promo1": "promo 1",
+  "promo2": "promo 2",
+  "promo3": "promo 3",
+}
+
+
+const PriceDetails = (
+  props: {
+    priceCurrency:string,
+    prices: any[]
+  }
+) => {
+  const { priceCurrency, prices } = props;
+  
+  var pricingTypes:any[] = [], priceTable:any = {}, priceList:any[] = [];
+  if(prices.length>0){
+    pricingTypes = prices.map((price:any) => price.type);
+    prices.forEach((price:any) => {
+      const pricingObj = {
+        label: price.display_price,
+        adult: price.adult,
+        child_no_bed: price.child_no_bed,
+        child_twin: price.child_twin,
+        child_with_bed: price.child_with_bed,
+        dta_adult: price.dta_adult,
+        dta_child_no_bed: price.dta_child_no_bed,
+        dta_child_twin: price.dta_child_twin,
+        dta_child_with_bed: price.dta_child_with_bed,
+        dta_infant: price.dta_infant,
+        dta_single_supplement: price.dta_single_supplement,
+        infant: price.infant,
+        single_supplement: price.single_supplement,
+      };
+
+      priceTable[price.type] = pricingObj;
+
+      priceList.push({
+        title: `${price.display_price} ${priceTypes[price.type]}`,
+        type: price.type,
+        ...pricingObj
+      })
+    });
+  }
+
+  return (
+    <div id="price-details" className="details-container">
+      <div className="details-container_header"> Price Details </div>
+      <div className="details-container_content">
+        <table id="pricing-table">
+          <thead>
+            <tr>
+              <th></th>
+              {
+                pricingTypes.map((type:any) => <th className={type}>
+                  <div>{priceTable[type].label}</div>
+                  <div className="price-type">{priceTypes[type]}</div>
+                </th>)
+              }
+            </tr>
+          </thead>
+          <tbody>
+            {
+              Object.entries(pricingCategory).map(category => (
+                <tr>
+                  <td> {category[1]}  </td>
+                  {
+                    pricingTypes.map((type:any) => <td className={type}> {priceCurrency} {priceTable[type][category[0]]}</td>)
+                  }
+                </tr>
+              ))
+            }
+          </tbody>
+        </table>
+
+        {
+          priceList.length > 0 && (
+            <List
+              id="pricing-list"
+              itemLayout="vertical"
+              dataSource={priceList}
+              renderItem={(item) => (
+                <List.Item>
+                  <Card className={item.type}>
+                    <div className="pricing-header"> {item.title} </div>
+                    <div className="pricing-body"> 
+                      <Space size={15} direction="vertical" style={{display: 'flex'}}>
+                        {
+                          Object.entries(pricingCategory).map(category => (
+                            <div className="pricing"> 
+                              <div className="category"> {category[1]} </div>
+                              <div className="price">{priceCurrency} {item[category[0]]} </div>
+                            </div>
+                          ))
+                        }
+                      </Space>
+                    </div>
+                  </Card>
+                </List.Item>
+              )}
+            />
+          )
+        }
+
+      </div>
+    </div>
+  )
+}
+
+export default PriceDetails;