iceholidays-frontend 0.3.0 → 0.4.0

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

@@ -0,0 +1,397 @@
+import React, { useState } from "react";
+import { Button, Carousel, Col, Flex, Form, Layout, Modal, Row, Select } 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 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" ]
+
+  }
+]
+
+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 layoutStyle = {
+  overflow: 'hidden',
+};
+
+const siderStyle = {
+  backgroundColor: 'transparent'
+}
+
+
+export default class ShowPage  extends React.Component {
+
+  state = {
+    showResult: true,
+    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"
+    },
+  }
+
+  showModal(agentData){
+    this.setState({setIsModalOpen: true, agentData: agentData});
+  };
+
+  closeModal(){
+    this.setState({setIsModalOpen: false});
+  };
+
+  render(){
+    return (
+      <div id="show-page">
+
+      <Layout style={layoutStyle}>
+        
+        <>
+          <Headline bannerImage={bannerPath} breadcrumbs={breadcrumbs}>
+            <div id="show-page_header"> 
+              <Flex justify="space-between" vertical gap={45}>
+                <h1>{details.title}</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> 
+                </div>
+              </Flex>
+            </div>
+          </Headline>
+
+          <div id="date-selector">
+            <Carousel autoplay arrows dots={false} draggable slidesToScroll= {1} slidesToShow={8}
+              prevArrow={
+                <SlickButtonFix>
+                  <Icon path={mdiMenuLeft} size={2} />
+                </SlickButtonFix>
+              }
+              nextArrow={
+                <SlickButtonFix>
+                  <Icon path={mdiMenuRight} size={2} />
+                </SlickButtonFix>
+              }>
+                {
+                  dates.map((ddate, index) => {
+                    return <div key={index} className="date-box">
+                      <Flex justify="space-between" align="center" vertical gap={8}>
+                        <div className="date-box_date"> {ddate.date} </div>
+                        <div>
+                          <span>From</span>
+                          <div className="date-box_price"> {ddate.price} </div>
+                        </div>
+                      </Flex>
+                    </div>
+                  })
+                }
+            </Carousel>
+          </div>
+        </>
+        
+        <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>
+                      </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"> 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>
+                          </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>
+                </div>
+              </Flex>
+            </div>
+          </Content>
+          <Sider width="265px" style={siderStyle}>
+            <div className="contact-agent">
+              <div className="contact-agent_header"> Contact Agent </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>
+                {
+                  this.state.showResult && (
+                    <div className="search-results">
+                      <Flex vertical gap={20}>
+                        {
+                          agentSearchResults.length > 0 && agentSearchResults.map(result => {
+                            return (
+                              <Row gutter={2} justify="space-between" className="agent-info">
+                                <Col flex="180px"><span className="company" onClick={()=>this.showModal(result)}>
+                                  {result.company}</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>
+                                    )
+                                  }
+                                </Col>
+                              </Row>
+                            )
+                          })
+                        }
+                      </Flex>
+                    </div>
+                  )
+                }
+              </div>
+            </div>
+          </Sider>
+        </Layout>
+      </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>
+        <div className="contact-details">
+          <Row gutter={[15, 15]} align="middle">
+            <Col span={24}>
+              <Icon path={mdiMapMarker} size="15px" />
+              <span>{this.state.agentData?.address}</span>
+            </Col>
+          {/* </Row>
+          <Row gutter={15} align="middle"> */}
+            <Col>
+              <Icon path={mdiPhoneInTalkOutline} size="15px" />
+              <span>{this.state.agentData?.phone}</span>
+            </Col>
+            <Col>
+              <Icon path={mdiWhatsapp} size="15px" />
+              <span>{this.state.agentData?.whatsapp}</span>
+            </Col>
+            <Col>
+              <Icon path={mdiEmailOutline} size="15px" />
+              <span>{this.state.agentData?.email}</span>
+            </Col>
+          </Row>
+        </div>
+      </Modal>
+    </div>
+    )
+  }
+
+}

data/app/javascript/react/widgets/FilterPills.tsx

@@ -0,0 +1,77 @@
+import { Space } from "antd";
+import React, { useState } from "react";
+
+
+const years = [ 2024, 2025];
+const months = Array.from({length: 12}, (item, i) => {
+  return new Date(0, i).toLocaleString('en-US', {month: 'long'})
+});
+
+
+function FilterPills(
+  props: {
+    items:any[];
+    title?:string;
+    initialValue?:{keyword:string, year?:string, month?: string}
+    label?:string;
+    allOption?:boolean;
+    selectFilter;
+  }){
+  
+  const { items, title, label, initialValue, allOption } = props;
+
+  const [selected, setSelected] = useState({});
+  var filterObject: {[k: string]: any} = {};
+  const selectFilter = (label, value) => {
+    filterObject[label] = value;
+    setSelected(filterObject);
+    props.selectFilter(filterObject);
+  }
+
+  return (
+    <Space size={12} direction="vertical">
+      {
+        allOption && <div className="filter-pill selected"> <span> All </span></div>
+      }
+        
+      {
+        items && (
+          <>
+            { title && <div className="filter-title"> {title} </div> }
+            <Space size={10} wrap>
+                {
+                  items.map(item => {
+                    const selectedItem = (selected["keyword"] ? selected["keyword"] : initialValue && initialValue.keyword );
+                    const value = label ? item[label] : item;
+                    return <div onClick={()=>selectFilter("keyword", value)} className={`filter-pill ${selectedItem == value && 'selected'}`}> <span>{ value } </span></div>
+                  })
+                }
+            </Space>
+          </>
+        )
+      }
+
+      <div className="filter-title"> Year </div>
+      <Space size={10} wrap>
+        {
+          years.map(year => {
+            const selectedItem = (selected["year"] ? selected["year"] : initialValue && initialValue.year);
+            return <div onClick={()=>selectFilter("item", year)} className={`filter-pill ${selectedItem == year.toString() && 'selected'}`}> <span>{year} </span></div>
+          })
+        }
+      </Space>
+
+      <div className="filter-title"> Month </div>
+      <Space size={10} wrap>
+      {
+        months.map(month => {
+          const selectedItem = (selected["month"] ? selected["month"] : initialValue && initialValue.month );
+          return <div onClick={()=>selectFilter("item", month)} className={`filter-pill ${selectedItem == month && 'selected'}`}> <span>{month} </span></div>
+        })
+      }
+      </Space>
+    </Space>
+  )
+}
+
+export default FilterPills;

data/app/javascript/react/widgets/SearchBarWidget.tsx

@@ -0,0 +1,42 @@
+import { Form, Space, Input, DatePicker, Button, Flex } from "antd";
+import React from "react";
+import SearchApi from "../../api-services/search-api.service";
+import { useNavigate } from "react-router-dom";
+
+
+function SearchBarWidget() {
+  const searchApi = new SearchApi;
+  const navigate= useNavigate();
+
+  const save = (formValues) => {
+    searchApi.search(formValues.keyword, formValues.month)
+      .then(result => {
+          navigate(`/app/listing?keyword=${formValues.keyword}`);
+      })
+  }
+  
+  return (
+    <div id="search-bar">
+        <img src="/iceholidays-assets/images/Rectangle49.png"/>
+        <div id="search-bar-widget">
+          <Form
+            onFinish={save}
+            layout="vertical"
+          >
+            <Form.Item wrapperCol={{ span: 24 }} label="Search" name="keyword">
+              <Input placeholder="Destinations, Attractions, etc" />
+            </Form.Item>
+            <Form.Item wrapperCol={{ span: 24 }} label="Travel Period" name="month">
+              <DatePicker picker="month" />
+            </Form.Item>
+            <Flex align="flex-end" justify="center">
+              <Button type="primary" className="search-button" htmlType="submit">Search</Button>
+            </Flex>
+          </Form>
+        </div>
+        <img src="/iceholidays-assets/images/Rectangle49.png" className="flip"/>
+      </div>
+  )
+}
+
+export default SearchBarWidget;

data/app/views/iceholidays/frontend/site/index.html.erb

@@ -1,24 +1 @@
-<%= react_component "Homepage"%>
-
-
-<div id="about-signature-tours" style="background: url(<%=asset_path('/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>
-    <%=image_tag("/iceholidays-assets/images/Group_71.png")%>
-    <div id="about-st-feature">
-      <div style="max-width: 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">
-        <%=image_tag("/iceholidays-assets/images/feature.jpg")%>
-        <div id="st-brand">
-          <span>Signature Tours</span>
-          <%=image_tag("/iceholidays-assets/images/logomark.png", id: "st-logo")%>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
+<%= react_component "App"%>

data/app/views/layouts/iceholidays/frontend/application.html.erb

@@ -4,21 +4,17 @@
   <title>Iceholidays frontend</title>
   <%= csrf_meta_tags %>
   <%= csp_meta_tag %>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
 
   <%= yield :head %>
 
     <%= javascript_include_tag "/iceholidays-assets/application", "data-turbo-track": "reload", type: "module" %>  
-    <%= stylesheet_link_tag    "iceholidays/frontend/application", media: "all" %>
+    <%= stylesheet_link_tag "/iceholidays-assets/application", media: "all" %>
 </head>
 <body>
-
-  <%=render partial:"layouts/iceholidays/frontend/shared/header"%>
-  
   <main>
     <%= yield %>
   </main>
-
-  <%=render partial:"layouts/iceholidays/frontend/shared/footer"%>
 </body>
 
 </html>

data/config/routes.rb

@@ -1,3 +1,12 @@
 Iceholidays::Frontend::Engine.routes.draw do  
   root to: 'site#index'
+
+  get   '/listing'        => 'site#listing', as: :listing
+  get   '/show'           => 'site#show', as: :show
+  get   '/about-us'       => 'site#about_us', as: :about_us
+  get   '/countries'      => 'site#countries', as: :countries
+  get   '/blog'           => 'site#blog', as: :blog
+  get   '/blog/1'         => 'site#show_blog', as: :show_blog
+  get   '/contact-agents' => 'site#contact_agents', as: :contact_agents
+  get   '/contact-us'     => 'site#contact_us', as: :contact_us
 end

data/lib/iceholidays/frontend/version.rb

@@ -1,5 +1,5 @@
 module Iceholidays
   module Frontend
-    VERSION = "0.3.0"
+    VERSION = "0.4.0"
   end
 end