import React from 'react'; import Link from 'next/link'; import { routes } from 'env/routes'; import { useTranslation } from 'react-i18next'; import { withRouter } from 'next/router'; import { inject, observer } from 'mobx-react'; import withCustomComponent from 'ui/components/withCustomComponent'; export const HomeTopClaimFeaturesSection = withCustomComponent( 'HomeTopClaimFeaturesSection' )( inject( 'appStore', 'authStore' )( withRouter( observer(({ router, appStore, authStore, componentName }) => { const { t } = useTranslation(); const { configuration, corporateDashboard } = appStore; const { customer } = authStore; const svgEventsIcon = (primaryColor) => ( ); const svgDirectoryIcon = (primaryColor) => ( ); const svgBookingsIcon = (primaryColor) => ( ); const svgMyAccountIcon = (primaryColor) => ( ); return ( (configuration['HomePage.ShowClaimBar'] || configuration['HomePage.ShowIconBar']) && (

{!corporateDashboard && configuration['HomePage.ShowClaimBar'] && (

{configuration['HomePage.ClaimText'] && (

{t(configuration['HomePage.ClaimText'])}

)} {configuration['HomePage.ClaimSmallTextLogout'] && ( {t(configuration['HomePage.ClaimSmallTextLogout'])} )}

)} {configuration['HomePage.ShowIconBar'] && (

{svgEventsIcon('var(--bg-color)')}

{t('Events')}
{svgDirectoryIcon('var(--bg-color)')}

{corporateDashboard ? t('Directory') : t('Members')}
{svgBookingsIcon('var(--bg-color)')}

{t('Bookings')}
{svgMyAccountIcon('var(--bg-color)')}

{corporateDashboard ? t('Discussion boards') : t('Take a Tour')}

)}

) ); }) ) ) );

{t(configuration['HomePage.ClaimText'])}

{t('Events')}

{corporateDashboard ? t('Directory') : t('Members')}

{t('Bookings')}

{corporateDashboard ? t('Discussion boards') : t('Take a Tour')}