\n \n \n \n {authorizedMenuItems} \n \n \n \n \n \n \n
\n \n \n \n \n
\n }\n >\n \n \n \n
\n }\n >\n {authorizedMenuItems}\n \n shouldDisplayNavItem(user, item)}\n isAuthenticated={user.isAuthenticated}\n username={user && user.username ? user.username : ''}\n />\n
\n \n shouldDisplayNavItem(user, item)}\n isAuthenticated={user.isAuthenticated}\n />\n
\n \n \n {({ loading, data, error }) => {\n return (\n <>\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n {COPY.NAVBAR_APPS_DIRECTORY.defaultMessage}\n \n \n {COPY.NAVBAR_CATEGORIES.defaultMessage}\n \n \n \n \n null \n \n \n \n \n \n );\n }}\n \n
\n );\n};\n\nexport default NavBar;\n","import React from 'react';\n\nimport { SkeletonLoader } from '@sm/webassets';\nimport { ProgressCircle } from '@sm/wds-react';\n\nimport './ucs-module-loaders.scss';\n\nconst TopBarSkeleton = () => (\n - \n
- \n {data.publishedApplicationListingCategories.map(\n cat => (\n
- \n
- \n {data.publishedApplicationListingCategories.map(cat => (\n
\n
\n);\n\nconst DefaultLoader = () => (\n \n
\n);\n\nconst MODULE_SKELETONS = {\n top_bar: TopBarSkeleton\n};\n\nexport default DefaultLoader;\nexport { MODULE_SKELETONS };\n","import React, { Component } from 'react';\nimport classnames from 'classnames';\nimport PropTypes from 'prop-types';\n\nimport { ErrorBoundary, clientErrorHandler } from '@sm/webassets';\n\nimport { sanitizeString } from '@sm/utils';\nimport DefaultLoader, { MODULE_SKELETONS } from './UCSModuleLoaders';\n\nconst UCS_CONTAINER_ID_PREFIX = 'ucs-content';\n\n// TODO: this component is a duplicate of UCSModule from coreweb and\n// will need to be moved somewhere common\nclass UCSModule extends Component {\n static propTypes = {\n className: PropTypes.string,\n moduleName: PropTypes.string,\n customLoader: PropTypes.node\n };\n\n static defaultProps = {\n moduleName: null,\n className: null,\n customLoader: null\n };\n\n state = {\n data: {\n moduleHTML: null\n },\n loading: true,\n error: false\n };\n\n componentDidMount() {\n this.getModuleHTML();\n }\n\n getPreloadedModule() {\n const { moduleName } = this.props;\n const moduleContainer = document.getElementById(\n `${UCS_CONTAINER_ID_PREFIX}-${moduleName}`\n );\n if (moduleContainer) {\n moduleContainer.remove();\n return moduleContainer.textContent;\n }\n return null;\n }\n\n async getModuleHTML() {\n const reFetchFailed = () =>\n this.setState({\n loading: false,\n error: true\n });\n\n let moduleHTML = this.getPreloadedModule();\n if (!moduleHTML) {\n try {\n moduleHTML = await this.reFetchModule();\n } catch (error) {\n clientErrorHandler.logError(error, 'ucsFetchFailure');\n return reFetchFailed();\n }\n }\n\n if (moduleHTML === null) {\n return reFetchFailed();\n }\n\n return this.setState({\n data: { moduleHTML },\n loading: false,\n error: false\n });\n }\n\n async reFetchModule() {\n const { moduleName } = this.props;\n const moduleContent = await fetch(`/content/api/ucs/${moduleName}/html`, {\n credentials: 'include'\n });\n const moduleJson = await moduleContent.json();\n return moduleJson.html;\n }\n\n renderLoadingState = () => {\n const { customLoader, moduleName } = this.props;\n const ModuleLoader = MODULE_SKELETONS[moduleName];\n\n if (customLoader) {\n return customLoader;\n }\n\n if (ModuleLoader) {\n return \n \n \n
\n \n \n \n \n
\n
\n \n \n \n SurveyMonkey App Directory & Integrations \n \n
\n );\n};\n\nexport default Home;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { Typography } from '@sm/wds-react';\nimport AppPlaceHolderImg from '../../static/images/app-placeholder.png';\n// LinkWithSearch should be used so it will keep any existing query arguments present in the url (needed for ut_source)\nimport AppLink from '../AppLink';\n\nimport './app-listing-list.scss';\n\nconst AppListingList = ({ title, apps }) => (\n <>\n \n
\n \n
\n \n \n {apps.map(app => (\n \n
\n \n);\n\nAppListingList.propTypes = {\n title: PropTypes.string,\n apps: PropTypes.arrayOf(\n PropTypes.shape({\n links: PropTypes.shape({\n detail: PropTypes.string.isRequired\n }).isRequired,\n id: PropTypes.string.isRequired,\n logo: PropTypes.string.isRequired,\n name: PropTypes.string.isRequired,\n tagline: PropTypes.string\n })\n ).isRequired\n};\n\nAppListingList.defaultProps = {\n title: null\n};\n\nexport default AppListingList;\n","import React, { useContext } from 'react';\n\nimport {\n SkeletonLoader,\n TabletScreen,\n MobileScreen,\n StaticContext\n} from '@sm/webassets';\nimport { getClientEnvironmentDetails } from '@sm/utils';\n\nconst AppListingSkeleton = props => {\n const { userAgent } = useContext(StaticContext);\n const { isDesktop } = getClientEnvironmentDetails(userAgent);\n return (\n <>\n \n
\n \n ))}\n \n
\n \n {app.name} \n {app.tagline} \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n \n {app.name}\n \n {renderCategories(app.categories)}\n
\n \n \n \n
\n \n ))}\n \n \n \n refetch()}\n >\n \n
\n \n
\n \n \n
\n);\n\nconst MediaCarrousel = ({ media }) => {\n const [current, setCurrent] = useState(0);\n const currentMedia = media[current];\n const { userAgent } = useContext(StaticContext);\n const { isDesktop } = getClientEnvironmentDetails(userAgent);\n\n if (!currentMedia) {\n return null;\n }\n\n return (\n <>\n {icon}
\n \n {`${label}:`} \n {/* The query params need to be preserved between urls (needed for ut_source) */}\n \n \n {linkLabel}\n \n \n
\n \n {media.map(m => (\n \n \n \n
\n \n \n \n \n \n \n \n \n
\n \n
\n \n
\n \n
\n \n \n {appDetails.name}\n \n \n \n \n
\n \n {appDetails.details.featureList.map(feature => (\n \n \n {feature}\n \n
\n ))}\n \n \n setSelectedTab(value)}\n >\n \n \n \n \n \n {substitute(\n COPY.REQUIRED_ACCOUNT_LABEL.defaultMessage,\n {\n accountType:\n appDetails.details.requirements.type\n }\n )}\n \n \n \n \n \n \n {COPY.REQUIRED_ACCESS_LABEL.defaultMessage}\n \n \n \n \n
\n \n - \n
- \n
\n \n
\n {appDetails.details.requirements.description}\n
\n- \n {appDetails.details.scopes.map(scope => (\n
\n \n \n \n \n \n \n
\n \n - \n {menuItems.map(item => (\n
\n {menuItems.map(item => (\n \n \n \n \n\n \n {item.text}\n \n \n\n \n \n \n \n ))}\n
\n \n \n
\n );\n};\n\nNavForIE.propTypes = {\n openMenu: PropTypes.oneOf(Object.values(MENU)),\n setOpenMenu: PropTypes.func.isRequired\n};\n\nNavForIE.defaultProps = {\n openMenu: undefined\n};\n\nexport default NavForIE;\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\n\nimport { Grid, Row, Col, Typography, Button } from '@sm/wds-react';\nimport { IconChevronDown, IconChevronUp } from '@sm/wds-icons';\nimport { t, T } from '@sm/intl';\nimport { TabletScreen } from '@sm/webassets';\n\nimport useIsomorphicLayoutEffect from '../../../helpers/useIsomorphicLayoutEffect';\nimport getClickHandlers from '../../../helpers/getClickHandlers';\nimport { getLinkGenerator } from '../../../helpers/logging';\nimport addScrollListener from '../helpers/scrollListener';\nimport COPY from '../helpers/copy';\nimport { MENU } from '../helpers/enums';\nimport MENU_CONFIG from '../helpers/menuConfig';\nimport logger from '../helpers/logger';\nimport mrxLogoDark from '../helpers/logo-marketresearch.svg';\nimport mrxLogoLight from '../helpers/logo-marketresearch--white.svg';\nimport ExpandableMenu from '../ExpandableMenu';\nimport './nav-for-ie.scss';\n\nexport const TEST_ID = 'MobileNavForIE';\n\nconst getLink = getLinkGenerator({\n ut_source: 'market_research',\n ut_source2: 'solutions',\n ut_source3: 'subnav'\n});\n\nconst NavForTablet = ({ openMenu, setOpenMenu, isOpen, setIsOpen }) => {\n const [scrolledToTop, setScrolledToTop] = useState(true);\n const navId = 'sm-mrx-nav-id-mobile';\n // Need to add this after layout is painted to fix flickering for MRX-21\n useIsomorphicLayoutEffect(() => {\n const removeScrollListener = addScrollListener(isAtTop =>\n setScrolledToTop(isAtTop)\n )();\n // This is because there is some element on IE 11 forcing the page to\n // be scroll-able to the right.\n document.body.classList.add('sm-nav-for-ie--hide-overflow-x');\n return () => {\n removeScrollListener();\n document.body.classList.remove('sm-nav-for-ie--hide-overflow-x');\n };\n });\n const useLight = scrolledToTop && !isOpen;\n const image = useLight ? mrxLogoLight : mrxLogoDark;\n const chevronColor = useLight ? 'light' : 'dark';\n\n return (\n \n \n \n setIsOpen(!isOpen))}\n >\n \n \n \n \n \n \n \n \n \n \n \n setOpenMenu(MENU.SOLUTIONS)}\n variant=\"dark\"\n />\n setOpenMenu(MENU.MORE_RESOURCES)}\n variant=\"dark\"\n />\n \n \n \n {\n logger.click.navigateTo('get_a_demo');\n })}\n className=\"sm-mrx-nav__cta-button--mobile\"\n stretched\n >\n \n \n
\n \n \n
\n \n );\n};\n\nNavForTablet.propTypes = {\n openMenu: PropTypes.oneOf(Object.values(MENU)),\n setOpenMenu: PropTypes.func.isRequired,\n isOpen: PropTypes.bool.isRequired,\n setIsOpen: PropTypes.func.isRequired,\n scrollPosRef: PropTypes.shape({\n current: PropTypes.number\n }),\n isScrolledToTop: PropTypes.bool\n};\n\nNavForTablet.defaultProps = {\n openMenu: undefined,\n scrollPosRef: { current: 0 },\n isScrolledToTop: true\n};\n\nexport default NavForTablet;\n","import React from 'react';\nimport { MobileTabletScreen, DesktopScreen } from '@sm/webassets';\n\nimport DesktopNav from './DesktopNavForIE';\nimport MobileNav from './MobileNavForIE';\n\nexport { TEST_ID as DESKTOP_TEST_ID } from './DesktopNavForIE';\nexport { TEST_ID as MOBILE_TEST_ID } from './MobileNavForIE';\n\nconst NavForIE = props => (\n <>\n \n \n
\n
\n );\n};\n\nexport default MRXHeader;\n","const MIN_SWIPE_DISTANCE = 40;\nconst VECTOR = Object.freeze({\n UP: 'UP',\n DOWN: 'DOWN',\n RIGHT: 'RIGHT',\n LEFT: 'LEFT'\n});\n\nconst getQuadrant = vector => {\n const isUpperHemisphere = vector[1] < 0;\n const isLeftHemisphere = vector[0] < 0;\n if (isUpperHemisphere && isLeftHemisphere) return 2;\n if (isUpperHemisphere && !isLeftHemisphere) return 1;\n if (!isUpperHemisphere && isLeftHemisphere) return 3;\n return 4;\n};\n\nconst convertToAbsoluteAngle = (vector, vectorDeg) => {\n const quadrant = getQuadrant(vector);\n if (quadrant === 1) return -1 * vectorDeg;\n if (quadrant === 2) return 90 - vectorDeg + 90;\n if (quadrant === 3) return 180 - vectorDeg;\n return 360 - vectorDeg;\n};\n\nconst getSwipeVectorFromPoints = (start, end) => {\n const vector = [end.x - start.x, end.y - start.y];\n const vectorDeg = convertToAbsoluteAngle(\n vector,\n Math.atan(vector[1] / vector[0]) * (180 / Math.PI)\n );\n if (vectorDeg > 315 || vectorDeg <= 45) return VECTOR.RIGHT;\n if (vectorDeg > 45 && vectorDeg <= 120) return VECTOR.DOWN;\n if (vectorDeg > 120 && vectorDeg <= 210) return VECTOR.LEFT;\n return VECTOR.UP;\n};\n\nconst getDistanceBetweenPoints = (start, end) =>\n Math.trunc(Math.sqrt((end.x - start.x) ** 2 + (end.y - start.y) ** 2));\n\nexport const hasSwipedLeft = (touchStartPos, touchEndPos) =>\n getDistanceBetweenPoints(touchStartPos, touchEndPos) >= MIN_SWIPE_DISTANCE &&\n getSwipeVectorFromPoints(touchStartPos, touchEndPos) === VECTOR.LEFT;\n\nexport const hasSwipedRight = (touchStartPos, touchEndPos) =>\n getDistanceBetweenPoints(touchStartPos, touchEndPos) >= MIN_SWIPE_DISTANCE &&\n getSwipeVectorFromPoints(touchStartPos, touchEndPos) === VECTOR.RIGHT;\n\nexport const hasSwipedUp = (touchStartPos, touchEndPos) =>\n getDistanceBetweenPoints(touchStartPos, touchEndPos) >= MIN_SWIPE_DISTANCE &&\n getSwipeVectorFromPoints(touchStartPos, touchEndPos) === VECTOR.UP;\n\nexport const hasSwipedDown = (touchStartPos, touchEndPos) =>\n getDistanceBetweenPoints(touchStartPos, touchEndPos) >= MIN_SWIPE_DISTANCE &&\n getSwipeVectorFromPoints(touchStartPos, touchEndPos) === VECTOR.DOWN;\n","import React, { Children, useState, useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\n\nimport { hasSwipedLeft, hasSwipedRight } from '../../helpers/swipe';\n\nimport './mrx-carousel.scss';\n\nconst Carousel = ({ children }) => {\n const [currentOffset, setCurrentOffset] = useState(0);\n const touchDownPosition = useRef({ x: 0, y: 0 });\n return (\n \n
\n \n
\n \n {\n touchDownPosition.current = {\n x: e.touches[0].clientX,\n y: e.touches[0].clientY\n };\n }}\n onTouchEnd={e => {\n const pos = {\n x: e.changedTouches[0].clientX,\n y: e.changedTouches[0].clientY\n };\n if (\n hasSwipedLeft(touchDownPosition.current, pos) &&\n currentOffset < children.length - 1\n ) {\n setCurrentOffset(currentOffset + 1);\n } else if (\n hasSwipedRight(touchDownPosition.current, pos) &&\n currentOffset\n ) {\n setCurrentOffset(currentOffset - 1);\n }\n }}\n >\n {Children.map(children, (child, idx) => {\n const isFocused = idx === currentOffset;\n const myOffset = currentOffset * 100;\n return (\n \n {child}\n
\n );\n })}\n \n \n );\n};\n\nCarousel.propTypes = {\n children: PropTypes.node.isRequired\n};\n\nexport default Carousel;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withRouter } from 'react-router-dom';\n\nimport useIsomorphicLayoutEffect from '../helpers/useIsomorphicLayoutEffect';\n\nlet timeout;\n\nconst getOffsetTop = element => {\n if (!element) return 0;\n return getOffsetTop(element.offsetParent) + element.offsetTop;\n};\n\nconst scrollToElement = element => {\n if (element) {\n if (timeout) {\n clearTimeout(timeout);\n timeout = null;\n }\n timeout = setTimeout(() => {\n const offset = getOffsetTop(element);\n if (window.pageYOffset !== offset) {\n element.focus();\n window.scrollTo(0, offset);\n scrollToElement(element);\n }\n }, 200);\n }\n};\n\nconst Anchor = ({ location, children, className, id }) => {\n const { hash } = location;\n useIsomorphicLayoutEffect(() => {\n if (hash) {\n const hashId = hash.slice(1);\n if (hashId === id) {\n const element = document.getElementById(hashId);\n scrollToElement(element);\n }\n }\n }, [children, hash, id]);\n return (\n <>\n \n {children}\n \n );\n};\n\nAnchor.propTypes = {\n location: PropTypes.shape({\n hash: PropTypes.string\n }).isRequired,\n children: PropTypes.node.isRequired,\n className: PropTypes.string,\n id: PropTypes.string.isRequired\n};\n\nAnchor.defaultProps = {\n className: ''\n};\n\nexport default withRouter(Anchor);\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport { Card, Typography, Grid, Row, Col, Button } from '@sm/wds-react';\n\nimport './product-tile.scss';\nimport { linkPropType } from '../../../propTypes';\nimport useBrowser, { BROWSER } from '../../../helpers/useBrowser';\nimport getClickHandlers from '../../../helpers/getClickHandlers';\n\nexport const TEST_ID = 'ProductTile';\n\nconst ProductTile = ({ title, image, body, ctaButton, link }) => {\n const isIE = useBrowser() === BROWSER.IE;\n const outerClasses = classnames({\n 'sm-product-tile': !isIE,\n 'sm-product-tile--ie': isIE\n });\n\n return (\n \n
\n \n \n \n \n \n \n \n
\n \n);\n\nconst HereToHelp = () => (\n \n
\n );\n } else if (fetchState === FETCH_STATE.ERROR) {\n inner =