iceholidays-frontend 0.6.0 → 0.8.0

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

@@ -1,8 +1,9 @@
 import React from "react";
 import Headline from "../components/shared/Headline";
-import { Button, Col, Flex, Form, Input, Row, Select, Space } from "antd";
+import { Button, Col, Flex, Form, Input, notification, Row, Select, Space } from "antd";
 import { mdiFacebook, mdiInstagram, mdiTwitter, mdiYoutube } from "@mdi/js";
 import Icon from "@mdi/react";
+import ContactUsApi from "../../api-services/contact-us-api.service";
 const { TextArea } = Input;
 
 const bannerPath = '/iceholidays-assets/images/contact_us.png';
@@ -11,112 +12,138 @@ const breadcrumbs = [
   { title: 'Contact Us' }
 ] 
 
-const ContactUsPage = React.FC = () => {
-  const [form] = Form.useForm();
-  
-  return (
-    <div id="contact-us-page">
-      <Headline bannerImage={bannerPath} breadcrumbs={breadcrumbs} title="contact us"/>
-
-      <div id="contact-us-page_body">
-        <img src="/iceholidays-assets/images/contact_us_form.png"/>
-
-        <div id="contact-us-form">
-          <div id="contact-us-form_header">
-            <h2>Get in touch</h2>
-            <span>Send us your enquiry</span>
-          </div>
-          <Form
-            form={form}
-            autoComplete="off"
-            layout="vertical"
-            variant="filled"
-          >
-            <Form.Item label="Enter Name" name="name">
-              <Input placeholder="Enter Here" />
-            </Form.Item>
 
-            <Row gutter={20}>
-              <Col span={12}>
-                <Form.Item label="Enter Email" name="email">
-                  <Input placeholder="Enter Here" />
-                </Form.Item>
-              </Col>
-              <Col span={12}>
-                <Form.Item label="Enter Phone Number" name="phoneNumber">
-                  <Input placeholder="Enter Here" />
-                </Form.Item>
-              </Col>
-            </Row>
+const validateMessages = {
+  required: '${label} is required!',
+  types: {
+    email: '${label} is not a valid email!',
+    number: '${label} is not a valid number!',
+  },
+  number: {
+    range: '${label} must be between ${min} and ${max}',
+  },
+};
 
-            <Form.Item label="Select State" name="state">
-              <Select
-                  placeholder="Please Select"
-                  defaultValue="lucy"
-                  options={[
-                    { value: 'jack', label: 'Jack' },
-                  ]}
-                />
-            </Form.Item>
 
-            <Form.Item label="Select Area" name="area">
-              <Select
-                  placeholder="Please Select"
-                  defaultValue="lucy"
-                  options={[
-                    { value: 'jack', label: 'Jack' },
-                  ]}
-                />
-            </Form.Item>
+export default class ContactUsPage extends React.Component {
+  api = new ContactUsApi;
 
-            <Form.Item label="Select Subject" name="subject">
-              <Select
-                  placeholder="Please Select"
-                  defaultValue="lucy"
-                  options={[
-                    { value: 'jack', label: 'Jack' },
-                  ]}
-                />
-            </Form.Item>
+  state = {
+    states: []
+  }
 
-            <Form.Item label="Write your message" name="message">
-              <TextArea rows={4} placeholder="Write Here"/>
-            </Form.Item>
 
-            <Flex align="center" justify="center">
-              <Button type="primary" htmlType="submit">
-                Submit
-              </Button>
-            </Flex>
+  componentDidMount() {
+    this.api.getStates()
+      .then(statesData => {
+        this.setState({states: statesData})
+      })
+      .catch(error => {
+        notification.error({ message: 'An error occured while loading states.'});
+      });
+  }
 
-          </Form>
-        </div>
-      </div>
+  submitForm(formValues) {
+    console.log(formValues)
+  }
 
-      <div id="contact-us-page_footer">
-        <Row gutter={[29, 20]} >
-          <Col xs={24} sm={24} lg={12}>
-            <div>
-              <label>Contact Us</label>
-              <span>feedback@gd.my</span>
-            </div>
-          </Col>
-          <Col xs={24} sm={24} lg={12}>
-            <div>
-              <label>Connect with Us</label>
-              <Space size={29}>
-                <Icon path={mdiFacebook} size={1} />
-                <Icon path={mdiInstagram} size={1} />
-                <Icon path={mdiTwitter} size={1} />
-                <Icon path={mdiYoutube} size={1} />
-                <img src="/iceholidays-assets/images/social.png" className="social-icon"/>
-              </Space>
+  render(){
+    return (
+      <div id="contact-us-page">
+        <Headline bannerImage={bannerPath} breadcrumbs={breadcrumbs} title="contact us"/>
+  
+        <div id="contact-us-page_body">
+          <img src="/iceholidays-assets/images/contact_us_form.png"/>
+  
+          <div id="contact-us-form">
+            <div id="contact-us-form_header">
+              <h2>Get in touch</h2>
+              <span>Send us your enquiry</span>
             </div>
-          </Col>
-        </Row>
-      </div>
-  </div>
-  );
-};
-
-export default ContactUsPage;
+            <Form
+              autoComplete="off"
+              layout="vertical"
+              variant="filled"
+              validateMessages={validateMessages}
+              onFinish={(formValues)=>this.submitForm(formValues)}
+            >
+              <Form.Item label="Enter Name" name="name">
+                <Input placeholder="Enter Here" />
+              </Form.Item>
+  
+              <Row gutter={20}>
+                <Col span={12}>
+                  <Form.Item label="Enter Email" name="email" rules={[{ type: 'email' }]}>
+                    <Input placeholder="Enter Here" />
+                  </Form.Item>
+                </Col>
+                <Col span={12}>
+                  <Form.Item label="Enter Phone Number" name="phoneNumber">
+                    <Input placeholder="Enter Here" />
+                  </Form.Item>
+                </Col>
+              </Row>
+  
+              <Form.Item label="Select State" name="state">
+                <Select
+                    placeholder="Please Select"
+                    options={this.state?.states}
+                  />
+              </Form.Item>
+  
+              <Form.Item label="Select Area" name="area">
+                <Input placeholder="Enter Here" />
+              </Form.Item>
+  
+              <Form.Item label="Select Subject" name="subject">
+                <Input placeholder="Enter Here" />
+              </Form.Item>
+  
+              <Form.Item label="Write your message" name="message">
+                <TextArea rows={4} placeholder="Write Here"/>
+              </Form.Item>
+  
+              <Flex align="center" justify="center">
+                <Button type="primary" htmlType="submit">
+                  Submit
+                </Button>
+              </Flex>
+  
+            </Form>
+          </div>
+        </div>
+  
+        <div id="contact-us-page_footer">
+          <Row gutter={[29, 20]} >
+            <Col xs={24} sm={24} lg={12}>
+              <div>
+                <label>Contact Us</label>
+                <span>feedback@gd.my</span>
+              </div>
+            </Col>
+            <Col xs={24} sm={24} lg={12}>
+              <div>
+                <label>Connect with Us</label>
+                <Space size={29}>
+                  <a target="_blank" href="https://www.facebook.com/thesignaturetour">
+                    <Icon path={mdiFacebook} size={1} />
+                  </a>
+                  <a target="_blank" href="https://www.instagram.com/thesignaturetours">
+                    <Icon path={mdiInstagram} size={1} />
+                  </a>
+                  <a target="_blank" href="javascript:void(0)" style={{pointerEvents: "none"}}>
+                    <Icon path={mdiTwitter} size={1} />
+                  </a>
+                  <a target="_blank" href="javascript:void(0)" style={{pointerEvents: "none"}}>
+                    <Icon path={mdiYoutube} size={1} />
+                  </a>
+                  <img src="/iceholidays-assets/images/social.png" className="social-icon"/>
+                </Space>
+              </div>
+            </Col>
+          </Row>
+        </div>
+    </div>
+    );
+  }
+}

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

@@ -12,6 +12,11 @@ import { Itinerary } from "../../interfaces/itinerary.interface";
 
 import createDOMPurify from 'dompurify'
 import LocationDropdown from "../components/shared/LocationDropdown";
+import ReactMarkdown from "react-markdown";
+import Markdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import rehypeRaw from "rehype-raw";
+import rehypeSanitize from "rehype-sanitize";
 
 const DOMPurify = createDOMPurify(window)
 
@@ -38,7 +43,7 @@ class ListingPage extends React.Component <{searchParams}> {
 
   state = {
     countries: [],
-    selectedCountry: {cities: []},
+    selectedCountry: {name: "", cities: []},
     searchParamsObj: {keyword: "", year: "", month: "", location_id: null},
     itineraries: [],
     location: {name: "", cover: ""},
@@ -56,15 +61,22 @@ class ListingPage extends React.Component <{searchParams}> {
   }
 
   componentDidMount() {
+    this.setSearchParamsObj();
+
     this.locationsApi.getCountries()
       .then(locationsData => {
-        this.setState({countries: locationsData, selectedCountry: locationsData[0]})
+        var selectedCountry = locationsData[0];
+        const searchParams = this.state.searchParamsObj;
+        if(searchParams.location_id){
+          const country = locationsData.find(loc => loc.id == searchParams.location_id);
+          if(country) selectedCountry = country;
+        } 
+        this.setState({countries: locationsData, selectedCountry})
+        this.getItineraries(searchParams, true);
       })
       .catch(error => {
         notification.error({ message: 'An error occured while loading countries.'});
       });
-
-      this.setSearchParamsObj();
     
   }
 
@@ -74,19 +86,18 @@ class ListingPage extends React.Component <{searchParams}> {
     searchParams.keys().forEach(key => {
       searchParamsObj[key] = searchParams.get(key);
     });
-
-    this.setState({searchParamsObj});
-
-    const locationId = searchParamsObj.location_id;
-    if(locationId) this.getLocation(locationId);
-
-    this.getItineraries(searchParamsObj);
+    
+    const {breadcrumbs} = this.state;
+    breadcrumbs[1] = {title: this.searchParamsToText()};
+    this.setState({searchParamsObj, breadcrumbs});
   }
 
 
   searchParamsToText() {
     var {keyword, year, month} = this.state.searchParamsObj;
-    return <span>{ this.state.location?.name || keyword}{`${month && `, ${month}`} ${year}`} </span>
+    const monthYear = (month || year) && `${month} ${year}`;
+    const text = [(this.state.location?.name || keyword), monthYear].filter(val => val).join(", ");
+    return <span>{ text } </span>
   }
 
   getLocation(locationId){
@@ -109,7 +120,17 @@ class ListingPage extends React.Component <{searchParams}> {
       });
   }
 
-  getItineraries(searchParams){
+  getItineraries(searchParams, init = false){
+    const locationId = searchParams.location_id;
+    const storedSearchParamsStr = localStorage.getItem("searchParams");
+    if(storedSearchParamsStr != null){
+      const storedSearchParams = JSON.parse(storedSearchParamsStr);
+      const storedLocationId = storedSearchParams.location_id;
+      if(locationId != storedLocationId || (init && locationId)) this.getLocation(locationId);
+    }else{
+      if(locationId) this.getLocation(locationId);
+    }
+
     this.seriesApi.getItineraries(searchParams)
     .then(itinerariesData => {
         this.setBreadcrumbs();
@@ -118,13 +139,16 @@ class ListingPage extends React.Component <{searchParams}> {
       .catch(error => {
         notification.error({ message: 'An error occured while loading itineraries.'});
       });
+    
+
+    localStorage.setItem("searchParams", JSON.stringify(searchParams));
   }
 
   setBreadcrumbs(){
     var breadcrumbs = this.state.breadcrumbs;
     if(breadcrumbs.length > 1){
       const {keyword, ...noKeyword} = this.state.searchParamsObj;
-      const allHasValues = Object.entries(noKeyword).every(o => o[1] != "");
+      const allHasValues = Object.entries(noKeyword).every(o => o[1] != "" && o[1] != null);
       if(allHasValues){
         const searchResultsCrumb = {title: <span>Search results</span>};
         if(breadcrumbs.length > 2){
@@ -153,7 +177,7 @@ class ListingPage extends React.Component <{searchParams}> {
     if(selectedCountry){
       const searchParamsObj = this.state.searchParamsObj;
       searchParamsObj.location_id = selectedCountry.id;
-      this.getLocation(selectedCountry.id);
+      // this.getLocation(selectedCountry.id);
 
       this.setState({selectedCountry, searchParamsObj});
       this.getItineraries(searchParamsObj);
@@ -170,7 +194,7 @@ class ListingPage extends React.Component <{searchParams}> {
         <div id="listing-page_header"> 
           <Flex vertical gap={10}>
             <h1>{this.searchParamsToText()}</h1>
-            <LocationDropdown locations={countries} selectLocation={this.selectCountry}/>
+            <LocationDropdown initialValue={selectedCountry.name} locations={countries} selectLocation={this.selectCountry}/>
           </Flex>
         </div>
       </Headline>
@@ -254,13 +278,13 @@ class ListingPage extends React.Component <{searchParams}> {
               </Flex>
             </div>
             </>
-          ) : <h1 id="no-tours-found">Not tour package is found.</h1>
+          ) : <h1 id="no-tours-found">No tour package is found.</h1>
         }
 
       </div>
 
       <Modal title="Description" open={this.state.descriptionModalOpen} onCancel={()=>this.closeModal("descriptionModalOpen")} footer={null} width={1000} centered className="tour_details_description">
-        <div className="pre-wrap">{ <span dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(descriptionData) }} /> }</div>
+        <Markdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeRaw]}>{descriptionData}</Markdown>
       </Modal>
 
       <Modal title="Itinerary" open={this.state.itineraryModalOpen} onCancel={()=>this.closeModal("itineraryModalOpen")} footer={null} width={1000} centered  className="tour_details_itinerary">

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;