\n
\n )\n}\n\nexport default Loading\n","import React, { useContext, useEffect, useState } from 'react'\nimport { Route, Switch, Redirect } from \"react-router-dom\"\n\nimport { MenuContext } from './MenuContext'\nimport LocalNav from './LocalNav'\nimport Items from './Items'\nimport Loading from '../common/Loading'\n\nconst OrderPage = () => {\n const [isLoading, setIsLoading] = useState(true)\n const [sections, setSections] = useState([])\n const { menu, getItemsForSection } = useContext(MenuContext)\n\n useEffect(() => {\n setIsLoading(true)\n if (menu) {\n let sectionsToAdd = []\n\n if (menu.sections?.length > 0) {\n menu.sections.forEach(s => {\n sectionsToAdd.push({\n title: s.title,\n href: `/order/${s.title.toLowerCase()}`,\n items: getItemsForSection(s.title),\n })\n })\n } else {\n const defaultSections = ['Starters', 'Mains', 'Desserts', 'Drinks']\n defaultSections.forEach(section => {\n const itemsForSection = getItemsForSection(section.toLowerCase())\n if (itemsForSection.length > 0) {\n sectionsToAdd.push({ title: section, href: `/order/${section.toLowerCase()}`, items: itemsForSection })\n }\n })\n }\n\n setSections([{ title: 'All', href: '/order/all' }, ...sectionsToAdd])\n }\n setIsLoading(false)\n }, [menu, getItemsForSection])\n\n if (isLoading) {\n return \n
\n \n \n Menu\n \n \n
\n )\n}\n\nexport default OrderPage\n","import React from 'react'\n\nimport Loading from '../common/Loading'\n\nconst OrderingView = () => {\n return (\n \n
\n \n
\n \n
\n \n
\n )\n}\n\nexport default OrderingView\n","import React from 'react'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { faCheck } from '@fortawesome/free-solid-svg-icons'\nimport { Link } from 'react-router-dom'\n\nconst OrderPlacedView = () => {\n return (\n \n
\n )\n}\n\nexport default OrderPlacedView\n","import React, { useState, useContext } from 'react'\nimport Modal from 'react-modal'\n\nimport priceToString from '../../util/priceToString'\nimport ItemModal from '../common/ItemModal'\nimport { LocationContext } from '../common/LocationContext'\n\nconst BasketView = ({ items, goToCheckout, getTotalPrice }) => {\n const { location } = useContext(LocationContext)\n\n const OrderLine = ({ item }) => {\n const [isEditModalOpen, setIsEditModalOpen] = useState(false)\n\n const displaySize = item.product.sizes.length > 1 ? `(${item.size.name})` : \"\";\n return (\n <>\n setIsEditModalOpen(true)}>\n
\n\n \n {item.quantity}\n {item.product.name} {displaySize}\n
\n {priceToString(item.totalPrice)}\n \n {key}\n\n
\n )\n })}\n \n )\n }\n\n return (\n <>\n \n {items[key].map((item, index) => {\n return
\n \n \n
\n\n \n
\n \n )\n}\n\nexport default BasketView\n","import { useEffect, useState } from \"react\"\nimport { useStripe } from '@stripe/react-stripe-js'\n\nconst usePayment = () => {\n const [isLoading, setIsLoading] = useState(false)\n const [error, setError] = useState()\n\n const stripe = useStripe()\n\n useEffect(() => {\n if (error) setIsLoading(false)\n }, [error])\n\n const makePayment = async (intentId, card, customer) => {\n setIsLoading(true)\n setError(null)\n\n if (!intentId || !card || !customer) {\n console.error('Missing argument when calling makePayment')\n setError({ message: 'There was an error with creating your order. Please try again.' })\n return\n }\n\n // Create the payment method\n const { error: paymentMethodError, paymentMethod } = await stripe.createPaymentMethod({\n type: 'card',\n card: card,\n billing_details: {\n name: customer.name,\n email: customer.email,\n phone: customer.phone,\n }\n })\n\n if (paymentMethodError) {\n setError(paymentMethodError)\n return\n }\n\n // Process payment\n const stripeRes = await stripe.confirmCardPayment(intentId, {\n payment_method: paymentMethod.id,\n })\n\n if (stripeRes.error) {\n setError(stripeRes.error)\n return\n }\n\n if (stripeRes?.paymentIntent?.status?.toLowerCase() === 'succeeded') {\n return stripeRes\n } else {\n setError({ message: 'There was an error with creating your order. Please try again.' })\n }\n\n return stripeRes\n }\n\n return {\n isLoading,\n error,\n makePayment,\n }\n}\n\nexport default usePayment\n","import React, { useRef, useState, useContext } from 'react'\nimport { Elements } from '@stripe/react-stripe-js'\nimport { loadStripe } from '@stripe/stripe-js'\nimport { CardNumberElement, CardExpiryElement, CardCvcElement, useStripe, useElements } from '@stripe/react-stripe-js'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { faLock } from '@fortawesome/free-solid-svg-icons'\n\nimport priceToString from '../../util/priceToString'\n// import animatedCoffeeMachineGif from '../../assets/images/icons/animated_coffee_machine.gif'\nimport { LocationContext } from \"../common/LocationContext\";\nimport usePayment from '../../hooks/usePayment/usePayment'\n\nconst pageViews = { FORM: 'form', PROCESSING_PAYMENT: 'processing-payment' }\n\nconst CheckoutView = ({ getTotalPrice, placeOrder }) => {\n const { location } = useContext(LocationContext)\n\n if (!location) {\n return null\n }\n\n const Body = () => {\n const stripePublicKey = location.config.stripePublicKey\n const stripePromise = loadStripe(stripePublicKey)\n return (\n \n \n \n {location ? location.name : \" \"}\n \n
\n\n \n Table \n \n 11\n \n
\n\n \n \n Checkout - {priceToString(getTotalPrice())}\n \n
\n \n
\n \n )\n}\n\nconst PaymentForm = ({ getTotalPrice, placeOrder }) => {\n const [pageView,] = useState(pageViews.FORM)\n const [error, setError] = useState(null)\n const stripe = useStripe()\n const elements = useElements()\n\n const nameRef = useRef()\n const emailRef = useRef()\n const termsRef = useRef()\n const tableNumberRef = useRef()\n\n const {\n isLoading: isProcessingPayment,\n error: paymentError,\n makePayment,\n } = usePayment()\n\n async function processPayment(event) {\n event.preventDefault()\n if (!stripe || !elements) return\n\n if (!nameRef.current.value || !emailRef.current.value || !tableNumberRef.current.value) {\n setError('All fields are required')\n return\n }\n\n if (!termsRef.current.checked || termsRef.current.checked === false) {\n setError('Please read and accept the terms and conditions')\n return\n }\n\n const customerDetails = {\n name: nameRef.current.value,\n email: emailRef.current.value,\n tableNumber: tableNumberRef.current.value,\n }\n\n const cardNumber = elements.getElement(CardNumberElement)\n const orderRes = await placeOrder(customerDetails)\n\n if (orderRes.orderId && orderRes.intentId) {\n await makePayment(orderRes.intentId, cardNumber, customerDetails)\n } else {\n setError('There was an error with creating your order. Please try again.')\n }\n }\n\n const Error = () => {\n if (!error && !paymentError) return null\n return (\n Payment
\n\n Error
\n {error || paymentError.message}\n
\n )\n }\n\n if (pageView === pageViews.FORM) {\n return (\n \n )\n }\n\n // if (isProcessingPayment) {\n // return (\n // \n {error || paymentError.message}\n
\n // 
\n // Processing your payment\n //
\n // )\n // }\n\n return null\n}\n\nexport default CheckoutView\n","import React, { useContext, useEffect, useState } from 'react'\n\nimport { BasketContext } from './BasketContext'\nimport { LocationContext } from '../common/LocationContext'\nimport { MenuContext } from '../order/MenuContext'\nimport { OrderClient } from \"@food2room/clients\"\nimport OrderingView from './OrderingView'\nimport OrderPlacedView from './OrderPlacedView'\nimport BasketView from './BasketView'\nimport CheckoutView from './CheckoutView'\nimport { OrderDto, OrderItemDto } from '@food2room/clients'\nimport config from '../../config'\n\nconst BasketPage = () => {\n const BASKET_STATUS = { BROWSING: 'browsing', ORDERING: 'ordering', ORDER_PLACED: 'order-placed', CHECKOUT: 'checkout' }\n const basketContext = useContext(BasketContext)\n const { location } = useContext(LocationContext)\n const { menu } = useContext(MenuContext)\n const [basketStatus, setBasketStatus] = useState(BASKET_STATUS.BROWSING)\n const [items, setItems] = useState({})\n\n useEffect(() => {\n const { basket: { contents: basket } } = basketContext\n let starters = [], mains = [], desserts = [], drinks = []\n const categoryToArrayMap = { 'starters': starters, 'mains': mains, 'desserts': desserts, 'drinks': drinks }\n for (const key in basket) {\n const item = basket[key]\n // TODO - this assumes that the first category is the main one\n categoryToArrayMap[item.product.category.displayCategory].push(item)\n }\n\n setItems({ starters: [...starters], mains: [...mains], desserts: [...desserts], drinks: [...drinks] })\n }, [basketContext])\n\n function getTotalPrice() {\n return Object.values(basketContext.basket.contents)\n .map(item => item.size.price * item.quantity)\n .reduce((a, b) => a + b, 0);\n }\n\n function goToCheckout() {\n setBasketStatus(BASKET_STATUS.CHECKOUT)\n }\n\n async function placeOrder(customer) {\n // setBasketStatus(BASKET_STATUS.ORDERING)\n const itemsEntries = Object.entries(basketContext.basket.contents).map(([key, value]) => {\n const orderItem = new OrderItemDto({ quantity: value.quantity, size: value.size, menuId: menu.id, menuItemId: value.id })\n return [key, orderItem]\n })\n\n const items = Object.fromEntries(itemsEntries)\n\n const customerDetails = {\n name: customer.name || '',\n email: customer.email || '',\n }\n\n const order = new OrderDto({\n locationId: location.locationId,\n customer: customerDetails,\n items: items,\n totalCost: getTotalPrice(),\n destination: `Table ${customer.tableNumber}`,\n menuId: '', // TODO\n })\n\n OrderClient.setBaseUrl(config.baseOrderUrl)\n const orderRes = await OrderClient.submitOrder(order)\n .catch(error => {\n return error\n })\n // .then(() => {\n // basketContext.clearBasket()\n // setBasketStatus(BASKET_STATUS.ORDER_PLACED)\n // })\n\n // TODO - error catching\n\n return orderRes\n }\n\n const Body = () => {\n if (basketStatus === BASKET_STATUS.BROWSING && (!items || basketContext.numberOfItemsInBasketByRef.current === 0)) {\n return (\n \n
\n )\n }\n\n if (basketStatus === BASKET_STATUS.ORDERING) return Your basket is empty
\n\n
\n \n )\n}\n\nexport default BasketPage\n","import React, { useState } from 'react'\nimport VerificationInput from \"react-verification-input\"\nimport QrReader from 'react-qr-reader'\n\nimport './check-in.scss'\nimport Loading from '../common/Loading'\n\nconst CheckInCard = ({ enterCode, isCheckingCode, error, processQrScan, isCheckingCodeFromUrl }) => {\n const [isScanningQrCode, setIsScanningQrCode] = useState(false)\n\n return (\n \n
\n )\n}\n\nconst QRScannerComponent = ({ cancelScan, processQrScan }) => {\n return (\n <>\n \n \n {!isCheckingCodeFromUrl &&\n
\n \n {!isScanningQrCode && }\n {isScanningQrCode &&
\n }\n \n
\n)\n\nexport default Header\n","import React from 'react'\n\nconst Footer = () => (\n \n)\n\nexport default Footer\n","import React, { useEffect, useState, useContext } from 'react'\nimport { LocationClient, OrderDestinationClient } from \"@food2room/clients\"\nimport { useHistory, useLocation } from 'react-router-dom'\n\nimport './check-in.scss'\nimport CheckInCard from './CheckInCard'\nimport Header from './Header'\nimport config from '../../config'\nimport Footer from './Footer'\nimport { LocationContext } from '../common/LocationContext'\n\nconst CheckInPage = () => {\n const [isCheckingCode, setIsCheckingCode] = useState(false)\n const [isCheckingCodeFromUrl, setIsCheckingCodeFromUrl] = useState(false)\n const [error, setError] = useState()\n\n const { setLocationId, setMenuIdLookingAt } = useContext(LocationContext)\n const { search } = useLocation()\n const history = useHistory()\n\n useEffect(() => {\n LocationClient.setBaseUrl(config.baseOrderUrl)\n OrderDestinationClient.setBaseUrl(config.baseOrderUrl)\n }, [])\n\n useEffect(() => {\n setIsCheckingCodeFromUrl(true)\n\n const checkUserInFromUrl = async () => {\n const query = new URLSearchParams(search)\n if (query.has('orderDestination')) {\n const qr = await getQrCodeDetails(query.get('orderDestination'))\n if (qr) checkIn(qr)\n else setIsCheckingCodeFromUrl(false)\n } else {\n setIsCheckingCodeFromUrl(false)\n }\n }\n\n checkUserInFromUrl()\n // eslint-disable-next-line\n }, [search, setLocationId, history, setMenuIdLookingAt])\n\n async function enterCode(code) {\n if (code.length !== 6) return\n setIsCheckingCode(true)\n const qr = await getQrCodeDetails(code)\n if (qr) checkIn(qr)\n else setIsCheckingCode(false)\n }\n\n async function getQrCodeDetails(id) {\n const res = await OrderDestinationClient.get(id).catch(e => {\n setError('invalid qr')\n return\n })\n if (res) return res\n }\n\n async function checkIn(qr) {\n const { locationId: id, resourceType, resourceId } = qr\n\n if (!id) return\n\n if (resourceType?.toLowerCase() === 'menu') {\n setLocationId(id)\n setMenuIdLookingAt(resourceId)\n\n // TODO - there is some duplication here as the menu isn't saved\n const menu = await LocationClient.getMenu(id, resourceId, '')\n\n if (menu.menuType?.toLocaleLowerCase() === 'event') {\n history.push('/event')\n } else {\n history.push('/order')\n }\n } else {\n const activeMenus = await LocationClient.getLiveAndActiveMenus(id)\n if (Object.keys(activeMenus).length > 0) {\n setLocationId(id)\n history.push('/order')\n } else {\n setError('no menus')\n setIsCheckingCode(false)\n }\n }\n }\n\n async function processQrScan(e) {\n if (!e) return\n // TODO - set loading\n const code = e.split('?')[1].replace('orderDestination=', '')\n const qr = await getQrCodeDetails(code)\n if (qr) checkIn(qr)\n }\n\n return (\n \n
\n )\n}\n\nexport default CheckInPage\n","import moment from 'moment'\n\nexport function getEventDates(event) {\n if (!event?.eventDetails?.eventDateTime || event?.eventDetails?.eventDateTime.length === 0) {\n return 'This event has no specified date.'\n }\n\n const minDate = getEventFirstDate(event)\n const maxDate = getEventLastDate(event)\n\n if (minDate.format('DD MMM YYYY') === maxDate.format('DD MMM YYYY')) {\n return `${minDate.format('DD MMM YYYY')}, ${minDate.format('HH:mm')}-${maxDate.format('HH:mm')}`\n } else {\n return `${minDate.format('DD MMM YYYY HH:mm')} - ${maxDate.format('DD MMM YYYY HH:mm')}`\n }\n}\n\nexport function isEventOver(event) {\n if (!event?.eventDetails?.eventDateTime || event?.eventDetails?.eventDateTime.length === 0) {\n return false\n }\n\n const maxDate = getEventLastDate(event)\n const today = moment()\n return moment(today).isAfter(maxDate)\n}\n\nexport function getEventFirstDate(event) {\n const moments = getAllMoments(event)\n return moment.min(moments)\n}\n\nexport function getEventLastDate(event) {\n const moments = getAllMoments(event)\n return moment.max(moments)\n}\n\nfunction getAllMoments(event) {\n const moments = []\n event.eventDetails.eventDateTime.forEach(d => {\n moments.push(moment(d.start))\n moments.push(moment(d.end))\n })\n return moments\n}\n","import { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\"\n\nconst EventDetailsCardLine = ({ icon, label, value }) => {\n return (\n \n
\n \n
\n \n
\n \n
\n )\n}\n\nexport default EventDetailsCardLine\n","import { useContext } from \"react\"\nimport { faEnvelope, faMapMarkerAlt, faPhone, faUser } from \"@fortawesome/free-solid-svg-icons\"\nimport StarterKit from \"@tiptap/starter-kit\";\nimport { Link } from \"@tiptap/extension-link\";\nimport { LinkBubbleMenuHandler } from \"mui-tiptap\";\nimport { RichTextReadOnly } from \"mui-tiptap\";\nimport { LocationContext } from 'components/common/LocationContext'\nimport { getEventDates } from \"util/event.util\"\n\nimport EventDetailsCardLine from './EventDetailsCardLine'\n\nconst CustomLinkExtension = Link.extend({\n inclusive: false,\n});\n\nexport const retExtensions = [\n StarterKit.configure({\n blockquote: false,\n bulletList: false,\n code: false,\n codeBlock: false,\n heading: false,\n horizontalRule: false,\n listItem: false,\n orderedList: false,\n strike: false,\n }),\n CustomLinkExtension.configure({\n autolink: true,\n linkOnPaste: true,\n openOnClick: false,\n }),\n LinkBubbleMenuHandler,\n];\n\nconst EventDetailsCard = ({ orderScrollRef, eventMenu }) => {\n const { location } = useContext(LocationContext)\n\n function scrollToEventTickets() {\n if (!orderScrollRef) return\n else orderScrollRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' })\n }\n\n return (\n <>\n \n
\n\n \n
\n \n
\n {value}\n \n
\n\n \n
\n \n
\n\n \n
\n {eventMenu.name}
\n\n \n \n \n
\n\n \n
\n\n Event organiser
\n\n
\n \n )\n}\n\nexport default EventDetailsCard\n","import ReactTooltip from 'react-tooltip'\n\nconst Tooltip = ({ itemId, text }) => (\n Event details
\n\n
\n \n {size.name}\n {size.description?.length > 0 ?
\n \n {priceToString(size.price)}\n \n {hasFee && + booking fee*}\n {!!minOrderQty && . Minimum order quantity is {minOrderQty}.}\n \n
\n \n \n {quantity}\n \n
\n \n Allergen notice\n This product contains {mapAllergenKeysToText()}.\n
\n )\n}\n\nexport default EventTicketAllergens\n","const EventTicketAvailability = ({ stockLeft }) => {\n if (stockLeft === 0) {\n return Sold out\n }\n\n if (stockLeft && stockLeft <= 50) {\n return Only {stockLeft} remaining\n }\n\n return Available\n}\n\nexport default EventTicketAvailability\n","import { faInfoCircle, faTicketAlt, faUtensils } from \"@fortawesome/free-solid-svg-icons\"\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\"\nimport uniqueId from \"lodash.uniqueid\"\n\nimport Tooltip from 'components/common/Tooltip'\nimport EventTicketSize from 'components/event/EventTicketSize'\nimport EventTicketAllergens from 'components/event/EventTicketAllergens'\nimport EventTicketAvailability from './EventTicketAvailability'\n\nconst EventTicket = ({ ticket, hasFee, minOrderQty }) => {\n const { product, section } = ticket\n const { sizes, name, description, available, stock } = product\n\n const isActuallyAvailable = available && stock !== 0\n\n // if (!available) return null\n\n return (\n <>\n \n
\n \n
\n {Boolean(description) && section.toLowerCase() !== 'tickets' && (\n \n
\n \n
\n \n {section.toLowerCase() === 'tickets' ? 'Ticket' : 'Name'}\n {name}\n {description?.length > 0 ?
\n \n
\n {description}
\n )}\n\n
\n )\n}\n\nexport default EventTicketList\n","import { useEffect, useState } from \"react\"\nimport Loading from \"components/common/Loading\"\nimport { TagsDisplayLabels } from \"enums/TagsDisplayLabels.enum\"\nimport EventTicketList from \"./EventTicketList\"\nimport EventTicket from \"./EventTicket\"\n\nconst EventFoodList = ({ items, heading }) => {\n const [sortedItems, setSortedItems] = useState({})\n\n // Sort the food by tags\n useEffect(() => {\n const sortedItemsLocal = {}\n items.forEach(item => {\n const displayTags = item?.product?.category?.tags?.display?.length ? item?.product?.category?.tags?.display : ['untagged']\n displayTags.forEach(tag => {\n if (sortedItemsLocal[tag]) sortedItemsLocal[tag].push(item)\n else sortedItemsLocal[tag] = [item]\n })\n })\n\n setSortedItems(sortedItemsLocal)\n }, [items])\n\n if (Object.keys(sortedItems).length === 0) return {heading}
\n {items.map(ticket =>\n
\n )\n}\n\nexport default EventFoodList\n","import { useEffect, useState } from 'react';\nimport DatePicker from 'react-datepicker'\n\nimport \"react-datepicker/dist/react-datepicker.css\";\n\nconst EventBookingDetails = ({ eventDates, partyNameRef, eventDateRef, specialNotesRef, customDataFields, setRef }) => {\n return (\n {heading}
\n {\n Object.keys(sortedItems).map(tag => {\n if (tag.toLowerCase() === 'wine_red' || tag.toLowerCase() === 'wine_white' || tag.toLowerCase() === 'wine_rosé' || tag.toLowerCase() === 'wine_sparkling' || tag.toLowerCase() === 'soft_drink' || tag.toLowerCase() === 'beer') return null\n return (\n\n
\n )\n })\n }\n {TagsDisplayLabels[tag]}
\n {sortedItems[tag].map(item =>Booking details
\n\n \n \n
\n )\n })}\n\n \n \n \n
\n )\n}\n\nexport default DepositBanner\n","import { useState, useEffect, useMemo } from 'react'\n\nimport EventTicketList from 'components/event/EventTicketList'\nimport EventFoodList from 'components/event/EventFoodList'\nimport EventBookingDetails from 'components/event/EventBookingDetails'\nimport DepositBanner from 'components/event/DepositBanner'\nimport priceToString from 'util/priceToString'\n\nconst EventTickets = ({ goToCheckout, orderScrollRef, error, eventMenu, partyNameRef, eventDateRef, specialNotesRef, setRef }) => {\n const [productsByType, setProductsByType] = useState({})\n\n // TODO - processing state\n useEffect(() => {\n const allProductsByType = {}\n Object.values(eventMenu.items).forEach(item => {\n if (allProductsByType[item.section]) {\n allProductsByType[item.section].push(item)\n } else {\n allProductsByType[item.section] = [item]\n }\n })\n\n setProductsByType(allProductsByType)\n }, [eventMenu.items])\n\n const hasFee = useMemo(() => {\n return !!eventMenu.defaultItemFee\n }, [eventMenu])\n\n const getFeeDisclaimer = () => {\n let disclaimer = `* ${priceToString(eventMenu.defaultItemFee)} booking fee is applied per ticket`\n\n if (eventMenu.maxTotalItemFee) {\n disclaimer += `, capped at ${priceToString(eventMenu.maxTotalItemFee)}.`\n } else {\n disclaimer += '.'\n }\n\n disclaimer += ' Fee is calculated on the checkout page.'\n\n if (eventMenu.depositPerItem) {\n disclaimer += \" If you're splitting the cost, booking fees will not be charged on future payments.\"\n }\n\n return disclaimer\n }\n\n if (Object.keys(productsByType).length === 0 || eventMenu.active === false) {\n return (\n Split the cost
\nOnly pay a {priceToString(depositAmount)} deposit per ticket today. Select your payment option at checkout. Full amount must be settled by {new Date(eventDates[0].start).toLocaleDateString()}.
\n\n
\n )\n }\n\n return (\n Sorry, you're a bit early
\nLooks like you got here earlier than we thought you would! We're still setting up our event, please come back later.
\n\n
\n )\n}\n\nexport default EventTickets\n","import './hero.scss'\n\nconst Hero = ({ imageUrl }) => {\n return (\n {error}
{getFeeDisclaimer()}
)}\n\n \n
\n \n )\n}\n\nexport default Hero\n","import { useState } from \"react\"\nimport priceToString from \"util/priceToString\"\n\nconst PAYMENT_OPTIONS = { DEPOSIT: 'deposit', FULL: 'full' }\n\nconst EventPaymentAmount = ({ onChange, depositAmount, fullAmount, eventDates = [], hasFee, hasDeposit }) => {\n const [paymentOption, setPaymentOption] = useState(PAYMENT_OPTIONS.DEPOSIT)\n\n const changePaymentOption = (e) => {\n setPaymentOption(e.target.value)\n onChange(e.target.value)\n }\n\n if (!hasDeposit) return null\n\n return (\n <>\n \n \n
\n {paymentOption === PAYMENT_OPTIONS.DEPOSIT &&\n \n \n
\n \n \n
\n \n Full payment required by {new Date(eventDates[0].start).toLocaleDateString()}.\n {hasFee && Future payments will not be charged a booking fee.}\n
\n }\n {paymentOption === PAYMENT_OPTIONS.FULL &&\n\n }\n \n )\n}\n\nexport default EventPaymentAmount\n","import { useState, useEffect, useContext, useRef } from 'react'\nimport { faArrowLeft, faTicketAlt, faUtensils } from \"@fortawesome/free-solid-svg-icons\"\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\"\nimport { Elements, useElements, useStripe, LinkAuthenticationElement, PaymentElement } from '@stripe/react-stripe-js'\nimport { loadStripe } from '@stripe/stripe-js'\nimport axios from 'axios'\n\nimport { BasketContext } from '../../basket/BasketContext'\nimport priceToString from '../../../util/priceToString'\nimport { LocationContext } from '../../common/LocationContext'\nimport config from '../../../config'\nimport EventPaymentAmount from 'components/event/EventPaymentAmount'\nimport Loading from 'components/common/Loading'\n\nconst EventPayment = ({ goToTickets, orderScrollRef, eventMenu, partyName, eventDate, specialRequirements, customData }) => {\n const [stripePromise, setStripePromise] = useState()\n const [stripeIntent, setStripeIntent] = useState()\n\n const { location } = useContext(LocationContext)\n\n useEffect(() => {\n if (location) {\n if (location.config.canProcessPayment === true) {\n setStripePromise(loadStripe(location.config.stripePublicKey))\n\n // Create initial intent for £1. This gets updated as users selects payment option.\n axios.post(\n `${config.baseOrderUrl}/payment/intent`,\n {\n amount: 100,\n locationId: location.locationId,\n menuId: eventMenu.id,\n bookingFee: 0,\n paymentType: \"NEW\",\n }\n ).then(res => {\n setStripeIntent(res.data)\n })\n }\n }\n }, [location])\n\n if (!stripePromise || !stripeIntent) return
\n
\n )\n}\n\nconst PaymentFormSkeleton = () => (\n Review and pay
\n\n
\n \n \n \n
\n \n \n
\n)\n\nconst PaymentForm = ({ eventMenu, partyName, eventDate, specialRequirements, customData, stripeIntent, setStripeIntent }) => {\n const [isProcessingPayment, setIsProcessingPayment] = useState(false)\n const [hasCompletedPayment, setHasCompletedPayment] = useState(false)\n\n const [error, setError] = useState()\n\n const elements = useElements()\n const stripe = useStripe()\n\n const { basket, numberOfItemsInBasketByRef } = useContext(BasketContext)\n const { location, menuIdLookingAt } = useContext(LocationContext)\n\n const [isStripeReady, setIsStripeReady] = useState(false)\n\n useEffect(() => {\n if (elements) {\n const element = elements.getElement('payment')\n if (element) {\n element.on('ready', () => {\n setIsStripeReady(true)\n })\n }\n }\n }, [elements])\n\n const cardNameRef = useRef()\n const emailRef = useRef()\n const termsRef = useRef()\n const phoneRef = useRef()\n const amountToPayRef = useRef(eventMenu.depositPerItem ? 'deposit' : 'full')\n\n useEffect(() => {\n updateStripeIntent(amountToPayForOrder(eventMenu.depositPerItem ? 'deposit' : 'full'))\n }, [])\n\n async function updateStripeIntent(amount) {\n const intent = await axios.put(\n `${config.baseOrderUrl}/payment/intent/${stripeIntent.intentId}`,\n {\n locationId: location.locationId,\n changeValues: {\n amount: amount\n }\n }\n )\n setStripeIntent(intent.data)\n return intent.data\n }\n\n async function changeAmountToPay(e) {\n try {\n await updateStripeIntent(amountToPayForOrder(e))\n amountToPayRef.current = e\n } catch (error) {\n console.log(error);\n }\n }\n\n const hasFee = !!eventMenu.defaultItemFee\n const hasDeposit = !!eventMenu.depositPerItem\n\n function getEventFee() {\n if (!eventMenu.defaultItemFee) return 0\n const itemsInBasket = numberOfItemsInBasketByRef.current\n return itemsInBasket * eventMenu.defaultItemFee > eventMenu.maxTotalItemFee ? eventMenu.maxTotalItemFee : itemsInBasket * eventMenu.defaultItemFee\n }\n\n function getEventDeposit() {\n if (!eventMenu.depositPerItem) return 0\n const itemsInBasket = numberOfItemsInBasketByRef.current\n return itemsInBasket * eventMenu.depositPerItem\n }\n\n function isOrderValid() {\n setError(null)\n let isValid = true\n const errors = []\n\n if (!cardNameRef.current.value || cardNameRef.current.value.length === 0) {\n isValid = false\n errors.push('name on the card')\n }\n\n if (!emailRef.current || emailRef.current.length === 0) {\n isValid = false\n errors.push('email address')\n }\n\n if (!phoneRef.current.value || phoneRef.current.value.length === 0) {\n isValid = false\n errors.push('phone number')\n }\n\n if (!termsRef.current.checked || termsRef.current.checked === false) {\n isValid = false\n errors.push('agree with the terms and conditions')\n }\n\n if (Object.keys(basket.contents).length === 0) {\n isValid = false\n errors.push('you must order at least one product')\n }\n\n if (!isValid) setError(`Please provide ${errors.join(', ').replace(/, ([^,]*)$/, ' and $1')}.`)\n return isValid\n }\n\n const amountToPayForOrder = (type) => {\n const fee = getEventFee()\n if (type === 'deposit' && eventMenu.depositPerItem) return getEventDeposit() + fee\n return basket.getTotalPrice() + fee\n }\n\n async function createOrder(e) {\n e.preventDefault()\n if (!isOrderValid() || isProcessingPayment) return\n\n if (!location?.locationId || !menuIdLookingAt) {\n setError('Sorry, we could not process your payment. Please try again.')\n return\n }\n\n setIsProcessingPayment(true)\n\n // Stripe to fetch intent updates\n await elements.fetchUpdates()\n\n const items = {}\n for (const [key, value] of Object.entries(basket.contents)) {\n if (value.quantity > 0) {\n items[key] = {\n quantity: value.quantity,\n size: value.size,\n menuId: menuIdLookingAt,\n menuItemId: value.id,\n }\n }\n }\n\n const orderToPlace = {\n totalCost: basket.getTotalPrice(),\n amountToPay: amountToPayForOrder(amountToPayRef.current),\n bookingFee: getEventFee(),\n locationId: location.locationId,\n items: items,\n customer: {\n name: partyName,\n email: emailRef.current.trim(),\n phone: phoneRef.current.value,\n },\n // TODO - how to we determine the destination?\n destination: null,\n deliveryDate: eventDate,\n notes: specialRequirements,\n menuId: menuIdLookingAt,\n customDataFields: customData,\n stripeIntentId: stripeIntent.intentId\n }\n\n const res = await axios.post(`${config.baseOrderUrl}/preorder`, orderToPlace)\n if (res?.status === 200) {\n const { error } = await stripe.confirmPayment({\n elements,\n confirmParams: {\n return_url: \"http://localhost:3000/event\",\n },\n redirect: 'if_required'\n });\n\n if (error) {\n if (error.message) {\n setError(`Error - ${error.message}`)\n } else {\n setError(`There was an error processing your payment. Please check your card details and try again.`)\n }\n\n setIsProcessingPayment(false)\n } else {\n setHasCompletedPayment(true)\n }\n } else {\n setError(`There was an error processing your payment. Please check your card details and try again.`)\n setIsProcessingPayment(false)\n }\n }\n\n if (hasCompletedPayment) {\n return (\n \n
\n )\n }\n\n return (\n Thank you!
\nYour order is now with our team. A confirmation and a receipt have been sent to the provided email.
\n\n {!isStripeReady &&
\n )\n}\n\nconst ErrorComponent = ({ error }) => {\n return {error}
\n \n {Object.keys(basket.contents).map(basketItem => {\n return
\n )\n}\n\nconst BasketLine = ({ item, hasFee }) => {\n const { size, quantity, section, product } = item\n const { name } = product\n\n return (\n \n Booking fee\n {priceToString(getEventFee())}\n
\n )}\n \n Total\n {priceToString(basket.getTotalPrice() + getEventFee())} inc. VAT\n
\n \n
\n )\n}\n\nexport default EventPayment\n","import { useState, useRef, useContext, useEffect } from 'react'\nimport { LocationClient } from \"@food2room/clients\"\nimport { useHistory } from 'react-router-dom'\nimport useDynamicRefs from 'use-dynamic-refs';\n\nimport EventDetailsCard from 'components/event/EventDetailsCard'\nimport EventTickets from './EventTickets'\nimport Hero from '../../common/Hero'\nimport './event.scss'\nimport EventPayment from './EventPayment'\nimport { BasketContext } from '../../basket/BasketContext'\nimport { LocationContext } from '../../common/LocationContext'\nimport config from '../../../config'\nimport Footer from '../../check-in/Footer'\nimport Loading from '../../common/Loading'\nimport { isEventOver } from '../../../util/event.util'\n\nconst EventPage = () => {\n const PAGE_VIEWS = { TICKETS: 'tickets', PAYMENT: 'payment' }\n const [pageView, setPageView] = useState(PAGE_VIEWS.TICKETS)\n const orderScrollRef = useRef()\n const [ticketError, setTicketError] = useState()\n const [eventMenu, setEventMenu] = useState()\n const [getRef, setRef] = useDynamicRefs();\n\n const { basket } = useContext(BasketContext)\n const { menuIdLookingAt, location } = useContext(LocationContext)\n const history = useHistory()\n\n const partyNameRef = useRef()\n const eventDateRef = useRef(0)\n const specialNotesRef = useRef()\n const customDataRef = useRef()\n\n useEffect(() => {\n if (location && menuIdLookingAt) {\n LocationClient.setBaseUrl(config.baseOrderUrl)\n LocationClient.getMenu(location.locationId, menuIdLookingAt, '')\n .then(setEventMenu)\n }\n\n if (location && !menuIdLookingAt) {\n history.push('/checkin')\n }\n // eslint-disable-next-line\n }, [menuIdLookingAt, location])\n\n function isViewing(view) {\n return pageView === view\n }\n\n function goToCheckout() {\n // Check user has filled in booking details\n if (!partyNameRef.current.value || partyNameRef.current.value.length === 0 || eventDateRef.current === 0) {\n setTicketError('Fill in your booking details.')\n return\n }\n\n // Check for any required custom fields\n if (eventMenu.customDataFields) {\n for (const f of eventMenu.customDataFields) {\n if (f.isRequired && (!getRef(f.id).current.value || getRef(f.id).current.value.length === 0)) {\n setTicketError('Fill in your booking details.')\n return\n }\n }\n }\n\n // Check user has added item to basket\n if (Object.keys(basket.contents).length === 0) {\n setTicketError('Select at least one item before proceeding with payment.')\n return\n }\n\n // Check for minimum order quantity\n let hasMinQtyError = false\n Object.values(basket.contents).forEach(item => {\n if (item.quantity < item.minimumOrderQuantity) {\n setTicketError(`Cannot buy less than ${item.minimumOrderQuantity} of ${item.product.name}`)\n hasMinQtyError = true\n }\n });\n if (hasMinQtyError) {\n return\n }\n\n // Save custom data\n customDataRef.current = []\n if (eventMenu.customDataFields) {\n eventMenu.customDataFields.forEach(f => {\n customDataRef.current.push({ ...f, value: getRef(f.id).current.value })\n });\n }\n\n // All good, clear error and proceed\n if (ticketError) setTicketError(null)\n setPageView(PAGE_VIEWS.PAYMENT)\n }\n\n function goToTickets() {\n setPageView(PAGE_VIEWS.TICKETS)\n }\n\n if (!eventMenu) return \n
\n \n
\n \n
\n \n {name}\n {size.name}\n
\n \n {priceToString(size.price)} {hasFee ? + fee* : null}\n x {quantity}\n
\n \n
\n \n
\n \n
\n \n \n
\n \n )\n}\n\nconst EventEndedNotice = () => (\n \n
\n)\n\nexport default EventPage\n","import React, { useContext } from 'react'\nimport { BrowserRouter as Router, Route, Switch, Redirect } from \"react-router-dom\"\n\nimport NavBar from './components/common/NavBar'\nimport OrderPage from './components/order/OrderPage'\nimport BasketPage from './components/basket/BasketPage'\nimport { BasketContextProvider } from './components/basket/BasketContext'\nimport { MenuContextProvider } from './components/order/MenuContext'\nimport { LocationContext, LocationContextProvider } from './components/common/LocationContext'\nimport CheckInPage from './components/check-in/CheckInPage'\nimport EventPage from './components/order/events/EventPage'\n\nimport './assets/scss/app.scss'\n\nfunction App() {\n return (\n This event is now over
\nThis event has now ended. Please contact the event organiser for future events.
\n