iceholidays-frontend 0.9.0 → 0.11.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e979c781e464ebe531852d7b1371c068e2513c56a8253f771cf8edbd696bf11c
-  data.tar.gz: 9297a8712f483537252edb27d22d99718bde9c3cbc12814964f9c2d69bd7f4f8
+  metadata.gz: ff4468b5bb9777f1aa1b907f832ae75fc918847e5c721bc3bbf434a56d2bb11c
+  data.tar.gz: 3bbc05e5a116b40f46291d072497fd315b445e1ebb5c382dcf7a82083a1e4a45
 SHA512:
-  metadata.gz: f143cbbe5610f9c5d2431f2baff8cbdf3e38e9463ba53c853e7b7e07ee141857a3ee55dc587f9c6f848a90836a4de7e5a70eb1a2d0117b281c1f38b9767225ea
-  data.tar.gz: 92e06104065cb2753e21e49659356b38050ab35964f8426a856d39ba80847ff4c478eea710a0926eedd75cca89245d532fd28f6dc083a08e758f24fdd21e1175
+  metadata.gz: 41b36ae9c5787a229e9dabf1c7a02434dbf7dddb7f662fb6d2ec7601b3e6139aa1ac5d4e973cacfdefce3b66f1af9c810609f4159a38e2aaf0ae0eaa98051f70
+  data.tar.gz: de17d34551a35097c3e11dcd957ea0ce29199c6f07054ac8af0ba5c61dcbdbc1691198d83d41a89c7f4d5eaa0b8f59a921562e634df133483358ea812d1acd42

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

@@ -5,7 +5,7 @@
   height: 50px;
   width: 100%;
   background: linear-gradient(241.37deg, #D1AC6E -108.33%, #D1AC6E -14.72%, $secondary-color -2.73%, #B68B31 108.18%);
-  padding-inline-end: 25px;
+  // padding-inline-end: 25px;
   display: inline-flex;
   justify-content: space-between;
   align-items: center;
@@ -39,27 +39,28 @@
       padding-top: 25px;
     }
   }
+}
+
   
-  #get-brochure{
-    width: 152px;
-    height: var(--button-height);
-    padding: 7px 8px 7px 8px;
-    border-radius: 20px;
-    border: 1px solid;
-    background: linear-gradient(287.63deg, $primary-color -19.9%, $primary-color 10.87%, #F9E298 26.63%, #B68B31 93.91%);
-    border-image-source: linear-gradient(0deg, rgba(255, 255, 255, 0.5) 0%, rgba(42, 42, 42, 0.5) 100%);
-    box-shadow: 0px 3px 10px 0px #AA853E80, 0px 4px 4px 0px #F9F6F31A inset;
-    text-align: center;
-    text-transform: uppercase;
-    font-family: $font-default;
-    font-size: 14px;
-    font-weight: 500;
-    line-height: 21px;
-    letter-spacing: 0.05em;
-    text-align: left;
-    text-underline-position: from-font;
-    text-decoration-skip-ink: none;
-  }
+.get-brochure{
+  width: 152px;
+  height: var(--button-height);
+  padding: 7px 8px 7px 8px;
+  border-radius: 20px;
+  border: 1px solid;
+  background: linear-gradient(287.63deg, $primary-color -19.9%, $primary-color 10.87%, #F9E298 26.63%, #B68B31 93.91%);
+  border-image-source: linear-gradient(0deg, rgba(255, 255, 255, 0.5) 0%, rgba(42, 42, 42, 0.5) 100%);
+  box-shadow: 0px 3px 10px 0px #AA853E80, 0px 4px 4px 0px #F9F6F31A inset;
+  text-align: center;
+  text-transform: uppercase;
+  font-family: $font-default;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 21px;
+  letter-spacing: 0.05em;
+  text-align: left;
+  text-underline-position: from-font;
+  text-decoration-skip-ink: none;
 }
 
 #main-footer{
@@ -72,6 +73,7 @@
     &> div{
       border-bottom: 1px solid #DFB16380;
       padding: 10px 0;
+      flex: 100%;
     }
 
     .ant-space{
@@ -185,7 +187,8 @@
         height: 56px;
       }
 
-      .ant-menu-item:has(.logo_desktop){
+      .ant-menu-item:has(.logo_desktop),
+      .ant-menu-item:has(.get-brochure){
         display: none;
       }
     }
@@ -220,19 +223,24 @@
       display: none;
     }
 
+    #get-brochure-mobile{
+      display: none;
+    }
+
     .nav-menu{
       display: flex;
       flex: 1;
       background: transparent;
       height: 100%;
       justify-content: center;
-      margin-inline-start: 80px;
+      min-width: 100%;
+      // padding-inline-start: 25px;
   
       a{
         color: white;
         text-transform: uppercase;
         font-family: $font-default;
-        font-size: 16px;
+        font-size: 14px;
         font-weight: 500;
         line-height: 24px;
         letter-spacing: 0.05em;
@@ -251,11 +259,23 @@
       .ant-menu-item:has(.logo){
         // margin: 0 -35px;
         padding: 0;
+        order: 1 !important;        
+        padding-inline-start: 20px;
       }
+
+      .ant-menu-item:has(.get-brochure) .ant-menu-title-content{
+        height: 100%;
+        display: flex;
+        align-items: center;
+      }
+
+      // .ant-menu-item[data-menu-id*=app] {
+      //   order: 10 !important;
+      // }
     }
     
     .logo{
-      width: 304px;
+      width: 295px;
       // height: 66px;
 
       &.logo_mobile{
@@ -282,6 +302,18 @@
       }
     }
 
+    #countries{
+      flex: 1 0 25%;
+    }
+
+    #footer-menus{
+      flex: 1 0 30%;
+    }
+
+    #contact-infos{
+      flex: 1 0 20%;
+    }
+
     .footer-menu{
       padding-top: 40px;
     }
@@ -291,6 +323,52 @@
         gap: 10px !important;
         align-items: flex-start;
       }
+
+      .social-icons{
+        align-items: center;
+      }
+    }
+  }
+}
+
+@media only screen and (min-width: 899px) {
+  #main-header .nav-menu {
+    // padding-inline-start: 0;
+
+    .ant-menu-item:has(.logo) {
+      order: 2 !important;
+      padding-inline-start: 0;
+    }
+  }
+}
+
+@media only screen and (min-width: 1008px) {
+  #main-header .nav-menu .ant-menu-item:has(.logo) {
+    order: 3 !important;
+  }
+}
+
+@media only screen and (min-width: 1300px) {
+  #main-header{
+    .nav-menu{
+      padding-inline-start: 80px;
+  
+      a{
+        font-size: 16px;
+      }
+    } 
+    
+    .logo{
+      width: 304px;
+      // height: 66px;
+
+      &.logo_mobile{
+        display: none;
+      }
+
+      &.logo_desktop{
+        display: block;
+      }
     }
   }
 }

data/app/assets/stylesheets/iceholidays/frontend/utils/_antd_overrides.scss

@@ -108,15 +108,24 @@ a{
 
     &>.ant-menu-item:hover,
     &>.ant-menu-item-selected,
-    &>.ant-menu-item-active{
+    &>.ant-menu-item-active,
+    &>.ant-menu-submenu-open,
+    &>.ant-menu-submenu-selected,
+    &>.ant-menu-submenu-active{
   
       &::after{
-        display: none;
+        display: none !important;
       }
     }
   }
 
   .ant-menu-item-selected{
-    background-color: transparent;
+    background-color: transparent !important;
+    color: unset !important;
+    text-transform: uppercase;
   }
+
+  // .ant-menu-submenu-selected>.ant-menu-submenu-title{
+  //   color: #FFFFFF !important;
+  // }
 }

data/app/javascript/api-services/contact-us-api.service.ts

@@ -3,6 +3,16 @@ import axios from "axios";
 class ContactUsApi
  {
 
+  contactInquiry(formValues){
+    const apiUrl = "/api/v1/inquiries";
+
+    return axios.post(apiUrl, {inquiry: formValues})
+    .then(response => {
+      return Promise.resolve(null);
+    });
+  }
+
+
   getStates(): Promise<any[]> {
     const apiUrl = "/api/v1/states";
 

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/layouts/MainHeader.tsx

@@ -9,39 +9,6 @@ import BrochueApi from "../../api-services/brochure-api.service";
 type MenuItem = Required<MenuProps>['items'][number];
 
 
-const items: MenuItem[] = [
-  {
-    key: 'app',
-    label: <Link to="/app"> Home </Link>
-  },
-  {
-    key: 'about-us',
-    label: <Link to="/app/about-us"> About Us </Link>
-  },
-  {
-    key: 'countries',
-    label: <Link to="/app/countries"> Countries </Link>
-  },
-  {
-    key: 'blog',
-    label: <Link to="/app/blog"> Blog </Link>
-  },
-  {
-    key: 'logo',
-    label: <img src="/iceholidays-assets/images/logo.png" className="logo logo_desktop"/>,
-    disabled: true
-  },
-  {
-    key: 'contact-agents',
-    label: <Link to="/app/contact-agents"> Contact Agents </Link>
-  },
-  {
-    key: 'contact-us',
-    label: <Link to="/app/contact-us"> Contact Us </Link>
-  },
-]
-
-
 function withLocation(Component) {
   return props => <Component {...props} location={useLocation()} />;
 }
@@ -49,6 +16,45 @@ function withLocation(Component) {
 class MainHeader extends React.Component <{location}> {
   brochureApi = new BrochueApi;
 
+
+
+  items: MenuItem[] = [
+    {
+      key: 'app',
+      label: <Link to="/app"> Home </Link>
+    },
+    {
+      key: 'about-us',
+      label: <Link to="/app/about-us"> About Us </Link>
+    },
+    {
+      key: 'countries',
+      label: <Link to="/app/countries"> Countries </Link>
+    },
+    {
+      key: 'blog',
+      label: <Link to="/app/blog"> Blog </Link>
+    },
+    {
+      key: 'logo',
+      label: <img src="/iceholidays-assets/images/logo.png" className="logo logo_desktop"/>,
+      disabled: true
+    },
+    {
+      key: 'contact-agents',
+      label: <Link to="/app/contact-agents"> Contact Agents </Link>
+    },
+    {
+      key: 'contact-us',
+      label: <Link to="/app/contact-us"> Contact Us </Link>
+    },
+    {
+      key: 'brochure',
+      label: <Button onClick={()=>this.downloadBrochure()} className="get-brochure" id="get-brochure-menu" type="primary"><Icon path={mdiFileDownload} size="18px" /> get brochure</Button>,
+      disabled: true
+    },
+  ]
+
   state = {
     open: false,
     current: "",
@@ -64,7 +70,7 @@ class MainHeader extends React.Component <{location}> {
   }
 
 
-  downloadBrochure = () => {
+  downloadBrochure() {
     this.brochureApi.getBrochure()
       .then((brochureUrl:any) => {
         // const blob = brochureUrl.blob();
@@ -107,12 +113,12 @@ class MainHeader extends React.Component <{location}> {
     const {open, current } = this.state;
     return (
       <div id="main-header">
-        <Menu mode="horizontal" items={items} onClick={this.onClick} selectedKeys={[current]} className="nav-menu"/>
+        <Menu mode="horizontal" items={this.items} onClick={this.onClick} selectedKeys={[current]} className="nav-menu"/>
   
         <a href="/app"><img src="/iceholidays-assets/images/logo_mobile.png" className="logo logo_mobile"/></a>
   
         <div id="nav-buttons">
-        <Button onClick={this.downloadBrochure} id="get-brochure" type="primary"><Icon path={mdiFileDownload} size="18px" /> get brochure</Button>
+          <Button onClick={()=>this.downloadBrochure()} className="get-brochure" id="get-brochure-mobile" type="primary"><Icon path={mdiFileDownload} size="18px" /> get brochure</Button>
   
           <Button id="toggle-menu" type="primary" onClick={()=>this.showDrawer()}>
             <Icon path={mdiMenu} size="25px" />
@@ -120,7 +126,7 @@ class MainHeader extends React.Component <{location}> {
         </div>
   
         <Drawer title={null} onClose={()=>this.onClose()} open={open} id="nav-drawer">
-          <Menu items={items} onClick={this.onClick} selectedKeys={[current]} className="nav-menu_mobile"/>
+          <Menu items={this.items} onClick={this.onClick} selectedKeys={[current]} className="nav-menu_mobile"/>
         </Drawer>
       </div>
     )

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;
@@ -44,7 +44,13 @@ export default class ContactUsPage extends React.Component {
   }
 
   submitForm(formValues) {
-    console.log(formValues)
+    this.api.contactInquiry(formValues)
+      .then(_ => {
+        notification.success({message: "Inquiry sent."})
+      })
+      .catch(error => {
+        notification.error({ message: 'An error occured while sending inquiry.'});
+      });
   }
 
   render(){
@@ -67,24 +73,24 @@ export default class ContactUsPage extends React.Component {
               validateMessages={validateMessages}
               onFinish={(formValues)=>this.submitForm(formValues)}
             >
-              <Form.Item label="Enter Name" name="name">
+              <Form.Item label="Enter Name" name="name" required>
                 <Input placeholder="Enter Here" />
               </Form.Item>
   
               <Row gutter={20}>
                 <Col span={12}>
-                  <Form.Item label="Enter Email" name="email" rules={[{ type: 'email' }]}>
+                  <Form.Item label="Enter Email" name="email" rules={[{ type: 'email' }]} required>
                     <Input placeholder="Enter Here" />
                   </Form.Item>
                 </Col>
                 <Col span={12}>
-                  <Form.Item label="Enter Phone Number" name="phoneNumber">
+                  <Form.Item label="Enter Phone Number" name="phone" required>
                     <Input placeholder="Enter Here" />
                   </Form.Item>
                 </Col>
               </Row>
   
-              <Form.Item label="Select State" name="state">
+              <Form.Item label="Select State" name="state" required>
                 <Select
                     placeholder="Please Select"
                     options={this.state?.states}
@@ -99,7 +105,7 @@ export default class ContactUsPage extends React.Component {
                 <Input placeholder="Enter Here" />
               </Form.Item>
   
-              <Form.Item label="Write your message" name="message">
+              <Form.Item label="Write your message" name="message" required>
                 <TextArea rows={4} placeholder="Write Here"/>
               </Form.Item>
   
@@ -131,13 +137,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>
-                  <a target="_blank" href="javascript:void(0)" style={{pointerEvents: "none"}}>
-                    <Icon path={mdiYoutube} size={1} />
+                  <a target="_blank" href="https://wa.me/60128688148">
+                    <Icon path={mdiWhatsapp} 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.9.0"
+    VERSION = "0.11.0"
   end
 end