iceholidays-frontend 0.5.0 → 0.7.0

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

@@ -12,6 +12,11 @@ import { Itinerary } from "../../interfaces/itinerary.interface";
 
 import createDOMPurify from 'dompurify'
 import LocationDropdown from "../components/shared/LocationDropdown";
+import ReactMarkdown from "react-markdown";
+import Markdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import rehypeRaw from "rehype-raw";
+import rehypeSanitize from "rehype-sanitize";
 
 const DOMPurify = createDOMPurify(window)
 
@@ -38,7 +43,7 @@ class ListingPage extends React.Component <{searchParams}> {
 
   state = {
     countries: [],
-    selectedCountry: {cities: []},
+    selectedCountry: {name: "", cities: []},
     searchParamsObj: {keyword: "", year: "", month: "", location_id: null},
     itineraries: [],
     location: {name: "", cover: ""},
@@ -56,15 +61,22 @@ class ListingPage extends React.Component <{searchParams}> {
   }
 
   componentDidMount() {
+    this.setSearchParamsObj();
+
     this.locationsApi.getCountries()
       .then(locationsData => {
-        this.setState({countries: locationsData, selectedCountry: locationsData[0]})
+        var selectedCountry = locationsData[0];
+        const searchParams = this.state.searchParamsObj;
+        if(searchParams.location_id){
+          const country = locationsData.find(loc => loc.id == searchParams.location_id);
+          if(country) selectedCountry = country;
+        } 
+        this.setState({countries: locationsData, selectedCountry})
+        this.getItineraries(searchParams, true);
       })
       .catch(error => {
         notification.error({ message: 'An error occured while loading countries.'});
       });
-
-      this.setSearchParamsObj();
     
   }
 
@@ -74,19 +86,18 @@ class ListingPage extends React.Component <{searchParams}> {
     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);
+    
+    const {breadcrumbs} = this.state;
+    breadcrumbs[1] = {title: this.searchParamsToText()};
+    this.setState({searchParamsObj, breadcrumbs});
   }
 
 
   searchParamsToText() {
     var {keyword, year, month} = this.state.searchParamsObj;
-    return <span>{ this.state.location?.name || keyword}{`${month && `, ${month}`} ${year}`} </span>
+    const monthYear = (month || year) && `${month} ${year}`;
+    const text = [(this.state.location?.name || keyword), monthYear].filter(val => val).join(", ");
+    return <span>{ text } </span>
   }
 
   getLocation(locationId){
@@ -109,7 +120,17 @@ class ListingPage extends React.Component <{searchParams}> {
       });
   }
 
-  getItineraries(searchParams){
+  getItineraries(searchParams, init = false){
+    const locationId = searchParams.location_id;
+    const storedSearchParamsStr = localStorage.getItem("searchParams");
+    if(storedSearchParamsStr != null){
+      const storedSearchParams = JSON.parse(storedSearchParamsStr);
+      const storedLocationId = storedSearchParams.location_id;
+      if(locationId != storedLocationId || (init && locationId)) this.getLocation(locationId);
+    }else{
+      if(locationId) this.getLocation(locationId);
+    }
+
     this.seriesApi.getItineraries(searchParams)
     .then(itinerariesData => {
         this.setBreadcrumbs();
@@ -118,13 +139,16 @@ class ListingPage extends React.Component <{searchParams}> {
       .catch(error => {
         notification.error({ message: 'An error occured while loading itineraries.'});
       });
+    
+
+    localStorage.setItem("searchParams", JSON.stringify(searchParams));
   }
 
   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] != "");
+      const allHasValues = Object.entries(noKeyword).every(o => o[1] != "" && o[1] != null);
       if(allHasValues){
         const searchResultsCrumb = {title: <span>Search results</span>};
         if(breadcrumbs.length > 2){
@@ -153,7 +177,7 @@ class ListingPage extends React.Component <{searchParams}> {
     if(selectedCountry){
       const searchParamsObj = this.state.searchParamsObj;
       searchParamsObj.location_id = selectedCountry.id;
-      this.getLocation(selectedCountry.id);
+      // this.getLocation(selectedCountry.id);
 
       this.setState({selectedCountry, searchParamsObj});
       this.getItineraries(searchParamsObj);
@@ -170,7 +194,7 @@ class ListingPage extends React.Component <{searchParams}> {
         <div id="listing-page_header"> 
           <Flex vertical gap={10}>
             <h1>{this.searchParamsToText()}</h1>
-            <LocationDropdown locations={countries} selectLocation={this.selectCountry}/>
+            <LocationDropdown initialValue={selectedCountry.name} locations={countries} selectLocation={this.selectCountry}/>
           </Flex>
         </div>
       </Headline>
@@ -180,81 +204,87 @@ class ListingPage extends React.Component <{searchParams}> {
           <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>
-                                }
+        {
+          itineraries.length > 0 ? (
+            <>
+            <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>
-                        </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>
+                        </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>
+            </>
+          ) : <h1 id="no-tours-found">No tour package is found.</h1>
+        }
+
       </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>
+        <Markdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeRaw]}>{descriptionData}</Markdown>
       </Modal>
 
       <Modal title="Itinerary" open={this.state.itineraryModalOpen} onCancel={()=>this.closeModal("itineraryModalOpen")} footer={null} width={1000} centered  className="tour_details_itinerary">

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

@@ -1,6 +1,5 @@
-import React, { useState } from "react";
-import { Button, Carousel, Col, Flex, Form, Layout, Modal, notification, Row, Select, Skeleton, Space } from "antd";
-import SlickButtonFix from "../components/shared/SlickButtonFix";
+import React from "react";
+import { Button, Col, Flex, Layout, Modal, notification, Row, Skeleton, Space } from "antd";
 import { mdiAccountCash, mdiAccountGroup, mdiAirplane, mdiBagChecked, mdiBedKing, mdiClose, mdiEmailOutline, mdiFileDownload, mdiFlagTriangle, mdiMapMarker, mdiMapMarkerOutline, mdiMenuDown, mdiMenuLeft, mdiMenuRight, mdiMenuUp, mdiPhoneInTalkOutline, mdiReceiptText, mdiShieldAccount, mdiShieldAirplane, mdiSilverwareForkKnife, mdiWhatsapp } from "@mdi/js";
 import Icon from "@mdi/react";
 import Headline from "../components/shared/Headline";
@@ -13,11 +12,48 @@ import AgentsApi from "../../api-services/agents-api.service";
 import { Agent } from "../../interfaces/agent.interface";
 import PriceDetails from "../components/PriceDetails";
 import ContactAgentsForm from "../components/shared/ContactAgentsForm";
+import Markdown from "react-markdown";
+import rehypeRaw from "rehype-raw";
+import remarkGfm from "remark-gfm";
+import Slider from "react-slick";
 
 const breadcrumbs = [
   { title: 'Home' },
 ]
 
+
+const settings = {
+  dots: false,
+  arrows: true,
+  slidesToShow: 7.5,
+  pauseOnHover:false,
+  speed: 500,
+  infinite: false,
+  slidesToScroll: 1,
+  prevArrow: <Icon path={mdiMenuLeft} size={2} />,
+  nextArrow: <Icon path={mdiMenuRight} size={2} />,
+    responsive: [
+      {
+        breakpoint: 1024,
+        settings: {
+          slidesToShow: 5.5,
+        }
+      },
+      {
+        breakpoint: 768,
+        settings: {
+          slidesToShow: 3.5,
+        }
+      },
+      {
+        breakpoint: 480,
+        settings: {
+          slidesToShow: 2.5,
+        }
+      },
+    ]
+ };
+
 const thingsToKnow = (inclusionsData) => {
   return [
     {icon: <Icon path={mdiShieldAccount} size={1} />, label: "Free Travel Insurance", visible: inclusionsData.acf},
@@ -86,11 +122,10 @@ class ShowPage extends React.Component <{params;}> {
   getAgents(){
     this.agentsApi.getAgents()
       .then((agentsData:Agent[]) => {
-        const states = agentsData.filter(a => a.state != null).map(a => a.state);
-        const cities = agentsData.filter(a => a.city != null).map(a => a.city);
-        this.setState({agents: agentsData, allAgents: agentsData, loadingAgents:false, states, cities});
+        this.setState({agents: agentsData, allAgents: agentsData});
+        this.resetAgents(agentsData);
       })
-    .finally(()=>this.setState({loading: false}))
+      .finally(()=>this.setState({loading: false}))
       .catch(error => {
         notification.error({ message: 'An error occured while loading agents.'});
       });
@@ -138,11 +173,13 @@ class ShowPage extends React.Component <{params;}> {
     this.setState({states: results});
   }
 
-  resetAgents(){
-    const allAgents:Agent[] = this.state.allAgents;
-    const states = allAgents.filter(a => a.state != null).map(a => a.state);
-    const cities = allAgents.filter(a => a.city != null).map(a => a.city);
-    this.setState({states, cities});
+  resetAgents(agents?){
+    const allAgents:Agent[] = agents || this.state.allAgents;
+    const states = allAgents.filter(a => a.state?.replace(/\s/g, "") != '').map(a => a.state);
+    const cities = allAgents.filter(a => a.city?.replace(/\s/g, "") != '').map(a => a.city);
+    let uniqStates = [... new Set(states.map(x=>x))];
+    let uniqCities = [... new Set(cities.map(x=>x))];
+    this.setState({states: uniqStates, cities: uniqCities});
   }
 
   findAgents = (formValues) => {
@@ -170,6 +207,7 @@ class ShowPage extends React.Component <{params;}> {
     const dates = itinerary.tours.length == 0 ? [] : itinerary.tours.map((tour:any) => {
           return {id: tour.id, date: tour.departure_date, price: `${itinerary.priceCurrency} ${tour.price}`}
         });
+    const tourInclusives = thingsToKnow(itinerary.includings);
 
     return (
       <div id="show-page">
@@ -190,31 +228,21 @@ class ShowPage extends React.Component <{params;}> {
           </Headline>
 
           <div id="date-selector">
-            <Carousel autoplay arrows dots={false} draggable slidesToScroll= {1} slidesToShow={8}
-              prevArrow={
-                <SlickButtonFix>
-                  <Icon path={mdiMenuLeft} size={2} />
-                </SlickButtonFix>
+            <Slider {...settings}>
+              {
+                dates.map((tour, index) => {
+                  return <div key={index} className={`date-box ${selectedTour?.id == tour.id && "selected"}`} onClick={()=>this.selectTour(tour.id)}>
+                    <Flex justify="space-between" align="center" vertical gap={8}>
+                      <div className="date-box_date"> {tour.date} </div>
+                      <div>
+                        <span>From</span>
+                        <div className="date-box_price"> {tour.price} </div>
+                      </div>
+                    </Flex>
+                  </div>
+                })
               }
-              nextArrow={
-                <SlickButtonFix>
-                  <Icon path={mdiMenuRight} size={2} />
-                </SlickButtonFix>
-              }>
-                {
-                  dates.map((tour, index) => {
-                    return <div key={index} className={`date-box ${selectedTour?.id == tour.id && "selected"}`} onClick={()=>this.selectTour(tour.id)}>
-                      <Flex justify="space-between" align="center" vertical gap={8}>
-                        <div className="date-box_date"> {tour.date} </div>
-                        <div>
-                          <span>From</span>
-                          <div className="date-box_price"> {tour.price} </div>
-                        </div>
-                      </Flex>
-                    </div>
-                  })
-                }
-            </Carousel>
+            </Slider>
           </div>
         </>
         
@@ -230,36 +258,41 @@ class ShowPage extends React.Component <{params;}> {
               ) : (
                 <div className="details">
                   <Flex gap={10} vertical>
-                    <div className="details-container">
-                      <div className="details-container_header"> Things to know </div>
-                      <div className="details-container_content"> 
-                        <div id="things-to-know">
-                          {
-                            thingsToKnow(itinerary.includings)
-                              .filter(item => item.visible)
-                              .map(item => (
-                                <div className="item">
-                                  <div className="icon"> {item.icon} </div>
-                                  <label>{item.label}</label>
-                                </div>
-                              ))
-                          }
-                          {
-                            selectedTour?.guaranteed_departure && (
-                              <div className="item guaranteed">
-                                <div className="icon"> <Icon path={mdiShieldAirplane} size={1} /></div>
-                                <label>Guaranteed Departure</label>
-                              </div>
-                            )
-                          }
+                    {
+                      (tourInclusives.every(x => x.visible) || selectedTour?.guaranteed_departure) && (
+                        <div className="details-container">
+                          <div className="details-container_header"> Tour Inclusive </div>
+                          <div className="details-container_content"> 
+                            <div id="things-to-know">
+                              {
+                                tourInclusives.filter(item => item.visible)
+                                  .map(item => (
+                                    <div className="item">
+                                      <div className="icon"> {item.icon} </div>
+                                      <label>{item.label}</label>
+                                    </div>
+                                  ))
+                              }
+                              {
+                                selectedTour?.guaranteed_departure && (
+                                  <div className="item guaranteed">
+                                    <div className="icon"> <Icon path={mdiShieldAirplane} size={1} /></div>
+                                    <label>Guaranteed Departure</label>
+                                  </div>
+                                )
+                              }
+                            </div>
+                          </div>
                         </div>
-                      </div>
-                    </div>
+                      )
+                    }
 
                     <div className="details-container">
                       <div className="details-container_header"> Description </div>
                       <div className="details-container_content"> 
-                        <div id="description" className={`pre-wrap ${isCollapsed && 'collapsed'}`}>{itinerary?.description}</div>
+                        <div id="description" className={`${isCollapsed && 'collapsed'}`}>
+                          <Markdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeRaw]}>{itinerary?.description}</Markdown>
+                        </div>
                         <Button className="toggle-description" color="default" variant="filled" block onClick={this.toggleDescription}>{ isCollapsed ? 'Expand' : 'Collapse'} 
                           <Icon path={isCollapsed ? mdiMenuDown : mdiMenuUp} size="19px" /> 
                         </Button>
@@ -272,41 +305,45 @@ class ShowPage extends React.Component <{params;}> {
                           <div className="details-container_header"> Schedule Flight(s) </div>
                           <div className="details-container_content"> 
                             <Flex gap={20} vertical>
-                              <div className="schedule">
-                                <div className="flight-date"> 
-                                  <Icon path={mdiAirplane} size="12px" />
-                                  <span>23/10/2024</span>
-                                </div>
-                                <div className="flight-details"> 
-                                  <label> Kuala Lumpur (KUL) &gt; Guangzhou (CAN) </label>
-                                  <div className="flight-details_airline">
-                                    <img src="/iceholidays-assets/images/china_southern_airlines_icon.png" />
-                                    <span>China Southern Airlines CZ366</span>
-                                  </div>
-                                </div>
-                                <div className="flight-time"> 
-                                  <Flex gap={13}>
-                                    <div className="from">
-                                      <label>08:55</label>
-                                      <span>Kuala Lumpur (KUL)</span>
+                              {
+                                selectedTour?.flights.map((flight:any) => (
+                                  <div className="schedule" key={flight.id}>
+                                    <div className="flight-date"> 
+                                      <Icon path={mdiAirplane} size="12px" />
+                                      <span>{flight.departure_date}</span>
                                     </div>
-                                    <div className="flight-time_icon">
-                                      <img src="/iceholidays-assets/images/plane.png" />
+                                    <div className="flight-details"> 
+                                      <label> {flight.from_airport} &gt; {flight.to_airport} </label>
+                                      <div className="flight-details_airline">
+                                        <img src={flight.airline_logo} />
+                                        <span>{flight.airline}</span>
+                                      </div>
                                     </div>
-                                    <div className="to">
-                                      <label>12:55</label>
-                                      <span>Guangzhou (CAN)</span>
+                                    <div className="flight-time"> 
+                                      <Flex gap={13}>
+                                        <div className="from">
+                                          <label>{flight.departure_time}</label>
+                                          <span>{flight.from_airport}</span>
+                                        </div>
+                                        <div className="flight-time_icon">
+                                          <img src="/iceholidays-assets/images/plane.png" />
+                                        </div>
+                                        <div className="to">
+                                          <label>{flight.arrival_time}</label>
+                                          <span>{flight.to_airport}</span>
+                                        </div>
+                                      </Flex>
                                     </div>
-                                  </Flex>
-                                </div>
-                              </div>
+                                  </div>
+                                ))
+                              }
                             </Flex>
                           </div>
                         </div>
                       )
                     }
 
-                    <PriceDetails priceCurrency={itinerary.priceCurrency} prices={selectedTour?.prices}/>
+                    {selectedTour?.prices.length > 0 && <PriceDetails priceCurrency={itinerary.priceCurrency} prices={selectedTour?.prices}/>}
 
                   </Flex>
                 </div>