iceholidays-frontend 0.4.0 → 0.6.0

data/app/javascript/react/components/PriceDetails.tsx

@@ -0,0 +1,146 @@
+
+import { List, Card, Space } from "antd";
+import React from "react";
+import { data } from "react-router-dom";
+
+
+const pricingCategory = {
+  "adult": "Adult",
+  "child_no_bed": "Child no bed",
+  "child_twin": "Child twin",
+  "child_with_bed": "Child with bed",
+  "infant": "Infant",
+  "single_supplement": "Single Supplement",
+  // "dta_adult": "DTA Adult",
+  // "dta_child_no_bed": "DTA Child no bed",
+  // "dta_child_twin": "DTA Child twin",
+  // "dta_child_with_bed": "DTA Child with bed",
+  // "dta_infant": "DTA Infant",
+  // "dta_single_supplement": "DTA Single Supplement",
+};
+
+const priceTypes = {
+  "normal": "normal",
+  "normal1": "normal 1",
+  "normal2": "normal 2",
+  "normal3": "normal 3",
+  "normal4": "normal 4",
+  "normal5": "normal 5",
+  "normal6": "normal 6",
+  "normal7": "normal 7",
+  "normal8": "normal 8",
+  "normal9": "normal 9",
+  "early_bird": "early bird",
+  "specialoffer": "special offer",
+  "specialdeal": "special deal",
+  "superpromo": "super promo",
+  "promo": "promo",
+  "promo1": "promo 1",
+  "promo2": "promo 2",
+  "promo3": "promo 3",
+}
+
+
+const PriceDetails = (
+  props: {
+    priceCurrency:string,
+    prices: any[]
+  }
+) => {
+  const { priceCurrency, prices } = props;
+  
+  var pricingTypes:any[] = [], priceTable:any = {}, priceList:any[] = [];
+  if(prices.length>0){
+    pricingTypes = prices.map((price:any) => price.type);
+    prices.forEach((price:any) => {
+      const pricingObj = {
+        label: price.display_price,
+        adult: price.adult,
+        child_no_bed: price.child_no_bed,
+        child_twin: price.child_twin,
+        child_with_bed: price.child_with_bed,
+        dta_adult: price.dta_adult,
+        dta_child_no_bed: price.dta_child_no_bed,
+        dta_child_twin: price.dta_child_twin,
+        dta_child_with_bed: price.dta_child_with_bed,
+        dta_infant: price.dta_infant,
+        dta_single_supplement: price.dta_single_supplement,
+        infant: price.infant,
+        single_supplement: price.single_supplement,
+      };
+
+      priceTable[price.type] = pricingObj;
+
+      priceList.push({
+        title: `${price.display_price} ${priceTypes[price.type]}`,
+        type: price.type,
+        ...pricingObj
+      })
+    });
+  }
+
+  return (
+    <div id="price-details" className="details-container">
+      <div className="details-container_header"> Price Details </div>
+      <div className="details-container_content">
+        <table id="pricing-table">
+          <thead>
+            <tr>
+              <th></th>
+              {
+                pricingTypes.map((type:any) => <th className={type}>
+                  <div>{priceTable[type].label}</div>
+                  <div className="price-type">{priceTypes[type]}</div>
+                </th>)
+              }
+            </tr>
+          </thead>
+          <tbody>
+            {
+              Object.entries(pricingCategory).map(category => (
+                <tr>
+                  <td> {category[1]}  </td>
+                  {
+                    pricingTypes.map((type:any) => <td className={type}> {priceCurrency} {priceTable[type][category[0]]}</td>)
+                  }
+                </tr>
+              ))
+            }
+          </tbody>
+        </table>
+
+        {
+          priceList.length > 0 && (
+            <List
+              id="pricing-list"
+              itemLayout="vertical"
+              dataSource={priceList}
+              renderItem={(item) => (
+                <List.Item>
+                  <Card className={item.type}>
+                    <div className="pricing-header"> {item.title} </div>
+                    <div className="pricing-body"> 
+                      <Space size={15} direction="vertical" style={{display: 'flex'}}>
+                        {
+                          Object.entries(pricingCategory).map(category => (
+                            <div className="pricing"> 
+                              <div className="category"> {category[1]} </div>
+                              <div className="price">{priceCurrency} {item[category[0]]} </div>
+                            </div>
+                          ))
+                        }
+                      </Space>
+                    </div>
+                  </Card>
+                </List.Item>
+              )}
+            />
+          )
+        }
+
+      </div>
+    </div>
+  )
+}
+
+export default PriceDetails;

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

@@ -26,12 +26,12 @@ const AboutUsPage = React.FC = () => (
           <Col span={24}>
             <img src="/iceholidays-assets/images/about_us2.png"/>
           </Col>
-          <Col span={12}>
+          <Col xs={24} sm={24} lg={12}>
             <p>The Signature Tours was born from a passion for redefining travel. We believe that journeys should be more than just trips—they should be transformative experiences, filled with moments that leave an indelible mark on the soul. Catering to discerning travelers who seek more than the ordinary, The Signature Tours crafts bespoke journeys that combine sophistication, cultural immersion, and unparalleled quality. </p>
             <p>Our story begins with a vision: to create journeys that linger in the heart long after the traveler returns home. Each itinerary we design reflects our dedication to perfection. From the charm of boutique accommodations nestled in picturesque landscapes to handpicked cultural experiences that unveil the soul of a destination, every detail is thoughtfully considered to ensure your journey is as seamless as it is extraordinary.</p>
             <p>At The Signature Tours, we embrace the philosophy of the S-Tours experience—where every moment is a masterpiece. Imagine strolling through the cobblestone streets of a quaint village, savoring the aroma of freshly baked bread as locals welcome you with warm smiles. </p>
           </Col>
-          <Col span={12}>
+          <Col xs={24} sm={24} lg={12}>
             <p>Picture yourself standing atop a majestic mountain at sunrise,the golden hues of the horizon reflecting the sense of awe within you. These are the kinds of moments we strive to create—authentic, meaningful, and unforgettable.</p>
             <p>But our commitment goes beyond premium and comfort. It’s about forging connections—with places, cultures, and people. It’s about stepping into a story, whether it’s exploring ancient ruins with a seasoned archaeologist, learning the art of wine making from a passionate vintner, or sharing laughter with a local family over a home-cooked meal.</p>
             <p>At The Signature Tours, every journey is an invitation to step out of the ordinary and into a world of wonder. We’re not just about travel; we’re about creating memories that stay with you forever. This is our promise, and this is what we call the S-Tours philosophy where we deliver S-Class Journeys, Signature Memories. Because every journey should be as unique as your signature.</p>
@@ -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} md={12} lg={8}>
             <img src="/iceholidays-assets/images/certificate1.png"/>
         </Col>
-        <Col span={8}>
+        <Col xs={24} sm={24} md={12} 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