\n \n {eventName}\n \n \n\n \n
\n When : {dateTime}
\n
\n # of attendees \n
\n\n
\n # of waitlisted attendees \n
\n
\n
Event duration \n
\n
\n \n\n \n Hours \n Minutes \n \n \n
\n
\n \n
\n
Reminders \n
\n \n Yes \n No \n \n \n \n {\n getReminderHours().map((el, index) => {\n return (\n {el} Hours \n )\n }\n )\n }\n\n \n
\n \n
\n
\n {handleClose && (\n \n \n CANCEL\n \n \n )}\n \n );\n}","import React, { useCallback, useRef, useEffect, useState } from \"react\";\nimport { useSelector, useDispatch } from \"react-redux\";\nimport Moment from \"moment\";\nimport { extendMoment } from \"moment-range\";\nimport classNames from \"classname\";\nimport { makeStyles } from \"@material-ui/core/styles\";\nimport Popover from \"@material-ui/core/Popover\";\nimport Typography from \"@material-ui/core/Typography\";\nimport Button from \"@material-ui/core/Button\";\nimport TextField from \"@material-ui/core/TextField\";\nimport HelpIcon from \"@material-ui/icons/Help\";\nimport Badge from \"@material-ui/core/Badge\";\nimport Tooltip from \"@material-ui/core/Tooltip\";\nimport IconButton from \"@material-ui/core/IconButton\";\nimport FormControl from \"@material-ui/core/FormControl\";\nimport Select from \"@material-ui/core/Select\";\nimport MenuItem from \"@material-ui/core/MenuItem\";\nimport InputLabel from \"@material-ui/core/InputLabel\";\n\nimport ExpansionPanel from \"@material-ui/core/ExpansionPanel\";\nimport ExpansionPanelDetails from \"@material-ui/core/ExpansionPanelDetails\";\nimport ExpansionPanelSummary from \"@material-ui/core/ExpansionPanelSummary\";\nimport ExpandMoreIcon from \"@material-ui/icons/ExpandMore\";\nimport {\n getSchedulesJSON,\n hasEmptyDays,\n getSanitizedSchedule,\n} from \"../../services/scheduler/utils\";\nimport {\n getSchedule,\n getAttendeeDataFlag,\n} from \"../../services/create_schedule/actions\";\n\nimport { InfoMessage } from \"./../Messages/index\";\nimport ViewAttendeeModal from \"./../../components/ViewAttendeeModal/index\";\nimport RescheduleModal from \"./../../components/RescheduleModal/index\";\nimport Setting from \"./../../components/Setting/index\";\nconst moment = extendMoment(Moment);\nconst useStyles = makeStyles((theme) => ({\n typography: {\n padding: theme.spacing(2),\n },\n}));\n\nconst HourSlots = ({\n step,\n dateRange,\n activeDay,\n onChange,\n selectedSlots = [],\n multiselect = true,\n customTimeSlots = null,\n readOnly,\n attendeeSchedulesList,\n eventName,\n specialInstructions,\n CheckSlotDetailsFill = (e) => null,\n attendeeId,\n eventId,\n CheckWaitingList,\n setActiveDate,\n}) => {\n const dispatch = useDispatch();\n const [anchorEl, setAnchorEl] = React.useState(null);\n const [seats, setAvailableSeats] = React.useState(null);\n\n const [waitingseats, setWaitingSeats] = React.useState(0);\n const [duration, setDuration] = React.useState(\"60\");\n const [durationunit, setDurationUnit] = React.useState(\"minute\");\n const [reminder, setReminder] = React.useState(\"yes\");\n const [reminderhour, setReminderHour] = React.useState(\"24\");\n const [selectedSlot, setSelectedSlot] = React.useState(null);\n const noofseets = useRef(\"1\");\n const [isAvailableSeatError, setIsAvailableSeatError] = React.useState(false);\n const [isWaitingSeatError, setIsWaitingSeatError] = React.useState(false);\n const [isDurationSeatError, setIsDurationSeatError] = React.useState(false);\n\n const [\n isAvailableSeatErrorMessage,\n setIsAvailableSeatErrorMessage,\n ] = React.useState(\"\");\n const [\n isDurationSeatErrorMessage,\n setIsDurationSeatErrorMessage,\n ] = React.useState(\"\");\n const [\n isWaitingSeatErrorMessage,\n setIsWaitingSeatErrorMessage,\n ] = React.useState(\"\");\n const [expanded, setExpanded] = React.useState(0);\n const [isOpenAtendeeViewModal, setIsOpenAtendeeViewModal] = React.useState(\n false\n );\n const [selectedDateTime, setSelectedDateTime] = React.useState(\"\");\n const schedule = useSelector((state) => state.scheduler.schedule);\n const [attendeeData, setAttendeeData] = React.useState(\"\");\n const [isSettingViewModal, setIsSettingViewModal] = React.useState(false);\n const [isRescheduleModal, setIsRescheduleModal] = React.useState(false);\n const [rescheduledata, setRescheduledata] = React.useState(null);\n const isAttendeeData = useSelector(\n (state) => state.scheduleCreationData.isAttendeeData\n );\n const selectedViewAttendeeData = useSelector(\n (state) => state.scheduleCreationData.selectedViewAttendeeData\n );\n const eventLocation = useSelector(\n (state) => state.slotPickupData.eventLocation\n );\n //let AttendeeData = \"\";\n //const useStyles = makeStyles(theme => ({\n // formControl: {\n // margin: theme.spacing(1),\n // minWidth: 120,\n // },\n // selectEmpty: {\n // marginTop: theme.spacing(2),\n // },\n //}));\n\n const useStyles = makeStyles((theme) => ({\n root: {\n width: \"100%\",\n },\n heading: {\n fontSize: theme.typography.pxToRem(15),\n flexBasis: \"33.33%\",\n flexShrink: 0,\n },\n secondaryHeading: {\n fontSize: theme.typography.pxToRem(15),\n color: theme.palette.text.secondary,\n },\n }));\n\n const classes = useStyles();\n\n const handleExpandChange = (panel) => (event, isExpanded) => {\n setExpanded(isExpanded ? panel : false);\n };\n\n const handlePopoverClick = (event, selectedSlotObj) => {\n if (customTimeSlots) {\n event.preventDefault();\n return false;\n }\n setAnchorEl(event.currentTarget);\n if (selectedSlotObj) {\n selectedSlots.map((item) => {\n item.isAvailableSeatsPopOverOpened = false;\n });\n if (selectedSlots.length > 0) {\n const index = selectedSlots.findIndex(\n (x) => x.slotTime === selectedSlotObj.slotTime\n );\n if (index !== -1) {\n selectedSlots[index].isAvailableSeatsPopOverOpened = true;\n //selectedSlots[index].seats = 1;\n if (selectedSlots[index].seats === 0) {\n setTimeout(\n function (noofseets) {\n noofseets.current.focus();\n noofseets.current.value = 1;\n },\n 200,\n noofseets\n );\n }\n }\n }\n }\n clearAllControls();\n };\n\n const OnAvailableSeatsInputChange = (event, selectedSlotObj) => {\n setAvailableSeats(event.target.value);\n //if (selectedSlots.length > 0) {\n // const index = selectedSlots.findIndex(x => x.slotTime === selectedSlotObj.slotTime);\n // if (index !== -1) {\n // selectedSlots[index].seats = event.target.value;\n // }\n\n //}\n };\n\n const OnAvailableWaitingSlotInputChange = (event, selectedSlotObj) => {\n setWaitingSeats(event.target.value);\n if (selectedSlots.length > 0) {\n const index = selectedSlots.findIndex(\n (x) => x.slotTime === selectedSlotObj.slotTime\n );\n if (index !== -1) {\n selectedSlots[index].waitingseats = waitingseats;\n }\n }\n };\n\n const OnDurationInputChange = (event, selectedSlotObj) => {\n setDuration(event.target.value);\n if (selectedSlots.length > 0) {\n const index = selectedSlots.findIndex(\n (x) => x.slotTime === selectedSlotObj.slotTime\n );\n if (index !== -1) {\n selectedSlots[index].duration = duration;\n }\n }\n };\n\n const OnDurationUnitInputChange = (event, selectedSlotObj) => {\n setDurationUnit(event.target.value);\n if (selectedSlots.length > 0) {\n const index = selectedSlots.findIndex(\n (x) => x.slotTime === selectedSlotObj.slotTime\n );\n if (index !== -1) {\n selectedSlots[index].durationunit = event.target.value;\n }\n }\n };\n\n const OnReminderInputChange = (event, selectedSlotObj) => {\n setReminder(event.target.value);\n if (selectedSlots.length > 0) {\n const index = selectedSlots.findIndex(\n (x) => x.slotTime === selectedSlotObj.slotTime\n );\n if (index !== -1) {\n selectedSlots[index].reminder = event.target.value;\n }\n }\n };\n\n const OnReminderHourInputChange = (event, selectedSlotObj) => {\n setReminderHour(event.target.value);\n if (selectedSlots.length > 0) {\n const index = selectedSlots.findIndex(\n (x) => x.slotTime === selectedSlotObj.slotTime\n );\n if (index !== -1) {\n selectedSlots[index].reminderhour = event.target.value;\n }\n }\n };\n\n const clearAllControls = () => {\n setIsAvailableSeatError(false);\n setIsAvailableSeatErrorMessage(\"\");\n setIsWaitingSeatError(false);\n setIsWaitingSeatErrorMessage(\"\");\n setIsDurationSeatError(false);\n setIsDurationSeatErrorMessage(\"\");\n };\n\n const validateControlls = () => {\n var isValid = true;\n if (\n noofseets.current.value === \"\" ||\n noofseets.current.value === null ||\n noofseets.current.value <= 0 ||\n noofseets.current.value.indexOf(\".\") > -1\n ) {\n if (noofseets.current.value === \"\" || noofseets.current.value === null) {\n setIsAvailableSeatErrorMessage(\"This filed is required.\");\n } else if (noofseets.current.value.indexOf(\".\") > -1) {\n setIsAvailableSeatErrorMessage(\"Invalid Input\");\n } else {\n setIsAvailableSeatErrorMessage(\"Value must be greater than 0.\");\n }\n\n setIsAvailableSeatError(true);\n isValid = false;\n } else {\n setIsAvailableSeatError(false);\n setIsAvailableSeatErrorMessage(\"\");\n }\n\n if (\n waitingseats === \"\" ||\n waitingseats === null ||\n waitingseats < 0 ||\n waitingseats.toString().indexOf(\".\") > -1 ||\n waitingseats.toString().indexOf(\"-\") > -1\n ) {\n if (waitingseats === \"\") {\n setIsWaitingSeatErrorMessage(\"This filed is required.\");\n } else if (\n waitingseats.toString().indexOf(\".\") > -1 ||\n waitingseats.toString().indexOf(\"-\") > -1\n ) {\n setIsWaitingSeatErrorMessage(\"Invalid Input\");\n } else {\n setIsWaitingSeatErrorMessage(\"Value must be greater than 0.\");\n }\n setIsWaitingSeatError(true);\n isValid = false;\n } else {\n setIsWaitingSeatError(false);\n setIsWaitingSeatErrorMessage(\"\");\n }\n if (\n duration === null ||\n duration === \"\" ||\n duration === \"0\" ||\n duration.indexOf(\".\") > -1 ||\n duration.indexOf(\"-\") > -1\n ) {\n if (duration === \"\" || duration === null) {\n setIsDurationSeatErrorMessage(\"This filed is required.\");\n } else if (duration.indexOf(\".\") > -1 || duration.indexOf(\"-\") > -1) {\n setIsDurationSeatErrorMessage(\"Invalid Input\");\n } else {\n setIsDurationSeatErrorMessage(\"Value must be greater than 0.\");\n }\n setIsDurationSeatError(true);\n isValid = false;\n } else {\n setIsDurationSeatError(false);\n setIsDurationSeatErrorMessage(\"\");\n }\n return isValid;\n };\n\n const handlePopoverClose = (event, selectedSlotObj, isButtonClick) => {\n if (isButtonClick) {\n if (validateControlls()) {\n if (selectedSlots.length > 0) {\n const index = selectedSlots.findIndex(\n (x) => x.slotTime === selectedSlotObj.slotTime\n );\n if (index !== -1) {\n selectedSlots[index].seats = noofseets.current.value;\n selectedSlots[index].waitingseats = waitingseats;\n selectedSlots[index].duration = duration;\n selectedSlots[index].durationunit = durationunit;\n }\n }\n\n //setAvailableSeats(0);\n //setWaitingSeats(0);\n //setDuration(null);\n //setDurationUnit('hour');\n setAnchorEl(null);\n selectedSlots.map((item) => {\n item.isAvailableSeatsPopOverOpened = false;\n });\n CheckSlotDetailsFill(true);\n }\n }\n\n if (isButtonClick !== true) {\n setAnchorEl(null);\n selectedSlots.map((item) => {\n item.isAvailableSeatsPopOverOpened = false;\n });\n }\n };\n\n const closeDialog = (event, selectedSlotObj) => {\n setAnchorEl(null);\n\n if (selectedSlots.length > 0) {\n const index = selectedSlots.findIndex(\n (x) => x.slotTime === selectedSlotObj.slotTime\n );\n if (index !== -1) {\n selectedSlots[index].seats = 0;\n selectedSlots[index].waitingseats = 0;\n selectedSlots[index].duration = \"60\";\n selectedSlots[index].durationunit = \"minute\";\n CheckSlotDetailsFill(false);\n }\n }\n\n selectedSlots.map((item) => {\n item.isAvailableSeatsPopOverOpened = false;\n });\n };\n\n const getCurrentAttendee = (aid) => {\n var attendee = undefined;\n if (\n attendeeSchedulesList !== undefined &&\n attendeeSchedulesList !== null &&\n attendeeSchedulesList.length > 0\n ) {\n attendeeSchedulesList.map((item, index) => {\n if (item.attendeeId === aid) {\n attendee = item;\n return attendee;\n }\n });\n }\n\n return attendee;\n };\n\n const getDuration = () => {\n var duration = \"\";\n var selectedTime = \"\";\n var currentAttendee = getCurrentAttendee(attendeeId);\n if (currentAttendee !== undefined) {\n var currentAttendeeSchedule = JSON.parse(currentAttendee.schedules);\n if (currentAttendeeSchedule !== undefined) {\n selectedTime = currentAttendeeSchedule[0].time[0].slotTime;\n }\n }\n if (Array.isArray(customTimeSlots)) {\n customTimeSlots.map((el, index) => {\n if (el.slotTime === selectedTime) {\n duration = el.duration + \" \" + el.durationunit;\n }\n return;\n });\n }\n\n return duration;\n };\n\n const getTimeSlot = () => {\n var selectedTime = \"\";\n var selectedAttendeeTimeSlot = undefined;\n var currentAttendee = getCurrentAttendee(attendeeId);\n if (currentAttendee !== undefined) {\n var currentAttendeeSchedule = JSON.parse(currentAttendee.schedules);\n if (currentAttendeeSchedule !== undefined) {\n selectedTime = currentAttendeeSchedule[0].time[0].slotTime;\n }\n }\n if (Array.isArray(customTimeSlots)) {\n customTimeSlots.map((el, index) => {\n if (el.slotTime === selectedTime) {\n selectedAttendeeTimeSlot = el;\n }\n return;\n });\n }\n\n return selectedAttendeeTimeSlot;\n };\n\n const getRemainingSlots = (dateSlot, timeSlot, totalSlots, waitingseats) => {\n let numberOfAttendeesFound = 0;\n let numberOfConfrimAttendees = 0;\n let numberOfWatingAttendees = 0;\n if (\n attendeeSchedulesList !== undefined &&\n attendeeSchedulesList !== null &&\n attendeeSchedulesList.length > 0\n ) {\n attendeeSchedulesList.map((item, index) => {\n //if (item.isConfirm === true) {\n // numberOfAttendeesFound++;\n //}\n\n if (item.schedules) {\n let parsedSchedules = JSON.parse(item.schedules);\n if (parsedSchedules) {\n for (let p = 0; p < parsedSchedules.length; p++) {\n if (parsedSchedules[p].date === dateSlot) {\n if (parsedSchedules[p].time) {\n for (let i = 0; i < parsedSchedules[p].time.length; i++) {\n if (parsedSchedules[p].time[i].slotTime === timeSlot) {\n if (item.isConfirm === true || item.isWaiting === true) {\n numberOfConfrimAttendees =\n item.isConfirm == true\n ? numberOfConfrimAttendees + 1\n : numberOfConfrimAttendees;\n numberOfWatingAttendees =\n item.isWaiting == true\n ? numberOfWatingAttendees + 1\n : numberOfWatingAttendees;\n numberOfAttendeesFound++;\n }\n\n //numberOfAttendeesFound++;\n }\n }\n }\n }\n }\n }\n }\n });\n }\n let numberOfAttendeeInfo = \"\";\n if (parseInt(totalSlots) > numberOfConfrimAttendees) {\n numberOfAttendeeInfo = (\n \n {parseInt(totalSlots) - numberOfConfrimAttendees} of{\" \"}\n {parseInt(totalSlots)} slots remaining.\n
\n );\n } else if (\n numberOfAttendeesFound >= parseInt(totalSlots) &&\n numberOfAttendeesFound < parseInt(totalSlots) + parseInt(waitingseats)\n ) {\n if (customTimeSlots) {\n numberOfAttendeeInfo = (\n \n All slots filled, to be added to the waitlist please fill out your\n details.\n
\n );\n } else {\n numberOfAttendeeInfo = (\n All slots filled.
\n );\n }\n } else if (\n parseInt(totalSlots) + parseInt(waitingseats) ===\n numberOfAttendeesFound\n ) {\n numberOfAttendeeInfo = (\n No availability, all slots filled.
\n );\n }\n //let numberOfAttendeeInfo = ({(parseInt(totalSlots) - numberOfAttendeesFound)} of {totalSlots} slots remaining.
);\n return {(parseInt(totalSlots) - numberOfAttendeesFound)} of {totalSlots} slots remaining.
);\n //return (All slots filled.
\n );\n } else {\n numberOfAttendeeInfo = (\n \n {parseInt(totalSlots) - numberOfAttendeesFound} of {totalSlots} slots\n remaining.\n
\n );\n }\n\n return \n {parseInt(totalSlots) - numberOfAttendeesFound} of {totalSlots} slots\n remaining.\n
\n );\n return \n {parseInt(totalSlots) - numberOfConfrimAttendees} slots remaining.\n
\n );\n } else {\n numberOfAttendeeInfo = (\n \n {parseInt(totalSlots) - numberOfConfrimAttendees} slots remaining.\n To RSVP, enter your contact information below and confirm\n attendance.\n
\n );\n }\n } else {\n if (\n currentAttendee !== undefined &&\n currentAttendee.isConfirm === true\n ) {\n numberOfAttendeeInfo = (\n All slots filled
\n );\n } else {\n if (\n numberOfAttendeesFound >= parseInt(totalSlots) &&\n numberOfAttendeesFound <\n parseInt(totalSlots) + parseInt(waitingseats)\n ) {\n numberOfAttendeeInfo = (\n \n All slots filled, to be added to the waitlist please fill out\n your details.\n
\n );\n } else if (\n parseInt(totalSlots) + parseInt(waitingseats) ===\n numberOfAttendeesFound\n ) {\n numberOfAttendeeInfo = (\n \n No availability, all slots filled.\n
\n );\n }\n }\n }\n //let numberOfAttendeeInfo = ({(parseInt(totalSlots) - numberOfAttendeesFound)} of {totalSlots} slots remaining.
);\n return \n \n {item.attendeeName} ({item.attendeeEmail})\n \n \n );\n }\n }\n }\n }\n }\n }\n }\n }\n\n //if (item.isConfirm === true) {\n // objConfirmAttendeeArray.push(\n // \n // {item.attendeeName} ({item.attendeeEmail}) \n //
\n // )\n //}\n });\n }\n let availableSetsCount =\n parseInt(totalSeats) - objConfirmAttendeeArray.length;\n for (let i = 0; i < availableSetsCount; i++) {\n objConfirmAttendeeArray.push(\n \n AVAILABLE \n
\n );\n }\n return objConfirmAttendeeArray;\n };\n\n const getWaitingAttendeesData = (dateSlot, timeSlot, totalSeats) => {\n let count = 0;\n if (totalSeats === undefined || totalSeats === null || totalSeats === \"\") {\n totalSeats = \"0\";\n }\n var objWaitingAttendeeArray = [];\n if (\n attendeeSchedulesList !== undefined &&\n attendeeSchedulesList !== null &&\n attendeeSchedulesList.length > 0\n ) {\n attendeeSchedulesList.map((item, index) => {\n if (item.schedules) {\n let parsedSchedules = JSON.parse(item.schedules);\n if (parsedSchedules) {\n for (let p = 0; p < parsedSchedules.length; p++) {\n if (parsedSchedules[p].date === dateSlot) {\n if (parsedSchedules[p].time) {\n for (let i = 0; i < parsedSchedules[p].time.length; i++) {\n if (parsedSchedules[p].time[i].slotTime === timeSlot) {\n if (item.isWaiting === true) {\n objWaitingAttendeeArray.push(\n \n \n {item.attendeeName} ({item.attendeeEmail})\n \n \n );\n }\n }\n }\n }\n }\n }\n }\n }\n\n //if (item.isWaiting === true) {\n // objWaitingAttendeeArray.push(\n // \n // {item.attendeeName} ({item.attendeeEmail}) \n //
\n // )\n //}\n });\n }\n\n let availableSetsCount =\n parseInt(totalSeats) - objWaitingAttendeeArray.length;\n for (let i = 0; i < availableSetsCount; i++) {\n objWaitingAttendeeArray.push(\n \n AVAILABLE \n
\n );\n }\n\n return objWaitingAttendeeArray;\n };\n\n const open = Boolean(anchorEl);\n\n const id = open ? \"simple-popover\" : undefined;\n\n const getSlots = () => {\n if (!readOnly) {\n if (Array.isArray(customTimeSlots)) {\n customTimeSlots = getSortedTimeSlot(activeDay, customTimeSlots);\n return customTimeSlots;\n }\n\n const range = moment.range(\n `2018-01-01 ${dateRange[0]}`,\n `2018-01-01 ${dateRange[1]}`\n );\n return [...range.by(\"minutes\", { step })].map((m) => {\n let isAvailableSeatsPopOverOpened = false,\n seats = 0,\n waitingseats = 0,\n duration = \"60\",\n durationunit = \"minute\",\n reminder = \"yes\",\n reminderhour = \"24\";\n if (selectedSlots.length > 0) {\n const selectedObj = selectedSlots.find(\n (x) => x.slotTime === m.format(\"HH:mm A\")\n );\n if (selectedObj) {\n isAvailableSeatsPopOverOpened =\n selectedObj.isAvailableSeatsPopOverOpened;\n seats = selectedObj.seats;\n waitingseats = selectedObj.waitingseats;\n duration = selectedObj.duration;\n durationunit = selectedObj.durationunit;\n reminder = selectedObj.reminder;\n reminderhour = selectedObj.reminderhour;\n }\n }\n\n return {\n slotTime: m.format(\"HH:mm A\"),\n isAvailableSeatsPopOverOpened: isAvailableSeatsPopOverOpened,\n seats: seats,\n waitingseats: waitingseats,\n duration: duration,\n durationunit: durationunit,\n reminder: reminder,\n reminderhour: reminderhour,\n };\n });\n } else {\n var hostSchedule = getSchedulesJSON(schedule);\n hostSchedule = hostSchedule.sort(function (a, b) {\n a = new Date(a);\n b = new Date(b);\n if (a > b) return 1;\n if (a < b) return -1;\n return 0;\n });\n\n return hostSchedule;\n }\n };\n\n const getSortedTimeSlot = (date, array) => {\n array = array.sort(function (a, b) {\n let a1 = moment(date + \" \" + a.slotTime, \"MM/DD/YYYY HH:mm A\")._d;\n let b1 = moment(date + \" \" + b.slotTime, \"MM/DD/YYYY HH:mm A\")._d;\n return a1 < b1 ? -1 : a1 > b1 ? 1 : 0;\n });\n return array;\n };\n\n const handleChange = useCallback(\n (slot) => () => {\n CheckWaitingList(activeDay, slot);\n setActiveDate(activeDay);\n if (!multiselect) {\n onChange({ slots: [slot], activeDay, isMulti: multiselect });\n return;\n }\n const isSlotFound =\n selectedSlots.find((x) => x.slotTime === slot.slotTime) !== undefined &&\n selectedSlots.find((x) => x.slotTime === slot.slotTime) !== null\n ? true\n : false;\n\n const slots = isSlotFound\n ? selectedSlots.filter((el) => el.slotTime !== slot.slotTime)\n : [...selectedSlots, { ...slot }];\n onChange({ slots, activeDay, isMulti: multiselect });\n\n setSelectedSlot(\n isSlotFound\n ? { ...selectedSlots.find((x) => x.slotTime === slot.slotTime) }\n : null\n );\n },\n [onChange, selectedSlots, activeDay, multiselect]\n );\n\n const getEmptyMessage = () => {\n if (!readOnly) {\n return (\n !activeDay && (\n \n Select time slots below and then click on the{\" \"}\n
\n //\n
\n Time slots - {!activeDay ? \"No Date Selected\" : activeDay}\n \n {!readOnly && activeDay && !selectedSlots.length && (\n None available
;\n } else if (parseInt(totalSlots) > numberOfWaitingAttendees) {\n numberOfAttendeeInfo = (\n \n {parseInt(totalSlots) - numberOfWaitingAttendees} out of{\" \"}\n {parseInt(totalSlots)} remaining.\n
\n );\n }\n // else if (parseInt(totalSlots) === numberOfWaitingAttendees) {\n // numberOfAttendeeInfo = (All slots filled.
);\n // }\n else {\n numberOfAttendeeInfo = (\n All slots filled.
\n );\n }\n\n return numberOfAttendeeInfo;\n };\n\n const getConfirmSlots = (dateSlot, timeSlot, totalSlots) => {\n let numberOfConfrimAttendees = 0;\n if (\n attendeeSchedulesList !== undefined &&\n attendeeSchedulesList !== null &&\n attendeeSchedulesList.length > 0\n ) {\n attendeeSchedulesList.map((item, index) => {\n if (item.schedules) {\n let parsedSchedules = JSON.parse(item.schedules);\n if (parsedSchedules) {\n for (let p = 0; p < parsedSchedules.length; p++) {\n if (parsedSchedules[p].date === dateSlot) {\n if (parsedSchedules[p].time) {\n for (let i = 0; i < parsedSchedules[p].time.length; i++) {\n if (parsedSchedules[p].time[i].slotTime === timeSlot) {\n if (item.isConfirm === true) {\n numberOfConfrimAttendees =\n item.isConfirm == true\n ? numberOfConfrimAttendees + 1\n : numberOfConfrimAttendees;\n }\n }\n }\n }\n }\n }\n }\n }\n });\n }\n let numberOfAttendeeInfo = \"\";\n if (parseInt(totalSlots) > numberOfConfrimAttendees) {\n numberOfAttendeeInfo = (\n \n {parseInt(totalSlots) - numberOfConfrimAttendees} out{\" \"}\n {parseInt(totalSlots)} slots remaining.\n
\n );\n } else if (parseInt(totalSlots) === numberOfConfrimAttendees) {\n numberOfAttendeeInfo = (\n All slots filled.
\n );\n }\n\n return numberOfAttendeeInfo;\n };\n\n useEffect(() => {\n if (!isAttendeeData && selectedViewAttendeeData !== null) {\n getAttendeeViewData(selectedViewAttendeeData);\n }\n }, [isAttendeeData, selectedViewAttendeeData]);\n\n const getAttendeeViewData = (data) => {\n if (data && data !== undefined && data !== \"\") {\n var html = (\n \n
\n
Confirmed Attendees: \n {getConfirmSlots(\n data.selectedDate.date,\n data.time.slotTime,\n data.time.seats\n )}\n \n\n
\n {getConfirmedAndAvailableAttendeesData(\n data.selectedDate.date,\n data.time.slotTime,\n data.time.seats\n )}\n\n
\n Waitlisted: \n {getWaitlistSlots(\n data.selectedDate.date,\n data.time.slotTime,\n data.time.waitingseats\n )}\n
\n {getWaitingAttendeesData(\n data.selectedDate.date,\n data.time.slotTime,\n data.time.waitingseats\n )}\n
\n
\n {\n //
\n //
Time slots - {!activeDay ? 'No Date Selected' : activeDay} \n // {!readOnly && activeDay && !selectedSlots.length && \n }\n\n {getHourSlotHeader()}\n
\n {!getEmptyMessage() ? (\n <>\n {getSlots().map((el, index) => {\n const isSlotFound =\n selectedSlots.find((x) => x.slotTime === el.slotTime) !==\n undefined &&\n selectedSlots.find((x) => x.slotTime === el.slotTime) !== null\n ? true\n : false;\n const disabled = moment(new Date(), \"MM/DD/YYYY HH:mm A\").isAfter(\n moment(`${activeDay} ${el.slotTime}`, \"MM/DD/YYYY HH:mm A\"),\n \"minute\"\n );\n const className = classNames({\n \"slot-list__item\": true,\n \"slot-list__item--active\": isSlotFound,\n \"slot-list__item--disabled\":\n disabled ||\n (customTimeSlots &&\n getRemainingSlotsCount(\n activeDay,\n el.slotTime,\n el.seats,\n el.waitingseats\n )),\n \"slot-list-full\": isSlotsFull(\n activeDay,\n el.slotTime,\n el.seats,\n el.waitingseats\n ),\n });\n\n return (\n
\n
\n
null\n : handleChange(el)\n }\n className={className}\n >\n {el.slotTime}\n \n {isSlotFound && (\n
\n {el.seats === \"\" ||\n el.seats === 0 ||\n el.seats === \"0\" ? (\n
\n \n {\n handlePopoverClick(e, el);\n }}\n />\n
\n \n ) : (\n !customTimeSlots && (\n
{\n if (!readOnly) {\n handlePopoverClick(e, el);\n }\n }}\n color=\"error\"\n >\n )\n )}\n\n {el.isAvailableSeatsPopOverOpened && (\n \n \n \n \n {eventName} \n \n
\n \n # of attendees \n {\n OnAvailableSeatsInputChange(e, el);\n }}\n />\n
\n\n \n # of waitlisted attendees \n {\n OnAvailableWaitingSlotInputChange(e, el);\n }}\n />\n
\n \n
Event duration \n
{\n OnDurationInputChange(e, el);\n }}\n />\n\n \n \n {\n // \n // Unit\n // \n }\n {\n OnDurationUnitInputChange(e, el);\n }}\n >\n Hours \n \n Minutes\n \n \n \n
\n \n
Reminders \n
\n {\n OnReminderInputChange(e, el);\n }}\n >\n Yes \n No \n \n\n \n {\n OnReminderHourInputChange(e, el);\n }}\n >\n {getReminderHours().map((el, index) => {\n return (\n \n {el} Hours\n \n );\n })}\n \n
\n \n
\n {\n handlePopoverClose(e, el, true);\n }}\n >\n Save\n \n {\n closeDialog(e, el);\n }}\n style={{ \"margin-left\": \"5px\" }}\n >\n Cancel\n \n \n \n \n )}\n
\n )}\n {customTimeSlots && (\n
\n {getRemainingSlots(\n activeDay,\n el.slotTime,\n el.seats,\n el.waitingseats\n )}\n {/*
\n )}\n
\n
{getEmptyMessage()}
\n ) : (\n \n {getSlots() &&\n getSlots().map((el, index) => {\n return (\n
\n \n {el.date}\n \n \n \n \n {getSortedTimeSlot(el.date, el.time).map((item, i) => {\n return (\n
\n \n
\n {getStartTime(item.slotTime) +\n \" - \" +\n getEndTime(el.date, item)}\n
\n
\n
\n \n Attendees:{\" \"}\n {getConfirmSlots(\n el.date,\n item.slotTime,\n item.seats\n )}{\" \"}\n \n
\n
\n \n Waitlist:{\" \"}\n {getWaitlistSlots(\n el.date,\n item.slotTime,\n item.waitingseats\n )}{\" \"}\n \n
\n
\n \n openSettingModal(\n true,\n el,\n item,\n getStartTime(item.slotTime) +\n \" - \" +\n getEndTime(el.date, item)\n )\n }\n >\n SETTINGS\n \n \n openViewAttendeeModal(\n true,\n el,\n item,\n getStartTime(item.slotTime) +\n \" - \" +\n getEndTime(el.date, item)\n )\n }\n >\n VIEW ATTENDEES\n \n \n openRescheduleModalModal(\n true,\n el,\n item,\n getStartTime(item.slotTime) +\n \" - \" +\n getEndTime(el.date, item)\n )\n }\n >\n RESCHEDULE / CANCEL\n \n
\n setIsOpenAtendeeViewModal(false)}\n />\n )}\n\n {readOnly && selectedSlot && (\n setIsSettingViewModal(false)}\n />\n )}\n {readOnly && (\n setIsRescheduleModal(false)}\n eventId={eventId}\n />\n )}\n\n {!customTimeSlots && !readOnly && activeDay && selectedSlots.length > 0 && (\n \n Please click on
\n )}\n\n {\n // readOnly && selectedSlot && !customTimeSlots && (\n //
\n //
Confirmed Attendees: {getConfirmRemainingSlots(activeDay, selectedSlot.slotTime, selectedSlot.seats)}\n // \n //
\n // {getConfirmedAndAvailableAttendeesData(activeDay, selectedSlot.slotTime, selectedSlot.seats)}\n //
Wait-listed: {getWaitingRemainingSlots(activeDay, selectedSlot.slotTime, selectedSlot.waitingseats)}
\n // {getWaitingAttendeesData(activeDay, selectedSlot.slotTime, selectedSlot.waitingseats)}\n //
\n //
\n
Event Description:
\n
\n {specialInstructions}\n
\n {eventLocation && (\n <>\n
Event Location:
\n
\n {eventLocation} \n
\n \n )}\n
\n \n Duration: {getDuration()}s\n \n
\n
\n {\n
{getRemainingAndWaitingSlotsCount()}
\n //getSlots().map((el, index) => {\n // return (\n\n // )\n //})\n }\n
\n
\n
\n\n {\n !readOnly && (\n <>\n
\n \n )\n }\n\n\n
\n\n\n
Event Schedule \n
\n {isHost && isSlotEmpty &&\n
\n \n
\n }\n
\n checkIsEmpty(day, IsCheckInCurrentDay)}\n setActiveDate={(activeDay) => setActiveDate(activeDay)}\n />\n
\n
\n\n {\n readOnly && customTimeSlots && (\n
\n
{EventName}
\n
{EventDate}
\n
\n )\n }\n\n {readOnly &&
\n <>\n {submitSenderer()}\n {contactform}\n \n
\n }\n\n\n\n\n
\n
\n\n {\n // !readOnly && (\n //
Select time slots below and then click on the
\n //)\n }\n\n {//!customTimeSlots && (\n
CheckSlotDetailsFill(e)}\n attendeeId={attendeeId}\n eventId={eventId}\n CheckWaitingList={(day, time) => CheckWaitingList(day, time)}\n setActiveDate={(activeDay) => setActiveDate(activeDay)}\n\n />\n //)\n }\n\n {\n // isBooked && (\n // \n //
toggleCancelModalState(true)} title='Cancel event' />\n // \n //
Event Information:
\n //
{specialInstructions}
\n //
Duration: {getDuration()}
\n\n //
\n\n\n {!readOnly && (
{submitSenderer()}
)}\n\n
\n \n \n \n );\n }\n return (\n {data}
\n }\n return (\n\n !readOnlyOptions ?\n \n {
Invite Attendees }\n
\n { setEmails(e.target.value); setError('') }}\n value={email}\n error={!!error}\n helperText={error}\n disabled={!!readOnlyOptions}\n multiline\n rows=\"1\"\n rowsMax={5}\n \n />\n \n { setEventlocation(e.target.value); }}\n disabled={!!readOnlyOptions && !isUpdateMode}\n />\n {\n //addressFieldsRenderer()\n }\n\n
\n {!readOnlyOptions && (additionalFieldsRenderer())}\n\n {!readOnlyOptions && (\n
\n {warningMessage &&
\n )}\n\n {isEmptySeats && (\n
You have not set the number of attendees. Please set your attendee count for each date, and then click Send Invite.
\n )\n\n }\n \n
\n
\n Event Name: {eventName} \n
\n
Invitee(s): {getEmailSplitedData()}
\n
Event Information: Location: {eventLocation} }\n
\n
\n \n {titleRenderer()}\n \n \n {descriptionRenderer()}\n \n {handleClose && (\n \n \n Close\n \n \n )}\n \n );\n}","import React from 'react';\nimport Dialog from '@material-ui/core/Dialog';\nimport DialogActions from '@material-ui/core/DialogActions';\nimport DialogContent from '@material-ui/core/DialogContent';\nimport DialogContentText from '@material-ui/core/DialogContentText';\nimport DialogTitle from '@material-ui/core/DialogTitle';\nimport Button from '@material-ui/core/Button';\n\nconst ConfirmationPopup = ({\n opened,\n handleClose = () => null,\n handleConfirm = () => null,\n title='',\n description='',\n}) => {\n return (\n \n {title} \n \n \n {description}\n \n \n \n \n Confirm cancelation\n \n \n Discard\n \n \n \n );\n};\n\nexport default ConfirmationPopup;","import React from 'react';\n\nexport default () => (\n \n)","import React from 'react';\nimport Button from '@material-ui/core/Button';\nimport { brown } from '@material-ui/core/colors';\nimport { withStyles } from '@material-ui/core/styles';\nimport Tooltip from '@material-ui/core/Tooltip';\n\nconst ActionButton = withStyles(() => ({\n root: {\n color: brown[50],\n backgroundColor: brown[500],\n '&:hover': {\n backgroundColor: brown[700],\n },\n },\n}))(Button);\n\nexport default ({onClick, title, disableError = '', ...restProps}) => {\n if (disableError) {\n return (\n \n \n null}\n className='action-button'\n disabled\n >\n {title}\n \n \n \n );\n }\n return (\n \n {title}\n \n );\n};","import React from 'react';\nimport TextField from '@material-ui/core/TextField';\nimport NumberFormat from 'react-number-format';\n\nfunction NumberFormatCustom(props) {\n const { inputRef, onChange, ...other } = props;\n return (\n {\n onChange({\n target: {\n value: values.formattedValue,\n },\n });\n }}\n format=\"###-###-####\"\n mask=\"_\"\n />\n );\n}\n\nconst PhoneNumberInput = (props) => {\n return (\n \n
Enter your Contact information \n
\n
\n setName(e.target.value)}\n fullWidth\n margin=\"normal\"\n variant=\"outlined\"\n disabled={disabled}\n error={isRequiredName}\n helperText={(isRequiredName ? \"This field is required\" : \"\")}\n />\n
\n\n\n {isAttendee && (
\n { setAttendeeEmail(e.target.value); }}\n value={email === null ? '':email}\n error={isFormSubmited || isSameEmail}\n\n />\n\n\n {isFormSubmited && Invalid Email Address }\n {isSameEmail && Not allowed to enter same email as of host }\n\n\n
)}\n\n\n\n
\n {\n
setPhone(e.target.value)}\n />\n }\n\n {\n // setPhone(e.target.value)}\n // fullWidth\n // margin=\"normal\"\n // variant=\"outlined\"\n // disabled={disabled}\n ///>\n\n setExtension(e.target.value)}\n fullWidth\n margin=\"normal\"\n variant=\"outlined\"\n disabled={disabled}\n inputProps={{ maxLength: 10 }}\n />\n }\n \n\n\n
\n
\n {title &&
{title} }\n
\n {name &&
\n Name: {name} \n
}\n {phone &&
\n Phone: {phone} \n {extension && (\n <>\n Extn. {extension} \n \n )\n } \n
} \n {email &&
\n Email: {email} \n
}\n
\n
\n {title &&
{title}
}\n
\n {name &&
\n Name: {name} \n
}\n {phone &&
\n <>\n Phone: {phone} \n {extension && (\n <>\n Extn. {extension} \n \n )\n }\n \n
}\n\n {email &&
\n Email: {email} \n
}\n
\n
,\n containerElement:
,\n mapElement:
,\n }),\n withScriptjs,\n withGoogleMap\n)(({\n onMapClick,\n onMarkerClick,\n address\n}) => {\n const defaultCenter = address\n ? {lat: address.lat, lng: address.lng}\n : {lat: 33.7502588, lng: -84.3864037}\n return (\n \n {address &&
,\n containerElement:
,\n }),\n lifecycle({\n componentWillMount() {\n const refs = {}\n\n this.setState({\n places: [],\n onSearchBoxMounted: ref => {\n refs.searchBox = ref;\n },\n onPlacesChanged: () => {\n const places = refs.searchBox.getPlaces();\n this.props.onPlacesChanged(places);\n\n this.setState({\n places,\n });\n },\n })\n },\n }),\n withScriptjs\n)(props =>\n \n \n
\n);\n","import Geocode from \"react-geocode\";\nimport {API_KEY} from './constants'\n\nGeocode.setApiKey(API_KEY);\nGeocode.setLanguage(\"en\");\nGeocode.enableDebug();\n\nconst fromLatLng = async (coordinates, cb) => {\n if (!coordinates) return;\n const {lat, lng} = coordinates;\n try {\n const response = await Geocode.fromLatLng(lat, lng);\n cb(response.results[0].formatted_address);\n } catch(err) {\n console.error(err);\n }\n}\n\nexport {\n Geocode as default,\n fromLatLng\n};","import React, {useState, useEffect} from \"react\"\nimport { makeStyles } from '@material-ui/core/styles';\nimport Button from '@material-ui/core/Button';\nimport Dialog from '@material-ui/core/Dialog';\nimport AppBar from '@material-ui/core/AppBar';\nimport Toolbar from '@material-ui/core/Toolbar';\nimport IconButton from '@material-ui/core/IconButton';\nimport Typography from '@material-ui/core/Typography';\nimport CloseIcon from '@material-ui/icons/Close';\nimport Slide from '@material-ui/core/Slide';\nimport GoogleMap from './GoogleMap';\nimport SearchBox from './SearchBox';\nimport {fromLatLng} from '../../utils/geocode';\n\nconst useStyles = makeStyles(theme => ({\n appBar: {\n position: 'relative',\n },\n title: {\n marginLeft: theme.spacing(2),\n flex: 1,\n },\n}));\n\nconst Transition = React.forwardRef(function Transition(props, ref) {\n return \n
\n
\n {defaultAddressName ? defaultAddressName : 'Address is not specified'}\n
\n
\n \n {readOnly ? 'View address' : 'Set address'}\n \n
\n
\n\n
\n \n \n \n \n \n {readOnly ? 'Address preview' : 'Select address'}\n \n {!readOnly && (\n \n save\n \n )}\n \n \n\n {!readOnly && \n
dispatch(setAddress(data))}\n // defaultAddress={address}\n // disabled={(!isUpdateMode && receiver) && !isBooked}\n // readOnly={isBooked}\n ///>\n \n {!buyerSchedules && !isBooked && (\n
\n );\n };\n\n const AddressFormRenderer = () => {\n return (\n\n dispatch(setAddress(data))}\n defaultAddress={address}\n disabled={(!isUpdateMode && receiver) && !isBooked}\n readOnly={isBooked}\n />\n\n\n\n );\n };\n\n\n const renderSubmitForm = () => {\n let inactiveMessage = '';\n //if (!address) {\n // inactiveMessage = 'Please select an address';\n //}\n var clonedSchedule = getSchedulesJSON(schedule);\n var valid = CheckEmptySeatValidation();\n if (!hasSomeSlots) {\n inactiveMessage = 'Please select your available hours';\n }\n //if (sellerName === \"\" || sellerName === null) {\n // inactiveMessage = 'Please fill other required fields.';\n //}\n //if (hasSomeSlots && IsCheckSlotDetailsFill === false) {\n // inactiveMessage = 'Please fill selected slot details';\n //}\n return (\n onValidateControls(name, value)}\n isEmptySeats={isEmptySeats}\n sellerEmail={sellerEmail}\n />\n );\n }\n\n const getContactForm = () => { \n return ( \n \n {buyerSchedules && (\n
\n )}\n {isUpdateMode && (\n
\n )}\n
toggleCancelModalState(true)} title='Cancel event' />\n \n Scheduled Date/Time\n \n );\n }\n if (buyerSchedules) {\n return (\n \n Confirm proposed Date/Time or cancel event\n \n );\n }\n\n\n if ((!isUpdateMode && receiver)) {\n return (\n \n View Schedule\n \n );\n }\n\n return isUpdateMode\n ? 'Updating an Event'\n : 'Create Schedule';\n }\n\n if (pending) {\n return \n {isBooked && (\n
{eventName} event was successfully scheduled\n }\n />\n )}\n \n {isUpdateMode && (\n <>\n
{eventName} \n \n )\n }\n\n {!isUpdateMode && receiver && (\n <>\n\n {eventName} \n \n )\n }\n\n {renderPageActions()}\n \n\n {\n // !isUpdateMode && receiver && (\n // \n // Event Name: {eventName} \n //
\n //)\n }\n\n {\n //!isReadOnlyMode() && Specify the date of your event. \n }\n\n CheckSlotDetailsFill(e)}\n contactform={getContactForm()}\n eventId={eventId}\n CheckWaitingList={(day, time) => CheckWaitingList(day, time)}\n isHost={true}\n />\n\n {isBooked && (\n \n
toggleCancelModalState(true)} title='Cancel event' />\n \n {\n //Notification was sent to {receiver} on {moment(moment.utc(sentAt).toDate()).local().format('MM/DD/YYYY HH:mm A')} with event details.\n }\n\n Notification was sent to your attendees on {moment(moment.utc(sentAt).toDate()).local().format('MM/DD/YYYY')} at {moment(moment.utc(sentAt).toDate()).local().format('HH:mm a')} with event details. \n\n {\n // !isUpdateMode && (\n // \n // & nbsp;If you wish to change availability schedule or cancel the event, \n // handleChange(true)} className='changer-link' href='#'>click here .\n // \n // )\n }\n \n )}\n />\n )}\n\n {isBooked && (\n \n Email Notification with {eventName} event details was sent to {sellerEmail} on {moment(moment.utc(bookedAt).toDate()).local().format('MM/DD/YYYY HH:mm A')}.\n \n )}\n />\n )}\n\n (\n \n {receiver} will receive email notification.\n
\n )}\n isOpened={isCancelMessageVisible}\n />\n\n\n (\n \n {//receiver} \n //will receive email notification.\n }\n Your attendees will receive email notification. \n\n
\n )}\n isOpened={isModalVisible}\n handleClose={() => {\n handleChange(false);\n dispatch({ type: actionConstants.HIDE_SCHEDULE_CREATION_SUCCESS_MESSAGE })\n }}\n />\n\n toggleCancelModalState(false)}\n opened={cancelOpened}\n />\n \n {setEmail(e.target.value); setErrors({...errors, email: null})}}\n value={email}\n error={!!errors.email}\n helperText={errors.email}\n />\n\n {setEventName(e.target.value); setErrors({...errors, eventName: null})}}\n error={!!errors.eventName}\n helperText={errors.eventName}\n />\n\n \n Send\n \n \n );\n}\n\nexport default Form;","import axios from 'axios';\nimport {EVENT} from '../../url_constants';\n\nexport default {\n createCalendar(data = {}) {\n return axios({\n method: 'POST',\n url: EVENT,\n data\n });\n },\n}","import React from 'react';\nimport Form from '../../components/Form/index';\nimport {useDispatch, useSelector} from 'react-redux';\nimport {createCalendar} from '../../services/create_calendar/actions';\nimport DateRangeIcon from '@material-ui/icons/DateRange';\nimport {SuccessMessage, InfoMessage} from './../../components/Messages/index';\nimport moment from 'moment';\n\nconst CreateCalendar = () => {\n const dispatch = useDispatch();\n const creationData = useSelector(state => state.calendarCreationData);\n const {name, sellerEmail, sentAt} = creationData || {};\n const handleSubmit = (data) => {\n dispatch(createCalendar(data));\n };\n return (\n \n
\n {\n //
Welcome – Start Scheduling an Event \n }\n \n {name} \n event successfully created. Check your email for the link to schedule this event.\n \n )}\n />\n )}\n \n {sentAt && (\n
\n \n Notification sent to {sellerEmail} on {moment(sentAt).format('MM/DD/YYYY HH:mm A')}.\n \n )}\n logger\n />\n
\n )}\n
\n
\n {warningMessage &&
}\n {\n //
\n
\n
\n }\n
\n
{ setAttendeeEmail(e); setIsFormSubmited(false)}}\n isAttendee={(sellerEmail !== undefined && sellerEmail !== null && sellerEmail !== \"\") ? true : false}\n isFormSubmited={isFormSubmited}\n extension={hostPhoneExtension}\n isSameEmail={isSameEmail}\n setExtension={onChange('hostPhoneExtension')}\n />\n );\n };\n \n const handleFormSubmited = (isFormSubmited) => {\n setIsFormSubmited(isFormSubmited)\n }\n const handleSameEmail = (isSameEmail) => {\n setIsSameEmail(isSameEmail)\n }\n const renderSubmitForm = () => {\n var isAllow = IsAllow(true);\n //!buyerSchedules && isAllow\n \n return isAllow && (\n\n <>\n {contactFormRenderer()}\n \n {!AllConfiremSlotCount(true) && (\n \n
{\n dispatch(setTimeProposalMode(true))\n dispatch({ type: schedulerConstants.RESET_SCHEDULER_STATE })\n }}\n title='Propose New Time'\n />\n \n // Email Notification with {eventName} event details was sent to {buyerEmail}.\n // \n // )}\n // />\n // );\n //}\n //Email Notification with {eventName} event details was sent to {buyerEmail}. on {moment(moment.utc(bookedAt).toDate()).local().format('MM/DD/YYYY HH:mm A')}.\n return buyerSchedules && (\n \n Email Notification with {eventName} event details was sent to {buyerEmail}.\n \n )}\n />\n );\n }\n\n if (pending) {\n return {eventName} Event was successfully scheduled \n return Welcome back, {currentAttendee !== undefined ? currentAttendee.attendeeName : \"\"} \n }\n return isTimeProposal\n ? 'Propose Event Date/Time'\n : `${buyerSchedules ? 'Proposed Event Date/Time' : 'Confirm Participation'}`\n };\n\n const IsConfirmAttendee = () => {\n var IsConfirm = false;\n var currentAttendee = getCurrentAttendeeByEmail(submitedAttendeeEmail);\n\n if (currentAttendee !== undefined && currentAttendee.isConfirm) {\n IsConfirm = true;\n \n }\n\n return IsConfirm;\n }\n return (\n \n {buyerSchedules && !isBooked && (\n
{eventName} Event proposed Date/Time was successfully sent\n }\n />\n )}\n \n {isBooked && (getTitle())\n }\n {\n !isBooked && (\n
{eventName} Event */}\n {/*renderPageActions()*/}\n \n {\n\n CheckWaitingList(day, time)}\n isHost={false}\n />\n }\n\n {\n isBooked && !IsAllow(false) && (\n \n
toggleCancelModalState(true)} title='CANCEL MY ATTENDANCE' />\n \n
\n\n\n {address && (\n <>\n
Event address: \n
\n \n )}\n {!getRemainingAndWaitingSlotsCount() && specialInstructions && (\n <>\n {\n //
Event Instructions: \n //
{specialInstructions}
\n }\n {\n\n
\n //
Event Instructions:
\n //
{specialInstructions}
\n }\n \n )}\n \n
\n
\n
(\n \n You have already confirmed your participation.\n
\n )}\n isOpened={isAttendeeExistsModel}\n handleClose={() => {\n handleChange(false);\n }}\n />\n\n (\n \n Selected slot has been full.\n
\n )}\n isOpened={isSloatFullModel}\n handleClose={() => {\n handleFullSlotChange(false);\n }}\n />\n\n (\n //\n //
\n // )\n\n )}\n isOpened={isModalOpened}\n handleClose={() => dispatch(toggleSuccessMessage(false))}\n />\n\n toggleCancelModalState(false)}\n opened={cancelOpened}\n />\n \n {isAttendeeCancel && (\n
\n\n
\n
500 \n
Sorry, Unexpected error.
\n
Please contact to administrator or try again.
\n {\n //
:(
\n //
Let me try again!
\n //There is some issue while send email. Please try again.\n }\n
\n
\n );\n}\n\nexport default withRouter(Redirect)","import React, { useEffect, useState } from 'react';\nimport { useSelector, useDispatch } from 'react-redux';\nimport PagePreloader from '../../components/PagePreloader/index';\nimport { getPickupData, sendPickupData, setTimeProposalMode, proposeNewTime, toggleSuccessMessage } from '../../services/pickup_slot/actions';\nimport { cancelSchedule } from '../../services/create_schedule/actions';\nimport ConfirmationPopup from '../../components/ConfirmationPopup/index';\n\nconst CancelAttendee = (props) => {\n const eventId = props.match.params.guid;\n const attendeeId = props.match.params.attendeeId\n const [cancelOpened, toggleCancelModalState] = useState(true);\n const {\n pending,\n } = useSelector(state => state.slotPickupData)\n\n const dispatch = useDispatch();\n\n useEffect(() => {\n //handleCancel();\n }, [eventId, attendeeId, dispatch]);\n\n const handleCancel = () => {\n cancelSchedule({ eventId, attendeeId })(dispatch);\n };\n //handleCancel();\n\n if (pending) {\n return \n toggleCancelModalState(false)}\n opened={cancelOpened}\n />\n\n
\n )\n}\n\nexport default CancelAttendee;","import React from 'react';\nimport { Route, Switch, BrowserRouter, Redirect } from 'react-router-dom';\nimport { Provider } from 'react-redux';\nimport Header from './components/Header/index';\nimport Loader from './components/Loader/index';\nimport store from './store';\nimport CreateSchedule from './pages/CreateSchedule/index';\nimport CreateCalendar from '../src/pages/CreateCalendar/index';\nimport PickupSlot from '../src/pages/PickupSlot/index';\nimport FinalPage from '../src/pages/FinalPage/index';\nimport Error from '../src/pages/Error/index';\nimport RedirectHandler from '../src/components/RedirectHandler/index';\nimport CancelAttendee from '../src/pages/CancelAttendee/index';\n// These must be the first lines in src/index.js\nimport 'react-app-polyfill/ie11';\nimport 'react-app-polyfill/stable';\n\nconst CREATE_CALENDAR = '/Create-Event';\nconst CREATE_SCHEDULE = '/host/:guid';\nconst ATTENDEE_SLOT = '/attendee/:guid';\nconst CONFIRM_ATTENDEE_SLOT = '/attendee/:guid/:attendeeId';\nconst CANCEL_ATTENDEE_SLOT = '/cancel/attendee/:guid/:attendeeId';\nconst FINAL = '/final';\nconst ERROR = '/error';\n\nconst Root = () => {\n return (\n \n \n \n \n \n \n \n \n \n );\n};\n\nexport default Root;","// This optional code is used to register a service worker.\n// register() is not called by default.\n\n// This lets the app load faster on subsequent visits in production, and gives\n// it offline capabilities. However, it also means that developers (and users)\n// will only see deployed updates on subsequent visits to a page, after all the\n// existing tabs open on the page have been closed, since previously cached\n// resources are updated in the background.\n\n// To learn more about the benefits of this model and instructions on how to\n// opt-in, read https://bit.ly/CRA-PWA\n\nconst isLocalhost = Boolean(\n window.location.hostname === 'localhost' ||\n // [::1] is the IPv6 localhost address.\n window.location.hostname === '[::1]' ||\n // 127.0.0.1/8 is considered localhost for IPv4.\n window.location.hostname.match(\n /^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/\n )\n);\n\nexport function register(config) {\n if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {\n // The URL constructor is available in all browsers that support SW.\n const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);\n if (publicUrl.origin !== window.location.origin) {\n // Our service worker won't work if PUBLIC_URL is on a different origin\n // from what our page is served on. This might happen if a CDN is used to\n // serve assets; see https://github.com/facebook/create-react-app/issues/2374\n return;\n }\n\n window.addEventListener('load', () => {\n const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;\n\n if (isLocalhost) {\n // This is running on localhost. Let's check if a service worker still exists or not.\n checkValidServiceWorker(swUrl, config);\n\n // Add some additional logging to localhost, pointing developers to the\n // service worker/PWA documentation.\n navigator.serviceWorker.ready.then(() => {\n console.log(\n 'This web app is being served cache-first by a service ' +\n 'worker. To learn more, visit https://bit.ly/CRA-PWA'\n );\n });\n } else {\n // Is not localhost. Just register service worker\n registerValidSW(swUrl, config);\n }\n });\n }\n}\n\nfunction registerValidSW(swUrl, config) {\n navigator.serviceWorker\n .register(swUrl)\n .then(registration => {\n registration.onupdatefound = () => {\n const installingWorker = registration.installing;\n if (installingWorker == null) {\n return;\n }\n installingWorker.onstatechange = () => {\n if (installingWorker.state === 'installed') {\n if (navigator.serviceWorker.controller) {\n // At this point, the updated precached content has been fetched,\n // but the previous service worker will still serve the older\n // content until all client tabs are closed.\n console.log(\n 'New content is available and will be used when all ' +\n 'tabs for this page are closed. See https://bit.ly/CRA-PWA.'\n );\n\n // Execute callback\n if (config && config.onUpdate) {\n config.onUpdate(registration);\n }\n } else {\n // At this point, everything has been precached.\n // It's the perfect time to display a\n // \"Content is cached for offline use.\" message.\n console.log('Content is cached for offline use.');\n\n // Execute callback\n if (config && config.onSuccess) {\n config.onSuccess(registration);\n }\n }\n }\n };\n };\n })\n .catch(error => {\n console.error('Error during service worker registration:', error);\n });\n}\n\nfunction checkValidServiceWorker(swUrl, config) {\n // Check if the service worker can be found. If it can't reload the page.\n fetch(swUrl)\n .then(response => {\n // Ensure service worker exists, and that we really are getting a JS file.\n const contentType = response.headers.get('content-type');\n if (\n response.status === 404 ||\n (contentType != null && contentType.indexOf('javascript') === -1)\n ) {\n // No service worker found. Probably a different app. Reload the page.\n navigator.serviceWorker.ready.then(registration => {\n registration.unregister().then(() => {\n window.location.reload();\n });\n });\n } else {\n // Service worker found. Proceed as normal.\n registerValidSW(swUrl, config);\n }\n })\n .catch(() => {\n console.log(\n 'No internet connection found. App is running in offline mode.'\n );\n });\n}\n\nexport function unregister() {\n if ('serviceWorker' in navigator) {\n navigator.serviceWorker.ready.then(registration => {\n registration.unregister();\n });\n }\n}\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport './styles/index.scss';\nimport App from './root';\nimport * as serviceWorker from './serviceWorker';\n\n\nReactDOM.render(