iceholidays-frontend 0.3.0 → 0.5.0

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

@@ -1,138 +1,75 @@
-import { faCaretRight } from "@fortawesome/free-solid-svg-icons/faCaretRight";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { 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 { mdiFilterVariant, mdiMenuRight } from "@mdi/js";
+import Icon from "@mdi/react";
+import { Link } from "react-router-dom";
+import LocationPostcards from "./shared/LocationPostcards";
+import LocationDropdown from "./shared/LocationDropdown";
 
-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: [],
+    activeTab: "1"
+  }
+
+  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 = (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: country.id.toString(),
+        label: <>
+          {country.name}
+        </>,
+        children: (
           <div>
-            <div className="country-info">
-              <img className="country-image" 
-                src={`${country.image}`} />
+            <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>
-            </div>
+              <picture className="bottom-logo">
+                <img src="/iceholidays-assets/images/destinations_logo.png"></img>
+              </picture>
+            </Link>
             {
-              country.topCities?.length && 
+              country.topCities?.length > 0 && 
               <div className="top-cities">
                 <h2>Top Cities</h2>
-                <div id="city-group">
-                  {
-                    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>
-                      )
-                    })
-                  }
-                </div>
+                <LocationPostcards locations={country.topCities}/>
               </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.id)}> {city.name} </Link>
                     })
                   }
                 </div>
@@ -140,37 +77,41 @@ 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.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 || 0, "tour")} <Icon path={mdiMenuRight} size={1} /> </span>
+                          </div>
                         </div>
-                      </div>
+                      </Link>
                     })
                   }
                 </div>
             }
           </div>
-        </>
-      )
-    }
-  })
+        )
+      }
+    })
 
-  return (
-    <div id="popular-destinations">
-      <h1>Explore Popular Destination</h1>
+    return (
+      <div id="popular-destinations">
+        <h1>Explore Popular Destination</h1>
 
-      <Tabs 
-        defaultActiveKey="1" 
-        items={items}
-        type="card"/>
+        <LocationDropdown locations={this.state.countries} selectLocation={changeTab}/>
 
-    </div>
-  )
-}
+        <Tabs 
+          defaultActiveKey="1" 
+          activeKey={this.state.activeTab}
+          items={items}
+          type="card"
+          onChange={changeTab}/>
 
-export default Destinations;
+      </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;

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/ContactAgentsForm.tsx

@@ -0,0 +1,44 @@
+import { Form, Select, Button, Flex } from "antd";
+import React from "react";
+
+export default function ContactAgentsForm(
+  props: {
+    states: any[];
+    cities: any[]; 
+    findAgents;
+    filterCities;
+    filterStates;
+  }
+) {
+  const {states, cities, findAgents, filterCities, filterStates} = props;
+  
+  return (
+    <Form layout="vertical" onFinish={findAgents}>
+      <Form.Item wrapperCol={{ span: 24 }} label="Select State" name="state">
+        <Select 
+          allowClear={true} 
+          showSearch
+          filterOption={(input, option) =>
+            (option?.label ?? '').toString().toLowerCase().includes(input.toLowerCase())
+          } 
+          placeholder="Please select" 
+          options={states.map((s:any) => {return {label: s, value: s}})} 
+          onChange={filterCities}/>
+      </Form.Item>
+      <Form.Item wrapperCol={{ span: 24 }} label="City" name="city">
+        <Select 
+          allowClear={true} 
+          showSearch
+          filterOption={(input, option) =>
+            (option?.label ?? '').toString().toLowerCase().includes(input.toLowerCase())
+          } 
+          placeholder="Please select" 
+          options={cities.map((s:any) => {return {label: s, value: s}})} 
+          onChange={filterStates}/>
+      </Form.Item>
+      <Flex align="flex-end" justify="center">
+        <Button type="primary" className="find-button" htmlType="submit">Find Agent</Button>
+      </Flex>
+    </Form>
+  )
+}

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

@@ -0,0 +1,30 @@
+import { Breadcrumb } from "antd";
+import React, { JSX } from "react";
+import SearchBarWidget from "../../widgets/SearchBarWidget";
+
+
+const Headline = (
+  props: {
+    bannerImage: string;
+    showSearch?: boolean;
+    title?: string;
+    children?: JSX.Element;
+    breadcrumbs: any[];
+  }
+) => {
+  const { bannerImage, title, children, breadcrumbs } = props;
+  return (
+    <>
+      {(props.showSearch == undefined || props.showSearch && props.showSearch == true) && <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;

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

@@ -0,0 +1,34 @@
+import React from "react";
+import Icon from "@mdi/react";
+import { Location } from "../../../interfaces/country.interface";
+import { Select } from "antd";
+import { mdiFilterVariant } from "@mdi/js";
+
+
+const LocationDropdown = (
+  props: {
+    locations:Location[];
+    selectLocation;
+  }
+) => {
+  const { locations } = props;
+
+  return (
+    <div className="location-dropdown">
+      <Select
+          className="location-filter"
+          suffixIcon={<Icon path={mdiFilterVariant} size="18px" />}
+          variant="borderless"
+          defaultValue="china"
+          options={locations.map((location) => ({label: location.name, value: location.id}))}
+          dropdownStyle={{padding: "15px 20px", borderRadius: "20px", boxShadow: "0px 3.08px 16.47px 0px #00000040"}}
+          optionRender={(option) => (
+            <div className="location-filter_option"> {option.label} </div>
+          )}
+          onChange={props.selectLocation}
+        />
+    </div>
+  )
+}
+
+export default LocationDropdown;