import React, { Component } from 'react'; import { routes } from 'env/routes'; import { inject, observer } from 'mobx-react'; import { withTranslation } from 'react-i18next'; import DefaultLayout from 'ui/layouts/DefaultLayout'; import LoadingLayout from 'ui/layouts/LoadingLayout'; import { HomeDashboard } from 'ui/_pages/home/HomeDashboard'; import { VirtualDashboard } from 'ui/_pages/home/VirtualDashboard'; import { GuestHomePage } from 'ui/_pages/home/GuestHomePage'; import { VirtualHomePage } from 'ui/_pages/home/VirtualHomePage'; import { checkTerms } from 'env/checkTerms'; import { HomeProductsSection } from 'ui/_pages/home/components/HomeProductsSection'; import { HomePlansSection } from 'ui/_pages/home/components/HomePlansSection'; import Link from 'next/link'; @checkTerms @withTranslation() @inject('appStore', 'authStore', 'bookingsStore') @observer class HomePage extends Component { constructor(props) { super(props); this.state = { isLoading: false, selectedTab: 'All', makercoachList: [], makercoachResourceTypes: [], filterMakerCoach: [], }; this.handleTabChange.bind(this); } componentDidMount() { this.setState({isLoading: true}); const { appStore } = this.props; appStore.loadHomePage().catch(() => null); setTimeout(() => { this.createScripts(); }, 100); this.setState({isLoading: false}); } componentWillUnmount() { document.getElementById('script_lightbox')?.remove(); document.getElementById('script_lightslider')?.remove(); document.getElementById('script_customHomepage')?.remove(); document.getElementById('script_carousel')?.remove(); document.getElementById('simple_carousel')?.remove(); } componentDidUpdate(prevProps, prevState) { const { makercoachList } = prevState; if (makercoachList.length === 0) { this.getMakerCoachResources(); } } getMakerCoachResources() { const { bookingsStore } = this.props; const { resourceGroups } = bookingsStore; const { makercoachResourceTypes } = this.state; const makerCoachGroup = resourceGroups?.find((g) => g.groupName == 'MakerCoach'); if (makerCoachGroup && makerCoachGroup.resources) { const resources = makerCoachGroup.resources; let data = []; for (let i = 0; i < resources.length; i++) { const resource = resources[i]; if (!data.find((t) => t == resource.ResourceTypeName)) { data.push(resource.ResourceTypeName); } } this.setState({ makercoachList: makerCoachGroup.resources, filterMakerCoach: makerCoachGroup.resources, makercoachResourceTypes: data }); } } createScripts() { const script_lightslider = document.createElement("script"); script_lightslider.async = true; script_lightslider.id = "script_lightslider"; script_lightslider.src = "https://makersgym.spaces.nexudus.com/files/lightslider.js"; document.body.appendChild(script_lightslider); const script_customHomepage = document.createElement("script"); script_customHomepage.async = true; script_customHomepage.id = "script_customHomepage"; script_customHomepage.src = "https://makersgym.spaces.nexudus.com/files/customHomepage.js?v=2.1"; document.body.appendChild(script_customHomepage); const simple_carousel = document.createElement("script"); simple_carousel.async = true; simple_carousel.id = "simple_carousel"; simple_carousel.src = "https://makersgym.spaces.nexudus.com//files/simpleCarousel.js"; document.body.appendChild(simple_carousel); const script_lightbox = document.createElement("script"); script_lightbox.async = true; script_lightbox.id = "script_lightbox"; script_lightbox.src = "https://makersgym.spaces.nexudus.com//files/html5lightbox.js"; document.body.appendChild(script_lightbox); const script_carousel = document.createElement("script"); script_carousel.async = true; script_carousel.id = "script_carousel"; script_carousel.src = "https://makersgym.spaces.nexudus.com//files/carousel.js"; document.body.appendChild(script_carousel); } handleTabChange(tab) { const { makercoachList } = this.state; this.setState({selectedTab: tab}); if (tab == 'All') { this.setState({ filterMakerCoach: makercoachList }); } else { this.setState({ filterMakerCoach: makercoachList.filter((m) => m.ResourceTypeName == tab) }); } } render() { const { isLoading, selectedTab, makercoachList, filterMakerCoach, makercoachResourceTypes } = this.state; const { t, appStore, authStore, componentName, bookingsStore } = this.props; const { virtualDashboard, business, configuration } = appStore; const { isLoggedIn } = authStore; const { resourceGroups } = bookingsStore; let resourceList = [ {groupName: 'Visual Studios', imageUrl: `${business.NativeHomeUrl}//files/Visual Studios.png`, length: '', link: `${business.HomeUrl}/bookings/search?group=Visual%20Studios`}, {groupName: 'Sound Studios', imageUrl: `${business.NativeHomeUrl}//files/Sound Studios.png`, length: '', link: `${business.HomeUrl}/bookings/search?group=Sound%20Studios`}, {groupName: 'Conference Rooms', imageUrl: `${business.NativeHomeUrl}//files/Conference Rooms.png`, length: '', link: `${business.HomeUrl}/bookings/search?group=Conference%20Rooms`}, {groupName: 'Meeting Rooms', imageUrl: `${business.NativeHomeUrl}//files/Meeting Rooms.png`, length: '', link: `${business.HomeUrl}/bookings/search?group=Meeting%20Rooms`}, {groupName: 'Hot Desks', imageUrl: `${business.NativeHomeUrl}//files/Hot Desks.png`, length: '', link: `${business.HomeUrl}/bookings/search?group=Hot%20Desks`} ]; const convert = (n) => { const single_digit = ['', 'One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight', 'Nine']; const double_digit = ['Ten', 'Eleven', 'Twelve', 'Thirteen', 'Fourteen', 'Fifteen', 'Sixteen', 'Seventeen', 'Eighteen', 'Nineteen']; const below_hundred = ['Twenty', 'Thirty', 'Forty', 'Fifty', 'Sixty', 'Seventy', 'Eighty', 'Ninety']; if (n === 0) return 'Zero'; const translate = (n) => { var word = ""; if (n < 10) { word = single_digit[n] + ' ' } else if (n < 20) { word = double_digit[n - 10] + ' ' } else if (n < 100) { const rem = translate(n % 10) word = below_hundred[(n - n % 10) / 10 - 2] + ' ' + rem } else if (n < 1000) { word = single_digit[Math.trunc(n / 100)] + ' Hundred ' + translate(n % 100) } else if (n < 1000000) { word = translate(parseInt(n / 1000)).trim() + ' Thousand ' + translate(n % 1000) } else if (n < 1000000000) { word = translate(parseInt(n / 1000000)).trim() + ' Million ' + translate(n % 1000000) } else { word = translate(parseInt(n / 1000000000)).trim() + ' Billion ' + translate(n % 1000000000) } return word; } const result = translate(n); return result.trim(); } for (let i = 0; i < resourceList.length; i++) { const resource = resourceList[i]; const resourceGroup = resourceGroups.find((r) => r.groupName === resource.groupName); if (resourceGroup && resourceGroup.resources) { resource.length = convert(resourceGroup.resources.length); } else { resource.length = convert(0); } } const isVirtualDashboard = configuration['PublicWebSite.Home.UseCommunityDashboard'] == 'true' || virtualDashboard; //This just checks we have actually received data from the home page. if (!appStore?.homePage?.Gallery) return ; return (