iceholidays-frontend 0.3.0 → 0.5.0

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

@@ -0,0 +1,185 @@
+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 = [
+  { title: 'Home' },
+  { title: 'Contact Agents' }
+] 
+
+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

@@ -0,0 +1,122 @@
+import React from "react";
+import Headline from "../components/shared/Headline";
+import { Button, Col, Flex, Form, Input, Row, Select, Space } from "antd";
+import { mdiFacebook, mdiInstagram, mdiTwitter, mdiYoutube } from "@mdi/js";
+import Icon from "@mdi/react";
+const { TextArea } = Input;
+
+const bannerPath = '/iceholidays-assets/images/contact_us.png';
+const breadcrumbs = [
+  { title: 'Home' },
+  { title: 'Contact Us' }
+] 
+
+const ContactUsPage = React.FC = () => {
+  const [form] = Form.useForm();
+  
+  return (
+    <div id="contact-us-page">
+      <Headline bannerImage={bannerPath} breadcrumbs={breadcrumbs} title="contact us"/>
+
+      <div id="contact-us-page_body">
+        <img src="/iceholidays-assets/images/contact_us_form.png"/>
+
+        <div id="contact-us-form">
+          <div id="contact-us-form_header">
+            <h2>Get in touch</h2>
+            <span>Send us your enquiry</span>
+          </div>
+          <Form
+            form={form}
+            autoComplete="off"
+            layout="vertical"
+            variant="filled"
+          >
+            <Form.Item label="Enter Name" name="name">
+              <Input placeholder="Enter Here" />
+            </Form.Item>
+
+            <Row gutter={20}>
+              <Col span={12}>
+                <Form.Item label="Enter Email" name="email">
+                  <Input placeholder="Enter Here" />
+                </Form.Item>
+              </Col>
+              <Col span={12}>
+                <Form.Item label="Enter Phone Number" name="phoneNumber">
+                  <Input placeholder="Enter Here" />
+                </Form.Item>
+              </Col>
+            </Row>
+
+            <Form.Item label="Select State" name="state">
+              <Select
+                  placeholder="Please Select"
+                  defaultValue="lucy"
+                  options={[
+                    { value: 'jack', label: 'Jack' },
+                  ]}
+                />
+            </Form.Item>
+
+            <Form.Item label="Select Area" name="area">
+              <Select
+                  placeholder="Please Select"
+                  defaultValue="lucy"
+                  options={[
+                    { value: 'jack', label: 'Jack' },
+                  ]}
+                />
+            </Form.Item>
+
+            <Form.Item label="Select Subject" name="subject">
+              <Select
+                  placeholder="Please Select"
+                  defaultValue="lucy"
+                  options={[
+                    { value: 'jack', label: 'Jack' },
+                  ]}
+                />
+            </Form.Item>
+
+            <Form.Item label="Write your message" name="message">
+              <TextArea rows={4} placeholder="Write Here"/>
+            </Form.Item>
+
+            <Flex align="center" justify="center">
+              <Button type="primary" htmlType="submit">
+                Submit
+              </Button>
+            </Flex>
+
+          </Form>
+        </div>
+      </div>
+
+      <div id="contact-us-page_footer">
+        <Row gutter={[29, 20]} >
+          <Col xs={24} sm={24} lg={12}>
+            <div>
+              <label>Contact Us</label>
+              <span>feedback@gd.my</span>
+            </div>
+          </Col>
+          <Col xs={24} sm={24} lg={12}>
+            <div>
+              <label>Connect with Us</label>
+              <Space size={29}>
+                <Icon path={mdiFacebook} size={1} />
+                <Icon path={mdiInstagram} size={1} />
+                <Icon path={mdiTwitter} size={1} />
+                <Icon path={mdiYoutube} size={1} />
+                <img src="/iceholidays-assets/images/social.png" className="social-icon"/>
+              </Space>
+            </div>
+          </Col>
+        </Row>
+      </div>
+  </div>
+  );
+};
+
+export default ContactUsPage;

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

@@ -0,0 +1,57 @@
+import React from "react";
+import Headline from "../components/shared/Headline";
+import LocationsApi from "../../api-services/locations-api.service";
+import { Flex, notification } from "antd";
+import LocationPostcards from "../components/shared/LocationPostcards";
+
+const bannerPath = '/iceholidays-assets/images/about_us.png';
+const breadcrumbs = [
+  { title: 'Home' },
+  { title: 'Countries' }
+] 
+
+
+export default class CountriesPage extends React.Component {
+  locationsApi = new LocationsApi;
+
+  state = {
+    countries: []
+  }
+
+  componentDidMount() {
+    this.locationsApi.getCountries()
+      .then(locationsData => {
+        this.setState({countries: locationsData})
+      })
+      .catch(error => {
+        notification.error({ message: 'An error occured while loading countries.'});
+      });
+  }
+
+
+  render(){
+    return (
+      <div id="countries-page">
+        <Headline bannerImage={bannerPath} breadcrumbs={breadcrumbs} title="Countries"/>
+
+        <div id="countries-page_body">
+          <div id="introduction">
+            <Flex vertical gap={24}>
+              <div id="introduction_header"> <img src="/iceholidays-assets/images/logomark.png"/> <span> The Signature Tours </span> </div>
+              <div id="introduction_body">
+                <p>Immerse yourself in the art of travel with The Signature Tour. 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>
+                
+                <p>From charming accommodations to curated cultural encounters, every aspect is thoughtfully crafted to elevate your travel experience. At The Signature Tour, we believe in the S-Tour’s philosophy —where every moment is a signature memory.</p>
+              </div>
+            </Flex>
+          </div>
+
+          <h2> Countries </h2>
+          <LocationPostcards locations={this.state.countries}/>
+        </div>
+
+      </div>
+    )
+  }
+}

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

@@ -0,0 +1,100 @@
+import React from "react";
+import Testimonials from "../components/Testimonials";
+import Destinations from "../components/Destinations";
+import SearchBarWidget from "../widgets/SearchBarWidget";
+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";
+
+export default class Homepage extends React.Component {
+  api = new BannersApi;
+
+  state = {
+    banners: []
+  }
+
+
+  componentDidMount() {
+    this.api.getBanners()
+      .then(bannersData => {
+        this.setState({banners: bannersData})
+      })
+      .catch(error => {
+        notification.error({ message: 'An error occured while loading banners.'});
+      });
+  }
+
+  render(){
+    const { banners } = this.state;
+
+    return (
+      <div id="homepage">
+    
+      <SearchBarWidget/>
+  
+      <div id="homepage_banner"> 
+          <Carousel autoplay arrows infinite={banners.length>1}
+            prevArrow={
+              <SlickButtonFix>
+                <img src="/iceholidays-assets/images/banner_arrow.png"/>
+              </SlickButtonFix>
+            }
+            nextArrow={
+              <SlickButtonFix>
+                <img src="/iceholidays-assets/images/banner_arrow.png" className="flip"/>
+              </SlickButtonFix>
+            }
+          >
+            {
+              banners.map((banner:Banner, index)=>{
+                return <a key={index} href={banner.url} target={banner.target} rel="nofollow">
+                  <picture>
+                    <source media="(min-width: 600px)" srcSet={banner.desktopImage} />
+                    <source media="(max-width: 599px)" srcSet={banner.mobileImage} />
+                    <img src={banner.desktopImage} alt={banner.title} />
+                  </picture>
+                </a>
+              })
+            }
+          </Carousel>
+      </div>
+      
+      <Destinations/>
+      <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>
+          <h1>ABOUT SIGNATURE TOURS</h1>
+          <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>
+          <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">
+            <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>
+    </div>
+    )
+  }
+}