\n
\n {'Breads & Rolls'}\n \n
\n
\n ) : null}\n {this.state.breadsAndRolls.map(breadsAndRollsItem => {\n //console.log({breadsAndRollsItem});\n if (breadsAndRollsItem.available && (!breadsAndRollsItem.hasStock || (breadsAndRollsItem.hasStock && breadsAndRollsItem.remainingStock > 0))) {\n return (\n
\n
\n \n
\n );\n }\n return null;\n })}\n \n );\n }\n} // end Menu\n\nMenu.propTypes = {\n //classes: PropTypes.object.isRequired,\n //orders: PropTypes.array.isRequired,\n};\n\nexport default connect(null, { updateMenuItems })(withStyles(styles)(Menu));","import React from 'react';\nimport { connect } from 'react-redux';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport Button from '@material-ui/core/Button';\nimport Typography from '@material-ui/core/Typography';\nimport TextField from '@material-ui/core/TextField';\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\nimport Switch from '@material-ui/core/Switch';\nimport { updateOrderItems } from '../actions/index';\n\nconst styles = theme => ({\n root: {\n width: '100%',\n marginTop: theme.spacing.unit * 3,\n overflowX: 'auto',\n },\n ItemImage: {\n width: 256,\n },\n MenuItemBlock: {\n display: 'flex',\n },\n MenuItemInfo: {\n display: 'flex',\n flexDirection: 'column',\n marginLeft: 10\n },\n MenuItemPricing: {\n display: 'flex',\n marginLeft: 5,\n alignItems: 'center'\n },\n MenuItemTitleAndPrice: {\n display: 'flex'\n },\n QuantityAndSizeSelect: {\n display: 'flex',\n float: 'left'\n }, \n FeedsTextPlaceholder: {\n height: '1.5rem'\n },\n DeleteItemButton: {\n color: 'white',\n backgroundColor: '#ff0030',\n width: '7rem',\n },\n QuantityAndSizeSpacing: {\n width: '1rem'\n }\n });\n \n const quantities = [{ value: 0, label: '0' }, { value: 1, label: '1' }, { value: 2, label: '2' },\n { value: 3, label: '3' }, { value: 4, label: '4' }, { value: 5, label: '5' }, { value: 6, label: '6' },\n { value: 7, label: '7' }, { value: 8, label: '8' }, { value: 9, label: '9' }, { value: 10, label: '10' }];\n\n class OrderItem extends React.Component {\n \n state = {\n selected: [],\n dialogOpen: false,\n deleteConfirmationOpen: false,\n quantity: 0,\n size: 'EMPTY',\n isDairyFree: false,\n ganacheTopping: false,\n }\n \n async componentDidMount() {\n //console.log('Print');\n //Analytics.record('Amplify_CLI');\n // //console.log(this.props.itemInfo);\n // if (this.props.itemInfo.pricing.length > 0) {\n // if (this.props.itemInfo.pricing[0].size !== 'EMPTY') {\n // this.setState({size: this.props.itemInfo.pricing[0].size});\n // }\n // }\n }\n // handleClickOpen = () => {\n // const menuItemDetails = {\n // item: '',\n // pricing: [],\n // description: '',\n // category: '',\n // available: true,\n // canBeDairyFree: false,\n // imageName: ''\n // };\n // this.props.toggleMenuItemDialog({menuItemDialogOpen: true, existingMenuItemOpened: false, menuItemInfo: menuItemDetails});\n // };\n \n renderPricing(pricing, menuItemPricingStyle) {\n let pricingString = '';\n pricing.forEach((price, priceIndex) => {\n //console.log({priceIndex});\n if (price.size !== 'EMPTY') {\n if (priceIndex === 0) {\n pricingString = `${price.price} - ${price.size}`;\n } else {\n pricingString = pricingString.concat(' | ', `${price.price} - ${price.size}`);\n }\n } else {\n pricingString = `${price.price}`;\n }\n //console.log({pricingString});\n });\n return (\n
\n {pricingString}\n \n )\n } // end renderPricing\n\n renderFeedsText(pricing, feedsTextPlaceholder) {\n let feedsString = '';\n pricing.forEach((price, priceIndex) => {\n if (price.size !== 'EMPTY') {\n if (priceIndex === 0) {\n feedsString = `${price.size} - ${price.feeds} people`;\n } else {\n feedsString = feedsString.concat(' | ', `${price.size} - ${price.feeds} people`);\n }\n } \n });\n if (feedsString === '') {\n return (
);\n }\n return (\n
\n {feedsString}\n \n )\n }\n\n renderSizeSelect(pricing) {\n let sizes = [];\n pricing.forEach(price => {\n if (price.size !== 'EMPTY' && (!price.hasStock || (price.hasStock && price.remainingStock))) {\n sizes.push({label: price.size, value: price.size});\n }\n });\n //console.log(sizes);\n if (sizes.length > 0) {\n return (
\n {sizes.map(option => (\n \n {option.label}\n \n ))}\n );\n } else {\n return null;\n }\n }\n\n handleChangeQuantity = name => event => {\n //console.log(event.target.value);\n const indexOfItem = this.props.orderItems.findIndex((orderItem) => {\n return orderItem.item === this.props.itemInfo.item;\n });\n\n let newOrderItems = [...this.props.orderItems];\n //console.log({indexOfItem});\n if (indexOfItem >= 0) {\n\n //console.log('Value: ', event.target.value);\n if (parseInt(event.target.value) === 0) {\n //console.log('removing item: ', newOrderItems);\n newOrderItems.splice(indexOfItem, 1);\n //console.log('removed item: ', newOrderItems);\n } else {\n //console.log('value exists changing quantity');\n newOrderItems[indexOfItem].quantity = event.target.value;\n }\n } else {\n newOrderItems.push({\n item: this.props.itemInfo.item,\n quantity: event.target.value,\n size: this.state.size,\n isDairyFree: this.state.isDairyFree\n });\n }\n //console.log({newOrderItems});\n this.setState({ quantity: event.target.value });\n this.props.updateOrderItems(newOrderItems);\n };\n\n handleRemoveItem = event => {\n const indexOfItem = this.props.orderItems.findIndex((orderItem) => {\n return orderItem.item === this.props.itemInfo.item;\n });\n\n let newOrderItems = [...this.props.orderItems];\n\n if (indexOfItem >= 0) {\n newOrderItems.splice(indexOfItem, 1);\n //console.log('removed item: ', newOrderItems);\n //console.log({newOrderItems});\n this.props.updateOrderItems(newOrderItems);\n\n if (newOrderItems.length === 0) {\n this.setState({dialogOpen: false});\n }\n } \n }\n\n handleChangeSize = name => event => {\n const indexOfItem = this.props.orderItems.findIndex((orderItem) => {\n return orderItem.item === this.props.itemInfo.item;\n });\n\n let newOrderItems = [...this.props.orderItems];\n\n if (indexOfItem >= 0) {\n newOrderItems[indexOfItem].size = event.target.value;\n this.setState({ size: event.target.value });\n this.props.updateOrderItems(newOrderItems);\n } \n };\n\n handleChange = name => event => {\n this.setState({\n [name]: event.target.value,\n });\n };\n\n handleDairyFreeChange = field => async event => {\n const indexOfItem = this.props.orderItems.findIndex((orderItem) => {\n return orderItem.item === this.props.itemInfo.item;\n });\n \n let newOrderItems = [...this.props.orderItems];\n \n if (indexOfItem >= 0) {\n newOrderItems[indexOfItem].isDairyFree = event.target.checked;\n this.setState({ isDairyFree: event.target.checked });\n this.props.updateOrderItems(newOrderItems);\n } \n };\n\n handleGanacheToppingChange = field => async event => {\n const indexOfItem = this.props.orderItems.findIndex((orderItem) => {\n return orderItem.item === this.props.itemInfo.item;\n });\n \n let newOrderItems = [...this.props.orderItems];\n \n if (indexOfItem >= 0) {\n newOrderItems[indexOfItem].ganacheTopping = event.target.checked;\n this.setState({ ganacheTopping: event.target.checked });\n this.props.updateOrderItems(newOrderItems);\n } \n };\n \n\n renderDairyFree(canBeDairyFree) {\n if (canBeDairyFree) {\n return (\n \n
\n
\n
\n
\n
\n
\n \n {itemInfo.item}\n \n
\n
\n
\n
\n
\n {quantities.map(option => (\n \n {option.label}\n \n ))}\n \n
\n {this.renderSizeSelect(menuItem.pricing)}\n {this.renderDairyFree(menuItem.canBeDairyFree)}\n {this.renderGanacheTopping(shouldRenderGanacheTopping)}\n \n
\n Remove Item\n \n
\n
\n
\n
\n
\n
\n
\n
\n
\n \n {orderItem.item}\n \n
\n
\n
\n
\n \n {quantities.map(option => (\n \n {option.label}\n \n ))}\n \n {this.renderSizeSelect(orderItem.pricing)}\n
\n
\n
\n
\n // {this.state.pickupWindowDisplayList[windowIndex].pickupWindows.map((pickupWindowDisplayItem) => (\n // \n // {pickupWindowDisplayItem.timeWindow}\n // \n // ))}\n // \n // );\n // }\n // return null;\n // }\n\n renderDialogContent() {\n if (this.state.activeStep === 0) {\n return (\n \n \n \n Let's get the rest of your information\n \n
\n \n
\n \n
\n \n \n {/* this.renderPickupWindowSelect() */}\n \n );\n } else if (this.state.activeStep === 1) {\n //console.log(this.props.orderItems);\n return (\n \n \n Time to review your order, if you need to make any changes you can make your changes below\n \n {this.props.orderItems.map(orderItem => {\n console.log({orderItem});\n return (\n \n
\n
\n
\n );\n })}\n
\n Subtotal: ${this.props.orderSubtotal}\n \n
\n Tax: ${this.props.orderTax}\n \n
\n Payment due at pick up: ${this.props.orderTotal}\n \n
\n Payment is required before pick up for orders totalling $150 or more.\n \n
\n Any order not picked up after the scheduled pick up day may be cancelled once DBB makes reasonable attempts to contact you. \n \n
\n If DBB is unable to successfully contact you with questions or concerns about your order, it may cancel the order.\n \n {/*
\n We'll contact you by phone for prepayment with a credit or debit card\n */}\n \n );\n } else {\n return (\n
\n \n Thanks for your order!\n \n {/*\n We'll contact you by phone for prepayment with a credit or debit card\n */}\n \n You'll get an email with your order information shortly\n \n \n Be sure to check your spam folder if you don't see an email within a few minutes\n \n \n );\n }\n }\n\n handleNext = () => {\n const { activeStep } = this.state;\n if (activeStep === 0 && this.state.pickupDate === '') {\n if (this.validateEmailFormat()) {\n this.setState({\n activeStep: activeStep + 1,\n pickupDate: this.props.ordersStartDate\n });\n } else {\n this.setState({ emailFormatError: true });\n }\n } else {\n if (this.validateEmailFormat()) {\n this.setState({\n activeStep: activeStep + 1,\n });\n } else {\n this.setState({ emailFormatError: true });\n }\n } \n };\n\n handleBack = () => {\n this.setState(state => ({\n activeStep: state.activeStep - 1,\n }));\n };\n\n isReviewOrderButtonDisabled() {\n if (this.state.pickupWindow === '' || this.state.firstName === '' || this.state.lastName === '' || this.state.email === '' || this.state.phone === '' || this.state.pickupDate === null) {\n return true;\n }\n return false;\n }\n\n renderDialogActions() {\n if (this.state.activeStep === 0) {\n return (\n
\n \n Cancel\n \n \n Review Order\n \n \n );\n } else if (this.state.activeStep === 1) {\n return (\n
\n \n Cancel\n \n \n Back\n \n \n Place Order\n \n \n );\n } else {\n return (\n null\n );\n }\n }\n\n isContinueButtonDisabled() {\n if (this.props.orderItems.length > 0) {\n return false;\n }\n return true;\n }\n\n render() {\n const { classes } = this.props;\n const steps = getSteps();\n const { activeStep } = this.state;\n //console.log(this.props);\n return (\n
\n
\n Continue to Place Order\n \n
\n \n {steps.map((label, index) => {\n const props = {};\n const labelProps = {};\n return (\n \n {label} \n \n );\n })}\n \n {this.renderDialogContent()}\n \n\n {this.renderDialogActions()}\n \n \n );\n }\n} // end Menu\n\nNewOrder.propTypes = {\n //classes: PropTypes.object.isRequired,\n //orders: PropTypes.array.isRequired,\n};\n\n\nconst mapStateToProps = ({state}) => {\n //console.log({state});\n return { orderItems: state.orderItems, orderTotal: state.orderTotal, orderSubtotal: state.orderSubtotal, orderTax: state.orderTax };\n};\n\nexport default connect(mapStateToProps, { updateOrderItems })(withStyles(styles)(NewOrder));","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport Dialog from '@material-ui/core/Dialog';\nimport Typography from '@material-ui/core/Typography';\nimport moment from 'moment';\nimport {\n getMonthLabel,\n getNumberPostfix,\n getDayLabel\n} from '../utils/time';\n\nconst styles = theme => ({\n OrdersClosedStyle: {\n display: 'flex', \n flexDirection: 'column', \n marginLeft: 10,\n marginRight: 10,\n alignItems: 'center'\n },\n ImageSeparator: {\n height: '1rem'\n },\n});\n\nconst now = moment();\nlet ordersCutoff = moment({ year :2019, month :10, day :23, \n hour :17, minute :0, second :0, millisecond :0});\n\nclass OrdersClosed extends React.Component {\n\n state = {\n open: false,\n }\n\n areOrdersClosed() {\n if (now.isAfter(ordersCutoff) || this.props.beforeOrAfter === 'before') {\n return true;\n }\n return false;\n }\n \n renderOrdersClosedMessage(onlineOrdersStart, onlineOrdersEnd) {\n const currentMonth = now.month();\n console.log({currentMonth});\n let holiday = '';\n if (currentMonth === 11) {\n holiday = 'Christmas';\n } else if ([9, 10].includes(currentMonth)) {\n holiday = 'Thanksgiving';\n } else if ([1, 2, 3].includes(currentMonth)) {\n holiday = 'Easter';\n }\n const onlineOrdersStartMonth = onlineOrdersStart.month();\n const onlineOrdersEndMonth = onlineOrdersEnd.month();\n let startMonthLabel = getMonthLabel(onlineOrdersStartMonth);\n let endMonthLabel = getMonthLabel(onlineOrdersEndMonth);\n\n console.log({currentMonth});\n if (this.props.beforeOrAfter === 'before') {\n return (\n
\n {`${holiday} pre-orders will start ${getDayLabel(onlineOrdersStart.day())}, ${startMonthLabel} ${onlineOrdersStart.date()}${getNumberPostfix(onlineOrdersStart.date())} and go until ${onlineOrdersEnd.format('h')}pm on ${endMonthLabel} ${onlineOrdersEnd.date()}${getNumberPostfix(onlineOrdersEnd.date())}`}\n \n );\n }\n return (\n
\n {`Unfortunately ${holiday} pre-orders are no longer being taken as of ${onlineOrdersEnd.local().format('h')}pm on ${endMonthLabel} ${onlineOrdersEnd.date()}${getNumberPostfix(onlineOrdersEnd.date())}`}\n \n );\n }\n\n render() {\n const { classes, onlineOrdersStart, onlineOrdersEnd } = this.props;\n return (\n
\n \n
\n
\n
\n Thanks for visiting Different Blend Bakery online orders\n \n {this.renderOrdersClosedMessage(onlineOrdersStart, onlineOrdersEnd)}\n {/*
\n All bakery products are first come first serve the week of Christmas 12/20-12/24\n */}\n
\n
\n \n\n );\n }\n} // end OrdersClosed\n\nOrdersClosed.propTypes = {\n classes: PropTypes.object.isRequired,\n onlineOrdersStart: PropTypes.object.isRequired,\n onlineOrdersEnd: PropTypes.object.isRequired,\n};\n\nexport default withStyles(styles)(OrdersClosed);","import React, { Component, useState } from 'react';\nimport Amplify, { Storage, API, graphqlOperation, Auth } from 'aws-amplify';\nimport { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';\nimport Card from '@material-ui/core/Card';\nimport CardContent from '@material-ui/core/CardContent';\nimport Typography from '@material-ui/core/Typography';\nimport awsmobile from './aws-exports';\nimport { ConfirmSignUp, ForgotPassword, SignIn, SignUp, withAuthenticator } from 'aws-amplify-react';\nimport moment from 'moment';\nimport './App.css';\nimport Menu from './sections/Menu';\nimport NewOrder from './sections/NewOrder';\nimport OrdersClosed from './components/OrdersClosed';\nimport {\n PRIMARY_COLOR,\n} from './theme/colors';\n\nconst apiKey = process.env.REACT_APP_API_KEY;\n\nAmplify.configure(awsmobile);\nAmplify.configure({\n Storage: {\n AWSS3: {\n bucket: 'different-blend-bakery-menu-photos',\n region: 'us-east-1',\n }\n },\n \"aws_appsync_graphqlEndpoint\": \"https://unehcovujjfo5phj2iay3quh24.appsync-api.us-east-1.amazonaws.com/graphql\",\n \"aws_appsync_region\": \"us-east-1\",\n \"aws_appsync_authenticationType\": \"API_KEY\",\n \"aws_appsync_apiKey\": apiKey,\n // API: {\n // aws_appsync_graphqlEndpoint: \"https://kpjuswyvtzakrmomqdtyflxisi.appsync-api.us-east-1.amazonaws.com/graphql\",\n // aws_appsync_region: \"us-east-1\",\n // aws_appsync_authenticationType: \"AMAZON_COGNITO_USER_POOLS\",\n // aws_appsync_apiKey: null,\n // }\n});\nStorage.configure({ level: 'public' });\n\nconst theme = createMuiTheme({\n palette: {\n primary: { main: PRIMARY_COLOR}, // Purple and green play nicely together. Christmas: #0d8515, Thanksgiving: '#A57300', Easter: '#a364ac' - TG2: #CE9000, #A57300, #536C02\n secondary: { main: '#11cb5f' }, // This is just green.A700 as hex.\n error: { main: '#ff0000' }\n },\n typography: { useNextVariants: true, fontFamily: ['Raleway'] },\n});\n\nconst getOrderDates = `query listOrderDates {\n listOrderDates{\n items{\n id\n tag\n date\n }\n }\n}`;\n\nclass MyConfirmSignup extends ConfirmSignUp {\n constructor(props) {\n super(props);\n this._validAuthStates = [\"confirmSignUp\"];\n }\n\n render() {\n if (this.props.authState === \"confirmSignUp\") {\n return (\n
\n
\n \n \n A verification link has been sent to the provided email address\n \n \n Be sure to check your spam folder if you don't see an email within a few minutes\n \n \n \n
);\n } else {\n return (null);\n }\n }\n}\n\nclass App extends Component {\n // const [accessCount, setAccessCount] = useState(0);\n state = {\n ordersStartDate: new Date(),\n ordersStartDateString: '',\n ordersCutoffDate: new Date(),\n ordersCutoffDateString: '',\n onlineOrdersStartDate: new Date(),\n onlineOrdersStartDateString: '',\n onlineOrdersCutoffDate: new Date(),\n onlineOrdersCutoffDateString: '',\n allowAccess: false,\n }\n ordersMomentStartDate = moment();\n ordersMomentEndDate = moment();\n onlineOrdersMomentStartDate = moment();\n onlineOrdersMomentEndDate = moment();\n today = moment();\n\n async componentDidMount() {\n const orderDates = await API.graphql(graphqlOperation(getOrderDates));\n if (orderDates.data.listOrderDates.items.length > 0) {\n let ordersStartDate = '';\n let ordersCutoffDate = '';\n let onlineOrdersStartDate = '';\n let onlineOrdersCutoffDate = '';\n orderDates.data.listOrderDates.items.forEach(orderDatesItem => {\n if (orderDatesItem.tag === 'ordersStartDate') {\n ordersStartDate = orderDatesItem.date;\n this.ordersMomentStartDate = moment(orderDatesItem.date);\n } else if (orderDatesItem.tag === 'ordersCutoffDate') {\n ordersCutoffDate = orderDatesItem.date;\n this.ordersMomentEndDate = moment(orderDatesItem.date);\n } else if (orderDatesItem.tag === 'onlineOrdersStartDate') {\n onlineOrdersStartDate = orderDatesItem.date;\n this.onlineOrdersMomentStartDate = moment(orderDatesItem.date);\n } else if (orderDatesItem.tag === 'onlineOrdersCutoffDate') {\n onlineOrdersCutoffDate = orderDatesItem.date;\n this.onlineOrdersMomentEndDate = moment(orderDatesItem.date);\n }\n });\n if (ordersStartDate !== '' && ordersCutoffDate !== '') {\n this.setState({ordersStartDate, ordersCutoffDate});\n } else if (ordersStartDate !== '') {\n this.setState({ordersStartDate});\n } else {\n this.setState({ordersCutoffDate});\n }\n if (onlineOrdersStartDate !== '' && onlineOrdersCutoffDate !== '') {\n this.setState({onlineOrdersStartDate, onlineOrdersCutoffDate});\n } else if (onlineOrdersStartDate !== '') {\n this.setState({onlineOrdersStartDate});\n } else {\n this.setState({onlineOrdersCutoffDate});\n }\n }\n }\n\n renderOrdersClosed() {\n if (!this.today.isBetween(this.onlineOrdersMomentStartDate, this.onlineOrdersMomentEndDate, null, '[]') && !this.state.allowAccess) {\n if (this.today.isBefore(this.onlineOrdersMomentStartDate)) {\n return (
);\n } else {\n return ();\n }\n }\n return null;\n }\n\n render() {\n return (\n \n
\n {this.renderOrdersClosed()}\n \n
\n
\n \n
\n