\n
\n \n );\n }\n}\n\nexport default withStyles(styles)(DomainButton);\n","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\n\nimport backgroundIcon from 'components/Icons/backgroundIcon.png';\nimport grey from '@material-ui/core/colors/grey';\nimport Typography from '@material-ui/core/Typography';\n\nimport withStyles from '@material-ui/core/styles/withStyles';\n\nconst styles = theme => {\n return {\n container: {\n position: 'relative',\n width: '100%',\n height: '100%',\n },\n opacity: {\n position: 'absolute',\n top: 0,\n bottom: 0,\n background: `url(${backgroundIcon})`,\n backgroundSize: theme.spacing(100),\n backgroundPositionX: theme.spacing(-8),\n width: '100%',\n opacity: 0.22,\n },\n content: {\n position: 'relative',\n width: '100%',\n marginTop: -theme.spacing(10),\n height: '100vh',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'flex-start',\n flexDirection: 'column',\n },\n header: {\n width: '100%',\n fontSize: 50.9,\n letterSpacing: 'normal',\n fontWeight: 'normal',\n fontStyle: 'normal',\n fontStretch: 'normal',\n marginLeft: theme.spacing(5),\n maxWidth: 360,\n color: grey[50],\n lineHeight: '1.46429em',\n [theme.breakpoints.down('md')]: {\n fontSize: 40,\n maxWidth: 280,\n },\n [theme.breakpoints.down('sm')]: {\n fontSize: 26,\n maxWidth: 190,\n },\n },\n subheader: {\n fontSize: 19,\n fontWeight: 400,\n lineHeight: 1.41,\n letterSpacing: 0.2,\n color: grey[50],\n maxWidth: 320,\n marginTop: theme.spacing(1),\n marginLeft: theme.spacing(5),\n [theme.breakpoints.down('md')]: {\n fontSize: 14,\n maxWidth: 270,\n },\n [theme.breakpoints.down('sm')]: {\n fontSize: 10,\n maxWidth: 200,\n },\n },\n };\n};\n\nclass SplitPageLeft extends Component {\n static propTypes = {\n classes: PropTypes.object.isRequired,\n };\n\n render() {\n const { classes } = this.props;\n return (\n \n \n {loginOptionResponse.displayName}\n \n \n {loginOptionResponse.subdomain}.{hostDomain}.com\n \n
\n \n \n
\n );\n }\n}\n\nexport default withStyles(styles)(SplitPageLeft);\n","import React from 'react';\n\nimport MicrosoftBackgroundIcon from 'components/Icons/MicrosoftBackground.png';\n\nimport makeStyles from '@material-ui/core/styles/makeStyles';\n\nfunction SplitPageLeft() {\n const classes = useStyles();\n\n return (\n \n We're so happy to have you here \n \n Sift's people platform is engineered to bring out the best in you and your teams.\n \n
\n \n
\n );\n}\n\nconst useStyles = makeStyles(theme => {\n return {\n container: {\n height: '100%',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n },\n icon: {\n width: '80%',\n },\n };\n});\n\nexport default SplitPageLeft;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\n\nimport SplitPageLeft from './SplitPageLeft';\nimport MicrosoftSplitPageLeft from './MicrosoftSplitPageLeft';\n\nimport makeStyles from '@material-ui/core/styles/makeStyles';\n\nfunction SplitPageContainer({ children, isMicrosoft = false }) {\n const classes = useStyles();\n\n return (\n \n
\n );\n}\n\nSplitPageContainer.propTypes = {\n children: PropTypes.object,\n isMicrosoft: PropTypes.bool,\n};\n\nconst useStyles = makeStyles(theme => ({\n container: {\n minHeight: '100%',\n display: 'flex',\n flexDirection: 'row',\n fontStyle: 'normal',\n backgroundColor: '#ffffff',\n },\n left: {\n width: '40%',\n maxWidth: 600,\n background: 'linear-gradient(324deg, #431a6e, #813be1 92%, #773dbd)',\n [theme.breakpoints.down('sm')]: {\n display: 'none',\n },\n },\n newLeft: {\n background: `linear-gradient(180deg, ${theme.palette.marketing.purples.deep}00 0%, ${\n theme.palette.marketing.purples.deep\n } 100%), ${theme.palette.marketing.purples.fig}`,\n },\n right: {\n width: '60%',\n maxWidth: 960,\n height: '100vh',\n overflowY: 'auto',\n [theme.breakpoints.down('sm')]: {\n width: '100%',\n height: '100%',\n alignItems: 'center',\n justifyContent: 'center',\n alignText: 'center',\n },\n },\n}));\n\nexport default SplitPageContainer;\n","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport withStyles from '@material-ui/core/styles/withStyles';\nimport Button from '@material-ui/core/Button';\nimport LaunchIcon from '@material-ui/icons/Launch';\nimport getIsInMsTeams from 'helpers/getIsInMsTeams';\n\nconst styles = theme => {\n return {\n root: {\n fontSize: 14,\n color: theme.palette.grey[600],\n fontWeight: 'bold',\n lineHeight: 1.1,\n letterSpacing: 1.3,\n },\n link: {\n marginRight: theme.spacing(9),\n color: 'inherit',\n [theme.breakpoints.down('sm')]: {\n marginRight: theme.spacing(2),\n marginLeft: theme.spacing(2),\n },\n },\n };\n};\n\nclass PageFooterNew extends Component {\n static propTypes = {\n classes: PropTypes.object.isRequired,\n };\n\n render() {\n const { classes } = this.props;\n const isInMsTeams = getIsInMsTeams();\n\n return (\n \n {isMicrosoft ?
\n {children}
\n \n
\n );\n }\n}\n\nexport default withStyles(styles)(PageFooterNew);\n","import queryString from 'query-string';\n\nexport default function getIsInMsTeams() {\n const parsed = queryString.parse(window.location.search);\n\n return parsed.inTeams;\n}\n","import React from 'react';\n\nexport default props => (\n \n
\n );\n }\n}\n\nexport default withStyles(styles)(SplitPageRight);\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport DomainButton from 'components/DomainButton/DomainButton';\nimport SplitPageContainer from 'components/SplitPageContainer';\nimport SplitPageRight from 'components/SplitPageRight';\n\nimport Button from '@material-ui/core/Button';\nimport Typography from '@material-ui/core/Typography';\n\nimport withStyles from '@material-ui/core/styles/withStyles';\n\nconst styles = theme => {\n return {\n root: {\n paddingLeft: 0,\n paddingRight: 0,\n },\n header: {\n fontSize: 50.9,\n color: theme.palette.primary.main,\n marginTop: theme.spacing(9),\n [theme.breakpoints.down('xs')]: {\n fontSize: 30.9,\n marginTop: theme.spacing(2),\n },\n },\n subheader: {\n color: theme.palette.common.black,\n fontSize: 17,\n },\n button: {\n marginTop: theme.spacing(3),\n color: theme.palette.secondary.dark,\n },\n buttonContainer: {\n marginTop: theme.spacing(3),\n display: 'block',\n width: 430,\n [theme.breakpoints.down('sm')]: {\n marginLeft: 'auto',\n marginRight: 'auto',\n },\n [theme.breakpoints.down('xs')]: {\n width: '90%',\n },\n },\n };\n};\n\nclass DomainSelector extends React.PureComponent {\n static propTypes = {\n classes: PropTypes.object.isRequired,\n loginDomains: PropTypes.array.isRequired,\n email: PropTypes.string.isRequired,\n history: PropTypes.object.isRequired,\n };\n\n componentDidMount() {\n if (this.props.loginDomains.length === 0) {\n this.props.history.push(`/`);\n }\n }\n\n render() {\n const { classes, loginDomains, email, history } = this.props;\n return (\n \n
\n \n
\n {children}
\n \n
\n \n
\n \n {loginDomains.map((loginOptionResponse, index) => (\n
\n \n \n {loginDomains[selectedDomainIndex].loginOptions.preferredMethods.map(\n this.renderPreferred,\n )}\n {otherOptionsHeader}\n {loginDomains[selectedDomainIndex].loginOptions.otherMethods.map(this.renderOther)}\n
\n \n \n
\n \n
\n \n \n {status.isLoading() ? 'Loading' : 'Sign In'}\n \n
\n \n \n
\n \n \n
\n \n \n {status.isLoading() ? 'Loading' : 'Continue'}\n \n
\n \n \n {errors[0]}\n \n \n {errors[1]}\n \n \n {errors[2]}\n \n \n {errors[3]}\n \n
\n );\n } else {\n return (\n \n \n {blank}\n \n \n {blank}\n \n \n {blank}\n \n \n {blank}\n \n
\n );\n }\n };\n isInvalidPassword = () => {\n return (\n this.displayErrors().length !== 0 &&\n this.props.password.length !== 0 &&\n this.state.hasBlurredOnce\n );\n };\n\n render() {\n const { classes } = this.props;\n return (\n \n \n {this.props.label} \n \n {this.displayErrorText()}\n
\n );\n }\n}\n\nexport default withStyles(styles)(PasswordTextField);\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport qs from 'query-string';\n\nimport PasswordTextField from 'components/PasswordTextField/PasswordTextField';\nimport SplitPageContainer from 'components/SplitPageContainer';\nimport SplitPageRight from 'components/SplitPageRight';\n\nimport withStyles from '@material-ui/core/styles/withStyles';\n\nimport Button from '@material-ui/core/Button';\nimport FormControl from '@material-ui/core/FormControl';\nimport FormHelperText from '@material-ui/core/FormHelperText';\nimport Input from '@material-ui/core/Input';\nimport InputLabel from '@material-ui/core/InputLabel';\nimport Typography from '@material-ui/core/Typography';\nimport grey from '@material-ui/core/colors/grey';\n\nconst styles = theme => {\n return {\n header: {\n fontSize: 50,\n lineHeight: 1,\n color: theme.palette.primary.main,\n marginTop: theme.spacing(13),\n marginLeft: -4, // Permanent fix for header being slightly off\n [theme.breakpoints.down('xs')]: {\n fontSize: 30.9,\n marginTop: theme.spacing(2),\n },\n },\n subheader: {\n fontSize: 17,\n lineHeight: 1.41,\n letterSpacing: 0.2,\n marginTop: theme.spacing(1),\n maxWidth: theme.spacing(70),\n [theme.breakpoints.down('xs')]: {\n padding: theme.spacing(4),\n },\n },\n button: {\n fontWeight: 'bold',\n fontSize: 14.6,\n lineHeight: 1.1,\n letterSpacing: 1.3,\n width: 243,\n marginTop: theme.spacing(4),\n },\n inputTwo: {\n width: '100%',\n [theme.breakpoints.down('sm')]: {\n width: '100%',\n },\n },\n labelSize: {\n fontSize: 25,\n paddingTop: theme.spacing(1),\n [theme.breakpoints.down('xs')]: {\n fontSize: 20,\n marginTop: theme.spacing(1),\n },\n },\n inputSize: {\n fontSize: 28,\n minHeight: 70,\n paddingTop: theme.spacing(1),\n },\n disabled: {\n borderColor: grey[300],\n },\n passwordMessage: {\n marginTop: theme.spacing(2),\n fontSize: 15,\n },\n root: {\n marginTop: 0,\n },\n helperTextContainer: {\n marginTop: theme.spacing(0.5),\n },\n textfields: {\n width: '60%',\n },\n };\n};\n\nclass PasswordReset extends React.PureComponent {\n static propTypes = {\n classes: PropTypes.object.isRequired,\n fetchResetTokenValidation: PropTypes.func.isRequired,\n resetPassword: PropTypes.func.isRequired,\n status: PropTypes.object.isRequired,\n location: PropTypes.object.isRequired,\n match: PropTypes.object.isRequired,\n };\n\n state = {\n password: '',\n secondPassword: '',\n validPassword: false,\n validToken: false,\n };\n\n handleSubmit = event => {\n const { resetPassword, location, match } = this.props;\n let { password, secondPassword } = this.state;\n const resetToken = qs.parse(location.search).resetToken;\n const subdomain = match.params.subdomain;\n if (this.checkNewPasswordCriteria()) {\n resetPassword(password, secondPassword, resetToken, subdomain);\n }\n event.preventDefault();\n };\n\n componentDidUpdate(prevProps) {\n if (\n prevProps.status.isLoading() &&\n this.props.status.isNormal() &&\n this.checkNewPasswordCriteria()\n ) {\n window.location.href = '/';\n }\n if (prevProps.status.isLoading() && this.props.status.isNormal()) {\n this.setState({ validToken: true });\n }\n if (prevProps.status.isLoading() && this.props.status.hasError()) {\n window.location.href = '/';\n }\n }\n\n componentDidMount() {\n const { fetchResetTokenValidation, location, match } = this.props;\n const query = qs.parse(location.search);\n const subdomain = match.params.subdomain;\n fetchResetTokenValidation(query.resetToken, subdomain);\n }\n\n handleChangeTwo = event => {\n this.setState({ secondPassword: event.target.value });\n };\n\n setValidPasswordCallback = validPassword => {\n this.setState({ validPassword: validPassword });\n };\n\n setPasswordCallback = password => {\n this.setState({ password: password });\n };\n\n submitResetPassword = () => {\n const { resetPassword, location, match } = this.props;\n let { password, secondPassword } = this.state;\n const resetToken = qs.parse(location.search).resetToken;\n const subdomain = match.params.subdomain;\n resetPassword(password, secondPassword, resetToken, subdomain);\n };\n\n checkPasswordsMatch = () => {\n let { password, secondPassword } = this.state;\n if (secondPassword.length !== 0 && password !== secondPassword) {\n return 'Passwords do not match.';\n } else {\n return ;\n }\n };\n\n checkNewPasswordCriteria = () => {\n return this.state.validPassword && this.state.password === this.state.secondPassword;\n };\n\n render() {\n const { classes } = this.props;\n if (!this.state.validToken) {\n return null;\n }\n return (\n
\n \n \n
\n\n \n \n Create your Password\n \n
\n \n \n \n {/* more height with top label */}\n Email\n \n \n \n \n
\n \n \n Create your Password\n \n
\n \n {linkText} \n\n
\n \n );\n}\n\nconst useStyles = makeStyles(theme => {\n return {\n root: {\n display: 'flex',\n flexDirection: 'column',\n height: 239,\n width: 213,\n marginRight: theme.spacing(7),\n borderRadius: theme.spacing(0.25),\n boxShadow: theme.shadows[5],\n cursor: 'pointer',\n [theme.breakpoints.down('lg')]: {\n marginBottom: theme.spacing(2),\n },\n [theme.breakpoints.down('md')]: {\n marginBottom: theme.spacing(2),\n },\n [theme.breakpoints.down('sm')]: {\n marginBottom: theme.spacing(2),\n },\n '&:hover': {\n backgroundColor: theme.palette.action.hover,\n },\n },\n cardBottom: {\n display: 'flex',\n justifyContent: 'center',\n marginTop: theme.spacing(5.125),\n },\n cardLink: {\n width: 110,\n height: 20,\n fontSize: 14,\n letterSpacing: '0.25px',\n lineHeight: '20px',\n textDecorationLine: 'underline',\n whiteSpace: 'nowrap',\n color: theme.palette.secondary.main,\n },\n img: {\n height: 142,\n width: 213,\n },\n icon: {\n height: 24,\n width: 24,\n },\n };\n});\n\nPictureCard.propTypes = {\n src: PropTypes.string,\n linkText: PropTypes.string,\n url: PropTypes.string,\n alt: PropTypes.string,\n};\n\nexport default PictureCard;\n","import React from 'react';\nimport getHostDomain from 'helpers/getHostDomain';\n\nimport SplitPageContainer from 'components/SplitPageContainer';\nimport SplitPageRight from 'components/SplitPageRight';\nimport PictureCard from 'components/molecules/PictureCard';\nimport ViewOrgChart from 'pages/InviteTokenLanding/assets/ViewOrgChart.png';\nimport ViewProfile from 'pages/InviteTokenLanding/assets/ViewProfile.png';\nimport ViewBigSearch from 'pages/InviteTokenLanding/assets/ViewBigSearch.png';\nimport makeStyles from '@material-ui/core/styles/makeStyles';\nimport Typography from '@material-ui/core/Typography';\nimport Button from '@material-ui/core/Button';\n\nfunction DemoDataEnabled() {\n const classes = useStyles();\n const hostDomain = getHostDomain();\n\n return (\n \n
\n \n issue persists then please contact us.\n
\n \n {title || this.defaultCopy.title}\n \n \n {body || this.defaultCopy.body}\n \n
\n );\n }\n}\n\nexport default withStyles(styles)(ErrorView);\n","import React from 'react';\n\n// UI\nimport Loader from '@sift/skipper/components/Loader';\nimport ErrorView from './ErrorView';\nimport CircularProgress from '@material-ui/core/CircularProgress';\nimport { withStyles } from '@material-ui/core/styles';\n\nexport default withStyles(theme => {\n return {\n root: {\n position: 'relative',\n minHeight: '100px',\n },\n overlay: {},\n overlayTransparent: {},\n };\n})(props => {\n return (\n \n
\n );\n}\n\nconst useStyles = makeStyles(theme => {\n return {\n root: {\n marginBottom: theme.spacing(5),\n [theme.breakpoints.down('sm')]: {\n textAlign: 'left',\n marginLeft: '10%',\n },\n },\n inline: {\n display: 'flex',\n alignItems: 'center',\n marginBottom: theme.spacing(1.5),\n },\n labels: {\n width: 200,\n },\n };\n});\n\nMicrosoftSubscriptionTable.propTypes = {\n companyName: PropTypes.string,\n subscriptionData: PropTypes.object.isRequired,\n confirmedSubscriptionData: PropTypes.object.isRequired,\n handleChangeCompany: PropTypes.func,\n handleKeyPress: PropTypes.func,\n};\n\nexport default MicrosoftSubscriptionTable;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport _get from 'lodash/get';\nimport _isEmpty from 'lodash/isEmpty';\n\n// Components\nimport Typography from '@material-ui/core/Typography';\nimport Button from '@material-ui/core/Button';\nimport MicrosoftSubscriptionTable from '../MicrosoftSubscriptionTable';\n\n// Styles\nimport makeStyles from '@material-ui/core/styles/makeStyles';\n\nfunction SubscriptionInfo({\n companyName,\n isLoading,\n subscriptionData,\n subscriptionConfirmationData,\n onChangeCompanyName,\n onConfirm,\n}) {\n const classes = useStyles();\n const shouldRenderConfirmButton =\n _get(subscriptionData, ['siftSubscription', 'source']) === 'token' &&\n _isEmpty(subscriptionConfirmationData);\n\n const preConfirmationContent = (\n \n \n Subscription Name:\n \n {_get(msSubscription, 'name')} \n
\n \n \n Plan:\n \n {_get(msSubscription, 'planId')} \n
\n \n \n Status:\n \n {_get(msSubscription, 'saasSubscriptionStatus')} \n
\n \n \n User Name:\n \n {_get(siftSubscription, 'userName')} \n
\n \n \n User Email:\n \n \n {_get(siftSubscription, 'userEmail') || _get(siftSubscription, 'userUsername')}\n \n
\n \n \n Company Name:\n \n {shouldRenderCompanyInput ? (\n \n {_get(siftSubscription, 'companyName') ||\n _get(confirmedSubscriptionData, 'companyName')}\n \n )}\n
\n \n \n {isLoading ? 'Loading' : 'Confirm'}\n \n
\n );\n\n const postConfirmationContent = (\n \n \n The Sift team will be in contact with next steps over the next few days when activation is\n complete. In the meantime, take a look at our{' '}\n \n launch guide\n {' '}\n and{' '}\n \n help center\n {' '}\n to learn more about setting up Sift!\n \n
\n );\n\n const handleKeyPress = event => {\n if (event.key === 'Enter') {\n onConfirm();\n }\n };\n\n return (\n \n
\n );\n}\n\nSubscriptionInfo.propTypes = {\n companyName: PropTypes.string.isRequired,\n isLoading: PropTypes.bool.isRequired,\n subscriptionData: PropTypes.object.isRequired,\n subscriptionConfirmationData: PropTypes.object.isRequired,\n onChangeCompanyName: PropTypes.func.isRequired,\n onConfirm: PropTypes.func.isRequired,\n};\n\nconst useStyles = makeStyles(theme => ({\n root: {},\n buttonContainer: {\n marginTop: theme.spacing(8),\n },\n}));\n\nexport default SubscriptionInfo;\n","import React, { useCallback, useEffect, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport bowser from 'bowser';\nimport _get from 'lodash/get';\nimport _isEmpty from 'lodash/isEmpty';\nimport queryString from 'query-string';\nimport { combineStatuses } from 'resift';\nimport {\n useMsal,\n useIsAuthenticated,\n AuthenticatedTemplate,\n UnauthenticatedTemplate,\n} from '@azure/msal-react';\nimport { InteractionStatus } from '@azure/msal-browser';\nimport { loginRequest } from '../../../azureAuthConfig';\n\n// Components\nimport Typography from '@material-ui/core/Typography';\nimport Button from '@material-ui/core/Button';\nimport Loader from 'components/Loader';\nimport SplitPageContainer from 'components/SplitPageContainer';\nimport SplitPageRight from 'components/SplitPageRight';\nimport SubscriptionSuccessIcon from 'components/Icons/SubscriptionSuccess';\nimport SubscriptionInfo from './SubscriptionInfo';\n\n// Styles\nimport makeStyles from '@material-ui/core/styles/makeStyles';\n\nfunction MicrosoftConfirmSubscription({\n location,\n status,\n subscriptionConfirmationStatus,\n subscriptionData,\n subscriptionConfirmationData,\n confirmSubscription,\n resolveSubscription,\n}) {\n const classes = useStyles();\n const { instance, accounts, inProgress } = useMsal();\n const queryParams = queryString.parse(location.search);\n const subscriptionToken = _get(queryParams, 'token');\n const isAuthenticated = useIsAuthenticated();\n const [companyName, setCompanyName] = useState('');\n const pageIsLoading =\n status.isLoading() ||\n subscriptionConfirmationStatus.isLoading() ||\n inProgress !== InteractionStatus.None;\n const shouldRenderConfirmButton =\n _get(subscriptionData, ['siftSubscription', 'source']) !== 'database';\n\n useEffect(() => {\n document.title = 'Manage Your Sift Subscription';\n }, []);\n\n const handleChangeCompanyName = e => {\n setCompanyName(e.target.value);\n };\n\n const handleLogin = useCallback(\n () => {\n if (bowser.firefox || bowser.firefoxos) {\n instance.loginPopup(loginRequest).catch(e => {\n // eslint-disable-next-line no-console\n console.log(e);\n });\n } else {\n instance.loginRedirect(loginRequest).catch(e => {\n // eslint-disable-next-line no-console\n console.log(e);\n });\n }\n },\n [instance],\n );\n\n useEffect(\n () => {\n if (isAuthenticated && _isEmpty(subscriptionData) && inProgress === InteractionStatus.None) {\n instance\n .acquireTokenSilent({\n ...loginRequest,\n account: accounts[0],\n })\n .then(response => {\n const { idToken } = response;\n idToken && subscriptionToken && resolveSubscription(idToken, subscriptionToken);\n })\n // eslint-disable-next-line no-console\n .catch(error => console.log(error));\n }\n },\n [\n isAuthenticated,\n subscriptionData,\n inProgress,\n accounts,\n instance,\n resolveSubscription,\n subscriptionToken,\n ],\n );\n\n const handleConfirm = useCallback(\n () => {\n instance\n .acquireTokenSilent({\n ...loginRequest,\n account: accounts[0],\n })\n .then(response => {\n const { idToken } = response;\n confirmSubscription(\n idToken,\n subscriptionData.subscription.id,\n companyName.length ? companyName : null,\n );\n })\n // eslint-disable-next-line no-console\n .catch(error => console.log(error));\n },\n [accounts, companyName, instance, confirmSubscription, subscriptionData],\n );\n\n const title = shouldRenderConfirmButton ? (\n \n
\n Support@justsift.com{' '}\n {this.state.errorCode && (\n
\n
\n \n \n
\n {errorView}\n