iceholidays-frontend 0.4.0 → 0.6.0

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

@@ -1,120 +1,36 @@
 import React, { useState } from "react";
-import { Button, Carousel, Col, Flex, Form, Layout, Modal, Row, Select } from "antd";
+import { Button, Carousel, Col, Flex, Form, Layout, Modal, notification, Row, Select, Skeleton, Space } from "antd";
 import SlickButtonFix from "../components/shared/SlickButtonFix";
-import { mdiAccountCash, mdiAccountGroup, mdiAirplane, mdiBagChecked, mdiBedKing, mdiEmailOutline, mdiFileDownload, mdiFlagTriangle, mdiMapMarker, mdiMapMarkerOutline, mdiMenuLeft, mdiMenuRight, mdiPhoneInTalkOutline, mdiReceiptText, mdiShieldAccount, mdiShieldAirplane, mdiSilverwareForkKnife, mdiWhatsapp } from "@mdi/js";
+import { mdiAccountCash, mdiAccountGroup, mdiAirplane, mdiBagChecked, mdiBedKing, mdiClose, mdiEmailOutline, mdiFileDownload, mdiFlagTriangle, mdiMapMarker, mdiMapMarkerOutline, mdiMenuDown, mdiMenuLeft, mdiMenuRight, mdiMenuUp, mdiPhoneInTalkOutline, mdiReceiptText, mdiShieldAccount, mdiShieldAirplane, mdiSilverwareForkKnife, mdiWhatsapp } from "@mdi/js";
 import Icon from "@mdi/react";
 import Headline from "../components/shared/Headline";
 import { Content } from "antd/es/layout/layout";
 import Sider from "antd/es/layout/Sider";
-
-const bannerPath = '/iceholidays-assets/images/8D7N.png';
-
-const details = {
-  title: "8D7N NETIZEN HOT SPOTS TWIN CITIES: 8D MAGIC CITY & SUMMER CAPITAL (CHONG QING | KAILI | AN SHUN | XING YI | GUI YANG)",
-  country: "China",
-  code: "8SCCKD",
-  description: `
-  **FREE COVID-19 TRAVEL INSURANCE!!**
-  *\*\*Applicable for passenger up to 69 years old (T&C APPLIED)*
-  
-  > All non Malaysia passport holder surcharge RM300 per person!! Except Singapore passport holder.
-  
-  **Special Arrangement:**
-  **✓**  Essential for traveling abroad!!️ Keeps you in touch with your family  at all times - **Travel Sim Card per person per card**.
-  **✓** Bottle Mineral Water per person per day.
-  **✓**2+1 Luxury VIP Air-conditioned Coach.
-  
-  **Itinerary Highlight:**
-  **✓**  **Liberation Monument Street** is a great place for locals to relax and  hang out on weekends and was also a key location for the movie "I  Belonged to You".
-  **✓**  **Hongyadong** is the most popular attraction in Chongqing and is the  number one must-visit attraction in Chongqing because of its peculiar  architectural appearance and spectacular night view. Here is not a cave,  but a most Bayu traditional characteristics of the foot-hanging  building, the whole building is built according to the cliff, has more  than 2000 years of history.
-  **✓**  The remodeled and renovated old town of **Ciqikou** boasts a large  number of gourmet and handicraft stores. In addition to the old winding  stone road steps, the real life of the old generation of Chongqing  people is also shown here.
-  **✓**  Standing on the **Kaibu Yizhi Park** platform, you will be greeted by  the breeze of the river. Drink Ba Ba Tea and taste pastries at the  open-air tea houses along the river to experience the leisurely life of  Chongqing people.
-  **✓**  **Xijiang Qianhu Miao Village** it consists of more than ten natural  villages built on the hillside, which is the largest Miao settlement in  China and even in the world. On the hillside, there are layers and  layers of Miao wooden footstools, coffee-colored old houses clinging to  the turquoise mountains, which are very characteristic of the  nationalities. It is a good place to experience the Miao flavor! 
-  **✓**  As a world-class business card of Guizhou, **Huangguoshu Waterfall** is  one of the must-see attractions in Guizhou. The most essential ones are  mainly the **Great Falls**, **Tianxingqiao Scenic Area** and **Dou Po  Tang waterfall**. The scenic spots of Huangguoshu Falls, such as  Shuilian Cave and Dou Po Tang waterfall, were the setting for the 86  version of the TV series \. After viewing  the spectacular Huangguoshu Falls in the daytime, when night falls,  immerse yourself in a **large-scale light show** staged between the  mountains and the water, and feel a different travel experience from  daytime play. 
-  **✓**  **Maling River Canyon** is known as "the most beautiful scar on earth".  Its **Tian Xing Gallery** is the core part of the essence of the canyon  scenic area, which is characterized by the magnificent scale of  waterfalls and rock page wall hangings forming the main landscape. 
-  **✓** **Guiyang netizens hot spots:** Huaxi Shi Zhi Street, Qingyun marketplace, Jai Xiu Pavilion, Hua guo yuan bai gong. **Local Cuisine:**Sichuan  Cuisine,Chongqing Jianghu Cuisine, Mala Hot Pot, Long Table Feast of  Miao, Sour Soup Fish Flavor, Yao Flavor, Buyi Fortune Feast, Qian Flavor
-  
-  **All 5★ Hotel:*****\*\*Subject to change in the event of conflicting conferences or events.\*\****
-  **✓** 2 Nights at Chongqing Hotel
-  **✓** 1 Nights at KailiHotel
-  **✓** 1 Night at Anshun Hotel
-  **✓** 1 Night at XingyiHotel
-  **✓** 2 Nights at GuiyangHotel
-  **Note: Triple Room Sharing Will Be Base on Extra Roll in Bed Basis!**
-  `
-}
-
-const agentSearchResults = [
-  {
-    company: "HO WAH GENTING HOLIDAY SDN BHD",
-    logo: "/iceholidays-assets/images/hw_logo.png",
-    contactNumbers: [ "+6018 982 6422" ],
-    address: "Ground Floor No. 31 & 33, Jalan Maharajalela, 50150 Kuala Lumpur",
-    phone: "+603 2141 6422",
-    whatsapp: "+6018 982 6422",
-    email: "enquiries@hwgholidays.com"
-  },
-  {
-    company: "CHANG HONG TRAVEL & TOUR SDN BHD",
-    contactNumbers: [ "+6012 608 0287", "+6018 669 3238" ]
-
-  }
-]
+import SeriesApi from "../../api-services/series-api.service";
+import { useParams } from "react-router-dom";
+import { Itinerary } from "../../interfaces/itinerary.interface";
+import AgentsApi from "../../api-services/agents-api.service";
+import { Agent } from "../../interfaces/agent.interface";
+import PriceDetails from "../components/PriceDetails";
+import ContactAgentsForm from "../components/shared/ContactAgentsForm";
 
 const breadcrumbs = [
   { title: 'Home' },
 ]
 
-const dates = [
-  {
-    date: "23/10/24",
-    price: "RM 8,288"
-  },
-  {
-    date: "23/10/24",
-    price: "RM 8,288"
-  },
-  {
-    date: "23/10/24",
-    price: "RM 8,288"
-  },
-  {
-    date: "23/10/24",
-    price: "RM 8,288"
-  },
-  {
-    date: "23/10/24",
-    price: "RM 8,288"
-  },
-  {
-    date: "23/10/24",
-    price: "RM 8,288"
-  },
-  {
-    date: "23/10/24",
-    price: "RM 8,288"
-  },
-  {
-    date: "23/10/24",
-    price: "RM 8,288"
-  },
-  {
-    date: "23/10/24",
-    price: "RM 8,288"
-  },
-]
-
-const thingsToKnow = [
-  {icon: <Icon path={mdiShieldAccount} size={1} />, label: "Free Travel Insurance"},
-  {icon: <Icon path={mdiReceiptText} size={1} />  , label: "Airport Taxes"},
-  {icon: <Icon path={mdiFlagTriangle} size={1} />, label: "Tour Leader"},
-  {icon: <Icon path={mdiBagChecked} size={1} />, label: "Check-in Baggage"},
-  {icon: <Icon path={mdiSilverwareForkKnife} size={1} />, label: "Meal Onboard"},
-  {icon: <Icon path={mdiBedKing} size={1} />, label: "Hotel"},
-  {icon: <Icon path={mdiAccountCash} size={1} />, label: "Gratuities"},
-  {icon: <Icon path={mdiAccountGroup} size={1} />, label: "Group Departure"},
-  {icon: <Icon path={mdiFileDownload} size={1} />, label: "Itinerary Download EN | CN"}
-]
+const thingsToKnow = (inclusionsData) => {
+  return [
+    {icon: <Icon path={mdiShieldAccount} size={1} />, label: "Free Travel Insurance", visible: inclusionsData.acf},
+    {icon: <Icon path={mdiReceiptText} size={1} />  , label: "Airport Taxes", visible: inclusionsData.airport_taxes},
+    {icon: <Icon path={mdiFlagTriangle} size={1} />, label: "Tour Leader", visible: inclusionsData.tour_leader},
+    {icon: <Icon path={mdiBagChecked} size={1} />, label: "Check-in Baggage", visible: inclusionsData.luggage},
+    {icon: <Icon path={mdiSilverwareForkKnife} size={1} />, label: "Meal Onboard", visible: inclusionsData.meal_onboard},
+    {icon: <Icon path={mdiBedKing} size={1} />, label: "Hotel", visible: inclusionsData.hotel},
+    {icon: <Icon path={mdiAccountCash} size={1} />, label: "Gratuities", visible: inclusionsData.gratuities},
+    {icon: <Icon path={mdiAccountGroup} size={1} />, label: "Group Departure", visible: inclusionsData.group_departure},
+    {icon: <Icon path={mdiFileDownload} size={1} />, label: "Itinerary Download EN | CN"}
+  ];
+} 
 
 const layoutStyle = {
   overflow: 'hidden',
@@ -125,20 +41,65 @@ const siderStyle = {
 }
 
 
-export default class ShowPage  extends React.Component {
+function withParams(Component) {
+  return props => <Component {...props} params={useParams()} />;
+}
+
+class ShowPage extends React.Component <{params;}> {
+  seriesApi = new SeriesApi;
+  agentsApi = new AgentsApi;
 
   state = {
-    showResult: true,
+    loading: true,
+    itinerary: {includings:{}, tours:[], priceCurrency:"", country: "", description: "", coverImage: ""},
+    selectedTour:{id: null,guaranteed_departure:false, flights:[], caption:"", code:"", prices: []},
     setIsModalOpen: false,
-    agentData: {
-      company: "HO WAH GENTING HOLIDAY SDN BHD",
-      logo: "/iceholidays-assets/images/hw_logo.png",
-      contactNumbers: [ "+6018 982 6422" ],
-      address: "Ground Floor No. 31 & 33, Jalan Maharajalela, 50150 Kuala Lumpur",
-      phone: "+603 2141 6422",
-      whatsapp: "+6018 982 6422",
-      email: "enquiries@hwgholidays.com"
-    },
+    loadingAgents: true,
+    allAgents: [],
+    agents: [],
+    states: [],
+    cities: [],
+    showAgentsResults: false,
+    agentData: { name: "", image: "", address: "", phone: "", whatsapp: "", email: "", city: "", state: "" },
+    isCollapsed: true,
+    showContactAgent: false
+  }
+
+
+  componentDidMount() {
+    this.seriesApi.getItinerary(this.props.params.id)
+      .then((itineraryData:Itinerary) => {
+        this.setState({itinerary: itineraryData});
+        if(itineraryData.tours && itineraryData.tours?.length > 0){
+          this.setState({selectedTour: itineraryData.tours[0]});
+        } 
+      })
+    .finally(()=>this.setState({loading: false}))
+      .catch(error => {
+        notification.error({ message: 'An error occured while loading countries.'});
+      });
+
+    this.getAgents();
+  }
+
+
+  getAgents(){
+    this.agentsApi.getAgents()
+      .then((agentsData:Agent[]) => {
+        this.setState({agents: agentsData, allAgents: agentsData});
+        this.resetAgents(agentsData);
+      })
+      .finally(()=>this.setState({loading: false}))
+      .catch(error => {
+        notification.error({ message: 'An error occured while loading agents.'});
+      });
+  }
+
+  selectTour(tourId:number){
+    const selectedTour:any = this.state.itinerary.tours.find((tour:any) => tour.id == tourId);
+    if(selectedTour){
+      this.setState({selectedTour});
+    }
   }
 
   showModal(agentData){
@@ -149,27 +110,88 @@ export default class ShowPage  extends React.Component {
     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(agents?){
+    const allAgents:Agent[] = agents || this.state.allAgents;
+    const states = allAgents.filter(a => a.state?.replace(/\s/g, "") != '').map(a => a.state);
+    const cities = allAgents.filter(a => a.city?.replace(/\s/g, "") != '').map(a => a.city);
+    let uniqStates = [... new Set(states.map(x=>x))];
+    let uniqCities = [... new Set(cities.map(x=>x))];
+    this.setState({states: uniqStates, cities: uniqCities});
+  }
+
+  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})
+  }
+
+
+  toggleDescription = () => {
+    const collapsed = this.state.isCollapsed;
+    this.setState({isCollapsed: !collapsed});
+  }
+
+  toggleContactAgent = () => {
+    const collapsed = this.state.showContactAgent;
+    this.setState({showContactAgent: !collapsed});
+  }
+
+
   render(){
+    const {loading, itinerary, selectedTour, agents, states, cities, agentData, isCollapsed, showContactAgent} = this.state;
+    const dates = itinerary.tours.length == 0 ? [] : itinerary.tours.map((tour:any) => {
+          return {id: tour.id, date: tour.departure_date, price: `${itinerary.priceCurrency} ${tour.price}`}
+        });
+
     return (
       <div id="show-page">
 
       <Layout style={layoutStyle}>
         
         <>
-          <Headline bannerImage={bannerPath} breadcrumbs={breadcrumbs}>
+          <Headline showSearch={false} bannerImage={itinerary.coverImage} breadcrumbs={breadcrumbs}>
             <div id="show-page_header"> 
               <Flex justify="space-between" vertical gap={45}>
-                <h1>{details.title}</h1> 
+                <h1>{selectedTour?.caption}</h1> 
                 <div className="tour_details"> 
-                  <span className="tour_details_country"> <Icon path={mdiMapMarkerOutline} size="16px" />  {details.country} </span> 
-                  <span className="tour_details_code"> <Icon path={mdiFileDownload} size="16px" />  {details.code} </span> 
+                  <span className="tour_details_country"> <Icon path={mdiMapMarkerOutline} size="16px" />  {itinerary?.country} </span> 
+                  <span className="tour_details_code"> <Icon path={mdiFileDownload} size="16px" />  {selectedTour?.code} </span> 
                 </div>
               </Flex>
             </div>
           </Headline>
 
           <div id="date-selector">
-            <Carousel autoplay arrows dots={false} draggable slidesToScroll= {1} slidesToShow={8}
+            <Carousel infinite={false} arrows dots={false} draggable={true} slidesToScroll= {1} slidesToShow={8}
               prevArrow={
                 <SlickButtonFix>
                   <Icon path={mdiMenuLeft} size={2} />
@@ -181,13 +203,13 @@ export default class ShowPage  extends React.Component {
                 </SlickButtonFix>
               }>
                 {
-                  dates.map((ddate, index) => {
-                    return <div key={index} className="date-box">
+                  dates.map((tour, index) => {
+                    return <div key={index} className={`date-box ${selectedTour?.id == tour.id && "selected"}`} onClick={()=>this.selectTour(tour.id)}>
                       <Flex justify="space-between" align="center" vertical gap={8}>
-                        <div className="date-box_date"> {ddate.date} </div>
+                        <div className="date-box_date"> {tour.date} </div>
                         <div>
                           <span>From</span>
-                          <div className="date-box_price"> {ddate.price} </div>
+                          <div className="date-box_price"> {tour.price} </div>
                         </div>
                       </Flex>
                     </div>
@@ -199,156 +221,142 @@ export default class ShowPage  extends React.Component {
         
         <Layout id="show-page_body">
           <Content>
-          <div className="details">
-              <Flex gap={10} vertical>
-                <div className="details-container">
-                  <div className="details-container_header"> Things to know </div>
-                  <div className="details-container_content"> 
-                    <div id="things-to-know">
-                      {
-                        thingsToKnow.map(item => (
-                          <div className="item">
-                            <div className="icon"> {item.icon} </div>
-                            <label>{item.label}</label>
-                          </div>
-                        ))
-                      }
-                      <div className="item guaranteed">
-                        <div className="icon"> <Icon path={mdiShieldAirplane} size={1} /></div>
-                        <label>Guaranteed Departure</label>
+            {
+              loading ? (
+                <Space direction="vertical" style={{width: '100%'}}>
+                  <Skeleton/>
+                  <Skeleton/>
+                  <Skeleton/>
+                </Space>
+              ) : (
+                <div className="details">
+                  <Flex gap={10} vertical>
+                    <div className="details-container">
+                      <div className="details-container_header"> Things to know </div>
+                      <div className="details-container_content"> 
+                        <div id="things-to-know">
+                          {
+                            thingsToKnow(itinerary.includings)
+                              .filter(item => item.visible)
+                              .map(item => (
+                                <div className="item">
+                                  <div className="icon"> {item.icon} </div>
+                                  <label>{item.label}</label>
+                                </div>
+                              ))
+                          }
+                          {
+                            selectedTour?.guaranteed_departure && (
+                              <div className="item guaranteed">
+                                <div className="icon"> <Icon path={mdiShieldAirplane} size={1} /></div>
+                                <label>Guaranteed Departure</label>
+                              </div>
+                            )
+                          }
+                        </div>
                       </div>
                     </div>
-                  </div>
-                </div>
 
-                <div className="details-container">
-                  <div className="details-container_header"> Description </div>
-                  <div className="details-container_content"> 
-                    <div id="description" className="pre-wrap">{details.description}</div>
-                  </div>
-                </div>
+                    <div className="details-container">
+                      <div className="details-container_header"> Description </div>
+                      <div className="details-container_content"> 
+                        <div id="description" className={`pre-wrap ${isCollapsed && 'collapsed'}`}>{itinerary?.description}</div>
+                        <Button className="toggle-description" color="default" variant="filled" block onClick={this.toggleDescription}>{ isCollapsed ? 'Expand' : 'Collapse'} 
+                          <Icon path={isCollapsed ? mdiMenuDown : mdiMenuUp} size="19px" /> 
+                        </Button>
+                      </div>
+                    </div>
 
-                <div className="details-container">
-                  <div className="details-container_header"> Schedule Flight(s) </div>
-                  <div className="details-container_content"> 
-                    <Flex gap={20} vertical>
-                      <div className="schedule">
-                        <div className="flight-date"> 
-                          <Icon path={mdiAirplane} size="12px" />
-                          <span>23/10/2024</span>
-                        </div>
-                        <div className="flight-details"> 
-                          <label> Kuala Lumpur (KUL) &gt; Guangzhou (CAN) </label>
-                          <div className="flight-details_airline">
-                            <img src="/iceholidays-assets/images/china_southern_airlines_icon.png" />
-                            <span>China Southern Airlines CZ366</span>
+                    {
+                      selectedTour?.flights.length > 0  && (
+                        <div className="details-container">
+                          <div className="details-container_header"> Schedule Flight(s) </div>
+                          <div className="details-container_content"> 
+                            <Flex gap={20} vertical>
+                              {
+                                selectedTour?.flights.map((flight:any) => (
+                                  <div className="schedule" key={flight.id}>
+                                    <div className="flight-date"> 
+                                      <Icon path={mdiAirplane} size="12px" />
+                                      <span>{flight.departure_date}</span>
+                                    </div>
+                                    <div className="flight-details"> 
+                                      <label> {flight.from_airport} &gt; {flight.to_airport} </label>
+                                      <div className="flight-details_airline">
+                                        <img src={flight.airline_logo} />
+                                        <span>{flight.airline}</span>
+                                      </div>
+                                    </div>
+                                    <div className="flight-time"> 
+                                      <Flex gap={13}>
+                                        <div className="from">
+                                          <label>{flight.departure_time}</label>
+                                          <span>{flight.from_airport}</span>
+                                        </div>
+                                        <div className="flight-time_icon">
+                                          <img src="/iceholidays-assets/images/plane.png" />
+                                        </div>
+                                        <div className="to">
+                                          <label>{flight.arrival_time}</label>
+                                          <span>{flight.to_airport}</span>
+                                        </div>
+                                      </Flex>
+                                    </div>
+                                  </div>
+                                ))
+                              }
+                            </Flex>
                           </div>
                         </div>
-                        <div className="flight-time"> 
-                          <Flex gap={13}>
-                            <div className="from">
-                              <label>08:55</label>
-                              <span>Kuala Lumpur (KUL)</span>
-                            </div>
-                            <div className="flight-time_icon">
-                              <img src="/iceholidays-assets/images/plane.png" />
-                            </div>
-                            <div className="to">
-                              <label>12:55</label>
-                              <span>Guangzhou (CAN)</span>
-                            </div>
-                          </Flex>
-                        </div>
-                      </div>
-                    </Flex>
-                  </div>
-                </div>
+                      )
+                    }
 
-                <div className="details-container">
-                  <div className="details-container_header"> Price Details </div>
-                  <div className="details-container_content">
-                    <table id="pricing-table">
-                      <thead>
-                        <tr>
-                          <th></th>
-                          <th className="super-promo">1st-4th Pax
-                          Super Promo</th>
-                          <th className="promo">5th-6th Pax
-                          Promo</th>
-                          <th className="promo">Promo</th>
-                          <th className="promo">Promo</th>
-                          <th className="normal">Normal</th>
-                        </tr>
-                      </thead>
-                      <tbody>
-                        <tr>
-                          <td>Adult</td>
-                          <td className="super-promo">MYR 8,288</td>
-                          <td className="promo">MYR 8,288</td>
-                          <td className="promo">MYR 8,288</td>
-                          <td className="promo">MYR 8,288</td>
-                          <td className="normal">MYR 8,288</td>
-                        </tr>
-                        <tr>
-                          <td>Child with extra bed</td>
-                          <td className="super-promo">MYR 8,288</td>
-                          <td className="promo">MYR 8,288</td>
-                          <td className="promo">MYR 8,288</td>
-                          <td className="promo">MYR 8,288</td>
-                          <td className="normal">MYR 8,288</td>
-                        </tr>
-                      </tbody>
-                    </table>
-                  </div>
+                    {selectedTour?.prices.length > 0 && <PriceDetails priceCurrency={itinerary.priceCurrency} prices={selectedTour?.prices}/>}
+
+                  </Flex>
                 </div>
-              </Flex>
-            </div>
+              )
+            }
           </Content>
-          <Sider width="265px" style={siderStyle}>
+          <Sider width="265px" style={siderStyle} className={`contact-agent-sider ${showContactAgent && 'show-contact-agent-mobile'}`}>
+            <div className="toggle_contact-agent" onClick={this.toggleContactAgent}> 
+              <span>Contact Agent</span>
+            </div>
             <div className="contact-agent">
-              <div className="contact-agent_header"> Contact Agent </div>
+              <div className="contact-agent_header"> 
+                <span>Contact Agent</span>
+                <Button className="collapse-contact-agent" color="default" variant="text" 
+                  icon={<Icon path={mdiClose} size="19px" />}
+                  onClick={this.toggleContactAgent}/>
+              </div>
               <div className="contact-agent_content"> 
-                <Form layout="vertical">
-                  <Form.Item label="Select State">
-                    <Select placeholder="Please select" options={[{ value: 'sample', label: <span>sample</span> }]} />
-                  </Form.Item>
-                  <Form.Item label="City">
-                    <Select placeholder="Please select" options={[{ value: 'sample', label: <span>sample</span> }]} />
-                  </Form.Item>
-                  <Form.Item>
-                    <Button type="primary" block>Find Agent</Button>
-                  </Form.Item>
-                </Form>
+                <ContactAgentsForm 
+                  states={states} 
+                  cities={cities} 
+                  findAgents={this.findAgents} 
+                  filterCities={this.filterCities}
+                  filterStates={this.filterStates}/>
+
                 {
-                  this.state.showResult && (
+                  this.state.showAgentsResults && (
                     <div className="search-results">
                       <Flex vertical gap={20}>
                         {
-                          agentSearchResults.length > 0 && agentSearchResults.map(result => {
+                          agents.length > 0 && agents.map((agent:Agent) => {
                             return (
                               <Row gutter={2} justify="space-between" className="agent-info">
-                                <Col flex="180px"><span className="company" onClick={()=>this.showModal(result)}>
-                                  {result.company}</span>
+                                <Col flex="180px"><span className="company" onClick={()=>this.showModal(agent)}>
+                                  {agent.name}</span>
                                 </Col>
                                 <Col flex="none"><Button color="default" variant="filled" shape="circle" size="small" icon={<Icon path={mdiPhoneInTalkOutline} size="16px" />}/></Col>
                                 <Col flex="none"><Button color="default" variant="filled" shape="circle" size="small" icon={<Icon path={mdiEmailOutline} size="16px" />}/></Col>
                                 <Col>
-                                  {
-                                    result.contactNumbers.length > 0 && (
-                                      <div className="contact-numbers">
-                                        {
-                                          result.contactNumbers.map(contactNumber => {
-                                            return (
-                                              <Button size="small" color="primary" variant="outlined">
-                                                <Icon path={mdiWhatsapp} size="12px" />
-                                                {contactNumber}
-                                              </Button>
-                                            )
-                                          })
-                                        }
-                                      </div>
-                                    )
-                                  }
+                                  <div className="contact-numbers">
+                                    <Button size="small" color="primary" variant="outlined">
+                                      <Icon path={mdiWhatsapp} size="12px" />
+                                      {agent.whatsapp}
+                                    </Button>
+                                  </div>
                                 </Col>
                               </Row>
                             )
@@ -365,27 +373,27 @@ export default class ShowPage  extends React.Component {
       </Layout>
 
 
-      <Modal title={<img src={this.state.agentData?.logo}/>} open={this.state.setIsModalOpen} onCancel={()=>this.closeModal()} footer={null} width={650} centered className="agent-full-contact-details">
-        <h2> {this.state.agentData?.company} </h2>
+      <Modal title={<img src={agentData?.image}/>} open={this.state.setIsModalOpen} onCancel={()=>this.closeModal()} footer={null} width={325} centered className="agent-full-contact-details">
+        <h2> {agentData?.name} </h2>
         <div className="contact-details">
           <Row gutter={[15, 15]} align="middle">
             <Col span={24}>
               <Icon path={mdiMapMarker} size="15px" />
-              <span>{this.state.agentData?.address}</span>
+              <span>{agentData?.address}</span>
             </Col>
           {/* </Row>
           <Row gutter={15} align="middle"> */}
-            <Col>
+            <Col xs={24} sm={24} lg={6}>
               <Icon path={mdiPhoneInTalkOutline} size="15px" />
-              <span>{this.state.agentData?.phone}</span>
+              <span>{agentData?.phone}</span>
             </Col>
-            <Col>
+            <Col xs={24} sm={24} lg={6}>
               <Icon path={mdiWhatsapp} size="15px" />
-              <span>{this.state.agentData?.whatsapp}</span>
+              <span>{agentData?.whatsapp}</span>
             </Col>
-            <Col>
+            <Col xs={24} sm={24} lg={9}>
               <Icon path={mdiEmailOutline} size="15px" />
-              <span>{this.state.agentData?.email}</span>
+              <span>{agentData?.email}</span>
             </Col>
           </Row>
         </div>
@@ -394,4 +402,6 @@ export default class ShowPage  extends React.Component {
     )
   }
 
-}
+}
+
+export default withParams(ShowPage);