iceholidays-frontend 0.3.0 → 0.5.0

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

@@ -0,0 +1,292 @@
+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'
+import LocationDropdown from "../components/shared/LocationDropdown";
+
+const DOMPurify = createDOMPurify(window)
+
+
+const bannerPath = '/iceholidays-assets/images/china_listings_cover.png';
+
+const legends = [
+  { id: "guaranteed", label: "Guaranteed", color: "#DCB062" },
+  { id: "almost-guaranteed", label: "Selling Fast", color: "#23D1C0" }
+]
+
+const getColorByType = (type:string) => {
+  var legend = legends.find(l => l.id == type);
+  return legend ? legend.color : "#999999";
+}
+
+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: []},
+    searchParamsObj: {keyword: "", year: "", month: "", location_id: null},
+    itineraries: [],
+    location: {name: "", cover: ""},
+    breadcrumbs: [{ title: <a href="/app">Home</a> }],
+    descriptionModalOpen: false,
+    itineraryModalOpen: false,
+    dateModalOpen: false,
+    descriptionData: "",
+    fileUrlData: "",
+    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.'});
+      });
+
+      this.setSearchParamsObj();
+    
+  }
+
+  private setSearchParamsObj(){
+    const [searchParams] = this.props.searchParams;
+    const {searchParamsObj} = this.state;
+    searchParams.keys().forEach(key => {
+      searchParamsObj[key] = searchParams.get(key);
+    });
+
+    this.setState({searchParamsObj});
+
+    const locationId = searchParamsObj.location_id;
+    if(locationId) this.getLocation(locationId);
+
+    this.getItineraries(searchParamsObj);
+  }
+
+
+  searchParamsToText() {
+    var {keyword, year, month} = this.state.searchParamsObj;
+    return <span>{ this.state.location?.name || keyword}{`${month && `, ${month}`} ${year}`} </span>
+  }
+
+  getLocation(locationId){
+    //resets the breadcrumbs
+    this.setState({breadcrumbs: [{ title: <a href="/app">Home</a> }]});
+
+    this.locationsApi.getLocation(locationId)
+      .then(locationData => {
+        var locationCrumbs = this.state.breadcrumbs;
+        if(locationData.ancestry?.length && locationData.ancestry?.length > 0){
+          locationData.ancestry.forEach(a => {
+            locationCrumbs.push({title: <span key={a.id}> {a.name} </span>})
+          });
+        }
+        locationCrumbs.push({title: <span>{locationData.name}</span>});
+        this.setState({location: locationData, breadcrumbs: locationCrumbs})
+      })
+      .catch(error => {
+        notification.error({ message: 'An error occured while loading location.'});
+      });
+  }
+
+  getItineraries(searchParams){
+    this.seriesApi.getItineraries(searchParams)
+    .then(itinerariesData => {
+        this.setBreadcrumbs();
+        this.setState({itineraries: itinerariesData})
+      })
+      .catch(error => {
+        notification.error({ message: 'An error occured while loading itineraries.'});
+      });
+  }
+
+  setBreadcrumbs(){
+    var breadcrumbs = this.state.breadcrumbs;
+    if(breadcrumbs.length > 1){
+      const {keyword, ...noKeyword} = this.state.searchParamsObj;
+      const allHasValues = Object.entries(noKeyword).every(o => o[1] != "");
+      if(allHasValues){
+        const searchResultsCrumb = {title: <span>Search results</span>};
+        if(breadcrumbs.length > 2){
+          breadcrumbs[breadcrumbs.length-2] = searchResultsCrumb;
+        }else{
+          breadcrumbs.splice(1, 0, searchResultsCrumb);
+        }
+      } 
+
+      breadcrumbs[breadcrumbs.length-1] = {title: this.searchParamsToText()};
+    }
+
+    this.setState({breadcrumbs});
+  }
+
+  showModal(modalName:string, propName: string, value: any){
+    this.setState({[modalName]: true, [propName]: value});
+  }
+
+  closeModal(modalName:string) {
+    this.setState({[modalName]:false});
+  }
+
+  selectCountry = (country) => {
+    const selectedCountry:any = this.state.countries.find((c:Country) => c.id == country);
+    if(selectedCountry){
+      const searchParamsObj = this.state.searchParamsObj;
+      searchParamsObj.location_id = selectedCountry.id;
+      this.getLocation(selectedCountry.id);
+
+      this.setState({selectedCountry, searchParamsObj});
+      this.getItineraries(searchParamsObj);
+    }
+  }
+
+
+  render(){
+    const {countries, selectedCountry, searchParamsObj, itineraries, location, breadcrumbs, descriptionData, fileUrlData, departureDatesData } = this.state;
+
+    return <div id="listing-page">
+    
+      <Headline bannerImage={location?.cover || bannerPath} breadcrumbs={breadcrumbs}>
+        <div id="listing-page_header"> 
+          <Flex vertical gap={10}>
+            <h1>{this.searchParamsToText()}</h1>
+            <LocationDropdown locations={countries} selectLocation={this.selectCountry}/>
+          </Flex>
+        </div>
+      </Headline>
+      
+      <div id="listing-page_body">
+        <Space size={12} direction="vertical">
+          <FilterPills items={selectedCountry.cities} bindLabel="name" bindValue="location_id" initialValue={searchParamsObj} 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 ? itinerary.departureDate.map(ddate => {
+                  var type = (itinerary.guranteedDepartureDates && itinerary.guranteedDepartureDates.includes(ddate)) ?  "guaranteed" : 
+                  (itinerary.almostGuaranteedDepartureDates && itinerary.almostGuaranteedDepartureDates.includes(ddate)) ?  "almost-guaranteed" : "";
+
+                  return { type, date: ddate }
+                }) : [];
+
+                return (
+                  <Row key={itinerary.id} className="tour">
+                    <Col flex="1 0 25%" className="column">
+                      <div className="tour_image"> <img src={itinerary.images[0]}/> </div>
+                    </Col>
+                    <Col flex="1 0 55%" className="column">
+                      <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_info"> 
+                              <span  onClick={()=>this.showModal("descriptionModalOpen", "descriptionData", 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" onClick={()=>this.showModal("itineraryModalOpen", "fileUrlData", itinerary.fileUrl)}> <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, index) => <span key={index} style={{borderColor: getColorByType(ddate.type)}}> {ddate.date} </span>)
+                                }
+                                {
+                                  departureDates.length >= 9 && <div className="show-all-dates" onClick={()=>this.showModal("dateModalOpen", "departureDatesData", departureDates)}> <Icon path={mdiDotsHorizontalCircleOutline} size="15px" /> Show All </div>
+                                }
+                              </div>
+                            </Space>
+                          </div>
+                        </Space>
+                      </div>
+                    </Col>
+                    <Col flex="1 0 20%" className="column">
+                      <div className="tour_pricing">
+                        <Space size={20} direction="vertical" align="center">
+                          <Flex className="tour_pricing_details">
+                            <span>From</span>
+                            <span className="price">{itinerary.priceCurrency} {itinerary.price}</span>
+                            <span>All In</span>
+                          </Flex>
+                          <Link className="select-tour" to={`/app/itinerary/${itinerary.id}`}>Select</Link>
+                        </Space>
+                      </div>
+                    </Col>
+                  </Row>
+                )
+              })
+            }
+          </Flex>
+        </div>
+      </div>
+
+      <Modal title="Description" open={this.state.descriptionModalOpen} onCancel={()=>this.closeModal("descriptionModalOpen")} footer={null} width={1000} centered className="tour_details_description">
+        <div className="pre-wrap">{ <span dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(descriptionData) }} /> }</div>
+      </Modal>
+
+      <Modal title="Itinerary" open={this.state.itineraryModalOpen} onCancel={()=>this.closeModal("itineraryModalOpen")} footer={null} width={1000} centered  className="tour_details_itinerary">
+        <div id="itinerary-file"><img src={fileUrlData}/></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.dateModalOpen} onCancel={()=>this.closeModal("dateModalOpen")} 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);