iceholidays-frontend 0.5.0 → 0.6.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9543a8bab876ad4982f485380d55661e2be5bfc331c5aeac759e9bc7994956db
-  data.tar.gz: 66a5be926856f9cb40f5cff827168e2d4d3f33ad10b60505680be62bd5f90cd4
+  metadata.gz: 6247a8c09cfbda6553642ceb846d1a1661d98edbfa83a891f3ae54dc1cc8db14
+  data.tar.gz: 5551d3ff2200d552fe3449604ff5ee3159a5096a06c19436b630e721ce2f3632
 SHA512:
-  metadata.gz: 116f2957d4e6557c76fb96a8477cd4d8316f2e0309a8a3fb412563089e13fefbe63287148095255532e29e5256c5bff7116ed07e2e0c0471f516d75a2b04066d
-  data.tar.gz: fb90a122c99796f4388378857fde351a57b8daf4baa025d2fdb0aa5d222853ef88b3840924d2e4339c78c921e765e38cbe54eced1813ae9a798061552f226afb
+  metadata.gz: f69e3e14e999712b65290da68cfda945d889b63d23acbfa94aad05351d6df78e77ca02150830688860187af1a724a763cb2402b673397140fc415eba4d99cb23
+  data.tar.gz: ad72cf692918fac66f81acf70a12790a6eec52cc34127bc8acf82ad8d1892ca5242d98a629c132066ab0bcb289452bb30f92bdc2511804eb7ff325fa46f668bc

data/app/assets/stylesheets/iceholidays/frontend/application.sass.scss

@@ -467,6 +467,13 @@ body{
       }
     }
   }
+
+  #no-tours-found{
+    font-family: $font-default;
+    font-weight: 400;
+    text-align: center;
+    color: #00000c99;
+  }
 }
 
 .tour_details_description.ant-modal{
@@ -1233,7 +1240,7 @@ body{
         font-size: 24px;
         font-weight: 500;
         line-height: 36px;
-        text-align: left;
+        text-align: center;
         text-underline-position: from-font;
         text-decoration-skip-ink: none;
       }

data/app/assets/stylesheets/iceholidays/frontend/common.scss

@@ -199,10 +199,11 @@
   margin-top: 100px;
   
   &_header{
-    height: 138px;
+    height: 150px;
     text-align: center;
     position: relative;
-    background-image: url('/iceholidays-assets/images/Layer_1.png');
+    background-image: url('/iceholidays-assets/images/TSTRibbon.png');    
+    background-repeat: no-repeat;
 
     h1{
       font-family: $font-default;

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

@@ -11,12 +11,12 @@ const pricingCategory = {
   "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",
+  // "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 = {

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

@@ -26,12 +26,12 @@ const AboutUsPage = React.FC = () => (
           <Col span={24}>
             <img src="/iceholidays-assets/images/about_us2.png"/>
           </Col>
-          <Col span={12}>
+          <Col xs={24} sm={24} lg={12}>
             <p>The Signature Tours was born from a passion for redefining travel. We believe that journeys should be more than just trips—they should be transformative experiences, filled with moments that leave an indelible mark on the soul. Catering to discerning travelers who seek more than the ordinary, The Signature Tours crafts bespoke journeys that combine sophistication, cultural immersion, and unparalleled quality. </p>
             <p>Our story begins with a vision: to create journeys that linger in the heart long after the traveler returns home. Each itinerary we design reflects our dedication to perfection. From the charm of boutique accommodations nestled in picturesque landscapes to handpicked cultural experiences that unveil the soul of a destination, every detail is thoughtfully considered to ensure your journey is as seamless as it is extraordinary.</p>
             <p>At The Signature Tours, we embrace the philosophy of the S-Tours experience—where every moment is a masterpiece. Imagine strolling through the cobblestone streets of a quaint village, savoring the aroma of freshly baked bread as locals welcome you with warm smiles. </p>
           </Col>
-          <Col span={12}>
+          <Col xs={24} sm={24} lg={12}>
             <p>Picture yourself standing atop a majestic mountain at sunrise,the golden hues of the horizon reflecting the sense of awe within you. These are the kinds of moments we strive to create—authentic, meaningful, and unforgettable.</p>
             <p>But our commitment goes beyond premium and comfort. It’s about forging connections—with places, cultures, and people. It’s about stepping into a story, whether it’s exploring ancient ruins with a seasoned archaeologist, learning the art of wine making from a passionate vintner, or sharing laughter with a local family over a home-cooked meal.</p>
             <p>At The Signature Tours, every journey is an invitation to step out of the ordinary and into a world of wonder. We’re not just about travel; we’re about creating memories that stay with you forever. This is our promise, and this is what we call the S-Tours philosophy where we deliver S-Class Journeys, Signature Memories. Because every journey should be as unique as your signature.</p>
@@ -80,10 +80,10 @@ const AboutUsPage = React.FC = () => (
             <p>We have acquired recognition and certificates such as:</p>
           </div>
         </Col>
-        <Col xs={24} sm={24} lg={8}>
+        <Col xs={24} sm={24} md={12} lg={8}>
             <img src="/iceholidays-assets/images/certificate1.png"/>
         </Col>
-        <Col xs={24} sm={24} lg={8}>
+        <Col xs={24} sm={24} md={12} lg={8}>
             <img src="/iceholidays-assets/images/certificate2.png"/>
         </Col>
       </Row>

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

@@ -180,77 +180,83 @@ 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">Not 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">

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

@@ -86,11 +86,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 +137,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) => {
@@ -190,7 +191,7 @@ class ShowPage extends React.Component <{params;}> {
           </Headline>
 
           <div id="date-selector">
-            <Carousel autoplay arrows dots={false} draggable slidesToScroll= {1} slidesToShow={8}
+            <Carousel infinite={false} arrows dots={false} draggable={true} slidesToScroll= {1} slidesToShow={8}
               prevArrow={
                 <SlickButtonFix>
                   <Icon path={mdiMenuLeft} size={2} />
@@ -272,41 +273,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>

data/lib/iceholidays/frontend/version.rb

@@ -1,5 +1,5 @@
 module Iceholidays
   module Frontend
-    VERSION = "0.5.0"
+    VERSION = "0.6.0"
   end
 end

data/public/iceholidays-assets/application.css

@@ -484,10 +484,11 @@ a {
   margin-top: 100px;
 }
 #ribbon-section_header {
-  height: 138px;
+  height: 150px;
   text-align: center;
   position: relative;
-  background-image: url("/iceholidays-assets/images/Layer_1.png");
+  background-image: url("/iceholidays-assets/images/TSTRibbon.png");
+  background-repeat: no-repeat;
 }
 #ribbon-section_header h1 {
   font-family: Poppins, san-serif;
@@ -1243,6 +1244,12 @@ body {
   display: block;
   width: 100%;
 }
+#listing-page #no-tours-found {
+  font-family: Poppins, san-serif;
+  font-weight: 400;
+  text-align: center;
+  color: rgba(0, 0, 12, 0.6);
+}
 
 .tour_details_description.ant-modal .ant-modal-title {
   font-family: Poppins, san-serif;
@@ -1873,7 +1880,7 @@ body {
   font-size: 24px;
   font-weight: 500;
   line-height: 36px;
-  text-align: left;
+  text-align: center;
   text-underline-position: from-font;
   text-decoration-skip-ink: none;
 }