@mjhls/mjh-framework 1.0.232 → 1.0.234

package/dist/esm/index.js

@@ -1,21 +1,21 @@
-import React__default, { useState, useRef, useEffect } from 'react';
+import React__default, { useState, useEffect, useRef } from 'react';
 import { c as createCommonjsModule, u as unwrapExports, a as commonjsGlobal } from './_commonjsHelpers-ae1b5db5.js';
 import { l as lib_3, a as lib_1 } from './index-70f7c966.js';
 import PropTypes from 'prop-types';
 import Container from 'react-bootstrap/Container';
 import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
-import Card from 'react-bootstrap/Card';
-import { I as InfiniteScroll, V as VisibilitySensor, m as moment } from './visibility-sensor-675d3fa1.js';
+import 'react-bootstrap/Card';
+import { m as moment, I as InfiniteScroll, V as VisibilitySensor } from './visibility-sensor-675d3fa1.js';
 import Link from 'next/link';
-import Router, { withRouter, useRouter } from 'next/router';
+import Router, { useRouter } from 'next/router';
 import { d as debounce_1 } from './debounce-dc0c02e5.js';
 import 'react-dom';
 import { i as imageUrlBuilder } from './index-ca4ff5cb.js';
 import './index-3c1ee9ab.js';
 import { m as main_36, a as main_35 } from './main-cd81c243.js';
 import { h as html_decode_1, c as clean_html_1 } from './entities-e85d3a4a.js';
-import { i as inherits$2, c as createClass, a as classCallCheck, p as possibleConstructorReturn, _ as _extends$2, t as toConsumableArray, s as slicedToArray } from './_babelHelpers-67c05996.js';
+import { s as slicedToArray, _ as _extends$2, t as toConsumableArray, i as inherits$2, c as createClass, a as classCallCheck, p as possibleConstructorReturn } from './_babelHelpers-67c05996.js';
 import { D as DFPAdSlot } from './AdSlot-0ea49f7e.js';
 export { D as AdSlot } from './AdSlot-0ea49f7e.js';
 export { default as DeckContent } from './DeckContent.js';
@@ -30,7 +30,7 @@ import GroupDeck from './GroupDeck.js';
 export { default as GroupDeck } from './GroupDeck.js';
 import { g as getYoutubeId } from './YoutubeGroup-1368335c.js';
 export { Y as YoutubeGroup } from './YoutubeGroup-1368335c.js';
-import { Figure, Carousel, Table, Button as Button$1, ProgressBar, Card as Card$1 } from 'react-bootstrap';
+import { Figure, Carousel, Table, Button as Button$1, ProgressBar, Card } from 'react-bootstrap';
 export { default as QueueDeckExpanded } from './QueueDeckExpanded.js';
 import { I as IoMdArrowDropdown } from './index.esm-536609db.js';
 export { default as VideoSeriesListing } from './VideoSeriesListing.js';
@@ -40,8 +40,9 @@ export { default as PublicationDeck } from './PublicationDeck.js';
 export { default as IssueDeck } from './IssueDeck.js';
 import 'react-bootstrap/Badge';
 export { default as IssueContentDeck } from './IssueContentDeck.js';
-import { M as MdPictureAsPdf, T as TemplateNormal } from './Normal-9fb1e124.js';
-export { A as AD728x90, C as Column1, a as Column2, b as Column3, f as HamMagazine, H as Header, L as LeftNav, e as NavDvm, c as NavMagazine, N as NavNative, d as NavNormal, P as PageFilter, S as Search, g as SideFooter, T as TemplateNormal } from './Normal-9fb1e124.js';
+import Spinner from 'react-bootstrap/Spinner';
+import { M as MdPictureAsPdf, T as TemplateNormal } from './Normal-20ff5bf5.js';
+export { A as AD728x90, C as Column1, a as Column2, b as Column3, f as HamMagazine, H as Header, L as LeftNav, e as NavDvm, c as NavMagazine, N as NavNative, d as NavNormal, P as PageFilter, S as Search, g as SideFooter, T as TemplateNormal } from './Normal-20ff5bf5.js';
 import 'react-bootstrap/ListGroup';
 import Head from 'next/head';
 import Accordion from 'react-bootstrap/Accordion';
@@ -60,376 +61,431 @@ import Dropdown from 'react-bootstrap/Dropdown';
 import { F as FaLongArrowAltRight } from './Ustream-6bb45fe7.js';
 export { U as Ustream } from './Ustream-6bb45fe7.js';
 
-var EventsDeck = function (_React$Component) {
-  inherits$2(EventsDeck, _React$Component);
-
-  function EventsDeck() {
-    var _ref;
+var clientId = process.env.CVENT_CLIENT_ID;
+var clientSecret = process.env.CVENT_CLIENT_SECRET;
+var corsProxy = 'https://cors-anywhere.herokuapp.com/';
+var currentTime = moment().toISOString();
+
+var EventsDeck = function EventsDeck(_ref) {
+  var _ref$autoScroll = _ref.autoScroll,
+      autoScroll = _ref$autoScroll === undefined ? true : _ref$autoScroll,
+      rightItems = _ref.rightItems,
+      _ref$seoPaginate = _ref.seoPaginate,
+      seoPaginate = _ref$seoPaginate === undefined ? true : _ref$seoPaginate,
+      pageview = _ref.pageview,
+      _ref$filter = _ref.filter,
+      filter = _ref$filter === undefined ? 'start gt \'' + currentTime + '\' and status eq \'Active\'' : _ref$filter;
 
-    var _temp, _this, _ret;
+  var router = useRouter();
 
-    classCallCheck(this, EventsDeck);
+  var _useState = useState(true),
+      _useState2 = slicedToArray(_useState, 2),
+      isLoading = _useState2[0],
+      setIsLoading = _useState2[1];
 
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
+  var _useState3 = useState(null),
+      _useState4 = slicedToArray(_useState3, 2),
+      accessToken = _useState4[0],
+      setAccessToken = _useState4[1];
 
-    return _ret = (_temp = (_this = possibleConstructorReturn(this, (_ref = EventsDeck.__proto__ || Object.getPrototypeOf(EventsDeck)).call.apply(_ref, [this].concat(args))), _this), _this.data = _this.props.dataRecord || [], _this.params = _this.props.params, _this.state = {
-      data: _this.data,
-      dataKeptToCompareNewDatarecord: _this.data,
-      page: _this.props.currentPage || 1,
-      scrolling: true,
-      currentPage: _this.props.currentPage || 1,
-      params: _this.params
-    }, _this.loadMore = debounce_1(function () {
-      _this.setState(function (prevState) {
-        return {
-          page: prevState.page + 1
-        };
-      }, _this.loadData);
-    }, 0), _this.loadData = function () {
-      var _this$state = _this.state,
-          data = _this$state.data,
-          page = _this$state.page,
-          params = _this$state.params;
-      var dataHandler = _this.props.dataHandler;
+  var _useState5 = useState([]),
+      _useState6 = slicedToArray(_useState5, 2),
+      data = _useState6[0],
+      setData = _useState6[1];
 
+  var _useState7 = useState(null),
+      _useState8 = slicedToArray(_useState7, 2),
+      nextPagingToken = _useState8[0],
+      setNextPagingToken = _useState8[1];
 
-      var dataHandlerPromise = new Promise(function (resolve, reject) {
-        try {
-          var result = dataHandler(params);
-          resolve(result);
-        } catch (e) {
-          reject(e);
-        }
-      });
-      dataHandlerPromise.then(function (newData) {
-        _this.loadDataFinished(data, newData, page);
-      });
-    }, _this.loadDataFinished = function (data, newData, page) {
-      var newDataArray = newData.data.map(function (item) {
+  var _useState9 = useState(true),
+      _useState10 = slicedToArray(_useState9, 2),
+      scrolling = _useState10[0],
+      setScrolling = _useState10[1];
+
+  var _useState11 = useState(1),
+      _useState12 = slicedToArray(_useState11, 2),
+      page = _useState12[0],
+      setPage = _useState12[1];
+
+  var _useState13 = useState(1),
+      _useState14 = slicedToArray(_useState13, 2),
+      currentPage = _useState14[0],
+      setCurrentPage = _useState14[1];
+
+  var getEvents = function getEvents() {
+    var itemsPerPage = 10;
+    var url = corsProxy + 'https://api-platform.cvent.com/event/v1/events/filter?limit=' + itemsPerPage;
+    fetch(url, {
+      headers: {
+        Accept: 'application/json',
+        'x-api-key': clientId,
+        Authorization: 'Bearer ' + accessToken
+      },
+      body: JSON.stringify({ filter: filter }),
+      method: 'POST'
+    }).then(function (response) {
+      return response.json();
+    }).then(function (events) {
+      setIsLoading(false);
+      var newData = events.data.map(function (item) {
         return _extends$2({}, item, {
           pageNumber: page
         });
       });
-      var newParams = _extends$2({}, _this.state.params, { nextPagingToken: newData.paging.nextToken });
-      _this.setState(function () {
-        if (newDataArray.length > 0) {
-          return {
-            data: [].concat(toConsumableArray(data), toConsumableArray(newDataArray)),
-            params: newParams,
-            scrolling: true
-          };
+      console.log(events.paging);
+      if (newData.length > 0) {
+        setData(function (prevData) {
+          return [].concat(toConsumableArray(prevData), toConsumableArray(newData));
+        });
+        setNextPagingToken(events.paging.nextToken ? events.paging.nextToken : null);
+        setScrolling(true);
+      } else {
+        setScrolling(false);
+      }
+    });
+  };
+
+  useEffect(function () {
+    // load initial data
+    if (accessToken && page === 1 && currentPage === 1) {
+      getEvents();
+    }
+  }, [accessToken, filter, page, currentPage]);
+
+  useEffect(function () {
+    // reset state when filter changes
+    setIsLoading(true);
+    setData([]);
+    setPage(1);
+    setCurrentPage(1);
+  }, [filter]);
+
+  useEffect(function () {
+    // get access token
+    var encodedData = window.btoa(clientId + ':' + clientSecret);
+    var url = corsProxy + 'https://api-platform.cvent.com/ea/oauth2/token';
+    fetch(url, {
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded',
+        Authorization: 'Basic ' + encodedData
+      },
+      method: 'POST',
+      body: 'grant_type=client_credentials&client_id=' + clientId
+    }).then(function (response) {
+      return response.json();
+    }).then(function (json) {
+      return setAccessToken(json.access_token);
+    }).catch(function (e) {
+      return console.log(e);
+    });
+  }, []);
+
+  var loadMore = debounce_1(function () {
+    setPage(function (prevPage) {
+      return prevPage + 1;
+    });
+  }, 0);
+
+  useEffect(function () {
+    // load more events
+    page !== 1 && page !== currentPage && loadMoreEvents();
+  }, [page]);
+
+  var loadMoreEvents = function loadMoreEvents() {
+    console.log(nextPagingToken, 'nextPagingToken');
+    if (nextPagingToken) {
+      var url = corsProxy + 'https://api-platform.cvent.com/event/v1/events/filter?token=' + nextPagingToken;
+      fetch(url, {
+        headers: {
+          Accept: 'application/json',
+          'x-api-key': clientId,
+          Authorization: 'Bearer ' + accessToken
+        },
+        body: JSON.stringify({ filter: filter }),
+        method: 'POST'
+      }).then(function (response) {
+        return response.json();
+      }).then(function (events) {
+        var newData = events.data.map(function (item) {
+          return _extends$2({}, item, {
+            pageNumber: page
+          });
+        });
+        console.log(events.paging);
+        if (newData.length > 0) {
+          setData(function (prevData) {
+            return [].concat(toConsumableArray(prevData), toConsumableArray(newData));
+          });
+          setNextPagingToken(events.paging.nextToken ? events.paging.nextToken : null);
+          setScrolling(true);
         } else {
-          return {
-            scrolling: false
-          };
+          setScrolling(false);
         }
       });
-    }, _this.changePageNumber = function (pageNumber) {
-      var _this$props = _this.props,
-          seoPaginate = _this$props.seoPaginate,
-          pageview = _this$props.pageview,
-          router = _this$props.router;
-      var currentPage = _this.state.currentPage;
-
-      if (seoPaginate) {
-        var path = router.asPath;
-        var qrIndex = path.indexOf('?');
-        var pathname = router.pathname;
-        var queryString = '';
-
-        if (qrIndex > 0) {
-          path = path.substring(1, qrIndex);
-
-          var partialQS = router.asPath.substring(qrIndex + 1);
-          var partialQSArr = partialQS.split('&');
-
-          // exclude page=xxx from query string
-          partialQSArr.map(function (item) {
-            var itemArr = item.split('=');
-            var key = itemArr[0];
-            var val = itemArr[1];
-
-            if (key !== 'page') {
-              queryString += (queryString.length === 0 ? '' : '&') + key + '=' + val;
-            }
-          });
-        }
+    }
+  };
 
-        if (queryString.length > 0) {
-          path += '?' + queryString;
-        }
+  var changePageNumber = function changePageNumber(pageNumber) {
+    if (seoPaginate) {
+      var path = router.asPath;
+      var qrIndex = path.indexOf('?');
+      var pathname = router.pathname;
+      var queryString = '';
 
-        pageNumber = parseInt(pageNumber);
+      if (qrIndex > 0) {
+        path = path.substring(1, qrIndex);
 
-        if (currentPage !== pageNumber) {
-          lib_3.refresh();
+        var partialQS = router.asPath.substring(qrIndex + 1);
+        var partialQSArr = partialQS.split('&');
 
-          _this.setState({
-            currentPage: pageNumber
-          }, function () {
-            if (path[0] !== '/') {
-              path = '/' + path;
-            }
+        // exclude page=xxx from query string
+        partialQSArr.map(function (item) {
+          var itemArr = item.split('=');
+          var key = itemArr[0];
+          var val = itemArr[1];
 
-            var newPath = pageNumber === 1 ? '' + path : path + '?page=' + pageNumber;
-
-            // please leave this for later debug purpose : Yong Jun.
-            /* console.log('page change reported', {
-              currentPage: currentPage,
-              pageNumber: pageNumber,
-              pathname: pathname,
-              path: path,
-              newPath: newPath,
-              firstPage: pageNumber === 1,
-              queryString: queryString
-            }) */
-
-            if (pageview) {
-              pageview(newPath);
-            }
+          if (key !== 'page') {
+            queryString += (queryString.length === 0 ? '' : '&') + key + '=' + val;
+          }
+        });
+      }
 
-            router.push(pathname, newPath, {
-              shallow: true
-            });
-          });
+      if (queryString.length > 0) {
+        path += '?' + queryString;
+      }
+
+      pageNumber = parseInt(pageNumber);
+
+      if (currentPage !== pageNumber) {
+        lib_3.refresh();
+
+        setCurrentPage(pageNumber);
+        if (path[0] !== '/') {
+          path = '/' + path;
+        }
+        var newPath = pageNumber === 1 ? '' + path : path + '?page=' + pageNumber;
+
+        if (pageview) {
+          pageview(newPath);
         }
+
+        router.push(pathname, newPath, {
+          shallow: true
+        });
       }
-    }, _this.registrationButton = function (registrationLink) {
-      return React__default.createElement(
-        'a',
-        { href: registrationLink, target: '_blank' },
-        React__default.createElement(
-          Button,
-          { className: 'event-registration-button' },
-          'Register Now'
-        )
-      );
-    }, _this.renderVenue = function (venue, index) {
-      return React__default.createElement(
-        Col,
-        { xs: 12, sm: 6, md: 6, xl: 6 },
-        React__default.createElement(
-          'div',
-          { className: 'venue-card', style: { width: '18rem' } },
+    }
+  };
+
+  var renderRegisterButton = function renderRegisterButton(registrationLink) {
+    return React__default.createElement(
+      'a',
+      { href: registrationLink, target: '_blank' },
+      React__default.createElement(
+        Button,
+        { size: 'sm', className: 'event-registration-button' },
+        'Register Now'
+      )
+    );
+  };
+
+  var cardLoader = function cardLoader() {
+    var numberOfItemsBeforeAd = 5;
+    return React__default.createElement(
+      Row,
+      null,
+      data && data.map(function (row, index) {
+        var title = row.title,
+            description = row.description,
+            start = row.start,
+            venues = row.venues,
+            _links = row._links,
+            virtual = row.virtual;
+
+        var pageNumber = row.pageNumber || 1;
+        return React__default.createElement(
+          React__default.Fragment,
+          { key: index },
           React__default.createElement(
-            Card.Body,
-            null,
-            React__default.createElement(
-              Card.Title,
-              null,
-              venue.name
-            ),
-            React__default.createElement(
-              Card.Subtitle,
-              { className: 'mb-2 text-muted' },
-              venue.address.address1
-            ),
-            React__default.createElement(
-              Card.Subtitle,
-              { className: 'mb-2 text-muted' },
-              venue.address.city
-            ),
-            React__default.createElement(
-              Card.Subtitle,
-              { className: 'mb-2 text-muted' },
-              venue.address.country
-            ),
-            React__default.createElement(
-              Card.Subtitle,
-              { className: 'mb-2 text-muted' },
-              venue.address.postalCode
-            )
-          )
-        )
-      );
-    }, _this.cardLoader = function () {
-      var numberOfItemsBeforeAd = 5;
-      return React__default.createElement(
-        Row,
-        null,
-        _this.state.data && _this.state.data.map(function (row, index) {
-          var title = row.title,
-              description = row.description,
-              start = row.start,
-              venues = row.venues,
-              _links = row._links;
-
-          var pageNumber = row.pageNumber || _this.state.page;
-          return React__default.createElement(
-            React__default.Fragment,
-            { key: index },
+            VisibilitySensor,
+            {
+              onChange: function onChange(isVisible) {
+                isVisible && changePageNumber(pageNumber);
+              } },
             React__default.createElement(
-              VisibilitySensor,
-              {
-                onChange: function onChange(isVisible) {
-                  isVisible && _this.changePageNumber(pageNumber);
-                } },
+              Col,
+              { xl: 12, style: { paddingTop: '10px', marginBottom: '20px', borderTop: '1px solid #D3D3D3' } },
               React__default.createElement(
-                Col,
-                { xl: 12, style: { marginBottom: '1rem' } },
+                Row,
+                null,
                 React__default.createElement(
-                  Row,
-                  null,
-                  React__default.createElement(
-                    Col,
-                    { xs: 12, style: { paddingTop: '10px', marginBottom: '20px', borderTop: '1px solid #EEE' } },
-                    !main_36 && React__default.createElement(
-                      'div',
-                      { style: { float: 'right' } },
-                      _this.registrationButton(_links.registration.href)
+                  Col,
+                  { xs: 12, sm: 4 },
+                  venues && venues.length > 0 && React__default.createElement(
+                    'div',
+                    null,
+                    React__default.createElement(
+                      'h5',
+                      null,
+                      venues[0].name
                     ),
-                    React__default.createElement('h4', { className: 'mb-1', style: { fontWeight: '500', fontSize: '22px' }, dangerouslySetInnerHTML: { __html: title } }),
                     React__default.createElement(
                       'p',
-                      { className: 'mb-2' },
-                      'Sarting at ',
-                      moment(start).format('MMMM Do YYYY, h:mma')
+                      { style: { padding: 0, margin: 0 } },
+                      moment(start).format('LL')
                     ),
-                    description && React__default.createElement('p', { dangerouslySetInnerHTML: { __html: description } }),
                     React__default.createElement(
-                      Row,
-                      null,
-                      venues && venues.length > 0 && venues.map(function (venue, index) {
-                        return _this.renderVenue(venue, index);
-                      })
-                    ),
-                    main_36 && _this.registrationButton(_links.registration.href)
+                      'p',
+                      { style: { padding: 0, margin: 0 } },
+                      moment(start).format('LT')
+                    )
+                  )
+                ),
+                React__default.createElement(
+                  Col,
+                  { xs: 12, sm: 5 },
+                  React__default.createElement('h6', { className: 'mb-1', dangerouslySetInnerHTML: { __html: title } }),
+                  virtual && React__default.createElement(
+                    'h5',
+                    null,
+                    'VIRTUAL MEETING'
                   )
+                ),
+                React__default.createElement(
+                  Col,
+                  { xs: 12, sm: 3 },
+                  renderRegisterButton(_links.registration.href)
+                )
+              ),
+              description && React__default.createElement(
+                Row,
+                { style: { marginTop: '8px' } },
+                React__default.createElement(
+                  Col,
+                  null,
+                  React__default.createElement('p', { dangerouslySetInnerHTML: { __html: description } })
                 )
               )
-            ),
-            main_36 && _this.rightItems && (index + 1) % numberOfItemsBeforeAd === 0 && React__default.createElement(
-              'div',
-              { style: { margin: '0 auto' } },
-              _this.renderMobileAd(index, numberOfItemsBeforeAd, _this.rightItems)
             )
-          );
-        })
-      );
-    }, _this.renderMobileAd = function (index, numberOfItemsBeforeAd) {
-      var rightItems = _this.props.rightItems;
+          ),
+          main_36 && rightItems && (index + 1) % numberOfItemsBeforeAd === 0 && React__default.createElement(
+            'div',
+            { style: { margin: '0 auto' } },
+            renderMobileAd(index, numberOfItemsBeforeAd)
+          )
+        );
+      })
+    );
+  };
 
-      var i = ((index + 1) / numberOfItemsBeforeAd - 1) % rightItems.length;
-      return React__default.createElement(
-        Col,
-        { md: 12, style: { display: 'flex', flex: '1 0 auto' } },
-        rightItems[i].component
-      );
-    }, _this.renderManualPagination = function () {
-      var currentPage = _this.state.currentPage;
+  var renderMobileAd = function renderMobileAd(index, numberOfItemsBeforeAd) {
+    var i = ((index + 1) / numberOfItemsBeforeAd - 1) % rightItems.length;
+    return React__default.createElement(
+      Col,
+      { md: 12, style: { display: 'flex', flex: '1 0 auto' } },
+      rightItems[i].component
+    );
+  };
 
-      return React__default.createElement(
-        'div',
-        { className: 'd-flex justify-content-between' },
-        currentPage && currentPage > 1 && React__default.createElement(
-          'a',
-          { href: '?page=' + (currentPage - 1) },
-          '<< Previous'
-        ),
+  var renderManualPagination = function renderManualPagination() {
+    var currentPage = 1;
+    return React__default.createElement(
+      'div',
+      { className: 'd-flex justify-content-between' },
+       currentPage > 1 ,
+      React__default.createElement(
+        'a',
+        { href: '?page=' + (currentPage + 1) },
+        'Next >>'
+      )
+    );
+  };
+
+  if (isLoading) {
+    return React__default.createElement(
+      'div',
+      { style: { display: 'flex', justifyContent: 'center', marginTop: '48px' } },
+      React__default.createElement(
+        Spinner,
+        { animation: 'border', role: 'status' },
         React__default.createElement(
-          'a',
-          { href: '?page=' + (currentPage + 1) },
-          'Next >>'
+          'span',
+          { className: 'sr-only' },
+          'Loading...'
         )
-      );
-    }, _temp), possibleConstructorReturn(_this, _ret);
+      )
+    );
   }
 
-  createClass(EventsDeck, [{
-    key: 'componentDidUpdate',
-    value: function componentDidUpdate(prevProps, prevState) {
-      if (this.state.dataKeptToCompareNewDatarecord !== this.props.dataRecord) {
-        // eslint-disable-next-line react/no-did-update-set-state
-        this.setState({
-          data: this.props.dataRecord,
-          dataKeptToCompareNewDatarecord: this.props.dataRecord,
-          page: 1,
-          scrolling: true
-        });
-      }
-    }
-  }, {
-    key: 'componentDidMount',
-    value: function componentDidMount() {
-      // this.loadData();
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      var _this2 = this;
-
-      var autoScroll = this.props.autoScroll;
-
-      console.log(this.state.data);
-      return React__default.createElement(
-        'div',
-        { className: 'contentDeck' },
-        autoScroll ? React__default.createElement(
-          React__default.Fragment,
-          null,
-          React__default.createElement(
-            InfiniteScroll,
-            { dataLength: this.state.data.length, next: this.loadMore, hasMore: this.state.scrolling, scrollThreshold: 0.9 },
-            React__default.createElement(
-              Container,
-              null,
-              this.cardLoader()
-            )
-          ),
+  if (data.length > 0) {
+    return React__default.createElement(
+      'div',
+      { className: 'contentDeck' },
+      autoScroll ? React__default.createElement(
+        React__default.Fragment,
+        null,
+        React__default.createElement(
+          InfiniteScroll,
+          { dataLength: data.length, next: loadMore, hasMore: scrolling, scrollThreshold: 0.9 },
           React__default.createElement(
-            'noscript',
+            Container,
             null,
-            this.renderManualPagination()
+            cardLoader()
           )
-        ) : React__default.createElement(
-          React__default.Fragment,
+        ),
+        React__default.createElement(
+          'noscript',
           null,
-          React__default.createElement(
-            Container,
-            null,
-            this.cardLoader()
-          ),
-          React__default.createElement(
-            'div',
-            { style: { padding: '0px 10px' } },
-            this.state.scrolling ? React__default.createElement(
-              'button',
-              {
-                style: { margin: 'auto', width: '100%' },
-                onClick: function onClick(e) {
-                  _this2.loadMore();
-                } },
-              'Load More'
-            ) : React__default.createElement(
-              'p',
-              { style: { textAlign: 'center' } },
-              React__default.createElement(
-                'b',
-                null,
-                'End of data'
-              )
+          renderManualPagination()
+        )
+      ) : React__default.createElement(
+        React__default.Fragment,
+        null,
+        React__default.createElement(
+          Container,
+          null,
+          cardLoader()
+        ),
+        React__default.createElement(
+          'div',
+          { style: { padding: '0px 10px' } },
+          scrolling ? React__default.createElement(
+            'button',
+            {
+              style: { margin: 'auto', width: '100%' },
+              onClick: function onClick(e) {
+                loadMore();
+              } },
+            'Load More'
+          ) : React__default.createElement(
+            'p',
+            { style: { textAlign: 'center' } },
+            React__default.createElement(
+              'b',
+              null,
+              'End of data'
             )
-          ),
-          React__default.createElement(
-            'noscript',
-            null,
-            this.renderManualPagination()
           )
         ),
         React__default.createElement(
-          'style',
-          { jsx: 'true' },
-          '\n          .venue-card {\n            border: 1px solid #c0c0c0;\n            border-radius: 6px;\n            padding: 2px;\n          }\n        '
+          'noscript',
+          null,
+          renderManualPagination()
         )
-      );
-    }
-  }]);
-  return EventsDeck;
-}(React__default.Component);
-
-var EventsDeck$1 = withRouter(EventsDeck);
+      )
+    );
+  } else {
+    return React__default.createElement(
+      'div',
+      null,
+      React__default.createElement(
+        'div',
+        null,
+        'No events found '
+      )
+    );
+  }
+};
 
 var AccordionPanel = function AccordionPanel(props) {
   var accordionClassName = props.accordionClassName,
@@ -796,7 +852,7 @@ var FigureComponent = function FigureComponent(_ref) {
 };
 
 var urlFor$1 = function urlFor(source, builder) {
-  return builder.image(source);
+  return builder.image(source).auto('format');
 };
 
 var onChangeSlide = function onChangeSlide(selectedIndex, router) {
@@ -3458,7 +3514,7 @@ var Media = function Media(_ref) {
   var builder = imageUrlBuilder(client);
 
   var urlFor = function urlFor(source) {
-    return builder.image(source);
+    return builder.image(source).auto('format');
   };
 
   var renderFigure = function renderFigure(uploadDoc, poster, blank, caption) {
@@ -10782,7 +10838,7 @@ var Leads = function Leads(_ref) {
 
 var urlFor$2 = function urlFor(source, client) {
   var builder = imageUrlBuilder(client);
-  return builder.image(source);
+  return builder.image(source).auto('format');
 };
 
 var Slideshow$1 = function Slideshow(_ref) {
@@ -11384,7 +11440,7 @@ var SetCookie = function SetCookie(key, value) {
 
 var urlFor$3 = function urlFor(source, client) {
   var builder = imageUrlBuilder(client);
-  return builder.image(source);
+  return builder.image(source).auto('format');
 };
 
 var renderCardImage = function renderCardImage(thumbnail, client, imageHeight, imageWidth) {
@@ -11408,16 +11464,16 @@ var Hero = function Hero(_ref) {
     'a',
     { href: '/view/' + url.current },
     React__default.createElement(
-      Card$1,
+      Card,
       { bsPrefix: 'hero-card' },
       title && React__default.createElement(
-        Card$1.Header,
+        Card.Header,
         { className: 'h4' },
         title
       ),
-      thumbnail && client && React__default.createElement(Card$1.Img, { src: renderCardImage(thumbnail, client, imageHeight, imageWidth) }),
+      thumbnail && client && React__default.createElement(Card.Img, { src: renderCardImage(thumbnail, client, imageHeight, imageWidth) }),
       summary && React__default.createElement(
-        Card$1.Footer,
+        Card.Footer,
         { className: 'h6' },
         clean_html_1(summary)
       )
@@ -11682,7 +11738,7 @@ var fbsHero = function fbsHero(props) {
 
   var builder = imageUrlBuilder(client);
   function urlFor(source) {
-    return builder.image(source);
+    return builder.image(source).auto('format');
   }
 
   var topArticleThumbnail = '';
@@ -11791,7 +11847,7 @@ var HorizontalHero = function HorizontalHero(props) {
 
   var builder = imageUrlBuilder(client);
   function urlFor(source) {
-    return builder.image(source);
+    return builder.image(source).auto('format');
   }
   var topArticle = props.dataRecord[0];
   var subArticles = props.dataRecord.slice(1, props.dataRecord.length);
@@ -11876,7 +11932,7 @@ var HorizontalHero = function HorizontalHero(props) {
     React__default.createElement(
       'style',
       { jsx: 'true' },
-      '\n        .horizontal-hero-container {\n          margin-bottom: 3rem;\n          margin-top: 2rem;\n          position: relative;\n        }\n        .horizontal-hero-title {\n          position: absolute;\n          top: -25px;\n          background: white;\n          z-index: 2;\n          padding-right: 1.5rem;\n          font-weight: bold;\n        }\n        .horizontal-hero-inner {\n          display: flex;\n          flex-direction: row;\n          padding-top: 0.75rem;\n          margin-top: 0.75rem;\n        }\n\n        .horizontal-articles-wrap {\n          padding: 0 1rem;\n        }\n\n        .horizontal-hero-img {\n          width: 33%;\n          min-width: 200px;\n        }\n        .horizontal-hero-img img {\n          width: 100%;\n          height: 100%;\n          object-fit: cover;\n        }\n        .horizontal-article {\n          border-bottom: 1px solid #ccc;\n          display: block;\n          margin-bottom: 0.5rem;\n        }\n        .horizontal-article:hover {\n            background: #eee;\n        }\n        .horizontal-article p {\n          margin-bottom: 0.5rem;\n          font-weight: bold;\n          color: #252525;\n        }\n        .horizontal-view-more {\n          position: absolute;\n          right: 0;\n          margin-top: 0.25rem;\n          font-weight: bold;\n        }\n        .horizontal-view-more span {\n          display: inline-block;\n          color: rgb(81, 116, 153);\n          font-size: 1.2rem;\n        }\n        @media screen and (max-width: 768px) {\n            .horizontal-hero-img {\n                display: none;\n            }\n        }\n      '
+      '\n        .horizontal-hero-container {\n          margin-bottom: 3rem;\n          margin-top: 2rem;\n          position: relative;\n        }\n        .horizontal-hero-title {\n          position: absolute;\n          top: -25px;\n          background: white;\n          z-index: 2;\n          padding-right: 1.5rem;\n          font-weight: bold;\n        }\n        .horizontal-hero-inner {\n          display: flex;\n          flex-direction: row;\n          padding-top: 0.75rem;\n          margin-top: 0.75rem;\n        }\n\n        .horizontal-articles-wrap {\n          padding: 0 1rem;\n        }\n\n        .horizontal-hero-img {\n          width: 33%;\n          min-width: 200px;\n        }\n        .horizontal-hero-img img {\n          width: 100%;\n          height: 100%;\n          object-fit: cover;\n        }\n        .horizontal-article {\n          border-bottom: 1px solid #ccc;\n          display: block;\n          margin-bottom: 0.5rem;\n        }\n        .horizontal-article:hover {\n          background: #eee;\n        }\n        .horizontal-article p {\n          margin-bottom: 0.5rem;\n          font-weight: bold;\n          color: #252525;\n        }\n        .horizontal-view-more {\n          position: absolute;\n          right: 0;\n          margin-top: 0.25rem;\n          font-weight: bold;\n        }\n        .horizontal-view-more span {\n          display: inline-block;\n          color: rgb(81, 116, 153);\n          font-size: 1.2rem;\n        }\n        @media screen and (max-width: 768px) {\n          .horizontal-hero-img {\n            display: none;\n          }\n        }\n      '
     )
   );
 };
@@ -11886,7 +11942,7 @@ var OncliveHero = function OncliveHero(props) {
 
   var builder = imageUrlBuilder(client);
   function urlFor(source) {
-    return builder.image(source);
+    return builder.image(source).auto('format');
   }
   return React__default.createElement(
     'div',
@@ -11939,7 +11995,7 @@ var OncliveHero = function OncliveHero(props) {
     React__default.createElement(
       'style',
       { jsx: 'true' },
-      '\n        .article-group--container {\n          display: flex;\n          flex-direction: row;\n          flex-wrap: wrap;\n        }\n        .article-group--container * {\n          transition: all 0.13s ease;\n        }\n        .article-group {\n          display: flex;\n          flex-direction: row;\n          flex: 1 1 auto;\n          margin: 0.5rem 1rem;\n          width: calc(50% - 2rem);\n          background: #fff;\n          min-width: 320px;\n          transition: all 0.1s ease-out;\n          border-top: 1px solid #eee;\n          position: relative;\n          overflow: hidden;\n        }\n      \n        .article-group:nth-of-type(1) {\n          width: 100%;\n        }\n        .article-group:nth-of-type(1) .article-group--body {\n        }\n        .article-group:nth-of-type(1) figure img {\n          width: 225px;\n        }\n        .article-group:nth-of-type(1) .article-group--body h2 {\n          font-size: 1.4rem;\n        }\n        .article-group:nth-of-type(1) .article-group--summary {\n          display: block;\n        }\n        @media screen and (max-width: 1091px) {\n          .article-group:nth-of-type(1) {\n            width: 100%;\n          }\n          .article-group:nth-of-type(1) .article-group--summary {\n            display: none;\n          }\n          .article-group:nth-of-type(1) figure img {\n            width: 130px;\n          }\n          .article-group:nth-of-type(1) .article-group--body h2 {\n            font-size: 1rem;\n          }\n        }\n        .article-group figure {\n          margin-bottom: 0;\n        }\n        .article-group figure img {\n          height: 100%;\n          width: 130px;\n          object-fit: contain;\n        }\n \n        .article-group--body {\n          padding-left: 1rem;\n        }\n        .article-group--body p {\n          font-size: .9rem;\n        }\n        .article-group--body h2 {\n          font-weight: bold;\n          margin-top: 1rem;\n          font-size: 1rem;\n          padding-right: 0.5rem;\n        }\n        .article-group--summary {\n          font-size: 1rem;\n          display: none;\n        }\n      '
+      '\n        .article-group--container {\n          display: flex;\n          flex-direction: row;\n          flex-wrap: wrap;\n        }\n        .article-group--container * {\n          transition: all 0.13s ease;\n        }\n        .article-group {\n          display: flex;\n          flex-direction: row;\n          flex: 1 1 auto;\n          margin: 0.5rem 1rem;\n          width: calc(50% - 2rem);\n          background: #fff;\n          min-width: 320px;\n          transition: all 0.1s ease-out;\n          border-top: 1px solid #eee;\n          position: relative;\n          overflow: hidden;\n        }\n\n        .article-group:nth-of-type(1) {\n          width: 100%;\n        }\n        .article-group:nth-of-type(1) .article-group--body {\n        }\n        .article-group:nth-of-type(1) figure img {\n          width: 225px;\n        }\n        .article-group:nth-of-type(1) .article-group--body h2 {\n          font-size: 1.4rem;\n        }\n        .article-group:nth-of-type(1) .article-group--summary {\n          display: block;\n        }\n        @media screen and (max-width: 1091px) {\n          .article-group:nth-of-type(1) {\n            width: 100%;\n          }\n          .article-group:nth-of-type(1) .article-group--summary {\n            display: none;\n          }\n          .article-group:nth-of-type(1) figure img {\n            width: 130px;\n          }\n          .article-group:nth-of-type(1) .article-group--body h2 {\n            font-size: 1rem;\n          }\n        }\n        .article-group figure {\n          margin-bottom: 0;\n        }\n        .article-group figure img {\n          height: 100%;\n          width: 130px;\n          object-fit: contain;\n        }\n\n        .article-group--body {\n          padding-left: 1rem;\n        }\n        .article-group--body p {\n          font-size: 0.9rem;\n        }\n        .article-group--body h2 {\n          font-weight: bold;\n          margin-top: 1rem;\n          font-size: 1rem;\n          padding-right: 0.5rem;\n        }\n        .article-group--summary {\n          font-size: 1rem;\n          display: none;\n        }\n      '
     )
   );
 };
@@ -11952,7 +12008,7 @@ var OncliveLargeHero = function OncliveLargeHero(props) {
 
   var builder = imageUrlBuilder(client);
   function urlFor(source) {
-    return builder.image(source);
+    return builder.image(source).auto('format');
   }
 
   var topArticleThumbnail = '';
@@ -12148,7 +12204,7 @@ var VerticalHero = function VerticalHero(props) {
 
   var builder = imageUrlBuilder(client);
   function urlFor(source) {
-    return builder.image(source);
+    return builder.image(source).auto('format');
   }
   var _props$heroTitle = props.heroTitle,
       heroTitle = _props$heroTitle === undefined ? '' : _props$heroTitle;
@@ -12213,7 +12269,7 @@ var YahooHero = function YahooHero(props) {
 
   var builder = imageUrlBuilder(client);
   function urlFor(source) {
-    return builder.image(source);
+    return builder.image(source).auto('format');
   }
 
   var topArticleThumbnail = '';
@@ -12304,7 +12360,7 @@ var YahooHero = function YahooHero(props) {
     React__default.createElement(
       'style',
       { jsx: 'true' },
-      '\n        .yh-top-article {\n          display: flex;\n          flex-direction: row;\n          position: relative;\n          font-family: \'Roboto\', sans-serif;\n          margin-bottom: 1rem;\n          border-radius: 15px;\n          overflow: hidden;\n          min-height: 315px;\n        }\n        .yh-top-article--img {\n          width: 100%;\n          min-height: 240px;\n          overflow: hidden;\n        }\n        .yh-top-article--img img {\n          width: 100%;\n          height: auto;\n          min-height: 100%;\n          max-height: 315px;\n          object-fit: cover;\n        }\n        .yh-top-article--body {\n          height: 100%;\n          width: 40%;\n          min-width: 320px;\n          right: 0;\n          position: absolute;\n          color: white;\n          padding: 1.75rem;\n          height: 315px;\n          display: flex;\n          align-items: flex-start;\n          justify-content: center;\n          flex-direction: column;\n        }\n        .yh-top-article--body h1 {\n          color: white!important;\n          font-size: 1.4rem;\n          font-weight: 500;\n          margin-bottom: 0.5rem;\n        }\n        .yh-top-article--body p {\n          font-size: 0.9rem;\n          margin-bottom: 0.5rem;\n        }\n        .yh-top-article--blur {\n          height: 100%;\n          width: 40%;\n          right: 0;\n          position: absolute;\n          filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));\n          background: rgba(0,0,0,.65);\n          min-width: 320px;\n        }\n        .yh-sub-article-container {\n          display: flex;\n          justify-content: space-between;\n        }\n        .yh-sub-article {\n          width: 23.25%;\n        }\n        .yh-sub-article p.yh-sub-article--title {\n          font-weight: bold;\n        }\n        .yh-sub-article img {\n          width: 100%;\n          height: 150px;\n          object-fit: cover;\n          border-radius: 15px;\n        }\n        .yh-sub-article img[src=\'' + props.thumbnail + '\']{\n          object-fit: contain;\n        }\n        .yh-sub-article--title {\n          font-weight: bold;\n          margin-top: .25rem;\n          font-size: 1rem;\n          margin-bottom: .25rem;\n        }\n        .yh-sub-article--info {\n          font-size: .8rem;\n          margin-bottom: 0;\n          \n        }\n        @media screen and (max-width: 968px) {\n          .yh-sub-article-container {\n            flex-wrap: wrap;\n          }\n          .yh-sub-article {\n            width: 48%;\n            margin-bottom: 1rem;\n          }\n        }\n      '
+      '\n        .yh-top-article {\n          display: flex;\n          flex-direction: row;\n          position: relative;\n          font-family: \'Roboto\', sans-serif;\n          margin-bottom: 1rem;\n          border-radius: 15px;\n          overflow: hidden;\n          min-height: 315px;\n        }\n        .yh-top-article--img {\n          width: 100%;\n          min-height: 240px;\n          overflow: hidden;\n        }\n        .yh-top-article--img img {\n          width: 100%;\n          height: auto;\n          min-height: 100%;\n          max-height: 315px;\n          object-fit: cover;\n        }\n        .yh-top-article--body {\n          height: 100%;\n          width: 40%;\n          min-width: 320px;\n          right: 0;\n          position: absolute;\n          color: white;\n          padding: 1.75rem;\n          height: 315px;\n          display: flex;\n          align-items: flex-start;\n          justify-content: center;\n          flex-direction: column;\n        }\n        .yh-top-article--body h1 {\n          color: white!important;\n          font-size: 1.4rem;\n          font-weight: 500;\n          margin-bottom: 0.5rem;\n        }\n        .yh-top-article--body p {\n          font-size: 0.9rem;\n          margin-bottom: 0.5rem;\n        }\n        .yh-top-article--blur {\n          height: 100%;\n          width: 40%;\n          right: 0;\n          position: absolute;\n          filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));\n          background: rgba(0,0,0,.65);\n          min-width: 320px;\n        }\n        .yh-sub-article-container {\n          display: flex;\n          justify-content: space-between;\n        }\n        .yh-sub-article {\n          width: 23.25%;\n        }\n        .yh-sub-article p.yh-sub-article--title {\n          font-weight: bold;\n        }\n        .yh-sub-article img {\n          width: 100%;\n          height: 150px;\n          object-fit: cover;\n          border-radius: 15px;\n        }\n        .yh-sub-article img[src=\'' + props.thumbnail + '\']{\n          object-fit: contain;\n        }\n        .yh-sub-article--title {\n          font-weight: bold;\n          margin-top: .25rem;\n          font-size: 1rem;\n          margin-bottom: .25rem;\n        }\n        .yh-sub-article--info {\n          font-size: .8rem;\n          margin-bottom: 0;\n\n        }\n        @media screen and (max-width: 968px) {\n          .yh-sub-article-container {\n            flex-wrap: wrap;\n          }\n          .yh-sub-article {\n            width: 48%;\n            margin-bottom: 1rem;\n          }\n        }\n      '
     )
   );
 };
@@ -12430,7 +12486,7 @@ var ConferenceArticleCard = function ConferenceArticleCard(props) {
   var builder = imageUrlBuilder(client);
 
   function urlFor(source) {
-    return builder.image(source);
+    return builder.image(source).auto('format');
   }
 
   //title, thumbnail, summary, published, documentGroup.identifier.current, documentGroup.identifier.name
@@ -12595,6 +12651,7 @@ var Article = function Article(props) {
     current: ''
   } : _props$article$url;
   var url = _props$article$url.current,
+      issue = _props$article.issue,
       changeUrl = props.changeUrl,
       isCutomPage = props.isCutomPage,
       shareOptions = props.shareOptions,
@@ -12688,7 +12745,14 @@ var Article = function Article(props) {
               serializers: getSerializers(client, pageview, videoAccountIDs, function () {}, true),
               blocks: articleBody,
               imageOptions: { w: 320, h: 240, fit: 'max' }
-            }, client.config()))
+            }, client.config())),
+            issue && issue.url && React__default.createElement(
+              'a',
+              { href: issue.url, target: '_blank', title: 'Download issue' },
+              React__default.createElement('img', { style: { margin: '1rem', maxHeight: '40px', maxWidth: '40px' }, src: '/download.png', alt: 'download issue' }),
+              'Download Issue : ',
+              issue.name
+            )
           )
         ),
         renderIsiContent(props.article)
@@ -13033,4 +13097,4 @@ var _initialiseProps = function _initialiseProps() {
   };
 };
 
-export { AD300x250, AD300x250x600, ADFooter, AccordionPanel, AdSlotsProvider, AlphabeticList, ArticleDetailDropdown, ArticleQueue, Breadcrumbs$1 as Breadcrumbs, ConferenceArticleCard, EventsDeck$1 as EventsDeck, Feature, fbsHero as ForbesHero, Hero, HorizontalHero, OncliveHero, OncliveLargeHero, PdfDownload, RelatedContent, RelatedTopicsDropdown, SetCookie, SocialShare$1 as SocialShare, VerticalHero, YahooHero, getSerializers };
+export { AD300x250, AD300x250x600, ADFooter, AccordionPanel, AdSlotsProvider, AlphabeticList, ArticleDetailDropdown, ArticleQueue, Breadcrumbs$1 as Breadcrumbs, ConferenceArticleCard, EventsDeck, Feature, fbsHero as ForbesHero, Hero, HorizontalHero, OncliveHero, OncliveLargeHero, PdfDownload, RelatedContent, RelatedTopicsDropdown, SetCookie, SocialShare$1 as SocialShare, VerticalHero, YahooHero, getSerializers };