iceholidays-frontend 0.10.0 → 0.11.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1f50c77c77c53b3790f60e5635bd2de1268a0085c7a95508fb31db394271f3a1
-  data.tar.gz: eb86f0b2a34fd67b3b14a52a2f4d03d4b6210127c989c75674f16f61284d5b16
+  metadata.gz: ff4468b5bb9777f1aa1b907f832ae75fc918847e5c721bc3bbf434a56d2bb11c
+  data.tar.gz: 3bbc05e5a116b40f46291d072497fd315b445e1ebb5c382dcf7a82083a1e4a45
 SHA512:
-  metadata.gz: 22ccaa192dc4db372f231e1c61c35a7db6f1ffded4c098df3ac914a48c25d4a57eab80c5a71bcc79d551cc0e7baaf3a493e0e2ab1761f37265da662ad606a4c1
-  data.tar.gz: 50ae100ed07dc32ed4079cab8e0aa76cb3ee1e10a5c30e19b347c08abb23b98d37ed02aba67e925be720dc2b4410fcd385df9b03d54f8d28cff6ca6e35f98747
+  metadata.gz: 41b36ae9c5787a229e9dabf1c7a02434dbf7dddb7f662fb6d2ec7601b3e6139aa1ac5d4e973cacfdefce3b66f1af9c810609f4159a38e2aaf0ae0eaa98051f70
+  data.tar.gz: de17d34551a35097c3e11dcd957ea0ce29199c6f07054ac8af0ba5c61dcbdbc1691198d83d41a89c7f4d5eaa0b8f59a921562e634df133483358ea812d1acd42

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,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/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

@@ -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>
   

data/lib/iceholidays/frontend/version.rb

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

data/public/iceholidays-assets/application.css

@@ -339,11 +339,13 @@ 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;
 }
 
 .slick-track {
@@ -356,7 +358,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 +387,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 +510,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 +532,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 +565,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 +613,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;
 }