iceholidays-frontend 0.4.0 → 0.6.0

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

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

@@ -1,9 +1,8 @@
 import React from "react";
 import Headline from "../components/shared/Headline";
 import LocationsApi from "../../api-services/locations-api.service";
-import { Col, Flex, notification, Row } from "antd";
-import { Country } from "../../interfaces/country.interface";
-import Postcard from "../components/shared/Postcard";
+import { Flex, notification } from "antd";
+import LocationPostcards from "../components/shared/LocationPostcards";
 
 const bannerPath = '/iceholidays-assets/images/about_us.png';
 const breadcrumbs = [
@@ -49,11 +48,7 @@ export default class CountriesPage extends React.Component {
           </div>
 
           <h2> Countries </h2>
-          <div className="postcards">
-            {
-              this.state.countries.map((country:Country, index) => <Postcard key={index} link={`/app/listing?keyword=${country.name}`} image={country.cover} name={country.name} tourCount={country.tourCount}/>)
-            }
-          </div>
+          <LocationPostcards locations={this.state.countries}/>
         </div>
 
       </div>

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

@@ -2,7 +2,7 @@ import React from "react";
 import Testimonials from "../components/Testimonials";
 import Destinations from "../components/Destinations";
 import SearchBarWidget from "../widgets/SearchBarWidget";
-import { Carousel, notification } from "antd";
+import { Carousel, Col, notification, Row } from "antd";
 import SlickButtonFix from "../components/shared/SlickButtonFix";
 import BannersApi from "../../api-services/banners-api.service";
 import { Banner } from "../../interfaces/banner.interface";
@@ -61,7 +61,9 @@ export default class Homepage extends React.Component {
       </div>
       
       <Destinations/>
-      <Testimonials/>
+      <div id="testimonials-section">
+        <Testimonials/>
+      </div>
   
       <div id="about-signature-tours" style={{background: "url('/iceholidays-assets/images/about_st_bg.png') no-repeat 70% 7%, linear-gradient(65.77deg, rgba(170, 133, 62, 0.5) 33.44%, rgba(249, 225, 151, 0.5) 67.37%)"}}>
         <div>
@@ -69,18 +71,26 @@ export default class Homepage extends React.Component {
           <p>
             From charming accommodations to curated cultural encounters, every  aspect is thoughtfully crafted to elevate your travel experience. At The  Signature Tours, we believe in the S-Tour’s philosophy —where every  moment is a signature memory.
           </p>
-          <img src="/iceholidays-assets/images/Group_71.png"/>
+          <picture>
+            <source media="(min-width: 600px)" srcSet="/iceholidays-assets/images/about-us_logo.png" />
+            <source media="(max-width: 599px)" srcSet="/iceholidays-assets/images/about-us_logo_mobile.png" />
+            <img src="/iceholidays-assets/images/about-us_logo.png" alt="About Signature Tours Logo Line"/>
+          </picture>
           <div id="about-st-feature">
-            <div style={{maxWidth: "449px"}}>
-              <p>Every  experience is meticulously designed to create memories that last a  lifetime. Our journeys go beyond the ordinary, offering experiences that  are as unique as you are.</p>
-            </div>
-            <div id="feature">
-              <img src="/iceholidays-assets/images/feature.jpg"/>
-              <div id="st-brand">
-                <span>Signature Tours</span>
-                <img src="/iceholidays-assets/images/logomark.png" id="st-logo"/>
-              </div>
-            </div>
+            <Row gutter={[20, 20]} align="middle">
+              <Col flex="1 0 50%" className="column">
+                <p>Every  experience is meticulously designed to create memories that last a  lifetime. Our journeys go beyond the ordinary, offering experiences that  are as unique as you are.</p>
+              </Col>
+              <Col flex="1 0 50%" className="column">
+                <div id="feature">
+                  <img src="/iceholidays-assets/images/feature.jpg"/>
+                  <div id="st-brand">
+                    <span>Signature Tours</span>
+                    <img src="/iceholidays-assets/images/logomark.png" id="st-logo"/>
+                  </div>
+                </div>
+              </Col>
+            </Row>
           </div>
         </div>
       </div>