iceholidays-frontend 0.4.0 → 0.6.0

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

@@ -11,25 +11,21 @@ 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 breadcrumbs = [
-  { title: 'Home' },
-  { title: 'China' },
-  { title: 'Chongqing' }
-]
 
 const legends = [
   { id: "guaranteed", label: "Guaranteed", color: "#DCB062" },
-  { id: "selling-fast", label: "Selling Fast", color: "#23D1C0" }
+  { id: "almost-guaranteed", label: "Selling Fast", color: "#23D1C0" }
 ]
 
 const getColorByType = (type:string) => {
   var legend = legends.find(l => l.id == type);
-  return legend ? legend.color : "#000000";
+  return legend ? legend.color : "#999999";
 }
 
 function withSearchParams(Component) {
@@ -43,11 +39,15 @@ class ListingPage extends React.Component <{searchParams}> {
   state = {
     countries: [],
     selectedCountry: {cities: []},
-    keyword: "",
+    searchParamsObj: {keyword: "", year: "", month: "", location_id: null},
     itineraries: [],
-    setIsModalOpen: false,
-    setIsDateModalOpen: false,
+    location: {name: "", cover: ""},
+    breadcrumbs: [{ title: <a href="/app">Home</a> }],
+    descriptionModalOpen: false,
+    itineraryModalOpen: false,
+    dateModalOpen: false,
     descriptionData: "",
+    fileUrlData: "",
     departureDatesData: []
   }
 
@@ -64,16 +64,55 @@ class ListingPage extends React.Component <{searchParams}> {
         notification.error({ message: 'An error occured while loading countries.'});
       });
 
-    const [searchParams] = this.props.searchParams;
-    const keyword = searchParams.get('keyword');
-    this.setState({keyword: keyword})
+      this.setSearchParamsObj();
     
-    this.getItineraries({keyword});
+  }
+
+  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 => {
+    .then(itinerariesData => {
+        this.setBreadcrumbs();
         this.setState({itineraries: itinerariesData})
       })
       .catch(error => {
@@ -81,163 +120,176 @@ class ListingPage extends React.Component <{searchParams}> {
       });
   }
 
-  showModal(description){
-    this.setState({setIsModalOpen:true, descriptionData: description});
-  }
+  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);
+        }
+      } 
 
-  closeModal() {
-    this.setState({setIsModalOpen:false});
+      breadcrumbs[breadcrumbs.length-1] = {title: this.searchParamsToText()};
+    }
+
+    this.setState({breadcrumbs});
   }
 
-  showDatesModal(dates) {
-    this.setState({setIsDateModalOpen:true, departureDatesData: dates});
+  showModal(modalName:string, propName: string, value: any){
+    this.setState({[modalName]: true, [propName]: value});
   }
 
-  closeDatesModalatesModal(){
-    this.setState({setIsDateModalOpen:false});
+  closeModal(modalName:string) {
+    this.setState({[modalName]:false});
   }
 
-  selectCountry(country){
-    const selectedCountry = this.state.countries.find((c:Country) => c.id == country);
+  selectCountry = (country) => {
+    const selectedCountry:any = this.state.countries.find((c:Country) => c.id == country);
     if(selectedCountry){
-      this.setState({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, keyword, itineraries, descriptionData, departureDatesData } = this.state;
+    const {countries, selectedCountry, searchParamsObj, itineraries, location, breadcrumbs, descriptionData, fileUrlData, 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} />)
-          }
+      <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>
 
-      <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
+        {
+          itineraries.length > 0 ? (
+            <>
+            <div id="legends">
+              <Space size={17}>
+                {
+                  legends.map(legend => <Badge key={legend.id} color={legend.color} text={legend.label} />)
                 }
-              });
-
-              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>
+              </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>
-                          <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> 
+                        </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>
-                        </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>
+                        </Col>
+                      </Row>
+                    )
+                  })
+                }
+              </Flex>
+            </div>
+            </>
+          ) : <h1 id="no-tours-found">Not tour package is found.</h1>
+        }
+
       </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="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="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}>
+      <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>
             {
-              legends.map(legend => <Badge key={legend.id} color={legend.color} text={legend.label} />)
+              departureDatesData && departureDatesData.map((ddate:any) => <span style={{borderColor: getColorByType(ddate.type)}}> {ddate.date} </span>)
             }
-          </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>
+            </Space>
+          </div>
+      </Modal>
   </div>
   }
 }