iceholidays-frontend 0.3.0 → 0.5.0

data/app/javascript/react/components/shared/LocationPostcards.tsx

@@ -0,0 +1,52 @@
+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 = (
+  props: {
+    link: string;
+    image: string;
+    name: string;
+    tourCount: number;
+  }
+) => {
+  const { link, image, name, tourCount } = props;
+
+  const pluralize = (count: number, noun: string, suffix = 's') =>
+    `${count} ${noun}${count > 1 ? suffix : ''}`;
+
+  return (
+    <Link to={link} className="postcard">
+      <img src={image}/>
+      <div className="details">
+        <span className="name">{name}</span>
+        <span className="tour-count">{pluralize(tourCount, "Tour")} <Icon path={mdiMenuRight} size={1} /> </span>
+      </div>
+    </Link>
+  )
+}
+
+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/components/shared/RibbonSection.tsx

@@ -0,0 +1,21 @@
+import React, { JSX } from "react";
+
+const RibbonSection = (
+  props: {
+    title?: string;
+    children?: JSX.Element;
+  }
+) => {
+  const { title, children } = props;
+  return (
+    <div id="ribbon-section">
+      <div id="ribbon-section_header">
+        { title && <h1> {title} </h1>}
+      </div>
+
+      {children}
+    </div>
+  )
+}
+
+export default RibbonSection;

data/app/javascript/react/index.js

@@ -1,8 +1,6 @@
+
+import App from "./App"
 import ReactComponent from "./application"
-import Destinations from "./components/Destinations"
-import HomepageBanner from "./components/HomepageBanner"
-import Homepage from "./components/Homepage"
-import Testimonials from "./components/Testimonials"
 
 
-ReactComponent.setup({Homepage, HomepageBanner, Destinations, Testimonials})
+ReactComponent.setup({App})

data/app/javascript/react/layouts/MainFooter.tsx

@@ -0,0 +1,97 @@
+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;
+
+  state = {
+    countries: []
+  }
+
+  componentDidMount() {
+    this.api.getCountries()
+      .then(locationsData => {
+        this.setState({countries: locationsData})
+      })
+      .catch(error => {
+        notification.error({ message: 'An error occured while loading countries.'});
+      });
+  }
+  
+  render(){
+    return (
+      <div id="main-footer">
+        <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>
+      </div>
+    ) 
+  }
+}

data/app/javascript/react/layouts/MainHeader.tsx

@@ -0,0 +1,83 @@
+import { mdiFileDownload, mdiMenu } from "@mdi/js";
+import Icon from "@mdi/react";
+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 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">
+      <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>
+
+      <Drawer title={null} onClose={onClose} open={open} id="nav-drawer">
+        <Menu items={items} onClick={onClick} selectedKeys={[current]} className="nav-menu_mobile"/>
+      </Drawer>
+    </div>
+  )
+}
+
+export default MainHeader;

data/app/javascript/react/layouts/MainLayout.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { Outlet } from "react-router-dom";
+import { Layout } from 'antd';
+import MainHeader from "./MainHeader";
+import MainFooter from "./MainFooter";
+
+const { Content } = Layout;
+
+const MainLayout = () => {
+  return (
+    <Layout>
+      <MainHeader/> 
+      <Content>
+        <Outlet/>
+      </Content>
+      <MainFooter/>
+    </Layout>
+  )
+};
+
+export default MainLayout;

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

@@ -0,0 +1,95 @@
+import React from "react";
+import Headline from "../components/shared/Headline";
+import { Col, Flex, Row } from "antd";
+import RibbonSection from "../components/shared/RibbonSection";
+
+const bannerPath = '/iceholidays-assets/images/about_us.png';
+const breadcrumbs = [
+  { title: 'Home' },
+  { title: 'About Us' }
+] 
+
+const AboutUsPage = React.FC = () => (
+  <div id="about-us-page">
+    <Headline bannerImage={bannerPath} breadcrumbs={breadcrumbs} title="“WHAT WE DO”"/>
+
+    <div id="about-us-page_body">
+      <div id="introduction">
+        <Flex vertical align="center" justify="center">
+          <img src="/iceholidays-assets/images/logomark.png"/>
+          <h1> Welcome To The Signature Tours </h1>
+        </Flex>
+      </div>
+
+      <div id="article">
+        <Row gutter={40}>
+          <Col span={24}>
+            <img src="/iceholidays-assets/images/about_us2.png"/>
+          </Col>
+          <Col span={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}>
+            <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>
+          </Col>
+        </Row>
+      </div>
+
+
+    </div>
+    <RibbonSection>
+      <>
+      <Row id="quality-policy" gutter={40} justify="center">
+        <Col span={24}>
+          <div className="section-header">
+            <h2>Quality Policy</h2>
+            <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 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 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 xs={24} sm={24} lg={8}>
+            <div className="items">
+              <img src="/iceholidays-assets/images/ethical.png"/>
+              <label>Ethical</label>
+              <p>Precedent for an honest, fair and ethical business.</p>
+            </div>
+        </Col>
+      </Row>
+
+      <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 xs={24} sm={24} lg={8}>
+            <img src="/iceholidays-assets/images/certificate1.png"/>
+        </Col>
+        <Col xs={24} sm={24} lg={8}>
+            <img src="/iceholidays-assets/images/certificate2.png"/>
+        </Col>
+      </Row>
+      </>
+    </RibbonSection>
+  </div>
+);
+
+export default AboutUsPage;

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

@@ -0,0 +1,81 @@
+import React from "react";
+import Headline from "../components/shared/Headline";
+import { Button, Card, Col, Row, Space } from "antd";
+import FilterPills from "../widgets/FilterPills";
+import { Link } from "react-router-dom";
+const { Meta } = Card;
+
+const bannerPath = '/iceholidays-assets/images/blog.png';
+const breadcrumbs = [
+  { title: 'Home' },
+  { title: 'Blog' }
+] 
+
+const types = [ "News", "Blogs" ];
+const blogs = [
+  {
+    id: 1,
+    cover: "/iceholidays-assets/images/blog1.png",
+    title: "旅游的意义：探索世界与内心的旅程",
+    info: "未分类 / 发表评论 / 2024年11月22日",
+    summary: "旅游不仅拓展视野，也带来人生的启示。它教会我们谦逊、适应变化、享受过程，激发内心力量，感恩遇见，并帮助我们找回初心。"
+  },
+  {
+    id: 2,
+    cover: "/iceholidays-assets/images/blog1.png",
+    title: "旅游的意义：探索世界与内心的旅程",
+    info: "未分类 / 发表评论 / 2024年11月22日",
+    summary: "旅游不仅拓展视野，也带来人生的启示。它教会我们谦逊、适应变化、享受过程，激发内心力量，感恩遇见，并帮助我们找回初心。"
+  },
+  {
+    id: 3,
+    cover: "/iceholidays-assets/images/blog1.png",
+    title: "旅游的意义：探索世界与内心的旅程",
+    info: "未分类 / 发表评论 / 2024年11月22日",
+    summary: "旅游不仅拓展视野，也带来人生的启示。它教会我们谦逊、适应变化、享受过程，激发内心力量，感恩遇见，并帮助我们找回初心。"
+  },
+]
+
+const setFilter = (selectedFilter) => {
+  console.log("set filter", selectedFilter)
+}
+
+
+const BlogPage = React.FC = () => (
+  <div id="blog-page">
+    <Headline bannerImage={bannerPath} breadcrumbs={breadcrumbs} title="Blog"/>
+
+    <div id="blog-page_body">
+      <Space size={12} direction="vertical">
+        <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 key={blog.id} span={8}>
+                <Link to={`/app/blog/${blog.id}`}>
+                  <Card
+                    hoverable
+                    cover={<img alt="example" src={blog.cover} />}
+                  >
+                    <Meta title={blog.title} description={
+                      <>
+                        <span>{blog.info}</span>
+                        <p>{blog.summary}</p>
+                        <Button color="primary" variant="outlined" block>阅读更多</Button>
+                      </>
+                    } />
+                  </Card>
+                </Link>
+              </Col>
+            ))
+          }
+        </Row>
+      </div>
+    </div>
+  </div>
+);
+
+export default BlogPage;

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

@@ -0,0 +1,43 @@
+import React from "react";
+import Headline from "../components/shared/Headline";
+
+const bannerPath = '/iceholidays-assets/images/blog.png';
+const breadcrumbs = [
+  { title: 'Home' },
+  { title: 'Blog' },
+  { title: '从斯里兰卡到马尔代夫' },
+] 
+
+const types = [ "News", "Blogs" ];
+const blogs = [
+  {
+    cover: "/iceholidays-assets/images/blog1.png",
+    title: "旅游的意义：探索世界与内心的旅程",
+    info: "未分类 / 发表评论 / 2024年11月22日",
+    summary: "旅游不仅拓展视野，也带来人生的启示。它教会我们谦逊、适应变化、享受过程，激发内心力量，感恩遇见，并帮助我们找回初心。"
+  },
+  {
+    cover: "/iceholidays-assets/images/blog1.png",
+    title: "旅游的意义：探索世界与内心的旅程",
+    info: "未分类 / 发表评论 / 2024年11月22日",
+    summary: "旅游不仅拓展视野，也带来人生的启示。它教会我们谦逊、适应变化、享受过程，激发内心力量，感恩遇见，并帮助我们找回初心。"
+  },
+  {
+    cover: "/iceholidays-assets/images/blog1.png",
+    title: "旅游的意义：探索世界与内心的旅程",
+    info: "未分类 / 发表评论 / 2024年11月22日",
+    summary: "旅游不仅拓展视野，也带来人生的启示。它教会我们谦逊、适应变化、享受过程，激发内心力量，感恩遇见，并帮助我们找回初心。"
+  },
+]
+
+const BlogShowPage = React.FC = () => (
+  <div id="blog-show-page">
+    <Headline bannerImage={bannerPath} breadcrumbs={breadcrumbs} title="Blog"/>
+
+    <div id="blog-page_body">
+      
+    </div>
+  </div>
+);
+
+export default BlogShowPage;