iceholidays-frontend 0.6.0 → 0.7.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6247a8c09cfbda6553642ceb846d1a1661d98edbfa83a891f3ae54dc1cc8db14
-  data.tar.gz: 5551d3ff2200d552fe3449604ff5ee3159a5096a06c19436b630e721ce2f3632
+  metadata.gz: 59f15f7f57f10fa3e940d7dd8d7d1793fda28e03094d4728affa3ebdbb7ddb51
+  data.tar.gz: 93cc996da24784b1ae848ee7b8ca585db5f289911968b940cf41b981b8ae2a0b
 SHA512:
-  metadata.gz: f69e3e14e999712b65290da68cfda945d889b63d23acbfa94aad05351d6df78e77ca02150830688860187af1a724a763cb2402b673397140fc415eba4d99cb23
-  data.tar.gz: ad72cf692918fac66f81acf70a12790a6eec52cc34127bc8acf82ad8d1892ca5242d98a629c132066ab0bcb289452bb30f92bdc2511804eb7ff325fa46f668bc
+  metadata.gz: 8e3ba2c318d47c1e98b5a7feeca5cb95095669758d32727014327388b91f297a69929d4c0a4cac538e521dd89d87985836a3bddb29ed5707221fc1b436695f5e
+  data.tar.gz: 50191a25fab1a9471c4637ba6e709a43e094df1126bf6799a9b9e3d30eb3811beb0888c064f84ff1dbb2024c62321246bb10ab467040085a486b01fba3e9542d

data/app/assets/stylesheets/iceholidays/frontend/_slick-theme.scss

@@ -0,0 +1,194 @@
+@charset "UTF-8";
+
+// Default Variables
+
+// Slick icon entity codes outputs the following
+// "\2190" outputs ascii character "←"
+// "\2192" outputs ascii character "→"
+// "\2022" outputs ascii character "•"
+
+$slick-font-path: "./fonts/" !default;
+$slick-font-family: "slick" !default;
+$slick-loader-path: "./" !default;
+$slick-arrow-color: white !default;
+$slick-dot-color: black !default;
+$slick-dot-color-active: $slick-dot-color !default;
+$slick-prev-character: "\2190" !default;
+$slick-next-character: "\2192" !default;
+$slick-dot-character: "\2022" !default;
+$slick-dot-size: 6px !default;
+$slick-opacity-default: 0.75 !default;
+$slick-opacity-on-hover: 1 !default;
+$slick-opacity-not-active: 0.25 !default;
+
+@function slick-image-url($url) {
+    @if function-exists(image-url) {
+        @return image-url($url);
+    }
+    @else {
+        @return url($slick-loader-path + $url);
+    }
+}
+
+@function slick-font-url($url) {
+    @if function-exists(font-url) {
+        @return font-url($url);
+    }
+    @else {
+        @return url($slick-font-path + $url);
+    }
+}
+
+/* Slider */
+
+// .slick-list {
+//     .slick-loading & {
+//         background: #fff slick-image-url("ajax-loader.gif") center center no-repeat;
+//     }
+// }
+
+/* Icons */
+// @if $slick-font-family == "slick" {
+//     @font-face {
+//         font-family: "slick";
+//         src: slick-font-url("slick.eot");
+//         src: slick-font-url("slick.eot?#iefix") format("embedded-opentype"), slick-font-url("slick.woff") format("woff"), slick-font-url("slick.ttf") format("truetype"), slick-font-url("slick.svg#slick") format("svg");
+//         font-weight: normal;
+//         font-style: normal;
+//     }
+// }
+
+/* Arrows */
+
+.slick-prev,
+.slick-next {
+    position: absolute;
+    display: block;
+    height: 20px;
+    width: 20px;
+    line-height: 0px;
+    font-size: 0px;
+    cursor: pointer;
+    background: transparent;
+    color: transparent;
+    top: 50%;
+    -webkit-transform: translate(0, -50%);
+    -ms-transform: translate(0, -50%);
+    transform: translate(0, -50%);
+    padding: 0;
+    border: none;
+    outline: none;
+    &:hover, &:focus {
+        outline: none;
+        background: transparent;
+        color: transparent;
+        &:before {
+            opacity: $slick-opacity-on-hover;
+        }
+    }
+    &.slick-disabled:before {
+        opacity: $slick-opacity-not-active;
+    }
+    &:before {
+        font-family: $slick-font-family;
+        font-size: 20px;
+        line-height: 1;
+        color: $slick-arrow-color;
+        opacity: $slick-opacity-default;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+    }
+}
+
+.slick-prev {
+    left: -25px;
+    [dir="rtl"] & {
+        left: auto;
+        right: -25px;
+    }
+    &:before {
+        content: $slick-prev-character;
+        [dir="rtl"] & {
+            content: $slick-next-character;
+        }
+    }
+}
+
+.slick-next {
+    right: -25px;
+    [dir="rtl"] & {
+        left: -25px;
+        right: auto;
+    }
+    &:before {
+        content: $slick-next-character;
+        [dir="rtl"] & {
+            content: $slick-prev-character;
+        }
+    }
+}
+
+/* Dots */
+
+.slick-dotted.slick-slider {
+    margin-bottom: 30px;
+}
+
+.slick-dots {
+    position: absolute;
+    bottom: -25px;
+    list-style: none;
+    display: block;
+    text-align: center;
+    padding: 0;
+    margin: 0;
+    width: 100%;
+    li {
+        position: relative;
+        display: inline-block;
+        height: 20px;
+        width: 20px;
+        margin: 0 5px;
+        padding: 0;
+        cursor: pointer;
+        button {
+            border: 0;
+            background: transparent;
+            display: block;
+            height: 20px;
+            width: 20px;
+            outline: none;
+            line-height: 0px;
+            font-size: 0px;
+            color: transparent;
+            padding: 5px;
+            cursor: pointer;
+            &:hover, &:focus {
+                outline: none;
+                &:before {
+                    opacity: $slick-opacity-on-hover;
+                }
+            }
+            &:before {
+                position: absolute;
+                top: 0;
+                left: 0;
+                content: $slick-dot-character;
+                width: 20px;
+                height: 20px;
+                font-family: $slick-font-family;
+                font-size: $slick-dot-size;
+                line-height: 20px;
+                text-align: center;
+                color: $slick-dot-color;
+                opacity: $slick-opacity-not-active;
+                -webkit-font-smoothing: antialiased;
+                -moz-osx-font-smoothing: grayscale;
+            }
+        }
+        &.slick-active button:before {
+            color: $slick-dot-color-active;
+            opacity: $slick-opacity-default;
+        }
+    }
+}

data/app/assets/stylesheets/iceholidays/frontend/_slick.scss

@@ -0,0 +1,100 @@
+/* Slider */
+
+.slick-slider {
+    position: relative;
+    display: block;
+    box-sizing: border-box;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    -ms-touch-action: pan-y;
+    touch-action: pan-y;
+    -webkit-tap-highlight-color: transparent;
+}
+.slick-list {
+    position: relative;
+    overflow: hidden;
+    display: block;
+    margin: 0;
+    padding: 0;
+
+    &:focus {
+        outline: none;
+    }
+
+    &.dragging {
+        cursor: pointer;
+        cursor: hand;
+    }
+}
+.slick-slider .slick-track,
+.slick-slider .slick-list {
+    -webkit-transform: translate3d(0, 0, 0);
+    -moz-transform: translate3d(0, 0, 0);
+    -ms-transform: translate3d(0, 0, 0);
+    -o-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+}
+
+.slick-track {
+    position: relative;
+    left: 0;
+    top: 0;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+
+    &:before,
+    &:after {
+        content: "";
+        display: table;
+    }
+
+    &:after {
+        clear: both;
+    }
+
+    .slick-loading & {
+        visibility: hidden;
+    }
+}
+.slick-slide {
+    float: left;
+    height: 100%;
+    min-height: 1px;
+    [dir="rtl"] & {
+        float: right;
+    }
+    img {
+        display: block;
+    }
+    &.slick-loading img {
+        display: none;
+    }
+
+    display: none;
+
+    &.dragging img {
+        pointer-events: none;
+    }
+
+    .slick-initialized & {
+        display: block;
+    }
+
+    .slick-loading & {
+        visibility: hidden;
+    }
+
+    .slick-vertical & {
+        display: block;
+        height: auto;
+        border: 1px solid transparent;
+    }
+}
+.slick-arrow.slick-hidden {
+    display: none;
+}

data/app/assets/stylesheets/iceholidays/frontend/application.sass.scss

@@ -15,8 +15,11 @@
  */
 
 @import url("//fonts.googleapis.com/css?family=Poppins:ital,wght@0,100;0,200;0,200;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,200;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
+@import "_slick.scss";
+@import "_slick-theme.scss";
 @import "utils/_variables.scss";
 @import "utils/_antd_overrides.scss";
+@import "utils/_slick_overrides.scss";
 @import "layout.scss";
 @import "common.scss";
 @import "widgets/search_bar.scss";
@@ -608,7 +611,7 @@ body{
   #date-selector{
     padding: 20px var(--side-padding);
 
-    [class~='ant-carousel'] {
+    [class~='slick-slider'] {
       .slick-slide > div{
         padding: 0 5px;
       }
@@ -622,11 +625,11 @@ body{
       }
 
       .slick-prev{
-        inset-inline-start: -40px;
+        inset-inline-start: -35px;
       }
 
       .slick-next{
-        inset-inline-end: -40px;
+        inset-inline-end: -35px;
       }
     }
     .date-box{
@@ -1172,6 +1175,10 @@ body{
     display: block;
   }
 
+  picture > img{
+    width: 100%;
+  }
+
   #about-st-feature{
 
     #feature{
@@ -1659,6 +1666,19 @@ body{
 
     #blogs{
       margin: 30px 0;
+
+      .preview-content{
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        max-height: 100px;
+      }
+
+      .view-blog{
+        margin-top: 10px;
+      }
     }
   }
 }
@@ -1670,6 +1690,23 @@ body{
     border-radius: 20px;
     background: rgba(255, 255, 255, 1);
     box-shadow: 0px 5px 20px 0px rgba(225, 182, 91, 0.2);
+
+    h1{
+      font-family: Poppins;
+      font-weight: 600;
+      font-size: 24px;
+      line-height: 36px;
+      letter-spacing: 0%;
+      margin-top: 0;
+    }
+
+    img{
+      object-fit: cover;
+      height: auto;
+      border-radius: 20px;
+      width: 100%;
+      margin-bottom: 20px;
+    }
   }
 
 }
@@ -2059,6 +2096,22 @@ body{
       }
     }
 
+    #date-selector{
+      [class~='slick-slider'] {
+        .slick-slide > div{
+          padding: 0 5px;
+        }
+
+        .slick-prev{
+          inset-inline-start: -40px;
+        }
+
+        .slick-next{
+          inset-inline-end: -40px;
+        }
+      }
+    }
+
     &_body{
       .toggle_contact-agent,
       .collapse-contact-agent{

data/app/assets/stylesheets/iceholidays/frontend/common.scss

@@ -315,4 +315,18 @@
       }
     }
   }
+}
+
+@media only screen and (min-width: 1441px) {
+  #ribbon-section_header{
+    background-image: url('/iceholidays-assets/images/TST Ribbon@2x.png');   
+    height: 300px;
+  }
+}
+
+@media only screen and (min-width: 2880px) {
+  #ribbon-section_header{
+    background-image: url('/iceholidays-assets/images/TST Ribbon@3x.png');   
+    height: 450px;
+  }
 }

data/app/assets/stylesheets/iceholidays/frontend/layout.scss

@@ -274,7 +274,7 @@
     .contact-info{
       .ant-flex{
         gap: 10px !important;
-        align-items: flex-start;
+        align-items: center;
       }
     }
   }

data/app/assets/stylesheets/iceholidays/frontend/utils/_slick_overrides.scss

@@ -0,0 +1,3 @@
+.slick-track{
+  margin: unset;
+}

data/app/javascript/api-services/brochure-api.service.ts

@@ -0,0 +1,17 @@
+import axios from "axios";
+
+class BrochueApi {
+
+  getBrochure(): Promise<string> {
+    const apiUrl = "/api/v1/brochure";
+
+    return axios.get(apiUrl)
+    .then(response => {
+      const brochureUrl = response.data.url;
+      return Promise.resolve(brochureUrl);
+    })
+  }
+
+}
+
+export default BrochueApi;

data/app/javascript/api-services/posts-api.service.ts

@@ -0,0 +1,47 @@
+import axios from "axios";
+import { Blog } from "../interfaces/blog.interface";
+
+class PostsApi {
+
+  getBlogs(): Promise<Blog[]> {
+    const apiUrl = "/api/v1/posts";
+
+    return axios.get(apiUrl)
+    .then(response => {
+      const blogs = response.data.data.map(postData => {
+        const post:Blog = {
+          id: postData.attributes.id,
+          title: postData.attributes.title,
+          thumbnail: postData.attributes.thumbnail,
+          content: postData.attributes.body,
+          // author: postData.attributes.author,
+          // createdOn: postData.attributes.created_on,
+        }
+        return post;
+      })
+      return Promise.resolve(blogs);
+    });
+  }
+
+
+  getBlog(blogId:number): Promise<Blog> {
+    const apiUrl = `/api/v1/posts/${blogId}`;
+
+    return axios.get(apiUrl)
+    .then(response => {
+      const postData = response.data.data.attributes;
+      const post:Blog = {
+        id: response.data.data.id,
+        title: postData.title,
+        thumbnail: postData.thumbnail,
+        content: postData.body,
+        // author: postData.author,
+        // createdOn: postData.created_on,
+      }
+      return Promise.resolve(post);
+    });
+  }
+
+}
+
+export default PostsApi;

data/app/javascript/interfaces/blog.interface.ts

@@ -0,0 +1,8 @@
+export interface Blog {
+  id?:number;
+  title:string;
+  content:string;
+  thumbnail?:string;
+  author?:string;
+  createdOn?:string;
+}

data/app/javascript/react/App.tsx

@@ -22,7 +22,7 @@ export default function App() {
           <Route path="/app/about-us" element={<AboutUsPage />} />
           <Route path="/app/countries" element={<CountriesPage />} />
           <Route path="/app/blog" element={<BlogPage />} />
-          <Route path="/app/blog/1" element={<BlogShowPage />} />
+          <Route path="/app/blog/:id" element={<BlogShowPage />} />
           <Route path="/app/contact-agents" element={<ContactAgentsPage />} />
           <Route path="/app/contact-us" element={<ContactUsPage />} />
         </Route>

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

@@ -1,32 +1,47 @@
-import { notification, Select, Tabs, TabsProps } from "antd";
+import { notification, Tabs, TabsProps } from "antd";
 import React from "react";
 import LocationsApi from "../../api-services/locations-api.service";
 import { Country } from "../../interfaces/country.interface";
-import { mdiFilterVariant, mdiMenuRight } from "@mdi/js";
+import { mdiMenuRight } from "@mdi/js";
 import Icon from "@mdi/react";
 import { Link } from "react-router-dom";
 import LocationPostcards from "./shared/LocationPostcards";
 import LocationDropdown from "./shared/LocationDropdown";
 
+interface IDestinationState {
+  countries: Country[],
+  selectedCountry: any,
+  activeTab: string;
+}
+
 
 export default class Destinations extends React.Component {
   api = new LocationsApi;
 
-  state = {
+  state:IDestinationState = {
     countries: [],
+    selectedCountry: {}, 
     activeTab: "1"
   }
 
   componentDidMount() {
     this.api.getCountries()
       .then(locationsData => {
-        this.setState({countries: locationsData})
+        this.setState({countries: locationsData, selectedCountry: locationsData[0]})
       })
       .catch(error => {
         notification.error({ message: 'An error occured while loading countries.'});
       });
   }
 
+  changeTab (selectedCountryId) {
+   const countries = this.state.countries;
+   const selectedCountry = countries.find(c => c.id == +selectedCountryId);
+   if(selectedCountry) this.setState({selectedCountry});
+
+   this.setState({activeTab:selectedCountryId.toString()})
+ }
+
   render(){
     const pluralize = (count: number, noun: string, suffix = 's') =>
       `${count} ${noun}${count > 1 ? suffix : ''}`;
@@ -35,10 +50,6 @@ export default class Destinations extends React.Component {
       return `/app/listing?location_id=${locationId}`;
     }
 
-    const changeTab = (selectedKey:string) => {
-      this.setState({activeTab:selectedKey.toString()})
-    }
-
 
     var items:TabsProps["items"] = this.state.countries.map((country:Country, index)=>{
       return {
@@ -102,14 +113,14 @@ export default class Destinations extends React.Component {
       <div id="popular-destinations">
         <h1>Explore Popular Destination</h1>
 
-        <LocationDropdown locations={this.state.countries} selectLocation={changeTab}/>
+        <LocationDropdown initialValue={this.state.selectedCountry?.name} locations={this.state.countries} selectLocation={(selected)=>this.changeTab(selected)}/>
 
         <Tabs 
           defaultActiveKey="1" 
           activeKey={this.state.activeTab}
           items={items}
           type="card"
-          onChange={changeTab}/>
+          onChange={(selected)=>this.changeTab(selected)}/>
 
       </div>
     )

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

@@ -7,6 +7,9 @@ import RibbonSection from "./shared/RibbonSection";
 import TestimonialsApi from "../../api-services/testimonials-api.service";
 import { Testimonial } from "../../interfaces/testimonial.interface";
 import createDOMPurify from 'dompurify'
+import Markdown from "react-markdown";
+import rehypeRaw from "rehype-raw";
+import remarkGfm from "remark-gfm";
 
 const DOMPurify = createDOMPurify(window)
 
@@ -54,7 +57,7 @@ export default class Testimonials extends React.Component {
                       </div>
                     </div>
                     <div className="comment">
-                      <span dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(review.comment) }} />
+                      <Markdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeRaw]}>{review.comment}</Markdown>
                     </div>
                     <div className="author">
                       <Icon path={mdiFountainPenTip} size={1} className="author-icon" />

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

@@ -8,10 +8,11 @@ import { mdiFilterVariant } from "@mdi/js";
 const LocationDropdown = (
   props: {
     locations:Location[];
+    initialValue:string;
     selectLocation;
   }
 ) => {
-  const { locations } = props;
+  const { locations, initialValue } = props;
 
   return (
     <div className="location-dropdown">
@@ -20,6 +21,7 @@ const LocationDropdown = (
           suffixIcon={<Icon path={mdiFilterVariant} size="18px" />}
           variant="borderless"
           defaultValue="china"
+          value={initialValue}
           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) => (