iceholidays-frontend 0.2.0 → 0.4.0

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

@@ -1,68 +1,95 @@
-import { Carousel } from "antd";
+import { Carousel, notification } from "antd";
 import React from "react";
+import SlickButtonFix from "./shared/SlickButtonFix";
+import { mdiFountainPenTip, mdiMenuLeft, mdiMenuRight } from "@mdi/js";
+import Icon from "@mdi/react";
+import RibbonSection from "./shared/RibbonSection";
+import TestimonialsApi from "../../api-services/testimonials-api.service";
+import { Testimonial } from "../../interfaces/testimonial.interface";
+import createDOMPurify from 'dompurify'
 
-import star5 from "../../../assets/images/iceholidays/frontend/5star.png";
-import layer1 from "../../../assets/images/iceholidays/frontend/Layer_1.png";
-const contentStyle: React.CSSProperties = {
-  height: '160px',
-  color: '#fff',
-  lineHeight: '160px',
-  textAlign: 'center',
-  background: '#364d79',
-};
+const DOMPurify = createDOMPurify(window)
+
+export default class Testimonials extends React.Component {
+  api = new TestimonialsApi;
+
+  state = {
+    reviews: []
+  }
+
+  componentDidMount() {
+    this.api.getTestimonials()
+      .then(testimonialsData => {
+        this.setState({reviews: testimonialsData})
+      })
+      .catch(error => {
+        notification.error({ message: 'An error occured while loading testimonials.'});
+      });
+  }
+
+  render(){
+    return (
+      <RibbonSection title="Testimonial">
+        <div id="testimonials">
+          <Carousel autoplay arrows dots={false} draggable slidesToScroll= {1} slidesToShow={this.state.reviews.length > 3 ? 3 : this.state.reviews.length}
+            prevArrow={
+              <SlickButtonFix>
+                <Icon path={mdiMenuLeft} size={4} />
+              </SlickButtonFix>
+            }
+            nextArrow={
+              <SlickButtonFix>
+                <Icon path={mdiMenuRight} size={4} />
+              </SlickButtonFix>
+            }>
+            {
+              this.state.reviews.map((review:Testimonial)=>{
+                return (
+                  <div key={review.id} className="testimonial">
+                    <img src="/iceholidays-assets/images/5star.png" className="stars-icon"/>
+                    <div className="tour">
+                      <img src="/iceholidays-assets/images/logomark.png" className="st-logo"/>
+                      <div>
+                        <span> {review.tour} </span>
+                      </div>
+                    </div>
+                    <div className="comment">
+                      <span dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(review.comment) }} />
+                    </div>
+                    <div className="author">
+                      <Icon path={mdiFountainPenTip} size={1} className="author-icon" />
+                      <span>{review.author}</span>
+                    </div>
+                  </div>
+                )
+              })
+            }
+          </Carousel>
+        </div>
+      </RibbonSection>
+    )
+  }
+}
 
 const reviews = [
   {
     key: 1,
-    itinerarySummary: "8D6N 8D6N PREMIUM KOREA: <br/> SPLENDOR OF WINTER",
+    itinerarySummaryTitle: "8D6N 8D6N PREMIUM KOREA:",
+    itinerarySummaryDesc: "SPLENDOR OF WINTER",
     comment: "Thanks to our exceptional guide ANDY & MEILAN. 👍👍👍The Korea tour was fantastic,Their deep knowledge and engaging style made the experience truly memorable. Highly recommend for anyone wanting an insightful and enjoyable tour of Korea!🇰🇷 …",
     customerName: "Evon Ooi"
   },
   {
     key: 2,
-    itinerarySummary: "review 2",
+    itinerarySummaryTitle: "review 2",
     comment: "Thanks to our exceptional guide ANDY & MEILAN. 👍👍👍The Korea tour was fantastic,Their deep knowledge and engaging style made the experience truly memorable. Highly recommend for anyone wanting an insightful and enjoyable tour of Korea!🇰🇷 …",
     customerName: "Evon Ooi"
   },
   {
     key: 3,
-    itinerarySummary: "review 3",
+    itinerarySummaryTitle: "review 3",
     comment: "Thanks to our exceptional guide ANDY & MEILAN. 👍👍👍The Korea tour was fantastic,Their deep knowledge and engaging style made the experience truly memorable. Highly recommend for anyone wanting an insightful and enjoyable tour of Korea!🇰🇷 …",
     customerName: "Evon Ooi"
-  }
+  },
 ]
 
-function Testimonials(){
-  return (
-    <div id="testimonial">
-      <div id="testimonial-header" style={{backgroundImage: "url("+ layer1+")"}}>
-        <span>Testimonial</span>
-      </div>
-
-      <div id="testimonials">
-        <Carousel arrows slidesToScroll= {1} slidesToShow={3}>
-          {
-            reviews?.map((review)=>{
-              return (
-                <div key={review.key} className="testimonial">
-                  <img src={star5} className="stars-icon"/>
-                  <div className="itinerary-summary">
-                    <span> {review.itinerarySummary} </span>
-                  </div>
-                  <div className="comment">
-                    <span>{review.comment}</span>
-                  </div>
-                  <div className="customer-name">
-                    <span>{review.customerName}</span>
-                  </div>
-                </div>
-              )
-            })
-          }
-        </Carousel>
-      </div>
-    </div>
-  )
-}
-
-export default Testimonials;

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

@@ -0,0 +1,29 @@
+import { Breadcrumb } from "antd";
+import React, { JSX } from "react";
+import SearchBarWidget from "../../widgets/SearchBarWidget";
+
+
+const Headline = (
+  props: {
+    bannerImage: string;
+    title?: string;
+    children?: JSX.Element;
+    breadcrumbs: any[];
+  }
+) => {
+  const { bannerImage, title, children, breadcrumbs } = props;
+  return (
+    <>
+      <SearchBarWidget/>
+      <div id="headline">
+        <div id="headline_banner" style={{backgroundImage: `url(${bannerImage})`}}></div>
+        <div id="headline_header"> 
+          { title ? <h1> {title} </h1> : children}
+        </div>
+        <Breadcrumb items={breadcrumbs} separator=">"/>
+      </div>
+    </>
+  )
+}
+
+export default Headline;

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

@@ -0,0 +1,31 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import { mdiMenuRight } from "@mdi/js";
+import Icon from "@mdi/react";
+
+
+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>
+  )
+}
+
+export default Postcard;

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/components/shared/SlickButtonFix.tsx

@@ -0,0 +1,19 @@
+import React, { JSX } from "react";
+
+
+const SlickButtonFix = (
+  props: {
+    children: JSX.Element;
+    slideCount?: number;
+    currentSlide?: number;
+  }
+) => {
+  const { children, currentSlide, slideCount, ...others } = props;
+  return (
+    <span {...others}>
+      {children}
+    </span>
+  );
+};
+
+export default SlickButtonFix;

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,72 @@
+import { notification, 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";
+
+
+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">
+        <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>
+        <div id="copyright">
+          <span>Copyright © 2024 Golden Destinations</span>
+        </div>
+      </div>
+    ) 
+  }
+}

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

@@ -0,0 +1,45 @@
+import { mdiFileDownload } from "@mdi/js";
+import Icon from "@mdi/react";
+import { Button } from "antd";
+import React from "react";
+import { NavLink } from "react-router-dom";
+
+
+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 MainHeader = () => {
+  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>
+      </div>
+      <a id="get-brochure">
+        <Button type="primary"><Icon path={mdiFileDownload} size="18px" /> get brochure</Button>
+      </a>
+    </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 span={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}>
+            <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}>
+            <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" gutter={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}>
+            <img src="/iceholidays-assets/images/certificate1.png"/>
+        </Col>
+        <Col span={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,79 @@
+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 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}></FilterPills>
+        <FilterPills items="years" title="Year" allOption={true}></FilterPills>
+        <FilterPills items="months" title="Month" allOption={true}></FilterPills>
+      </Space>
+
+      <div id="blogs">
+        <Row wrap gutter={20}>
+          {
+            blogs.map(blog => (
+              <Col 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;

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

@@ -0,0 +1,16 @@
+import React from "react";
+import Headline from "../components/shared/Headline";
+
+const bannerPath = '/iceholidays-assets/images/contact_agents.png';
+const breadcrumbs = [
+  { title: 'Home' },
+  { title: 'Contact Agents' }
+] 
+
+const ContactAgentsPage = React.FC = () => (
+  <div id="contact-agents-page">
+    <Headline bannerImage={bannerPath} breadcrumbs={breadcrumbs} title="CONTACT AGENTS"/>
+  </div>
+);
+
+export default ContactAgentsPage;