iceholidays-frontend 0.8.0 → 0.10.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1997e35efb30d45dd06e1453ab369de2c2a06304ba6a7af1bc0d8b83b6b55470
-  data.tar.gz: b492bbe782f6c15950eb6b6b18c3c8ba51bec70e892bdef614ef97a291b62b7f
+  metadata.gz: 1f50c77c77c53b3790f60e5635bd2de1268a0085c7a95508fb31db394271f3a1
+  data.tar.gz: eb86f0b2a34fd67b3b14a52a2f4d03d4b6210127c989c75674f16f61284d5b16
 SHA512:
-  metadata.gz: 2b3e0a7c2aae85d4bd6ba9ff20d19913d817839642e264d765b4fb85a66cdf83bd027f0152b437c2e92df0ab972b4330d3be47934821b9228302a94fc6fce9e8
-  data.tar.gz: 655a05ac3125ab3c04dd4bd110411795030cffb4aecb196987fdb86eee38b46e32415ce34f568d0488bb807b8d8d4fae31022b01f4d0cafd71cb7b5b48938426
+  metadata.gz: 22ccaa192dc4db372f231e1c61c35a7db6f1ffded4c098df3ac914a48c25d4a57eab80c5a71bcc79d551cc0e7baaf3a493e0e2ab1761f37265da662ad606a4c1
+  data.tar.gz: 50ae100ed07dc32ed4079cab8e0aa76cb3ee1e10a5c30e19b347c08abb23b98d37ed02aba67e925be720dc2b4410fcd385df9b03d54f8d28cff6ca6e35f98747

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

@@ -278,6 +278,12 @@
   text-transform: uppercase;
 }
 
+.loader{
+  width: 100%;
+  text-align: center;
+  margin: 20px 0;
+}
+
 @media only screen and (min-width: 769px) {
   #headline{
     --side-padding: 10%;

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

@@ -72,6 +72,7 @@
     &> div{
       border-bottom: 1px solid #DFB16380;
       padding: 10px 0;
+      flex: 100%;
     }
 
     .ant-space{
@@ -208,7 +209,13 @@
 
 }
 
-@media only screen and (min-width: 769px) {
+@media only screen and (min-width: 450px) {
+  #main-footer_links a{
+    white-space: nowrap;
+  }
+}
+
+@media only screen and (min-width: 768px) {
   #main-header{
     #toggle-menu{
       display: none;
@@ -276,6 +283,18 @@
       }
     }
 
+    #countries{
+      flex: 1 0 25%;
+    }
+
+    #footer-menus{
+      flex: 1 0 30%;
+    }
+
+    #contact-infos{
+      flex: 1 0 20%;
+    }
+
     .footer-menu{
       padding-top: 40px;
     }
@@ -283,6 +302,10 @@
     .contact-info{
       .ant-flex{
         gap: 10px !important;
+        align-items: flex-start;
+      }
+
+      .social-icons{
         align-items: center;
       }
     }

data/app/javascript/react/layouts/MainFooter.tsx

@@ -61,7 +61,7 @@ export default class MainFooter extends React.Component<IMainFooterProps> {
     return (
       <div id="main-footer">
         <Row id="main-footer_links" gutter={[12, 12]}>
-          <Col flex="1 0 25%" className="column">
+          <Col id="countries" className="column">
             <Space direction="vertical">
               <div className="link-group-title">Countries</div>
               <div className="link-group-items">
@@ -71,7 +71,7 @@ export default class MainFooter extends React.Component<IMainFooterProps> {
               </div>
             </Space>
           </Col>
-          <Col flex="1 0 30%" className="column footer-menu">
+          <Col id="footer-menus" className="column footer-menu">
             <Space direction="vertical">
               <div className="link-group-items">
                 {
@@ -80,16 +80,15 @@ export default class MainFooter extends React.Component<IMainFooterProps> {
               </div>
             </Space>
           </Col>
-          <Col flex="1 0 20%" className="column contact-info">
+          <Col id="contact-infos" className="column contact-info">
             <Space direction="vertical" align="center">
               <Flex vertical gap="20px" align="center">
                 <div className="link-group-title">Contact Us</div>
                 <div><a href="/app/contact-agents">contact agents</a></div>
                 <div className="link-group-title">Follow us on</div>
-                <Flex gap={20} justify="space-between">  
+                <Flex gap={20} justify="space-between" className="social-icons">  
                   <a target="_blank" href="https://www.facebook.com/thesignaturetour"><img src="/iceholidays-assets/images/social/ico_fb.png"/></a>
-                  <a target="_blank" style={{pointerEvents: "none"}} href="javascript:void(0)"><img src="/iceholidays-assets/images/social/ico_twitter.png"/></a>
-                  <a target="_blank" style={{pointerEvents: "none"}} href="javascript:void(0)"><img src="/iceholidays-assets/images/social/ico_yt.png"/></a>
+                  <a target="_blank" href="https://wa.me/60128688148"><img src="/iceholidays-assets/images/social/ico_whatsapp.png"/></a>
                   <a target="_blank" href="https://www.instagram.com/thesignaturetours"><img src="/iceholidays-assets/images/social/ico_ig.png"/></a>
                 </Flex>
               </Flex>

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

@@ -1,7 +1,7 @@
 import React from "react";
 import Headline from "../components/shared/Headline";
 import { Button, Col, Flex, Form, Input, notification, Row, Select, Space } from "antd";
-import { mdiFacebook, mdiInstagram, mdiTwitter, mdiYoutube } from "@mdi/js";
+import { mdiFacebook, mdiInstagram, mdiTwitter, mdiWhatsapp, mdiYoutube } from "@mdi/js";
 import Icon from "@mdi/react";
 import ContactUsApi from "../../api-services/contact-us-api.service";
 const { TextArea } = Input;
@@ -131,13 +131,9 @@ export default class ContactUsPage extends React.Component {
                   <a target="_blank" href="https://www.instagram.com/thesignaturetours">
                     <Icon path={mdiInstagram} size={1} />
                   </a>
-                  <a target="_blank" href="javascript:void(0)" style={{pointerEvents: "none"}}>
-                    <Icon path={mdiTwitter} size={1} />
+                  <a target="_blank" href="https://wa.me/60128688148">
+                    <Icon path={mdiWhatsapp} size={1} />
                   </a>
-                  <a target="_blank" href="javascript:void(0)" style={{pointerEvents: "none"}}>
-                    <Icon path={mdiYoutube} size={1} />
-                  </a>
-                  <img src="/iceholidays-assets/images/social.png" className="social-icon"/>
                 </Space>
               </div>
             </Col>

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

@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import { Badge, Breadcrumb, Button, Flex, Modal, Space, Select, Row, Col, notification } from "antd";
+import { Badge, Breadcrumb, Button, Flex, Modal, Space, Select, Row, Col, notification, Spin } from "antd";
 import FilterPills from "../widgets/FilterPills";
 import { Link, useSearchParams } from "react-router-dom";
 import { mdiDotsHorizontalCircleOutline, mdiFileDownload, mdiFilterVariant, mdiInformationOutline, mdiMapMarkerOutline } from "@mdi/js";
@@ -42,6 +42,7 @@ class ListingPage extends React.Component <{searchParams}> {
   seriesApi = new SeriesApi;
 
   state = {
+    loading: true,
     countries: [],
     selectedCountry: {name: "", cities: []},
     searchParamsObj: {keyword: "", year: "", month: "", location_id: null},
@@ -121,6 +122,8 @@ class ListingPage extends React.Component <{searchParams}> {
   }
 
   getItineraries(searchParams, init = false){
+    this.setState({loading: true});
+
     const locationId = searchParams.location_id;
     const storedSearchParamsStr = localStorage.getItem("searchParams");
     if(storedSearchParamsStr != null){
@@ -132,10 +135,11 @@ class ListingPage extends React.Component <{searchParams}> {
     }
 
     this.seriesApi.getItineraries(searchParams)
-    .then(itinerariesData => {
+      .then(itinerariesData => {
         this.setBreadcrumbs();
         this.setState({itineraries: itinerariesData})
       })
+      .finally(()=>this.setState({loading: false}))
       .catch(error => {
         notification.error({ message: 'An error occured while loading itineraries.'});
       });
@@ -179,14 +183,14 @@ class ListingPage extends React.Component <{searchParams}> {
       searchParamsObj.location_id = selectedCountry.id;
       // this.getLocation(selectedCountry.id);
 
-      this.setState({selectedCountry, searchParamsObj});
+      this.setState({selectedCountry, searchParamsObj, loading: true});
       this.getItineraries(searchParamsObj);
     }
   }
 
 
   render(){
-    const {countries, selectedCountry, searchParamsObj, itineraries, location, breadcrumbs, descriptionData, fileUrlData, departureDatesData } = this.state;
+    const {loading, countries, selectedCountry, searchParamsObj, itineraries, location, breadcrumbs, descriptionData, fileUrlData, departureDatesData } = this.state;
 
     return <div id="listing-page">
     
@@ -204,8 +208,9 @@ class ListingPage extends React.Component <{searchParams}> {
           <FilterPills items={selectedCountry.cities} bindLabel="name" bindValue="location_id" initialValue={searchParamsObj} selectFilter={(selected) => this.getItineraries(selected)}></FilterPills>
         </Space>
 
+        <Spin size="large" className="loader" spinning={loading}/>
         {
-          itineraries.length > 0 ? (
+          !loading && (itineraries.length > 0 ? (
             <>
             <div id="legends">
               <Space size={17}>
@@ -278,9 +283,10 @@ class ListingPage extends React.Component <{searchParams}> {
               </Flex>
             </div>
             </>
-          ) : <h1 id="no-tours-found">No tour package is found.</h1>
+          ) : <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">

data/lib/iceholidays/frontend/version.rb

@@ -1,5 +1,5 @@
 module Iceholidays
   module Frontend
-    VERSION = "0.8.0"
+    VERSION = "0.10.0"
   end
 end

data/public/iceholidays-assets/application.css

@@ -415,6 +415,7 @@ a {
 #main-footer_links > div {
   border-bottom: 1px solid rgba(223, 177, 99, 0.5019607843);
   padding: 10px 0;
+  flex: 100%;
 }
 #main-footer_links .ant-space {
   width: 100%;
@@ -523,7 +524,12 @@ a {
   color: #5B4713;
 }
 
-@media only screen and (min-width: 769px) {
+@media only screen and (min-width: 450px) {
+  #main-footer_links a {
+    white-space: nowrap;
+  }
+}
+@media only screen and (min-width: 768px) {
   #main-header #toggle-menu {
     display: none;
   }
@@ -574,11 +580,23 @@ a {
   #main-footer_links > div {
     padding: 10px 0 40px;
   }
+  #main-footer #countries {
+    flex: 1 0 25%;
+  }
+  #main-footer #footer-menus {
+    flex: 1 0 30%;
+  }
+  #main-footer #contact-infos {
+    flex: 1 0 20%;
+  }
   #main-footer .footer-menu {
     padding-top: 40px;
   }
   #main-footer .contact-info .ant-flex {
     gap: 10px !important;
+    align-items: flex-start;
+  }
+  #main-footer .contact-info .social-icons {
     align-items: center;
   }
 }
@@ -798,6 +816,12 @@ a {
   text-transform: uppercase;
 }
 
+.loader {
+  width: 100%;
+  text-align: center;
+  margin: 20px 0;
+}
+
 @media only screen and (min-width: 769px) {
   #headline {
     --side-padding: 10%;