iceholidays-frontend 0.6.0 → 0.7.0

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

@@ -1,6 +1,5 @@
-import React, { useState } from "react";
-import { Button, Carousel, Col, Flex, Form, Layout, Modal, notification, Row, Select, Skeleton, Space } from "antd";
-import SlickButtonFix from "../components/shared/SlickButtonFix";
+import React from "react";
+import { Button, Col, Flex, Layout, Modal, notification, Row, Skeleton, Space } from "antd";
 import { mdiAccountCash, mdiAccountGroup, mdiAirplane, mdiBagChecked, mdiBedKing, mdiClose, mdiEmailOutline, mdiFileDownload, mdiFlagTriangle, mdiMapMarker, mdiMapMarkerOutline, mdiMenuDown, mdiMenuLeft, mdiMenuRight, mdiMenuUp, mdiPhoneInTalkOutline, mdiReceiptText, mdiShieldAccount, mdiShieldAirplane, mdiSilverwareForkKnife, mdiWhatsapp } from "@mdi/js";
 import Icon from "@mdi/react";
 import Headline from "../components/shared/Headline";
@@ -13,11 +12,48 @@ import AgentsApi from "../../api-services/agents-api.service";
 import { Agent } from "../../interfaces/agent.interface";
 import PriceDetails from "../components/PriceDetails";
 import ContactAgentsForm from "../components/shared/ContactAgentsForm";
+import Markdown from "react-markdown";
+import rehypeRaw from "rehype-raw";
+import remarkGfm from "remark-gfm";
+import Slider from "react-slick";
 
 const breadcrumbs = [
   { title: 'Home' },
 ]
 
+
+const settings = {
+  dots: false,
+  arrows: true,
+  slidesToShow: 7.5,
+  pauseOnHover:false,
+  speed: 500,
+  infinite: false,
+  slidesToScroll: 1,
+  prevArrow: <Icon path={mdiMenuLeft} size={2} />,
+  nextArrow: <Icon path={mdiMenuRight} size={2} />,
+    responsive: [
+      {
+        breakpoint: 1024,
+        settings: {
+          slidesToShow: 5.5,
+        }
+      },
+      {
+        breakpoint: 768,
+        settings: {
+          slidesToShow: 3.5,
+        }
+      },
+      {
+        breakpoint: 480,
+        settings: {
+          slidesToShow: 2.5,
+        }
+      },
+    ]
+ };
+
 const thingsToKnow = (inclusionsData) => {
   return [
     {icon: <Icon path={mdiShieldAccount} size={1} />, label: "Free Travel Insurance", visible: inclusionsData.acf},
@@ -171,6 +207,7 @@ class ShowPage extends React.Component <{params;}> {
     const dates = itinerary.tours.length == 0 ? [] : itinerary.tours.map((tour:any) => {
           return {id: tour.id, date: tour.departure_date, price: `${itinerary.priceCurrency} ${tour.price}`}
         });
+    const tourInclusives = thingsToKnow(itinerary.includings);
 
     return (
       <div id="show-page">
@@ -191,31 +228,21 @@ class ShowPage extends React.Component <{params;}> {
           </Headline>
 
           <div id="date-selector">
-            <Carousel infinite={false} arrows dots={false} draggable={true} slidesToScroll= {1} slidesToShow={8}
-              prevArrow={
-                <SlickButtonFix>
-                  <Icon path={mdiMenuLeft} size={2} />
-                </SlickButtonFix>
+            <Slider {...settings}>
+              {
+                dates.map((tour, index) => {
+                  return <div key={index} className={`date-box ${selectedTour?.id == tour.id && "selected"}`} onClick={()=>this.selectTour(tour.id)}>
+                    <Flex justify="space-between" align="center" vertical gap={8}>
+                      <div className="date-box_date"> {tour.date} </div>
+                      <div>
+                        <span>From</span>
+                        <div className="date-box_price"> {tour.price} </div>
+                      </div>
+                    </Flex>
+                  </div>
+                })
               }
-              nextArrow={
-                <SlickButtonFix>
-                  <Icon path={mdiMenuRight} size={2} />
-                </SlickButtonFix>
-              }>
-                {
-                  dates.map((tour, index) => {
-                    return <div key={index} className={`date-box ${selectedTour?.id == tour.id && "selected"}`} onClick={()=>this.selectTour(tour.id)}>
-                      <Flex justify="space-between" align="center" vertical gap={8}>
-                        <div className="date-box_date"> {tour.date} </div>
-                        <div>
-                          <span>From</span>
-                          <div className="date-box_price"> {tour.price} </div>
-                        </div>
-                      </Flex>
-                    </div>
-                  })
-                }
-            </Carousel>
+            </Slider>
           </div>
         </>
         
@@ -231,36 +258,41 @@ class ShowPage extends React.Component <{params;}> {
               ) : (
                 <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(itinerary.includings)
-                              .filter(item => item.visible)
-                              .map(item => (
-                                <div className="item">
-                                  <div className="icon"> {item.icon} </div>
-                                  <label>{item.label}</label>
-                                </div>
-                              ))
-                          }
-                          {
-                            selectedTour?.guaranteed_departure && (
-                              <div className="item guaranteed">
-                                <div className="icon"> <Icon path={mdiShieldAirplane} size={1} /></div>
-                                <label>Guaranteed Departure</label>
-                              </div>
-                            )
-                          }
+                    {
+                      (tourInclusives.every(x => x.visible) || selectedTour?.guaranteed_departure) && (
+                        <div className="details-container">
+                          <div className="details-container_header"> Tour Inclusive </div>
+                          <div className="details-container_content"> 
+                            <div id="things-to-know">
+                              {
+                                tourInclusives.filter(item => item.visible)
+                                  .map(item => (
+                                    <div className="item">
+                                      <div className="icon"> {item.icon} </div>
+                                      <label>{item.label}</label>
+                                    </div>
+                                  ))
+                              }
+                              {
+                                selectedTour?.guaranteed_departure && (
+                                  <div className="item guaranteed">
+                                    <div className="icon"> <Icon path={mdiShieldAirplane} size={1} /></div>
+                                    <label>Guaranteed Departure</label>
+                                  </div>
+                                )
+                              }
+                            </div>
+                          </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 ${isCollapsed && 'collapsed'}`}>{itinerary?.description}</div>
+                        <div id="description" className={`${isCollapsed && 'collapsed'}`}>
+                          <Markdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeRaw]}>{itinerary?.description}</Markdown>
+                        </div>
                         <Button className="toggle-description" color="default" variant="filled" block onClick={this.toggleDescription}>{ isCollapsed ? 'Expand' : 'Collapse'} 
                           <Icon path={isCollapsed ? mdiMenuDown : mdiMenuUp} size="19px" /> 
                         </Button>

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

@@ -19,10 +19,10 @@ function FilterPills(
   props: {
     items:any[];
     title?:string;
-    initialValue:{keyword?:string, year?:string, month?: string, location_id?:any}
-    bindLabel?:string;
-    bindValue?:string;
-    allOption?:boolean;
+    initialValue:{keyword?:string, year?:any, month?: string, location_id?:any, type?: any}
+    bindLabel:string;
+    bindValue:string;
+    allOption:boolean;
     selectFilter;
   }){
   
@@ -32,7 +32,7 @@ function FilterPills(
 
   const allHasValues = () => {
     const {keyword, ...noKeyword} = selected;
-    return Object.entries(noKeyword).every(o => o[1] != "");
+    return Object.entries(noKeyword).every(o => o[1] != "" && o[1] != null);
   }
   const [collapseFilters, setcollapseFilters] = useState(allHasValues);
   
@@ -57,16 +57,15 @@ function FilterPills(
                   { title && <div className="filter-title"> {title} </div> }
                   <Space size={10} wrap>
                       {
-                        allOption && <div className="filter-pill selected"> <span> All </span></div>
+                        allOption && <div onClick={()=>selectFilter(bindValue, null)} className={`filter-pill ${(selected[bindValue] == null || selected[bindValue] == '') && 'selected'}`}> <span> All </span></div>
                       }
                       {
                         items.map((item, index) => {
                           //special case for location id
                           const id:any = bindValue == "location_id" ? "id" : bindValue;
-                          const label = bindLabel ? item[bindLabel] : item;
                           const value = bindValue ? item[id] : item;
                           const selectedItem = selected && bindValue ? selected[bindValue]: item ;
-                          return <div key={index} onClick={()=>selectFilter(bindValue, value)} className={`filter-pill ${selectedItem == value && 'selected'}`}> <span>{ label } </span></div>
+                          return <div key={index} onClick={()=>selectFilter(bindValue, value)} className={`filter-pill ${selectedItem == value && 'selected'}`}> <span>{ item[bindLabel] } </span></div>
                         })
                       }
                   </Space>
@@ -77,26 +76,24 @@ function FilterPills(
             <div className="filter-title"> Year </div>
             <Space size={10} wrap>
               {
-                allOption && <div className="filter-pill selected"> <span> All </span></div>
+                allOption && <div onClick={()=>selectFilter("year", "")} className={`filter-pill ${selected.year == '' && 'selected'}`}> <span> All </span></div>
               }
               {
-                years().map((year, index) => {
-                  const selectedItem = selected && selected.year; 
-                  return <div key={index} onClick={()=>selectFilter("year", year)} className={`filter-pill default-filter ${selectedItem == year.toString() && 'selected'}`}> <span>{year} </span></div>
-                })
+                years().map((year, index) => (
+                  <div key={index} onClick={()=>selectFilter("year", year)} className={`filter-pill default-filter ${selected.year == year && 'selected'}`}> <span>{year} </span></div>
+                ))
               }
             </Space>
       
             <div className="filter-title"> Month </div>
             <Row gutter={[10, 10]} justify="space-between">
               {
-                allOption && <Col className="filter-pill selected"> <span> All </span></Col>
+                allOption && <div onClick={()=>selectFilter("month", "")} className={`filter-pill ${selected.month == '' && 'selected'}`}> <span> All </span></div>
               }
               {
-                months.map((month, index) => {
-                  const selectedItem = selected && selected.month ;
-                  return <Col xs={8} md={6} lg={4}> <div key={index} onClick={()=>selectFilter("month", month.shortMonth)} className={`filter-pill default-filter ${selectedItem?.toString() == month.shortMonth && 'selected'}`}> <span>{month.name} </span></div> </Col>
-                })
+                months.map((month, index) => (
+                  <Col key={index} xs={8} md={6} lg={4}> <div onClick={()=>selectFilter("month", month.shortMonth)} className={`filter-pill default-filter ${selected.month == month.shortMonth && 'selected'}`}> <span>{month.name} </span></div> </Col>
+                ))
               }
             </Row>
           </Space>
@@ -108,4 +105,10 @@ function FilterPills(
   
 }
 
+FilterPills.defaultProps = {
+  allOption: false,
+  bindLabel: "label",
+  bindValue: "id"
+}
+
 export default FilterPills;

data/config/routes.rb

@@ -6,7 +6,7 @@ Iceholidays::Frontend::Engine.routes.draw do
   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   '/blog/:id'       => 'site#show_blog', as: :show_blog
   get   '/contact-agents' => 'site#contact_agents', as: :contact_agents
   get   '/contact-us'     => 'site#contact_us', as: :contact_us
   resources :posts, only:[:index, :show]

data/lib/iceholidays/frontend/version.rb

@@ -1,5 +1,5 @@
 module Iceholidays
   module Frontend
-    VERSION = "0.6.0"
+    VERSION = "0.7.0"
   end
 end

data/public/iceholidays-assets/application.css

@@ -15,6 +15,240 @@
  *= require_self
  */
 @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");
+/* 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;
+}
+.slick-list:focus {
+  outline: none;
+}
+.slick-list.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;
+}
+.slick-track:before, .slick-track:after {
+  content: "";
+  display: table;
+}
+.slick-track:after {
+  clear: both;
+}
+.slick-loading .slick-track {
+  visibility: hidden;
+}
+
+.slick-slide {
+  float: left;
+  height: 100%;
+  min-height: 1px;
+  display: none;
+}
+[dir=rtl] .slick-slide {
+  float: right;
+}
+.slick-slide img {
+  display: block;
+}
+.slick-slide.slick-loading img {
+  display: none;
+}
+.slick-slide.dragging img {
+  pointer-events: none;
+}
+.slick-initialized .slick-slide {
+  display: block;
+}
+.slick-loading .slick-slide {
+  visibility: hidden;
+}
+.slick-vertical .slick-slide {
+  display: block;
+  height: auto;
+  border: 1px solid transparent;
+}
+
+.slick-arrow.slick-hidden {
+  display: none;
+}
+
+/* Slider */
+/* Icons */
+/* 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;
+}
+.slick-prev:hover, .slick-prev:focus,
+.slick-next:hover,
+.slick-next:focus {
+  outline: none;
+  background: transparent;
+  color: transparent;
+}
+.slick-prev:hover:before, .slick-prev:focus:before,
+.slick-next:hover:before,
+.slick-next:focus:before {
+  opacity: 1;
+}
+.slick-prev.slick-disabled:before,
+.slick-next.slick-disabled:before {
+  opacity: 0.25;
+}
+.slick-prev:before,
+.slick-next:before {
+  font-family: "slick";
+  font-size: 20px;
+  line-height: 1;
+  color: white;
+  opacity: 0.75;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.slick-prev {
+  left: -25px;
+}
+[dir=rtl] .slick-prev {
+  left: auto;
+  right: -25px;
+}
+.slick-prev:before {
+  content: "←";
+}
+[dir=rtl] .slick-prev:before {
+  content: "→";
+}
+
+.slick-next {
+  right: -25px;
+}
+[dir=rtl] .slick-next {
+  left: -25px;
+  right: auto;
+}
+.slick-next:before {
+  content: "→";
+}
+[dir=rtl] .slick-next:before {
+  content: "←";
+}
+
+/* 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%;
+}
+.slick-dots li {
+  position: relative;
+  display: inline-block;
+  height: 20px;
+  width: 20px;
+  margin: 0 5px;
+  padding: 0;
+  cursor: pointer;
+}
+.slick-dots li 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;
+}
+.slick-dots li button:hover, .slick-dots li button:focus {
+  outline: none;
+}
+.slick-dots li button:hover:before, .slick-dots li button:focus:before {
+  opacity: 1;
+}
+.slick-dots li button:before {
+  position: absolute;
+  top: 0;
+  left: 0;
+  content: "•";
+  width: 20px;
+  height: 20px;
+  font-family: "slick";
+  font-size: 6px;
+  line-height: 20px;
+  text-align: center;
+  color: black;
+  opacity: 0.25;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.slick-dots li.slick-active button:before {
+  color: black;
+  opacity: 0.75;
+}
+
 .ant-layout-content {
   position: relative;
 }
@@ -112,6 +346,10 @@ a {
   background-color: transparent;
 }
 
+.slick-track {
+  margin: unset;
+}
+
 #main-header {
   --button-height: 35px;
   position: relative;
@@ -334,7 +572,7 @@ a {
   }
   #main-footer .contact-info .ant-flex {
     gap: 10px !important;
-    align-items: flex-start;
+    align-items: center;
   }
 }
 #headline {
@@ -581,6 +819,18 @@ a {
     line-height: 30px;
   }
 }
+@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;
+  }
+}
 .ant-input {
   field-sizing: content;
 }
@@ -1360,20 +1610,20 @@ body {
 #show-page #date-selector {
   padding: 20px var(--side-padding);
 }
-#show-page #date-selector [class~=ant-carousel] .slick-slide > div {
+#show-page #date-selector [class~=slick-slider] .slick-slide > div {
   padding: 0 5px;
 }
-#show-page #date-selector [class~=ant-carousel] .slick-arrow {
+#show-page #date-selector [class~=slick-slider] .slick-arrow {
   color: rgb(149, 148, 146);
 }
-#show-page #date-selector [class~=ant-carousel] .slick-arrow:hover {
+#show-page #date-selector [class~=slick-slider] .slick-arrow:hover {
   color: #DCB062;
 }
-#show-page #date-selector [class~=ant-carousel] .slick-prev {
-  inset-inline-start: -40px;
+#show-page #date-selector [class~=slick-slider] .slick-prev {
+  inset-inline-start: -35px;
 }
-#show-page #date-selector [class~=ant-carousel] .slick-next {
-  inset-inline-end: -40px;
+#show-page #date-selector [class~=slick-slider] .slick-next {
+  inset-inline-end: -35px;
 }
 #show-page #date-selector .date-box {
   background: #FFFFFF;
@@ -1825,6 +2075,9 @@ body {
   margin: 20px 0;
   display: block;
 }
+#about-signature-tours picture > img {
+  width: 100%;
+}
 #about-signature-tours #about-st-feature #feature {
   height: 246px;
   gap: 0px;
@@ -2228,6 +2481,17 @@ body {
 #blog-page_body #blogs {
   margin: 30px 0;
 }
+#blog-page_body #blogs .preview-content {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  max-height: 100px;
+}
+#blog-page_body #blogs .view-blog {
+  margin-top: 10px;
+}
 
 #blog-show-page_body {
   margin: 20px var(--side-padding);
@@ -2236,6 +2500,21 @@ body {
   background: rgb(255, 255, 255);
   box-shadow: 0px 5px 20px 0px rgba(225, 182, 91, 0.2);
 }
+#blog-show-page_body h1 {
+  font-family: Poppins;
+  font-weight: 600;
+  font-size: 24px;
+  line-height: 36px;
+  letter-spacing: 0%;
+  margin-top: 0;
+}
+#blog-show-page_body img {
+  object-fit: cover;
+  height: auto;
+  border-radius: 20px;
+  width: 100%;
+  margin-bottom: 20px;
+}
 
 @media only screen and (min-width: 769px) {
   * {
@@ -2535,6 +2814,15 @@ body {
     line-height: 45px;
     letter-spacing: 0.05em;
   }
+  #show-page #date-selector [class~=slick-slider] .slick-slide > div {
+    padding: 0 5px;
+  }
+  #show-page #date-selector [class~=slick-slider] .slick-prev {
+    inset-inline-start: -40px;
+  }
+  #show-page #date-selector [class~=slick-slider] .slick-next {
+    inset-inline-end: -40px;
+  }
   #show-page_body .toggle_contact-agent,
   #show-page_body .collapse-contact-agent {
     display: none;