import React, { Component } from 'react'; import { inject, observer } from 'mobx-react'; import PropTypes from 'prop-types'; import moment from 'moment'; import { withTranslation } from 'react-i18next'; import { routes } from 'env/routes'; import Link from 'next/link'; import { removeHtml, shorten } from 'env/utils/strings'; import { LocalizedPrice } from 'env/utils/NumbersLocalization'; import withCustomComponent from 'ui/components/withCustomComponent'; import AddToCalendar from 'react-add-to-calendar'; import ReactMarkdown from 'react-markdown'; @withCustomComponent('CardEvent') @withTranslation() @inject('appStore', 'eventsStore') @observer class CardEvent extends Component { static propTypes = { event: PropTypes.object.isRequired, myEvents: PropTypes.object, sizeExtraSmall: PropTypes.bool, sizeSmall: PropTypes.bool, sizeMedium: PropTypes.bool, sizeLarge: PropTypes.bool, }; constructor(props) { super(props); } render() { const { t, componentName, appStore, eventsStore, event, sizeExtraSmall, sizeSmall, sizeMedium, sizeLarge, myEvents, } = this.props; const ticketBought = myEvents != undefined ? myEvents.UpcomingEvents.find((ev) => ev.Id == event.Id) != null : false; const addToCalendarData = { title: event.Name, description: event.ShortDescription, location: event.Location || (event.Business && event.Business.Name), startTime: moment(event.StartDate).locale('en').format(), endTime: moment(event.EndDate).locale('en').format(), }; const isCorporateDashboard = appStore.corporateDashboard; return (

{!sizeLarge ? ( ) : (

)}

{!sizeLarge ? ( {event.Name} ) : (

{event.Name}

)}

{event.Location && removeHtml(event.Location)} {!event.Location && event.Business.Name}
{category.Title}

{sizeLarge && event.LongDescription && (

{removeHtml(event.LongDescription)}

)} {sizeMedium && event.ShortDescription && (

)}

{t('Date')} {moment(event.StartDate).format('lll')} {sizeLarge && ( <> {t('End Time')} {moment(event.EndDate).format('lll')} )}

{sizeLarge && ( <>

{event.Location && removeHtml(event.Location)} {!event.Location && event.Business.Name}

{event.VenueAddress && (

{event.VenueAddress} {' ('} {t('Map')} {')'}

)}

{event?.AttendeeCount > 0 && ( <> {event.AttendeeCount} )}

{event.HasTickets && ( <> {ticketBought ? ( {isCorporateDashboard && t('Ticket reserved')} {!isCorporateDashboard && t('Ticket bought')} ) : ( <> {!isCorporateDashboard && ( <> {event.ChepeastPrice == 0 && event.MostExpensivePrice == 0 && ( {t('Free')} )} {event.ChepeastPrice > 0 && event.ChepeastPrice === event.MostExpensivePrice && ( {LocalizedPrice({ currency: event.ChepeastProduct.PriceCurrencyCode, amount: event.ChepeastProduct.Price, })} )} {event.ChepeastPrice != event.MostExpensivePrice && (

{event.ChepeastPrice == 0 ? ( {t('Free')} ) : ( <> {LocalizedPrice({ currency: event.ChepeastProduct.PriceCurrencyCode, amount: event.ChepeastProduct.Price, })} )}{' '} ~{' '} {LocalizedPrice({ currency: event.MostExpensiveProduct.PriceCurrencyCode, amount: event.MostExpensiveProduct.Price, })}

)} )} )} )}

); } } export default CardEvent;

Get in touch with us

Contact details