iceholidays-frontend 0.3.0 → 0.4.0

data/app/javascript/react/pages/Homepage.tsx

@@ -0,0 +1,90 @@
+import React from "react";
+import Testimonials from "../components/Testimonials";
+import Destinations from "../components/Destinations";
+import SearchBarWidget from "../widgets/SearchBarWidget";
+import { Carousel, notification } from "antd";
+import SlickButtonFix from "../components/shared/SlickButtonFix";
+import BannersApi from "../../api-services/banners-api.service";
+import { Banner } from "../../interfaces/banner.interface";
+
+export default class Homepage extends React.Component {
+  api = new BannersApi;
+
+  state = {
+    banners: []
+  }
+
+
+  componentDidMount() {
+    this.api.getBanners()
+      .then(bannersData => {
+        this.setState({banners: bannersData})
+      })
+      .catch(error => {
+        notification.error({ message: 'An error occured while loading banners.'});
+      });
+  }
+
+  render(){
+    const { banners } = this.state;
+
+    return (
+      <div id="homepage">
+    
+      <SearchBarWidget/>
+  
+      <div id="homepage_banner"> 
+          <Carousel autoplay arrows infinite={banners.length>1}
+            prevArrow={
+              <SlickButtonFix>
+                <img src="/iceholidays-assets/images/banner_arrow.png"/>
+              </SlickButtonFix>
+            }
+            nextArrow={
+              <SlickButtonFix>
+                <img src="/iceholidays-assets/images/banner_arrow.png" className="flip"/>
+              </SlickButtonFix>
+            }
+          >
+            {
+              banners.map((banner:Banner, index)=>{
+                return <a key={index} href={banner.url} target={banner.target} rel="nofollow">
+                  <picture>
+                    <source media="(min-width: 600px)" srcSet={banner.desktopImage} />
+                    <source media="(max-width: 599px)" srcSet={banner.mobileImage} />
+                    <img src={banner.desktopImage} alt={banner.title} />
+                  </picture>
+                </a>
+              })
+            }
+          </Carousel>
+      </div>
+      
+      <Destinations/>
+      <Testimonials/>
+  
+      <div id="about-signature-tours" style={{background: "url('/iceholidays-assets/images/about_st_bg.png') no-repeat 70% 7%, linear-gradient(65.77deg, rgba(170, 133, 62, 0.5) 33.44%, rgba(249, 225, 151, 0.5) 67.37%)"}}>
+        <div>
+          <h1>ABOUT SIGNATURE TOURS</h1>
+          <p>
+            From charming accommodations to curated cultural encounters, every  aspect is thoughtfully crafted to elevate your travel experience. At The  Signature Tours, we believe in the S-Tour’s philosophy —where every  moment is a signature memory.
+          </p>
+          <img src="/iceholidays-assets/images/Group_71.png"/>
+          <div id="about-st-feature">
+            <div style={{maxWidth: "449px"}}>
+              <p>Every  experience is meticulously designed to create memories that last a  lifetime. Our journeys go beyond the ordinary, offering experiences that  are as unique as you are.</p>
+            </div>
+            <div id="feature">
+              <img src="/iceholidays-assets/images/feature.jpg"/>
+              <div id="st-brand">
+                <span>Signature Tours</span>
+                <img src="/iceholidays-assets/images/logomark.png" id="st-logo"/>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    )
+  }
+}

data/app/javascript/react/pages/ListingPage.tsx

@@ -0,0 +1,246 @@
+import React, { Component } from "react";
+import { Badge, Breadcrumb, Button, Flex, Modal, Space, Select, Row, Col, notification } from "antd";
+import FilterPills from "../widgets/FilterPills";
+import { Link, useSearchParams } from "react-router-dom";
+import { mdiDotsHorizontalCircleOutline, mdiFileDownload, mdiFilterVariant, mdiInformationOutline, mdiMapMarkerOutline } from "@mdi/js";
+import Icon from "@mdi/react";
+import Headline from "../components/shared/Headline";
+import LocationsApi from "../../api-services/locations-api.service";
+import { Country } from "../../interfaces/country.interface";
+import SeriesApi from "../../api-services/series-api.service";
+import { Itinerary } from "../../interfaces/itinerary.interface";
+
+import createDOMPurify from 'dompurify'
+
+const DOMPurify = createDOMPurify(window)
+
+
+const bannerPath = '/iceholidays-assets/images/china_listings_cover.png';
+const breadcrumbs = [
+  { title: 'Home' },
+  { title: 'China' },
+  { title: 'Chongqing' }
+]
+
+const legends = [
+  { id: "guaranteed", label: "Guaranteed", color: "#DCB062" },
+  { id: "selling-fast", label: "Selling Fast", color: "#23D1C0" }
+]
+
+const getColorByType = (type:string) => {
+  var legend = legends.find(l => l.id == type);
+  return legend ? legend.color : "#000000";
+}
+
+function withSearchParams(Component) {
+  return props => <Component {...props} searchParams={useSearchParams()} />;
+}
+
+class ListingPage extends React.Component <{searchParams}> {
+  locationsApi = new LocationsApi;
+  seriesApi = new SeriesApi;
+
+  state = {
+    countries: [],
+    selectedCountry: {cities: []},
+    keyword: "",
+    itineraries: [],
+    setIsModalOpen: false,
+    setIsDateModalOpen: false,
+    descriptionData: "",
+    departureDatesData: []
+  }
+
+  constructor(props:any){
+    super(props);
+  }
+
+  componentDidMount() {
+    this.locationsApi.getCountries()
+      .then(locationsData => {
+        this.setState({countries: locationsData, selectedCountry: locationsData[0]})
+      })
+      .catch(error => {
+        notification.error({ message: 'An error occured while loading countries.'});
+      });
+
+    const [searchParams] = this.props.searchParams;
+    const keyword = searchParams.get('keyword');
+    this.setState({keyword: keyword})
+    
+    this.getItineraries({keyword});
+  }
+
+  getItineraries(searchParams){
+    this.seriesApi.getItineraries(searchParams)
+      .then(itinerariesData => {
+        this.setState({itineraries: itinerariesData})
+      })
+      .catch(error => {
+        notification.error({ message: 'An error occured while loading itineraries.'});
+      });
+  }
+
+  showModal(description){
+    this.setState({setIsModalOpen:true, descriptionData: description});
+  }
+
+  closeModal() {
+    this.setState({setIsModalOpen:false});
+  }
+
+  showDatesModal(dates) {
+    this.setState({setIsDateModalOpen:true, departureDatesData: dates});
+  }
+
+  closeDatesModalatesModal(){
+    this.setState({setIsDateModalOpen:false});
+  }
+
+  selectCountry(country){
+    const selectedCountry = this.state.countries.find((c:Country) => c.id == country);
+    if(selectedCountry){
+      this.setState({selectedCountry})
+    }
+  }
+
+
+  render(){
+    const {countries, selectedCountry, keyword, itineraries, descriptionData, departureDatesData } = this.state;
+
+    return <div id="listing-page">
+    
+    <Headline bannerImage={bannerPath} breadcrumbs={breadcrumbs}>
+      <div id="listing-page_header"> 
+        <Flex justify="space-between" align="center">
+          <h1>{keyword}</h1>
+          <Select
+            className="country-filter"
+            suffixIcon={<Icon path={mdiFilterVariant} size={1} />}
+            defaultValue="china"
+            value={selectedCountry["name"]}
+            options={countries}
+            fieldNames={{label: 'name', value: 'id'}}
+            dropdownStyle={{padding: "15px 10px 15px 20px", borderRadius: "20px"}}
+            optionRender={(option) => (
+              <div className="country-filter_option"> {option.label} </div>
+            )}
+            onChange={(country)=>this.selectCountry(country)}
+          />
+        </Flex>
+      </div>
+    </Headline>
+    
+    <div id="listing-page_body">
+      <Space size={12} direction="vertical">
+        <FilterPills items={selectedCountry.cities} label="name" initialValue={{keyword}} selectFilter={(selected) => this.getItineraries(selected)}></FilterPills>
+      </Space>
+
+      <div id="legends">
+        <Space size={17}>
+          {
+            legends.map(legend => <Badge key={legend.id} color={legend.color} text={legend.label} />)
+          }
+        </Space>
+      </div>
+
+      <div id="tours">
+        <Flex vertical gap={30}>
+          {
+            itineraries.map((itinerary:Itinerary) => {
+              const departureDates = itinerary.departureDate.map(ddate => {
+                return {
+                  type: itinerary.guranteedDepartureDates.includes(ddate) ? "guaranteed" : "",
+                  date: ddate
+                }
+              });
+
+              return (
+                <Row className="tour" wrap={false}>
+                  <Col flex="300px">
+                    <div className="tour_image"> <img src={itinerary.images[0]}/> </div>
+                  </Col>
+                  <Col flex="auto">
+                    <div className="tour_details">
+                      <Space size={20} direction="vertical" style={{ display: 'flex' }}>
+                        <Space size={10} direction="vertical">
+                          <div className="tour_details_title"> {itinerary.caption} </div>
+                          <div className="tour_details_subtitle"> {itinerary.otherCaption} </div>
+                          <div className="tour_details_info"> 
+                            <span  onClick={()=>this.showModal(itinerary.description)}><Icon path={mdiInformationOutline} size={1}/></span>
+                          </div>
+                          <div> 
+                            <span className="tour_details_country"> <Icon path={mdiMapMarkerOutline} size="18px" /> {itinerary.country} </span> 
+                            <span className="tour_details_code"> <Icon path={mdiFileDownload} size="18px" /> {itinerary.code} </span> 
+                          </div>
+                        </Space>
+                        <div className="tour_details_dates">
+                          <Space size={6} direction="vertical" style={{ display: 'flex' }}>
+                            <label>Departure Date(s)</label>
+                            <div className="date-selector">
+                              {
+                                departureDates && departureDates.map(ddate => <span style={{borderColor: getColorByType(ddate.type)}}> {ddate.date} </span>)
+                              }
+                              {
+                                departureDates.length >= 9 && <div className="show-all-dates" onClick={()=>this.showDatesModal(departureDates)}> <Icon path={mdiDotsHorizontalCircleOutline} size="15px" /> Show All </div>
+                              }
+                            </div>
+                          </Space>
+                        </div>
+                      </Space>
+                    </div>
+                  </Col>
+                  <Col flex="210px">
+                    <div className="tour_pricing">
+                      <Space size={20} direction="vertical" align="center">
+                        <Flex vertical>
+                          <span>From</span>
+                          <span className="price">{itinerary.priceCurrency} {itinerary.price}</span>
+                          <span>All In</span>
+                        </Flex>
+                        <Link className="select-tour" to="/app/show">Select</Link>
+                      </Space>
+                    </div>
+                  </Col>
+                </Row>
+              )
+            })
+          }
+        </Flex>
+      </div>
+    </div>
+
+
+    <Modal title="Description" open={this.state.setIsModalOpen} onCancel={()=>this.closeModal()} footer={null} width={1000} centered className="tour_details_description">
+      <div className="pre-wrap">{ <span dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(descriptionData) }} /> }</div>
+    </Modal>
+
+    <Modal title={
+      <Flex justify="space-between" align="center">
+        <div className="custom-modal-header-title"> Departure Date(s) </div>
+        <div className="custom-modal-header-legends">
+          <Space size={17}>
+            {
+              legends.map(legend => <Badge key={legend.id} color={legend.color} text={legend.label} />)
+            }
+          </Space>
+        </div>
+      </Flex>
+    } footer={
+      <Button>Confirm</Button>
+    }
+    open={this.state.setIsDateModalOpen} onCancel={()=>this.closeDatesModalatesModal()} width={940} centered className="tour_details_all_dates">
+        <div className="date-selector">
+          <Space size={8} wrap>
+          {
+            departureDatesData && departureDatesData.map((ddate:any) => <span style={{borderColor: getColorByType(ddate.type)}}> {ddate.date} </span>)
+          }
+          </Space>
+        </div>
+    </Modal>
+  </div>
+  }
+}
+
+
+export default withSearchParams(ListingPage);