iceholidays-frontend 0.10.0 → 0.12.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1f50c77c77c53b3790f60e5635bd2de1268a0085c7a95508fb31db394271f3a1
-  data.tar.gz: eb86f0b2a34fd67b3b14a52a2f4d03d4b6210127c989c75674f16f61284d5b16
+  metadata.gz: a3ec38ae7c3d23dd0728bb4db5695e9ce2a59be9d3ec5b4318b57b2bdef2883d
+  data.tar.gz: 786da9eb7f5a1242153cb409a080dec4645ab22040dd0efd1af221b130fa279e
 SHA512:
-  metadata.gz: 22ccaa192dc4db372f231e1c61c35a7db6f1ffded4c098df3ac914a48c25d4a57eab80c5a71bcc79d551cc0e7baaf3a493e0e2ab1761f37265da662ad606a4c1
-  data.tar.gz: 50ae100ed07dc32ed4079cab8e0aa76cb3ee1e10a5c30e19b347c08abb23b98d37ed02aba67e925be720dc2b4410fcd385df9b03d54f8d28cff6ca6e35f98747
+  metadata.gz: 50e8ad6881de2f85f52f003517f290beabb02725320821b689236fa31cc144115d9317f6eeffe4be1cdbeac878698de10c772c29a300d8ecc4a39879cca5f951
+  data.tar.gz: adbae28d5c2eb0a3d1e59163d21e11913592b52b45f5b2e78ade3f2f363a64e67cb81a92bc38e908a9fb54eab02b921ad4276ae67ccbac061ee7acdee3b19991

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{
@@ -186,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;
       }
     }
@@ -215,25 +217,30 @@
   }
 }
 
-@media only screen and (min-width: 768px) {
+@media only screen and (min-width: 769px) {
   #main-header{
     #toggle-menu{
       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;
@@ -252,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{
@@ -310,4 +329,46 @@
       }
     }
   }
+}
+
+@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,39 @@ 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;
+  // }
+}
+
+.ant-float-btn-default{
+  background-color: #F2F2F280;
+  width: 42px;
+  height: 42px;
+  border-radius: 50px;
+}
+
+.ant-float-btn .ant-float-btn-body .ant-float-btn-content .ant-float-btn-icon{
+  width: 32px;
+
+  svg{
+    color: $primary-color;
   }
 }

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

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

data/app/javascript/application.js

@@ -2,4 +2,19 @@
 import "./react"
 //= require jquery3
 //= require popper
-//= require bootstrap
+//= require bootstrap
+
+import '@ant-design/v5-patch-for-react-19';
+
+import { unstableSetRender } from 'antd';
+import { createRoot } from 'react-dom/client';
+
+unstableSetRender((node, container) => {
+  container._reactRoot ||= createRoot(container);
+  const root = container._reactRoot;
+  root.render(node);
+  return async () => {
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    root.unmount();
+  };
+});

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

@@ -1,8 +1,10 @@
 import React from "react";
 import { Outlet } from "react-router-dom";
-import { Layout } from 'antd';
+import { FloatButton, Layout } from 'antd';
 import MainHeader from "./MainHeader";
 import MainFooter from "./MainFooter";
+import { mdiArrowUpBold } from "@mdi/js";
+import Icon from "@mdi/react";
 
 const { Content } = Layout;
 
@@ -12,6 +14,7 @@ const MainLayout = () => {
       <MainHeader/> 
       <Content>
         <Outlet/>
+        <FloatButton.BackTop icon={<Icon path={mdiArrowUpBold} size="32px" />}/>
       </Content>
       {/* <MainFooter/>  */}
     </Layout>

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, mdiWhatsapp, mdiYoutube } from "@mdi/js";
+import { Button, Col, Flex, Form, FormInstance, Input, notification, Row, Select, Space } from "antd";
+import { mdiFacebook, mdiInstagram, mdiWhatsapp } from "@mdi/js";
 import Icon from "@mdi/react";
 import ContactUsApi from "../../api-services/contact-us-api.service";
 const { TextArea } = Input;
@@ -27,6 +27,7 @@ const validateMessages = {
 
 export default class ContactUsPage extends React.Component {
   api = new ContactUsApi;
+  contactForm = React.createRef<FormInstance>();
 
   state = {
     states: []
@@ -44,7 +45,16 @@ export default class ContactUsPage extends React.Component {
   }
 
   submitForm(formValues) {
-    console.log(formValues)
+    this.api.contactInquiry(formValues)
+      .then(success => {
+        if(success){
+          notification['success']({message: "Inquiry sent."});
+          this.contactForm.current?.resetFields();
+        }
+      })
+      .catch(error => {
+        notification.error({ message: 'An error occured while sending inquiry.'});
+      });
   }
 
   render(){
@@ -61,30 +71,31 @@ export default class ContactUsPage extends React.Component {
               <span>Send us your enquiry</span>
             </div>
             <Form
+              ref={this.contactForm}
               autoComplete="off"
               layout="vertical"
               variant="filled"
               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 +110,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>
   

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

@@ -112,7 +112,7 @@ class ShowPage extends React.Component <{params;}> {
       })
     .finally(()=>this.setState({loading: false}))
       .catch(error => {
-        notification.error({ message: 'An error occured while loading countries.'});
+        notification.error({ message: 'An error occured while loading itinerary.'});
       });
 
     this.getAgents();

data/lib/iceholidays/frontend/version.rb

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

data/public/iceholidays-assets/application.css

@@ -339,11 +339,27 @@ a {
   color: rgba(0, 0, 0, 0.5019607843);
 }
 
-.ant-menu-light.ant-menu-horizontal > .ant-menu-item:hover::after, .ant-menu-light.ant-menu-horizontal > .ant-menu-item-selected::after, .ant-menu-light.ant-menu-horizontal > .ant-menu-item-active::after {
-  display: none;
+.ant-menu-light.ant-menu-horizontal > .ant-menu-item:hover::after, .ant-menu-light.ant-menu-horizontal > .ant-menu-item-selected::after, .ant-menu-light.ant-menu-horizontal > .ant-menu-item-active::after, .ant-menu-light.ant-menu-horizontal > .ant-menu-submenu-open::after, .ant-menu-light.ant-menu-horizontal > .ant-menu-submenu-selected::after, .ant-menu-light.ant-menu-horizontal > .ant-menu-submenu-active::after {
+  display: none !important;
 }
 .ant-menu-light .ant-menu-item-selected {
-  background-color: transparent;
+  background-color: transparent !important;
+  color: unset !important;
+  text-transform: uppercase;
+}
+
+.ant-float-btn-default {
+  background-color: rgba(242, 242, 242, 0.5019607843);
+  width: 42px;
+  height: 42px;
+  border-radius: 50px;
+}
+
+.ant-float-btn .ant-float-btn-body .ant-float-btn-content .ant-float-btn-icon {
+  width: 32px;
+}
+.ant-float-btn .ant-float-btn-body .ant-float-btn-content .ant-float-btn-icon svg {
+  color: #DCB062;
 }
 
 .slick-track {
@@ -356,7 +372,6 @@ a {
   height: 50px;
   width: 100%;
   background: linear-gradient(241.37deg, #D1AC6E -108.33%, #D1AC6E -14.72%, #F9E298 -2.73%, #B68B31 108.18%);
-  padding-inline-end: 25px;
   display: inline-flex;
   justify-content: space-between;
   align-items: center;
@@ -386,7 +401,8 @@ a {
 #main-header .logo.logo_mobile {
   padding-top: 25px;
 }
-#main-header #get-brochure {
+
+.get-brochure {
   width: 152px;
   height: var(--button-height);
   padding: 7px 8px 7px 8px;
@@ -508,7 +524,8 @@ a {
   padding: 16px 0;
   height: 56px;
 }
-#nav-drawer.ant-drawer-content .ant-drawer-body .ant-menu-light .ant-menu-item:has(.logo_desktop) {
+#nav-drawer.ant-drawer-content .ant-drawer-body .ant-menu-light .ant-menu-item:has(.logo_desktop),
+#nav-drawer.ant-drawer-content .ant-drawer-body .ant-menu-light .ant-menu-item:has(.get-brochure) {
   display: none;
 }
 #nav-drawer.ant-drawer-content .ant-drawer-body .nav-menu_mobile a {
@@ -529,23 +546,26 @@ a {
     white-space: nowrap;
   }
 }
-@media only screen and (min-width: 768px) {
+@media only screen and (min-width: 769px) {
   #main-header #toggle-menu {
     display: none;
   }
+  #main-header #get-brochure-mobile {
+    display: none;
+  }
   #main-header .nav-menu {
     display: flex;
     flex: 1;
     background: transparent;
     height: 100%;
     justify-content: center;
-    margin-inline-start: 80px;
+    min-width: 100%;
   }
   #main-header .nav-menu a {
     color: white;
     text-transform: uppercase;
     font-family: Poppins, san-serif;
-    font-size: 16px;
+    font-size: 14px;
     font-weight: 500;
     line-height: 24px;
     letter-spacing: 0.05em;
@@ -559,9 +579,16 @@ a {
   }
   #main-header .nav-menu .ant-menu-item:has(.logo) {
     padding: 0;
+    order: 1 !important;
+    padding-inline-start: 20px;
+  }
+  #main-header .nav-menu .ant-menu-item:has(.get-brochure) .ant-menu-title-content {
+    height: 100%;
+    display: flex;
+    align-items: center;
   }
   #main-header .logo {
-    width: 304px;
+    width: 295px;
   }
   #main-header .logo.logo_mobile {
     display: none;
@@ -600,6 +627,34 @@ a {
     align-items: center;
   }
 }
+@media only screen and (min-width: 899px) {
+  #main-header .nav-menu .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;
+  }
+  #main-header .nav-menu a {
+    font-size: 16px;
+  }
+  #main-header .logo {
+    width: 304px;
+  }
+  #main-header .logo.logo_mobile {
+    display: none;
+  }
+  #main-header .logo.logo_desktop {
+    display: block;
+  }
+}
 #headline {
   --side-padding: 20px;
 }