iceholidays-frontend 0.4.0 → 0.5.0

data/app/javascript/react/components/shared/ContactAgentsForm.tsx

@@ -0,0 +1,44 @@
+import { Form, Select, Button, Flex } from "antd";
+import React from "react";
+
+export default function ContactAgentsForm(
+  props: {
+    states: any[];
+    cities: any[]; 
+    findAgents;
+    filterCities;
+    filterStates;
+  }
+) {
+  const {states, cities, findAgents, filterCities, filterStates} = props;
+  
+  return (
+    <Form layout="vertical" onFinish={findAgents}>
+      <Form.Item wrapperCol={{ span: 24 }} label="Select State" name="state">
+        <Select 
+          allowClear={true} 
+          showSearch
+          filterOption={(input, option) =>
+            (option?.label ?? '').toString().toLowerCase().includes(input.toLowerCase())
+          } 
+          placeholder="Please select" 
+          options={states.map((s:any) => {return {label: s, value: s}})} 
+          onChange={filterCities}/>
+      </Form.Item>
+      <Form.Item wrapperCol={{ span: 24 }} label="City" name="city">
+        <Select 
+          allowClear={true} 
+          showSearch
+          filterOption={(input, option) =>
+            (option?.label ?? '').toString().toLowerCase().includes(input.toLowerCase())
+          } 
+          placeholder="Please select" 
+          options={cities.map((s:any) => {return {label: s, value: s}})} 
+          onChange={filterStates}/>
+      </Form.Item>
+      <Flex align="flex-end" justify="center">
+        <Button type="primary" className="find-button" htmlType="submit">Find Agent</Button>
+      </Flex>
+    </Form>
+  )
+}

data/app/javascript/react/components/shared/Headline.tsx

@@ -6,6 +6,7 @@ import SearchBarWidget from "../../widgets/SearchBarWidget";
 const Headline = (
   props: {
     bannerImage: string;
+    showSearch?: boolean;
     title?: string;
     children?: JSX.Element;
     breadcrumbs: any[];
@@ -14,7 +15,7 @@ const Headline = (
   const { bannerImage, title, children, breadcrumbs } = props;
   return (
     <>
-      <SearchBarWidget/>
+      {(props.showSearch == undefined || props.showSearch && props.showSearch == true) && <SearchBarWidget/>}
       <div id="headline">
         <div id="headline_banner" style={{backgroundImage: `url(${bannerImage})`}}></div>
         <div id="headline_header"> 

data/app/javascript/react/components/shared/LocationDropdown.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import Icon from "@mdi/react";
+import { Location } from "../../../interfaces/country.interface";
+import { Select } from "antd";
+import { mdiFilterVariant } from "@mdi/js";
+
+
+const LocationDropdown = (
+  props: {
+    locations:Location[];
+    selectLocation;
+  }
+) => {
+  const { locations } = props;
+
+  return (
+    <div className="location-dropdown">
+      <Select
+          className="location-filter"
+          suffixIcon={<Icon path={mdiFilterVariant} size="18px" />}
+          variant="borderless"
+          defaultValue="china"
+          options={locations.map((location) => ({label: location.name, value: location.id}))}
+          dropdownStyle={{padding: "15px 20px", borderRadius: "20px", boxShadow: "0px 3.08px 16.47px 0px #00000040"}}
+          optionRender={(option) => (
+            <div className="location-filter_option"> {option.label} </div>
+          )}
+          onChange={props.selectLocation}
+        />
+    </div>
+  )
+}
+
+export default LocationDropdown;

data/app/javascript/react/components/shared/{Postcard.tsx → LocationPostcards.tsx}

@@ -2,6 +2,7 @@ import React from "react";
 import { Link } from "react-router-dom";
 import { mdiMenuRight } from "@mdi/js";
 import Icon from "@mdi/react";
+import { Location } from "../../../interfaces/country.interface";
 
 
 const Postcard = (
@@ -28,4 +29,24 @@ const Postcard = (
   )
 }
 
-export default Postcard;
+const LocationPostcards = (
+  props: {
+    locations:Location[];
+  }
+) => {
+  const { locations } = props;
+
+  const listingLink = (locationId: number) => {
+    return `/app/listing?location_id=${locationId}`;
+  }
+
+  return (
+    <div className="postcards">
+      {
+        locations.map((city, index)=><Postcard key={index} link={listingLink(city.id)} image={city.cover} name={city.name} tourCount={city.tourCount}/>)
+      }
+    </div>
+  )
+}
+
+export default LocationPostcards;

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

@@ -1,10 +1,37 @@
-import { notification, Space } from "antd";
+import { Col, Flex, notification, Row, Space } from "antd";
 import React from "react";
 import { Link } from "react-router-dom";
 import LocationsApi from "../../api-services/locations-api.service";
 import { Country } from "../../interfaces/country.interface";
 
 
+const menus = [
+  {
+    label: "Home",
+    link: "/app"
+  },
+  {
+    label: "pdpa",
+    link: "/app"
+  },
+  {
+    label: "about us",
+    link: "/app/about-us"
+  },
+  {
+    label: "privacy policy",
+    link: "/app"
+  },
+  {
+    label: "contact us",
+    link: "/app/contact-us"
+  },
+  {
+    label: "terms & conditions",
+    link: "/app"
+  },
+]
+
 export default class MainFooter extends React.Component {
   api = new LocationsApi;
 
@@ -25,44 +52,42 @@ export default class MainFooter extends React.Component {
   render(){
     return (
       <div id="main-footer">
-        <div id="main-footer_links">
-          <div>
-            <div className="link-group-title">Countries</div>
-            <div>
-              {
-                this.state.countries.map((country: Country)=> <Link to={`/app/listing?keyword=${country.name}`}>{country.name}</Link> )
-              }
-            </div>
-          </div>
-          <div>
-            <div className="link-group-title">&nbsp;</div>
-            <div>
-              <Link to="/app">home</Link>
-              <Link to="/app">pdpa</Link>
-              <Link to="/app/about-us">about us</Link>
-              <Link to="/app">privacy policy</Link>
-              <Link to="/app/contact-us">contact us</Link>
-              <Link to="/app">terms & conditions</Link>
-            </div>
-          </div>
-          <div>
-            <div>
-              <div className="link-group-title">Contact Us</div>
-              <div><Link to="/app/contact-agents">contact agents</Link></div>
-            </div>
-  
-            <div>
-              <div className="link-group-title">Follow us on</div>
-              <Space size={20}>  
-                <img src="/iceholidays-assets/images/social/ico_fb.png"/>
-                <img src="/iceholidays-assets/images/social/ico_twitter.png"/>
-                <img src="/iceholidays-assets/images/social/ico_yt.png"/>
-                <img src="/iceholidays-assets/images/social/ico_ig.png"/>
-              </Space>
-            </div>
-          </div>
-          <hr/>
-        </div>
+        <Row id="main-footer_links" gutter={[12, 12]}>
+          <Col flex="1 0 25%" className="column">
+            <Space direction="vertical">
+              <div className="link-group-title">Countries</div>
+              <div className="link-group-items">
+                {
+                  this.state.countries.map((country: Country)=> <Link key={country.id} to={`/app/listing?keyword=${country.name}`}>{country.name}</Link> )
+                }
+              </div>
+            </Space>
+          </Col>
+          <Col flex="1 0 30%" className="column footer-menu">
+            <Space direction="vertical">
+              <div className="link-group-items">
+                {
+                  menus.map(menu =>  <Link to={menu.link}>{menu.label}</Link>)
+                }
+              </div>
+            </Space>
+          </Col>
+          <Col flex="1 0 20%" className="column contact-info">
+            <Space direction="vertical" align="center">
+              <Flex vertical gap="20px" align="center">
+                <div className="link-group-title">Contact Us</div>
+                <div><Link to="/app/contact-agents">contact agents</Link></div>
+                <div className="link-group-title">Follow us on</div>
+                <Flex gap={20} justify="space-between">  
+                  <img src="/iceholidays-assets/images/social/ico_fb.png"/>
+                  <img src="/iceholidays-assets/images/social/ico_twitter.png"/>
+                  <img src="/iceholidays-assets/images/social/ico_yt.png"/>
+                  <img src="/iceholidays-assets/images/social/ico_ig.png"/>
+                </Flex>
+              </Flex>
+            </Space>
+          </Col>
+        </Row>
         <div id="copyright">
           <span>Copyright © 2024 Golden Destinations</span>
         </div>

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

@@ -1,43 +1,81 @@
-import { mdiFileDownload } from "@mdi/js";
+import { mdiFileDownload, mdiMenu } from "@mdi/js";
 import Icon from "@mdi/react";
-import { Button } from "antd";
-import React from "react";
-import { NavLink } from "react-router-dom";
+import { Button, Drawer, Menu } from "antd";
+import React, { useState } from "react";
+import type { MenuProps } from 'antd';
+import { Link, useLocation, useMatch } from "react-router-dom";
 
+type MenuItem = Required<MenuProps>['items'][number];
 
-const routes = [
-  {label: "Home", path: "/app"},
-  {label: "About Us", path: "/app/about-us"},
-  {label: "Countries", path: "/app/countries"},
-  {label: "Blog", path: "/app/blog"}
-]
 
-const routes2 = [
-  {label: "Contact Agents", path: "/app/contact-agents"},
-  {label: "Contact Us", path: "/app/contact-us"}
+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>
+  },
 ]
 
 const MainHeader = () => {
+  const [open, setOpen] = useState(false);
+  const location = useLocation();
+  const activeUrlKey = location.pathname.split("/").pop() || "app";
+  const [current, setCurrent] = useState(activeUrlKey);
+
+  const onClick: MenuProps['onClick'] = (e) => {
+    setCurrent(e.key);
+    setOpen(false);
+  };
+
+  const showDrawer = () => {
+    setOpen(true);
+  };
+
+  const onClose = () => {
+    setOpen(false);
+  };
+  
   return (
     <div id="main-header">
-      <div>
-        <div className="nav-menu" id="left-menu">
-          {
-            routes.map((route, index)=> <NavLink key={index} to={route.path} end className={({ isActive }) => (isActive ? 'active' : '')}> {route.label} </NavLink>)
-          }
-        </div>
-        <span className="nav-menu logo">
-          <img src="/iceholidays-assets/images/logo_container.png"/>
-        </span>
-        <div className="nav-menu" id="right-menu">
-          {
-            routes2.map((route, index)=> <NavLink key={index} to={route.path} end className={({ isActive }) => (isActive ? 'active' : '')}> {route.label} </NavLink>)
-          }
-        </div>
+      <Menu mode="horizontal" items={items} onClick={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 id="get-brochure" type="primary"><Icon path={mdiFileDownload} size="18px" /> get brochure</Button>
+
+        <Button id="toggle-menu" type="primary" onClick={showDrawer}>
+          <Icon path={mdiMenu} size="25px" />
+        </Button>
       </div>
-      <a id="get-brochure">
-        <Button type="primary"><Icon path={mdiFileDownload} size="18px" /> get brochure</Button>
-      </a>
+
+      <Drawer title={null} onClose={onClose} open={open} id="nav-drawer">
+        <Menu items={items} onClick={onClick} selectedKeys={[current]} className="nav-menu_mobile"/>
+      </Drawer>
     </div>
   )
 }

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

@@ -50,21 +50,21 @@ const AboutUsPage = React.FC = () => (
             <p>ICE Holidays is committed to striving towards our customer satisfaction in areas of more quality value for money of our products & services. The management and all employees are committed to the company quality policy through effort in:</p>
           </div>
         </Col>
-        <Col span={8}>
+        <Col xs={24} sm={24} lg={8}>
             <div className="items">
               <img src="/iceholidays-assets/images/innovative.png"/>
               <label>Innovative</label>
               <p>Talent team develops great products and services; Agile, innovative, and a quality conscious team of resourceful people dedicated to the best.</p>
             </div>
         </Col>
-        <Col span={8}>
+        <Col xs={24} sm={24} lg={8}>
             <div className="items">
               <img src="/iceholidays-assets/images/competitiveness.png"/>
               <label>Competitiveness</label>
               <p>Provide competitive pricing to achieve customer satisfaction.</p>
             </div>
         </Col>
-        <Col span={8}>
+        <Col xs={24} sm={24} lg={8}>
             <div className="items">
               <img src="/iceholidays-assets/images/ethical.png"/>
               <label>Ethical</label>
@@ -73,17 +73,17 @@ const AboutUsPage = React.FC = () => (
         </Col>
       </Row>
 
-      <Row id="certificates" gutter={24}>
+      <Row id="certificates" align="middle" justify="center" gutter={[24, 24]}>
         <Col span={24}>
           <div className="section-header">
             <h2>Our Certificates</h2>
             <p>We have acquired recognition and certificates such as:</p>
           </div>
         </Col>
-        <Col span={8}>
+        <Col xs={24} sm={24} lg={8}>
             <img src="/iceholidays-assets/images/certificate1.png"/>
         </Col>
-        <Col span={8}>
+        <Col xs={24} sm={24} lg={8}>
             <img src="/iceholidays-assets/images/certificate2.png"/>
         </Col>
       </Row>

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

@@ -36,6 +36,10 @@ const blogs = [
   },
 ]
 
+const setFilter = (selectedFilter) => {
+  console.log("set filter", selectedFilter)
+}
+
 
 const BlogPage = React.FC = () => (
   <div id="blog-page">
@@ -43,16 +47,14 @@ const BlogPage = React.FC = () => (
 
     <div id="blog-page_body">
       <Space size={12} direction="vertical">
-        <FilterPills items={types} allOption={true}></FilterPills>
-        <FilterPills items="years" title="Year" allOption={true}></FilterPills>
-        <FilterPills items="months" title="Month" allOption={true}></FilterPills>
+        <FilterPills items={types} allOption={true} initialValue={{keyword: "", year: "", month: ""}} selectFilter={(selected)=>setFilter(selected)}></FilterPills>
       </Space>
 
       <div id="blogs">
         <Row wrap gutter={20}>
           {
             blogs.map(blog => (
-              <Col span={8}>
+              <Col key={blog.id} span={8}>
                 <Link to={`/app/blog/${blog.id}`}>
                   <Card
                     hoverable

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

@@ -1,5 +1,13 @@
 import React from "react";
 import Headline from "../components/shared/Headline";
+import ContactAgentsForm from "../components/shared/ContactAgentsForm";
+import AgentsApi from "../../api-services/agents-api.service";
+import { Button, Card, Col, Modal, notification, Row } from "antd";
+import { Agent } from "../../interfaces/agent.interface";
+import { mdiMapMarker, mdiPhoneInTalkOutline, mdiWhatsapp, mdiEmailOutline } from "@mdi/js";
+import Icon from "@mdi/react";
+
+const { Meta } = Card;
 
 const bannerPath = '/iceholidays-assets/images/contact_agents.png';
 const breadcrumbs = [
@@ -7,10 +15,171 @@ const breadcrumbs = [
   { title: 'Contact Agents' }
 ] 
 
-const ContactAgentsPage = React.FC = () => (
-  <div id="contact-agents-page">
-    <Headline bannerImage={bannerPath} breadcrumbs={breadcrumbs} title="CONTACT AGENTS"/>
-  </div>
-);
+class ContactAgentsPage extends React.Component {
+  agentsApi = new AgentsApi;
+
+  state = {
+    loading: true,
+    allAgents: [],
+    agents: [],
+    states: [],
+    cities: [],
+    setIsModalOpen: false,
+    agentData: { name: "", image: "", address: "", phone: "", whatsapp: "", email: "", city: "", state: "" },
+  }
+
+
+  componentDidMount() {
+    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});
+      })
+    .finally(()=>this.setState({loading: false}))
+      .catch(error => {
+        notification.error({ message: 'An error occured while loading agents.'});
+      });
+  }
+
+  showModal(agentData){
+    this.setState({setIsModalOpen: true, agentData: agentData});
+  };
+
+  closeModal(){
+    this.setState({setIsModalOpen: false});
+  };
+
+
+  filterCities = (searchStr) => {
+    const allAgents:Agent[] = this.state.allAgents;
+
+    if(searchStr == undefined){
+      this.resetAgents();
+      return;
+    }
+    const agents:Agent[] = allAgents.filter(a => a.state == searchStr);
+    const results = agents.map(a => a.city);
+    this.setState({cities: results});
+  }
+
+
+  filterStates= (searchStr) => {
+    const allAgents:Agent[] = this.state.allAgents;
+
+    if(searchStr == undefined){
+      this.resetAgents();
+      return;
+    }
+
+    const agents:Agent[] = allAgents.filter(a => a.city == searchStr);
+    const results = agents.map(a => a.state);
+    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});
+  }
+
+  findAgents = (formValues) => {
+    const allAgents:Agent[] = this.state.allAgents;
+    const agents = allAgents.filter(a => 
+      (formValues.state == undefined || a.state === formValues.state) && 
+      (formValues.city == undefined || a.city === formValues.city));
+    this.setState({agents, showAgentsResults: true})
+  }
+  
+
+  render(){
+    const {agents, states, cities, agentData} = this.state;
+    return (
+      <div id="contact-agents-page">
+        <Headline bannerImage={bannerPath} breadcrumbs={breadcrumbs} title="CONTACT AGENTS"/>
+
+        <div id="contact-agents-page_body">
+          <div id="find-agents">
+            <div id="find-agents_header"><span>Get Your City</span></div>
+            <div id="find-agents_form">
+              <ContactAgentsForm 
+                states={states} 
+                cities={cities} 
+                findAgents={this.findAgents} 
+                filterCities={this.filterCities}
+                filterStates={this.filterStates}/>
+            </div>
+          </div>
+
+          <div id="agents-list">
+            <Row gutter={[20, 20]}>
+              {
+                agents.map((agent:Agent) => (
+                  <Col xs={24} sm={24} md={12} lg={6}>
+                    <Card
+                      hoverable
+                      cover={<img alt={agent.name} src={agent.image} />}
+                    >
+                      <Meta title={agent.name} description={
+                        <>
+                          <div className="agent-details">
+                            <Row gutter={[20, 20]} align="middle">
+                              <Col span={24}>
+                                <Icon path={mdiMapMarker} size="15px" />
+                                <span>{agent.address}</span>
+                              </Col>
+                              <Col span={24}>
+                                <Icon path={mdiPhoneInTalkOutline} size="15px" />
+                                <span>{agent.phone}</span>
+                              </Col>
+                              <Col span={24}>
+                                <Icon path={mdiWhatsapp} size="15px" />
+                                <span>{agent.whatsapp}</span>
+                              </Col>
+                              <Col span={24}>
+                                <Icon path={mdiEmailOutline} size="15px" />
+                                <span>{agent.email}</span>
+                              </Col>
+                            </Row>
+                          </div>
+                          <Button color="primary" variant="outlined" className="more-info-button" 
+                            onClick={()=>this.showModal(agent)}>
+                              More info
+                          </Button>
+                        </>
+                      } />
+                    </Card>
+                  </Col>
+                ))
+              }
+            </Row>
+          </div>
+
+          <Modal title={
+            <>
+              <img src={agentData?.image}/>
+              <span> {agentData.name} </span>
+            </>
+          } open={this.state.setIsModalOpen} onCancel={()=>this.closeModal()} footer={null} width={350} centered className="agent-full-details">
+            <Row gutter={[10,10]}>
+              <Col span={12}> <label>Agent Name</label> </Col>
+              <Col span={12}> <span> {agentData.name} </span></Col>
+              <Col span={12}> <label>State</label> </Col>
+              <Col span={12}> <span> {agentData.state} </span></Col>
+              <Col span={12}> <label>Address</label> </Col>
+              <Col span={12}> <span> {agentData.address} </span></Col>
+              <Col span={12}> <label>Tel</label> </Col>
+              <Col span={12}> <span> {agentData.phone} </span></Col>
+              <Col span={12}> <label>Email</label> </Col>
+              <Col span={12}> <span> {agentData.email} </span></Col>
+            </Row>
+            {/* google maps */}
+          </Modal>
+        </div>
+      </div>
+    )
+  }
+}
 
 export default ContactAgentsPage;

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

@@ -83,25 +83,25 @@ const ContactUsPage = React.FC = () => {
               <TextArea rows={4} placeholder="Write Here"/>
             </Form.Item>
 
-            <Form.Item wrapperCol={{ offset: 10, span: 14 }}>
+            <Flex align="center" justify="center">
               <Button type="primary" htmlType="submit">
                 Submit
               </Button>
-            </Form.Item>
+            </Flex>
 
           </Form>
         </div>
       </div>
 
       <div id="contact-us-page_footer">
-        <Row gutter={29}>
-          <Col span={12}>
+        <Row gutter={[29, 20]} >
+          <Col xs={24} sm={24} lg={12}>
             <div>
               <label>Contact Us</label>
               <span>feedback@gd.my</span>
             </div>
           </Col>
-          <Col span={12}>
+          <Col xs={24} sm={24} lg={12}>
             <div>
               <label>Connect with Us</label>
               <Space size={29}>