\n {!props.isModal && showHostMessage && !props.forgotPasswordMode && (\n <>\n \n Are you a guest of this event?\n \n \n \n Click here\n {' '}\n to view \"{window.event_title}\".\n \n \n Are you the host?\n \n Sign in to your Evite account to manage your event!\n \n \n )}\n\n
\n {!props.forgotPasswordMode ? (\n <>\n {!props.lgWindow || props.isModal ? (\n \n Welcome back! Sign in to your account.\n \n ) : (\n ''\n )}\n
\n \n \n Continue with Google\n \n \n \n Continue with Facebook\n \n \n \n Continue with Apple\n \n
\n \n ) : (\n \n Enter your email address below and we will send you an email to\n reset your password.\n \n )}\n \n {!props.forgotPasswordMode && (\n \n Or Sign In with Email\n \n )}\n setEmail(e.target.value)}\n placeholder=\"Email address\"\n error={props.forgotPasswordMode && emailError}\n data-qa-id=\"loginModalEmailInput\"\n autoComplete=\"email\"\n />\n {!props.forgotPasswordMode && (\n setPassword(e.target.value)}\n placeholder=\"Password\"\n error={\n loginFailure ? 'Invalid email or password. Try again.' : ''\n }\n data-qa-id=\"loginModalPasswordInput\"\n autoComplete=\"password\"\n />\n )}\n {props.forgotPasswordMode ? (\n
\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 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 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 const Link = ({\n fullWidth,\n thickness,\n variant,\n as,\n className,\n disabled,\n ...props\n}) => {\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};\n\nLink.propTypes = {\n href: PropTypes.string, // TODO this should be required & onClick removed -- Button with variant 'link' or 'transparent' should be used if not redirecting to a url\n onClick: PropTypes.func,\n children: PropTypes.node.isRequired,\n variant: PropTypes.oneOf(['small', 'large']),\n fullWidth: PropTypes.bool,\n thickness: PropTypes.oneOf(['normal', 'thin']),\n as: PropTypes.oneOf(['primary', 'secondary', 'transparent']), // if it should look like a button (or NOT like a link, if using 'transparent')\n 'data-qa-id': PropTypes.string.isRequired,\n className: PropTypes.string,\n target: PropTypes.string,\n disabled: PropTypes.bool,\n};\n","import React, {useEffect, useRef} from 'react';\nimport PropTypes from 'prop-types';\nimport {Button} from '~/common/_pb_components/atoms/Button';\nimport {Typography} from '~/common/_pb_components/atoms/Typography';\nimport {PB_CloseLine} from '~/common/svg/PB_CloseLine';\n\nexport const Overlay = (props) => {\n let isOpen = props.open;\n const overlayRef = useRef(null);\n const {modalId} = props;\n\n const handleClose = (e) => {\n props.onClose ? props.onClose(e) : (isOpen = false);\n };\n const escHandler = (e) => {\n if (props.closeOnEscKeyPress && e.key === 'Escape') {\n handleClose(e);\n }\n };\n\n const handleOutsideClick = (e) => {\n if (\n props.closeOnClickOutside &&\n overlayRef.current &&\n !overlayRef.current.contains(e.target)\n ) {\n handleClose(e);\n }\n };\n\n useEffect(() => {\n window.addEventListener('keydown', escHandler);\n window.addEventListener('mousedown', handleOutsideClick);\n window.dataLayer.push({event: 'overlayModalImpression'});\n\n return () => {\n window.removeEventListener('keydown', escHandler);\n window.removeEventListener('mousedown', handleOutsideClick);\n };\n }, []);\n\n return (\n \n \n {props.title && (\n
\n \n {props.title}\n \n \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 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// // This text uses an h2 element but looks like an h1!\n// // \n//\n// return (\n// \n// {props.children}\n// \n// )\n// }\n\nexport const Colors = css`\n color: ${({fontColor}) => fontColor || colors.mexican_opal};\n`;\n\nconst StyledDynamicComponent = styled.p`\n ${Colors}\n`;\n\n// const DynamicComponent = ({tag=\"p\", color=$eviteBlue, children, ...props }) => {\n// const WithComponent = StyledDynamicComponent.withComponent(tag, color);\n// return {children};\n// };\n\nexport const Typography = ({className, ...props}) => {\n // If there is already an h1 in the page, let's not duplicate it.\n\n // \n // This text uses an
element but looks like an
\n //
\n\n // todo - There seems to be a race condition preventing color\n // attributes from being respected in some nested components\n // (unless the same color has already been used\n // in a Typog element in a parent component)\n\n return (\n \n {props.children}\n \n );\n};\n\nconst typo_mixins_arr = [\n 'header1',\n 'header2',\n 'header3',\n 'header4',\n 'paragraph1',\n 'paragraph2',\n 'paragraph3',\n 'paragraph4',\n 'list1',\n 'list2',\n 'label1',\n 'label2',\n 'label3',\n 'link',\n 'list1',\n 'list2',\n];\n\nTypography.propTypes = {\n id: PropTypes.string,\n classNames: PropTypes.string,\n size: PropTypes.oneOf(['small', 'medium', 'large']),\n color: PropTypes.oneOf(Object.keys(colors)), // some of the keys here are not colors but good enough...\n variant: PropTypes.oneOf(typo_mixins_arr).isRequired,\n children: PropTypes.oneOfType([\n PropTypes.element,\n PropTypes.node,\n PropTypes.string,\n ]).isRequired,\n 'data-qa-id': PropTypes.string,\n as: PropTypes.string,\n inline: PropTypes.bool,\n};\n","import React from 'react';\nimport {ResponsiveModal} from '~/common/_pb_components/organisms/ResponsiveModal';\n\nexport const ResetPasswordModal = ({isOpen, setIsOpen, handleClose}) => {\n return (\n setIsOpen(false)}\n onClose={(e) => handleClose(e)}\n modalId=\"pwResetRequired\"\n primaryText={'Close'}\n showSecondary={false}\n className=\"pwResetRequiredModal\"\n />\n );\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport {Button} from '~/common/_pb_components/atoms/Button';\nimport {Typography} from '~/common/_pb_components/atoms/Typography';\nimport {Overlay} from '~/common/_pb_components/atoms/Overlay';\nimport {Spinner} from '~/common/components/Loader/Spinner';\n\n// Intended for small, single-action content, returns a popup with overlay\n// in both desktop & mobile.\n// Requires isOpen, onClose, as well as the following:\n\n// Requires either children:\n// (will render children with X close button in upper right in an otherwise empty modal)\n// OR: all the below\n// title: (string),\n// body: (string),\n// primaryAction: (func called on primary CTA),\n// modalId: (string identifier for this modal)\n// primaryText: (string for primary CTA text)\n\nexport const ResponsiveModal = (props) => {\n const body = props.body || '';\n const primaryAction = props.primaryAction || props.onClose;\n const secondaryAction = props.secondaryAction || props.onClose;\n const primaryText = props.primaryText || 'Submit';\n const secondaryText = props.secondaryText || 'Cancel';\n const showSpinner = props.showSpinner || false;\n const actionText = props.actionText || 'One moment please...';\n const showSecondary =\n props.showSecondary !== undefined ? props.showSecondary : true;\n let modalId;\n\n let title = showSpinner\n ? actionText\n : props.title || `${props.primaryText}?` || 'Are you sure?';\n\n let children = showSpinner ? : props.children;\n\n const getModalChildren = () => {\n return (\n