import React from 'react'; import Link from 'next/link'; import { routes } from 'env/routes'; import { getUrlDomain } from 'env/utils/strings'; import { useTranslation } from 'react-i18next'; import { withRouter } from 'next/router'; import { inject, observer } from 'mobx-react'; import withCustomComponent from 'ui/components/withCustomComponent'; import ResponsiveTable from 'ui/components/tables/ResponsiveTable'; export const CalendarSynSection = withCustomComponent('CalendarSynSection')( inject( 'appStore', 'bookingsStore' )( withRouter( observer(({ router, appStore, bookingsStore, componentName }) => { const { t } = useTranslation(); const { business } = appStore; const allBookingsIcalFeed = `webcal://${getUrlDomain( business.NativeHomeUrlWithLanguage )}/en/feeds/bookings`; const allBookingsMacInstruction = (url) => `

${t('Apple Calendar')}

${t('Copy the link below.')}
${t('In Apple Calendar, go to File > New Calendar Subscription')}
${t( 'Paste the link above into the Calendar URL field and select Subscribe.' )}

`; const allBookingsOutlookInstruction = (url) => `

${t('Outlook')}

${t('Copy the link below.')}
${t( 'In Outlook, right click on the My Calendars dropdown in the calendar view. Select Add Calendar > From Internet.' )}
${t( 'Paste the link above into the Calendar URL field and select OK.' )}

`; return (

{t('Calendar Sync')}

{t( 'Calendar Sync lets you see bookings for the different rooms in your calendar of choice. If you would also like to place new bookings directly in Outlook or Google Calendar, you can use the integration options below.' )}

{t('Google Calendar')}

{t( 'Connecting to your Google account will enable you to make and manage bookings from your own Google Calendar.' )}

{t('Connect to Google Calendar')}

{t('Apple Calendar')}

{t( 'Manage bookings directly from your Apple Calendar.' )}

{ ev.preventDefault(); appStore.setPopMessage( allBookingsMacInstruction(allBookingsIcalFeed) ); }} href="#" > {t('Connect to Apple Calendar')} {/*

{t('Microsoft Outlook')}

{t( 'Manage bookings directly from your Outlook Calendar.' )}

{ ev.preventDefault(); appStore.setPopMessage( allBookingsOutlookInstruction(allBookingsIcalFeed) ); }} href="#" > {t('Connect to Outlook 365')} */} {t('Resource')} {bookingsStore.resources .sort((a, b) => a.Name.localeCompare(b.Name)) .map((resource, i) => { const feedUrl = `webcal://${getUrlDomain( business.NativeHomeUrlWithLanguage )}/en/feeds/resourceBookings?guid=${resource.UniqueId}`; return ( {resource.Name}

{t('Google')} { ev.preventDefault(); appStore.setPopMessage( allBookingsMacInstruction(feedUrl), 'modal-xl' ); }} href="#" > {t('Apple')} { ev.preventDefault(); appStore.setPopMessage( allBookingsOutlookInstruction(feedUrl), 'modal-xl' ); }} href="#" > {t('Outlook')}

); })}

); }) ) ) );

Available resources