\n handleReaction(e, '🔥')}>\n 🔥\n \n handleReaction(e, '👍')}>\n 👍\n \n handleReaction(e, '🥳')}>\n 🥳\n \n handleReaction(e, '💓')}>\n 💓\n \n handleReaction(e, '🎉')}\n >\n 🎉\n \n
\n ) : (\n \n setSelectReaction(true)}\n >\n Send Reaction\n \n 🔥\n 🥳\n 👍\n 💓\n 🎉\n \n \n
\n );\n}\n","export const saveReaction = async (reaction, guestId, eventId) => {\n const url = `/ajax/guests/${eventId}/reaction`;\n const token = window.evite.cookie('csrftoken');\n\n const headers = {\n 'X-CSRFToken': token,\n accept: 'application/json',\n 'Content-Type': 'application/json',\n };\n\n const response = await fetch(url, {\n method: 'POST',\n credentials: 'include',\n headers,\n body: JSON.stringify({\n guest_id: guestId,\n reaction,\n }),\n });\n\n if (!response.ok) {\n throw new Error('Error persisting reaction');\n }\n\n return response.json();\n};\n","import {smallAndUp} from '~sass/pb_styleguide/base/_exports.sass';\n\nexport const useEmojiBurstAnimation = (rsvpDrawer) => {\n const animMatrix = [\n {x: -80, y: -270, ang: -15, scale: 1.3},\n {x: -105, y: -160, ang: -20, scale: 0.8},\n {x: -57, y: -70, ang: -15, scale: 1},\n {x: -3, y: -325, ang: 3, scale: 1.2},\n {x: 30, y: -204, ang: -2, scale: 1.3},\n {x: -30, y: -154, ang: 5, scale: 1},\n {x: 5, y: -23, ang: 3, scale: 1},\n {x: 80, y: -270, ang: 15, scale: 0.8},\n {x: 105, y: -160, ang: 19, scale: 1.2},\n {x: 47, y: -76, ang: 15, scale: 1.3},\n ];\n\n const animate = (event, reaction) =>\n new Promise((resolve) => {\n const {matches: largeScreens} = window.matchMedia(`(min-width: ${smallAndUp})`);\n const leftReference = largeScreens ? event.target : document.getElementById('emoji-party');\n const left = leftReference.getBoundingClientRect().left + 25;\n const top = event.clientY - 32;\n\n // Create 10 emojis and then give them new css values to animate to\n for (let i = 0; i < 10; i++) {\n const newElement = document.createElement('div');\n newElement.style.cssText = `\n left: ${left}px;\n top: ${top}px;\n transform: rotate(${animMatrix[i].ang}deg) scale(${animMatrix[i].scale})\n `;\n newElement.innerHTML = reaction;\n newElement.id = `emoji-anim-${i}`;\n document.body.appendChild(newElement);\n window.setTimeout(() => {\n const el = document.getElementById(`emoji-anim-${i}`);\n el.style.left = `${left + animMatrix[i].x}px`;\n el.style.top = `${top + animMatrix[i].y}px`;\n el.style.opacity = 0;\n }, 50);\n }\n\n if (rsvpDrawer?.current) {\n rsvpDrawer.current.style.transition = 'all 1.5s';\n rsvpDrawer.current.classList.remove('open');\n }\n\n // Remove emojis from body\n window.setTimeout(() => {\n for (let i = 0; i < 10; i++) {\n document.getElementById(`emoji-anim-${i}`).remove();\n }\n resolve();\n }, 3100);\n });\n\n return {animate};\n};\n","import React from 'react';\nimport {useHistory, useLocation} from 'react-router';\nimport {toastAlert} from '~/common/_pb_components/atoms/Toast';\nimport {PB_AlertLine} from '~/common/svg/PB_AlertLine';\nimport {saveReaction} from './api/guest';\n\nexport const useRecipientReaction = (eventId, eviteType, guestId, saveReactionCallback) => {\n const location = useLocation();\n const history = useHistory();\n const params = new URLSearchParams(location.search);\n\n const submit = async (reaction) => {\n let url = '';\n\n // If no guest id, don't save anything\n if (!guestId) {\n url = `/frp/rsvp`;\n params.append('reaction', reaction);\n\n history.replace({pathname: url, search: params.toString()}, location.state);\n return;\n }\n\n params.append('reaction', reaction);\n\n if (eviteType === 'card') {\n url = '/success'; // Greeting card reaction confirmation page\n } else if (eviteType === 'event') {\n url = `/frp/rsvp`; // Event reaction confirmation page\n params.append('gid', guestId);\n }\n\n try {\n const data = await saveReaction(reaction, guestId, eventId);\n saveReactionCallback(data);\n\n if (!url) {\n throw new Error('Unknown evite type');\n }\n\n history.replace({pathname: url, search: params.toString()}, location.state);\n } catch (err) {\n toastAlert('Error reacting to card', {\n type: 'error',\n icon: \n \n {avatar?.url ? (\n \n {initials}\n \n )}\n \n
\n );\n}\n\nAvatar.defaultProps = {\n name: '',\n};\n","import React from 'react';\nimport {InvitationLink} from './InvitationLink';\nimport {ArrowIconReinvention} from '~/common/svg/ArrowReinvention';\n\nexport function BackLink(props) {\n const {to, className, dataQaId, children} = props;\n return (\n {padNumber(this.state.days, 2)}
\n {padNumber(this.state.hours, 2)}
\n {padNumber(this.state.minutes, 2)}
\n {padNumber(this.state.seconds, 2)}
\n \n );\n return;\n }\n if (this.props.countdown.date_format === 'separate')\n return (\n \n
\n );\n }\n}\n","import {Button} from '~/common/_pb_components/atoms/Button';\nimport {Typography} from '~/common/_pb_components/atoms/Typography';\nimport {CloseXButton} from '~/common/_pb_components/atoms/CloseXButton';\n\nexport function GuestRsvpActions(props) {\n const {\n hasRsvpd,\n setUpdatingRsvp,\n setWipRsvpStatus,\n setRsvpOverlayOpen,\n setShowSwirl,\n isPremium,\n origin,\n } = props;\n const onShowSwirl = () => {\n setShowSwirl(true);\n };\n return (\n {padNumber(this.state.days, 2)}
\n {padNumber(this.state.hours, 2)}
\n {padNumber(this.state.minutes, 2)}
\n {padNumber(this.state.seconds, 2)}
\n \n \n Will you be attending?\n \n setUpdatingRsvp(false)}\n >\n Cancel\n \n )}\n
\n );\n}\n","import React from 'react';\n\nexport function Heading(props) {\n const {className, value, dataQaId} = props;\n return (\n \n {\n setWipRsvpStatus('Yes');\n setRsvpOverlayOpen(true);\n }}\n >\n Yes\n \n {!isPremium && origin !== 21 && (\n {\n setWipRsvpStatus('Maybe');\n setRsvpOverlayOpen(true);\n }}\n >\n Maybe\n \n )}\n {\n setWipRsvpStatus('No');\n setRsvpOverlayOpen(true);\n }}\n >\n No\n \n
\n {hasRsvpd && (\n \n {value}\n
\n );\n}\n","import React from 'react';\nimport {shallowEqual, useSelector, useStore} from 'react-redux';\nimport {Avatar} from '~/ViewInvitation/common/Avatar/Avatar';\nimport {LikeButton} from '~/ViewInvitation/routes/Guests/LikeButton';\nimport {deletePost} from '~/ViewInvitation/reducers/apiActions';\nimport {selectPost} from '~/ViewInvitation/reducers/posts';\nimport {TimeSince} from '~/ViewInvitation/common/TimeSince';\n\nexport function InlineComment(props) {\n const {\n className,\n commentId,\n showCount,\n dataQaIdModifier,\n handleSetEditing = null,\n showEditIfAllowed = true,\n } = props;\n const isParentPost = false;\n const store = useStore();\n\n const post = useSelector(selectPost(commentId), shallowEqual);\n if (!post) return null;\n\n const userIdFromStore = useSelector((s) => s.user.userId);\n\n const hasRSVPd = useSelector((state) => state.rsvp?.hasRsvpd ?? false);\n\n const whenPosted = post.when.replace(/-/g, '').replace(/:/g, '');\n const comment = post.comment || '';\n const canUserEdit = comment && post.userId === userIdFromStore; // RSVP comments can't be edited here\n const showIconRow = hasRSVPd;\n const commenterName = post.guestName;\n const {userId} = post;\n\n const {likedBy} = post;\n const likeCount = likedBy.length || Object.keys(likedBy).length;\n\n const handleEditClick = () => {\n handleSetEditing(commentId);\n };\n\n const handleDelete = () => {\n handleSetEditing(null);\n store.dispatch(deletePost(commentId));\n };\n\n const formattedComment = () => {\n try {\n return decodeURIComponent(comment);\n } catch (e) {\n return comment;\n }\n };\n\n return (\n\n
\n );\n}\n","import React from 'react';\nimport {Link, useLocation} from 'react-router-dom';\n\n// returns a Link, but preserves the query string (so guest id and UTM query string params are preserved)\nexport function InvitationLink(props) {\n const newProps = {\n ...props,\n };\n const location = useLocation();\n if (typeof newProps.to === 'string') newProps.to = {pathname: newProps.to};\n newProps.to.search = newProps.to.search || location.search;\n return ;\n}\n","import React from 'react';\nimport {Typography} from '~/common/_pb_components/atoms/Typography';\n\nexport function Label(props) {\n return (\n \n \n
\n \n
\n \n {commenterName}\n {comment}\n
\n {whenPosted &&
\n {showIconRow && (\n
\n )}\n \n
\n )}\n - \n {!!title &&
- {title} }\n {!!message &&
- {message} }\n {optionsList.map((item) => (\n
- \n
- \n Cancel\n \n
\n {showDontShowAgain && (\n dismissModal(365)}\n >\n Don't show again\n \n )}\n {showRemindMeLater && (\n \n dismissModal(\n evite.features.GHM_TIMEOUT ? parseFloat(evite.features.GHM_TIMEOUT) : 1\n )\n }\n >\n Remind me later\n \n )}\n
\n )}\n \n );\n}\n","import React from 'react';\nimport ReactModal from 'react-modal';\nimport './Modal.sass';\n\nconst defaultModalProps = {\n isOpen: true,\n className: 'EviteModal__Content',\n overlayClassName: 'EviteModal__Overlay',\n closeTimeoutMS: 200,\n};\n\nReactModal.setAppElement('#modalRoot');\n\nexport function Modal(props) {\n if (!props.onClose) console.log('Missing required onClose prop for Modal');\n const combinedProps = {\n ...defaultModalProps,\n ...props,\n };\n return \n
\n \n \n );\n}\n\nPollChoiceOverlay.propTypes = {\n open: PropTypes.bool,\n onClose: PropTypes.func,\n choice: PropTypes.string,\n};\n","let _ROKT_PRELOADED = false;\n\nexport const preloadROKT = () => {\n // loads the rokt script and precache-iframe.\n if (_ROKT_PRELOADED) return;\n _ROKT_PRELOADED = true;\n\n (function (r, o, k, t, n, e, w, a, _) {\n r._ROKT_ = n;\n r[n] = r[n] || {\n id: t,\n h: w,\n lc: [],\n it: new Date(),\n onLoaded(c) {\n r[n].lc.push(c);\n },\n };\n a = o.createElement('script');\n a.type = 'text/javascript';\n a.async = !0;\n a.src = k;\n if (e) {\n a.integrity = e;\n a.crossOrigin = 'anonymous';\n }\n _ = o.getElementsByTagName('script')[0];\n _.parentNode.insertBefore(a, _);\n })(\n window,\n document,\n 'https://apps.rokt.com/wsdk/integrations/snippet.js',\n '2835341786096105351_cd615db4e85f48379cb3eba27c24f750',\n 'rokt'\n );\n rokt.onLoaded((rokt) => {\n rokt.init({skipInitialSelection: true});\n\n rokt.onFailure((reason) => {\n console.error('Rokt failed to load', reason);\n });\n });\n\n const iframe = document.createElement('iframe');\n iframe['aria-hidden'] = true;\n iframe.src = 'https://apps.rokt.com/wsdk/preload/index.html';\n iframe['allow-same-origin'] = true;\n iframe.style = 'border: 0px; width: 100%; display: none;';\n document.body.appendChild(iframe);\n};\n\nexport const triggerROKTOverlay = (pageIdentifier, attributes, clientData) => {\n preloadROKT(); // Just in case... the preload should have been called before the trigger.\n if (!window.rokt) {\n console.error('Rokt library does not exist');\n return;\n }\n window.rokt.onLoaded((rokt) => {\n const cd = clientData || window.client_data;\n rokt.setAttributes({\n // Recommended\n emailmd5: attributes.emailMd5,\n emailsha256: attributes.emailSha256,\n gender: cd.user_gender,\n zipcode: cd.user_zip_code,\n city: cd.geo_city, // user city, as opposed to event city\n state: cd.geo_region,\n country: cd.geo_country,\n // Miscellaneous\n conversiontype: cd.event_type,\n clientcustomerid: attributes.userId,\n eventid: cd.event_id,\n eventcity: cd.event_city,\n eventstate: cd.event_state,\n eventzipcode: cd.event_zip,\n eventdate: cd.event_day ? cd.event_day.replace(/-/g, '') : null,\n distance: cd.event_guest_distance,\n userstatus: cd.event_step, // H or G for host or guest\n daysaway: cd.event_days_until,\n sandbox: window.roktSandbox,\n });\n rokt.onPositiveEngagement(() => {\n rokt.setAttributes({\n email: attributes.email,\n });\n });\n rokt.triggerPageChange({\n pageIdentifier: (window.roktSandbox ? 'staging-' : '') + pageIdentifier,\n });\n });\n};\n\nexport const cleanupROKTOverlay = () => {\n // Close any ROKT overlays\n window.rokt &&\n window.rokt.onLoaded((rokt) => {\n rokt.closeAll();\n });\n};\n","import {useState, useEffect} from 'react';\nimport {useSelector} from 'react-redux';\nimport {useHistory, useLocation} from 'react-router-dom';\nimport PropTypes from 'prop-types';\nimport {Counter} from '~/common/_pb_components/atoms/Counter';\nimport {Divider} from '~/common/_pb_components/atoms/Divider';\nimport {Typography} from '~/common/_pb_components/atoms/Typography';\nimport {PB_AlertLine} from '~/common/svg/PB_AlertLine';\nimport {PB_CloseLine} from '~/common/svg/PB_CloseLine';\nimport {useMatchQuery} from '~/common/hooks/useMatchQuery';\nimport {Input} from '~/common/_pb_components/atoms/Input';\nimport {Checkbox} from '~/common/_pb_components/atoms/Checkbox';\nimport {Button} from '~/common/_pb_components/atoms/Button';\nimport {toastAlert} from '~/common/_pb_components/atoms/Toast';\nimport {isSaveTheDateByUsedAs} from '~/common/utils/event_utils';\nimport {validateEmail} from '../utils/validateEmail';\nimport {largishAndUp} from '~sass/pb_styleguide/base/_exports.sass';\n\nexport function RSVPModal(props) {\n const history = useHistory();\n const location = useLocation();\n\n const {matches: largeScreens} = useMatchQuery(`(min-width: ${largishAndUp})`);\n const {\n notifications: notificationOptions,\n isSMSInvite,\n guestEmail,\n showNotifyMarketing,\n name,\n rsvpdAdults,\n rsvpdKids,\n rsvpdOptin,\n rsvpdOutout,\n hasRsvpd,\n } = useSelector((state) => ({\n ...state.rsvp,\n isSMSInvite: state.rsvp?.inviteMethod === 'sms',\n guestEmail: state.rsvp?.guestEmail ?? '',\n showNotifyMarketing: state.rsvp?.showNotifyMarketing ?? true,\n name: state.rsvp?.name ?? state.user?.name ?? '',\n rsvpdAdults: state.rsvp?.totalAdults ?? 0,\n rsvpdKids: state.rsvp?.totalKids ?? 0,\n rsvpdOptin: state.rsvp?.optin ?? false,\n rsvpdOutout: state.rsvp?.optout ?? false,\n hasRsvpd: state.rsvp?.hasRsvpd ?? false,\n }));\n const guest_id = useSelector((state) => state.user?.guestId ?? '');\n const {allowKids, maxAdditionalGuests, allowGuestsToBringMoreGuests, allowGuestsToInviteMore} =\n useSelector((state) => ({\n allowKids: !!state.eventDetails.allowKids,\n maxAdditionalGuests: state.eventDetails.maxGuests,\n allowGuestsToBringMoreGuests: state.eventDetails?.allowGuests ?? false,\n allowGuestsToInviteMore: state.eventDetails?.allowInviteMore ?? false,\n }));\n const allowGuestsToInvite = useSelector(\n (state) => !!allowGuestsToInviteMore && !!maxAdditionalGuests && !state.rsvp.guestOf\n );\n\n const isPrivateGuestlist = useSelector(\n (state) => state?.whoIsComing?.isPrivateGuestlist ?? false\n );\n const usedAs = useSelector((state) => state.eventDetails?.usedAs);\n const isSaveTheDate = isSaveTheDateByUsedAs(usedAs);\n\n const notificationsSubscribed =\n !!notificationOptions.push_new_comments ||\n !!notificationOptions.push_new_rsvp ||\n !!notificationOptions.email_new_comments ||\n !!notificationOptions.notify_only_my_activity;\n\n const [replyAsName, setReplyAsName] = useState('');\n const [replyAsEmail, setReplyAsEmail] = useState();\n const [rsvpComment, setRsvpComment] = useState('');\n const [eventNotifications, setEventNotifications] = useState(notificationsSubscribed);\n const [marketingNotifications, setMarketingNotifications] = useState(true);\n const [notifyGuestRSVPs, setNotifyGuestRSVPs] = useState(notificationOptions.email_new_rsvp);\n const [editOn, setEditOn] = useState(false);\n const [notYou, setNotYou] = useState(false);\n const [forceRSVPForm, setForceRSVPForm] = useState(false);\n\n const [numAdults, setNumAdults] = useState(1);\n const [numKids, setNumKids] = useState(0);\n\n const [rsvpDone, setRsvpDone] = useState(false);\n\n useEffect(() => {\n if (rsvpDone) {\n history.replace(`/frp/rsvp?gid=${window.guest_id}`, location.state);\n }\n }, [rsvpDone]);\n\n useEffect(() => {\n const notificationsSubscribed =\n !!notificationOptions.push_new_comments ||\n !!notificationOptions.push_new_rsvp ||\n !!notificationOptions.email_new_comments ||\n !!notificationOptions.notify_only_my_activity;\n\n setReplyAsName(name);\n setReplyAsEmail(guestEmail);\n if (!guestEmail || !name) setForceRSVPForm(true);\n\n setNumAdults(rsvpdAdults);\n setNumKids(rsvpdKids);\n setEventNotifications(!hasRsvpd ? true : notificationsSubscribed);\n setMarketingNotifications(rsvpdOptin || !rsvpdOutout);\n setNotifyGuestRSVPs(notificationOptions.email_new_rsvp);\n }, [name, guestEmail, rsvpdAdults, rsvpdKids, rsvpdOptin, rsvpdOutout, notificationOptions]);\n\n const onNotYouPress = () => {\n setReplyAsName('');\n setReplyAsEmail('');\n setNotYou(true);\n };\n\n const onChangeReplyAsCancel = () => {\n setEditOn(false);\n setNotYou(false);\n setReplyAsName(name);\n setReplyAsEmail(guestEmail);\n };\n\n const onEditPress = () => {\n setEditOn(true);\n };\n\n const onSubmit = () =>\n new Promise((resolve, reject) => {\n let email = replyAsEmail?.trim() || guestEmail;\n if (!props.status) {\n // Somehow the modal has been opened without an RSVP status; do not submit RSVP\n toastAlert('No RSVP status chosen', {\n type: 'error',\n icon: \n \n {`${props.choice} (${props.guests.length})`}\n \n \n
\n \n
\n \n {props.guests?.map((guest, i) => (\n \n \n {guest?.guest_name || ''}\n \n
\n ))}\n \n {generateGuestInitials(guest)}\n
\n \n {largeScreens && (\n <>\n \n Submit RSVP\n \n
\n \n );\n}\n\nRSVPModal.propTypes = {\n status: PropTypes.oneOf(['Yes', 'Maybe', 'No']),\n onClose: PropTypes.func,\n onSubmitRSVP: PropTypes.func,\n open: PropTypes.bool,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport {registryUrl} from '~/common/utils';\n\nexport function RegistryVendor(props) {\n const iconUrl = props.registry.iconUrl || props.registry.icon_url;\n const vendorName = props.registry.vendorName || props.registry.vendor_name;\n const {name} = props.registry;\n\n return (\n \n RSVP \n \n
\n \n \n {\n props.status === 'Yes'\n ? 'You will be attending!'\n : props.status === 'No'\n ? 'You are not attending'\n : 'You are RSVPing Maybe' // TODO: Theme 'Maybe' according to chosen theme\n }\n \n {!largeScreens && (\n \n )}\n
\n \n \n {editOn || notYou || forceRSVPForm ? (\n <>\n setReplyAsName(e.target.value)}\n placeholder=\"RSVP name\"\n />\n {(notYou || forceRSVPForm) && (\n setReplyAsEmail(e.target.value)}\n placeholder=\"Email address\"\n />\n )}\n \n ) : (\n
\n {!largeScreens && \n Replying as:{' '}\n \n {replyAsName}\n \n
\n )}\n {!forceRSVPForm && (\n\n {editOn || notYou ? (\n \n Cancel\n \n ) : (\n <>\n \n Edit\n \n {allowGuestsToInvite && (\n <>\n |\n \n Not you?\n \n \n )}\n \n )}\n
\n )}\n \n {props.status !== 'No' && allowGuestsToBringMoreGuests && (\n setRsvpComment(e.target.value)}\n placeholder=\"Add a comment...\"\n />\n
\n \n setNumAdults(numAdults + 1)}\n onMinus={() => {\n if (numAdults > 0) setNumAdults(numAdults - 1);\n }}\n data-qa-id=\"adults-count\"\n />\n {allowKids && (\n setNumKids(numKids + 1)}\n onMinus={() => {\n if (numKids > 0) setNumKids(numKids - 1);\n }}\n data-qa-id=\"kids-count\"\n />\n )}\n
\n )}\n \n setEventNotifications(!eventNotifications)}\n data-qa-id=\"receive-event-notifications\"\n checked={eventNotifications}\n label=\"Yes, I’d like to receive event notifications\"\n />\n {showNotifyMarketing && (\n setMarketingNotifications(!marketingNotifications)}\n data-qa-id=\"receive-marketing-notifications\"\n checked={marketingNotifications}\n label=\"Yes, I'd like to receive party planning tips, gift ideas, special partner offers, and more\"\n />\n )}\n {!isPrivateGuestlist && !isSaveTheDate && (\n setNotifyGuestRSVPs(!notifyGuestRSVPs)}\n data-qa-id=\"notify-guest-rsvps\"\n checked={notifyGuestRSVPs}\n label=\"Yes, I’d like to be notified when other guests RSVP\"\n />\n )}\n
\n \n
\n \n );\n}\n\nRegistryVendor.propTypes = {\n registry: PropTypes.object.isRequired,\n displayText: PropTypes.string.isRequired,\n dataQaId: PropTypes.string.isRequired,\n};\n","import React, {useEffect} from 'react';\n\nconst _savedPositions = {};\n\nexport function RestoreScrollPosition(props) {\n const {path, doneLoading} = props;\n if (!path) {\n console.log('UseRestoreScrollPosition requires a path');\n return;\n }\n const [x, y] = _savedPositions[path] || [0, 0];\n\n const handleScrollPosition = () => {\n if (window.location.pathname.toString().startsWith(path)) {\n _savedPositions[path] = [window.scrollX, window.scrollY];\n } else {\n delete _savedPositions[path];\n }\n };\n\n useEffect(() => {\n window.scrollTo(x, y);\n return () => {\n handleScrollPosition();\n };\n }, [doneLoading]);\n\n return null;\n}\n","import React, {useEffect} from 'react';\nimport {useLocation} from 'react-router-dom';\n\nexport function ScrollToTopOnMount() {\n const location = useLocation();\n\n useEffect(() => {\n if (!location.hash) window.scrollTo(0, 0);\n }, []);\n\n return null;\n}\n","import {useState, useEffect} from 'react';\nimport {useSelector} from 'react-redux';\nimport PropTypes from 'prop-types';\nimport {Divider} from '~/common/_pb_components/atoms/Divider';\nimport {Typography} from '~/common/_pb_components/atoms/Typography';\nimport {Button} from '~/common/_pb_components/atoms/Button';\nimport {Checkbox} from '~/common/_pb_components/atoms/Checkbox';\nimport {Select} from '~/common/_pb_components/atoms/Select';\nimport {PB_CloseLine} from '~/common/svg/PB_CloseLine';\nimport {isSaveTheDateByUsedAs} from '~/common/utils/event_utils';\n\nexport const EVENT_REMINDER_CHOICES = [\n ['-1', 'No Reminders'],\n ['-86400', '1 Day'],\n ['-172800', '2 Days'],\n ['-259200', '3 Days'],\n ['-345600', '4 Days'],\n ['-432000', '5 Days'],\n ['-518400', '6 Days'],\n ['-604800', '7 Days'],\n ['-691200', '8 Days'],\n ['-777600', '9 Days'],\n ['-864000', '10 Days'],\n ['-1209600', '2 Weeks'],\n ['-1814400', '3 Weeks'],\n ['-2592000', '1 Month'],\n];\n\nexport function SettingsOverlay(props) {\n const [notifyActivityInvolvingMe, setNotifyActivityInvolvingMe] = useState(false);\n const [notifyEventActivities, setNotifyEventActivities] = useState(false);\n const [notifyGuestRSVPs, setNotifyGuestRSVPs] = useState(false);\n const [showAddAnotherReminder, setShowAddAnotherReminder] = useState(false);\n const [enableAnotherReminder, setEnableAnotherReminder] = useState(true);\n\n const [reminder1, setReminder1] = useState({\n label: EVENT_REMINDER_CHOICES[0][1],\n value: EVENT_REMINDER_CHOICES[0][0],\n });\n const [reminder2, setReminder2] = useState({\n label: EVENT_REMINDER_CHOICES[0][1],\n value: EVENT_REMINDER_CHOICES[0][0],\n });\n\n const hasRsvpd = useSelector((store) => store.rsvp?.hasRsvpd);\n const usedAs = useSelector((state) => state?.eventDetails?.usedAs);\n const isPrivateGuestlist = useSelector(\n (state) => state?.whoIsComing?.isPrivateGuestlist ?? false\n );\n const remindersDisabled = useSelector(\n (store) => store?.eviteEvent?.options?.event_option_disable_event_reminders\n );\n const isSaveTheDate = isSaveTheDateByUsedAs(usedAs);\n\n useEffect(() => {\n setNotifyActivityInvolvingMe(!!props.notificationDefaults.activityInvolvingMe);\n setNotifyEventActivities(!!props.notificationDefaults.eventActivities);\n setNotifyGuestRSVPs(!!props.notificationDefaults.guestRSVPs);\n setShowAddAnotherReminder(props.reminders.length < 2);\n\n setReminder1({\n label: EVENT_REMINDER_CHOICES[0][1],\n value: EVENT_REMINDER_CHOICES[0][0],\n });\n setReminder2(undefined);\n if (remindersDisabled) {\n setReminder1({\n label: EVENT_REMINDER_CHOICES[0][1],\n value: EVENT_REMINDER_CHOICES[0][0],\n });\n setReminder2(undefined);\n setEnableAnotherReminder(false);\n } else if (props.reminders.length > 0) {\n let reminder = EVENT_REMINDER_CHOICES.find((c) => c[0] === props.reminders[0].toString());\n if (reminder) {\n setReminder1({\n label: reminder[1],\n value: reminder[0],\n });\n }\n if (props.reminders.length > 1) {\n reminder = EVENT_REMINDER_CHOICES.find((c) => c[0] === props.reminders[1].toString());\n if (reminder) {\n setReminder2({\n label: reminder[1],\n value: reminder[0],\n });\n }\n }\n } else {\n setEnableAnotherReminder(false);\n }\n }, [props.notificationDefaults, props.reminders]);\n\n useEffect(() => {\n if (props.open) {\n document.body.classList.add('no-scroll');\n } else {\n document.body.classList.remove('no-scroll');\n }\n }, [props.open]);\n\n const filterForUpcomingTimes = (c) =>\n props.eventDate + parseInt(c[0], 10) * 1000 >= new Date().getTime();\n\n return (\n <>\n \n View the {name} {!name.includes('Registry') && 'Registry'}\n
\n\n
\n \n );\n}\n\nSettingsOverlay.propTypes = {\n notificationDefaults: PropTypes.shape({\n activityInvolvingMe: PropTypes.bool,\n eventActivities: PropTypes.bool,\n guestRSVPs: PropTypes.bool,\n }).isRequired,\n isHost: PropTypes.bool.isRequired,\n reminders: PropTypes.arrayOf(PropTypes.number).isRequired,\n open: PropTypes.bool,\n onClose: PropTypes.func,\n onSave: PropTypes.func,\n eventDate: PropTypes.number.isRequired,\n};\n","import {useState, useEffect, useRef} from 'react';\nimport {useSelector, useStore} from 'react-redux';\nimport {useLocation} from 'react-router-dom';\nimport urls from 'urls';\nimport {useMatchQuery} from '~/common/hooks/useMatchQuery';\nimport {getUserData} from '~/common/auth/utils';\nimport {getUsedAsTypeName, isCanceled} from '~/common/utils/event_utils';\nimport {toastAlert} from '~/common/_pb_components/atoms/Toast';\nimport {Link} from '~/common/_pb_components/atoms/Link';\nimport {Typography} from '~/common/_pb_components/atoms/Typography';\nimport {PB_AlertLine} from '~/common/svg/PB_AlertLine';\nimport {PB_CheckmarkCircle} from '~/common/svg/PB_CheckmarkCircle';\nimport {PB_CloseCircle} from '~/common/svg/PB_CloseCircle';\nimport {PB_QuestionCircle} from '~/common/svg/PB_QuestionCircle';\nimport {GuestRsvpActions} from './GuestRsvpActions';\nimport {submitRSVP} from '../reducers/apiActions';\nimport {selectEventHasPassed} from '../reducers/eventDetails';\nimport {MoreDetailsIndicator} from '../routes/Landing/MoreDetailsIndicator';\nimport {Swirl} from './Swirl';\nimport {RSVPModal} from './RSVPModal';\nimport {GuestReaction} from '~/GuestReaction/GuestReaction';\nimport {\n largishAndUp,\n emerald,\n feedbackNo,\n feedbackMaybe,\n} from '~sass/pb_styleguide/base/_exports.sass';\n\nexport function StickyEditEvent({forceShow}) {\n const location = useLocation();\n const store = useStore();\n const {matches: largeScreens} = useMatchQuery(`(min-width: ${largishAndUp})`);\n\n const hostIds = window.evite_event.host_ids || [];\n const pendingHostIds = window.evite_event.pending_host_ids || [];\n const isCohost = hostIds.includes(window.user_id) && !pendingHostIds.includes(window.user_id);\n const isHostOrCohost = window.user_id === window.evite_event.host_id || isCohost;\n\n const rsvpOff = useSelector((state) => state.eventDetails.rsvpOff);\n const {isWebview} = window;\n\n const params = new URLSearchParams(location.search);\n const gid = params.get('gid');\n\n const event_id = useSelector((state) => state.eventDetails?.eventId ?? null);\n const userData = getUserData(isWebview);\n const {name, email} = useSelector((state) => state.user);\n const guest_id = userData.guest_id || userData.guestId || gid || window.guest_id;\n\n if (!userData.userName) userData.userName = name;\n if (!userData.email) userData.email = email;\n const hasGuestReacted = window.evite_event?.rsvp?.comments;\n\n const [hideGuestReactions, setHideGuestReactions] = useState(false);\n\n const isPremium = useSelector(\n (state) => state.eventDetails?.isPremium || state.eviteEvent.isPremium\n );\n const origin = useSelector((state) => state.eventDetails?.origin || state.eviteEvent.origin);\n const eventStatus = useSelector((state) => state.eventDetails?.status || state.eviteEvent.status);\n const usedAs = useSelector((state) => state.eventDetails?.usedAs || state.eviteEvent?.used_as);\n const rsvpResponse = useSelector((state) => state.rsvp?.rsvpResponse);\n const hasRsvpd = useSelector((state) => state.rsvp?.hasRsvpd);\n const ctaWordings = getUsedAsTypeName(usedAs);\n const loadedDefaultRsvp = useRef(false);\n\n const [updatingRsvp, setUpdatingRsvp] = useState(false);\n const [showSwirl, setShowSwirl] = useState(false);\n const [wipRsvpStatus, setWipRsvpStatus] = useState();\n const urlParams = new URLSearchParams(window.location.search);\n const showRsvpOverlayOnLoad = urlParams.get('rsvp') === '1';\n const [rsvpOverlayOpen, setRsvpOverlayOpen] = useState(showRsvpOverlayOnLoad);\n\n const eventHasPassed = useSelector(selectEventHasPassed);\n const eventIsCanceled = isCanceled(eventStatus);\n const [hideMore, setHideMore] = useState(false);\n\n const [atTop, setAtTop] = useState(true);\n const toggleShowRSVP = () => {\n setAtTop(window.scrollY === 0);\n setHideMore(window.scrollY > 100);\n };\n const onHideSwirl = () => {\n setShowSwirl(false);\n };\n\n useEffect(() => {\n document.addEventListener('scroll', toggleShowRSVP);\n\n if (window.location.href.includes('/messages')) {\n setHideGuestReactions(true);\n }\n\n return () => {\n document.removeEventListener('scroll', toggleShowRSVP);\n };\n }, []);\n\n const rsvpDrawer = useRef(null);\n\n useEffect(() => {\n const footer = document.getElementById('footer');\n if (largeScreens) {\n footer.style.paddingBottom = '5rem';\n } else {\n footer.style.paddingBottom = '11rem';\n }\n }, [largeScreens]);\n\n useEffect(() => {\n if (!loadedDefaultRsvp.current) {\n const params = new URLSearchParams(location.search);\n const status = params.get('rsvp_response');\n if (status) {\n setWipRsvpStatus(`${status[0].toUpperCase()}${status.substring(1)}`);\n setRsvpOverlayOpen(true);\n }\n }\n }, [location]);\n\n const responseMap = {\n yes: \"Yes, you're going\",\n maybe: \"You RSVP'd Maybe\",\n no: \"You RSVP'd No\",\n };\n\n const onSubmitRSVP = (guest_id, payload) =>\n new Promise((resolve, reject) => {\n if (!payload.name) {\n toastAlert('Name is required', {\n type: 'error',\n icon: \n \n Settings\n \n \n
\n \n
\n {props.isHost && (\n \n \n Notifications\n \n \n Choose your notifications preferences for this event:\n \n
\n \n {\n if (notifyActivityInvolvingMe) {\n setNotifyEventActivities(false);\n }\n setNotifyActivityInvolvingMe(!notifyActivityInvolvingMe);\n }}\n data-qa-id=\"notify-activity-involving-me\"\n checked={notifyActivityInvolvingMe}\n label=\"Notify me of activity that involves me\"\n disabled={!hasRsvpd || notifyEventActivities}\n />\n {\n if (!notifyEventActivities) {\n setNotifyActivityInvolvingMe(true);\n }\n setNotifyEventActivities(!notifyEventActivities);\n }}\n data-qa-id=\"notify-event-activities\"\n checked={notifyEventActivities}\n label=\"Notify me of event activities\"\n disabled={!hasRsvpd}\n />\n {(props.isHost || !isPrivateGuestlist) && !isSaveTheDate && (\n setNotifyGuestRSVPs(!notifyGuestRSVPs)}\n data-qa-id=\"notify-guest-rsvps\"\n checked={notifyGuestRSVPs}\n label=\"Notify me when guests RSVP\"\n disabled={!hasRsvpd}\n />\n )}\n
\n \n
\n )}\n \n \n Reminders\n \n \n Schedule up to 2 event reminders to my guests.\n \n
\n \n \n Send Reminders Before My Event\n \n
\n \n c[0] !== reminder2?.value)\n .filter(filterForUpcomingTimes)\n .map((c) => ({label: c[1], value: c[0]}))}\n data-qa-id=\"send-reminder-day-1\"\n value={reminder1}\n onChange={(v) => {\n const option = EVENT_REMINDER_CHOICES.find((o) => o[0] === v);\n setReminder1({\n value: option[0],\n label: option[1],\n });\n if (option[0] === EVENT_REMINDER_CHOICES[0][0]) {\n setEnableAnotherReminder(false);\n setShowAddAnotherReminder(false);\n setReminder2(undefined);\n } else if (reminder2 === undefined) {\n setEnableAnotherReminder(true);\n setShowAddAnotherReminder(true);\n } else {\n setEnableAnotherReminder(true);\n setShowAddAnotherReminder(false);\n }\n }}\n />\n {enableAnotherReminder && showAddAnotherReminder && (\n {\n setReminder2(\n EVENT_REMINDER_CHOICES.slice(1)\n .filter((c) => c[0] !== reminder1?.value)\n .filter(filterForUpcomingTimes)\n .map((c) => ({label: c[1], value: c[0]}))[0]\n );\n setShowAddAnotherReminder(false);\n }}\n >\n Add another reminder\n \n )}\n {enableAnotherReminder && !showAddAnotherReminder && (\n <>\n c[0] !== reminder1?.value)\n .filter(filterForUpcomingTimes)\n .map((c) => ({label: c[1], value: c[0]}))}\n data-qa-id=\"send-reminder-day-2\"\n value={reminder2}\n onChange={(v) => {\n const option = EVENT_REMINDER_CHOICES.slice(1).find((o) => o[0] === v);\n setReminder2({\n value: option[0],\n label: option[1],\n });\n }}\n />\n {\n setShowAddAnotherReminder(true);\n setReminder2(undefined);\n }}\n >\n Remove second reminder\n \n \n )}\n
\n \n \n \n props.onSave(\n {\n activityInvolvingMe: notifyActivityInvolvingMe,\n eventActivities: notifyEventActivities,\n // Only allow guest RSVP notifications if user is host or if guest list is not private\n // If not host AND guest list is private, force to false\n guestRSVPs: props.isHost || !isPrivateGuestlist ? notifyGuestRSVPs : false,\n },\n [\n reminder1?.value ? parseInt(reminder1.value, 10) : null,\n reminder2?.value ? parseInt(reminder2.value, 10) : null,\n ]\n )\n }\n data-impression-tracking=\"true\"\n >\n Save\n \n
\n \n {largeScreens && (\n \n {!isHostOrCohost && (\n <>\n {showReaction ? (\n setUpdatingRsvp(true)}\n >\n Change RSVP\n \n
\n )\n )}\n \n )}\n \n )}\n {isHostOrCohost && !updatingRsvp && (\n \n
\n )}\n {showSwirl && \n {eventHasPassed ? (\n \n This event has already occurred.\n \n ) : eventIsCanceled ? (\n \n This event has been canceled.\n \n ) : !showSwirl && (!hasRsvpd || updatingRsvp) ? (\n \n \n {rsvpResponse === 'yes' ? (\n \n {responseMap[rsvpResponse]}\n \n
\n \n 
\n {props.text} \n
\n );\n}\n","import React from 'react';\nimport {getTimeSinceUTCDate} from '~/common/timestamp';\nimport {Typography} from '~/common/_pb_components/atoms/Typography';\n\nexport function TimeSince(props) {\n const {timestamp, dataQaId, inline} = props;\n return (\n \n 
\n \n {displayText}\n \n
\n);\n\nexport const VendorDisc = ({\n disableClick = false,\n registry,\n displayText,\n className = 'vendor-disc__link',\n dataQaId = 'vendor-disc__gifting_link',\n href,\n}) => {\n const iconUrl = registry.iconUrl || registry.icon_url;\n const vendorName = registry.vendorName || registry.vendor_name;\n\n return (\n \n {displayText}\n 
\n
\n \n \n Messages\n {showNotification && }\n \n
\n \n \n \n {item.name || ''}\n \n removeSelection(item.id)}\n >\n
\n );\n}\n\nexport function EditSelection({\n backToList,\n pendingSelections,\n isEditing,\n onAssign,\n onUnassign,\n store,\n}) {\n const userData = getUserData(window.isWebview ?? isWebview());\n\n const [processing, setProcessing] = useState(false);\n\n const removeSelection = async (id) => {\n setProcessing(true);\n\n await onUnassign(window.user_id, userData.guestName, id)\n .then(() => {\n store.dispatch({\n type: WTB_UPDATE_SELECTIONS,\n payload: {\n type: 'remove',\n item: {id},\n },\n });\n\n setProcessing(false);\n if (pendingSelections.length === 1) {\n backToList();\n toastAlert('Your changes were saved.', {\n type: 'success',\n icon: \n handleDropdownChange(e)}\n data-qa-id=\"edit-selection-dropdown\"\n value={quantity}\n >\n {options().map((option) => (\n \n {option.value}\n \n ))}\n \n
\n \n
\n );\n}\n","import React, {useEffect, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport {useSelector, useStore} from 'react-redux';\nimport {Divider} from '~/common/_pb_components/atoms/Divider';\nimport {Typography} from '~/common/_pb_components/atoms/Typography';\nimport {Button} from '~/common/_pb_components/atoms/Button';\nimport {PB_CloseLine} from '~/common/svg/PB_CloseLine';\nimport {PB_Checkmark} from '~/common/svg/PB_Checkmark';\nimport {largishAndUp} from '~sass/pb_styleguide/base/_exports.sass';\nimport {useMatchQuery} from '~/common/hooks/useMatchQuery';\nimport './WhatToBring.sass';\nimport {EditSelection} from './WhatToBringEdit';\nimport {\n WTB_RESET_SELECTIONS,\n WTB_TOGGLE_EDITING,\n WTB_UPDATE_SELECTIONS,\n} from '../reducers/constants';\n\nfunction WtbOverlaySection({\n item,\n largeScreens,\n userId,\n isHost,\n hasRsvpd,\n items,\n selections,\n store,\n handleEditBtn,\n}) {\n const [selected, setSelected] = useState(false);\n\n useEffect(() => {\n setSelected(selections.some((obj) => obj.id === item.id));\n }, [selections]);\n\n const handleSelected = () => {\n const matchingSelection = items.find((i) => i.id === item.id);\n const quantity =\n matchingSelection.selections.find((sel) => sel.user.id === userId)?.quantity || 1;\n\n store.dispatch({\n type: WTB_UPDATE_SELECTIONS,\n payload: {\n type: selected ? 'remove' : 'add',\n item: {...item, selectedQuantity: quantity},\n },\n });\n };\n\n return (\n \n
\n \n backToList()}\n >\n \n Edit Selection\n \n
\n \n handleSaveSelections()}\n fullWidth\n data-qa-id=\"wtb-overlay-save-selections-btn\"\n >\n {processing && } Save\n \n
\n \n \n {item.quantity - item.remaining} of {item.quantity} FILLED\n \n {item.selections.map((p) => (\n \n \n {p.user.first_name}\n \n {p.user.id === userId && (\n handleEditBtn(item, p.quantity)}\n >\n Edit\n \n )}\n \n {p.quantity}\n \n
\n ))}\n {item.remaining > 0 && (\n <>\n {isHost || hasRsvpd ? (\n \n \n {item.name}\n \n
\n \n
\n \n );\n}\n\nWhatToBringOverlay.propTypes = {\n open: PropTypes.bool,\n onClose: PropTypes.func,\n items: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.string.isRequired,\n name: PropTypes.string.isRequired,\n quantity: PropTypes.number.isRequired,\n remaining: PropTypes.number.isRequired,\n selections: PropTypes.arrayOf(\n PropTypes.shape({\n quantity: PropTypes.number.isRequired,\n user: PropTypes.shape({\n first_name: PropTypes.string.isRequired,\n id: PropTypes.string.isRequired,\n last_name: PropTypes.string.isRequired,\n }),\n })\n ),\n })\n ).isRequired,\n onAssign: PropTypes.func,\n onUnassign: PropTypes.func,\n userId: PropTypes.string.isRequired,\n name: PropTypes.string.isRequired,\n isHost: PropTypes.bool,\n hasRsvpd: PropTypes.bool,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport {PB_SearchLine} from '~/common/svg/PB_SearchLine';\nimport {pebble} from '~sass/pb_styleguide/base/_exports.sass';\nimport {Input} from '~/common/_pb_components/atoms/Input';\nimport {Typography} from '~/common/_pb_components/atoms/Typography';\n\nfunction NumGuests(props) {\n return (\n \n {\n store.dispatch({\n type: WTB_RESET_SELECTIONS,\n });\n }}\n isEditing={isEditing}\n items={items}\n pendingSelections={pendingSelections}\n onUnassign={onUnassign}\n onAssign={onAssign}\n store={store}\n />\n
\n \n
\n \n seeMySignups()}\n size=\"small\"\n variant=\"primary\"\n >\n See My Sign Ups\n \n )}\n {sortedItems.map((i, key) => (\n
\n {pendingSelections.length > 0 && (\n \n \n What to Bring List\n \n \n
\n \n \n Loading What to Bring... \n
\n ) : (\n <>\n {mySignups.length > 0 && (\n \n {\n store.dispatch({\n type: WTB_TOGGLE_EDITING,\n });\n }}\n fullWidth\n data-qa-id=\"continue-with-selected-btn\"\n >\n {`Continue (${pendingSelections.length} selected)`}\n \n
\n )}\n \n \n \n {props.count}\n \n
\n \n
\n );\n}\n\nWhoIsComingHeader.propTypes = {\n yes: PropTypes.number.isRequired,\n maybe: PropTypes.number,\n no: PropTypes.number.isRequired,\n no_reply: PropTypes.number.isRequired,\n query: PropTypes.string,\n onQueryChange: PropTypes.func,\n allowAddGuests: PropTypes.bool,\n addGuestsUrl: PropTypes.string,\n preview: PropTypes.bool,\n};\n","import {useState, useEffect} from 'react';\nimport PropTypes from 'prop-types';\nimport {useSelector, useStore} from 'react-redux';\nimport {fetchGuestlist} from '../reducers/apiActions';\nimport {selectEventHasPassed} from '../reducers/eventDetails';\nimport {isPast, isCanceled} from '~/common/utils/event_utils';\nimport {toastAlert} from '~/common/_pb_components/atoms/Toast';\nimport {Typography} from '~/common/_pb_components/atoms/Typography';\nimport {PB_Arrow} from '~/common/svg/PB_Arrow';\nimport {PB_CloseLine} from '~/common/svg/PB_CloseLine';\nimport {useMatchQuery} from '~/common/hooks/useMatchQuery';\n\nimport {WhoIsComingHeader} from './WhoIsComingHeader';\nimport {Guestlist} from '../routes/Guests/Guestlist';\nimport {largishAndUp} from '~sass/pb_styleguide/base/_exports.sass';\n\nexport function WhoIsComingOverlay(props) {\n const store = useStore();\n const [query, setQuery] = useState('');\n const [openCommentEditor, setOpenCommentEditor] = useState();\n\n const [loading, setLoading] = useState(true);\n\n const hasRsvpd = useSelector((store) => store.rsvp?.hasRsvpd);\n const isHost = useSelector((state) => state.user?.isHost);\n const isPremium = useSelector((state) => state.eventDetails?.isPremium);\n const removeAds = useSelector((state) => state.eventDetails?.removeAds);\n const origin = useSelector((state) => state.eventDetails?.origin);\n const eventStatus = useSelector((state) => state.eventDetails?.status);\n const yesRsvp = useSelector((state) => state.guestList?.rsvpCounts?.yes);\n const maybeRsvp = useSelector((state) => state.guestList?.rsvpCounts?.maybe);\n const noRsvp = useSelector((state) => state.guestList?.rsvpCounts?.no);\n const undecided = useSelector((state) => state.guestList?.rsvpCounts?.no_reply);\n const {matches: largeScreens} = useMatchQuery(`(min-width: ${largishAndUp})`);\n\n const includeMaybe = !isPremium && origin !== 21;\n const replies = !includeMaybe ? ['yes', 'no', 'no_reply'] : ['yes', 'maybe', 'no', 'no_reply'];\n\n useEffect(() => {\n store.dispatch(\n fetchGuestlist(\n window.event_id,\n () => {\n setLoading(false);\n },\n (dispatch, getState, d) => {\n toastAlert(d?.results?.message || 'Error loading guestlist', {\n type: 'error',\n });\n setLoading(false);\n }\n )\n );\n }, []);\n\n useEffect(() => {\n if (props.open) {\n document.body.classList.add('no-scroll');\n } else {\n setOpenCommentEditor(undefined);\n document.body.classList.remove('no-scroll');\n }\n }, [props.open]);\n\n const allowInviteMore = window.evite_event?.options.event_option_allow_invite_more || false;\n const eventHasPassed = useSelector(selectEventHasPassed) || isPast(eventStatus);\n const eventIsCanceled = isCanceled(eventStatus);\n const showInviteMore =\n (allowInviteMore || isHost) && hasRsvpd && !eventHasPassed && !eventIsCanceled;\n\n return (\n <>\n \n
\n \n props.onQueryChange(e.target.value)}\n startAdornment={\n Add Guests\n \n )} */}\n
\n \n
\n \n );\n}\n\nWhoIsComingOverlay.propTypes = {\n open: PropTypes.bool,\n onClose: PropTypes.func,\n rsvpDetails: PropTypes.object,\n preivew: PropTypes.bool,\n};\n","import {\n eviteGold,\n eviteOrange,\n eviteBlue,\n eviteMagenta,\n evitePurple,\n eviteTeal,\n darkBlue,\n darkOrange,\n darkMagenta,\n darkPurple,\n darkTeal,\n} from '~sass/reinvention_styleguide/base/_exports.sass';\n\nexport const AVATAR_COLORS = [\n eviteGold,\n eviteOrange,\n eviteBlue,\n eviteMagenta,\n evitePurple,\n eviteTeal,\n darkBlue,\n darkOrange,\n darkMagenta,\n darkPurple,\n darkTeal,\n];\n","import React, {PureComponent} from 'react';\nimport {Mention, MentionsInput} from 'react-mentions';\nimport evite from 'evite';\nimport * as mentionUtils from './mention-utils';\n\nconst COMPLETE_LIMIT = 7;\nlet instanceCount = 0;\n\nexport class MentionEditor extends PureComponent {\n constructor(props) {\n super(props);\n const initialValue = mentionUtils.fromOurMentions(props.initialContent, props.initialMentions);\n\n this.state = {\n value: initialValue,\n hasChanged: false,\n };\n\n this.className = `editor__${instanceCount++}`;\n\n if (this.props.publicRef) {\n this.props.publicRef(this);\n }\n }\n\n componentWillReceiveProps(nextProps, nextState) {\n if (this.props.initialContent !== nextProps.initialContent)\n this.setState({value: nextProps.initialContent});\n\n if (this.props.clearFromParent !== nextProps.clearFromParent) {\n this.clearComment();\n }\n }\n\n componentWillUnmount() {\n if (this.props.publicRef) {\n this.props.publicRef(null);\n }\n }\n\n componentDidMount() {\n if (this.props.autoFocus) {\n this.handleFocus();\n }\n }\n\n clearComment() {\n this.setComment('');\n }\n\n get comment() {\n return (this.state.plainValue ? this.state.plainValue : this.props.initialContent) || '';\n }\n\n get mentions() {\n return mentionUtils.sortMentions('asc', this.state.mentions || this.props.initialMentions);\n }\n\n get hasFocus() {\n return this.state.hasFocus;\n }\n\n handleBlur = () => {\n this.setState({hasFocus: false});\n\n if (this.props.onBlur) {\n return this.props.onBlur();\n }\n };\n\n handleFocus = () => {\n this.setState({hasFocus: true});\n\n if (this.props.onFocus) {\n return this.props.onFocus();\n }\n };\n\n /**\n * focus on the mention editor\n */\n focus = () => {\n document.querySelector(`.${this.className} textarea`).focus();\n };\n\n handlePost = () => {\n this.props.handleCommentSubmit();\n this.clearComment();\n };\n\n render() {\n const {state, className, props} = this;\n const {placeholder, focusPlaceholder, singleLineInput, isOldStyle, dataQaId, id} = props;\n const {hasFocus} = state;\n\n const classList = ['mention-editor'];\n if (className) classList.push(className);\n if (hasFocus) classList.push('has-focus');\n if (this.state.value) classList.push('has-content');\n if (singleLineInput) classList.push('single-line-input');\n\n const defaultPlaceholder = 'Write a comment...';\n const defaultFocusPlaceholder = evite.features.isEnabled('mentions')\n ? 'Use @ to mention a guest.'\n : placeholder || defaultPlaceholder;\n\n const placeholderText = hasFocus\n ? focusPlaceholder || defaultFocusPlaceholder\n : placeholder || defaultPlaceholder;\n\n const disablePostButton = !this.state.value || !this.state.hasChanged;\n\n const style = {\n suggestions: {\n zIndex: 11,\n list: {\n backgroundColor: 'white',\n border: 'none',\n minWidth: '100px',\n },\n },\n };\n\n if (this.props.suggestionsOnTop) {\n classList.push('direction-up');\n Object.assign(style.suggestions.list, {\n overflow: 'auto',\n position: 'absolute',\n bottom: '17px',\n });\n }\n\n return (\n \n {largeScreens ? (\n <>\n \n Guestlist\n \n \n \n Guestlist \n \n )}\n
\n {loading ? (\n \n \n Loading guestlist... \n
\n ) : (\n <>\n \n \n \n Post\n \n )}\n
\n );\n }\n\n handleChange = (event, newValue, newPlainTextValue, mentions) => {\n this.setState({\n value: newValue,\n plainValue: newPlainTextValue,\n mentions: mentionUtils.toOurMentionFormat(mentions),\n hasChanged: true,\n });\n\n // fire call to parent component so it can be aware of comment changes\n this.props.onChange(newValue);\n };\n\n setMention(id, first, last) {\n const name = `${first} ${last}`.trim();\n const newComment = `@[${name}](${id}) `;\n this.setState({\n value: newComment,\n });\n }\n\n /**\n * fetch user suggestions for the mention autocomplete\n *\n * @param search\n * @param callback func({id\n
\n );\n}\n","import React, {useEffect} from 'react';\nimport {useSelector} from 'react-redux';\nimport urls from 'urls';\nimport {ScrollToTopOnMount} from '../../common/ScrollToTop';\nimport {triggerROKTOverlay, cleanupROKTOverlay} from '../../common/ROKT';\nimport {CalendarReinvention} from '~/common/svg/CalendarReinvention';\nimport {tanzanite} from '~sass/pb_styleguide/base/_exports.sass';\nimport './ReactionConfirmation.sass';\nimport {Button} from '~/common/_pb_components/atoms/Button';\nimport {Typography} from '~/common/_pb_components/atoms/Typography';\nimport {getUsedAsTypeName} from '~/common/utils/event_utils';\n\nexport function ReactionConfirmation({reaction}) {\n const selectEventDetails = ({eventDetails}) => eventDetails;\n const {isPremium, eventId} = useSelector(selectEventDetails);\n const selectRsvp = ({rsvp}) => rsvp;\n const {guestEmail: email} = useSelector(selectRsvp);\n const {userId} = useSelector(selectRsvp);\n const {emailMd5} = useSelector(selectRsvp);\n const {emailSha256} = useSelector(selectRsvp);\n const roktAttributes = {email, userId, emailMd5, emailSha256};\n const addToCalendarUrl = urls.get('add_to_calendar');\n\n const usedAs = useSelector((state) => state.eventDetails?.usedAs || state.eviteEvent?.used_as);\n const ctaWordings = getUsedAsTypeName(usedAs);\n\n useEffect(() => {\n triggerROKTOverlay(\n // `${isPremium ? 'premium-RSVP' : 'reinvention-RSVP'}`, // not sure why this is here\n 'invitation.reaction.success',\n roktAttributes\n );\n return cleanupROKTOverlay;\n }, []);\n\n return (\n \n
\n\n {showCheckList && (\n <>\n \n
\n )}\n \n \n Reaction sent!\n \n (window.location.href = `${window.location.origin}/event/${eventId}`)}\n >\n View {ctaWordings}\n \n \n
\n );\n}\n","import React, {useEffect, useState} from 'react';\nimport {useParams} from 'react-router-dom';\nimport {RSVPConfirmation} from './RSVPConfirmation';\nimport {ScrollToTopOnMount} from '../../common/ScrollToTop';\nimport {ReactionConfirmation} from '~/ViewInvitation/routes/Confirmation/ReactionConfirmation';\n\nexport function Confirmation() {\n const {type} = useParams();\n if (!type.includes('rsvp')) console.log('ERROR: unknown Confirmation type');\n\n const [reaction, setReaction] = useState('');\n\n useEffect(() => {\n const url = new URL(window.location.href);\n const searchParams = new URLSearchParams(url.search);\n\n if (searchParams.has('reaction')) {\n const theReaction = searchParams.get('reaction');\n setReaction(theReaction);\n }\n }, []);\n\n return (\n \n
\n );\n}\n","import {useState} from 'react';\n// import './gift-keywords.sass';\nimport {useHistory, useLocation} from 'react-router-dom';\nimport {useSelector, useDispatch} from 'react-redux';\nimport {ArrowIconReinvention} from '~/common/svg/ArrowReinvention';\nimport {Heading} from '../../common/Heading';\nimport {InvitationLink} from '../../common/InvitationLink';\nimport * as types from '../../../common/gift-keywords/constants';\nimport {ScrollToTopOnMount} from '../../common/ScrollToTop';\nimport {\n hasGiftKeywords,\n selectGiftKeywords,\n getGiftKeywordPlaceHolder,\n} from '../../../common/gift-keywords/utils';\nimport {toastAlert} from '~/common/_pb_components/atoms/Toast';\n\nexport function PickGiftKeywords(props) {\n const {keywords} = useSelector(selectGiftKeywords);\n const [editKeywords, setEditKeywords] = useState([...keywords]);\n const [saving, setSaving] = useState(false);\n const [showForm, setShowForm] = useState(!hasGiftKeywords(keywords));\n const [modifying, setModifying] = useState(false); // Assume we are adding new until someone hits the edit button\n const history = useHistory();\n const location = useLocation();\n\n const dispatch = useDispatch();\n\n const handleChange = (e, index) => {\n const tmp = [...editKeywords];\n tmp[index] = e.target.value;\n setEditKeywords(tmp);\n };\n\n const handleAdd = (e) => {\n e.preventDefault();\n const tmp = [...editKeywords];\n tmp.push('');\n setEditKeywords(tmp);\n };\n\n const handleDel = (index) => {\n const tmp = [];\n for (let i = 0; i < editKeywords.length; i++) {\n if (i != index) tmp.push(editKeywords[i]);\n }\n setEditKeywords(tmp);\n };\n\n const handleSave = async (e) => {\n e.preventDefault();\n setSaving(true);\n\n const data = {keywords: []};\n for (let c = 0; c < editKeywords.length; c++) {\n editKeywords[c] = editKeywords[c].trim();\n if (editKeywords[c]) data.keywords.push(editKeywords[c]);\n }\n data.keywords = JSON.stringify(data.keywords);\n\n const url = `/ajax/event/${window.evite_event.id}/gift_keywords/set`;\n window.$.post(\n url,\n data,\n (response) => {\n setSaving(false);\n dispatch({type: types.DONE_SAVE_GIFT_KEYWORDS, keywords: editKeywords});\n history.push(`/${location.search}`);\n toastAlert('Gift choices updated.', {type: 'success'});\n },\n 'json'\n ).fail((jqXHR, textStatus, errorThrown) => {\n setSaving(false);\n utils.renderAjaxErrorModal(jqXHR, textStatus, errorThrown);\n });\n };\n const description = () => (\n \n {modifying ? (\n <>\n Your guests need your help giving the best gift. List hobbies and interests to set them on\n the right track.\n \n ) : (\n <>\n )}\n
\n );\n const form = () => (\n \n );\n\n return (\n \n
\n );\n}\n","import React from 'react';\nimport urls from 'urls';\nimport {ParentPost} from './ParentPost';\nimport {Divider} from '~/common/_pb_components/atoms/Divider';\n\nexport const AllGuestPosts = (props) => {\n const {\n label,\n guests,\n openCommentEditor,\n onCommentEditorOpen,\n onCommentEditorClose,\n isPremium,\n removeAds, // a.k.a. \"freemium or premium\"\n } = props;\n\n return guests.map((guest, i) => {\n const showAd = i === 0 && label === 'yes' && !isPremium && !removeAds;\n const parentPostId = guest.post_id || null;\n return (\n \n \n \n
\n \n Your guests need your help giving the best gift. List hobbies and interests to set them on\n the right track.\n
\n {form()}\n \n \n
\n );\n}\n","import React, {useEffect, useState} from 'react';\nimport {useSelector, useStore} from 'react-redux';\nimport {deletePost} from '~/ViewInvitation/reducers/apiActions';\nimport {selectPost} from '~/ViewInvitation/reducers/posts';\nimport {LikeButton} from '~/ViewInvitation/routes/Guests/LikeButton';\nimport {CommentButton} from '~/ViewInvitation/routes/Guests/CommentButton';\nimport {TimeSince} from '~/ViewInvitation/common/TimeSince';\nimport {smoothScroll} from '~/common/scroll';\nimport {Typography} from '~/common/_pb_components/atoms/Typography';\nimport {AttendeeCopy} from '~/ViewInvitation/routes/Guests/AttendeeCopy';\nimport {LastViewedCopy} from '~/ViewInvitation/routes/Guests/LastViewedCopy';\n\nexport function Guest(props) {\n const {\n guest,\n label,\n handleCommentOpen,\n handleSetEditing,\n setCommentPostId,\n isParentPost,\n isReply,\n id,\n } = props;\n const store = useStore();\n\n const [isEditingThisComment, setIsEditingThisComment] = useState(false);\n const thisPostId = guest.post_id;\n\n const post = useSelector(selectPost(thisPostId));\n\n const currentUserId = useSelector((s) => s.user.userId);\n const {hasRsvpd} = useSelector((store) => store.rsvp);\n const isHost = useSelector((state) => state.user?.isHost ?? false);\n\n const handleClick = () => {\n setCommentPostId(thisPostId);\n handleCommentOpen(thisPostId);\n };\n const handleEditClick = () => {\n setIsEditingThisComment(true);\n handleSetEditing(true);\n handleCommentOpen(thisPostId);\n };\n\n const handleDelete = () => {\n store.dispatch(deletePost(thisPostId));\n };\n\n // normalize guest data\n let when = (guest && guest.rsvp_when) || (post && post.comment_when) || '';\n if (when) when = when.slice(0, -5);\n\n const comment = guest.rsvp_comment || guest.comment || '';\n const guestName = guest.guest_name || guest.guestName || '';\n\n const viewDate = (post && post.viewDate) || guest.date_viewed || '';\n\n const canUserEdit = guest.comment && guest.userId === currentUserId; // RSVP comments can't be edited here\n\n const scrollToHash = () => {\n const target = document.querySelector(window.location.hash);\n smoothScroll(target, 227);\n };\n\n useEffect(() => {\n if (window.location.hash) {\n scrollToHash();\n }\n }, []);\n\n return (\n \n
\n\n {!hideClear && (\n \n \n {comment}\n \n )}\n
\n );\n}\n","import React from 'react';\nimport {RsvpLabel} from '~/ViewInvitation/routes/Guests/RsvpLabel';\nimport {AllGuestPosts} from '~/ViewInvitation/routes/Guests/AllGuestPosts';\n\nexport const Guestlist = (props) => {\n const {\n replies,\n query,\n openCommentEditor,\n setOpenCommentEditor,\n rsvpDetails,\n isPremium,\n removeAds,\n } = props;\n\n return replies.map((label, i) => {\n const rsvps = rsvpDetails[label];\n const filteredGuests = Object.values(rsvps).filter((guest) =>\n guest.guest_name.toLowerCase().includes(query.toLowerCase())\n );\n return (\n \n \n {guestName}\n \n {!isReply && label !== 'no' && label !== 'no_reply' && (\n <>\n |\n
\n {label === 'no_reply' ? (\n \n {!isEditingThisComment && (\n <>\n {when && \n Edit\n \n |\n \n Delete\n \n \n )}\n \n )}\n
\n \n )}\n \n setOpenCommentEditor(undefined)}\n isPremium={isPremium}\n removeAds={removeAds}\n />\n
\n );\n });\n};\n","import React from 'react';\nimport {TimeSince} from '~/ViewInvitation/common/TimeSince';\n\nexport function LastViewedCopy(props) {\n const {viewDate, showViewDate} = props;\n\n const getLastViewedCopy = () => {\n let status;\n if (showViewDate) {\n if (viewDate) {\n const trimmedDate = viewDate.slice(0, -5);\n status = (\n <>\n Viewed {getLastViewedCopy()}
;\n}\n","import React, {useRef} from 'react';\nimport {useSelector, useStore} from 'react-redux';\nimport {PB_FavoritesLine} from '~/common/svg/PB_FavoritesLine';\nimport {PB_FavoritesFill} from '~/common/svg/PB_FavoritesFill';\nimport {animateRSVPButton} from '~/ViewInvitation/common/StickyRSVP';\nimport {rose, cloud} from '~sass/pb_styleguide/base/_exports.sass';\n\nimport {likePost, unlikePost} from '~/ViewInvitation/reducers/apiActions';\nimport {Typography} from '~/common/_pb_components/atoms/Typography';\n\nexport function LikeButton(props) {\n const store = useStore();\n const processing = useRef(false);\n const {postId, userId, post, showCount = true, dataQaId} = props;\n const {likedBy} = post;\n\n const likedByThisUser = Array.isArray(likedBy)\n ? likedBy.includes(userId)\n : Object.keys(likedBy).includes(userId);\n const likeCount = likedBy.length || Object.keys(likedBy).length;\n\n const hasRSVPd = useSelector((state) => state.rsvp?.hasRsvpd ?? false);\n\n const toggleLike = async () => {\n processing.current = true;\n if (hasRSVPd) {\n if (likedByThisUser) {\n store.dispatch(unlikePost(postId));\n } else {\n store.dispatch(likePost(postId));\n }\n } else {\n animateRSVPButton();\n }\n processing.current = false;\n };\n\n return (\n \n \n {comment}\n \n {\n setShowDeleteModal(false);\n }}\n onAfterClose={() => {\n if (deleteConfirmed) handleDelete();\n }}\n isOpen={showDeleteModal}\n title=\"Delete Comment\"\n message=\"Are you sure you want to delete this comment?\"\n optionsList={[\n {\n label: 'Delete',\n action: () => setDeleteConfirmed(true),\n destructive: true,\n },\n ]}\n />\n
\n );\n}\n","import React from 'react';\nimport {shallowEqual, useSelector} from 'react-redux';\nimport {Typography} from '~/common/_pb_components/atoms/Typography';\nimport {selectRsvpStyle} from '../../reducers/eventDetails';\n\nexport function RsvpLabel(props) {\n const {label} = props;\n\n const rsvpCounts = useSelector(({guestList: s}) => s.rsvpCounts);\n\n const allowKids = useSelector((state) => state.eventDetails?.allowKids);\n\n let displayLabel = label;\n const customLabel = useSelector(selectRsvpStyle, shallowEqual);\n const hasCustomLabel = label !== 'no_reply' && customLabel[label].toLowerCase() !== displayLabel;\n if (displayLabel === 'no_reply') displayLabel = 'no reply';\n\n let rsvpCount;\n const adults = rsvpCounts[`adults_${label}`];\n const kids = rsvpCounts[`kids_${label}`];\n\n if (allowKids && ['yes', 'maybe'].includes(label)) {\n const adultsCopy = `${adults} Adult${adults === 1 ? '' : 's'}`;\n const hasKids = kids !== 0;\n const kidsCopy = ` ${kids} Kid${kids === 1 ? '' : 's'}`;\n rsvpCount = adultsCopy + (hasKids ? kidsCopy : '');\n } else {\n rsvpCount = rsvpCounts[label];\n }\n\n return (\n \n \n {guestName}\n \n
\n {!isEditingThisComment && (\n <>\n \n {whenPosted && (\n <>\n handleEditClick()}\n className=\"unstyled-button link small\"\n data-qa-id=\"comment-edit\"\n >\n Edit\n \n |\n setShowDeleteModal(true)}\n className=\"unstyled-button link small\"\n data-qa-id=\"comment-delete\"\n >\n Delete\n \n \n )}\n
\n \n )}\n {/* Because deleting the post causes this component to stop rendering - we delay the\n call to delete the post until after the modal has finished animating off the screen\n TODO: Add a flag to the option items that causes the action to be called onAfterClose instead of onClick\n TODO: so we can avoid repeating this logic every time we have a delete option\n */}\n \n \n {displayLabel}\n {hasCustomLabel && (\n \n {customLabel[label]}\n \n )}\n \n \n ({rsvpCount})\n \n
\n );\n}\n","import React from 'react';\n\nexport function ViewMoreRepliesButton(props) {\n const {remainingReplyCount, parentPostId} = props;\n\n const viewMoreRepliesCopy = `View ${remainingReplyCount} more ${\n remainingReplyCount > 1 ? 'replies' : 'reply'\n }`;\n\n const showAllReplies = () => {\n const viewButton = document.getElementById(`viewmore-${parentPostId}`);\n const hiddenPosts = document.getElementById(`hiddenposts-${parentPostId}`);\n evite.removeClass(hiddenPosts, 'hidden');\n evite.addClass(viewButton, 'hidden');\n };\n\n return (\n \n 
\n {showRemoveButton && (\n
\n \n );\n}\n","import React, {useRef, useState, useEffect} from 'react';\n\nimport {shallowEqual, useSelector, useStore} from 'react-redux';\nimport {Card} from '~/common/canvas/Card/Card';\nimport {useMatchQuery} from '~/common/hooks/useMatchQuery';\nimport {FreeEventCountdown} from '~/ViewInvitation/common/FreeEventCountdown';\nimport {cityAddressLine, convertToIso, dateTimesWithCurrentYear} from '~/create/utils/formatters';\nimport {CustomLogoImage} from '~/create/components/CustomLogo/CusomLogoImage';\nimport {useFitContainer} from '~/ViewInvitation/common/useFitContainer';\nimport {Typography} from '~/common/_pb_components/atoms/Typography';\nimport {PremiumCarousel} from './Premium/PremiumCarousel';\nimport {PB_EditLine} from '~/common/svg/PB_EditLine';\nimport {tanzanite} from '~sass/pb_styleguide/base/_exports.sass';\n\nfunction ViewCoverMobile(props) {\n const {\n event,\n template: snake_template,\n customImageURL,\n isPremium,\n fabricArt,\n showPremiumWebview,\n preview,\n isWebview,\n } = props;\n\n const store = useStore();\n const template = {\n assets: snake_template?.assets,\n uyo: snake_template?.uyo,\n designTypeName: snake_template?.design_type_name,\n eventTitleColor: snake_template?.event_title_color,\n informationColor: snake_template?.information_color,\n specialFeatures: snake_template?.special_features,\n mobileImage: snake_template?.assets?.mobileImage,\n css: snake_template?.assets?.custom_css,\n customFonts: snake_template?.custom_fonts,\n type: snake_template?.type,\n };\n\n // UYO - handles cropped user images for free mobile\n\n let uyoImageElement = null;\n\n if (template.uyo)\n uyoImageElement = (\n \n connectCTA && connectCTA('remove-ads', elem)}\n icon={
\n )}\n \n {\n setEditArtworkClicked(true);\n window.navigateToRoute('customize', store).then(() => setEditArtworkClicked(false));\n }}\n >\n {editArtworkClicked && }\n
\n ) : mediumScreens ? (\n <>\n {template.css && }\n {template.customFonts &&\n template.customFonts.map((cf, index) => (\n \n ))}\n \n
\n \n ) : (\n <>\n \n
\n \n \n
\n \n
\n \n
\n \n {/* Add custom logo here */}\n {event.custom_logo && event.custom_logo.url && (\n
\n \n {template.uyo && customImageURL && (\n
\n \n
\n {event.start_datetime &&\n template.specialFeatures &&\n template.specialFeatures.countdown ? (\n \n \n {event.title}\n \n
\n\n
\n - \n
- \n Host:\n \n \n {event.host_name}\n \n\n \n
- \n Phone:\n \n \n {event.phone_number}\n \n\n \n
- \n
- \n When:\n \n \n {start_formatted}\n \n \n {end_formatted}\n \n\n \n
- \n Where:\n \n \n {event.location_name}\n \n \n {event.street_address}\n \n \n {cityAddressLine(event)}\n \n\n \n
\n
\n ) : null}\n \n
\n ) : null}\n {template.uyo && uyoImageElement}\n \n
\n \n \n \n \n )}\n \n );\n}\n\nexport function DesignTemplate({\n themeColor,\n showPremiumWebview,\n bgAlpha,\n preview,\n isWebview = false,\n}) {\n const coverData = useSelector((state) => state.coverData, shallowEqual);\n const fabricArt = useSelector(\n (state) => state.eventDetails?.fabric_design_data ?? state.fabricDesign?.fabricArt\n );\n\n const isPremium = useSelector(\n (state) =>\n state.eventDetails.isPremium ||\n state.user.subscriptionPlanName === 'pro' ||\n state.user.subscriptionPlanName === 'party_pass'\n );\n const eviteEvent = useSelector((state) => state.eviteEvent);\n const event = eviteEvent || window.evite_event;\n const {template} = coverData;\n const customImageURL = coverData.image_url;\n const bonusClassNames = 'reinvention';\n\n return (\n \n 18 ? ' long' : ''\n }`}\n style={{\n color: template.eventTitleColor,\n fontSize: event.title.length > 18 && scale < 1.0 ? 24 * scale : 32 * scale,\n lineHeight: '125%',\n marginBottom: '1rem',\n }}\n >\n {event.title || 'Event Title'}\n \n \n
\n\n {event.host_name || 'Bob Johnson'}\n \n \n {event.phone_number}\n \n
\n
{' '}\n \n \n {start_formatted}\n \n \n {end_formatted}\n \n
\n \n
\n
\n \n {event.location_name}\n \n \n {event.street_address}\n \n \n {cityAddressLine(event)}\n \n
\n \n \n {title}\n \n\n
\n\n \n
\n \n \n
\n\n {(locationName || streetAddress) && \n {preview && !readonly && (\n history.push(`/${eventId}/details`)}\n data-qa-id=\"edit-host-message\"\n >\n
\n \n {_guestsOfHonor.map((guestOfHonor, index) => (\n\n {guestOfHonor}\n \n ))}\n \n )}\n
\n\n {phoneNumber && (\n \n {hostName}\n
\n \n\n \n {_guestsOfHonor.map((guestOfHonor, index) => (\n
\n
\n )}\n \n );\n}\n","import {useEffect, useState} from 'react';\nimport {useDispatch, useSelector} from 'react-redux';\nimport {useHistory} from 'react-router-dom';\nimport {Typography} from '~/common/_pb_components/atoms/Typography';\n/* eslint-disable camelcase */\nimport {PB_DeleteBinLine} from '~/common/svg/PB_DeleteBinLine';\nimport {PB_EditLine} from '~/common/svg/PB_EditLine';\n/* eslint-enable camelcase */\nimport {isPreview} from '~/ViewInvitation/utils';\nimport {DONATION_MADE} from '~/ViewInvitation/reducers/constants';\nimport {refreshFundraiser} from '~/ViewInvitation/reducers/apiActions';\nimport {link} from '~sass/pb_styleguide/base/_exports.sass';\nimport {Button} from '~/common/_pb_components/atoms/Button';\n\nconst DonationSegment = ({donation, connectCTA, readonly}) => {\n const history = useHistory();\n const {eventId} = useSelector((state) => state.eventDetails);\n const {found, donation_url: donationUrl, id} = donation;\n const name = useSelector((state) => state.rsvp?.name ?? state.user?.name ?? '');\n const firstName = name?.split(' ')[0];\n const lastName = name?.split(' ')[1];\n const guestEmail = useSelector((state) => state.rsvp?.guestEmail ?? '');\n\n const hasDonation = !!donationUrl || donationUrl !== undefined; // along with initial state, prevents flash\n\n // get the key and host from the url that pledge sends back to us on create\n const tempUrl = document.createElement('a');\n tempUrl.href = donationUrl;\n const pledgelingHost = `${tempUrl.protocol}//${tempUrl.hostname}/assets/widget.js`;\n const partnerKey = tempUrl.pathname.split('/')[3];\n\n const dispatch = useDispatch();\n const preview = isPreview();\n\n const onMessage = (e) => {\n if (!e.origin.includes('pledge.to')) return;\n const {data} = e;\n let objMessage;\n try {\n objMessage = JSON.parse(data);\n } catch (err) {\n return; // we don't care about this\n }\n let value = parseFloat(objMessage.data?.amount);\n switch (objMessage.message) {\n case 'DonateCompleted':\n value *= 100; // store money in cents\n dispatch({\n type: DONATION_MADE,\n results: {\n donationUrl,\n donationAddedCents: value,\n },\n });\n dispatch(refreshFundraiser()); // tell backend to refresh cache\n break;\n case 'setWidgetHeight':\n // document.getElementById('external-donation-id').style.height =\n // objMessage.data + 'px';\n break;\n case 'intersectionLoaded':\n break;\n default:\n evite.log('Pledge unhandled message: ', objMessage.message);\n }\n };\n\n // eslint-disable-next-line consistent-return\n useEffect(() => {\n if (donationUrl) {\n const script = document.createElement('script');\n script.src = pledgelingHost;\n script.id = 'plg-widget';\n script.async = true;\n document.body.appendChild(script);\n\n window.addEventListener('message', onMessage, false);\n return () => {\n window.removeEventListener('message', onMessage);\n }; // will happen on unmount\n }\n }, [donationUrl]);\n\n if (found && donationUrl) {\n return (\n <>\n {preview && !readonly && (\n \n history.push(`/${eventId}/gifting`)}\n data-qa-id=\"edit-donations\"\n >\n connectCTA && connectCTA('remove-donations', elem)}\n >\n
\n )}\n \n {hasDonation ? (\n \n // {/* TODO: This text will need to be updated when multiple donation streams become supported */}\n // Your host has removed donations for this event.\n // \n null}\n
\n \n );\n }\n return (\n \n \n Loading... \n
\n ) : (\n sortedDonations.map((d) =>\n // eslint-disable-next-line no-nested-ternary\n !d.donation_url ? (\n \n \n {dateFirstLine}\n
\n {dateSecondLine}\n \n
\n );\n};\n\nexport function FormattedDateString(props) {\n const {start, end, timezoneAbbr, preview} = props;\n const {matches: largeScreens} = useMatchQuery(`(min-width: ${largishAndUp})`);\n\n return getFormattedDateStrings(start, end, timezoneAbbr, largeScreens ? 0.75 : 0.5, preview);\n}\n\nFormattedDateString.propTypes = {\n start: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),\n end: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),\n timezoneAbbr: PropTypes.string,\n preview: PropTypes.bool,\n};\n","import React, {useEffect, useState} from 'react';\nimport {useSelector, useDispatch} from 'react-redux';\nimport {GiftingModule, KeywordList} from './GiftingModule';\nimport {GroundhogModal} from '../../common/Modal/GroundhogModal';\nimport {RegistryModule} from './RegistryModule';\nimport {AskAHostIcon} from '~/common/svg/AskAHost';\nimport {SuccessIcon} from '~/common/svg/SuccessIcon';\nimport {LinkOut} from '~/common/svg/LinkOut';\nimport {Typography} from '~/common/_pb_components/atoms/Typography';\n\n/*\n * Modal that pops up when the guest views the invitation the first time after rsvping\n * Can be paused for 1 year by hitting the \"Don’t Show Again\" button,\n * or for 1 day by hitting the \"Remind me later\" button\n */\n\nexport function GiftingModal(props) {\n const {giftingType} = props;\n const [isOpen, setIsOpen] = useState(false);\n const isHost = useSelector((s) => s.user.isHost);\n const hasRsvpd = useSelector((s) => s.rsvp.hasRsvpd);\n const {name, registries} = useSelector((s) => s.registry);\n\n window.experimentsEligibility = window.experimentsEligibility || {};\n window.experimentsEligibility['gifting-modal'] = hasRsvpd && !isHost ? 'true' : false;\n\n useEffect(() => {\n if (hasRsvpd && !isHost)\n // Delay the modal popup so the page has time to render before animating it in.\n window.setTimeout(() => {\n setIsOpen(true);\n }, 300);\n }, [hasRsvpd, isHost, giftingType]);\n\n return (\n \n {dateSecondLine}\n \n
\n \n \n {giftingType === 'registry' && (\n <>\n \n {name}'s Registr{registries.length === 1 ? 'y' : 'ies'}\n \n
\n \n );\n}\n\nconst ToastModalHeading = () => 'Looking for gift ideas?';\n\nfunction RenderGifting() {\n return (\n \n {filledKeywords.map((keyword, index) => (\n \n \n {keyword}\n \n \n ))}\n
\n );\n}\n\nexport function GuestKeywordsWidget(props) {\n if (!hasGiftKeywords()) return '';\n\n const keywords = window.evite_event?.gift_keywords || [];\n return (\n \n \n Shop {window.evite_event?.host_name || ''}'s interests for gift ideas on\n
\n );\n}\n\nexport const getDiscDisplayText = (event) => {\n switch (event?.eventType) {\n case 'halloween':\n case 'halloween_kids':\n return 'Find your costume';\n\n case 'holiday_party':\n case 'holidayforkids':\n case 'christmas':\n case 'hanukkah':\n return 'Shop holiday gifts';\n\n default:\n return 'Buy your gift now';\n }\n};\n\nexport const getTargetURL = (event) => {\n switch (event?.eventType || event?.event_type) {\n case 'halloween':\n case 'halloween_kids':\n return 'https://goto.target.com/jrZRon';\n\n case 'holiday_party':\n case 'holidayforkids':\n case 'christmas':\n case 'hanukkah':\n return 'https://goto.target.com/AWADEj';\n\n default:\n return 'https://goto.target.com/mg7n3q';\n }\n};\n\nexport function GiftingModule(props) {\n const history = useHistory();\n const {keywords} = useSelector(selectGiftKeywords);\n const event = useSelector(selectEvent);\n const {matches: mediumScreens} = useMatchQuery(`(min-width: ${mediumAndUp})`);\n const {matches: largeScreens} = useMatchQuery(`(min-width: ${largishAndUp})`);\n const {\n showHeader = true,\n vendorDiscDataQaId = 'vendor-disc__gifting_link',\n isBottomSheet,\n readonly,\n forceShowCTA,\n } = props;\n let {showGiftKeywords = true, onRemove, restored, onPropagateRestore} = props;\n\n const {isPremium} = useSelector((state) => state.details || state.eventDetails);\n const {isHost} = useSelector((state) => state.user);\n const giftingData = useSelector(\n (state) => state.gifting ?? {url: '', iconUrl: '', vendorName: ''}\n );\n const registries = useSelector((state) =>\n 'giftingOptions' in state && state.giftingOptions?.gift_registry_urls.length === 0\n ? []\n : state.registry?.registries ?? []\n );\n showGiftKeywords = showGiftKeywords && getShowGiftKeywords(event, keywords);\n\n const showGuestGiftlist =\n window.evite_event?.gift_list_url && window.evite_event?.gift_registry_urls.length === 0;\n\n const preview = isPreview();\n\n const getModuleHeaderText = (variation) => {\n let moduleTitle;\n switch (window.evite_event.event_type) {\n case 'birthday_forhim':\n moduleTitle = 'Order the Perfect Gift';\n case 'birthday_forteens':\n case 'birthday_milestones':\n moduleTitle = 'Order the Perfect Birthday Gift';\n break;\n case 'baby_shower':\n moduleTitle = 'Order the Perfect Baby Gift';\n break;\n case 'easter':\n moduleTitle = 'Order the Perfect Easter Gift for the Host';\n break;\n case 'halloween':\n case 'halloween_kids':\n moduleTitle = 'Shop Halloween Costumes';\n break;\n default:\n moduleTitle = 'Find the Perfect Gift';\n }\n return moduleTitle;\n };\n\n const displayText = getDiscDisplayText(event);\n const targetURL = getTargetURL(event);\n return (\n \n {registries?.length > 0 && 0 || showGuestGiftlist || showGiftKeywords\n ? 'with-registries'\n : ''\n }`}\n >\n
\n \n \n )}\n \n );\n}\n\nfunction Vendor(props) {\n return props.showAsRectangle ? \n
\n \n )}\n {showGiftKeywords ? (\n <>\n {(registries?.length > 0 || showGuestGiftlist) && (\n \n {((preview && !readonly) || forceShowCTA) && (\n
\n \n {\n props.connectCTA && props.connectCTA('remove-gifting', elem);\n }}\n >\n {!isPremium &&
\n )}\n \n \n {getModuleHeaderText('variation')}\n \n \n
\n \n \n
\n );\n}\n","import React, {useRef} from 'react';\nimport {useStore} from 'react-redux';\nimport {useImpression} from '~/common/hooks/useImpression';\n\nexport function Module(props) {\n const {\n children,\n moduleName,\n isLast,\n impressionEvent = undefined,\n isPreview,\n readonly,\n ...acyclicalProps\n } = props;\n\n const tracking = {};\n const trackingRef = useRef();\n const store = useStore();\n let onScreen = null;\n\n if (impressionEvent) {\n tracking.ref = trackingRef;\n onScreen = useImpression(trackingRef, impressionEvent);\n }\n\n return (\n \n \n \n {locationName && {locationName}}\n {(streetAddress || city || state || zipCode) && (\n <>\n {locationName &&
}\n \n {streetAddress}\n {streetAddress && (city || state || zipCode) &&
}\n {city}\n {city && ','} {state} {zipCode}\n \n \n )}\n \n
\n {(streetAddress || city || state || zipCode) && (\n }\n \n {streetAddress}\n {streetAddress && (city || state || zipCode) &&
}\n {city}\n {city && ','} {state} {zipCode}\n \n \n )}\n
\n
\n );\n}\n","import {useEffect, useState} from 'react';\nimport {useSelector, useDispatch, shallowEqual} from 'react-redux';\nimport {voteForPollOption} from '../../reducers/apiActions';\nimport {trackPollVote} from '../../utils/analytics';\n\nimport {Button} from '~/common/_pb_components/atoms/Button';\nimport {Typography} from '~/common/_pb_components/atoms/Typography';\nimport {PB_PollLine} from '~/common/svg/PB_PollLine';\nimport {largishAndUp, emerald, link} from '~sass/pb_styleguide/base/_exports.sass';\nimport {useMatchQuery} from '~/common/hooks/useMatchQuery';\nimport {Radio} from '~/common/_pb_components/atoms/Radio';\nimport {PB_CheckmarkCircle} from '~/common/svg/PB_CheckmarkCircle';\nimport {PB_DeleteBinLine} from '~/common/svg/PB_DeleteBinLine';\nimport {PB_EditLine} from '~/common/svg/PB_EditLine';\nimport {PB_MealOptions} from '~/common/svg/PB_MealOptions';\nimport {isPreview} from '../../utils';\nimport {PollChoiceOverlay} from '../../common/PollChoiceOverlay';\nimport {isMealOptionsEventType} from '~/common/utils/event_utils';\n\nexport function PollModule(props) {\n const {onRemove, restored, onPropagateRestore, readonly} = props;\n const {\n options,\n question,\n allowOtherOptions,\n pollId,\n optionSelectedByUser,\n totalResponseCount,\n voted,\n hasRSVPed,\n } = useSelector(({poll: p, rsvp}) => ({\n options: p.options?.map((o) => ({\n key: o.id,\n choice: o.option,\n response_count: o.response_count,\n })),\n question: p.question,\n allowOtherOptions: p.allow_other_options,\n totalResponseCount: p.total_response_count,\n pollId: p.id,\n voted: p.voted,\n optionSelectedByUser: p.option_selected_by_user,\n hasRSVPed: rsvp.hasRsvpd,\n }));\n\n const isHost = useSelector((state) => state.user?.isHost);\n const eventId = useSelector((state) => state.eventDetails?.eventId);\n const widgets = useSelector((state) => state.eventDetails?.widgets);\n const eventType = useSelector((state) => state.eventDetails?.eventType);\n const showMealOptions = isMealOptionsEventType(eventType);\n\n const [selectedChoice, setSelectedChoice] = useState(false);\n const [changingChoice, setChangingChoice] = useState(false);\n const [pollOverlayChoice, setPollOverlayChoice] = useState('');\n const [pollOverlayOpen, setPollOverlayOpen] = useState(false);\n const [guestsWhoVotedThis, setGuestsWhoVotedThis] = useState([]);\n const {matches: largeScreens} = useMatchQuery(`(min-width: ${largishAndUp})`);\n\n const dispatch = useDispatch();\n\n useEffect(() => {\n if (!optionSelectedByUser) {\n setChangingChoice(true);\n }\n setSelectedChoice(optionSelectedByUser);\n }, [optionSelectedByUser]);\n\n const submitPollVote = () => {\n trackPollVote('polls_vote');\n dispatch(\n voteForPollOption(pollId, 'cast_vote', {option: selectedChoice}, () => {\n setChangingChoice(false);\n })\n );\n };\n\n const changeChoice = () => {\n setChangingChoice(true);\n };\n\n const preview = isPreview();\n\n useEffect(() => {\n if (restored && preview && isHost) {\n // API call to restore module\n const patchedEventData = {\n widgets,\n };\n onPropagateRestore(patchedEventData);\n }\n }, [restored]);\n\n return (\n \n \n Photos\n \n
\n \n {photos.length > 0 ? (\n photos.map((image, i) => (\n 
\n ))\n ) : (\n \n There are no photos.\n \n )}\n
\n \n {preview && !readonly && (\n
\n ) : (\n \n \n props.connectCTA && props.connectCTA('remove-poll', elem)}\n data-qa-id=\"previewCtaRemove\"\n >\n
\n )}\n \n \n {question}\n \n\n {voted && !changingChoice ? (\n \n {options?.map((o, i) => (\n \n
\n ))}\n \n {showMealOptions ? \n {showMealOptions ? 'Meal options' : 'Poll'}\n \n
\n \n \n {o.choice}\n \n {o.key === optionSelectedByUser && (\n
\n \n \n {o.response_count}\n \n
\n \n {options?.map((o, i) => (\n setSelectedChoice(o.key)}\n data-qa-id=\"poll-option\"\n data-qa-value={o.key}\n checked={selectedChoice !== undefined && selectedChoice === o.key}\n label={o.choice}\n id={`pollOption_${o.key}`}\n key={`${o.key}_${i}`}\n name={`pollOption_${o.key}`}\n disabled={preview || !hasRSVPed}\n />\n ))}\n
\n )}\n \n \n \n {changingChoice ? 'Submit Choice' : 'Change My Choice'}\n \n {!preview && !hasRSVPed && (\n \n You have to RSVP to vote.\n \n )}\n
\n \n {preview && !readonly && (\n
\n ) : (\n \n \n props.connectCTA && props.connectCTA('remove-poll', elem)}\n data-qa-id=\"previewCtaRemove\"\n id=\"remove-poll\"\n >\n
\n )}\n \n \n {question}\n \n\n {initialState || !changingChoice ? (\n \n {options?.map((o) => (\n \n
\n ))}\n \n {showMealOptions ? \n {showMealOptions ? 'Meal options' : 'Poll'}\n \n
\n \n \n {o.choice}\n \n {o.key === optionSelectedByUser && (\n
\n \n \n {o.response_count}\n \n openPollOverlay(o.choice)}\n disabled={preview}\n >\n View\n \n
\n \n {options?.map((o) => (\n setSelectedChoice(o.key)}\n data-qa-id=\"poll-option\"\n data-qa-value={o.key}\n checked={selectedChoice === o.key}\n label={o.choice}\n id={`pollOption_${o.key}`}\n key={o.key}\n name={`pollOption_${o.key}`}\n disabled={preview || !hasRSVPed}\n />\n ))}\n
\n )}\n \n \n \n {initialState ? 'Add Your Vote' : changingChoice ? 'Submit Choice' : 'Change My Choice'}\n \n {!preview && !hasRSVPed && (\n \n You have to RSVP to vote.\n \n )}\n
\n {noOverlay || (\n \n {\n setEditArtworkClicked(true);\n window.navigateToRoute('customize', store).then(() => setEditArtworkClicked(false));\n }}\n >\n {editArtworkClicked && }\n
\n \n );\n }\n if (isLotti) {\n return (\n \n
\n );\n }\n return (\n \n
\n );\n };\n\n return (\n \n
\n \n \n \n
\n \n 
\n
\n\n \n
\n\n \n 
\n 
\n
\n \n
\n\n {getAsset()}
\n\n \n
\n\n \n
\n\n \n 
\n
\n \n
\n \n setEnvelopeLoaded(true)}\n alt=\"envelope\"\n />\n 
\n \n {invitee}\n \n {envelopeStickers && envelopeLoaded && (\n \n
\n )}\n \n \n
\n \n \n \n );\n}\n","import React, {useState, useRef, useEffect} from 'react';\nimport {useSelector} from 'react-redux';\nimport {PremiumDesign} from './PremiumDesign';\nimport {PremiumInsert} from '~/ViewInvitation/routes/Landing/Premium/PremiumInsert';\nimport {Video} from './Video';\nimport {PB_Chevron} from '~/common/svg/PB_Chevron';\nimport {PB_Triangle} from '~/common/svg/PB_Triangle';\nimport {webviewAnimFinish, webviewAnimReplay, webviewAnimStart} from './webviewMessages';\n\nexport function CarouselDots(props) {\n const {numPages, setPage, currentPage} = props;\n const pages = Array.from(Array(Math.min(numPages, 16)).keys());\n return (\n \n {pages.map((p) => (\n \n {numPages > 1 && (\n \n
\n {numPages > 1 && (\n \n \n
\n ))}\n {videoId && (\n \n
\n {inserts.map((insert, index) => (\n \n \n
\n )}\n \n
\n );\n}\n","import React from 'react';\nimport {UseReducer} from 'redux';\n\nimport linkifyHtml from 'linkifyjs/html';\n\nfunction TextAsset({title, text}) {\n // The text here is html prepared by our rich-text editor component.\n // It has been run through the 'clean_asset_tags' filter on the server before it gets here\n // It needs to get rendered as-is. (a valid use of dangerouslySetInnerHTML)\n const textMarkup = linkifyHtml(text);\n const getTextMarkup = () => ({__html: textMarkup});\n return (\n \n
\n );\n}\n\nfunction PhotoAsset({title, imageKey}) {\n return (\n \n
\n \n {title}\n
\n \n\n
\n );\n}\n\nexport function PremiumInsert({insert}) {\n if (insert.card_type === 'text') return \n
\n {title}
} */}\n\n
\n );\n }\n if (videoData.is_viewable) {\n return (videoNode = node)} /> */}\n \n {\n setVideoPlaying(true);\n }}\n onProgress={({played}) => {\n if (played < 0.1) {\n // this gets triggered when seeking to the beginning or play for second time\n progressReport[25] = 0;\n progressReport[50] = 0;\n progressReport[75] = 0;\n progressReport[100] = 0;\n } else if (played > 0.2 && played < 0.3 && !progressReport[25]) {\n progressReport[25] = 1;\n dataLayer.push(progressReport);\n } else if (played >= 0.45 && played < 0.55 && !progressReport[50]) {\n progressReport[50] = 1;\n dataLayer.push(progressReport);\n } else if (played >= 0.7 && played < 0.8 && !progressReport[75]) {\n progressReport[75] = 1;\n dataLayer.push(progressReport);\n } else if (played === 1) {\n progressReport[100] = 1;\n dataLayer.push(progressReport);\n }\n }}\n controls\n width={vidWidth}\n light={preview_image_url}\n height={metadata.height > maxHeight ? maxHeight : metadata.height}\n />\n \n \n );\n}\n","import React from 'react';\nimport {CircleLoader} from '~/common/components/Loader/CircleLoader';\nimport './VideoRendering.sass';\n\nexport function VideoRendering() {\n return (\n {\n this.el = c;\n }}\n className={className}\n style={lottieStyles}\n onClick={onClickHandler}\n title={title}\n role={ariaRole}\n aria-label={ariaLabel}\n tabIndex=\"0\"\n data-qa-id=\"lotti-anim-wrapper\"\n />\n );\n }\n}\n","// send message to app webview that animation has started\nexport const webviewAnimStart = () => {\n // ios\n try {\n window.webkit?.messageHandlers?.animationStarted &&\n window.webkit.messageHandlers.animationStarted.postMessage(true);\n } catch (e) {\n console.error(e);\n alert(`An error occurred in fabricCreateIsPremium(ios): ${e}`);\n }\n\n // android\n try {\n if (window.webview?.animationStarted) window.webview.animationStarted(true);\n } catch (e) {\n console.error(e);\n alert(`An error occurred in fabricCreateIsPremium(android): ${e}`);\n }\n};\n\n// send message to app webview that animation has finished\nexport const webviewAnimFinish = () => {\n // ios\n try {\n window.webkit?.messageHandlers?.animationFinished &&\n window.webkit.messageHandlers.animationFinished.postMessage(true);\n } catch (e) {\n console.error(e);\n alert(`An error occurred in fabricCreateIsPremium(ios): ${e}`);\n }\n\n // android\n try {\n if (window.webview?.animationFinished) window.webview.animationFinished(true);\n } catch (e) {\n console.error(e);\n alert(`An error occurred in fabricCreateIsPremium(android): ${e}`);\n }\n};\n\n// send message to app webview that animation has been replayed\nexport const webviewAnimReplay = () => {\n // ios\n try {\n window.webkit?.messageHandlers?.animationReplay &&\n window.webkit.messageHandlers.animationReplay.postMessage(true);\n } catch (e) {\n console.error(e);\n alert(`An error occurred in fabricCreateIsPremium(ios): ${e}`);\n }\n\n // android\n try {\n if (window.webview?.animationReplay) window.webview.animationReplay(true);\n } catch (e) {\n console.error(e);\n alert(`An error occurred in fabricCreateIsPremium(android): ${e}`);\n }\n};\n","import {useEffect} from 'react';\nimport {shallowEqual, useSelector, useStore} from 'react-redux';\nimport {useHistory} from 'react-router-dom';\nimport {RegistryVendor} from '~/ViewInvitation/common/RegistryVendor';\nimport {Typography} from '~/common/_pb_components/atoms/Typography';\nimport {getEditUrl, isPreview} from '~/ViewInvitation/utils';\nimport {PB_DeleteBinLine} from '~/common/svg/PB_DeleteBinLine';\nimport {PB_EditLine} from '~/common/svg/PB_EditLine';\nimport {link} from '~sass/pb_styleguide/base/_exports.sass';\n\nexport function RegistryModule(props) {\n const {showHeader = true, locationPrefix, readonly, inModal = false} = props;\n const history = useHistory();\n const {isHost} = useSelector((state) => state.user);\n const {eventId, isPremium} = useSelector((state) => state.eventDetails, shallowEqual);\n\n const registries = useSelector((state) => state.registry?.registries ?? []);\n\n const registryName = useSelector((state) => state.registry?.name ?? '');\n\n const hasMultiple = registries.length > 1;\n const moduleTitle = `${registryName}'s Gift Registr${hasMultiple ? 'ies' : 'y'}`;\n\n const preview = isPreview();\n\n return (\n setOverlayOpen(true)}\n className=\"unstyled-button view-invitation__event-settings-cta\"\n data-qa-id=\"event-settings\"\n >\n setOverlayOpen(false)}\n onSave={submitSettings}\n eventDate={new Date(startDate).getTime()}\n />\n )}\n \n );\n}\n","import React from 'react';\nimport evite from 'evite';\nimport {Picture} from '~/common/_pb_components/atoms/Picture';\nimport {Link} from '~/common/_pb_components/atoms/Link';\n\nconst {dfp} = evite;\n\nexport class ViewInvitationGoogleAd extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n refresh: false,\n inFrame: true,\n adOverride: false,\n };\n }\n\n componentDidUpdate(prevProps, prevState) {\n if (!this.state.adOverride) {\n googletag.cmd.push(() => {\n googletag.pubads().refresh([window.slideshowSideAd]);\n });\n }\n }\n\n componentDidMount() {\n if (window.ad_override?.image) {\n this.setState({\n adOverride: (\n \n setOverlayOpen(false)}\n items={items}\n userId={userId}\n name={name}\n isHost={isHost}\n hasRsvpd={hasRSVPd}\n onAssign={onAssign}\n onUnassign={onUnassign}\n />\n )}\n \n );\n}\n","import React, {useEffect, useRef, useState} from 'react';\nimport {shallowEqual, useSelector} from 'react-redux';\nimport {useLocation} from 'react-router-dom';\nimport Tooltip from 'rc-tooltip';\nimport {useMatchQuery} from '~/common/hooks/useMatchQuery';\nimport {largishAndUp, link} from '~sass/pb_styleguide/base/_exports.sass';\nimport {PB_Info} from '~/common/svg/PB_Info';\nimport {PB_SettingsLine} from '~/common/svg/PB_SettingsLine';\nimport {Typography} from '~/common/_pb_components/atoms/Typography';\nimport {WhoIsComingOverlay} from '~/ViewInvitation/common/WhoIsComingOverlay';\nimport {isPreview} from '~/ViewInvitation/utils';\nimport {CrownIcon} from '~/common/svg/CrownIcon';\n\nexport function WhosComingModule({readonly, connectCTA}) {\n const location = useLocation();\n const {matches: largeScreens} = useMatchQuery(`(min-width: ${largishAndUp})`);\n const ready = useRef(false);\n\n const {rsvpDetails} = useSelector(\n ({guestList: s}) => ({rsvpDetails: s.rsvpDetails}),\n shallowEqual\n );\n const guestPreviews = useSelector(\n (state) => state?.whoIsComing?.guestPreviews ?? [],\n shallowEqual\n );\n\n const {hostUserId, isPremium, eventId, allowKids, origin} = useSelector((state) => ({\n ...state.eventDetails,\n allowKids: !!state.eventDetails.allowKids,\n }));\n\n const isPrivateGuestlist = useSelector(\n (state) => state?.whoIsComing?.isPrivateGuestlist ?? false\n );\n\n const isHost = useSelector((state) => state.user?.isHost ?? false, shallowEqual);\n\n const [overlayOpen, setOverlayOpen] = useState(false);\n\n const sortGuests = (a, b) => {\n if (a.userId === hostUserId) return -1;\n if (b.userId === hostUserId) return 1;\n return 0;\n };\n\n const preview = isPreview();\n\n useEffect(() => {\n if (ready.current) {\n const params = new URLSearchParams(location.search);\n const utm_source = params.get('utm_source');\n if (utm_source === 'GUEST_FEED_REPLY') {\n setOverlayOpen(true);\n } else {\n const urlPieces = location.pathname.split('/');\n const page = urlPieces.length > 0 ? urlPieces[urlPieces.length - 1] : '';\n if (page === 'guestlist') {\n // Open guestlist overlay if the user is at the /guestlist URL\n setOverlayOpen(true);\n }\n }\n }\n }, [location.pathname, location.search, ready.current]);\n\n useEffect(() => {\n ready.current = true;\n }, []);\n\n return (\n <>\n connectCTA && connectCTA('guest-options', elem)}\n >\n \n Your host has hidden the guest list for this event.\n \n ) : (\n <>\n \n {guestPreviews\n .sort(sortGuests)\n .slice(0, 5)\n .map((guest, index) => (\n \n
\n ))}\n \n {!preview && (\n \n
\n );\n}\n","import React from 'react';\nimport lottie from 'lottie-web';\n\n/**\n * lottie is a wrapper for the 'bodymovin' plugin\n * for Adobe After Effects which exports animations as JSON\n * which can be rendered as an svg image.\n */\n\nexport class Lottie extends React.Component {\n static defaultProps = {\n eventListeners: [],\n isStopped: false,\n isPaused: false,\n speed: 1,\n ariaRole: 'button',\n ariaLabel: 'animation',\n isClickToPauseDisabled: false,\n title: '',\n className: '',\n };\n\n componentDidMount() {\n const {options, eventListeners} = this.props;\n\n const {loop, autoplay, animationData, rendererSettings, segments} = options;\n\n this.options = {\n container: this.el,\n renderer: 'svg',\n loop: loop !== false,\n autoplay: autoplay !== false,\n segments: segments !== false,\n animationData,\n rendererSettings,\n };\n\n this.options = {...this.options, ...options};\n\n this.anim = lottie.loadAnimation(this.options);\n\n this.registerEvents(eventListeners);\n }\n\n componentWillUpdate(nextProps /* , nextState */) {\n /* Recreate the animation handle if the data is changed */\n if (this.options.animationData !== nextProps.options.animationData) {\n this.deRegisterEvents(this.props.eventListeners);\n this.destroy();\n this.options = {...this.options, ...nextProps.options};\n this.anim = lottie.loadAnimation(this.options);\n this.registerEvents(nextProps.eventListeners);\n }\n }\n\n componentDidUpdate() {\n if (this.props.isStopped) {\n this.stop();\n } else if (this.props.segments) {\n this.playSegments();\n } else {\n this.play();\n }\n\n this.pause();\n this.setSpeed();\n this.setDirection();\n }\n\n componentWillUnmount() {\n this.deRegisterEvents(this.props.eventListeners);\n this.destroy();\n this.options.animationData = null;\n this.anim = null;\n }\n\n setSpeed() {\n this.anim.setSpeed(this.props.speed);\n }\n\n setDirection() {\n this.anim.setDirection(this.props.direction);\n }\n\n play() {\n this.anim.play();\n }\n\n playSegments() {\n this.anim.playSegments(this.props.segments);\n }\n\n stop() {\n this.anim.stop();\n }\n\n pause() {\n if (this.props.isPaused && !this.anim.isPaused) {\n this.anim.pause();\n } else if (!this.props.isPaused && this.anim.isPaused) {\n this.anim.pause();\n }\n }\n\n destroy() {\n this.anim.destroy();\n }\n\n registerEvents(eventListeners) {\n eventListeners.forEach((eventListener) => {\n this.anim.addEventListener(eventListener.eventName, eventListener.callback);\n });\n }\n\n deRegisterEvents(eventListeners) {\n eventListeners.forEach((eventListener) => {\n this.anim.removeEventListener(eventListener.eventName, eventListener.callback);\n });\n }\n\n handleClickToPause = () => {\n // This method is for handling the ability to pause by clicking on the animation\n if (this.anim.isPaused) {\n this.anim.play();\n } else {\n this.anim.pause();\n }\n };\n\n render() {\n const {width, height, ariaRole, ariaLabel, isClickToPauseDisabled, title, className} =\n this.props;\n\n const getSize = (initial) => {\n let size;\n\n if (typeof initial === 'number') {\n size = `${initial}px`;\n } else {\n size = initial || '100%';\n }\n\n return size;\n };\n\n const lottieStyles = {\n // width: getSize(width),\n height: getSize(height),\n overflow: 'hidden',\n margin: '0 auto',\n outline: 'none',\n ...this.props.style,\n };\n\n const onClickHandler = isClickToPauseDisabled ? () => null : this.handleClickToPause;\n\n return (\n Hang tight!
\n \n Your video file is taking longer than expected to
process, but we're working on it...\n
\n process, but we're working on it...\n
\n {preview && !readonly && (\n
\n );\n}\n","import {useState} from 'react';\nimport {shallowEqual, useDispatch, useSelector, useStore} from 'react-redux';\nimport {PB_Chevron} from '~/common/svg/PB_Chevron';\nimport {PB_SettingsLine} from '~/common/svg/PB_SettingsLine';\nimport {Typography} from '~/common/_pb_components/atoms/Typography';\nimport {SettingsOverlay} from '~/ViewInvitation/common/SettingsOverlay';\nimport {updateGuestNotificationSettings} from '~/ViewInvitation/reducers/apiActions';\nimport {toastAlert} from '~/common/_pb_components/atoms/Toast';\nimport {PB_AlertLine} from '~/common/svg/PB_AlertLine';\nimport {PB_CheckmarkCircle} from '~/common/svg/PB_CheckmarkCircle';\nimport {isPreview} from '~/ViewInvitation/utils';\nimport {EVENT_OPTIONS_UPDATED, EVENT_REMINDERS_UPDATED} from '~/ViewInvitation/reducers/constants';\n\nexport function SettingsModule() {\n const dispatch = useDispatch();\n const store = useStore();\n const urlParams = new URLSearchParams(window.location.search);\n const [overlayOpen, setOverlayOpen] = useState(urlParams.get('settings') == 1);\n const isHost = useSelector((state) => state.user?.isHost ?? false, shallowEqual);\n const originalSettings = useSelector((store) => store.rsvp.notifications, shallowEqual);\n\n const {reminders, eventId, start: startDate} = useSelector((store) => store.eventDetails);\n\n const submitSettings = ({activityInvolvingMe, eventActivities, guestRSVPs}, reminders) =>\n new Promise((resolve, reject) => {\n const notifications = {\n ...originalSettings,\n notify_only_my_activity: activityInvolvingMe || eventActivities,\n email_new_comments: eventActivities,\n email_new_rsvp: guestRSVPs,\n };\n\n // Update notifications\n return dispatch(\n updateGuestNotificationSettings(\n notifications,\n async () => {\n if (isHost) {\n const url = `/ajax/event/${eventId}/update`;\n const data = {\n id: eventId,\n event: {\n event_reminder_0: reminders.length > 0 && reminders[0] ? reminders[0] : null,\n event_reminder_1: reminders.length > 1 && reminders[1] ? reminders[1] : null,\n },\n };\n try {\n const response = await evite.fetch(url, {\n method: 'PATCH',\n body: JSON.stringify(data),\n credentials: 'include',\n cache: 'no-cache',\n headers: {\n 'X-CSRFToken': evite.cookie('csrftoken'),\n Accept: 'application/json',\n 'Content-Type': 'application/json; charset=utf-8',\n },\n });\n if (!response.ok) {\n const responseJSON = await response.json();\n if (responseJSON?.message) {\n toastAlert(responseJSON.message, {\n icon: \n history.push(`/${eventId}/gifting`)}\n data-qa-id=\"edit-registries\"\n >\n props.connectCTA && props.connectCTA('remove-registries', elem)}\n >\n
\n )}\n \n {showHeader && (\n \n {moduleTitle}\n \n )}\n\n
\n - \n {registries.map((registry, index) => (\n
- \n
\n \n Settings\n \n \n Choose your notification preferences.\n \n
\n \n
\n ) : (\n {this.state.adOverride}
\n \n \n
\n );\n }\n}\n","import React, {useState, useEffect} from 'react';\nimport {useSelector, useDispatch} from 'react-redux';\nimport {fetchWhatToBring, postWhatToBringSignup} from '~/ViewInvitation/reducers/apiActions';\nimport {PB_DeleteBinLine} from '~/common/svg/PB_DeleteBinLine';\nimport {PB_EditLine} from '~/common/svg/PB_EditLine';\nimport {PB_WhatToBringLine} from '~/common/svg/PB_WhatToBringLine';\nimport {Button} from '~/common/_pb_components/atoms/Button';\nimport {Typography} from '~/common/_pb_components/atoms/Typography';\nimport {largishAndUp, link} from '~sass/pb_styleguide/base/_exports.sass';\nimport {useMatchQuery} from '~/common/hooks/useMatchQuery';\nimport {WhatToBringOverlay} from '~/ViewInvitation/common/WhatToBringOverlay';\nimport {isPreview} from '~/ViewInvitation/utils';\n\nexport function WhatToBringModule(props) {\n const {onRemove, restored, onPropagateRestore, readonly} = props;\n const dispatch = useDispatch();\n const {matches: largeScreens} = useMatchQuery(`(min-width: ${largishAndUp})`);\n\n useEffect(() => {\n let eventId;\n if (props.store) {\n eventId = props.store?.getState()?.eviteEvent?.id;\n } else {\n eventId = window.event_id || window.evite_event.id;\n }\n dispatch(fetchWhatToBring(eventId));\n }, []);\n\n const {items} = useSelector((state) => state.whatToBring);\n const {userId, isHost, name} = useSelector((state) => state.user);\n const {eventId, isPremium, widgets} = useSelector((state) => state.eventDetails);\n const {wtbListId} = useSelector(({whatToBringSummary: wtbs}) => ({\n wtbListId: wtbs.list_id,\n }));\n\n const hasRSVPd = useSelector((state) => state.rsvp?.hasRsvpd ?? false);\n\n const [overlayOpen, setOverlayOpen] = useState(false);\n const onOpenWhatToBring = (e) => {\n setOverlayOpen(true);\n };\n\n const onAssign = async (userId, guestName, itemId, quantity) => {\n const item = items.find((i) => i.id === itemId);\n\n if (!item) {\n throw new Error('An error occurred during assignments.');\n }\n\n return new Promise((resolve, reject) => {\n dispatch(\n postWhatToBringSignup(eventId, wtbListId, itemId, quantity, {\n userId,\n userName: guestName,\n })\n )\n .then(() => {\n resolve();\n })\n .catch((error) => {\n reject(error);\n });\n });\n };\n\n const onUnassign = async (userId, guestName, itemId) => {\n const item = items.find((i) => i.id === itemId);\n if (!item) return;\n\n const alreadyAssigned = item.selections.map((s) => ({\n ...s.user,\n quantity: s.quantity,\n }));\n\n const user = alreadyAssigned.find((a) => a.id === userId);\n if (!user) return;\n\n const quantity = 0;\n\n return new Promise((resolve, reject) => {\n dispatch(\n postWhatToBringSignup(eventId, wtbListId, itemId, quantity, {\n userId,\n userName: guestName,\n })\n )\n .then(() => {\n resolve();\n })\n .catch((error) => {\n reject(error);\n });\n });\n };\n\n const preview = isPreview();\n\n const onRemoveModule = async () => {\n if (!preview || !isHost) return;\n // API call to remove module\n const remainingWidgets = widgets.filter((w) => w.widget_id !== wtbListId);\n const patchedEventData = {\n widgets: remainingWidgets,\n };\n onRemove(patchedEventData);\n };\n\n useEffect(() => {\n if (restored && preview && isHost) {\n // API call to restore module\n const patchedEventData = {\n widgets,\n };\n onPropagateRestore(patchedEventData);\n }\n }, [restored]);\n\n return (\n <>\n {preview && !readonly && (\n \n \n props.connectCTA && props.connectCTA('remove-wtb', elem)}\n data-qa-id=\"previewCtaRemove\"\n >\n
\n )}\n \n \n {hasRSVPd || isHost ? 'View List' : 'RSVP to View Their List'}\n \n
\n {!preview && (\n \n \n Help your host out! View their What to Bring list and sign up for your choice now.\n \n
\n \n \n What to bring\n \n
\n \n setOverlayOpen(true)}\n disabled={preview}\n >\n See All Guests\n \n )}\n
\n {isPrivateGuestlist && !isHost ? (\n \n \n Who's coming\n \n {origin === 21 && preview && (\n \n Example Guest List: This will become a real list of guests who\n RSVP \"Yes\" after you send your invitation.\n \n }\n overlayClassName=\"who-is-coming__rc-tooltip\"\n >\n \n
\n {(!isPrivateGuestlist || isHost) && (\n \n \n {guest.guestName}\n {guest.userId === hostUserId ? ' (Host)' : ''}\n {guest.guestOfHonor && \n {guest.adults}{' '}\n {guest.adults > 1\n ? allowKids\n ? 'Adults'\n : 'Guests'\n : allowKids\n ? 'Adult'\n : 'Guest'}\n {allowKids &&\n guest.kids > 0 &&\n `| ${guest.kids} ${guest.kids > 1 ? 'Kids' : 'Kid'}`}\n \n
\n {guest.rsvpComment && (\n \n \n {guest.rsvpComment.slice(0, 150)}\n {guest.rsvpComment.length > 150 ? '...' : ''}\n \n
\n )}\n \n \n This is a preview of your {ctaWordings.toLowerCase()}.\n \n {showReturnToEdit && (\n \n Done\n \n )}\n
\n ) : !hideTabs ? (\n \n {displayOrder.map((moduleName, index) => {\n const isLast = index === displayOrder.length - 1;\n const module = getComponentFromKey(moduleName);\n if (\n (moduleName === 'photo' && photos.length === 0) ||\n (moduleName === 'gift_registry' && displayOrder.includes('gifting'))\n )\n return null;\n /* eslint react/no-children-prop: [1, {\"allowFunctions\": true}] */\n return module ? (\n \n {module}\n \n ) : null;\n })}\n
\n {(displayOrder.indexOf('gift_registry') >= 0 || displayOrder.indexOf('gifting') >= 0) &&\n !mediumScreens && (\n \n
\n );\n}\n","import React, {useEffect, useState} from 'react';\nimport {useSelector, useStore} from 'react-redux';\nimport {useInView} from 'react-intersection-observer';\nimport {ScrollToTopOnMount} from '~/ViewInvitation/common/ScrollToTop';\nimport {fetchMorePhotos} from '~/ViewInvitation/reducers/apiActions';\nimport {BackLink} from '~/ViewInvitation/common/BackLink';\nimport {Heading} from '~/ViewInvitation/common/Heading';\nimport {SinglePhoto} from '~/ViewInvitation/routes/Photos/SinglePhoto';\n// import './allphotos.sass';\nimport {RestoreScrollPosition} from '~/ViewInvitation/common/RestoreScrollPosition';\nimport {PhotoUploadButton} from '~/ViewInvitation/routes/Landing/PhotoUploadButton';\nimport {isCanceled} from '~/common/utils/event_utils';\n\nexport function Photos() {\n const store = useStore();\n\n const [fetchInProgress, setFetchInProgress] = useState(false);\n const [doneLoading, setDoneLoading] = useState(false);\n\n const {cursor, more, photoPostIds} = useSelector((state) => state.photoPosts);\n\n const eventId = useSelector((state) => state.eventDetails?.eventId ?? null);\n const eventType = useSelector((state) => state.eventDetails?.eventType);\n\n const {\n ref: endPhotosRef,\n inView: endPhotosInView,\n entry,\n } = useInView({\n threshold: 0,\n });\n\n const gid = window.guest_id || '';\n\n const [fileInputValue, setFileInputValue] = useState('');\n const eventIsCanceled = isCanceled(eventType);\n\n const handleFileInputChange = (e) => {\n e.preventDefault();\n const images = e.target.files;\n\n setFileInputValue('');\n this.updateStateWithFiles(images).then();\n return false;\n };\n\n useEffect(() => {\n if (!fetchInProgress && more) {\n store.dispatch(\n fetchMorePhotos(eventId, cursor, gid, () => {\n setFetchInProgress(false);\n setDoneLoading(true);\n })\n );\n setFetchInProgress(true);\n setDoneLoading(false);\n }\n }, []);\n\n useEffect(() => {\n if (endPhotosInView && more && !fetchInProgress) {\n store.dispatch(\n fetchMorePhotos(eventId, cursor, gid, () => {\n setFetchInProgress(false);\n setDoneLoading(true);\n })\n );\n setFetchInProgress(true);\n setDoneLoading(false);\n }\n }, [endPhotosInView, more, fetchInProgress]);\n\n return (\n \n
\n\n {!postAvailable && Comments
\n\n
\n )}\n\n \n {reversedReplyIds.map((r) => (\n
\n \n )}\n \n
\n );\n}\n","import React, {useState} from 'react';\nimport {shallowEqual, useSelector, useStore} from 'react-redux';\nimport {useHistory, useLocation} from 'react-router-dom';\nimport {selectPost} from '~/ViewInvitation/reducers/posts';\nimport {deletePost} from '~/ViewInvitation/reducers/apiActions';\nimport {animateRSVPButton} from '~/ViewInvitation/common/StickyRSVP';\nimport {Avatar} from '~/ViewInvitation/common/Avatar/Avatar';\nimport {ActionSheetModal} from '~/ViewInvitation/common/Modal/ActionSheetModal';\nimport {TimeSince} from '~/ViewInvitation/common/TimeSince';\nimport {LikeButton} from '~/ViewInvitation/routes/Guests/LikeButton';\nimport {CommentButton} from '~/ViewInvitation/routes/Guests/CommentButton';\nimport {InvitationLink} from '~/ViewInvitation/common/InvitationLink';\nimport {InlineComment} from '~/ViewInvitation/common/InlineComment';\nimport {smoothScroll} from '~/common/scroll';\nimport {MoreIcon} from '~/common/svg/MoreIcon';\n\nexport function SinglePhoto(props) {\n const {postId} = props;\n const history = useHistory();\n const location = useLocation();\n const store = useStore();\n\n const [imageHasLoaded, setImageHasLoaded] = useState(false);\n const [isPrimaryOpen, setIsPrimaryOpen] = useState(false);\n const [isSecondaryOpen, setIsSecondaryOpen] = useState(false);\n const [action, setAction] = useState('');\n\n const post = useSelector(selectPost(postId), shallowEqual);\n\n const hasRSVPd = useSelector((state) => state.rsvp?.hasRsvpd ?? false);\n\n const currentUserId = useSelector((s) => s.user.userId);\n\n if (!post) return null;\n\n const options = [\n {\n label: 'Download Photo',\n action: () => setAction('download'),\n },\n ];\n if (post.userId === currentUserId) {\n options.push({\n label: 'Delete Photo',\n action: () => setAction('warning'),\n destructive: true,\n });\n }\n\n const handleClick = () => {\n if (hasRSVPd) {\n history.push(`/photos/${post.postId}${location.search}`);\n } else {\n animateRSVPButton();\n }\n };\n\n const hasReplies = post.replyIds.length !== 0;\n const whenPosted = post.when.replace(/-/g, '').replace(/:/g, '');\n\n const hasMoreComments = post.replyIds.length > 2;\n const reversedReplyIds = post && post.replyIds.slice(0).reverse();\n const initialComments = hasReplies && reversedReplyIds.slice(0, 2);\n\n const scrollToHash = () => {\n const target = document.querySelector(location.hash);\n const thisPhotoPost = `#photo_${postId}`;\n\n if (location.hash === thisPhotoPost) smoothScroll(target);\n };\n\n const handleImageOnload = () => {\n setImageHasLoaded(true);\n location.hash && scrollToHash();\n };\n\n const handleDownloadImage = () => {\n const tag = document.createElement('a');\n tag.href = post.photoUrl;\n tag.setAttribute('download', '');\n tag.setAttribute('target', '_blank');\n document.body.appendChild(tag);\n tag.click();\n };\n\n const handleDelete = () => {\n store.dispatch(deletePost(postId));\n };\n\n return (\n \n
\n\n {photoPostIds.map((postId) => (\n \n setIsPrimaryOpen(false)}\n onAfterClose={() => {\n setIsPrimaryOpen(false);\n if (action === 'warning') {\n setIsSecondaryOpen(true);\n } else if (action === 'download') {\n handleDownloadImage();\n setAction('');\n }\n }}\n onRequestClose={() => setIsPrimaryOpen(false)}\n isOpen={isPrimaryOpen}\n showCancel\n optionsList={options}\n />\n {\n setIsSecondaryOpen(false);\n }}\n onAfterClose={() => {\n setIsSecondaryOpen(false);\n if (action === 'delete') {\n handleDelete();\n }\n setAction('');\n }}\n onRequestClose={() => setIsSecondaryOpen(false)}\n isOpen={isSecondaryOpen}\n showCancel\n title=\"Delete Photo\"\n message=\"Are you sure you want to delete this photo?\"\n optionsList={[\n {\n label: 'Delete Photo',\n action: () => setAction('delete'),\n destructive: true,\n },\n ]}\n />\n
\n );\n}\n","export const trackSubmitedRSVP = (response) => {\n if (window.tags)\n window.tags.track_event('submit_rsvp', {\n invite_rsvp_response: response,\n });\n};\n\nexport const trackInviteRSVP = (response, optin) => {\n if (window.dataLayer)\n window.dataLayer.push({\n event: 'invite_rsvp',\n invite_rsvp_response: response,\n invite_rsvp_optin: optin,\n });\n};\n\nexport const trackPollVote = (pollEvent) => {\n if (window.dataLayer) {\n window.dataLayer.push({\n event: pollEvent,\n });\n }\n};\n","export const bgLightness = (colorStr, alpha) => {\n const {r, g, b} = colorToRgb(colorStr, alpha);\n\n // HSP (Highly Sensitive Poo) equation from http://alienryderflex.com/hsp.html\n const hsp = Math.sqrt(0.299 * (r * r) + 0.587 * (g * g) + 0.114 * (b * b));\n\n // Using the HSP value, determine whether the color is light or dark\n if (hsp > 127.5) return 'light';\n return 'dark';\n};\n\nexport const colorToRgb = (colorStr, a) => {\n const ctx = document.createElement('canvas').getContext('2d');\n ctx.fillStyle = colorStr;\n let color = `${ctx.fillStyle}`;\n color = +`0x${color.slice(1)}`;\n\n const RGBA = {\n red: color >> 16,\n green: (color >> 8) & 255,\n blue: color & 255,\n alpha: a,\n };\n const alpha = 1 - RGBA.alpha;\n return {\n r: Math.round((RGBA.alpha * (RGBA.red / 255) + alpha * (255 / 255)) * 255),\n g: Math.round((RGBA.alpha * (RGBA.green / 255) + alpha * (255 / 255)) * 255),\n b: Math.round((RGBA.alpha * (RGBA.blue / 255) + alpha * (255 / 255)) * 255),\n };\n};\n","import XDate from 'xdate';\nimport {CaptchaDialog} from '~/modal';\nimport {modal_ajax_error_handler} from '~/modal/_ajax_error_handler';\nimport {convertToIso} from '~/create/utils/formatters';\nimport {isCanceled} from '~/common/utils/event_utils';\n\nexport function eventHasPassed() {\n return !!window.event_has_passed;\n}\n\nexport function isPremium() {\n return !!window.is_premium;\n}\n\nexport function isMobile() {\n return !!window.is_mobile_site;\n}\n\nexport function hasAds() {\n return !isPremium() && !window.evite_event.remove_ads;\n}\n\nexport function isCard() {\n return !!window.is_card;\n}\n\nexport function isHost() {\n return !!window.evite_event.is_host_viewing;\n}\n\nexport function canSeeGuests() {\n return !window.evite_event.options.event_option_private_guestlist;\n}\n\nexport function canRSVP() {\n return !isCard() && !eventHasPassed() && !isCanceled(window.evite_event.status);\n}\n\nexport const isPreview = () => !!window.is_preview;\n\nexport function handleCaptchaJsonResponse(responseJson) {\n return new Promise((resolve) => {\n new CaptchaDialog({\n challenge: responseJson,\n onSubmit: (_response) => {\n const captchaResponse = {..._response};\n captchaResponse.name = undefined;\n resolve(captchaResponse);\n },\n }).show();\n });\n}\n\nexport function handleCaptcha(xhr, status, data, callback) {\n if (xhr && xhr.status === 412) {\n const response = JSON.parse(xhr.responseText);\n new CaptchaDialog({\n challenge: response,\n onSubmit(captcha) {\n captcha.name = void 0;\n captcha = JSON.stringify(captcha);\n callback(captcha);\n },\n }).show();\n } else {\n renderAjaxErrorModal(xhr, status, data);\n if (callback) {\n callback('');\n }\n }\n}\n\nexport function renderAjaxErrorModal(xhr, status, data) {\n const hasStatus = xhr && xhr.status;\n const isServerError = xhr && xhr.status >= 500 && xhr.status < 600;\n\n if (hasStatus && (isMobile() || isServerError)) {\n let message = 'Sorry, an error has occurred';\n let responseTextMessage;\n\n try {\n responseTextMessage = JSON.parse(xhr.responseText).message;\n } catch (error) {\n responseTextMessage = xhr.responseText;\n }\n\n if (isServerError) {\n const consoleTitle = typeof data === 'string' ? data : 'Internal Server Error';\n if (responseTextMessage && console && console.error) {\n console.error(`${consoleTitle}:\\n\\n${responseTextMessage}\\n`);\n }\n message = 'Sorry, an internal server error has occurred';\n } else if (responseTextMessage) {\n message = responseTextMessage;\n }\n\n alert(message);\n } else {\n modal_ajax_error_handler(xhr, status, data);\n }\n}\n\nexport function fixupAbsoluteURL(url) {\n // Adds https:// to url if needed\n if (url && !url.match(/https?:\\/\\//i)) {\n if (url[0] !== '/') url = `//${url}`;\n url = `https:${url}`;\n }\n return url;\n}\n","const storageAvailable = (t) => {\n try {\n const storage = window[t];\n const x = '__storage_test__';\n storage.setItem(x, x);\n storage.removeItem(x);\n console.log(`Found storage type: ${t}`);\n return true;\n } catch (e) {}\n return false;\n};\n\nlet _storage = null;\n\nexport const getStorage = () => {\n if (_storage) return _storage;\n if (storageAvailable('localStorage')) _storage = window.localStorage;\n else if (storageAvailable('sessionStorage')) _storage = window.sessionStorage;\n return _storage;\n};\n","import {useLocation} from 'react-router-dom';\nimport {usePrevious} from '~/common/hooks/usePrevious';\n\nexport function extractTab(pathname) {\n const components = pathname.split('?')[0].split('/');\n if (components.length > 1) return components[components.length - 1] || '/';\n return '/';\n}\n\nexport function trackRouteChange(tab) {\n window.setTimeout(() => {\n // DataOps use this to track pageviews within the app\n window.tags.push('view_tab_active', tab);\n window.dataLayer.push({\n event: 'pageview',\n destination_url: window.location.pathname,\n });\n }, 500);\n}\n\n/**\n * Reports top level route changes to google analytics.\n * @function useTrackPages\n * @return none\n */\nexport const useTrackPages = () => {\n const location = useLocation();\n const tab = extractTab(location.pathname);\n const previousTab = usePrevious(tab);\n if (previousTab !== tab && previousTab !== undefined) {\n trackRouteChange(tab);\n }\n};\n","import {str} from 'evite';\n\n// matching validation logic in /typhoon/assets/js/common/utils.js\nexport const validateEmail = (email, allowEmpty) => {\n const MAX_EMAIL_LENGTH = 254;\n\n email = str(email).trim();\n email = email.replace(/^[\\s(<{\\[]+/, '');\n email = email.replace(/[\\s)>}\\]]+$/, '');\n\n if (!email && allowEmpty) {\n return {valid: true, value: ''};\n }\n\n if (!email && !allowEmpty) {\n return {valid: false, message: 'Email address is required'};\n }\n\n if (email.length > MAX_EMAIL_LENGTH) {\n return {\n valid: false,\n message: `Email address max length is ${MAX_EMAIL_LENGTH}`,\n };\n }\n\n // to match backEnd validation\n // Server enforced regex\n const serverRegex =\n /(^\\s*[a-zA-Z0-9.\\\"!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9_-]+\\.[a-zA-Z0-9-.]+\\s*$)/gm;\n // Browser enforced regex\n const browserRegex =\n /^[a-zA-Z0-9.!#$%&'*+\\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/gm;\n const isValidFormat = browserRegex.exec(email) && serverRegex.exec(email);\n\n if (!isValidFormat) {\n return {valid: false, message: 'Invalid email address'};\n }\n\n return {valid: true, value: email};\n};\n","export function isWebview() {\n return !!(\n window?.webkit?.messageHandlers?.fabricCreateOnNav || window?.webview?.fabricCreateOnNav\n );\n}\n","import React, {useState, useEffect, useRef} from 'react';\nimport PropTypes from 'prop-types';\n\nexport const Button = React.forwardRef((props, ref) => {\n const [processing, setProcessing] = useState(false);\n const mountedRef = useRef(true);\n\n const onClick = async (e) => {\n // If the props.onClick handler returns a promise we wait until it completes before allowing another click to go through.\n if (processing) return;\n const value = props.onClick(e);\n if (value && typeof value.then === 'function') {\n if (!props.disableProcessing) {\n setProcessing(true);\n }\n if (props.override) {\n e.preventDefault();\n e.stopPropagation();\n }\n value.finally(() => {\n mountedRef.current && setProcessing(false);\n });\n }\n return value;\n };\n\n useEffect(\n () =>\n // track when we are unmounted so we don't update the state after un-mounting\n () => {\n mountedRef.current = false;\n },\n []\n );\n\n return (\n \n
\n\n \n {post.creatorName}\n \n
\n \n view all {post.replyIds.length} comments\n \n )}\n
\n \n {hasRSVPd && (\n <>\n
\n {hasReplies &&\n initialComments.map((commentId, i) => (\n \n
\n \n setIsPrimaryOpen(true)}\n >\n
\n \n )}\n \n \n
\n );\n}\n\nCheckbox.propTypes = {\n onChange: PropTypes.func.isRequired,\n label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n id: PropTypes.string,\n name: PropTypes.string,\n 'data-qa-id': PropTypes.string.isRequired,\n 'data-qa-value': PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n checked: PropTypes.bool.isRequired,\n disabled: PropTypes.bool,\n inline: PropTypes.bool,\n};\n","import {Button} from '~/common/_pb_components/atoms/Button';\nimport {PB_CloseLine} from '~/common/svg/PB_CloseLine';\n\nexport function CloseXButton(props) {\n return (\n \n
\n );\n}\n\nCounter.propTypes = {\n title: PropTypes.string.isRequired,\n count: PropTypes.number.isRequired,\n onPlus: PropTypes.func,\n onMinus: PropTypes.func,\n min: PropTypes.number,\n max: PropTypes.number,\n 'data-qa-id': PropTypes.string,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nexport function Divider(props) {\n return (\n {props.title}
\n\n \n \n {props.count}\n \n \n
\n \n {props.label && (\n \n )}\n {props.type === 'credit-card' ? (\n \n {props.startAdornment && ({\n ...provided,\n width: '100%',\n height: 48,\n }),\n control: (provided, {isFocused, isDisabled}) => ({\n ...provided,\n height: '100%',\n paddingLeft: 7,\n paddingRight: 7,\n fontFamily: 'Brut',\n fontWeight: 400,\n borderColor: props.error ? feedbackError : props.value ? coin : silver,\n borderWidth: isFocused ? 0 : 1,\n backgroundColor: isDisabled ? fog : linen,\n color: isDisabled ? coin : charcoal,\n }),\n placeholder: (provided) => ({\n ...provided,\n color: placeholder,\n }),\n indicatorSeparator: () => ({}),\n option: (provided) => ({\n ...provided,\n fontFamily: 'Brut',\n fontWeight: 400,\n }),\n }}\n value={\n props.type === 'time'\n ? times.find(({value}) => value === props.value)\n : props.options.find((opt) => opt.value === props.value)\n }\n placeholder={props.placeholder}\n components={{\n DropdownIndicator,\n SingleValue,\n Input: (params) =>
\n )}\n {props.error && typeof props.error === 'string' && (\n \n {props.error}\n \n )}\n \n );\n});\n\nInput.propTypes = {\n autoComplete: PropTypes.string,\n autoFocus: PropTypes.bool,\n checked: PropTypes.bool,\n 'data-qa-id': PropTypes.string.isRequired,\n disabled: PropTypes.bool,\n endAdornment: PropTypes.element,\n error: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n getValue: PropTypes.func,\n id: PropTypes.string,\n isSearchable: PropTypes.bool,\n isValidNewOption: PropTypes.func,\n label: PropTypes.string,\n showOptionalLabel: PropTypes.bool,\n name: PropTypes.string,\n max: PropTypes.number, // max number allowed as value\n maxLength: PropTypes.number, // max length of characters allowed\n min: PropTypes.number, // min number allowed as value\n onBlur: PropTypes.func,\n onChange: PropTypes.func,\n onFocus: PropTypes.func,\n onKeyPress: PropTypes.func,\n onKeyDown: PropTypes.func,\n placeholder: PropTypes.string,\n required: PropTypes.bool,\n readOnly: PropTypes.bool,\n readonly: PropTypes.bool,\n selectProps: PropTypes.object,\n startAdornment: PropTypes.element,\n success: PropTypes.bool,\n times: PropTypes.arrayOf(PropTypes.string),\n type: PropTypes.oneOf([\n 'tel',\n 'text',\n 'toggle',\n 'email',\n 'password',\n 'number',\n 'time',\n 'credit-card',\n 'cvc',\n 'expiry',\n 'select',\n 'textarea',\n 'otp',\n ]),\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nexport function Link({fullWidth, thickness, variant, as, className, disabled, ...props}) {\n let buttonClass = '';\n\n if (as) {\n buttonClass =\n as === 'primary'\n ? 'button primary'\n : as === 'transparent'\n ? 'button transparent'\n : 'button secondary';\n }\n\n return (\n \n
\n ) : props.type === 'expiry' ? (\n \n
\n ) : props.type === 'cvc' ? (\n \n
\n ) : (\n {props.startAdornment}
}\n {['time', 'select'].includes(props.type) ? (\n {props.endAdornment}
}\n \n \n {props.title}\n \n \n
\n )}\n {props.children}\n \n \n );\n}\n\nOverlay.defaultProps = {\n closeOnClickOutside: true,\n closeOnEscKeyPress: true,\n overlayCloseBtnDataQAId: 'overlay-close',\n overlayDataImpressionTracking: 'false',\n};\n\nOverlay.propTypes = {\n overlayDataImpressionTracking: PropTypes.string,\n open: PropTypes.bool.isRequired,\n fullPage: PropTypes.bool,\n type: PropTypes.oneOf(['popup', 'drawer']),\n children: PropTypes.node.isRequired,\n closeOnClickOutside: PropTypes.bool,\n closeOnEscKeyPress: PropTypes.bool,\n popupWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nexport function Picture(props) {\n const srcSetArray = Array.isArray(props.srcSet) ? props.srcSet : [props.srcSet];\n return (\n \n {props.icon}\n {props.title ? (\n \n {props.message}\n \n )}\n {props.buttonText && }\n \n
\n );\n}\n\nToast.propTypes = {\n className: PropTypes.string,\n icon: PropTypes.node,\n type: PropTypes.oneOf(['success', 'information', 'warning', 'error']),\n message: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,\n title: PropTypes.string,\n buttonText: PropTypes.string,\n onButtonClick: PropTypes.func,\n onDismiss: PropTypes.func,\n};\n","import React from 'react';\nimport styled, {css} from 'styled-components';\nimport PropTypes from 'prop-types';\nimport * as colors from '~sass/pb_styleguide/base/_exports.sass';\n\n//\n// // If there is already an h1 in the page, let's not duplicate it.\n// // variants should ONLY be classes used in pb_styleguide/base/typography.sass\n// // you may add one more class for page-specific margin/positioning.\n// // TODO make rules in the component that enforces this stuff & helps prevent typos\n//\n// // \n \n {props.title}\n \n \n {props.message}\n \n
\n ) : (\n element but looks like an \n //
\n
\n );\n}\n","import React from 'react';\nimport styled from 'styled-components';\n\nconst StyledDiv = styled.div`\n display: flex;\n justify-content: ${(props) => props.position || 'center'};\n`;\n\nexport function CircleLoader(props) {\n const {position = 'center', size = 'small'} = props;\n const src =\n size === 'small'\n ? '/assets/images/loading_circles_70px.gif'\n : '/assets/images/loading_circles_140px.gif';\n return (\n \n \n {' '}\n Find the Perfect Gift\n \n
\n \n
\n \n \n \n {discList.map((disc, index) => {\n const dataQaId = window.gift_registry\n ? `button-registry_${index + 1}`\n : 'vendor-disc__gifting_link';\n\n return (\n \n \n );\n })}\n \n )}\n
\n \n {headerText}\n
\n \n \n {' '}\n My event to-dos\n \n
\n - \n {checklistItems.map((item, i) => {\n const {state, text} = item;\n const classModifier = state === 'checked' ? '--completed' : '';\n\n return (\n
- \n \n\n\n {text}\n\n \n );\n })}\n
\n \n \n {this.props.children}\n {!this.props.hideCloseButton && (\n \n ×\n \n )}\n
\n \n \n \n
\n );\n}\n","import React, {Component} from 'react';\nimport {unmountComponentAtNode, render} from 'react-dom';\n\n// This is a 'portal' which allows us to place components on the root of the\n// body node.\n// To use it, wrap a component in a \n
\n \n {isEvent\n ? 'Your invitations are currently on the way!'\n : 'Your card is currently on the way!'}\n
\n \n {isEvent\n ? 'Check back here to see your RSVPs as they come in.'\n : 'Check back here to see when it has been viewed.'}\n
\n \n \n {children}\n
\n );\n }\n}\n","import {createBrowserHistory} from 'history';\n\nexport const history = createBrowserHistory();\n","import XDate from 'xdate';\n\nexport const cityAddressLine = (event) => {\n let line = '';\n\n if (event.city) line += `${event.city}, `;\n\n if (event.state) line += event.state;\n\n if (event.zip_code) line += ` ${event.zip_code}`;\n\n return line;\n};\n\nexport const cityZip = (event) => {\n let cityZip = '';\n if (event.city) {\n cityZip += event.city;\n if (event.state || event.zip_code) cityZip += ', ';\n }\n if (event.state) {\n cityZip += event.state;\n if (event.zip_code) cityZip += ' ';\n }\n if (event.zip_code) cityZip += ` ${event.zip_code}`;\n return cityZip;\n};\n\n// convert to a valid ISO string format from a date string\n// that is formatted like \"20171114T193000\"\nexport const convertToIso = (dateTimeStr) => {\n const isAlreadyFormatted = !dateTimeStr || (dateTimeStr && dateTimeStr.split('-').length > 2);\n if (isAlreadyFormatted) return dateTimeStr;\n\n const eviteDatePattern = /(\\d{4})(\\d{2})(\\d{2})T(\\d{2})(\\d{2})(\\d{2})/;\n return dateTimeStr.replace(\n eviteDatePattern,\n (match, year, month, date, hour, min, sec) => `${year}-${month}-${date}T${hour}:${min}:${sec}`\n );\n};\n\nexport const templateDates = (_startDateTime, _endDateTime, timezone, dateFormat, timeFormat) => {\n const startDateTime = new XDate(_startDateTime || '');\n const endDateTime = new XDate(_endDateTime || '');\n const dateFormatStr = dateFormat || 'dddd, MMMM d ';\n const timeFormatStr = timeFormat || 'h:mm TT';\n\n const isValidStart = startDateTime.toString('i') !== 'Invalid Date';\n const isValidEnd = endDateTime.toString('i') !== 'Invalid Date';\n\n let startDateStr;\n let startTimeStr = '';\n let datesLineOne = '';\n if (isValidStart) {\n startDateStr = startDateTime.toString(dateFormatStr);\n if (_startDateTime.length >= 16) startTimeStr = startDateTime.toString(timeFormatStr);\n datesLineOne = `${startDateStr} at ${startTimeStr} ${!isValidEnd ? ` ${timezone}` : ''}`;\n }\n\n let datesLineTwo = '';\n if (isValidEnd) {\n datesLineOne = datesLineOne.replace(' at', ' from');\n\n const endDateStr = endDateTime.toString(dateFormatStr);\n const endTimeStr = _endDateTime.length >= 16 ? endDateTime.toString(timeFormatStr) : '';\n\n if (isValidStart && startDateStr === endDateStr) {\n datesLineTwo = ` to ${endTimeStr} ${timezone}`;\n } else {\n datesLineTwo = ` to ${endDateStr} at ${endTimeStr} ${timezone}`;\n }\n }\n // Monday, May 10 from 6:00 PM to 10:00 PM PT\n // Monday, May 10 from 10:00 PM to Tuesday, May 11 at 2:00 AM PT\n return {start_formatted: datesLineOne, end_formatted: datesLineTwo};\n};\n\nexport const inviteStatus = () => {\n // Use 'Sent' for cards, and 'Invited' for invitations\n if (window.is_invite === false) return 'Sent';\n return 'Invited';\n};\n\nexport const guestTitle = () => {\n // Use 'Recipient' for cards, and 'Guest' for invitations\n if (window.is_invite === false) return 'Recipient';\n return 'Guest';\n};\n\nexport function formatCents(cents) {\n let neg = '';\n if (cents < 0) {\n neg = '-';\n cents *= -1;\n }\n cents = (cents < 10 ? '0' : '') + cents;\n return `${neg}$${cents.substring(0, cents.length - 2)}.${cents.substring(cents.length - 2)}`;\n}\n\n/*\n Display the year only if it is not the current year,\n and end date only if its a different day.\n*/\nexport function dateTimesWithCurrentYear(event) {\n if (!event.start_datetime) return {start_formatted: '', end_formatted: ''};\n\n try {\n const currentYear = new Date().getFullYear();\n const startYear = Number.parseInt(event.start_datetime.substring(0, 4), 10);\n const dateFormat = currentYear === startYear ? 'dddd, MMMM d' : 'dddd, MMMM d, yyyy';\n const timezone = event.known_timezone_abbr;\n\n const {start_formatted, end_formatted} = templateDates(\n convertToIso(event.start_datetime),\n convertToIso(event.end_datetime),\n timezone,\n dateFormat\n );\n return {start_formatted, end_formatted};\n } catch (e) {\n evite.warn(`Failed to parse date: ${e}`);\n }\n}\n","import React from 'react';\nimport './MessageTextArea.sass';\n\nexport function MessageTextArea(props) {\n const {textareaChanged, message} = props;\n\n return (\n \n \n
\n );\n}\n","import React from 'react';\nimport {Typography} from '~/common/_pb_components/atoms/Typography';\n\nexport function Heading(props) {\n const {isFuneral, heading, textClass} = props;\n const isPremium = window.is_plus;\n let headingText;\n\n if (heading) {\n // For Guest Success Page -- shows RSVP status\n headingText = heading;\n } else {\n // For Host Success Page\n const eventLabel = window.event_label; // should be available...\n\n const transactionData = window.transaction_data;\n const offer = transactionData?.line_items && transactionData?.line_items[0];\n\n const isProPurchase =\n transactionData?.what_the_user_received === 'premium_pass_subscription' &&\n !isPartyPassPurchase;\n\n const isPartyPassPurchase = window.is_party_pass;\n\n const isALaCartePurchase =\n window.is_standalone_purchase && transactionData?.what_the_user_received === 'event_sends';\n\n const defaultHeading = isFuneral ? 'Your invitation is on its way' : 'Congratulations!';\n\n if (isProPurchase) {\n headingText = `You just purchased Evite Pro for your account${!isFuneral ? '!' : ''}`;\n } else if (isPartyPassPurchase) {\n headingText = `Woohoo, you now have an Evite Party Pass!`;\n } else if (isALaCartePurchase) {\n headingText = `You've purchased a ${offer.name} Package with invitations for up to ${offer.num_sends_provided} guests!`;\n } else if (!isPremium || (isPremium && eventLabel)) {\n headingText = defaultHeading;\n } else {\n headingText = 'Thank you for your order!';\n }\n }\n\n return (\n \n {showImage && (\n 
\n )}\n
\n );\n}\n","import React from 'react';\n\nexport function GiftlistImage(props) {\n const {giftlistType, width} = props;\n\n return (\n \n )}\n \n \n Add Guests\n \n {cta && (\n \n {ctaText}\n \n )}\n
\n \n \n
\n );\n}\n","import React from 'react';\nimport {getGiftlistType} from './utils';\nimport {GiftlistImage} from './GiftlistImage';\nimport {capitalizeFirstLetter} from '~/common/utils';\nimport {Typography} from '~/common/_pb_components/atoms/Typography';\nimport {PB_ClickOutLine} from '~/common/svg/PB_ClickOutLine';\nimport './GuestGiftlist.sass';\n\nexport function GuestGiftlist() {\n const giftlistType = capitalizeFirstLetter(getGiftlistType());\n const {isMobile} = evite.detects;\n const url = window.evite_event.gift_list_url;\n const hostName = window.evite_event.host_name;\n if (!url) return;\n\n function GuestHeading() {\n return (\n \n Powered by ![\"Amazon\"](\"/assets/images/logos/amazon-logo-v2@2x.png\"){kind=logo}
\n
\n
\n );\n }\n\n return (\n \n
\n\n \n
\n );\n}\n","import {BIRTHDAY_CATEGORIES, HOLIDAY_CATEGORIES} from '~/create/components/GiftRegistries/utils';\nimport {stringifyParams} from '~/common/utils';\n\nexport const getGiftlistType = () => {\n const eventType = window.evite_event.event_type;\n let giftlistType;\n\n if (BIRTHDAY_CATEGORIES.includes(eventType)) {\n giftlistType = 'birthday';\n } else if (HOLIDAY_CATEGORIES.includes(eventType)) {\n giftlistType = 'holiday';\n } else {\n giftlistType = 'custom';\n }\n\n return giftlistType;\n};\n\nexport function getCompiledAmazonGiftlistUrl() {\n const event = window.evite_event;\n\n const params = stringifyParams({\n eventOwnerName: event.host_name,\n month: event.start_datetime.slice(4, 6),\n day: event.start_datetime.slice(6, 8),\n year: event.start_datetime.slice(0, 4),\n state: event.state || '',\n registryName: event.title,\n showFullDetails: 1,\n tag: 'amazongiftlists-20',\n asc_campaign: escape('giftlist=treatment'),\n });\n\n const giftlistUrl = `https://www.amazon.com/registries/${getGiftlistType()}/create?${params}`;\n\n return giftlistUrl;\n}\n","import React, {Component} from 'react';\nimport {messagingStore} from '~/messaging/store';\nimport {rtdb, serverPaths} from '~/messaging/database';\nimport {ModalDialog} from '~/modal/dialog_modal';\nimport './AcceptDecline.sass';\nimport {Button} from '~/common/_pb_components/atoms/Button';\nimport {Typography} from '~/common/_pb_components/atoms/Typography';\n\nexport class AcceptDecline extends Component {\n constructor(props) {\n super(props);\n this.userId = messagingStore.userId;\n this.state = {\n showDeclineModal: false,\n };\n }\n\n updateApprovalStatus(status) {\n const {groupId, onAcceptDeclineChanged} = this.props;\n const approvalStatusPath = `${serverPaths.guests}/${this.userId}/groups/${groupId}`;\n this.approvalStatusDoc = rtdb.get(approvalStatusPath);\n this.onDisconnect = this.approvalStatusDoc.onDisconnect();\n try {\n this.approvalStatusDoc.update({approvalStatus: status});\n this.onDisconnect.update({approvalStatus: status});\n onAcceptDeclineChanged(status);\n } catch (e) {\n evite.error('failed on updating status', e);\n }\n }\n\n blockConversation = () => {\n this.updateApprovalStatus('declined');\n window.dataLayer.push({\n event: 'newChatRequest',\n eventLabel: 'decline',\n eventValue: this.props.participants ? this.props.participants.length : '',\n });\n };\n\n acceptConversation = () => {\n this.updateApprovalStatus('accepted');\n window.dataLayer.push({\n event: 'newChatRequest',\n eventLabel: 'accept',\n eventValue: this.props.participants ? this.props.participants.length : '',\n });\n };\n\n onBlockClicked = () => {\n this.setState({showDeclineModal: true});\n };\n\n onCancelDecline = () => {\n this.setState({showDeclineModal: false});\n };\n\n render() {\n const {profiles, createdBy} = this.props;\n const senderId = Object.keys(profiles).find((x) => x === createdBy);\n const sender = profiles[senderId];\n if (sender) {\n const attendingCTA = `You have received a message from ${sender.name}. You are both invited to ${window.evite_event.title}. Declining this message will remove you from this conversation.`;\n return (\n <>\n \n
\n \n
\n \n {/*
\n {this.state.showDeclineModal && (\n {nameCTA}
*/}\n \n \n {attendingCTA}\n \n
\n \n \n Decline\n \n \n Accept\n \n
\n \n
\n )}\n \n );\n }\n return null;\n }\n}\n","import React, {PureComponent} from 'react';\nimport {PB_CloseLine} from '~/common/svg/PB_CloseLine';\nimport './Banner.sass';\n\nexport class Banner extends PureComponent {\n constructor(props) {\n super(props);\n\n this.state = {\n openBanner: true,\n };\n }\n\n onCloseClick = (e) => {\n this.setState(\n {\n openBanner: false,\n },\n this.props.onBannerClose\n );\n };\n\n render() {\n if (!this.state.openBanner) {\n return null;\n }\n\n const {type = 'info', showCloseBtn = false, text = '', icon, bannerClass = ''} = this.props;\n\n return (\n \n Decline Conversation \n \n Are you sure you want to decline this message? This action cannot be undone.\n \n
\n \n \n Cancel\n \n \n Decline\n \n
\n \n {icon}\n {text}\n\n {showCloseBtn && (\n \n
\n );\n }\n}\n","import {evite} from 'evite';\nimport React from 'react';\nimport {observer as mobxObserver} from 'mobx-react';\nimport {MessageList} from '~/messaging/components/MessageList/MessageList';\nimport {MessageForm} from '~/messaging/components/MessageForm/MessageForm';\nimport {MessageHeader} from '~/messaging/components/MessageHeader/MessageHeader';\nimport {rtdb, serverPaths} from '~/messaging/database';\nimport {messagingStore} from '~/messaging/store';\nimport {Banner} from '~/messaging/components/Banner/Banner';\nimport './Conversation.sass';\nimport {MessageErrorBoundary} from '~/messaging/components/MessageErrorBoundary/MessageErrorBoundary';\nimport {AcceptDecline} from '~/messaging/components/AcceptDecline/AcceptDecline';\nimport {isCanceled} from '~/common/utils/event_utils';\nimport {messagingPathname} from '~/messaging/utils/utils';\nimport {Divider} from '~/common/_pb_components/atoms/Divider';\nimport {PB_LockFill} from '~/common/svg/PB_LockFill';\nimport {pebble} from '~sass/pb_styleguide/base/_exports.sass';\n\n@mobxObserver\nexport class Conversation extends React.Component {\n constructor(props) {\n super(props);\n const {groupId, groupType} = props.match.params;\n const {event, userId, isPrivateGuestList, getGroup} = messagingStore;\n\n const {rsvp} = event;\n\n // Not Yet Replied SMS users cannot interact with Q\n // TODO: Fix to not depend on event.rsvp\n this.blockNyrSmsUser = rsvp && rsvp.response === 'undecided' && rsvp.invite_method === 'sms';\n\n this.userId = userId;\n this.state = {\n group: null,\n groupValues: {},\n lockConversationRender: false,\n pendingApproval: false,\n blocked: false,\n };\n\n this.groupPath = `${serverPaths.messages}/${groupType}/${groupId}`;\n this.guestPath = `${serverPaths.guests}/${this.userId}/groups/${groupId}`;\n this.guestDoc = rtdb.get(this.guestPath);\n this.onDisconnect = this.guestDoc.onDisconnect();\n\n const group = getGroup(groupId);\n group.onValues().then((res) => {\n if (!this.mounted) return;\n const values = group.value;\n // If guest list is private, all guest - guest chats should be redirected back to the message hub\n if (isPrivateGuestList && !(groupType === 'broadcast' || groupType === 'h2g')) {\n const participants = values.authUsers || {};\n const isValidConv = this.isValidPrivateConversation(Object.keys(participants));\n if (!isValidConv) {\n const location = {\n pathname: `/messages`,\n state: {bannerType: 'privateGuestList'},\n search: window.location.search || '',\n };\n this.props.history.push(location);\n }\n }\n\n this.setState({group, groupValues: values});\n });\n }\n\n setReadTimeStampCatchAndUpdate() {\n try {\n // never fail on these parts\n this.setReadTimeStamp(this.userId);\n this.guestDoc.update({isActive: true});\n this.onDisconnect.update({isActive: false});\n } catch (e) {\n evite.error('failed on mount', e);\n }\n }\n\n /**\n * Check if the conversation is valid for private guests list\n * For hosts - only 1:1 & broadcasts messages are allowed\n * For co-hosts - Only 1:1 conversation\n * For guests, only allow 1:1 conversation with a host or co-host\n * @param participantsUserIds\n * @returns {boolean}\n */\n isValidPrivateConversation = (participantsUserIds) => {\n const {groupType} = this.props.match.params;\n const {event, isCoHost} = messagingStore;\n const hostIds = event.host_ids;\n\n // Allow any host to guest messages\n if (groupType === 'broadcast' || groupType === 'h2g') {\n return true;\n }\n\n // Don't allow group messages\n if (participantsUserIds.length > 2) {\n return false;\n }\n // If co-host is viewing, allow any 1:1 messages\n // If guest is viewing, only allow messages with hosts or co-hosts\n const isValid =\n isCoHost ||\n hostIds.some((hostId) =>\n // Returns true if at least one matches. Else returns false\n // Check for 1:1 messages with co-host\n participantsUserIds.includes(hostId)\n );\n\n return isValid;\n };\n\n get routeBase() {\n const {event_id} = window;\n let base = '/event';\n if (event_id) base += `/${event_id}`;\n return base;\n }\n\n componentDidMount() {\n this.mounted = true;\n // this.getIsAccepted();\n if (googletag) {\n googletag.destroySlots && googletag.destroySlots(evite.dfp.oopSlots);\n const adhesionDiv = document.querySelector('#ad-mobile-adhesion');\n const consumableDivs = Array.from(document.querySelectorAll('.cnsmbl-audio-320x50-slider'));\n if (adhesionDiv) {\n adhesionDiv.innerHTML = '';\n adhesionDiv.style.display = 'none';\n }\n if (consumableDivs.length) {\n consumableDivs.forEach((div) => div.parentNode.removeChild(div));\n }\n }\n evite.dfp.oopSlots = [];\n this.guestDoc.onValues().then((res) => {\n switch (res.approvalStatus) {\n case 'pending':\n this.setState(\n {pendingApproval: true, createdBy: res.createdBy},\n this.setReadTimeStampCatchAndUpdate\n );\n break;\n case 'accepted':\n this.setReadTimeStampCatchAndUpdate();\n break;\n case 'declined':\n // should we redirect or should we change the approvalStatus to true?\n this.setState({blocked: true});\n const url = `${this.routeBase}/messages/?gid=${window.guest_id}`;\n this.props.history.push(url);\n break;\n default:\n // handling for old events\n this.setReadTimeStampCatchAndUpdate();\n break;\n }\n });\n }\n\n componentWillUnmount() {\n this.mounted = false;\n const adhesion = evite.dfp.autoAds.find((ad) => ad.slotId === 'ad-mobile-adhesion');\n if (adhesion) {\n evite.dfp.registerOopSlot(adhesion);\n initAdhesion();\n }\n try {\n this.state.group && this.state.group.close && this.state.group.close();\n this.guestDoc.update({isActive: false});\n // eek this removes all pending children as well\n this.onDisconnect.cancel();\n this.guestDoc.close();\n } catch (e) {\n // never fail for these nice-to-haves\n evite.error('failed during unmount', e);\n }\n }\n\n toogleModal = (isModalOpen) => {\n this.setState({\n lockConversationRender: isModalOpen,\n });\n };\n\n onAcceptDeclineChanged = (status) => {\n if (status === 'accepted') {\n this.setState({pendingApproval: false, blocked: false});\n this.setReadTimeStampCatchAndUpdate();\n } else if (status === 'declined') {\n const url = `${this.routeBase}/messages/?gid=${window.guest_id}`;\n this.props.history.push(url);\n // redirect to dashboard\n }\n };\n\n renderForm() {\n const {\n isArchived,\n event: {status},\n } = messagingStore;\n const {groupId, groupType} = this.props.match.params;\n const participants = this.state.group.getParticipants();\n // TODO: temporarily cap at 6 users so that we don't retrieve 2.5k profiles\n const trimmedParticipants = participants.slice(0, 6);\n trimmedParticipants.push(this.state.createdBy);\n const isPrivateMessage = participants.length <= 2;\n // Don't allow the guest to send messages if archived OR guest received the invite via sms and hasn't rsvped yet\n const hideForm = isArchived || this.blockNyrSmsUser;\n\n if (isArchived || isCanceled(status)) return null;\n if (this.state.pendingApproval) {\n return null;\n }\n return (\n \n {hideForm ? (\n this.getBanner()\n ) : (\n
\n );\n }\n\n renderAcceptDecline() {\n const {groupId} = this.props.match.params;\n const participants = this.state.group.getParticipants();\n const trimmedParticipants = participants.slice(0, 6);\n trimmedParticipants.push(this.state.createdBy);\n const profiles = messagingStore.getProfiles(trimmedParticipants) || {};\n if (this.state.pendingApproval) {\n return (\n \n {\n this.archiveConversation(event, conversationKey);\n }}\n conversation={conv}\n onDisabledConvoClick={this.props.onDisabledConvoClick}\n desktop={this.props.desktop}\n onDesktopConversationClick={this.props.onDesktopConversationClick}\n onDesktopNewConversationClick={this.props.onDesktopNewConversationClick}\n />\n {index < conversationsItems.length - 1 &&
\n ));\n\n if (!conversations.length && this.state.hasConversations === null) {\n // we haven't finished loading yet\n return this.renderSpinner();\n }\n if (!conversations.length && this.state.hasConversations) {\n // we haven't received the children yet, but the doc returned??\n // probably just wait for that\n return this.renderSpinner();\n }\n\n if (isHost) {\n const isBroadCastAllAvailable = this.props.collection.find(\n (conversation) =>\n conversation.key === 'all' && conversation.value.groupCategory === 'broadcast'\n );\n if (!isBroadCastAllAvailable) {\n conversations.unshift(\n \n
\n );\n }\n } else {\n // we need to check all of the host ids\n const hostIds = messagingStore.event.host_ids; // An array of host and co-host ids\n hostIds.forEach((hostId) => {\n // check if the conversation is already visible\n const h2gMessage = this.props.collection.find((conversation) => {\n const value = conversation.value || {};\n const {users} = value;\n const {groupCategory} = value;\n if (users && groupCategory) {\n const userIds = Object.keys(users);\n return userIds.includes(hostId) && userIds.length === 2;\n }\n return false;\n });\n // if is not visible we need to add it to the conversations array\n if (!h2gMessage) {\n const users = {};\n users[hostId] = hostId;\n const isCohost = hostId !== messagingStore.event.host_id;\n conversations.unshift(\n \n
\n );\n }\n });\n // }\n }\n\n if (this.props.collectionError) {\n const message =\n this.props.collectionError.message || 'Sorry, an unknown error was encountered.';\n return (\n \n {message}\n
\n );\n }\n return (\n \n {conversations}\n
\n \n );\n }\n}\n","import React, {Component} from 'react';\nimport {Link} from 'react-router-dom';\nimport {observer as mobxObserver} from 'mobx-react';\nimport {getNameString} from '~/messaging/utils/parsers';\nimport {StackedAvatars} from '~/messaging/components/StackedAvatars/StackedAvatars';\nimport {messagingStore} from '~/messaging/store';\nimport {getDateString} from '~/messaging/utils/formatters';\nimport {isUserAHost} from '~/view_invitation/utils';\nimport {messagingPathname} from '~/messaging/utils/utils';\nimport {Typography} from '~/common/_pb_components/atoms/Typography';\nimport {PB_MessagesLine} from '~/common/svg/PB_MessagesLine';\nimport {ghost} from '~sass/pb_styleguide/base/_exports.sass';\n\n@mobxObserver\nexport class SingleConversation extends Component {\n getRightContent = (conversation, conversationKey) => {\n const isHost = evite_event.is_host_viewing;\n const isDeleteDisabled =\n !evite.detects.isMobile &&\n isHost &&\n (conversation.groupCategory !== 'broadcast' || conversationKey !== 'all');\n return (\n \n \n {conversation.messageDate && getDateString(conversation.messageDate)}\n \n
\n \n );\n };\n\n render() {\n const {conversation} = this.props;\n const conv = conversation.value;\n const {isPrivateGuestList} = messagingStore;\n const groupType = conv.groupCategory;\n const users = conv.users || {};\n const userIds = Object.keys(users).filter((user_id) => user_id !== messagingStore.userId);\n\n // For private guest lists, disable group chats or g2g chats\n if (isPrivateGuestList && !this.isConversationEnabled(userIds, groupType)) {\n return this.getDisabledConversation(userIds);\n }\n\n return this.getConversationLink(userIds, groupType);\n }\n\n isConversationEnabled = (userIds, groupType) => {\n // Allow any host to guest messages\n if (groupType === 'broadcast' || groupType === 'h2g') {\n return true;\n }\n\n // userIds don't include the host id\n if (userIds.length > 1) {\n return false;\n }\n const hostIds = messagingStore.event.host_ids;\n return (\n messagingStore.isCoHost ||\n hostIds.some((hostId) =>\n // Returns true if at least one matches. Else returns false\n // Check for 1:1 messages with co-host\n userIds.includes(hostId)\n )\n );\n };\n\n getDisabledConversation = (userIds) => {\n const {isHost} = messagingStore;\n const {conversation} = this.props;\n const conv = conversation.value;\n const maxGuests = 4;\n let messageTitle = 'Group Message (Hidden)';\n\n // If a guest is viewing this, userProfiles should only have the hosts' profile data\n const userProfiles = this.getProfileInfo(userIds) || [];\n\n // If a guest is viewing and the conversation is a group chat\n if (!isHost) {\n const hostIds = messagingStore.event.host_ids;\n\n // g2g message\n if (userIds.length === 1 && !hostIds.includes(userIds[0])) {\n messageTitle = 'Message (Hidden)';\n userProfiles.push({\n userId: userIds[0],\n });\n } else if (userIds.length > 1) {\n // Remove hosts from this\n const guests = userIds.filter((userId) => !hostIds.includes(userId));\n\n let i = 0;\n while (userProfiles.length <= maxGuests && i < guests.length) {\n // Add these guys to the profiles, so it the StackedAvatar will render grey avatars for the hidden users\n userProfiles.push({\n userId: guests[i],\n });\n i++;\n }\n }\n }\n\n return (\n \n {isDeleteDisabled && (\n {\n this.props.onConversationArchived(event, conversationKey);\n }}\n className=\"conversation-list__archive\"\n data-qa-id=\"conversation-archive\"\n >\n \n \n \n
\n )}\n {!conversation.isRead && }\n \n
\n \n \n {messageTitle}\n \n \n {conv.messageStub}\n \n
\n {conversation.messageDate && (\n \n \n {getDateString(conversation.messageDate)}\n \n
\n )}\n \n );\n };\n\n onDisabledConvoClick = (e) => {\n this.props.onDisabledConvoClick(this.getGroupType());\n };\n\n getGroupType = () => {\n const {isHost} = messagingStore;\n const {conversation} = this.props;\n const conv = conversation.value || {};\n const users = conv.users || {};\n const userIds = Object.keys(users).filter((user_id) => user_id !== messagingStore.userId);\n\n if (isHost) {\n return conv.groupCategory;\n }\n return userIds.length === 1 ? 'g2g' : conv.groupCategory;\n };\n\n getProfileInfo = () => {\n const conv = this.props.conversation.value;\n let profiles = [];\n const users = conv.users || {};\n // TODO: temporarily cap at 6 users so that we don't retrieve 2.5k profiles\n const trimmedUsers = Object.keys(users).slice(0, 6);\n const userIds = trimmedUsers.filter((user_id) => user_id !== messagingStore.userId);\n\n if (userIds.length) {\n profiles = Object.values(messagingStore.getProfiles(userIds));\n }\n\n return profiles;\n };\n\n getConversationLink = (userIds) => {\n const {conversation, convModClass = ''} = this.props;\n const conv = conversation.value || {};\n const groupType = conv.groupCategory;\n const virtualGroups = ['all', 'yes', 'maybe', 'no', 'undecided', 'attended'];\n const qs = window.location.search;\n const conversationLink = messagingPathname(`/messages/${groupType}/${conversation.key}${qs}`);\n\n // check if the conversation has users\n let headingCopy = '';\n const profilesToShow = this.getProfileInfo(userIds);\n\n const names = profilesToShow.map((g) => (isUserAHost(g.userId) ? `${g.name} (Host)` : g.name));\n\n const participantNames = evite.detects.isMobile\n ? getNameString(names, 15)\n : getNameString(names, 45);\n\n const isCustomBroadcast =\n groupType === 'broadcast' && !virtualGroups.includes(conversation.key);\n const avatarType = isCustomBroadcast ? 'all' : conversation.key;\n if (groupType === 'broadcast') {\n const rsvpCopy = conversation.key === 'undecided' ? 'Not Yet Replied' : conversation.key;\n if (isCustomBroadcast) {\n headingCopy = participantNames;\n } else if (rsvpCopy !== 'attended') {\n headingCopy = conversation.key === 'all' ? 'All Guests' : `All ${rsvpCopy} RSVPs`;\n } else {\n headingCopy = 'All Attendant Guests';\n }\n }\n\n let {messageStub} = conv;\n\n // Set draft message stub\n if (!messageStub && conv.messageId && conv.messageId.toLowerCase() === 'draft') {\n const {isHost, isCoHost} = messagingStore;\n messageStub =\n isHost || isCoHost ? 'Send a message to your guest' : 'Send a message to your host';\n }\n\n const component = (\n \n
\n );\n\n // TODO: Use this when we add a desktop-specific layout for Messaging\n // return this.props.desktop ? (\n // \n {groupType !== 'broadcast' ? (\n
\n \n
\n )}\n \n
\n \n \n {groupType !== 'broadcast' && (conv.groupName || participantNames)}\n {groupType === 'broadcast' && (conv.groupName || headingCopy)}\n \n \n {messageStub}\n \n
\n {this.getRightContent(conv, conversation.key)}\n \n
\n {props.children}\n \n );\n}\n","import React from 'react';\nimport {Button} from '~/common/_pb_components/atoms/Button';\nimport {Typography} from '~/common/_pb_components/atoms/Typography';\nimport './LeaveGroup.sass';\n\nexport function LeaveGroup(props) {\n const {leaveGroup, toggleLeaveGroupView} = props;\n\n return (\n \n {Object.keys(profilesToRender).map((userId, index) => {\n const user = profilesToRender[userId];\n\n return (\n \n \n {user.name}\n \n )}\n
\n );\n })}\n {maxNumOfGuests < actualNumOfGuests && (\n \n \n +{actualNumOfGuests - maxNumOfGuests}\n \n
\n )}\n \n
\n );\n}\n","import React, {Component} from 'react';\nimport {observer as mobxObserver} from 'mobx-react';\nimport Linkify from 'linkifyjs/react';\nimport {UserAvatar} from '~/view_invitation/avatars/components';\nimport {StyledBubble} from './StyledBubble';\nimport {messagingStore} from '~/messaging/store';\nimport {MessageTimeStamp} from './MessageTimeStamp';\nimport {SeenBy} from '~/messaging/components/SeenBy/SeenBy';\nimport {isUserAHost} from '~/view_invitation/utils';\nimport {setSeenBy} from '~/messaging/utils/setSeenBy';\nimport {MessageEducation} from '~/messaging/components/MessageEducation/MessageEducation';\nimport {MessageEducationButton} from '~/messaging/components/MessageEducationButton/MessageEducationButton';\n\nimport './Message.sass';\n\n@mobxObserver\nexport class Message extends Component {\n constructor(props) {\n super(props);\n // If this message is sent by the current user\n this.isMsgFromSender = props.createdBy === messagingStore.userId;\n this.state = {\n changeRsvp: false,\n showMessageEducation: false,\n };\n }\n\n componentDidMount() {\n // Reading someone else's message\n if (this.props.createdBy !== messagingStore.userId) {\n const {userId} = messagingStore;\n const {seenBy, messageId, setReadTimeStamp} = this.props;\n setSeenBy(seenBy, messageId, setReadTimeStamp, userId);\n }\n }\n\n componentDidCatch(error, info) {\n // Display fallback UI\n // You can also log the error to an error reporting service\n evite.error('Message component failed ', error, info);\n }\n\n render() {\n const {\n type,\n createdAt,\n createdBy,\n message,\n newMessage,\n showTimestamp,\n showSeenBy,\n seenBy,\n messageId,\n groupType,\n groupId,\n } = this.props;\n\n const {showMessageEducation} = this.state;\n const isBroadcastMessage = type === 'broadcast';\n\n let profile = {};\n if (createdBy !== 'Evite') profile = messagingStore.getProfile(createdBy) || {};\n this.isMsgFromSender = createdBy === messagingStore.userId;\n\n // Render the RSVP style message\n if (type === 'rsvp') {\n return this.getRsvpMessage();\n }\n\n // for system messages, render the RSVP message style for now\n if (type === 'system') {\n return this.getRsvpMessage();\n }\n\n // Get new message body with sender's profile info\n if (!this.isMsgFromSender && newMessage) {\n return this.getNewGuestMessage(profile);\n }\n\n return (\n \n \n Leave this group\n \n \n You will be removed from this group chat.\n
\n This action cannot be undone.\n \n
\n \n This action cannot be undone.\n
\n \n Cancel\n \n \n
\n \n \n {message} \n\n {/* {isBroadcastMessage && (\n \n\n {/* {isBroadcastMessage && showMessageEducation && (\n
\n \n );\n }\n\n /**\n * Add the avatar, sender's name and the timestamp for a new message\n */\n getNewGuestMessage = (profile) => {\n const {message, createdBy, createdAt, showTimestamp} = this.props;\n const guestName = isUserAHost(profile.userId) ? `${profile.name} (Host)` : profile.name;\n\n return (\n \n {showTimestamp &&
\n );\n };\n\n /**\n * Get the RSVP status message\n */\n getRsvpMessage = () => {\n const {showRsvp, createdAt, showTimestamp} = this.props;\n const showRsvpLink = showRsvp && !this.state.changeRsvp && !window.reinvention;\n return (\n \n
\n \n {/* Name */}\n {/* \n {message} \n \n
\n {guestName}
*/}\n\n \n {showTimestamp &&
\n );\n };\n\n onMessageEducationClick = () => {\n this.setState((state, props) => ({showMessageEducation: !state.showMessageEducation}));\n };\n}\n","import React, {Component} from 'react';\nimport {getDateString} from '~/messaging/utils/formatters';\n\nexport class MessageTimeStamp extends Component {\n render() {\n const {createdAt, classes = ''} = this.props;\n return (\n \n \n
\n {this.props.message}
\n \n {getDateString(createdAt, true)}\n
\n );\n }\n}\n","import styled from 'styled-components';\nimport {tanzanite, ghost, charcoal, silver} from '~sass/pb_styleguide/base/_exports.sass';\n\nconst bubbleRadius = '1rem';\nconst baseColor = '#666e76';\nconst darkBaseColor = '#2b2e32';\nconst eviteBlue = '#3ea5dc';\n\nconst bgHex = [\n '#848F95',\n '#CA5352',\n '#DE7B15',\n '#BA8C00',\n '#947E54',\n '#51A079',\n '#4498CB',\n '#2075C0',\n '#767EC2',\n '#AB6CBA',\n];\n\nexport const StyledBubble = styled.span`\n white-space: pre-line\n word-break: break-word\n hyphens: auto;\n max-width: 80%\n display: inline-block;\n font-size: 1rem;\n text-align: left;\n padding: 0.5rem 1rem;\n transition: background-color .1s linear\n border: none;\n font-family: Brut;\n border-radius: ${(props) =>\n props.isMsgFromSender ? `${bubbleRadius} ${bubbleRadius} 0 ${bubbleRadius}` : bubbleRadius};\n color: ${(props) => (props.isMsgFromSender ? ghost : charcoal)};\n a {\n color: ${(props) => (props.isMsgFromSender ? eviteBlue : 'white')};\n text-decoration: underline\n }\n * {\n margin: auto 0\n }\n background-color: ${(props) =>\n props.isMsgFromSender ? tanzanite : props.colorId ? bgHex[props.colorId] : silver};\n`;\n","import styled from 'styled-components';\nimport {tanzanite, charcoal, silver, ghost} from '~sass/pb_styleguide/base/_exports.sass';\n\nconst bubbleRadius = '1rem';\nconst eviteBlue = '#3ea5dc';\n\nexport const StyledWidget = styled.span`\n white-space: pre-line\n word-break: break-word\n hyphens: auto;\n width: 100%;\n max-width: 20.5rem;\n display: inline-block;\n text-align: center;\n padding: 1rem;\n transition: background-color .1s linear\n border: 1px ${silver} solid;\n border-radius: ${bubbleRadius};\n color: ${charcoal};\n a {\n color: ${(props) => (props.isMsgFromSender ? tanzanite : ghost)};\n text-decoration: underline\n }\n background-color: ${ghost};\n margin-bottom: 0.75rem;\n`;\n","import React, {Component} from 'react';\nimport {observer as mobxObserver} from 'firebase-react-store';\nimport {messagingStore} from '~/messaging/store';\nimport {rtdb, serverPaths} from '~/messaging/database';\nimport {Poll} from '~/messaging/components/polls/Poll';\n\nimport './Message.sass';\n\n@mobxObserver\nexport class Widget extends Component {\n constructor(props) {\n super(props);\n\n this.state = {\n widget: null,\n participants: [],\n };\n\n const widgetPath = `${serverPaths.widget}/${props.widgetId}/public`;\n this.widgetDoc = rtdb.get(widgetPath);\n this.isMsgFromSender = props.createdBy === messagingStore.userId;\n this.createdBy = props.createdBy;\n }\n\n componentDidMount() {\n this.widgetDoc.onValues().then((res) => {\n // keep track of widget doc in local state\n // to determine whether or not to render \n
\n props.onMessageEducationClick()} />\n
\n );\n}\n","import {evite} from 'evite';\nimport React, {Component} from 'react';\nimport {Typography} from '~/common/_pb_components/atoms/Typography';\nimport './MessageErrorBoundary.sass';\n\nexport class MessageErrorBoundary extends Component {\n constructor(props) {\n super(props);\n this.state = {hasError: false};\n }\n\n componentDidCatch(error, info) {\n console.log('error:', error, info);\n this.setState({hasError: true});\n\n evite.logError(error);\n }\n\n render() {\n const errorMessage =\n this.props.errorMessage ||\n 'There was an error while loading your messages. Please refresh and try again.';\n\n if (this.state.hasError) {\n return (\n\n \n {errorMessage}\n \n
\n );\n }\n\n return this.props.children;\n }\n}\n","import React, {PureComponent} from 'react';\nimport {observer} from 'firebase-react-store';\nimport {evite} from 'evite';\nimport {rtdb} from '~/messaging/database';\nimport {TextareaAutosize} from '~/messaging/components/MessageForm/TextareaAutosize';\nimport {messagingStore} from '~/messaging/store';\nimport {CreateEditPollModalContent} from '~/messaging/components/polls/CreateEditPollModalContent';\nimport {isCanceled} from '~/common/utils/event_utils';\nimport * as utils from '../../../view_invitation/utils';\nimport './MessageForm.sass';\nimport {Typography} from '~/common/_pb_components/atoms/Typography';\nimport {Overlay} from '~/common/_pb_components/atoms/Overlay';\nimport {PB_PollLine} from '~/common/svg/PB_PollLine';\n\n@observer\nexport class MessageForm extends PureComponent {\n constructor(props) {\n super(props);\n this.doc = rtdb.get(props.path);\n this.state = {\n isModalOpen: false,\n message: '',\n sending: false,\n };\n this.messageQueue = [];\n }\n\n componentWillUnmount() {\n try {\n this.doc && this.doc.close();\n this.doc = null;\n } catch (e) {\n console.exception('Failed to close doc', e);\n }\n }\n\n render() {\n const {groupType, groupId, isPrivateMessage} = this.props;\n const {isModalOpen} = this.state;\n const isHost = window.evite_event.is_host_viewing;\n const isPollsSwitchOn = evite.features.isEnabled('q-polls');\n\n return (\n \n {isPollsSwitchOn && !isPrivateMessage && isHost && (\n <>\n \n \n Poll\n \n \n \n Send\n \n \n )}\n\n {isCanceled(window.evite_event.status) && (\n
\n );\n }\n\n openModal = () => {\n this.setState({isModalOpen: true});\n };\n\n closeModal = () => {\n this.setState({isModalOpen: false});\n };\n\n onTextareaChange = (message) => {\n this.setState({message});\n };\n\n /**\n * Check the sending state before sending the message\n */\n beforeSend = () => {\n const message = this.state.message.trim();\n\n if (this.state.sending) {\n // If the previous message still pending, add the current one to the queue\n this.messageQueue.push(message);\n this.setState({\n message: '',\n });\n } else {\n this.send(message);\n }\n };\n\n componentDidUpdate(prevProps, prevState, snapshot) {\n // When a message is sent successfully, check if there's any pending messages to be sent\n if (prevState.sending === true && this.state.sending === false) {\n this.clearMessageQueue();\n }\n }\n\n /**\n * Send messages that's queued up\n */\n clearMessageQueue = async () => {\n while (this.messageQueue.length > 0) {\n const message = this.messageQueue.shift();\n await this.send(message);\n }\n };\n\n /**\n * TODO: Handle errors\n * TODO: Add Group fetch stuff\n * Push the message back to the store\n * @param message\n * @return {Promise\n New messages cannot be posted to canceled events.\n
\n )}\n\n
\n );\n }\n}\n","import React, {PureComponent} from 'react';\nimport {messagingStore} from '~/messaging/store';\nimport {ParticipantsList} from '~/messaging/components/ParticipantsList/ParticipantsList';\nimport './InfoModalContent.sass';\nimport {SNOOZE_OPTIONS} from '~/messaging/components/SnoozeOptions/snooze-options';\nimport {LeaveGroup} from '~/messaging/components/LeaveGroup/LeaveGroup';\nimport {Button} from '~/common/_pb_components/atoms/Button';\nimport {Checkbox} from '~/common/_pb_components/atoms/Checkbox';\nimport {Divider} from '~/common/_pb_components/atoms/Divider';\nimport {Input} from '~/common/_pb_components/atoms/Input';\nimport {Typography} from '~/common/_pb_components/atoms/Typography';\nimport {PB_CloseLine} from '~/common/svg/PB_CloseLine';\n\nexport class InfoModalContent extends PureComponent {\n constructor(props) {\n super(props);\n\n const {groupName, groupType, onlyParticipants, group, guest} = this.props;\n // There seems to be a bug here... sometimes accessing guest.value triggers an exception\n const notifyIfAfter = guest.value ? guest.value.notifyIfAfter : false;\n const isMuted = (notifyIfAfter && notifyIfAfter > Number(Date.now()) + 3155695200000) || false;\n\n this.isBroadcast = groupType === 'broadcast';\n\n // display time remaining if notifyIfAfter is > today's date, but less\n // than the 100 year mark\n const selectedSnoozeOption =\n notifyIfAfter && notifyIfAfter > Date.parse(new Date()) && !isMuted ? '' : 'snooze-options-0';\n\n // Group creator will be the host if it's a broadcast message\n // Else, if the guest viewing the message matches the group's created by userId\n this.isGroupCreator =\n (this.isBroadcast && messagingStore.isHost) ||\n (group.value && group.value.createdBy === messagingStore.userId);\n\n this.state = {\n muteNotifications: isMuted,\n viewParticipants: onlyParticipants || false,\n newGroupName: groupName || (groupType === 'h2g' ? '' : group.value ? group.value.name : ''),\n selectedSnoozeOption,\n showLeaveGroup: false,\n };\n\n // lookup for snooze values\n this.snoozeMap = SNOOZE_OPTIONS;\n }\n\n handleGroupNameChange = (event) => {\n this.setState({newGroupName: event.target.value});\n };\n\n handleMuteChange = () => {\n this.setState({\n muteNotifications: !this.state.muteNotifications,\n selectedSnoozeOption: 'snooze-options-0',\n });\n };\n\n handleParticipantsClick = () => {\n this.setState({viewParticipants: true});\n };\n\n handleBackClick = (e) => {\n e.preventDefault();\n this.setState({viewParticipants: false});\n };\n\n handleSnoozeChange = (value) => {\n // turn off mute if user clicked a snooze option\n const {muteNotifications} = this.state;\n if (muteNotifications && value) {\n this.setState({muteNotifications: false});\n }\n\n this.setState({\n selectedSnoozeOption: value || 'snooze-options-0',\n });\n };\n\n handleCancelClick = (event) => {\n event.preventDefault();\n const {onCloseClick} = this.props;\n if (onCloseClick) onCloseClick();\n return false;\n };\n\n updateSnooze = async () => {\n const {selectedSnoozeOption, muteNotifications} = this.state;\n const {guest} = this.props;\n const snoozeDuration = this.snoozeMap[selectedSnoozeOption].time;\n let newNotifyTime;\n\n // if muting, set to 200 years from now\n if (snoozeDuration === 0) {\n newNotifyTime = muteNotifications ? Number(Date.now()) + 6311390400000 : 0;\n } else {\n newNotifyTime = Number(Date.now()) + snoozeDuration;\n }\n const data = {notifyIfAfter: newNotifyTime};\n\n try {\n return guest.update(data);\n } catch (error) {\n evite.error(error.message, ' setting name failed', ' with data ', data);\n this.setState({errorMsg: 'Error saving snooze option'});\n }\n };\n\n updateGroupName = async () => {\n const data = {name: this.state.newGroupName};\n\n try {\n return this.props.group.update(data);\n } catch (error) {\n evite.error(error.message, ' setting name failed', ' with data ', data);\n this.setState({errorMsg: 'Error saving new group name'});\n }\n };\n\n handleKeyPress = (event) => {\n if (event.key === 'Enter') {\n this.handleSaveClick(event);\n }\n };\n\n toggleLeaveGroupView = (event) => {\n event.preventDefault();\n if (evite.detects.isMobile) {\n const message =\n 'Leave this group\\n\\nYou will be removed from this group chat. This action cannot be undone.';\n if (window.confirm(message)) {\n this.handleLeaveGroup();\n }\n } else {\n this.setState({showLeaveGroup: !this.state.showLeaveGroup});\n }\n };\n\n handleLeaveGroup = async () => {\n const {eventId, groupId} = this.props;\n const url = `/tsunami/v1/services/event/${eventId}/group/${groupId}/guest/${window.guest_id}`;\n\n const reqOptions = {\n method: 'DELETE',\n credentials: 'include',\n cache: 'no-cache',\n headers: {\n 'X-CSRFToken': evite.cookie('csrftoken'),\n Accept: 'application/json',\n },\n };\n try {\n const response = await evite.fetch(url, reqOptions);\n\n if (response.ok) {\n // redirect to hub\n this.props.history.push(this.props.backLink);\n } else {\n console.error('handleLeaveGroup request failed with response', response.status);\n }\n } catch (error) {\n console.error('Error with fetch on handleLeaveGroup', error);\n }\n };\n\n handleSaveClick = async (event) => {\n event.preventDefault();\n const {groupType, isG2g} = this.props;\n const {newGroupName, errorMsg} = this.state;\n\n if (newGroupName && !(groupType === 'h2g' || isG2g) && this.isGroupCreator)\n await this.updateGroupName();\n\n await this.updateSnooze();\n\n if (!errorMsg) {\n this.props.onCloseClick();\n }\n };\n\n render() {\n const {participants, groupId, groupType, groupName, guest, isG2g, participantCount} =\n this.props;\n const {\n muteNotifications,\n newGroupName,\n selectedSnoozeOption,\n viewParticipants,\n showLeaveGroup,\n } = this.state;\n const heading = this.isBroadcast ? 'Recipients' : 'Participants';\n\n // Remove current user-host from recipient list\n const {userId} = messagingStore;\n if (userId in participants) {\n delete participants[userId];\n }\n const headingCount = participantCount;\n\n const virtualGroups = ['all', 'yes', 'maybe', 'no', 'undecided', 'attended'];\n const isSpecialBroadcast = this.isBroadcast && virtualGroups.includes(groupId);\n const placeholderText = isSpecialBroadcast ? groupName : 'Enter a group name';\n\n return (\n \n {!isHost && (\n
\n \n \n \n
\n MESSAGE FROM HOST
\n \n\n {!showLeaveGroup && (\n <>\n
\n );\n }\n}\n","import React, {PureComponent} from 'react';\nimport {Link} from 'react-router-dom';\nimport {observer as mobxObserver} from 'firebase-react-store';\nimport {messagingStore} from '~/messaging/store';\nimport {GroupedAvatars} from '~/messaging/components/GroupedAvatars/GroupedAvatars';\nimport {StackedAvatars} from '~/messaging/components/StackedAvatars/StackedAvatars';\nimport {InfoModalContent} from './InfoModalContent';\nimport {ParticipantsList} from '~/messaging/components/ParticipantsList/ParticipantsList';\nimport {SimpleModal} from '~/view_invitation/common/components/simple-modal';\nimport './MessageHeader.sass';\nimport {rtdb} from '~/messaging/database';\nimport {messagingPathname} from '~/messaging/utils/utils';\nimport {PB_Arrow} from '~/common/svg/PB_Arrow';\nimport {PB_InformationFill} from '~/common/svg/PB_InformationFill';\nimport {PB_MessagesLine} from '~/common/svg/PB_MessagesLine';\nimport {ghost, feedbackInformation} from '~sass/pb_styleguide/base/_exports.sass';\nimport {Typography} from '~/common/_pb_components/atoms/Typography';\nimport {Overlay} from '~/common/_pb_components/atoms/Overlay';\n\n@mobxObserver\nexport class MessageHeader extends PureComponent {\n constructor(props) {\n super(props);\n\n // max number of avatars shown\n this.maxShown = 4;\n this.headingCopy = '';\n\n // for special broadcasts\n const {groupId, groupType, eventId, userId} = this.props;\n const virtualGroups = ['all', 'yes', 'maybe', 'no', 'undecided', 'attended'];\n this.isCustomBroadcast = groupType === 'broadcast' && !virtualGroups.includes(groupId);\n\n // get document info from the groups path\n const groupsPath = `/chat-q/events/${eventId}/groups/${groupId}`;\n this.groupsDoc = rtdb.get(groupsPath);\n // get document info from the guests path\n const guestPath = `/chat-q/events/${eventId}/guests/${userId}/groups/${groupId}`;\n this.guestDoc = rtdb.get(guestPath);\n\n // guest to guest 1:1 message\n this.isG2g =\n !messagingStore.isHost &&\n this.props.groupType === 'group' &&\n this.props.participantCount === 2;\n\n // exclude 'you', unless it is a h2g. h2g messages already exclude host from count\n this.participantCount =\n groupType === 'h2g' ? this.props.participantCount : this.props.participantCount - 1;\n\n this.state = {\n isModalOpen: false,\n onlyParticipants: false,\n };\n }\n\n componentWillUnmount() {\n try {\n this.groupsDoc && this.groupsDoc.close();\n this.groupsDoc = null;\n\n this.guestDoc && this.guestDoc.close();\n this.guestDoc = null;\n } catch (e) {\n console.exception('Failed to close doc', e);\n }\n }\n\n openModal = () => {\n this.setState({isModalOpen: true});\n if (this.props.onSwitchModal) {\n this.props.onSwitchModal(true);\n }\n };\n\n closeModal = () => {\n this.setState({isModalOpen: false});\n if (this.props.onSwitchModal) {\n this.props.onSwitchModal(false);\n }\n };\n\n handleGroupedAvatarsClick = (e) => {\n e.preventDefault();\n if (this.props.participantCount <= 2) return;\n\n const {groupType, groupId} = this.props;\n\n const qs = window.location.search;\n this.props.history.push(\n messagingPathname(`/messages/${groupType}/${groupId}/participants${qs}`)\n );\n };\n\n renderParticipants = () => {\n const {name} = this.groupsDoc.value;\n\n if (this.participantCount <= this.maxShown) return null; // exclude 'you'\n\n const headerText = name || `${this.participantCount} Participants`;\n return (\n \n \n Group Chat Info\n \n \n
\n \n {headerText}\n
\n );\n };\n\n renderBroadcastHeader = () => {\n const {groupType, groupId, participantCount} = this.props;\n const count = participantCount - 1; // exclude 'you'\n\n if (groupType !== 'broadcast') return null;\n\n if (this.isCustomBroadcast) {\n if (this.groupsDoc && this.groupsDoc.value.name) {\n return this.groupsDoc.value.name;\n }\n return `${count} Recipients`;\n }\n const rsvpCopy = groupId === 'undecided' ? 'Not Yet Replied' : groupId;\n return groupId === 'all' ? 'All Guests' : `All ${rsvpCopy} RSVPs`;\n };\n\n render() {\n const {participants, backLink, groupType, groupId, userId, eventId, participantCount} =\n this.props;\n const {isModalOpen} = this.state;\n\n const titleLabel = groupType === 'broadcast' ? 'Recipients' : 'Participants';\n const avatarType = this.isCustomBroadcast ? 'all' : groupId;\n // for guests receiving 1-1 messages from host\n const isGuestAndH2g = groupType === 'h2g' && !evite_event.is_host_viewing;\n\n let modalChildren = [];\n if (isModalOpen) {\n // only create the children if the modal is open\n if (this.state.onlyParticipants) {\n modalChildren = (\n \n {backLink && (\n \n \n {groupType !== 'broadcast' &&\n (Object.keys(participants).length > 2 ? (\n <>\n \n {this.renderParticipants()}\n \n \n {Object.values(participants)\n .map((user) => user.firstName || user.lastName || user.name)\n .join(', ')}\n \n \n ) : (\n \n {this.renderParticipants()}\n \n ))}\n {groupType === 'broadcast' && (\n
\n\n {participantCount > 1 && (\n \n \n {this.renderBroadcastHeader()}\n \n
\n )}\n \n
\n \n \n Event Messages \n {this.getRightActions()}\n
\n\n {this.state.banner && this.getBanner()}\n\n {isUnknownUser ? (\n this.getGuestView()\n ) : (\n \n {!isCanceled(window.evite_event.status) && (\n \n New\n \n )}\n
\n );\n };\n}\n","import React from 'react';\nimport {Link} from 'react-router-dom';\nimport {messagingStore} from '~/messaging/store';\nimport './VirtualGroups.sass';\nimport {messagingPathname} from '~/messaging/utils/utils';\nimport {Typography} from '~/common/_pb_components/atoms/Typography';\nimport {PB_MessagesLine} from '~/common/svg/PB_MessagesLine';\nimport {ghost, largishAndUp} from '~sass/pb_styleguide/base/_exports.sass';\nimport {useMatchQuery} from '~/common/hooks/useMatchQuery';\nimport {Divider} from '~/common/_pb_components/atoms/Divider';\n\nexport function VirtualGroups(props) {\n const {\n isPremium,\n eventId,\n event: {origin},\n } = messagingStore;\n const {matches: largeScreens} = useMatchQuery(`(min-width: ${largishAndUp})`);\n\n const includeMaybe = !isPremium && origin !== 21;\n\n const getLinks = () => {\n const baseUrl = messagingPathname(`/messages/broadcast`);\n const params = window.location.search || '';\n // TODO UI FOR ATTENDED\n const rsvpGroups = ['yes', 'no', 'undecided'];\n\n if (includeMaybe) {\n rsvpGroups.splice(1, 0, 'maybe');\n }\n\n return rsvpGroups.map((group, index) => {\n const linkName =\n group === 'undecided' ? 'No Reply' : `${group.charAt(0).toUpperCase()}${group.slice(1)}`;\n const link = `${baseUrl}/${group}${params}`;\n return (\n \n
\n \n Message Guests by RSVP \n\n
\n {largeScreens && \n {getLinks()}\n
\n {messages}
\n \n );\n }\n\n getMessages = (rsvpResponse) => {\n const {userId, collection = [], groupId, groupType} = this.props;\n const {isModalOpen, modalType} = this.state;\n const messageList = [];\n\n const showHostMessage = groupType === 'h2g' || (groupType === 'broadcast' && groupId === 'all');\n\n // If there's a host message, add that to the top of the message list\n if (showHostMessage) {\n messageList.push(\n
\n );\n }\n return (\n \n
\n );\n });\n messageList.push(...messages);\n }\n\n return messageList;\n };\n\n /**\n * Returns the index of the rsvp type message\n * @returns {number}\n */\n getLastRsvpIndex = () => {\n const {collection = []} = this.props;\n for (let i = collection.length - 1; i >= 0; i--) {\n const {type} = collection[i].value;\n if (type === 'rsvp') {\n return i;\n }\n }\n return -1;\n };\n}\n","import React, {useEffect, useState} from 'react';\nimport {DatabaseLoader} from '~/messaging/database';\nimport {MessageHub} from '~/messaging/components/MessageHub/MessageHub';\nimport './Messaging.sass';\n\n// make sure the store is initialized\nimport {messagingStore} from '~/messaging/store';\nimport {useMatchQuery} from '~/common/hooks/useMatchQuery';\nimport {largishAndUp} from '~sass/pb_styleguide/base/_exports.sass';\n\nexport function Messaging(props) {\n const {matches: largeScreens} = useMatchQuery(`(min-width: ${largishAndUp})`);\n useEffect(() => {\n document.body.classList.add('messages');\n return () => {\n document.body.classList.remove('messages');\n };\n }, []);\n const [desktopConversationPreviewMode, setDesktopConversationPreviewMode] = useState();\n\n const isUserUnknown = !messagingStore.userId; // User not signed in or doesn't have a gid\n\n const onDesktopConversationClick = (e) => {\n // TODO: Open existing conversation in inline view\n };\n\n const onDesktopNewConversationClick = (e) => {\n // TODO: Open new conversation in inline view\n };\n\n const component = (\n \n
\n );\n\n // If guest is unknown, don't init the database\n if (isUserUnknown) {\n return component;\n }\n console.log('USING DATABASELOADER');\n return \n {desktopConversationPreviewMode === 'existing' ? (\n
\n )} */}\n \n Your Messages \n Send private messages to your guests \n \n Send a message\n \n
\n )}\n \n \n {heading}\n \n {bodyCopy} \n
\n );\n }\n}\n","import React, {PureComponent} from 'react';\nimport {SingleGuest} from '~/messaging/components/NewConversation/SingleGuest';\nimport {ShowMoreBtn} from '~/messaging/components/NewConversation/ShowMoreBtn';\nimport {GuestListContext} from '~/messaging/components/NewConversation/GuestListContext';\nimport {messagingStore} from '~/messaging/store';\nimport {guestlistStore} from '~/view_invitation/guestlist/store';\nimport {Typography} from '~/common/_pb_components/atoms/Typography';\n\nexport class AllGuests extends PureComponent {\n constructor(props) {\n super(props);\n\n evite.injectStores('guestlist', this);\n this.state = {\n currentPage: 0,\n guests: [],\n hasMore: false,\n isExpanded: true,\n };\n }\n\n componentDidMount() {\n this.mounted = true;\n\n this.getGuests(this.state.currentPage);\n }\n\n componentWillUnmount() {\n this.mounted = false;\n }\n\n componentDidUpdate(prevProps) {\n const {searchString} = this.props;\n if (searchString !== prevProps.searchString) {\n this.deletePreviousGuests = true;\n this.getGuests(0);\n }\n }\n\n getGuests = async (page) => {\n const {searchString, updateGuestsLoading, perPage} = this.props;\n let searchObj = {\n per_page: perPage,\n };\n\n updateGuestsLoading(true);\n\n if (searchString.length) {\n searchObj = {\n ...searchObj,\n name: searchString,\n };\n }\n\n searchObj.page = page;\n if (this.mounted) this.setState({currentPage: page});\n\n const newGuests = await messagingStore.searchProfiles(searchObj);\n if (this.mounted) this.setState({hasMore: newGuests.hasMore});\n\n if (newGuests.length) {\n const allGuest = !this.deletePreviousGuests ? this.state.guests.concat(newGuests) : newGuests;\n\n if (this.mounted) {\n this.setState({\n guests: allGuest,\n });\n }\n updateGuestsLoading(false);\n } else {\n const updatedGuests = this.deletePreviousGuests ? [] : [...this.state.guests];\n if (this.mounted) this.setState({guests: updatedGuests});\n updateGuestsLoading(false);\n }\n };\n\n shouldShowMoreBtn = () => this.state.hasMore;\n\n getNextPage = async () => {\n const nextPage = this.state.currentPage + 1;\n if (this.deletePreviousGuests) this.deletePreviousGuests = false;\n\n await this.getGuests(nextPage);\n this.setState({currentPage: nextPage});\n };\n\n handleHeaderClick = () => {\n this.setState({isExpanded: !this.state.isExpanded});\n };\n\n render() {\n const {onHandleToggleGuest, recipients} = this.props;\n const guestlistData = guestlistStore.guestlist;\n const {guests, isExpanded} = this.state;\n const shouldShowMoreBtn = this.shouldShowMoreBtn();\n const count = `all_count`;\n\n return (\n \n \n {cancelCopy}\n \n \n {actionCopy}\n \n
\n \n {guests.map((guest) => {\n const selected = recipients && !!recipients.find((x) => x.userId === guest.userId);\n return (\n
\n )}\n \n \n \n {\n this.hideSearch();\n onApplyFilter(e);\n }}\n />\n )}\n
\n - \n {guests.map((guest) => {\n const selected = recipients && !!recipients.find((x) => x.userId === guest.userId);\n return (\n
\n
\n \n );\n }\n return (\n <>\n {shouldShowHostActions && (\n \n {this.state.guests.map((guest) => {\n const selected = !!recipients.find((x) => x.userId === guest.userId);\n return (\n
\n\n {shouldShowMoreBtn && \n handleSelectAllClick(true)} data-qa-id=\"select-all-guests\">\n Select All\n \n | \n handleSelectAllClick(false)} data-qa-id=\"select-none-guests\">\n Select None\n \n
\n );\n}\n","import React, {PureComponent} from 'react';\nimport {Button} from '~/common/_pb_components/atoms/Button';\nimport {messagingStore} from '~/messaging/store';\n\nexport class MessageGuestBtn extends PureComponent {\n render() {\n return {this.getMobileButtons()}
;\n }\n\n getDesktopGroupChatButton = () => {\n const {maxGroupCount, disableGroupChat, isHost, isGuestListPrivate} = this.props;\n\n if (isGuestListPrivate) {\n return null;\n }\n\n return (\n \n {disableGroupChat && (\n
\n \n );\n };\n\n getMobileButtons = () => {\n const {guestCount, onSubmit} = this.props;\n if (guestCount === 1) {\n return (\n \n Sorry! Group chats can only hold {maxGroupCount} participants.\n {messagingStore.isHost && <>Try a Broadcast Message}\n
\n )}\n {!disableGroupChat && <>With up to {maxGroupCount} participants.}\n \n {\n onMessageTypeSelected('broadcast');\n }}\n className=\"newConversation-modal__mega_button\"\n data-qa-id=\"start-broadcast-message\"\n >\n \n Broadcast Message\n \n \n This message will be sent to each recipient privately.\n \n
\n \n
\n );\n }\n}\n","import React, {Component} from 'react';\nimport {observer} from 'mobx-react';\nimport {action} from 'mobx';\nimport {guestlistStore} from '~/view_invitation/guestlist/store';\nimport {messagingStore} from '~/messaging/store';\nimport * as actions from '~/view_invitation/guestlist/actions';\nimport {GuestList} from './GuestList';\nimport {Filters} from './Filters';\nimport {MessageGuestBtn} from './MessageGuestButton';\nimport {RecipientList} from './RecipientList';\nimport {NewConversationHeader} from './NewConversationHeader';\nimport {MessageType} from './MessageType';\nimport './NewConversation.sass';\nimport {StatusAnimation} from '~/create/components/StatusAnimation';\nimport * as utils from '~/view_invitation/utils';\nimport {MessageErrorBoundary} from '~/messaging/components/MessageErrorBoundary/MessageErrorBoundary';\nimport {ModalActions} from './ModalActions';\nimport {messagingPathname} from '~/messaging/utils/utils';\n\n@observer\nexport class NewConversation extends Component {\n constructor(props) {\n super(props);\n\n // If messages are archived, redirect them back to message hub\n if (messagingStore.isArchived) {\n const location = {\n pathname: `/messages`,\n search: window.location.search || '',\n };\n props.history.push(location);\n }\n\n this.userId = messagingStore.userId;\n this.isHost = messagingStore.isHost;\n this.maxGroupCount = window.messaging_group_limit;\n\n this.rsvpResponses = ['yes', 'no', 'undecided'];\n this.eventOrigin = messagingStore.event.origin;\n this.isRsvpOff = messagingStore.isRsvpOff;\n this.includesMaybe = !window.is_premium && this.eventOrigin !== 21;\n if (this.includeMaybe) this.rsvpResponses.push('maybe');\n\n this.state = {\n isSearch: !utils.isMobile(), // desktop opens to search tab\n searchString: '',\n recipients: Array.from(messagingStore.selected) || [],\n rsvpFilter: utils.isMobile() ? 'yes' : '',\n isMessageTypeShowing: false,\n disableGroupChat:\n messagingStore.selected && messagingStore.selected.length > this.maxGroupCount,\n allGroups: [],\n isModalOpen: true,\n currentPage: 0,\n showGuestsLoading: false,\n };\n this.isGuestListPrivate = messagingStore.isPrivateGuestList;\n }\n\n componentDidMount() {\n if (guestlistStore.fetchingGuestlist) {\n // unfortunately still need to call this one because we need to retrieve\n // entire guestlist arrays in order to do Select All\n actions.fetchGuestlistData();\n // initial call to retrieve total counts\n messagingStore.searchProfiles().then(() => {\n guestlistStore.fetchingGuestlist = false;\n });\n }\n\n // keep track of whether or not the guestlist is loaded in a modal\n if (this.props.isLoadedInModal) guestlistStore.updateIsLoadedInModal(true);\n }\n\n toggleModal = () => {\n this.setState({\n isModalOpen: !this.state.isModalOpen,\n });\n };\n\n handleBackClick = () => {\n messagingStore.selected = [];\n this.props.history.goBack();\n };\n\n updateCurrentPage = (page) => {\n this.setState({currentPage: page});\n };\n\n updateGuestsLoading = (isLoading) => {\n this.setState({showGuestsLoading: isLoading});\n };\n\n removeRecipient = (recipient) => {\n const newRecipients = [...this.state.recipients];\n const guestIndex = newRecipients.findIndex((guest) => guest.userId === recipient.userId);\n\n newRecipients.splice(guestIndex, 1);\n const disableGroupChat = newRecipients.length > this.maxGroupCount;\n\n this.setState({\n recipients: newRecipients,\n disableGroupChat,\n });\n\n this.updateAllGroupOnRemove(recipient.userId);\n };\n\n addRecipient(recipient) {\n if (this.state.recipients.indexOf(recipient.userId) < 0) {\n const newRecipients = [\n ...this.state.recipients,\n {\n userId: recipient.userId,\n name: recipient.name,\n },\n ];\n\n const disableGroupChat = newRecipients.length > this.maxGroupCount;\n\n if (this.isHost || !disableGroupChat) {\n this.setState({\n recipients: newRecipients,\n disableGroupChat,\n });\n } else {\n // This will be a guest that exceeds the max chat count\n this.setState({\n disableGroupChat,\n });\n }\n }\n }\n\n /**\n * If the user un-checks a guest from the list, remove the virtual group that guest belongs to\n * @param userId - of the guest removed from the recipient list\n */\n updateAllGroupOnRemove = (userId) => {\n if (this.state.allGroups.length > 0) {\n const rsvpGroup = this.findRsvpGroup(userId);\n const groupIndex = this.state.allGroups.indexOf(rsvpGroup);\n\n if (groupIndex >= 0) {\n const allGroups = [...this.state.allGroups];\n allGroups.splice(groupIndex, 1);\n\n this.setState({\n allGroups,\n });\n }\n }\n };\n\n /**\n * Find the RSVP response of the given user\n * @param userId\n * @return - rsvp response\n */\n findRsvpGroup = (userId) => {\n const guestList = guestlistStore.guestlist;\n for (let i = 0; i < this.rsvpResponses.length; i++) {\n const rsvpGroup = this.rsvpResponses[i];\n const found = guestList[rsvpGroup].find((guest) => guest.user_id === userId);\n if (found) {\n return rsvpGroup;\n }\n }\n };\n\n /**\n * Get all the guests that belongs to the rsvp group\n * @param rsvpGroup - yes, no, undecided, maybe\n */\n getRecipientsInGroup = (rsvpGroup) => {\n const list = guestlistStore.guestlist[rsvpGroup];\n return list.reduce((recipientsInGroup, guest) => {\n // must exclude logged in user & if user_id is null;\n // user_id is queued and may take a while to retrieve from profiles\n if (this.userId === guest.user_id || !guest.user_id) return recipientsInGroup;\n const guestInfo = {\n userId: guest.user_id,\n name: guest.name,\n };\n recipientsInGroup.push(guestInfo);\n return recipientsInGroup;\n }, []);\n };\n\n /**\n * Get the update recipient list after the current tab's guests are removed\n * @return {*[]}\n */\n getRecipientsAfterRemoveAll = (guests) => {\n const currGuestList = guests;\n const recipients = [...this.state.recipients];\n\n for (let i = 0; i < currGuestList.length; i++) {\n const currGuest = currGuestList[i];\n const foundIndex = recipients.findIndex((guest) => currGuest.userId === guest.userId);\n\n if (foundIndex >= 0) {\n recipients.splice(foundIndex, 1);\n }\n }\n return recipients;\n };\n\n @action\n handleToggleGuest = (e, guest) => {\n if (e.target.checked) {\n this.addRecipient(guest);\n } else {\n this.removeRecipient(guest);\n }\n };\n\n /**\n * When \"SELECT ALL\" clicked, add the current tab to virtual group\n * If current tab is \"All\", add only the 'all' tab to the virtual group\n */\n @action\n addAllRecipients = (guests) => {\n const currTab = this.state.rsvpFilter || 'all';\n\n if (currTab === 'all') {\n if (this.state.allGroups.length === this.rsvpResponses.length) {\n return;\n }\n const newRecipients = [];\n for (let i = 0; i < this.rsvpResponses.length; i++) {\n const group = this.rsvpResponses[i];\n const recipients = this.getRecipientsInGroup(group);\n newRecipients.push(...recipients);\n }\n\n this.setState({\n allGroups: [...this.rsvpResponses],\n recipients: newRecipients,\n disableGroupChat: newRecipients.length > this.maxGroupCount,\n });\n } else {\n if (this.state.allGroups.includes(currTab)) return;\n\n const guestsToAdd = this.getRecipientsInGroup(currTab);\n\n const filteredGuests = guestsToAdd.filter(\n (guest) =>\n this.state.recipients.findIndex((recipient) => recipient.userId === guest.userId) < 0\n );\n\n const newRecipients = [...this.state.recipients, ...filteredGuests];\n\n this.setState({\n allGroups: [...this.state.allGroups, currTab],\n recipients: newRecipients,\n disableGroupChat: newRecipients.length > this.maxGroupCount,\n });\n }\n };\n\n /**\n * When \"SELECT NONE\" clicked, remove that the current tab from virtual group\n * If current tab is \"All\", empty the virtual group\n */\n @action\n removeAllRecipients = (guests) => {\n const currTab = this.state.rsvpFilter || 'all';\n if (currTab === 'all') {\n this.setState({\n allGroups: [],\n recipients: [],\n disableGroupChat: false,\n });\n } else {\n const guestsToRemove = this.getRecipientsInGroup(currTab);\n\n const allGroups = [...this.state.allGroups];\n const currTabIndex = allGroups.indexOf(currTab);\n allGroups.splice(currTabIndex, 1);\n\n const newRecipients = this.getRecipientsAfterRemoveAll(guestsToRemove);\n\n this.setState({\n allGroups,\n recipients: newRecipients,\n disableGroupChat: newRecipients.length > this.maxGroupCount,\n });\n }\n };\n\n setSearch = (active = true) => {\n this.setState({\n isSearch: active,\n });\n };\n\n searchChanged = (searchString) => {\n this.setState({\n isSearch: true,\n searchString,\n rsvpFilter: '',\n currentPage: 0,\n });\n this.switchTabs();\n };\n\n // fired after selecting an RSVP Type\n applyFilter = (filter) => {\n this.setState({\n isSearch: false,\n searchString: '',\n rsvpFilter: filter,\n currentPage: 0,\n });\n this.switchTabs();\n };\n\n switchTabs = () => {\n // scroll to top for now\n if (this.scrollableDiv) this.scrollableDiv.scrollTop = 0;\n };\n\n setRef = (ref) => {\n this.scrollableDiv = ref;\n };\n\n // fired after clicking send message button\n gotoMessageType = (e) => {\n // If guest list is private, skip the message type selection step\n if (this.isGuestListPrivate) {\n this.handleBroadcast();\n } else {\n this.setState({isMessageTypeShowing: true});\n }\n };\n\n handleClose = (e) => {\n this.handleBackClick(e);\n };\n\n // after clicking back button on the message type screen\n backToRecipients = (e) => {\n this.setState({isMessageTypeShowing: false});\n };\n\n /**\n * For broadcast we can only send to 1 virtual group (broadcast/yes (or maybe, no, all etc))\n * If we want to send to multiple groups, we have to create a static group for now\n */\n handleBroadcast = () => {\n const {allGroups, recipients} = this.state;\n const allSize = allGroups.length;\n\n // Get all the users in each rsvp groups and any extra guests the host hand picked\n // only virtual groups.\n // when cohost select all broadcast should be treated as a normal group,\n if (allGroups.length === this.rsvpResponses.length && !messagingStore.isCoHost) {\n this.handleGroupCreated('all', 'broadcast');\n } else if (allSize === 1 && !messagingStore.isCoHost) {\n const group = allGroups[0];\n const list = guestlistStore.guestlist[group];\n // must exclude logged in user & if user_id is null;\n // user_id is queued and may take a while to retrieve from profiles\n const guests = list.filter((guest) => guest.user_id !== this.userId || !guest.user_id);\n if (guests.length === recipients.length) {\n this.handleGroupCreated(group, 'broadcast');\n } else {\n this.createGroup(true);\n }\n } else {\n this.createGroup(true);\n }\n };\n\n /**\n * This method is called after the user picks what type of chat to start\n * @param messageType - broadcast or group\n */\n messageTypeSelected = (messageType) => {\n const isBroadcast = messageType === 'broadcast';\n\n if (isBroadcast) {\n this.handleBroadcast();\n } else {\n // Group chat\n this.createGroup(false);\n }\n };\n\n /**\n {\n \"guest_id\":\"0077VPIU4U75JMRI4EPIW6VFM6JBXA\",\n \"name\":\"\",\n \"is_broadcast\":true,\n \"user_ids\":[\"01B8NWTTFHWJPAXHQEPIIJTWIDGLJQ\",\"0142NWTTFHWJPAR5IEPIIJTV4FMMQA\"]\n }\n * @return {*}\n */\n\n createGroup = async (isBroadcast) => {\n // If group chat disabled, don't create a group\n if (!isBroadcast && this.state.recipients.length > this.maxGroupCount) {\n return;\n }\n\n const payload = {\n guest_id: window.guest_id,\n name: '',\n is_broadcast: isBroadcast,\n user_ids: this.state.recipients.map((user) => user.userId),\n };\n const url = `/tsunami/v1/services/event/${window.event_id}/group`;\n const postGroup = {\n method: 'POST',\n credentials: 'include',\n cache: 'no-cache',\n body: JSON.stringify(payload),\n headers: {\n 'X-CSRFToken': evite.cookie('csrftoken'),\n Accept: 'application/json',\n },\n };\n try {\n console.info('postGroup Fetch url', url);\n const response = await evite.fetch(url, postGroup);\n const responseJson = await response.json();\n if (response.ok) {\n console.info('postGroup Successful!', responseJson);\n // send the path\n this.handleGroupCreated(responseJson.group_id, responseJson.category);\n } else {\n // TODO: Handle Error\n console.error('postGroup Failed with response', response.status);\n }\n } catch (e) {\n // TODO: Handle Error if message didn't go through\n console.error('postGroup Fetch Error', e);\n }\n };\n\n getNewConversationContent = (e) => {\n const showGroupLimitWarning =\n !this.isHost && evite.detects.isMobile && this.state.disableGroupChat;\n\n return (\n \n \n {cancelText}\n \n \n Send\n \n
\n \n {showGroupLimitWarning && this.getGuestLimitWarningBanner()}\n\n {!this.state.isMessageTypeShowing && (\n <>\n {evite.detects.isMobile && !guestlistStore.isLoadedInModal && (\n
\n );\n };\n\n render() {\n // if (evite.detects.isMobile) {\n // if it's already loaded in a modal, no need to load in another modal\n return this.getNewConversationContent();\n // }\n // return (\n // \n // \n // {!guestlistStore.isLoadedInModal && (\n // \n // {this.getLeftActions()}\n //
\n // )}\n\n // {this.getNewConversationContent()}\n // \n // \n // \n // );\n }\n\n getGuestLimitWarningBanner = () => (\n Select Guests
\n // \n //\n Group chats can only hold {this.maxGroupCount} participants\n \n \n \n
\n );\n\n closeWarningBanner = (evt) => {\n evt.preventDefault();\n this.setState({\n disableGroupChat: false,\n });\n };\n\n /**\n * TODO: add more logic for when there is an edit button on message hub\n * @returns {*}\n */\n getLeftActions = () => (\n \n \n \n Messages\n \n
\n );\n\n handleGroupCreated = (groupId, groupType) => {\n const qs = window.location.search;\n const conversationLink = messagingPathname(`/messages/${groupType}/${groupId}${qs}`);\n this.props.history.push(conversationLink);\n window.tags.track_event('create_q_group', {\n messageGroupType: groupType,\n groupId,\n });\n messagingStore.selected = [];\n };\n}\n","import React, {PureComponent} from 'react';\nimport {PB_Arrow} from '~/common/svg/PB_Arrow';\n\nexport class NewConversationHeader extends PureComponent {\n render() {\n const {backLabel, backAction, title} = this.props;\n return (\n \n
\n );\n }\n}\n","import React, {PureComponent} from 'react';\nimport {PB_CloseLine} from '~/common/svg/PB_CloseLine';\nimport {Typography} from '~/common/_pb_components/atoms/Typography';\nimport {pebble} from '~sass/pb_styleguide/base/_exports.sass';\n\nexport class RecipientList extends PureComponent {\n constructor(props) {\n super(props);\n\n // if we are opening up the modal with preselected recipients\n this.hasPreselectedRecipients =\n props.recipients.length > 0 && !props.recipients[0].hasOwnProperty('name');\n }\n\n componentDidMount() {}\n\n render() {\n const {recipients, onRecipientRemoved, shouldShowPlainStyle} = this.props;\n // in some cases, it is too expensive to getProfiles for all the users, so we only pass in\n // the userId and no name. If there's no name, only show the number of recipients at the top\n return (\n <>\n {/* {(shouldShowPlainStyle || this.hasPreselectedRecipients) && (\n \n \n
\n {title}
\n \n \n {recipients.length > 0 && (\n
\n )} */}\n\n {!shouldShowPlainStyle && (\n \n Sending to {recipients.length} recipient\n {recipients.length > 1 ? 's' : ''}\n
\n )}\n \n To: \n {recipients.map((recipient, index) => (\n \n \n {recipient.name}\n
\n \n
\n );\n }\n}\n","import React from 'react';\n\nexport function ShowMoreBtn(props) {\n return (\n \n );\n}\n","import React, {Component} from 'react';\nimport {observer} from 'mobx-react';\nimport {GuestListContext} from '~/messaging/components/NewConversation/GuestListContext';\nimport {UserAvatar} from '~/view_invitation/avatars/components';\nimport {ReplyStatus} from '~/view_invitation/guestlist/ReplyStatus';\nimport {Typography} from '~/common/_pb_components/atoms/Typography';\nimport {Checkbox} from '~/common/_pb_components/atoms/Checkbox';\n\n@observer\nexport class SingleGuest extends Component {\n constructor() {\n super();\n evite.injectStores('guestlist', this);\n evite.injectStores('messaging', this);\n }\n\n render() {\n const {guest, onHandleToggleGuest, selected} = this.props;\n\n let badge = '';\n let isMe = false;\n const isHost = window.evite_event.host_ids.includes(guest.userId);\n const isPendingHost = window.evite_event.pending_host_ids.includes(guest.userId);\n if (this.messaging.userId === guest.userId) {\n badge = 'You';\n isMe = true;\n } else if (isHost && !isPendingHost) {\n badge = 'Host';\n }\n\n const isSelected = selected || isMe;\n\n const shouldShowAvatars =\n !this.guestlist.shouldShowPlainStyle && !this.guestlist.isLoadedInModal;\n\n const shouldShowCount = guest.rsvpResponse === 'maybe' || guest.rsvpResponse === 'yes';\n\n return (\n \n
\n )}\n \n )}\n \n \n {`${guest.name}${badge ? ` (${badge})` : ''}`}\n \n\n {shouldShowCount && (\n \n {this.guestlist.allowKids ? (\n <>\n {guest.numberOfAdults} {guest.numberOfAdults > 1 ? 'Adults' : 'Adult'}\n {guest.numberOfKids > 0 &&\n `| ${guest.numberOfKids} ${guest.numberOfKids > 1 ? 'Kids' : 'Kid'}`}\n \n ) : (\n <>\n {guest.numberOfAdults + guest.numberOfKids} Guest\n {guest.numberOfAdults + guest.numberOfKids === 1 ? '' : 's'}\n \n )}\n \n )}\n
\n \n {/*
\n );\n}\n\nfunction GuestItem(props) {\n const {guest, badge} = props;\n\n return (\n \n \n {guest.name}\n {badge ? ' (You)' : ''}\n \n
\n );\n}\n","import {Component} from 'react';\nimport {observer as mobxObserver} from 'mobx-react';\nimport {messagingStore} from '~/messaging/store';\nimport * as utils from '~/view_invitation/utils';\n\nimport './ParticipantsList.sass';\nimport {Divider} from '~/common/_pb_components/atoms/Divider';\nimport {Typography} from '~/common/_pb_components/atoms/Typography';\nimport {PB_CloseLine} from '~/common/svg/PB_CloseLine';\n\n@mobxObserver\nexport class ParticipantsList extends Component {\n constructor(props) {\n super(props);\n this.state = {\n searchText: '',\n selectedList: 'seenBy',\n perPage: 50,\n currentPage: 1,\n profiles: {},\n participants: props.participants || [],\n };\n }\n\n componentDidMount() {\n this.mounted = true;\n\n // if we pass in participants as a prop, only get profiles for those participants;\n // otherwise, get profiles for the entire group\n const {participants} = this.props;\n if (!participants) {\n const group = messagingStore.getGroup(this.props.groupId);\n this.setState({participants: group.getParticipants()});\n\n group.onValues().then((res) => {\n this.getParticipants();\n });\n } else if (!Array.isArray(participants) && typeof participants === 'object') {\n const participantsObj = Object.values(participants);\n this.setState({participants: participantsObj}, () => {\n this.getParticipants();\n });\n } else {\n this.getParticipants();\n }\n }\n\n componentWillUnmount() {\n this.mounted = false;\n }\n\n getParticipants = async () => {\n const {perPage, currentPage, profiles, participants} = this.state;\n const endIndex = perPage * currentPage;\n const startIndex = endIndex - perPage;\n\n const participantsToRequest = participants.slice(startIndex, endIndex);\n const newProfiles = await messagingStore.getParticipants(participantsToRequest);\n\n if (this.mounted) {\n this.setState({\n currentPage: currentPage + 1,\n profiles: {...profiles, ...newProfiles},\n });\n }\n };\n\n render() {\n const {\n handleBackClick,\n titleLabel,\n groupType,\n isSeenByModal,\n sentToProfiles,\n canMessageUsers,\n isPoll,\n } = this.props;\n\n const {searchText, selectedList, profiles, participants} = this.state;\n\n const {userId} = messagingStore;\n\n const sentToOrSeenBy = isSeenByModal && selectedList === 'sentTo' ? sentToProfiles : profiles;\n\n // Remove current user-host from recipient list\n if (userId in participants && !isPoll) {\n delete sentToOrSeenBy[userId];\n }\n\n // TODO: not sure why we're managing both participants array AND\n // sentToOrSeenBy object - they fall out of sync when using both to represent\n // our participants\n const participantValues = !isPoll\n ? Object.values(sentToOrSeenBy).filter((user) => user.userId !== userId)\n : Object.values(sentToOrSeenBy);\n\n const groupLength = participantValues.length;\n\n const noSearchResults = participantValues.every(\n (p) => p.name.toLowerCase().indexOf(searchText.toLowerCase()) === -1\n );\n let groupParticipants;\n\n let heading = groupType === 'broadcast' ? 'Recipients' : 'Participants';\n\n heading = titleLabel || heading;\n\n const canUserMessageGuests = utils.isUserAHost(userId) && canMessageUsers;\n\n // Sort the participants by name to show alphabetically\n const sortedParticipants = participantValues.sort((a, b) => {\n const nameA = a.name.toLowerCase();\n const nameB = b.name.toLowerCase();\n\n return nameA.localeCompare(nameB);\n });\n\n if (groupLength > 0) {\n groupParticipants = Object.values(sortedParticipants).map((p, i) => {\n const isHost = window.evite_event.host_ids.includes(p.userId);\n const isPendingHost = window.evite_event.pending_host_ids.includes(p.userId);\n let badge = '';\n if (p.userId === userId) {\n badge = 'You';\n } else if (isHost && !isPendingHost) {\n badge = 'Host';\n }\n\n if (searchText === '' || p.name.toLowerCase().indexOf(searchText.toLowerCase()) > -1) {\n return (\n \n {isPoll && (\n <>\n
\n );\n }\n\n onChange = (event) => {\n this.setState({searchText: event.target.value});\n };\n\n toggleBroadcastListView = (event) => {\n this.setState({selectedList: event.target.id});\n };\n}\n","import React, {Component} from 'react';\nimport {observer as mobxObserver} from 'mobx-react';\nimport {messagingStore} from '~/messaging/store';\nimport {rtdb, serverPaths} from '~/messaging/database';\nimport {messagingPathname} from '~/messaging/utils/utils';\nimport {PB_Arrow} from '~/common/svg/PB_Arrow';\nimport {Typography} from '~/common/_pb_components/atoms/Typography';\n\n// since we are also loading the ParticipantsList component as a route, we\n// are unable to pass in the props that it normally would expect. Use this HOC\n// for \"props proxying\"\nexport function participantsWrapper(ParticipantsList) {\n return @mobxObserver\n class ParticipantsWrapperHOC extends Component {\n constructor(props) {\n super(props);\n const {groupId, groupType} = props.match.params;\n const {userId, isPrivateGuestList, getGroup} = messagingStore;\n\n this.userId = userId;\n this.groupPath = `${serverPaths.messages}/${groupType}/${groupId}`;\n this.guestPath = `${serverPaths.guests}/${this.userId}/groups/${groupId}`;\n this.guestDoc = rtdb.get(this.guestPath);\n this.onDisconnect = this.guestDoc.onDisconnect();\n\n // if we passed a list of participants through ,\n // i.e., in NonVoters component\n if (props.location && props.location.state) {\n if (props.location.state.participants) {\n this.participants = props.location.state.participants;\n }\n if (props.location.state.sentToProfiles) {\n this.sentToProfiles = props.location.state.sentToProfiles;\n }\n if (props.location.state.isSeenByModal) {\n this.isSeenByModal = props.location.state.isSeenByModal;\n this.titleLabel = `Seen By (${this.participants.length})`;\n }\n }\n\n this.state = {\n group: null,\n };\n\n if (!props.history) console.log('Got No History: ');\n const group = getGroup(groupId);\n\n group.onValues().then((res) => {\n if (!this.mounted) return;\n const values = group.value;\n // If guest list is private, all guest - guest chats should be redirected back to the message hub\n if (isPrivateGuestList && !(groupType === 'broadcast' || groupType === 'h2g')) {\n const participants = values.authUsers || {};\n const isValidConv = this.isValidPrivateConversation(Object.keys(participants));\n if (!isValidConv) {\n const location = {\n pathname: messagingPathname(`/messages`),\n state: {bannerType: 'privateGuestList'},\n search: window.location.search || '',\n };\n this.props.history.push(location);\n }\n }\n this.setState({\n group,\n groupValues: values,\n });\n });\n }\n\n componentDidMount() {\n this.mounted = true;\n }\n\n componentWillUnmount() {\n this.mounted = false;\n try {\n this.state.group && this.state.group.close && this.state.group.close();\n this.guestDoc.update({isActive: false});\n // eek this removes all pending children as well\n this.onDisconnect.cancel();\n this.guestDoc.close();\n } catch (e) {\n // never fail for these nice-to-haves\n evite.error('failed during unmount', e);\n }\n }\n\n handleBackClick = () => {\n const {groupType, groupId} = this.props.match.params;\n const qs = window.location.search;\n this.props.history.push(messagingPathname(`/messages/${groupType}/${groupId}${qs}`));\n };\n\n onGoBack = () => {\n this.props.history.goBack();\n };\n\n render() {\n if (this.state.group === null) return null;\n const {groupId, groupType} = this.props.match.params;\n\n return (\n \n \n {heading}\n \n \n
\n \n
\n )}\n {/* Temporarily comment out for MVP, will re-enable in EVT-15116 */}\n {/* {!canUserMessageGuests && (\n \n
\n )} */}\n - \n {groupParticipants}\n {groupParticipants.length > 0 &&\n this.state.participants.length > Object.keys(this.state.profiles).length && (\n
- \n
\n {\n this.props.handleMessageUsersClick(participants);\n }}\n data-qa-id=\"messageThisGroup\"\n >\n Message This Group\n \n
\n )} */}\n \n
\n );\n }\n };\n}\n","import React, {Component} from 'react';\nimport {observer as mobxObserver} from 'mobx-react';\nimport {messagingStore} from '~/messaging/store';\nimport './ProductEd.sass';\nimport {messagingPathname} from '~/messaging/utils/utils';\nimport {Link} from 'react-router-dom';\nimport {Typography} from '~/common/_pb_components/atoms/Typography';\nimport {Overlay} from '~/common/_pb_components/atoms/Overlay';\nimport {ParticipantsList} from '~/messaging/components/ParticipantsList/ParticipantsList';\nimport {participantsWrapper} from '~/messaging/components/ParticipantsList/participantsWrapper';\nimport {PB_CloseLine} from '~/common/svg/PB_CloseLine';\n\n@mobxObserver\nexport class ProductEd extends Component {\n constructor(props) {\n super(props);\n\n this.headingCopy = '';\n this.state = {\n participantsModalOpen: false,\n };\n }\n\n groupParticipantsUrl = () => {\n const {groupType, groupId} = this.props;\n const qs = window.location.search;\n\n return messagingPathname(`/messages/${groupType}/${groupId}/participants${qs}`);\n };\n\n getHeadingCopy = () => {\n if (groupType === 'broadcast') {\n const rsvpCopy = groupId === 'undecided' ? 'Not Yet Replied' : groupId;\n if (isCustomBroadcast) {\n this.headingCopy = `${participantCount} Recipients`;\n } else {\n this.headingCopy = groupId === 'all' ? 'All Guests' : `All ${rsvpCopy} RSVPs`;\n }\n }\n };\n\n getBroadcastLink = () => {\n const {groupType, groupId} = this.props;\n const virtualGroups = ['all', 'yes', 'maybe', 'no', 'undecided', 'attended'];\n const isCustomBroadcast = groupType === 'broadcast' && !virtualGroups.includes(groupId);\n const virtualGroupNames = {\n yes: 'Yes',\n maybe: 'Maybe',\n no: 'No',\n undecided: 'Not Yet Replied',\n };\n\n if (isCustomBroadcast) {\n return {\n dataQaId: 'view-recipientslist',\n component: <>View List of Recipients,\n };\n }\n if (groupId === 'all') {\n return {\n dataQaId: 'view-all-guestslist',\n component: <>View List of All Guests,\n };\n }\n return {\n dataQaId: virtualGroupNames[groupId]\n ? `view-all-${virtualGroupNames[groupId].toLowerCase().replaceAll(' ', '-')}-rsvpslist`\n : 'view-all-rsvpslist',\n component: (\n <>\n View list of All\n {virtualGroupNames[groupId]} RSVPs\n \n ),\n };\n };\n\n getBroadcastDescription = () => {\n const {groupType, groupId, participants, participantCount} = this.props;\n const virtualGroups = ['all', 'yes', 'maybe', 'no', 'undecided', 'attended'];\n const virtualGroupNames = {\n yes: 'Yes',\n maybe: 'Maybe',\n no: 'No',\n undecided: 'Not Yet Replied',\n };\n const groupName = virtualGroupNames[groupId];\n const {userId} = messagingStore;\n // Remove current user-host from recipient list\n if (groupType === 'broadcast' && userId in participants) {\n delete participants[userId];\n }\n\n const isCustomBroadcast = groupType === 'broadcast' && !virtualGroups.includes(groupId);\n\n if (isCustomBroadcast) {\n return (\n <>\n This is a broadcast list with {participantCount - 1} recipients. Messages are sent to each\n guest privately\n \n );\n }\n if (this.props.groupId === 'all') {\n return 'This is a broadcast list with All Guests. Messages are sent to each guest privately.';\n }\n return (\n <>\n This is a broadcast list that sends to all guests who have RSVP'd\n {groupName} . The list will change as guests\n change their RSVP status. Messages are sent to each guest privately.\n \n );\n };\n\n getDescription = () => {\n const {groupType, participants} = this.props;\n const isBroadcast = groupType === 'broadcast';\n const actualNumOfGuests = Object.keys(participants).length;\n const isPrivateMessage = groupType === 'h2g' || actualNumOfGuests === 1;\n\n if (isBroadcast) {\n return this.getBroadcastDescription();\n }\n if (isPrivateMessage) {\n if (Object.keys(participants).length === 0) {\n return 'This is a private message';\n }\n const privateMsgParticipant = Object.keys(participants).find(\n (id) => id !== messagingStore.userId\n );\n\n return <>This is a private message with {participants[privateMsgParticipant].name};\n }\n return <>This is a group chat. Participants will see each other's responses.;\n };\n\n render() {\n const {groupType, groupId, participants, messageCount} = this.props;\n const isBroadcast = groupType === 'broadcast';\n const actualNumOfGuests = Object.keys(participants).length;\n const isPrivateMessage = groupType === 'h2g' || actualNumOfGuests === 1; // actualNumOfGuests does not include the viewing user\n const firstMessageClass = messageCount > 0 ? 'has-messages' : '';\n const msgType = groupType;\n\n const onParticipantListClose = () => this.setState({participantsModalOpen: false});\n\n const heading = isBroadcast ? 'Recipients' : 'Participants';\n const modalChildren = (\n \n \n \n Participants\n \n
\n \n
\n );\n\n const broadcastLink = this.getBroadcastLink();\n\n return (\n \n
\n \n \n {heading} ({actualNumOfGuests})\n \n \n
\n \n
\n );\n }\n}\n","import React, {Component} from 'react';\nimport {observer as mobxObserver} from 'mobx-react';\nimport {Link} from 'react-router-dom';\nimport {messagingStore} from '~/messaging/store';\nimport {messagingPathname} from '~/messaging/utils/utils';\nimport {pebble} from '~sass/pb_styleguide/base/_exports.sass';\nimport {PB_BroadcastLine} from '~/common/svg/PB_BroadcastLine';\n\n@mobxObserver\nexport class SeenBy extends Component {\n //\n // /**\n // * Get seenBy copy\n // * Get a list of users' names if the seen by count is <4\n // * If the seen by count is 4 or more, just display the count\n // * If the message is a broadcast, show Sent To \n \n {this.getDescription()}\n \n {isBroadcast && (\n this.setState({participantsModalOpen: true})}\n data-qa-id={broadcastLink.dataQaId}\n >\n {broadcastLink.component}\n \n )}\n
\n \n Sent to {recipientCount}\n
\n \n )}\n\n Sent to {recipientCount}\n
\n \n \n \n );\n }\n if (seenByCount >= 0 && seenByCount < 4) {\n return{seenByStr}
;\n }\n return ;\n };\n\n getSeenByText = (seenByCount) => (\n <>\n Seen by {seenByCount}\n \n );\n\n render() {\n const {showSeenBy} = this.props;\n\n if (showSeenBy) {\n return {this.getSeenBy()}
;\n }\n return ;\n }\n}\n","// json object containing various snooze\n// and mute options\n\nexport const SNOOZE_OPTIONS = {\n 'snooze-options-0': {\n label: 'Off',\n time: 0,\n },\n 'snooze-options-1': {\n label: '2 hours',\n time: 7200000,\n },\n 'snooze-options-2': {\n label: '4 hours',\n time: 14400000,\n },\n 'snooze-options-3': {\n label: '8 hours',\n time: 28800000,\n },\n 'snooze-options-4': {\n label: '1 day',\n time: 86400000,\n },\n};\n","import React from 'react';\nimport {UserAvatar} from '~/view_invitation/avatars/components';\nimport './StackedAvatars.sass';\n\n// a component that displays avatars in an overlapping stack\nexport function StackedAvatars(props) {\n const {profiles, maxShown, nameShown} = props;\n\n const numOfGuests =\n (profiles && profiles.length && profiles.length >= maxShown ? maxShown : profiles.length) || 0;\n\n // only render subset of guest avatars if the list is long\n const guestsToRender = profiles && profiles.length > 0 ? profiles.slice(0, numOfGuests) : [];\n\n return (\n \n
\n ))}\n \n );\n}\n","import React, {PureComponent} from 'react';\nimport update from 'immutability-helper';\nimport {rtdb} from '~/messaging/database';\nimport './CreateEditPollModalContent.sass';\nimport {ModalContent} from '~/messaging/components/ModalContent/ModalContent';\nimport {messagingStore} from '~/messaging/store';\nimport {Overlay} from '~/common/_pb_components/atoms/Overlay';\nimport {Typography} from '~/common/_pb_components/atoms/Typography';\nimport {Divider} from '~/common/_pb_components/atoms/Divider';\nimport {Input} from '~/common/_pb_components/atoms/Input';\nimport {Checkbox} from '~/common/_pb_components/atoms/Checkbox';\nimport {Button} from '~/common/_pb_components/atoms/Button';\nimport {PB_CloseLine} from '~/common/svg/PB_CloseLine';\nimport {pebble} from '~sass/pb_styleguide/base/_exports.sass';\n\nexport class CreateEditPollModalContent extends PureComponent {\n constructor(props) {\n super(props);\n\n // use this to get id & edit after widget has been saved\\\n const {pollData} = props;\n const editPoll = pollData && pollData.widgetId && pollData.content;\n\n if (editPoll) {\n const {widgetId, content} = pollData;\n const {options, voteCount, question, allow_other_option} = content;\n\n // format options and append their vote counts\n const formattedOptions = Object.keys(options).map((key) => ({\n option: options[key],\n response_count: voteCount[key],\n id: key,\n }));\n this.state = {\n editingPoll: true,\n widgetId,\n allow_other_option,\n question,\n options: formattedOptions,\n minOptions: allow_other_option ? 1 : 2,\n maxOptions: 6,\n validationErrors: null,\n btnDisabled: false,\n original_poll_data: formattedOptions,\n showInternalModal: false,\n modalChildren: <>,\n };\n } else {\n this.state = {\n editingPoll: false,\n allow_other_option: false,\n question: '',\n options: [{option: ''}, {option: ''}],\n minOptions: 2,\n maxOptions: 6,\n validationErrors: null,\n btnDisabled: false,\n showInternalModal: false,\n modalChildren: <>,\n };\n }\n }\n\n handleAllowOtherOptionsChange = () => {\n this.setState(\n {\n allow_other_option: !this.state.allow_other_option,\n },\n () => {\n this.setState({minOptions: this.state.allow_other_option ? 1 : 2});\n }\n );\n };\n\n render() {\n const {editingPoll, question, options, minOptions, maxOptions, allow_other_option} = this.state;\n const showAddOptionLink = options.length < maxOptions;\n const option_nodes = options.map((opt, i) => {\n const {option, response_count, autofocus} = opt;\n const optionNum = i + 1;\n const inputRequired = optionNum <= minOptions;\n const canRemove = options.length > minOptions;\n const inputTabIndex = 2 + i * 2;\n return (\n \n this.handleOptionChange(i, e)}\n // onKeyDown={(e) => this.handleOptionKeyDown(i, e)}\n maxLength={24}\n required={inputRequired}\n tabIndex={inputTabIndex}\n autoFocus={autofocus}\n disabled={response_count > 0}\n data-qa-id=\"poll-option\"\n />\n {canRemove && (\n this.handleRemoveOption(i, e)}\n option={options[i]}\n key={i}\n index={i}\n tabIndex={inputTabIndex + 1}\n />\n )}\n {editingPoll && response_count && (\n \n {response_count}\n \n )}\n
\n );\n });\n const nextIndexAfterOptions = option_nodes.length * 2 + 2;\n return (\n \n \n \n {this.state.validationErrors}\n \n )}\n \n Guests will not see one another's responses.\n \n \n {editingPoll ? 'Save Changes' : 'Create Poll'}\n \n \n
\n );\n }\n\n handleQuestionChange = (e) => {\n const newState = update(this.state, {\n question: {$set: e.target.value},\n });\n this.setState(newState);\n };\n\n handleOptionChange = (index, e) => {\n const newState = update(this.state, {\n options: {\n [index]: {\n option: {$set: e.target.value},\n },\n },\n });\n this.setState(newState);\n };\n\n // handleOptionKeyDown = (index, e) => {\n // const optionsLen = this.state.options.length;\n // if (e.keyCode === 9 && !e.shiftKey && index + 1 === optionsLen) {\n // e.preventDefault();\n // this.handleAddClick(e);\n // }\n // };\n\n /**\n * Check for duplicate option names\n * @param {array} options - A list of option objects\n * @returns {boolean} True/False if found/not found\n */\n hasDuplicateOptions = (optionsArray) =>\n // Check if at-least one of the items passes the check. Returns true/false\n optionsArray.some(\n (item, i) =>\n // If the found index is not the same as the current item's index, it's a duplicate\n optionsArray.indexOf(item) !== i\n );\n\n closeInternalModal = () => {\n this.setState({showInternalModal: false});\n };\n\n onShowInternalModal = (action, callback) => {\n let modalChildren = null;\n let showInternalModal = false;\n\n if (action === 'delete_option_with_votes') {\n showInternalModal = true;\n modalChildren = (\n \n \n {editingPoll ? 'Edit Poll' : 'Create a New Poll'}\n \n \n
\n \n {showAddOptionLink && (\n \n Add Option\n \n )}\n {editingPoll && (\n {\n this.onShowInternalModal('delete_poll', this.deletePoll);\n }}\n className=\"delete-poll unstyled-button link\"\n tabIndex={nextIndexAfterOptions + 1}\n data-qa-id=\"delete-poll\"\n >\n Delete Poll\n \n )}\n
\n {this.state.validationErrors && (\n {nonVoterStr}
;\n };\n\n render() {\n return <>{this.getNonVoters()};\n }\n}\n\n// \n
\n \n );\n };\n\n render() {\n const {\n pollValues,\n widgetId,\n groupType,\n groupId,\n messageId,\n newMessage,\n showTimestamp,\n isMsgFromSender,\n senderId,\n onShowModal,\n participantCount,\n } = this.props;\n let nonVoterProfiles;\n\n const votesByUser = pollValues.content.votesByUser || {};\n\n // group chats use participant list as sentTo\n // so remove sender from potential voters\n const sentTo = this.props.sentTo.filter((id) => id !== senderId);\n\n const isHostOrCohost = window.evite_event.host_ids.includes(messagingStore.userId);\n if (!isMsgFromSender && newMessage && !isHostOrCohost) {\n const profile = messagingStore.getProfile(pollValues.createdBy) || {};\n return this.getPollForGuest(profile);\n }\n\n if (Object.keys(votesByUser).length === 0) {\n // no one has voted, so everyone is a nonVoter\n nonVoterProfiles = sentTo;\n } else {\n nonVoterProfiles = sentTo.filter((user) => !votesByUser[user]);\n }\n\n // do not show nonVoters to guests or if everyone has voted\n const showNonVoters = isMsgFromSender && participantCount > 0;\n\n return (\n \n \n \n
\n {guestName}
\n \n \n \n
\n \n
\n \n );\n }\n}\n","import React, {Component} from 'react';\nimport {PB_Arrow} from '~/common/svg/PB_Arrow';\nimport {PB_CheckmarkCircle} from '~/common/svg/PB_CheckmarkCircle';\nimport {PB_EditLine} from '~/common/svg/PB_EditLine';\nimport {PB_PollLine} from '~/common/svg/PB_PollLine';\nimport {Divider} from '~/common/_pb_components/atoms/Divider';\nimport {Typography} from '~/common/_pb_components/atoms/Typography';\nimport {Radio} from '~/common/_pb_components/atoms/Radio';\nimport {messagingStore} from '~/messaging/store';\nimport {tanzanite, emerald} from '~sass/pb_styleguide/base/_exports.sass';\nimport './poll.sass';\n\nexport class PollContent extends Component {\n constructor(props) {\n super(props);\n\n this.state = {\n wantsToChangeVote: false,\n voterProfiles: [],\n newOptionText: '',\n vote: '',\n };\n }\n\n userHasVoted = () => {\n let hasVoted;\n let usersWhoVoted;\n const user_id = messagingStore.userId || null;\n\n if (this.props.widget.content.votesByUser) {\n usersWhoVoted = Object.keys(this.props.widget.content.votesByUser);\n hasVoted = usersWhoVoted.indexOf(user_id) !== -1;\n }\n return hasVoted;\n };\n\n getVoters = (voteKey) => {\n const voterList = [];\n const {content} = this.props.widget;\n\n Object.entries(content.votesByOption[voteKey]).forEach((item) => {\n if (item[1] === true) {\n return voterList.push(item[0]);\n }\n });\n\n const profilesOfVoters = Object.keys(messagingStore.getProfiles(voterList));\n\n return profilesOfVoters;\n };\n\n handleChangeVote = () => {\n this.setState({\n wantsToChangeVote: true,\n });\n };\n\n getVoteResults = () => {\n const {widget, isMsgFromSender} = this.props;\n const {content} = widget;\n const {options} = content;\n const votes = content.voteCount;\n let percent = 0;\n\n const mostVotes = Object.entries(votes).reduce((prev, current) =>\n prev[1] > current[1] ? prev : current\n );\n\n // Loop through each option in the poll\n const voteBars = Object.entries(options).map((option, i) => {\n const key = option[0]; // Firebase id of option\n const value = option[1]; // String text of option user sees\n\n const voteCounts = Object.entries(votes).map((vote, i) => {\n const voteKey = vote[0]; // Firebase id of option\n let voteCount = vote[1]; // Number of votes this option has\n\n const showVoteCountButton = isMsgFromSender && voteCount >= 1;\n\n // Match the voteCount to the option\n if (key === voteKey) {\n const winner = voteCount === mostVotes[1];\n percent = this.totalVoteCount > 0 ? (voteCount / this.totalVoteCount) * 100 : 0;\n\n const titleLabelCopy = `Guests who voted \"${value}\" (${voteCount})`;\n\n const optionalClass = voteCount == 0 ? 'no-votes' : '';\n voteCount = voteCount > 0 ? voteCount : 'No'; // show \"No votes\" instead of 0 votes\n const pluralizedCopy = voteCount !== 1 ? ` votes` : ` vote`;\n const voteCopy = voteCount + pluralizedCopy;\n\n return (\n Sent to {participantCount}
\n |\n {showNonVoters && (\n\n
\n \n \n {voteCopy}\n \n )}\n {showVoteCountButton && (\n {\n this.props.onShowModal(\n 'voters',\n this.getVoters(voteKey),\n [],\n titleLabelCopy,\n this.props.handleMessageUsersClick\n );\n }}\n data-qa-id=\"vote-count\"\n >\n {voteCopy}\n
\n \n {value} \n {winner &&
\n {!showVoteCountButton && (\n \n {pollHeading} \n
\n - {pollOptions}
\n {!hasVoted && createdByThisUser && (\n <>\n \n Vote\n \n |\n \n )}\n {hasVoted && (\n <>\n \n Change Vote\n \n |\n \n )}\n {(createdByThisUser || isHostOrCohost) && (\n {\n this.props.onShowModal('edit', [], [], '', () => {}, pollData);\n }}\n data-qa-id=\"edit-poll\"\n >\n
\n \n );\n }\n}\n","import {evite} from 'evite';\nimport React from 'react';\nimport {RTDatabase} from 'firebase-react-store';\nimport {StatusAnimation} from '~/create/components/StatusAnimation';\nimport {authenticateToTsunami} from '~/messaging/utils/tsunamiAuth';\n\nexport let rtdb = null;\nexport let serverPaths = null;\nexport let readOnly = false;\n\nlet initRunning = false;\n\nexport async function initDatabase() {\n if (rtdb) return rtdb;\n if (initRunning) {\n return evite.when('rtdb');\n }\n initRunning = true;\n\n authenticateToTsunami();\n\n let response;\n try {\n response = await evite.when('tsunami-auth');\n } catch (e) {\n console.log('tsunami-auth rejected', e);\n initRunning = false;\n return;\n }\n let json = null;\n try {\n json = await response.json();\n } catch (e) {\n console.log('Error with json response: ', response);\n }\n\n if (!response.ok) {\n console.log('Error response: ', response);\n throw new Error((json && json.message) || 'Unknown error');\n }\n\n const {token} = json;\n const {fire_config} = json;\n readOnly = json.readOnly;\n serverPaths = json.refs;\n const temp = new RTDatabase(fire_config);\n try {\n await temp.signInWithCustomToken(token);\n } catch (e) {\n console.log('ERROR SIGNING IN', e);\n }\n rtdb = temp; // don't assign until available\n evite.provideStores({rtdb: temp});\n evite.resolve('rtdb', temp);\n return temp;\n}\n\n/**\n * for tests\n */\nexport function setDatabase(otherRtdb, otherPaths) {\n rtdb = otherRtdb;\n serverPaths = otherPaths;\n}\n\n/**\n * Shows a spinner until rtdb is available\n */\nexport class DatabaseLoader extends React.PureComponent {\n constructor(props) {\n super(props);\n initDatabase();\n this.state = {resolved: false};\n }\n\n componentDidMount() {\n this.mounted = true;\n evite.when('rtdb').then(() => {\n if (!this.mounted) return;\n this.setState({resolved: true});\n });\n }\n\n componentWillUnmount() {\n this.mounted = false;\n }\n\n render() {\n if (!this.state.resolved) {\n return (\n \n
\n ) : (\n \n \n \n
\n );\n}\n","import {evite} from 'evite';\nimport {action, observable} from 'mobx';\nimport {rtdb, serverPaths, readOnly} from '~/messaging/database';\nimport {groupMixin} from '~/messaging/models/GroupDocument';\nimport {BroadcastGroup} from '~/messaging/models/BroadcastGroup';\n\n/**\n * This is a simplistic store to consolidate a lot of\n * data that we're pulling off of window on page load.\n *\n */\nclass MessagingStore {\n constructor() {\n if (window.evite_event) this.populate(window);\n\n evite.when('rtdb').then(async () => {\n if (this.userId && serverPaths.guests) {\n // set presence for this user\n const path = `${serverPaths.guests}/${this.userId}`;\n const doc = rtdb.get(path);\n try {\n await doc.onValues();\n } catch (e) {\n // getting a permission denied here but we don't need the values\n if (e.code && e.code !== 'PERMISSION_DENIED') {\n throw e; // just in case\n } else if (location.href.indexOf('group') != -1) {\n location.href = location.href.replace(/group\\/.*gid/g, '?gid');\n }\n }\n doc.update({isActive: true});\n doc.onDisconnect().update({isActive: false});\n doc.close();\n }\n });\n\n evite.injectStores('guestlist', this);\n }\n\n /**\n * Useful for tests\n */\n populate = (obj) => {\n /**\n * The event from the server. There's no need to make this observable\n * since it doesn't change while we're in messaging.\n */\n this.event = obj.evite_event;\n\n /**\n * For clarity\n */\n this.eventId = obj.evite_event.id;\n\n /**\n * For clarity\n */\n this.userId = obj.evite_event.rsvp && obj.evite_event.rsvp.user_id;\n this.guestId = obj.evite_event.rsvp && obj.evite_event.rsvp.id;\n this.rsvpResponse = (obj.evite_event.rsvp && obj.evite_event.rsvp.response) || null;\n\n /**\n * The html-cleaned and safe host message\n */\n this.hostMessage = obj.host_message;\n\n /**\n * for clarity\n * /\n */\n this.isHost = obj.evite_event.is_host_viewing;\n this.isCoHost = obj.evite_event.is_cohost_viewing;\n this.isRsvpOff = obj.evite_event.rsvp_off;\n\n this.isPremium = obj.is_premium;\n\n this.isPrivateGuestList =\n obj.evite_event.options && obj.evite_event.options.event_option_private_guestlist;\n\n this.isPremium = obj.is_premium;\n };\n\n @action\n updateRsvp = (guest) => {\n this.guestId = guest.id;\n this.userId = guest.user_id;\n this.rsvpResponse = guest.response;\n };\n\n /**\n * Guest information\n *\n * A cache map of profile information by userid\n */\n @observable profiles = new Map();\n\n /*\n * When an archived event is viewed, messages get restored in firestore with readOnly:true state\n */\n @observable isArchived = readOnly;\n\n _requestedProfiles = new Set();\n\n @observable selected = [];\n\n @action\n updateSelected = (selectedGuests = []) => {\n this.selected = selectedGuests;\n };\n\n @action\n _mergeProfiles = (profiles) => {\n const obj = profiles.reduce((obj, profile) => {\n obj[profile.userId] = profile;\n return obj;\n }, {});\n this.profiles.merge(obj);\n };\n\n _requestProfiles = async (newIds) => {\n const url = `${evite.urls.get('ajax_view_profiles', {\n event_id: this.eventId,\n })}?gid=${window.guest_id}&user_ids=${newIds.join('|')}`;\n\n try {\n for (const uid of newIds) this._requestedProfiles.add(uid);\n\n const response = await evite.fetch(url, {\n method: 'get',\n credentials: 'include',\n cache: 'no-cache',\n headers: {\n 'X-CSRFToken': evite.cookie('csrftoken'),\n Accept: 'application/json',\n },\n });\n\n if (response.ok) {\n const json = await response.json();\n this._mergeProfiles(json.profiles);\n this.guestlist.updateSummary(json.summary);\n }\n } finally {\n // remove these from the requested array\n for (const uid of newIds) this._requestedProfiles.delete(uid);\n }\n };\n\n getProfiles = (userIds) => {\n const cached = {};\n let newIds = [];\n\n for (const uid of userIds) {\n const profile = this.profiles.get(uid);\n if (profile === undefined) newIds.push(uid);\n else cached[uid] = profile;\n }\n if (newIds.length < 1) {\n return cached;\n }\n\n // don't re-request\n newIds = newIds.filter((uid) => !this._requestedProfiles.has(uid));\n if (newIds.length < 1) return {};\n\n // noinspection JSIgnoredPromiseFromCall\n this._requestProfiles(newIds);\n return cached;\n };\n\n // returns the profiles rather than updating the messagingStore.profiles in the store\n getParticipants = async (userIds) => {\n const url = `${evite.urls.get('ajax_view_profiles', {\n event_id: this.eventId,\n })}?user_ids=${userIds.join('|')}`;\n\n const response = await evite.fetch(url, {\n method: 'get',\n credentials: 'include',\n cache: 'no-cache',\n headers: {\n 'X-CSRFToken': evite.cookie('csrftoken'),\n Accept: 'application/json',\n },\n });\n\n const json = await response.json();\n if (response.ok) {\n // reformat data structure to match and key off ID\n return json.profiles.reduce((acc, profile) => {\n const {userId} = profile;\n acc[userId] = profile;\n return acc;\n }, {});\n }\n console.log('error with retrieving participants');\n };\n\n /**\n * Convenience alias for `getProfiles`\n *\n * @param userId\n * @returns profile if found, undefined if not yet cached\n */\n getProfile = (userId) => this.getProfiles([userId])[userId];\n\n /**\n * Search (and cache) profile information\n *\n * @param name optional string name to filter by\n * @param rsvp optional rsvp string to filter by status\n * @param page optional page number to fetch - defaults to 0\n * @param per_page optional profiles per page - defaults to 30\n * @returns {Promise${\n this.settings.closeBtn\n ? ''\n : ''\n }
${this.settings.body}
`;\n }\n const container = this.target.querySelector('.eviteModalContent');\n container.innerHTML = `\n `;\n\n if (!this.settings.parse) {\n container.querySelector('.wrapper').appendChild(this.settings.body);\n }\n\n const self = this;\n function respondToPopup(e) {\n self.close();\n const name = e.currentTarget.innerText\n .split(' ')\n .join('')\n .replace(/[^\\w\\s]/gi, ''); // remove spaces and special characters\n const on_response = self.settings[`on${name}`];\n if (on_response) {\n on_response(name, e);\n } else if (self.settings.onResponse) {\n self.settings.onResponse.apply(self, [e, self, name]);\n }\n }\n const buttonsEl = container.querySelectorAll('.modal-footer button').length\n ? container.querySelectorAll('.modal-footer button')\n : container.querySelectorAll('.modal-footer a');\n for (const key of Object.keys(this.settings.buttons)) {\n buttonsEl[key].addEventListener('click', respondToPopup);\n }\n resolve(true);\n });\n }\n\n parseDependencies = () => {\n const scripts = Array.from(this.modalHead.querySelectorAll('script'));\n const links = Array.from(this.modalHead.querySelectorAll('link'));\n const styles = links.filter((link) => link.type === 'text/css');\n styles.forEach((style) => {\n style.className = 'eviteModalStyle';\n document.head.appendChild(style);\n });\n\n scripts.forEach((script) => {\n let scriptTag;\n const src = script.getAttribute('src');\n if (src) {\n scriptTag = buildScriptTag({\n src,\n type: 'text/javascript',\n async: true,\n className: 'eviteModalScript',\n onLoad: () => false,\n });\n } else {\n scriptTag = buildScriptTag({\n type: 'text/javascript',\n innerHTML: script.innerHTML,\n className: 'eviteModalScript',\n onLoad: () => false,\n });\n }\n document.head.appendChild(scriptTag);\n });\n\n return this;\n };\n\n buildRemote() {\n return new Promise((resolve, reject) => {\n this.fetchContent()\n .then((text) => this.parseContent(text))\n .then((page) => this.injectContent(page))\n .then(this.parseDependencies)\n .then(resolve)\n .catch((msg) => reject(msg));\n });\n }\n\n buildFromResponse = (serverResponse) => {\n const page = this.parseContent(serverResponse);\n this.injectContent(page);\n this.parseDependencies();\n };\n\n close = () =>\n new Promise((resolve, reject) => {\n if (this.open) {\n this.modal.close().then(() => {\n this.open = false;\n const modalDom = document.getElementById(`eviteModal-${this.id}`);\n const styles = document.querySelectorAll('.eviteModalStyle');\n const scripts = document.querySelectorAll('.eviteModalScript');\n Array.from(styles).forEach((el) => el.parentNode.removeChild(el));\n Array.from(scripts).forEach((el) => el.parentNode.removeChild(el));\n if (modalDom) modalDom.parentNode.removeChild(modalDom);\n resolve();\n });\n }\n });\n\n respond = (options, settings, event) => {\n this.modal.respond(options, settings, event);\n };\n\n show(htmlResponse) {\n document.querySelector('body').appendChild(this.target);\n this.modal.initialize(this);\n if (htmlResponse && !this.settings.popup) {\n this.buildFromResponse(htmlResponse);\n this.modal.open(`#eviteModal-${this.id}`);\n this.open = true;\n return;\n }\n if (this.settings.popup) {\n this.buildPopup().then(() => {\n this.modal.open(`#eviteModal-${this.id}`);\n this.open = true;\n if (this.settings.overwrites && this.settings.overwrites.length) {\n this.overwrites();\n }\n });\n } else {\n this.buildRemote().then(() => {\n this.modal.open(`#eviteModal-${this.id}`);\n this.open = true;\n if (this.settings.overwrites && this.settings.overwrites.length) {\n this.overwrites();\n }\n });\n }\n }\n}\n","import {EviteModal} from './evite_modal';\nimport {CaptchaDialog} from './captcha_modal';\nimport {PopupModal} from './popup_modal';\nimport {ModalWarning} from './warning_modal';\nimport {ModalAjaxError} from './ajax_error_modal';\nimport {LoadingModal} from './loading_modal';\nimport {SendMessageModal} from './send_message_modal';\nimport {ModalDialog} from './dialog_modal';\nimport {AuthModal} from './auth_modal';\n\nexport {\n EviteModal,\n AuthModal,\n CaptchaDialog,\n PopupModal,\n ModalWarning,\n ModalAjaxError,\n LoadingModal,\n ModalDialog,\n SendMessageModal,\n};\n","import {htmlFromString} from '../common/utils';\nimport {ModalBase} from './base';\n\nexport class LoadingModal {\n loadingModalDefaults = {\n message: 'Loading...',\n allowClose: false,\n clickOutside: false,\n width: `${Math.min(window.screen.width - Math.ceil(window.screen.width * 0.05), 420)}px`,\n };\n\n open = false;\n\n constructor(settings = {}) {\n if (typeof settings === 'string') {\n settings = {message: settings};\n }\n this.settings = {\n ...this.loadingModalDefaults,\n ...settings,\n };\n const contents = htmlFromString(\n `${this.settings.message}
: {letters}}\n \n );\n }\n\n onAvatarClick = (evt) => {\n evt.preventDefault();\n if (!evite.hasClass(evt.currentTarget, 'disabled')) {\n window.location.replace(`/profile/public/${this.props.userId}`);\n } else {\n return false;\n }\n };\n\n getAvatarLetters = (guestName) => {\n // strip everything but letters, spaces, and &'s from the guestname\n // const strippedGuestName = guestName.replace(/[^a-z &]/gi, '');\n const strippedGuestName = guestName.replace(\n /([\\u2700-\\u27BF]|[\\uE000-\\uF8FF]|\\uD83C[\\uDC00-\\uDFFF]|\\uD83D[\\uDC00-\\uDFFF]|[\\u2011-\\u26FF]|\\uD83E[\\uDD10-\\uDDFF])/g,\n ''\n );\n\n // special case of two names inside one guest name (see\n // comment about AMP_SEPARATED_PATTERN, above) - if we\n // detect that case, grab the first letter from each\n const matches = strippedGuestName.match(AMP_SEPARATED_PATTERN);\n if (matches) {\n const before = matches[1].trim();\n const after = matches[3].trim();\n return before[0] + after[0];\n }\n\n const strParts = strippedGuestName.trim().split(/[ ]+/);\n const firstLetter = (guestName && guestName.length ? strParts[0][0] : '') || '';\n let lastLetter = '';\n\n if (strParts.length > 1) {\n lastLetter = strParts[1][0];\n }\n\n return firstLetter + lastLetter;\n };\n}\n\nfunction mapStateToProps(state) {\n return {\n state: {\n avatars: state.avatars,\n },\n };\n}\n\nexport const UserAvatar = connect(mapStateToProps)(UnconnectedUserAvatar);\n","export const ADD_AVATARS = 'ADD_AVATARS';\n","import update from 'immutability-helper';\nimport * as types from './constants';\n\nconst initialState = {\n userAvatars: [],\n avatarsFetched: false,\n};\n\nexport function avatarsReducer(state = initialState, action) {\n switch (action.type) {\n case types.ADD_AVATARS:\n return update(state, {\n userAvatars: {$set: action.avatars || action.message},\n avatarsFetched: {$set: true},\n });\n default:\n return state;\n }\n}\n","import React, {PureComponent} from 'react';\nimport {Provider} from 'react-redux';\nimport {SimpleModal as SimpleModal_} from '../../../common/components/SimpleModal';\n\nimport {store} from '../../store';\n\nexport class SimpleModal extends PureComponent {\n render() {\n return (\n {status}
;\n}\n","import {action} from 'mobx';\nimport urls from 'urls';\nimport * as utils from '../utils';\nimport * as types from './constants';\n\nimport {store} from '../store';\nimport {guestlistStore} from '~/view_invitation/guestlist/store';\n\nexport function fetchGuestlistData(cb = null) {\n const url = urls.get('ajax_event_guestlist', {\n event_id: window.evite_event.id,\n gid: window.guest_id,\n });\n window.$.get(url, (response) => {\n // Exit if it's a hidden guest list\n if (response.length === 0) {\n return false;\n }\n\n // Sort guests in alphabetical order\n function alphabetical(a, b) {\n if (a.name < b.name) {\n return -1;\n }\n if (a.name > b.name) {\n return 1;\n }\n return 0;\n }\n response.yes.sort(alphabetical);\n response.no.sort(alphabetical);\n response.maybe.sort(alphabetical);\n response.undecided.sort(alphabetical);\n\n let hostFound = false;\n let youFound = false;\n for (const respType of ['yes', 'no', 'maybe', 'undecided']) {\n // Bring You to the front\n if (!youFound) {\n response[respType].forEach((guest, idx) => {\n if (guest.user_id === window.user_id) {\n response[respType].unshift(response[respType].splice(idx, 1)[0]);\n youFound = true;\n return false;\n }\n });\n }\n\n // Bring Host to the front\n if (!hostFound) {\n response[respType].forEach((guest, idx) => {\n if (guest.user_id === window.evite_event.host_id) {\n response[respType].unshift(response[respType].splice(idx, 1)[0]);\n hostFound = true;\n return false;\n }\n });\n }\n }\n\n action(() => {\n // TODO: should remove this at some point and use get profiles instead\n // we also shouldn't mutate the store without an @action\n guestlistStore.guestlist = {...guestlistStore.guestlist, ...response};\n\n guestlistStore.fetchingGuestlist = false;\n })();\n cb && cb();\n }).fail((jqXHR, textStatus, errorThrown) => {\n utils.renderAjaxErrorModal(jqXHR, textStatus, errorThrown);\n });\n}\n\nexport const updateSearchText = action((searchText) => {\n guestlistStore.searchText = searchText;\n});\n\nexport function getNameOfGuestWithId(guestId) {\n return guestlistStore.getNameOfGuestWithId(guestId);\n}\n","export const HYDRATE_GUESTLIST = 'HYDRATE_GUESTLIST';\nexport const UPDATE_SEARCH_TEXT = 'UPDATE_SEARCH_TEXT';\n","import {action, observable} from 'mobx';\n\nclass GuestlistStore {\n // not observable since this would take\n // too long to process and too much memory\n // components should test and react to changes to fetchingGuestlist\n // and when true this guestlist is available.\n // @observable\n guestlist = {\n undecided: [],\n undecided_count: 0,\n maybe: [],\n maybe_count: 0,\n yes: [],\n yes_count: 0,\n no: [],\n no_count: 0,\n attended: [],\n checked_in_count: 0,\n // a map of user_id: name\n guest_names: {},\n totalInviteesCount: 0,\n totalCountWithPlusOnes: 0,\n };\n\n allowKids =\n window.evite_event &&\n window.evite_event.options &&\n window.evite_event.options.event_option_allow_kids;\n\n // observables are needed for these, though\n // these are rsvp counts\n @observable yes_count = 0;\n\n @observable no_count = 0;\n\n @observable maybe_count = 0;\n\n @observable undecided_count = 0;\n\n @observable checked_in_count = 0;\n\n @observable adults_maybe = 0;\n\n @observable adults_yes = 0;\n\n @observable kids_maybe = 0;\n\n @observable kids_yes = 0;\n\n // these are raw counts of actual invitations sent\n @observable invitees_undecided = 0;\n\n @observable invitees_maybe = 0;\n\n @observable invitees_yes = 0;\n\n @observable invitees_no = 0;\n\n @observable totalInviteesCount = 0;\n\n @observable shouldShowPlainStyle = true;\n\n @observable fetchingGuestlist = true;\n\n @observable searchText = '';\n\n @observable isLoadedInModal = false;\n\n @action\n updateSummary = (summary) => {\n if (!summary) return;\n this.guestlist.undecided_count = summary.undecided_count;\n this.guestlist.maybe_count = summary.adults_maybe + summary.kids_maybe || 0;\n this.guestlist.yes_count = summary.adults_yes + summary.kids_yes || 0;\n this.guestlist.no_count = summary.no_count;\n this.guestlist.checked_in_count = summary.checked_in_count;\n\n this.undecided_count = summary.undecided_count;\n this.maybe_count = summary.adults_maybe + summary.kids_maybe || 0;\n this.yes_count = summary.adults_yes + summary.kids_yes || 0;\n this.no_count = summary.no_count;\n this.checked_in_count = summary.checked_in_count;\n\n this.adults_maybe = summary.adults_maybe || 0;\n this.adults_yes = summary.adults_yes || 0;\n\n this.kids_maybe = summary.kids_maybe || 0;\n this.kids_yes = summary.kids_yes || 0;\n\n this.invitees_maybe = summary.invitees_maybe;\n this.invitees_yes = summary.invitees_yes;\n this.totalInviteesCount =\n this.invitees_undecided + this.invitees_maybe + this.invitees_yes + this.invitees_no;\n\n // these are the same. adding for clarity on the FE\n this.invitees_undecided = summary.undecided_count;\n this.invitees_no = summary.no_count;\n\n this.shouldShowPlainStyle = this.totalInviteesCount > 750;\n\n this.guestlist.totalCountWithPlusOnes =\n this.undecided_count + this.maybe_count + this.yes_count + this.no_count;\n };\n\n @action\n updateIsLoadedInModal = (isInModal) => {\n this.isLoadedInModal = isInModal;\n };\n\n getNameOfGuestWithId(guestId) {\n return this.guestlist.guest_names[guestId];\n }\n}\n\nconst guestlistStore = new GuestlistStore();\nexport {guestlistStore};\nevite.provideStores({guestlist: guestlistStore});\n","import {createBrowserHistory} from 'history';\n\nexport const history = createBrowserHistory();\n","export const SET_MESSAGE_MODAL_VISIBLE = 'SET_MESSAGE_MODAL_VISIBLE';\n","import update from 'immutability-helper';\nimport * as actions from '~/view_invitation/message-modal/constants';\n\nexport function modalReducer(state = initialState, action) {\n switch (action.type) {\n case actions.SET_MESSAGE_MODAL_VISIBLE:\n return update(state, {\n messageNotification: {\n visible: {$set: action.visible},\n },\n });\n\n default:\n return state;\n }\n}\n","import {evite} from 'evite';\nimport urls from 'urls';\nimport {failedFetchModal} from '~/modal/_ajax_error_handler';\nimport * as utils from '../utils';\n\nexport class PhotosApi {\n hydratePhotoPosts = (cursor = '') => {\n const url = urls.get('ajax_event_photos', {\n event_id: window.evite_event.id,\n per_page: 120,\n cursor,\n gid: window.guest_id,\n });\n\n const errorDefault = 'Sorry, an error has occurred!';\n\n return evite\n .fetch(url, {\n credentials: 'include',\n headers: {\n 'X-CSRFToken': evite.cookie('csrftoken'),\n Accept: 'application/json',\n 'Content-Type': 'application/json',\n },\n })\n .then(async (response) => {\n const data = await response.json();\n\n if (!response.ok) {\n const error = data.message || errorDefault;\n failedFetchModal(response, 'Error', error);\n return false;\n }\n const {objects, cursor, more} = data;\n return {\n objects,\n cursor,\n more,\n fetchingPhotos: false,\n hydrated: true,\n };\n })\n .catch((error) => {\n evite.error('hydratePhotoPosts failed ', error);\n failedFetchModal(null, 'Error', errorDefault);\n return false;\n });\n };\n\n getPhotoPostsById = (postIds) => {\n const url = `/ajax/event/${window.evite_event.id}/posts/?gid=${window.guest_id}&post_ids=${postIds}`;\n\n const errorDefault = 'Sorry, an error has occurred!';\n\n return evite\n .fetch(url, {\n credentials: 'include',\n headers: {\n 'X-CSRFToken': evite.cookie('csrftoken'),\n Accept: 'application/json',\n 'Content-Type': 'application/json',\n },\n })\n .then(async (response) => {\n const data = await response.json();\n\n if (!response.ok) {\n const error = data.message || errorDefault;\n failedFetchModal(response, 'Error', error);\n return false;\n }\n const {objects} = data;\n\n return {\n objects,\n };\n })\n .catch((error) => {\n evite.error('getPhotoPostsById failed ', error);\n failedFetchModal(null, 'Error', errorDefault);\n return false;\n });\n };\n\n deletePhotos = (photoIds) => {\n const eventId = window.evite_event.id;\n const url = `/ajax/event/${eventId}/posts/photos/delete/?gid=${window.guest_id}`;\n\n return window.$.ajax({\n type: 'POST',\n data: {postIds: JSON.stringify(photoIds), delete: true},\n success(responseText, statusText, xhr) {\n return statusText;\n },\n error(jqXHR, textStatus, errorThrown) {\n utils.renderAjaxErrorModal(jqXHR, textStatus, errorThrown);\n },\n url,\n });\n };\n\n addPhotos = (postId, comment, mentions, content) => {\n const postData = {\n postId,\n comment,\n content: JSON.stringify(content),\n mentions,\n };\n const url = `/ajax/event/${window.evite_event.id}/posts/photos/?gid=${window.guest_id}`;\n\n return window.$.ajax({\n data: postData,\n type: 'PATCH',\n success(response) {\n return response;\n },\n error(jqXHR, textStatus, errorThrown) {\n utils.renderAjaxErrorModal(jqXHR, textStatus, errorThrown);\n },\n url,\n });\n };\n}\n","import {evite} from 'evite';\nimport {observable, action} from 'mobx';\nimport {PhotosApi} from './PhotosApi';\nimport {activityFeedStore} from '~/view_invitation/activity-feed/ActivityFeedStore';\nimport * as storeUtils from '~/view_invitation/store-utils';\n\nclass PhotosStore {\n @observable objects = '';\n\n @observable cursor = '';\n\n @observable more = '';\n\n @observable fetchingPhotos = true;\n\n @observable hydrated = false;\n\n constructor(photosApi) {\n this.photosApi = photosApi;\n }\n\n @action\n hydratePhotoPosts = async () => {\n if (this.objects && !this.more) return false; // All photos loaded\n const photoPosts = await this.photosApi.hydratePhotoPosts(this.cursor);\n storeUtils.appendPosts(this, photoPosts);\n return this.more;\n };\n\n @action\n hydrateAllPhotoPosts = async () => {\n while (await this.hydratePhotoPosts()) {}\n };\n\n @action\n getPhotoPostsById = async (postIds) => {\n const photoPosts = await this.photosApi.getPhotoPostsById(postIds);\n\n storeUtils.addMultiplePosts(this, photoPosts);\n\n // rehydrate feed posts\n activityFeedStore.hydrateFeedPosts();\n };\n\n @action\n addPhotoPost = (newPhotoPost) => {\n storeUtils.addSinglePost(activityFeedStore, newPhotoPost);\n storeUtils.addSinglePost(this, newPhotoPost);\n };\n\n @action\n deletePhotoPost = (postId) => {\n const postIndex = storeUtils.getPostIndex(activityFeedStore, postId);\n\n // make sure this post has been successfully removed from the activityFeedStore before removing from photosStore\n if (postIndex === -1) storeUtils.deletePostById(this, postId);\n };\n}\n\nconst photosApi = new PhotosApi();\nconst photosStore = new PhotosStore(photosApi);\n\nexport {photosStore};\nevite.provideStores({photos: photosStore});\n","import {store} from '../store';\nimport * as types from './constants';\nimport * as utils from '../utils';\nimport {activityFeedStore} from '../activity-feed/ActivityFeedStore';\n\nexport async function hydratePolls() {\n if (!store.getState().polls.hasPoll) return;\n const url = `/ajax/event/${window.evite_event.id}/polls/?gid=${window.guest_id}`;\n\n const response = await evite.fetch(url, {\n method: 'get',\n credentials: 'include',\n cache: 'no-cache',\n headers: {\n 'X-CSRFToken': evite.cookie('csrftoken'),\n Accept: 'application/json',\n },\n });\n if (!response.ok) {\n utils.renderAjaxErrorModal(response);\n }\n\n const data = await response.json();\n store.dispatch({\n type: types.CREATE_POLL,\n poll: data[0] || [],\n });\n}\n\nexport function createPoll(data) {\n const url = `/ajax/event/${window.evite_event.id}/polls/?gid=${window.guest_id}`;\n window.$.post(url, data, (response) => {\n store.dispatch({\n type: types.CREATE_POLL,\n poll: response,\n });\n }).fail((jqXHR, textStatus, errorThrown) => {\n utils.renderAjaxErrorModal(jqXHR, textStatus, errorThrown);\n });\n window.dataLayer.push({event: 'createpoll'});\n}\n\nexport function cancelEditPoll(data) {\n store.dispatch({\n type: types.CANCEL_EDIT_POLL,\n poll: data,\n });\n window.dataLayer.push({event: 'canceleditpoll'});\n}\n\nexport function savePoll(data) {\n const pollId = data.id;\n const url = `/ajax/event/${window.evite_event.id}/polls/${pollId}/?gid=${window.guest_id}`;\n window.$.post(url, data, (response) => {\n store.dispatch({\n type: types.SAVE_POLL,\n poll: response,\n });\n }).fail((jqXHR, textStatus, errorThrown) => {\n utils.renderAjaxErrorModal(jqXHR, textStatus, errorThrown);\n });\n window.dataLayer.push({event: 'savepoll'});\n}\n\nexport function editPoll(pollId) {\n const url = `/ajax/event/${window.evite_event.id}/polls/${pollId}?gid=${window.guest_id}`;\n window.$.get(url, (response) => {\n store.dispatch({\n type: types.EDIT_POLL,\n poll: response,\n });\n }).fail((jqXHR, textStatus, errorThrown) => {\n utils.renderAjaxErrorModal(jqXHR, textStatus, errorThrown);\n });\n\n window.dataLayer.push({event: 'editpoll'});\n}\n\nexport function deletePoll(pollId) {\n const url = `/ajax/event/${window.evite_event.id}/polls/${pollId}?gid=${window.guest_id}`;\n window.$.ajax({\n url,\n type: 'DELETE',\n }).fail((jqXHR, textStatus, errorThrown) => {\n utils.renderAjaxErrorModal(jqXHR, textStatus, errorThrown);\n });\n store.dispatch({\n type: types.DELETE_POLL,\n });\n}\n\nexport function submitResponse(pollId, choiceId, otherOption) {\n const url = `/ajax/event/${window.evite_event.id}/polls/${pollId}/responses/?gid=${window.guest_id}`;\n const data = {\n option: choiceId,\n other_option: otherOption,\n };\n window.$.post(url, data, (response) => {\n store.dispatch({\n type: types.ADD_RESPONSE,\n poll: response,\n });\n })\n .then(() => {\n // Refresh the activity feed\n // noinspection JSIgnoredPromiseFromCall\n activityFeedStore.hydrateFeedPosts();\n })\n .fail((jqXHR, textStatus, errorThrown) => {\n utils.renderAjaxErrorModal(jqXHR, textStatus, errorThrown);\n });\n window.dataLayer.push({event: 'pollvote'});\n}\n\nexport function setVoted(pollId, voted, isHostVoting) {\n store.dispatch({\n type: types.SET_VOTED,\n pollId,\n voted,\n isHostVoting,\n });\n}\n","export const CREATE_POLL = 'CREATE_POLL';\nexport const EDIT_POLL = 'EDIT_POLL';\nexport const CANCEL_EDIT_POLL = 'CANCEL_EDIT_POLL';\nexport const SAVE_POLL = 'SAVE_POLL';\nexport const DELETE_POLL = 'DELETE_POLL';\nexport const ADD_RESPONSE = 'ADD_RESPONSE';\nexport const SET_VOTED = 'SET_VOTED';\n","import update from 'immutability-helper';\nimport * as types from './constants';\nimport {hasWidget} from '~/view_invitation/utils';\n\nconst hasPoll = hasWidget('poll');\nconst initialState = {\n items: [],\n hasPoll,\n fetchingPoll: hasPoll,\n};\n\nexport function pollsReducer(state = initialState, action) {\n switch (action.type) {\n case types.CREATE_POLL:\n console.log('create got %O', action);\n return update(state, {\n $set: {\n hasPoll: true,\n fetchingPoll: false,\n items: [action.poll],\n },\n });\n case types.SAVE_POLL:\n return update(state, {\n $set: {\n hasPoll: true,\n fetchingPoll: false,\n items: [action.poll],\n },\n });\n case types.EDIT_POLL:\n return update(state, {\n items: {\n [getPollIndex(state.items, action.poll.id)]: {\n $merge: action.poll,\n editingPoll: {$set: true},\n },\n },\n });\n case types.CANCEL_EDIT_POLL:\n return update(state, {\n $set: {\n hasPoll: true,\n fetchingPoll: false,\n items: [action.poll],\n },\n });\n case types.DELETE_POLL:\n return update(state, {\n $set: {\n hasPoll: false,\n fetchingPoll: false,\n items: [],\n },\n });\n case types.ADD_RESPONSE:\n return {items: [action.poll]};\n case types.SET_VOTED:\n return update(state, {\n items: {\n [getPollIndex(state.items, action.pollId)]: {\n voted: {$set: action.voted},\n isHostVoting: {$set: action.isHostVoting},\n },\n },\n });\n default:\n return state;\n }\n}\n\nfunction getPollIndex(state, pollId) {\n return state.map((e) => e.id).indexOf(pollId);\n}\n","import {toJSON, str, int} from 'evite';\nimport {valid_email} from '../../common/utils';\nimport * as utils from '../utils';\n\nimport {store} from '../store';\nimport * as types from './constants';\nimport {messagingStore} from '~/messaging/store';\nimport {activityFeedStore} from '~/view_invitation/activity-feed/ActivityFeedStore';\nimport {history as browserHistory} from '../../create/history';\n\nexport function submitRsvp(data, captcha = null, onRsvp = null, rsvpAction = 'frp') {\n const formData = {...data, captcha: toJSON(captcha)};\n const url = `/ajax/event/${window.evite_event.id}/view/rsvp`;\n setFormSubmitting(true);\n const win = false;\n\n $.post(url, formData, (response) => {\n setFormSubmitting(false);\n window.tags.track_event('submit_rsvp', {\n invite_rsvp_response: data.response,\n });\n if (onRsvp) onRsvp(response);\n switch (rsvpAction) {\n case 'interstitial':\n showInterstitial();\n updateRsvpFromGuest(response.guest, response.is_registered_user);\n browserHistory.push(utils.eventTabUrlPath('rsvp'));\n break;\n\n case 'show-game-rsvp':\n updateRsvpFromGuest(response.guest);\n break;\n\n case 'frp':\n default:\n window.location.assign(response.location);\n }\n browserHistory.push({\n pathname: window.location.pathname,\n query: {gid: response.guest.id || ''},\n });\n if (win) win.focus();\n }).fail((xhr, status, data) => {\n if (win) win.close();\n setFormSubmitting(false);\n const isPreconditionFailed = xhr && xhr.status === 412;\n if (isPreconditionFailed) {\n utils.handleCaptcha(xhr, status, data, (captcha) => {\n // Only submit the form again if captcha data is available\n captcha && submitRsvp(formData, captcha);\n });\n } else {\n // if error is not captcha, pass the error message to the rsvp form\n const json = xhr.responseJSON || toJSON(xhr.responseText);\n const message =\n (json && json.message) || 'There was a problem with your submission. Please try again.';\n showRsvpError(message);\n }\n });\n}\n\nexport function updateNotifications(notifications) {\n store.dispatch({\n type: types.UPDATE_NOTIFICATIONS,\n notifications,\n });\n}\n\nexport function showInterstitial() {\n store.dispatch({\n type: types.SHOW_INTERSTITIAL,\n });\n}\n\nexport function hideInterstitial() {\n store.dispatch({\n type: types.HIDE_INTERSTITIAL,\n });\n}\n\nexport function submitConfirmation() {\n store.dispatch({\n type: types.SUBMIT_CONFIRMATION,\n });\n}\n\nexport function showRsvpModalOverlay(show = true) {\n store.dispatch({\n show,\n type: types.SHOW_RSVP_MODAL_OVERLAY,\n });\n}\n\nexport function updateRsvpFromGuest(guest, isRegisteredUser) {\n // Also update state in messaging tab (aka Q)\n messagingStore.updateRsvp(guest);\n window.evite_event.rsvp = guest;\n // Invalidate messaging store so we get the new rsvp message\n activityFeedStore.invalidate();\n store.dispatch({\n guest,\n isRegisteredUser,\n type: types.UPDATE_RSVP_FROM_GUEST,\n });\n}\n\nexport function showRsvpError(error) {\n store.dispatch({\n error: str(error),\n type: types.SHOW_RSVP_ERROR,\n });\n}\n\nexport function showRsvpForm(show = true) {\n store.dispatch({\n show,\n type: types.SHOW_RSVP_FORM,\n });\n}\n\nexport function toggleRsvpFormVisible(response) {\n store.dispatch({\n type: types.TOGGLE_RSVP_FORM_VISIBLE,\n response: str(response),\n });\n}\n\nexport function toggleVideoModalVisibility(response) {\n store.dispatch({\n type: types.TOGGLE_VIDEO_MODAL_VISIBILITY,\n response: str(response),\n });\n}\n\nexport function setActiveRsvpButton(response) {\n store.dispatch({\n type: types.SET_ACTIVE_RSVP_BUTTON,\n response,\n });\n}\n\nexport function setFormSubmitting(submitting) {\n store.dispatch({\n type: types.SET_FORM_SUBMITTING,\n submitting,\n });\n}\n\nexport function setIncompleteGuest() {\n store.dispatch({\n type: types.SET_INCOMPLETE_GUEST,\n });\n}\n\nexport function setNotYou() {\n store.dispatch({\n type: types.SET_NOT_YOU,\n });\n}\n\nexport function unsetNotYou() {\n store.dispatch({\n type: types.UNSET_NOT_YOU,\n });\n}\n\nexport function setEditingGuestName(editing, guestName) {\n store.dispatch({\n editing,\n type: types.SET_EDITING_GUEST_NAME,\n guestName: str(guestName),\n });\n}\n\nexport function setGuestName(guestName) {\n store.dispatch({\n type: types.SET_GUEST_NAME,\n guestName: str(guestName),\n });\n}\n\nexport function getGuestName() {\n const rsvpState = store.getState().rsvp;\n if (rsvpState.altGuestName) {\n return rsvpState.altGuestName;\n }\n return rsvpState.guestName;\n}\n\nexport function setAltGuestName(altGuestName) {\n store.dispatch({\n type: types.SET_ALT_GUEST_NAME,\n altGuestName: str(altGuestName),\n });\n}\n\nexport function setGuestEmail(guestEmail) {\n store.dispatch({\n type: types.SET_GUEST_EMAIL,\n guestEmail: str(guestEmail),\n });\n}\n\nexport function getGuestEmail() {\n return str(store.getState().rsvp.guestEmail);\n}\n\nexport function getMaxAdultCount() {\n const maxGuests = int(store.getState().rsvp.maxGuests);\n return maxGuests + 1;\n}\n\nexport function getMaxKidCount() {\n const maxGuests = int(store.getState().rsvp.maxGuests);\n return maxGuests + 1;\n}\n\nexport function getMinKidCount() {\n return 0;\n}\n\nexport function getMinAdultCount() {\n return areKidsAllowed() ? 0 : 1;\n}\n\nexport function setTotalAdults(adultCount) {\n adultCount = parseInt(adultCount, 10);\n if (!isNaN(adultCount)) {\n const maxCount = getMaxAdultCount();\n const minCount = getMinAdultCount();\n if (adultCount > maxCount) {\n adultCount = maxCount;\n } else if (adultCount < minCount) {\n adultCount = minCount;\n }\n }\n const currAdultCount = getTotalAdults();\n if (adultCount == currAdultCount) {\n return;\n }\n store.dispatch({\n type: types.SET_TOTAL_ADULTS,\n adultCount,\n });\n if (adultCount == 1) {\n purgeEmptyPlusOnes();\n } else {\n addEmptyPlusOnesIfNeeded();\n }\n evaluatePlusOneNamesEmailsForErrors();\n}\n\nexport function setTotalKids(kidCount) {\n kidCount = parseInt(kidCount, 10);\n if (!isNaN(kidCount)) {\n const maxCount = getMaxKidCount();\n const minCount = getMinKidCount();\n if (kidCount > maxCount) {\n kidCount = maxCount;\n } else if (kidCount < minCount) {\n kidCount = minCount;\n }\n }\n store.dispatch({\n type: types.SET_TOTAL_KIDS,\n kidCount,\n });\n}\n\nexport function getTotalAdults() {\n return int(store.getState().rsvp.totalAdults);\n}\n\nexport function canIncrementTotalAdults() {\n return getTotalAdults() < getMaxAdultCount();\n}\n\nexport function incrementTotalAdults() {\n if (!canIncrementTotalAdults()) {\n return;\n }\n setTotalAdults(getTotalAdults() + 1);\n}\n\nexport function canDecrementTotalAdults() {\n return getTotalAdults() > getMinAdultCount();\n}\n\nexport function decrementTotalAdults() {\n if (!canDecrementTotalAdults()) {\n return;\n }\n setTotalAdults(getTotalAdults() - 1);\n}\n\nexport function getTotalKids() {\n return int(store.getState().rsvp.totalKids);\n}\n\nexport function canIncrementTotalKids() {\n return true; // TODO is that okay? is there any limit?\n}\n\nexport function incrementTotalKids() {\n if (!canIncrementTotalKids()) {\n return;\n }\n setTotalKids(getTotalKids() + 1);\n}\n\nexport function canDecrementTotalKids() {\n return getTotalKids() > 0;\n}\n\nexport function decrementTotalKids() {\n if (!canDecrementTotalKids()) {\n return;\n }\n setTotalKids(getTotalKids() - 1);\n}\n\nexport function setNotifyMarketing(notify) {\n store.dispatch({\n type: types.SET_NOTIFY_MARKETING,\n notify,\n });\n}\n\nexport function setRsvpComment(comment) {\n store.dispatch({\n type: types.SET_RSVP_COMMENT,\n comment: str(comment),\n });\n}\n\nexport function setRsvpResponse(response) {\n store.dispatch({\n type: types.SET_RSVP_RESPONSE,\n response: str(response),\n });\n}\n\nexport function setRsvpAction(action) {\n store.dispatch({\n type: types.SET_RSVP_ACTION,\n action: str(action),\n });\n}\n\n//-----------------------------------------------------------------------------\n// functions for plus one stuff\n\nexport function getPlusOnesData() {\n return store.getState().rsvp.plusOnesData;\n}\n\nexport function getCleanedPlusOnesData(keepIDs = false) {\n // remove the empties first, and remove the IDs from all of 'em unless\n // keepIDs is true\n const plusOnesData = getPlusOnesData();\n const cleanedP1Data = [];\n plusOnesData.forEach((p1_data) => {\n if (p1_data.email) {\n const p1 = {\n name: p1_data.name,\n email: p1_data.email,\n };\n if (keepIDs) {\n p1.id = p1_data.id;\n }\n cleanedP1Data.push(p1);\n }\n });\n return cleanedP1Data;\n}\n\nexport function getNumPlusOnes(includeEmpties = true) {\n if (includeEmpties) {\n return getPlusOnesData().length;\n }\n return getCleanedPlusOnesData().length;\n}\n\nexport function getPlusOnesDataAsJSONStr() {\n return JSON.stringify(getCleanedPlusOnesData());\n}\n\nexport function setPlusOnesData(plusOnesData, doErrorChecking = true) {\n store.dispatch({\n type: types.SET_PLUSONE_DATA,\n plusOnesData,\n });\n if (doErrorChecking) {\n evaluatePlusOneNamesEmailsForErrors();\n }\n}\n\nfunction purgeEmptyPlusOnes() {\n setPlusOnesData(getCleanedPlusOnesData(true));\n}\n\nexport function getPlusOneEmails() {\n const plus_ones_data = getCleanedPlusOnesData();\n const emails = [];\n plus_ones_data.forEach((item) => {\n emails.push(item.email);\n });\n return emails;\n}\n\nexport function setPlusOneEmails(emails) {\n const plusOnesData = [];\n emails.forEach((email) => {\n plusOnesData.push({\n name: '',\n email,\n id: Math.random(),\n });\n });\n setPlusOnesData(plusOnesData);\n}\n\nexport function addEmailFromEditorContents(failIfBeyondMax = false) {\n const emailEntered = getPlusOneEditText();\n\n if (!emailEntered) {\n this.updateErrorMessage();\n return '';\n }\n\n const existingEmails = getPlusOneEmails();\n if (existingEmails.includes(emailEntered)) {\n const message = `${emailEntered} is already present.`;\n return message;\n }\n\n if (!valid_email(emailEntered).is_valid) {\n const message = `${emailEntered} is not a valid email address.`;\n return message;\n }\n\n if (getGuestEmail() == emailEntered) {\n return getPlusOneAlreadyOnGuestListMessageFor(emailEntered);\n }\n\n const errMsg = _addPlusOneEmail(emailEntered, failIfBeyondMax);\n if (!errMsg) {\n setPlusOneEditText('');\n }\n return errMsg;\n}\n\nexport function getPlusOneAlreadyOnGuestListMessageFor(emailAddress) {\n return `${emailAddress} is already on the guest list. Enter the emails of your additional guests here.`;\n}\n\nfunction _addPlusOneEmail(email, failIfBeyondMax = false) {\n const currState = store.getState().rsvp;\n const currNumEmailsAllowed = currState.totalAdults - 1;\n const emails = getPlusOneEmails();\n emails.push(email);\n const numEmails = emails.length;\n const maxNumEmails = getMaxAdultCount() - 1;\n if (numEmails > maxNumEmails && failIfBeyondMax) {\n return `A maximum of ${maxNumEmails} email address${\n maxNumEmails > 1 ? 'es' : ''\n } can be added.`;\n }\n if (numEmails > currNumEmailsAllowed && numEmails <= maxNumEmails) {\n setTotalAdults(numEmails + 1);\n }\n setPlusOneEmails(emails);\n return '';\n}\n\nexport function removePlusOneEmail(email) {\n const emails = getPlusOneEmails();\n const idx = emails.indexOf(email);\n if (idx == -1) {\n return; // not present\n }\n emails.splice(idx, 1);\n setPlusOneEmails(emails);\n}\n\nexport function removeLastPlusOneEmail() {\n const emails = getPlusOneEmails();\n emails.pop();\n setPlusOneEmails(emails);\n}\n\nfunction _getPlusOneDataAtIndex(idx) {\n const plusOnesData = getPlusOnesData();\n if (idx < 0 || idx >= plusOnesData.length) {\n return null;\n }\n return plusOnesData[idx];\n}\n\nfunction _setPlusOneDataAtIndex(idx, p1Data, doErrorChecking = true) {\n const existingP1Data = _getPlusOneDataAtIndex(idx);\n if (!existingP1Data) {\n return; // out of range\n }\n const plusOnesData = getPlusOnesData();\n plusOnesData[idx] = p1Data;\n setPlusOnesData(plusOnesData, doErrorChecking);\n}\n\nexport function removePlusOneAtIndex(idx) {\n const p1DataAtIdx = _getPlusOneDataAtIndex(idx);\n if (!p1DataAtIdx) {\n return; // out of range\n }\n const plusOnesData = getPlusOnesData();\n plusOnesData.splice(idx, 1);\n setPlusOnesData(plusOnesData);\n}\n\nexport function setPlusOneNameAtIndex(idx, newName) {\n const p1Data = _getPlusOneDataAtIndex(idx);\n if (!p1Data || p1Data.name == newName) {\n return;\n }\n p1Data.name = newName;\n _setPlusOneDataAtIndex(idx, p1Data, false);\n}\n\nexport function setPlusOneEmailAtIndex(idx, newEmail) {\n const p1Data = _getPlusOneDataAtIndex(idx);\n if (!p1Data) {\n return;\n }\n p1Data.email = newEmail.trim();\n _setPlusOneDataAtIndex(idx, p1Data);\n}\n\nexport function addEmptyPlusOnes(numToAdd = 1) {\n const maxThatCanBeAdded = _numPlusOnesThatCanBeAdded();\n if (numToAdd > maxThatCanBeAdded) {\n numToAdd = maxThatCanBeAdded;\n }\n const plusOnesData = getPlusOnesData();\n for (let count = 0; count < numToAdd; count++) {\n plusOnesData.push({\n name: '',\n email: '',\n id: Math.random(),\n });\n }\n setPlusOnesData(plusOnesData);\n}\n\nexport function increaseAdultCountIfNeededForPlusOnes() {\n const numPlusOnes = getNumPlusOnes();\n const adultCount = getTotalAdults();\n if (adultCount <= numPlusOnes) {\n setTotalAdults(numPlusOnes + 1);\n }\n}\n\nexport function addEmptyPlusOnesIfNeeded() {\n const adultCount = getTotalAdults();\n if (adultCount < 2) {\n return; // that was easy\n }\n const numPlusOnes = getNumPlusOnes();\n if (adultCount > numPlusOnes + 1) {\n addEmptyPlusOnes(adultCount - (numPlusOnes + 1));\n }\n}\n\nexport function getPlusOneErrors() {\n return store.getState().rsvp.plusOnesErrors;\n}\n\nexport function setPlusOneErrors(plusOnesErrors) {\n store.dispatch({\n type: types.SET_PLUSONE_ERRORS,\n plusOnesErrors,\n });\n}\n\nexport function clearPlusOneErrors() {\n setPlusOneErrors({});\n}\n\nexport function areThereAnyPlusOneErrors() {\n return Boolean(Object.keys(getPlusOneErrors()).length > 0);\n}\n\nexport function getPlusOneErrorsAtIndex(idx) {\n return getPlusOneErrors()[idx];\n}\n\nconst PLUSONES_OVERALL_ERROR_KEY = 'overall';\n\nexport function getOverallPlusOneError() {\n return getPlusOneErrors()[PLUSONES_OVERALL_ERROR_KEY];\n}\n\nexport function evaluatePlusOneNamesEmailsForErrors() {\n clearPlusOnesWarningMessage();\n const p1Errors = {};\n const plusOnesData = getPlusOnesData();\n const guestEmail = getGuestEmail();\n const indexesOfEmailAddresses = {}; // for keeping track of duplicates\n for (let idx = 0; idx < plusOnesData.length; idx++) {\n const p1Data = plusOnesData[idx];\n if (!p1Data.name && !p1Data.email) {\n continue; // empties are okay\n }\n if (!p1Data.email) {\n p1Errors[idx] = 'Email is a required field';\n continue;\n }\n if (!valid_email(p1Data.email).is_valid) {\n p1Errors[idx] = 'Email address is invalid';\n continue;\n }\n if (p1Data.email == guestEmail) {\n p1Errors[idx] = `${guestEmail} is already on the guest list`;\n }\n if (indexesOfEmailAddresses[p1Data.email]) {\n indexesOfEmailAddresses[p1Data.email].push(idx);\n } else {\n indexesOfEmailAddresses[p1Data.email] = [idx];\n }\n }\n\n // check for and report on duplicates\n Object.keys(indexesOfEmailAddresses).forEach((email) => {\n const indexes = indexesOfEmailAddresses[email];\n if (indexes.length > 1) {\n indexes.forEach((idx) => {\n p1Errors[idx] = `${email} cannot be used more than once`;\n });\n }\n });\n\n // evaluate for overall plus one errors\n const numPlusOnes = getNumPlusOnes(false); // excluding empties\n const numAdults = getTotalAdults();\n const maxNumPlusOnes = numAdults - 1;\n if (numPlusOnes > maxNumPlusOnes) {\n const numPlusOnesNeededToRemove = numPlusOnes - maxNumPlusOnes;\n const errMsg = `Oops, you need to remove at least ${numPlusOnesNeededToRemove} Guest${\n numPlusOnesNeededToRemove > 1 ? 's' : ''\n } to submit your RSVP.`;\n p1Errors[PLUSONES_OVERALL_ERROR_KEY] = errMsg;\n }\n setPlusOneErrors(p1Errors);\n}\n\nlet PLUS_ONES_WARNING_MESSAGE = '';\n\nexport function setPlusOnesWarningMessage(warningMessage) {\n PLUS_ONES_WARNING_MESSAGE = warningMessage;\n}\n\nexport function clearPlusOnesWarningMessage() {\n setPlusOnesWarningMessage('');\n}\n\nexport function getPlusOnesWarningMessage() {\n return PLUS_ONES_WARNING_MESSAGE;\n}\n\nfunction _numPlusOnesThatCanBeAdded() {\n const maxNumPlusOnes = getMaxAdultCount() - 1;\n const numPlusOnes = getNumPlusOnes();\n return maxNumPlusOnes - numPlusOnes;\n}\n\nexport function canAddAPlusOne() {\n return _numPlusOnesThatCanBeAdded() > 0;\n}\n\nexport function getPlusOneEditText() {\n return str(store.getState().rsvp.plusOneEditText).trim();\n}\n\nexport function setPlusOneEditText(editTextStr) {\n store.dispatch({\n type: types.SET_PLUSONE_EDIT_TEXT,\n editTextStr: str(editTextStr),\n });\n}\n\nexport function areKidsAllowed() {\n return store.getState().rsvp.allowKids;\n}\n\nexport function toggleChangeRsvpVisible() {\n store.dispatch({\n type: types.TOGGLE_CHANGE_RSVP_VISIBLE,\n });\n}\n\nexport function setRsvpInterstitial(value = true) {\n store.dispatch({\n type: types.SET_RSVP_INTERSTITIAL,\n value,\n });\n}\n\nexport function hideInlineForm() {\n store.dispatch({\n type: types.HIDE_INLINE_FORM,\n });\n}\n","export const SHOW_RSVP_FORM = 'SHOW_RSVP_FORM';\nexport const SET_RSVP_INTERSTITIAL = 'SET_RSVP_INTERSTITIAL';\nexport const TOGGLE_RSVP_FORM_VISIBLE = 'TOGGLE_RSVP_FORM_VISIBLE';\nexport const TOGGLE_VIDEO_MODAL_VISIBILITY = 'TOGGLE_VIDEO_MODAL_VISIBILITY';\nexport const SET_ACTIVE_RSVP_BUTTON = 'SET_ACTIVE_RSVP_BUTTON';\nexport const SET_FORM_SUBMITTING = 'SET_FORM_SUBMITTING';\nexport const SET_INCOMPLETE_GUEST = 'SET_INCOMPLETE_GUEST';\nexport const SET_NOT_YOU = 'SET_NOT_YOU';\nexport const UNSET_NOT_YOU = 'UNSET_NOT_YOU';\nexport const SET_EDITING_GUEST_NAME = 'SET_EDITING_GUEST_NAME';\nexport const SET_GUEST_NAME = 'SET_GUEST_NAME';\nexport const SET_ALT_GUEST_NAME = 'SET_ALT_GUEST_NAME';\nexport const SET_GUEST_EMAIL = 'SET_GUEST_EMAIL';\nexport const SET_TOTAL_ADULTS = 'SET_TOTAL_ADULTS';\nexport const SET_TOTAL_KIDS = 'SET_TOTAL_KIDS';\nexport const SET_NOTIFY_MARKETING = 'SET_NOTIFY_MARKETING';\nexport const SET_RSVP_COMMENT = 'SET_RSVP_COMMENT';\nexport const SET_RSVP_RESPONSE = 'SET_RSVP_RESPONSE';\nexport const SET_RSVP_ACTION = 'SET_RSVP_ACTION';\nexport const SET_PLUSONE_DATA = 'SET_PLUSONE_DATA';\nexport const SET_PLUSONE_ERRORS = 'SET_PLUSONE_ERRORS';\nexport const SET_PLUSONE_EDIT_TEXT = 'SET_PLUSONE_EDIT_TEXT';\nexport const TOGGLE_CHANGE_RSVP_VISIBLE = 'TOGGLE_CHANGE_RSVP_VISIBLE';\nexport {SET_MESSAGE_MODAL_VISIBLE} from '~/view_invitation/message-modal/constants';\nexport const SHOW_RSVP_ERROR = 'SHOW_RSVP_ERROR';\nexport const SHOW_RSVP_MODAL_OVERLAY = 'SHOW_RSVP_MODAL_OVERLAY';\nexport const UPDATE_RSVP_FROM_GUEST = 'UPDATE_RSVP_FROM_GUEST';\nexport const UPDATE_NOTIFICATIONS = 'UPDATE_NOTIFICATIONS';\nexport const SHOW_INTERSTITIAL = 'SHOW_INTERSTITIAL';\nexport const HIDE_INTERSTITIAL = 'HIDE_INTERSTITIAL';\nexport const HIDE_INLINE_FORM = 'SUBMIT_CONFIRMATION';\nexport const SUBMIT_CONFIRMATION = 'SUBMIT_CONFIRMATION';\n\nexport const RSVP_RESPONSES = window.is_premium ? ['yes', 'no'] : ['yes', 'maybe', 'no'];\n\nexport const RSVP_RESPONSE_COPY = {\n yes: 'Yes',\n maybe: 'Maybe',\n no: 'No',\n};\n","import update from 'immutability-helper';\nimport * as types from './constants';\nimport * as utils from '../utils';\nimport {isCanceled} from '~/common/utils/event_utils';\nimport {modalReducer} from '~/view_invitation/message-modal/reducers';\nimport * as video from '~/view_invitation/video-r';\n\nif (process.env.NODE_ENV === 'test') {\n // this module is untestable. ugh.\n window.evite_event = {id: 'dumb imports', rsvp: {}, options: {}};\n}\n\nconst {rsvp} = window.evite_event;\nconst event_options = window.evite_event.options;\nconst altGuestName = rsvp ? rsvp.name : '';\n\nconst initialState = {\n showForm: window.is_preview ? true : !window.has_rsvpd,\n showModal: false,\n rsvpInterstitialVariation: undefined,\n showVideoModal: video.eventHasDisplayableVideo(),\n showChangeRsvp: false,\n preventRsvp: Boolean(\n utils.eventHasPassed() || isCanceled(window.evite_event.status) || window.is_preview\n ),\n formSubmitting: false,\n hasRsvpd: !!window.has_rsvpd,\n inGuestlist: !!rsvp,\n rsvpResponse: rsvp && !!window.has_rsvpd ? rsvp.response : 'yes',\n activeRsvpButton: '',\n style: window.evite_event.rsvp_style || {},\n guestId: window.guest_id || '',\n guestName: rsvp ? rsvp.name : '',\n altGuestName: window.user_is_registered ? '' : altGuestName,\n guestEmail: rsvp ? rsvp.email : '',\n storedGuestId: '',\n storedGuestName: '',\n storedGuestEmail: '',\n totalAdults: rsvp ? rsvp.number_of_adults : 1,\n totalKids: rsvp ? rsvp.number_of_kids : 0,\n promptForGuestCount: rsvp ? !rsvp.guest_of : true,\n comment: '',\n allowGuests: event_options.event_option_allow_guest_number,\n allowKids: event_options.event_option_allow_kids,\n maxGuests: event_options.event_option_max_guest_number || 100, // this is the number of *additional* people coming with the invited guest\n showNotifyMarketing: rsvp ? !rsvp.optin : true,\n plusOnesAllowed:\n !(rsvp && rsvp.guest_of) &&\n Boolean(event_options.event_option_allow_guest_number) &&\n Boolean(event_options.event_option_allow_invite_more),\n plusOnesData: rsvp ? _addIDsToPlusOnesData(rsvp.plus_one_data) : [],\n plusOnesErrors: {},\n plusOneEditText: '',\n // if they have never opted out, the checkbox should be on\n notifyMarketing: rsvp ? rsvp.optin || !rsvp.optout : true,\n privateGuestlist: event_options.event_option_private_guestlist,\n isAnonymous: false,\n editingName: !window.user_is_registered,\n inviteMethod: (rsvp && rsvp.invite_method) || '',\n rsvpErrors: '',\n showRsvpModalOverlay: !window.has_rsvpd && utils.isMobile(),\n showInterstitial: false,\n showConfirmation: !!window.has_rsvpd && utils.isMobile(),\n messageNotification: window.initial_message_data\n ? {...window.initial_message_data, visible: true}\n : {visible: false},\n rsvpAction: 'frp',\n notifications: rsvp ? rsvp.notifications : null,\n isRegisteredUser: window.user_is_registered,\n};\n\nfunction reducer(state = initialState, action) {\n switch (action.type) {\n case types.UPDATE_RSVP_FROM_GUEST:\n // FIXME: setting window.guest_id is a hack that won't update any onscreen components.\n window.guest_id = action.guest.id;\n return update(state, {\n hasRsvpd: {$set: true},\n inGuestList: {$set: true},\n rsvpResponse: {$set: action.guest.response},\n guestId: {$set: action.guest.id},\n guestName: {$set: action.guest.name},\n guestEmail: {$set: action.guest.email},\n totalAdults: {$set: action.guest.number_of_adults},\n totalKids: {$set: action.guest.number_of_kids},\n showNotifyMarketing: {$set: action.guest.optin},\n notifyMarketing: {$set: action.guest.optin || !action.guest.optout},\n editingName: {$set: false},\n showChangeRsvp: {$set: false},\n notifications: {$set: {...action.guest.notifications}},\n comment: {$set: ''},\n isRegisteredUser: {$set: action.isRegisteredUser},\n });\n case types.UPDATE_NOTIFICATIONS:\n return update(state, {\n notifications: {$set: {...action.notifications}},\n });\n case types.SET_RSVP_INTERSTITIAL:\n if (action.value)\n return update(state, {\n rsvpInterstitialVariation: {$set: 'interstitial'},\n rsvpAction: {$set: 'interstitial'},\n });\n return update(state, {\n rsvpInterstitialVariation: {$set: 'control'},\n });\n case types.SHOW_RSVP_FORM:\n return update(state, {\n showForm: {$set: action.show},\n rsvpResponse: {$set: window.evite_event.rsvp.response},\n editingName: {$set: state.editingName},\n });\n case types.TOGGLE_RSVP_FORM_VISIBLE:\n return update(state, {\n showForm: {$set: state.showForm || !state.showForm},\n showModal: {$set: !state.showModal},\n rsvpResponse: {\n $set:\n action.response ||\n (window.evite_event.rsvp ? window.evite_event.rsvp.response : state.rsvpResponse),\n },\n activeRsvpButton: {$set: action.response},\n editingName: {$set: state.editingName},\n rsvpErrors: {$set: ''},\n showChangeRsvp: {$set: state.hasRsvpd && action.response},\n });\n case types.TOGGLE_VIDEO_MODAL_VISIBILITY:\n return update(state, {\n showVideoModal: {$set: !state.showVideoModal},\n });\n case types.SET_ACTIVE_RSVP_BUTTON:\n return update(state, {\n activeRsvpButton: {$set: action.response},\n });\n case types.SET_RSVP_ACTION:\n return update(state, {\n rsvpAction: {$set: action.action},\n });\n case types.SET_FORM_SUBMITTING:\n return update(state, {\n formSubmitting: {$set: action.submitting},\n });\n case types.SET_INCOMPLETE_GUEST:\n return update(state, {\n inGuestlist: {$set: false},\n });\n case types.SET_NOT_YOU:\n return update(state, {\n guestId: {$set: ''},\n isAnonymous: {$set: true},\n inGuestlist: {$set: false},\n storedGuestId: {$set: state.guestId},\n storedGuestName: {$set: state.guestName},\n storedGuestEmail: {$set: state.guestEmail},\n guestName: {$set: ''},\n altGuestName: {$set: ''},\n guestEmail: {$set: ''},\n hasRsvpd: {$set: false},\n });\n case types.UNSET_NOT_YOU:\n return update(state, {\n guestId: {$set: state.storedGuestId},\n isAnonymous: {$set: false},\n inGuestlist: {$set: !!rsvp},\n guestName: {$set: state.storedGuestName},\n altGuestName: {$set: state.storedGuestName},\n guestEmail: {$set: state.storedGuestEmail},\n hasRsvpd: {$set: !!window.has_rsvpd},\n });\n case types.SET_EDITING_GUEST_NAME:\n return update(state, {\n editingName: {$set: action.editing},\n altGuestName: {$set: action.guestName},\n });\n case types.SET_GUEST_NAME:\n return update(state, {\n guestName: {$set: action.guestName},\n });\n case types.SET_ALT_GUEST_NAME:\n return update(state, {\n altGuestName: {$set: action.altGuestName},\n });\n case types.SET_GUEST_EMAIL:\n return update(state, {\n guestEmail: {$set: action.guestEmail},\n });\n case types.SET_TOTAL_ADULTS:\n return update(state, {\n totalAdults: {$set: parseInt(action.adultCount, 10)},\n });\n case types.SET_TOTAL_KIDS:\n return update(state, {\n totalKids: {$set: parseInt(action.kidCount, 10)},\n });\n case types.SET_NOTIFY_MARKETING:\n return update(state, {\n notifyMarketing: {$set: action.notify},\n });\n case types.SET_RSVP_COMMENT:\n return update(state, {\n comment: {$set: action.comment},\n });\n case types.TOGGLE_CHANGE_RSVP_VISIBLE:\n return update(state, {\n showChangeRsvp: {$set: !state.showChangeRsvp},\n });\n case types.SET_RSVP_RESPONSE:\n return update(state, {\n rsvpResponse: {$set: action.response},\n });\n case types.SET_PLUSONE_DATA:\n return update(state, {\n plusOnesData: {$set: action.plusOnesData},\n });\n case types.SET_PLUSONE_ERRORS:\n return update(state, {\n plusOnesErrors: {$set: action.plusOnesErrors},\n });\n case types.SET_PLUSONE_EDIT_TEXT:\n return update(state, {\n plusOneEditText: {$set: action.editTextStr},\n });\n case types.SHOW_RSVP_ERROR:\n return update(state, {\n rsvpErrors: {$set: action.error},\n });\n case types.SHOW_RSVP_MODAL_OVERLAY:\n return update(state, {\n showRsvpModalOverlay: {$set: action.show},\n });\n case types.SHOW_INTERSTITIAL:\n return update(state, {\n showInterstitial: {$set: true},\n showModal: {$set: false},\n });\n case types.HIDE_INLINE_FORM:\n return update(state, {\n showModal: {$set: false},\n });\n case types.HIDE_INTERSTITIAL:\n return update(state, {\n showChangeRsvp: {$set: false},\n showModal: {$set: false},\n showInterstitial: {$set: false},\n showConfirmation: {$set: true},\n });\n case types.SUBMIT_CONFIRMATION:\n return update(state, {});\n default:\n return state;\n }\n}\n\nfunction _addIDsToPlusOnesData(plusOnesData) {\n if (!plusOnesData) return [];\n for (let idx = 0; idx < plusOnesData.length; idx++) {\n plusOnesData[idx].id = Math.random();\n }\n return plusOnesData;\n}\n\nexport const rsvpReducer = utils.reduceReducers(reducer, modalReducer);\n","export const TOGGLE_SLIDESHOW_VISIBLE = 'TOGGLE_SLIDESHOW_VISIBLE';\nexport const CHANGE_SLIDE = 'CHANGE_SLIDE';\nexport const TOGGLE_COMMENTS_VISIBLE = 'TOGGLE_COMMENTS_VISIBLE';\nexport const SET_COMMENTS_VISIBLE = 'SET_COMMENTS_VISIBLE';\nexport const SET_COMMENT_PADDING = 'SET_COMMENT_PADDING';\nexport const SET_OVERLAY_AD_VISIBLE = 'SET_OVERLAY_AD_VISIBLE';\n","import update from 'immutability-helper';\nimport * as types from './constants';\n\nconst initialState = {\n isOpen: false,\n postId: 0,\n commentsVisible: false,\n commentPadding: 0,\n overlayAdVisible: false,\n};\n\nexport function slideshowReducer(state = initialState, action) {\n switch (action.type) {\n case types.TOGGLE_SLIDESHOW_VISIBLE:\n return update(state, {\n isOpen: {$set: action.isOpen},\n postId: {$set: action.postId},\n commentsVisible: {$set: false},\n overlayAdVisible: {$set: false},\n });\n case types.CHANGE_SLIDE:\n return update(state, {\n postId: {$set: action.postId},\n });\n case types.TOGGLE_COMMENTS_VISIBLE:\n return update(state, {\n commentsVisible: {$set: !state.commentsVisible},\n });\n case types.SET_COMMENTS_VISIBLE:\n return update(state, {\n commentsVisible: {$set: action.commentsVisible},\n });\n case types.SET_COMMENT_PADDING:\n return update(state, {\n commentPadding: {$set: action.commentPadding},\n });\n case types.SET_OVERLAY_AD_VISIBLE:\n return update(state, {\n overlayAdVisible: {$set: action.visible},\n });\n default:\n return state;\n }\n}\n","import {store} from '../store';\nimport * as utils from '../utils';\nimport * as types from './constants';\nimport {getWidget} from '~/view_invitation/utils';\n\nlet widget = null;\n\nexport async function hydrateSponsoredRegistry() {\n widget = getWidget('sponsored_registry');\n if (!widget) return;\n\n const url = `/ajax/event/${window.evite_event.id}/sponsored-registry/${widget.widget_id}/?gid=${window.guest_id}`;\n const response = await evite.fetch(url, {\n method: 'get',\n credentials: 'include',\n cache: 'no-cache',\n headers: {\n 'X-CSRFToken': evite.cookie('csrftoken'),\n Accept: 'application/json',\n },\n });\n if (!response.ok) {\n utils.renderAjaxErrorModal(response);\n }\n\n const data = await response.json();\n data.data_layer = undefined;\n store.dispatch({\n type: types.UPDATE_SPONSORED_REGISTRY,\n sponsoredRegistry: data,\n });\n}\n\nexport function selectItem(item, quantity) {\n const url = getUrlFor('select-item');\n const data = {\n item,\n quantity,\n };\n window.$.post(url, data, (response) => {\n store.dispatch({\n type: types.UPDATE_SPONSORED_REGISTRY,\n sponsoredRegistry: response,\n });\n }).fail((jqXHR, textStatus, errorThrown) => {\n utils.renderAjaxErrorModal(jqXHR, textStatus, errorThrown);\n });\n}\n\nexport function removeSelection(id) {\n const url = getUrlFor('remove-selection');\n const data = {\n item: id,\n };\n window.$.post(url, data, (response) => {\n store.dispatch({\n type: types.UPDATE_SPONSORED_REGISTRY,\n sponsoredRegistry: response,\n });\n }).fail((jqXHR, textStatus, errorThrown) => {\n utils.renderAjaxErrorModal(jqXHR, textStatus, errorThrown);\n });\n}\n\nfunction getUrlFor(actionStr) {\n return `/ajax/event/${window.evite_event.id}/sponsored-registry/${widget.widget_id}/${actionStr}/?gid=${window.guest_id}`;\n}\n","export const UPDATE_SPONSORED_REGISTRY = 'UPDATE_SPONSORED_REGISTRY';\n","import update from 'immutability-helper';\n\nimport * as types from './constants';\n\nconst emptyState = {\n items: [],\n editing: true,\n allow_other_items: false,\n fetching: true,\n};\n\nconst initialState = emptyState;\n\nexport function sponsoredRegistryReducer(state = initialState, action) {\n switch (action.type) {\n case types.UPDATE_SPONSORED_REGISTRY:\n action.sponsoredRegistry.fetching = false;\n return update(state, {$set: action.sponsoredRegistry});\n\n default:\n return state;\n }\n}\n","// utility functions for updating the view_invitation mobx stores\n\n/**\n * updates all posts in a given store\n * @param {Object} store - the store we want to update\n * @param {Object} posts - posts can be activity feed posts or photos\n */\nexport const updateAllPosts = (store, posts) => doUpdatePosts(store, posts, false);\n\n/**\n * appends posts to a given store\n * @param {Object} store - the store we want to update\n * @param {Object} posts - posts can be activity feed posts or photos\n */\nexport const appendPosts = (store, posts) => doUpdatePosts(store, posts, true);\n\nconst doUpdatePosts = (store, posts, append) => {\n if (!posts) return;\n const {objects, cursor, more, hydratingFeed, fetchingPhotos, hydrated} = posts;\n\n if (append) store.objects = (store.objects || []).concat(objects);\n else store.objects = objects;\n store.cursor = cursor || '';\n store.more = more;\n\n if (typeof hydratingFeed === 'boolean') store.hydratingFeed = hydratingFeed;\n if (typeof fetchingPhotos === 'boolean') store.fetchingPhotos = fetchingPhotos;\n if (typeof hydrated === 'boolean') store.hydrated = hydrated;\n};\n\n/**\n * adds a single post\n * @param {Object} store - the store we want to update\n * @param {Object} newPost - new post we want to add to the store\n */\nexport const addSinglePost = (store, newPost) => {\n if (!newPost) return;\n\n store.objects.unshift(newPost);\n};\n\n/**\n * adds multiple posts to the top\n * @param {Object} store - the store we want to update\n * @param {Object[]} newPosts - new posts we want to add to the store\n */\nexport const addMultiplePosts = (store, newPosts) => {\n if (!newPosts) return;\n\n const updatedPosts = [...newPosts.objects, ...store.objects];\n store.objects = updatedPosts;\n};\n\n/**\n * deletes a post by postId\n * @param {Object} store - the store we want to update\n * @param {string} postId - the ID of the post we want to delete\n */\nexport const deletePostById = (store, postId) => {\n if (!postId) return;\n\n const posts = store.objects;\n for (let i = 0; i < posts.length; i++) {\n const post = posts[i];\n if (post.id === postId) {\n store.objects.splice(i, 1);\n break;\n }\n }\n};\n\n/**\n * 'show more' posts\n * @param {Object} store - the store we want to update\n * @param {string} postId - the ID of the post we want to delete\n */\nexport const getMorePosts = (store, feedPosts) => {\n if (!feedPosts) return;\n\n const {objects, cursor, more, hydratingFeed} = feedPosts;\n\n store.objects = [...store.objects, ...objects];\n store.cursor = cursor;\n store.more = more;\n store.hydratingFeed = hydratingFeed;\n};\n\n/**\n * get the index of a post\n * @param {Object} store - the store we want to search in\n * @param {number} id - the post id to search for\n */\nexport const getPostIndex = (store, id) => store.objects.findIndex((post) => post.id === id);\n\n/**\n * get the index of a reply within a post\n * @param {Object} store - the store we want to search in\n * @param {number} postIndex - the index of the post\n * @param {number} replyId - the reply id to search for\n */\nexport const getReplyIndex = (store, postIndex, replyId) =>\n store.objects[postIndex].replies.objects.findIndex((reply) => reply.id === replyId);\n","import {combineReducers, compose, createStore, applyMiddleware} from 'redux';\nimport {avatarsReducer} from './avatars/reducers';\nimport {newMessagesReducer} from './event-view-tabs/reducers';\nimport {pollsReducer} from './polls/reducers';\nimport {rsvpReducer} from './rsvp/reducers';\nimport {slideshowReducer} from './slideshow/reducers';\nimport {sponsoredRegistryReducer} from './sponsored-registry/reducers';\nimport {whatToBringReducer} from './what-to-bring/reducers';\nimport {reducer as giftKeywordsReducer} from '../common/gift-keywords/reducer';\n\n// not used here, but it should be part of the main bundle\nimport '~/view_invitation/guestlist/actions';\n\n// Combine Reducers\n// Here we combine reducers into a single object to be used in the store.\n// Important, non-obvious note: The shape of the reducers forms the shape of\n// the store.\n// http://redux.js.org/docs/api/combineReducers.html\nconst eventViewReducer = combineReducers({\n avatars: avatarsReducer,\n polls: pollsReducer,\n rsvp: rsvpReducer,\n slideshow: slideshowReducer,\n sponsoredregistry: sponsoredRegistryReducer,\n whattobring: whatToBringReducer,\n newMessages: newMessagesReducer,\n giftKeywords: giftKeywordsReducer,\n});\n\n// Crash reporting Redux middleware for sentry:\n// https://blog.sentry.io/2016/08/24/redux-middleware-error-logging.html\n\n// It would be nice to send state (with extra) but our state is too large...\n// This is also the reason why we cannot use the nicer RavenMiddleware:\n// https://blog.sentry.io/2016/08/24/redux-middleware-error-logging.html#redux-and-sentry\nconst reduxCrashReporter = (store) => (next) => (action) => {\n try {\n return next(action); // Dispatch action\n } catch (err) {\n Raven.captureException(err, {\n extra: {\n action,\n },\n });\n throw err;\n }\n};\n\n// The devToolsExtension line enables chrome redux-devtools if installed:\n// https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en\nconst composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;\n\n// Store\n// A store is the application state, composed of the reducer(s)\n// http://redux.js.org/docs/basics/Store.html\nexport const store = createStore(\n eventViewReducer,\n composeEnhancers(applyMiddleware(reduxCrashReporter))\n);\n","import {CaptchaDialog} from '~/modal/index';\nimport {modal_ajax_error_handler} from '~/modal/_ajax_error_handler';\nimport {isCanceled} from '~/common/utils/event_utils';\n\nexport function reduceReducers(...reducers) {\n // This takes 2 reducers and reduces them into a single reducer (from r to l).\n // We are using this to merge photos and posts reducers, for example. Another\n // way to look at it is extending a reducer. We can extend the post reducer with\n // additional actions from the photos reducer.\n // Example: reducer_A = reduceReducers(reducer_A, reducer_B);\n return (previous, current) => reducers.reduce((p, r) => r(p, current), previous);\n}\n\nlet guidIndex = 0;\nconst guidPrefix = Math.floor(Math.random() * 2147483647).toString(16);\nexport function guid() {\n return `${guidPrefix}-${guidIndex++}`;\n}\n\nexport function eventHasPassed() {\n return !!window.event_has_passed;\n}\n\nexport function isPremium() {\n return !!window.is_premium;\n}\n\nexport function hasAds() {\n return !isPremium() && window.evite_event.remove_ads !== true;\n}\n\nexport function isCard() {\n return !!window.is_card;\n}\n\nexport function canSeeGuests() {\n return !window.evite_event.options.event_option_private_guestlist;\n}\n\nexport function canRSVP() {\n return !isCard() && !eventHasPassed() && !isCanceled(window.evite_event.status);\n}\n\nexport function isPreview() {\n return !!window.is_preview;\n}\n\nexport function isMobile() {\n return !!window.is_mobile_site;\n}\n\nexport function isMobileDevice() {\n return !!window.is_mobile;\n}\n\nexport function hasWidget(widget_type) {\n if (!window.evite_event) return false;\n const widgets = window.evite_event.widgets || [];\n for (const widget of widgets) {\n if (widget.widget_type === widget_type) return true;\n }\n return false;\n}\n\nexport function hasSponsoredRegistry() {\n return hasWidget('sponsored_registry');\n}\n\nexport function getWidget(widget_type) {\n if (!window.evite_event) return false;\n const widgets = window.evite_event.widgets || [];\n for (const widget of widgets) {\n if (widget.widget_type === widget_type) return widget;\n }\n}\n\nconst {navigator} = window;\nconst {userAgent} = navigator;\n\nexport function isIpad() {\n return Boolean(userAgent.match(/iPad/i));\n}\n\nexport function isIphone() {\n return Boolean(userAgent.match(/iPhone/i));\n}\n\nexport function isFireFox() {\n return Boolean(userAgent.match(/firefox/i));\n}\n\nexport function isAndroid() {\n return Boolean(userAgent.match(/android/i));\n}\n\nexport function isWindows() {\n return (window.navigator.platform || '').match(/Win/i);\n}\n\nexport function isHost() {\n return !!window.evite_event.is_host_viewing;\n}\n\nexport function isUserAHost(userId) {\n return window.evite_event.host_ids.includes(userId);\n}\n\nexport function isGuest(state = null) {\n if (state) return Boolean(state.rsvp.guestId);\n return Boolean(window.guest_id);\n}\n\nexport function showKnot(storeName = 'template') {\n return Boolean(\n window.KNOT_EVENT_TYPES.indexOf(evite.store.get(`${storeName}.event_type`)) !== -1\n );\n}\nexport function showBump(storeName = 'template') {\n return Boolean(\n window.BUMP_EVENT_TYPES.indexOf(evite.store.get(`${storeName}.event_type`)) !== -1\n );\n}\n\nexport function getGiftingType(storeName) {\n const show_knot = window.KNOT_EVENT_TYPES ? showKnot(storeName) : window.show_knot;\n const show_bump = window.BUMP_EVENT_TYPES ? showBump(storeName) : window.show_bump;\n const giftType = show_knot ? 'knot' : show_bump ? 'bump' : 'amazon';\n\n return giftType;\n}\n\nexport function hasRsvpd(state = null) {\n if (state) return state.rsvp.hasRsvpd;\n return !!window.has_rsvpd;\n}\n\nexport function hasAmazonStoreFront() {\n return typeof window.amazon_store_front !== 'undefined' && window.amazon_store_front !== null;\n}\n\nexport function isVideo() {\n return !!window.evite_event.options.video;\n}\n\nexport function canComment(state = null) {\n if (isCanceled(window.evite_event.status) || (state && isCanceled(state.event?.status))) {\n return false;\n }\n return isGuest(state) && (hasRsvpd(state) || eventHasPassed());\n}\n\nexport function canPostPhotos(state = null) {\n return isGuest(state) && (hasRsvpd(state) || eventHasPassed());\n}\n\nexport function isBreakPoint(name) {\n return evite.dom.isBreakPoint(name);\n}\n\nexport function canDeleteEventItem(itemUserId) {\n return isHost() || window.user_id === itemUserId;\n}\n\nexport function canEditEventItem(itemUserId) {\n return window.user_id === itemUserId;\n}\n\nexport function eventTabUrlPath(urlPart, urlHash = '') {\n const qs = window.location.search;\n return `/event/${window.evite_event.id}/${urlPart}${qs}${urlHash}`;\n}\n\nexport function eventTabUrlPathName(urlPart) {\n return `/event/${window.evite_event.id}/${urlPart}`;\n}\n\nexport function handleCaptchaJsonResponse(responseJson) {\n return new Promise((resolve) => {\n new CaptchaDialog({\n challenge: responseJson,\n onSubmit: (_response) => {\n const captchaResponse = {..._response};\n captchaResponse.name = undefined;\n resolve(captchaResponse);\n },\n }).show();\n });\n}\n\nexport function handleCaptcha(xhr, status, data, callback) {\n if (xhr && xhr.status === 412) {\n const response = JSON.parse(xhr.responseText);\n new CaptchaDialog({\n challenge: response,\n onSubmit(captcha) {\n captcha.name = void 0;\n captcha = JSON.stringify(captcha);\n callback(captcha);\n },\n }).show();\n } else {\n renderAjaxErrorModal(xhr, status, data);\n if (callback) {\n callback('');\n }\n }\n}\n\nexport function renderAjaxErrorModal(xhr, status, data) {\n const hasStatus = xhr && xhr.status;\n const isServerError = xhr && xhr.status >= 500 && xhr.status < 600;\n\n if (hasStatus && (isMobile() || isServerError)) {\n let message = 'Sorry, an error has occurred';\n let responseTextMessage;\n\n try {\n responseTextMessage = JSON.parse(xhr.responseText).message;\n } catch (error) {\n responseTextMessage = xhr.responseText;\n }\n\n if (isServerError) {\n const consoleTitle = typeof data === 'string' ? data : 'Internal Server Error';\n if (responseTextMessage && console && console.error) {\n console.error(`${consoleTitle}:\\n\\n${responseTextMessage}\\n`);\n }\n message = 'Sorry, an internal server error has occurred';\n } else if (responseTextMessage) {\n message = responseTextMessage;\n }\n\n alert(message);\n } else {\n modal_ajax_error_handler(xhr, status, data);\n }\n}\n\nexport function pluralize(label, count) {\n label = count === 1 ? label : `${label}s`;\n return `${count} ${label}`;\n}\n\nexport function fixupAbsoluteURL(url) {\n // Adds https:// to url if needed\n if (url && !url.match(/https?:\\/\\//i)) {\n if (url[0] !== '/') url = `//${url}`;\n url = `https:${url}`;\n }\n return url;\n}\n\nexport function formatMoney(amount) {\n return amount.toFixed(2).replace(/(\\d)(?=(\\d{3})+(?:\\.\\d+)?$)/g, '$1,');\n}\n\nexport function indexes(source, find) {\n const result = [];\n for (let i = 0; i < source.length; ++i) {\n if (source.substring(i, i + find.length) === find) {\n result.push(i);\n }\n }\n\n return result;\n}\n\n// This should only be called from view invitation - returns whether\n// the event being viewed should have its polls be \"meal options\".\n// See EVT-15215 for all the deets.\nexport function isMealOptionsEvent() {\n return Boolean(window.is_poll_meal_options);\n}\n","import React, {PureComponent} from 'react';\nimport * as utils from './utils';\nimport * as actions from './rsvp/actions';\n\nexport function eventHasDisplayableVideo() {\n return utils.isVideo() && window.video && JSON.parse(window.video).viewable;\n}\n\nexport class Video extends PureComponent {\n constructor(props) {\n super(props);\n this.state = {\n viewmap: new Map(JSON.parse(window.video).views),\n };\n }\n\n videoFinished() {\n actions.toggleVideoModalVisibility();\n }\n\n render() {\n const isChrome = !!window.chrome;\n let i = 0;\n const sources = [];\n this.state.viewmap.forEach((v, k, m) => {\n sources.push(\n {!isChrome && (\n \n {sources}\n \n )}\n {isChrome && (\n \n {sources}\n \n )}\n
\n );\n }\n}\n","import {store} from '../store';\nimport * as types from './constants';\nimport * as utils from '../utils';\n\nexport async function hydrateWhatToBring() {\n // get the widget id\n if (!store.getState().whattobring.hasWhatToBring) return;\n\n const url = `/ajax/event/${window.evite_event.id}/what-to-bring/?gid=${window.guest_id}`;\n const response = await evite.fetch(url, {\n method: 'get',\n credentials: 'include',\n cache: 'no-cache',\n headers: {\n 'X-CSRFToken': evite.cookie('csrftoken'),\n Accept: 'application/json',\n },\n });\n if (!response.ok) {\n utils.renderAjaxErrorModal(response);\n }\n\n const data = await response.json();\n store.dispatch({\n type: types.UPDATE_WHAT_TO_BRING,\n whatToBring: data,\n });\n}\n\nexport function createWhatToBring(data) {\n const url = `/ajax/event/${window.evite_event.id}/what-to-bring/?gid=${window.guest_id}`;\n window.$.post(url, data, (response) => {\n store.dispatch({\n type: types.UPDATE_WHAT_TO_BRING,\n whatToBring: response,\n });\n }).fail((jqXHR, textStatus, errorThrown) => {\n utils.renderAjaxErrorModal(jqXHR, textStatus, errorThrown);\n });\n}\n\nexport function updateWhatToBring(data) {\n const url = `/ajax/event/${window.evite_event.id}/what-to-bring/update-items/?gid=${window.guest_id}`;\n window.$.post(url, data, (response) => {\n store.dispatch({\n type: types.UPDATE_WHAT_TO_BRING,\n whatToBring: response,\n });\n }).fail((jqXHR, textStatus, errorThrown) => {\n utils.renderAjaxErrorModal(jqXHR, textStatus, errorThrown);\n });\n}\n\nexport function resetWhatToBring(data) {\n store.dispatch({type: types.UPDATE_WHAT_TO_BRING, whatToBring: data});\n}\n\nexport function updateItemName(index, value) {\n store.dispatch({\n type: types.UPDATE_ITEM_NAME,\n index,\n value,\n });\n}\n\nexport function updateItemValidation(index, isDuplicate) {\n store.dispatch({\n type: types.UPDATE_ITEM_VALIDATION,\n index,\n isDuplicate,\n });\n}\n\nexport function updateItemQty(index, value) {\n store.dispatch({\n type: types.UPDATE_ITEM_QTY,\n index,\n value,\n });\n}\n\nexport function addItem() {\n store.dispatch({\n type: types.ADD_ITEM,\n });\n}\n\nexport function removeItem(index) {\n store.dispatch({\n type: types.REMOVE_ITEM,\n index,\n });\n}\n\nexport function toggleEdit() {\n store.dispatch({\n type: types.TOGGLE_EDIT,\n });\n}\n\nexport function toggleAllowOtherItems() {\n store.dispatch({\n type: types.TOGGLE_ALLOW,\n });\n}\n\nexport function selectItem(item, name, quantity) {\n const url = `/ajax/event/${window.evite_event.id}/what-to-bring/select-item/?gid=${window.guest_id}`;\n const data = {\n item,\n name,\n quantity,\n };\n window.$.post(url, data, (response) => {\n store.dispatch({\n type: types.UPDATE_WHAT_TO_BRING,\n whatToBring: response,\n });\n }).fail((jqXHR, textStatus, errorThrown) => {\n utils.renderAjaxErrorModal(jqXHR, textStatus, errorThrown);\n });\n}\n\nexport function removeSelection(id) {\n const url = `/ajax/event/${window.evite_event.id}/what-to-bring/remove-selection/?gid=${window.guest_id}`;\n const data = {\n item: id,\n };\n window.$.post(url, data, (response) => {\n store.dispatch({\n type: types.UPDATE_WHAT_TO_BRING,\n whatToBring: response,\n });\n }).fail((jqXHR, textStatus, errorThrown) => {\n utils.renderAjaxErrorModal(jqXHR, textStatus, errorThrown);\n });\n}\n\nexport function deleteWhatToBring() {\n const url = `/ajax/event/${window.evite_event.id}/what-to-bring/?gid=${window.guest_id}`;\n window.$.ajax({\n url,\n type: 'DELETE',\n }).fail((jqXHR, textStatus, errorThrown) => {\n utils.renderAjaxErrorModal(jqXHR, textStatus, errorThrown);\n });\n store.dispatch({\n type: types.DELETE_WHAT_TO_BRING,\n });\n}\n\nexport function updateOtherName(index, value) {\n store.dispatch({\n type: types.UPDATE_OTHER_NAME,\n index,\n value,\n });\n}\n\nexport function updateOtherQty(index, value) {\n store.dispatch({\n type: types.UPDATE_OTHER_QTY,\n index,\n value,\n });\n}\n","export const UPDATE_WHAT_TO_BRING = 'UPDATE_WHAT_TO_BRING';\nexport const UPDATE_ITEM_NAME = 'UPDATE_ITEM_NAME';\nexport const UPDATE_ITEM_VALIDATION = 'UPDATE_ITEM_VALIDATION';\nexport const UPDATE_ITEM_QTY = 'UPDATE_ITEM_QTY';\nexport const ADD_ITEM = 'ADD_ITEM';\nexport const REMOVE_ITEM = 'REMOVE_ITEM';\nexport const TOGGLE_EDIT = 'TOGGLE_EDIT';\nexport const TOGGLE_ALLOW = 'TOGGLE_ALLOW';\nexport const DELETE_WHAT_TO_BRING = 'DELETE_WHAT_TO_BRING';\nexport const UPDATE_OTHER_NAME = 'UDPATE_OTHER_NAME';\nexport const UPDATE_OTHER_QTY = 'UPDATE_OTHER_QTY';\nexport const CANCEL_OTHER = 'CANCEL_OTHER';\n","import update from 'immutability-helper';\nimport {hasWidget} from '~/view_invitation/utils';\n\nimport * as types from './constants';\n\nconst emptyState = {\n items: [\n {name: '', quantity: '', placeholder: 'ex: chips', autofocus: true},\n {name: '', quantity: '', placeholder: 'ex: salsa'},\n {name: '', quantity: '', placeholder: 'ex: drinks'},\n {name: '', quantity: '', placeholder: 'ex: cups'},\n ],\n editing: true,\n allow_other_items: false,\n};\n\nconst hasWhatToBring = hasWidget('what_to_bring');\nconst initialState = {\n hasWhatToBring,\n fetchingWhatToBring: hasWhatToBring,\n ...emptyState,\n};\n\nexport function whatToBringReducer(state = initialState, action) {\n switch (action.type) {\n case types.UPDATE_WHAT_TO_BRING:\n action.whatToBring.fetchingWhatToBring = false;\n action.whatToBring.hasWhatToBring = true;\n return update(state, {$set: action.whatToBring});\n case types.UPDATE_ITEM_NAME:\n return update(state, {\n items: {\n [action.index]: {\n name: {$set: action.value},\n },\n },\n });\n case types.UPDATE_ITEM_VALIDATION:\n return update(state, {\n items: {\n [action.index]: {\n isDuplicate: {$set: action.isDuplicate},\n },\n },\n });\n case types.UPDATE_ITEM_QTY:\n return update(state, {\n items: {\n [action.index]: {\n quantity: {$set: action.value},\n },\n },\n });\n case types.ADD_ITEM:\n return update(state, {\n items: {\n $push: [\n {\n name: '',\n quantity: '',\n autofocus: true,\n },\n ],\n },\n });\n case types.REMOVE_ITEM:\n const filtered = state.items.filter((item, i) => i !== action.index);\n return update(state, {\n items: {$set: filtered},\n });\n case types.TOGGLE_EDIT:\n const {editing} = state;\n return update(state, {\n editing: {$set: !editing},\n });\n case types.TOGGLE_ALLOW:\n const {allow_other_items} = state;\n return update(state, {\n allow_other_items: {$set: !allow_other_items},\n });\n case types.DELETE_WHAT_TO_BRING:\n emptyState.hasWhatToBring = false;\n return emptyState;\n case types.UPDATE_OTHER_NAME:\n return update(state, {\n items: {\n other: {\n name: {$set: action.value},\n },\n },\n });\n case types.UPDATE_OTHER_QTY:\n return update(state, {\n items: {\n other: {\n quantity: {$set: action.value},\n },\n },\n });\n case types.CANCEL_OTHER:\n return update(state, {});\n\n default:\n return state;\n }\n}\n","function r(e){var t,f,n=\"\";if(\"string\"==typeof e||\"number\"==typeof e)n+=e;else if(\"object\"==typeof e)if(Array.isArray(e))for(t=0;t\n
\n */\n // element.offsetParent does the right thing in ie7 and below. Return parent with layout!\n // In other browsers it only includes elements with position absolute, relative or\n // fixed, not elements with overflow set to auto or scroll.\n // if (UA.ie && ieMode < 8) {\n // return element.offsetParent;\n // }\n // 统一的 offsetParent 方法\n var doc = utils.getDocument(element);\n var body = doc.body;\n var parent;\n var positionStyle = utils.css(element, 'position');\n var skipStatic = positionStyle === 'fixed' || positionStyle === 'absolute';\n if (!skipStatic) {\n return element.nodeName.toLowerCase() === 'html' ? null : getParent(element);\n }\n for (parent = getParent(element); parent && parent !== body && parent.nodeType !== 9; parent = getParent(parent)) {\n positionStyle = utils.css(parent, 'position');\n if (positionStyle !== 'static') {\n return parent;\n }\n }\n return null;\n}\n\nvar getParent$1 = utils.getParent;\nfunction isAncestorFixed(element) {\n if (utils.isWindow(element) || element.nodeType === 9) {\n return false;\n }\n var doc = utils.getDocument(element);\n var body = doc.body;\n var parent = null;\n for (parent = getParent$1(element);\n // 修复元素位于 document.documentElement 下导致崩溃问题\n parent && parent !== body && parent !== doc; parent = getParent$1(parent)) {\n var positionStyle = utils.css(parent, 'position');\n if (positionStyle === 'fixed') {\n return true;\n }\n }\n return false;\n}\n\n/**\n * 获得元素的显示部分的区域\n */\nfunction getVisibleRectForElement(element, alwaysByViewport) {\n var visibleRect = {\n left: 0,\n right: Infinity,\n top: 0,\n bottom: Infinity\n };\n var el = getOffsetParent(element);\n var doc = utils.getDocument(element);\n var win = doc.defaultView || doc.parentWindow;\n var body = doc.body;\n var documentElement = doc.documentElement;\n\n // Determine the size of the visible rect by climbing the dom accounting for\n // all scrollable containers.\n while (el) {\n // clientWidth is zero for inline block elements in ie.\n if ((navigator.userAgent.indexOf('MSIE') === -1 || el.clientWidth !== 0) &&\n // body may have overflow set on it, yet we still get the entire\n // viewport. In some browsers, el.offsetParent may be\n // document.documentElement, so check for that too.\n el !== body && el !== documentElement && utils.css(el, 'overflow') !== 'visible') {\n var pos = utils.offset(el);\n // add border\n pos.left += el.clientLeft;\n pos.top += el.clientTop;\n visibleRect.top = Math.max(visibleRect.top, pos.top);\n visibleRect.right = Math.min(visibleRect.right,\n // consider area without scrollBar\n pos.left + el.clientWidth);\n visibleRect.bottom = Math.min(visibleRect.bottom, pos.top + el.clientHeight);\n visibleRect.left = Math.max(visibleRect.left, pos.left);\n } else if (el === body || el === documentElement) {\n break;\n }\n el = getOffsetParent(el);\n }\n\n // Set element position to fixed\n // make sure absolute element itself don't affect it's visible area\n // https://github.com/ant-design/ant-design/issues/7601\n var originalPosition = null;\n if (!utils.isWindow(element) && element.nodeType !== 9) {\n originalPosition = element.style.position;\n var position = utils.css(element, 'position');\n if (position === 'absolute') {\n element.style.position = 'fixed';\n }\n }\n var scrollX = utils.getWindowScrollLeft(win);\n var scrollY = utils.getWindowScrollTop(win);\n var viewportWidth = utils.viewportWidth(win);\n var viewportHeight = utils.viewportHeight(win);\n var documentWidth = documentElement.scrollWidth;\n var documentHeight = documentElement.scrollHeight;\n\n // scrollXXX on html is sync with body which means overflow: hidden on body gets wrong scrollXXX.\n // We should cut this ourself.\n var bodyStyle = window.getComputedStyle(body);\n if (bodyStyle.overflowX === 'hidden') {\n documentWidth = win.innerWidth;\n }\n if (bodyStyle.overflowY === 'hidden') {\n documentHeight = win.innerHeight;\n }\n\n // Reset element position after calculate the visible area\n if (element.style) {\n element.style.position = originalPosition;\n }\n if (alwaysByViewport || isAncestorFixed(element)) {\n // Clip by viewport's size.\n visibleRect.left = Math.max(visibleRect.left, scrollX);\n visibleRect.top = Math.max(visibleRect.top, scrollY);\n visibleRect.right = Math.min(visibleRect.right, scrollX + viewportWidth);\n visibleRect.bottom = Math.min(visibleRect.bottom, scrollY + viewportHeight);\n } else {\n // Clip by document's size.\n var maxVisibleWidth = Math.max(documentWidth, scrollX + viewportWidth);\n visibleRect.right = Math.min(visibleRect.right, maxVisibleWidth);\n var maxVisibleHeight = Math.max(documentHeight, scrollY + viewportHeight);\n visibleRect.bottom = Math.min(visibleRect.bottom, maxVisibleHeight);\n }\n return visibleRect.top >= 0 && visibleRect.left >= 0 && visibleRect.bottom > visibleRect.top && visibleRect.right > visibleRect.left ? visibleRect : null;\n}\n\nfunction adjustForViewport(elFuturePos, elRegion, visibleRect, overflow) {\n var pos = utils.clone(elFuturePos);\n var size = {\n width: elRegion.width,\n height: elRegion.height\n };\n if (overflow.adjustX && pos.left < visibleRect.left) {\n pos.left = visibleRect.left;\n }\n\n // Left edge inside and right edge outside viewport, try to resize it.\n if (overflow.resizeWidth && pos.left >= visibleRect.left && pos.left + size.width > visibleRect.right) {\n size.width -= pos.left + size.width - visibleRect.right;\n }\n\n // Right edge outside viewport, try to move it.\n if (overflow.adjustX && pos.left + size.width > visibleRect.right) {\n // 保证左边界和可视区域左边界对齐\n pos.left = Math.max(visibleRect.right - size.width, visibleRect.left);\n }\n\n // Top edge outside viewport, try to move it.\n if (overflow.adjustY && pos.top < visibleRect.top) {\n pos.top = visibleRect.top;\n }\n\n // Top edge inside and bottom edge outside viewport, try to resize it.\n if (overflow.resizeHeight && pos.top >= visibleRect.top && pos.top + size.height > visibleRect.bottom) {\n size.height -= pos.top + size.height - visibleRect.bottom;\n }\n\n // Bottom edge outside viewport, try to move it.\n if (overflow.adjustY && pos.top + size.height > visibleRect.bottom) {\n // 保证上边界和可视区域上边界对齐\n pos.top = Math.max(visibleRect.bottom - size.height, visibleRect.top);\n }\n return utils.mix(pos, size);\n}\n\nfunction getRegion(node) {\n var offset;\n var w;\n var h;\n if (!utils.isWindow(node) && node.nodeType !== 9) {\n offset = utils.offset(node);\n w = utils.outerWidth(node);\n h = utils.outerHeight(node);\n } else {\n var win = utils.getWindow(node);\n offset = {\n left: utils.getWindowScrollLeft(win),\n top: utils.getWindowScrollTop(win)\n };\n w = utils.viewportWidth(win);\n h = utils.viewportHeight(win);\n }\n offset.width = w;\n offset.height = h;\n return offset;\n}\n\n/**\n * 获取 node 上的 align 对齐点 相对于页面的坐标\n */\n\nfunction getAlignOffset(region, align) {\n var V = align.charAt(0);\n var H = align.charAt(1);\n var w = region.width;\n var h = region.height;\n var x = region.left;\n var y = region.top;\n if (V === 'c') {\n y += h / 2;\n } else if (V === 'b') {\n y += h;\n }\n if (H === 'c') {\n x += w / 2;\n } else if (H === 'r') {\n x += w;\n }\n return {\n left: x,\n top: y\n };\n}\n\nfunction getElFuturePos(elRegion, refNodeRegion, points, offset, targetOffset) {\n var p1 = getAlignOffset(refNodeRegion, points[1]);\n var p2 = getAlignOffset(elRegion, points[0]);\n var diff = [p2.left - p1.left, p2.top - p1.top];\n return {\n left: Math.round(elRegion.left - diff[0] + offset[0] - targetOffset[0]),\n top: Math.round(elRegion.top - diff[1] + offset[1] - targetOffset[1])\n };\n}\n\n/**\n * align dom node flexibly\n * @author yiminghe@gmail.com\n */\n\n// http://yiminghe.iteye.com/blog/1124720\n\nfunction isFailX(elFuturePos, elRegion, visibleRect) {\n return elFuturePos.left < visibleRect.left || elFuturePos.left + elRegion.width > visibleRect.right;\n}\nfunction isFailY(elFuturePos, elRegion, visibleRect) {\n return elFuturePos.top < visibleRect.top || elFuturePos.top + elRegion.height > visibleRect.bottom;\n}\nfunction isCompleteFailX(elFuturePos, elRegion, visibleRect) {\n return elFuturePos.left > visibleRect.right || elFuturePos.left + elRegion.width < visibleRect.left;\n}\nfunction isCompleteFailY(elFuturePos, elRegion, visibleRect) {\n return elFuturePos.top > visibleRect.bottom || elFuturePos.top + elRegion.height < visibleRect.top;\n}\nfunction flip(points, reg, map) {\n var ret = [];\n utils.each(points, function (p) {\n ret.push(p.replace(reg, function (m) {\n return map[m];\n }));\n });\n return ret;\n}\nfunction flipOffset(offset, index) {\n offset[index] = -offset[index];\n return offset;\n}\nfunction convertOffset(str, offsetLen) {\n var n;\n if (/%$/.test(str)) {\n n = parseInt(str.substring(0, str.length - 1), 10) / 100 * offsetLen;\n } else {\n n = parseInt(str, 10);\n }\n return n || 0;\n}\nfunction normalizeOffset(offset, el) {\n offset[0] = convertOffset(offset[0], el.width);\n offset[1] = convertOffset(offset[1], el.height);\n}\n\n/**\n * @param el\n * @param tgtRegion 参照节点所占的区域: { left, top, width, height }\n * @param align\n */\nfunction doAlign(el, tgtRegion, align, isTgtRegionVisible) {\n var points = align.points;\n var offset = align.offset || [0, 0];\n var targetOffset = align.targetOffset || [0, 0];\n var overflow = align.overflow;\n var source = align.source || el;\n offset = [].concat(offset);\n targetOffset = [].concat(targetOffset);\n overflow = overflow || {};\n var newOverflowCfg = {};\n var fail = 0;\n var alwaysByViewport = !!(overflow && overflow.alwaysByViewport);\n // 当前节点可以被放置的显示区域\n var visibleRect = getVisibleRectForElement(source, alwaysByViewport);\n // 当前节点所占的区域, left/top/width/height\n var elRegion = getRegion(source);\n // 将 offset 转换成数值，支持百分比\n normalizeOffset(offset, elRegion);\n normalizeOffset(targetOffset, tgtRegion);\n // 当前节点将要被放置的位置\n var elFuturePos = getElFuturePos(elRegion, tgtRegion, points, offset, targetOffset);\n // 当前节点将要所处的区域\n var newElRegion = utils.merge(elRegion, elFuturePos);\n\n // 如果可视区域不能完全放置当前节点时允许调整\n if (visibleRect && (overflow.adjustX || overflow.adjustY) && isTgtRegionVisible) {\n if (overflow.adjustX) {\n // 如果横向不能放下\n if (isFailX(elFuturePos, elRegion, visibleRect)) {\n // 对齐位置反下\n var newPoints = flip(points, /[lr]/gi, {\n l: 'r',\n r: 'l'\n });\n // 偏移量也反下\n var newOffset = flipOffset(offset, 0);\n var newTargetOffset = flipOffset(targetOffset, 0);\n var newElFuturePos = getElFuturePos(elRegion, tgtRegion, newPoints, newOffset, newTargetOffset);\n if (!isCompleteFailX(newElFuturePos, elRegion, visibleRect)) {\n fail = 1;\n points = newPoints;\n offset = newOffset;\n targetOffset = newTargetOffset;\n }\n }\n }\n if (overflow.adjustY) {\n // 如果纵向不能放下\n if (isFailY(elFuturePos, elRegion, visibleRect)) {\n // 对齐位置反下\n var _newPoints = flip(points, /[tb]/gi, {\n t: 'b',\n b: 't'\n });\n // 偏移量也反下\n var _newOffset = flipOffset(offset, 1);\n var _newTargetOffset = flipOffset(targetOffset, 1);\n var _newElFuturePos = getElFuturePos(elRegion, tgtRegion, _newPoints, _newOffset, _newTargetOffset);\n if (!isCompleteFailY(_newElFuturePos, elRegion, visibleRect)) {\n fail = 1;\n points = _newPoints;\n offset = _newOffset;\n targetOffset = _newTargetOffset;\n }\n }\n }\n\n // 如果失败，重新计算当前节点将要被放置的位置\n if (fail) {\n elFuturePos = getElFuturePos(elRegion, tgtRegion, points, offset, targetOffset);\n utils.mix(newElRegion, elFuturePos);\n }\n var isStillFailX = isFailX(elFuturePos, elRegion, visibleRect);\n var isStillFailY = isFailY(elFuturePos, elRegion, visibleRect);\n // 检查反下后的位置是否可以放下了，如果仍然放不下：\n // 1. 复原修改过的定位参数\n if (isStillFailX || isStillFailY) {\n var _newPoints2 = points;\n\n // 重置对应部分的翻转逻辑\n if (isStillFailX) {\n _newPoints2 = flip(points, /[lr]/gi, {\n l: 'r',\n r: 'l'\n });\n }\n if (isStillFailY) {\n _newPoints2 = flip(points, /[tb]/gi, {\n t: 'b',\n b: 't'\n });\n }\n points = _newPoints2;\n offset = align.offset || [0, 0];\n targetOffset = align.targetOffset || [0, 0];\n }\n // 2. 只有指定了可以调整当前方向才调整\n newOverflowCfg.adjustX = overflow.adjustX && isStillFailX;\n newOverflowCfg.adjustY = overflow.adjustY && isStillFailY;\n\n // 确实要调整，甚至可能会调整高度宽度\n if (newOverflowCfg.adjustX || newOverflowCfg.adjustY) {\n newElRegion = adjustForViewport(elFuturePos, elRegion, visibleRect, newOverflowCfg);\n }\n }\n\n // need judge to in case set fixed with in css on height auto element\n if (newElRegion.width !== elRegion.width) {\n utils.css(source, 'width', utils.width(source) + newElRegion.width - elRegion.width);\n }\n if (newElRegion.height !== elRegion.height) {\n utils.css(source, 'height', utils.height(source) + newElRegion.height - elRegion.height);\n }\n\n // https://github.com/kissyteam/kissy/issues/190\n // 相对于屏幕位置没变，而 left/top 变了\n // 例如 \n 元素 6 高 100px 宽 50px
\n
\n \n