\n 
\n
\n \n
\n \n {t(`${assetTitle} is being edited`)}\n
\n \n {translationRenderer(`This ${productFileType[currentListing]} currently being edited by [1[{username}]].[2[{}]]You will be able to edit when the user stops editing. `)({\n renderer1: () => ({name || username}),\n renderer2: () => (
)\n })}\n
\n )\n })}\n
\n
\n \n {t('TEAM AVATAR')}\n
\n \n \n \n \n \n \n \n
\n \n
\n \n {\n selectImage(file?.url);\n handleResetSelectedImage();\n }}\n onLinkTextInputSubmit={onLinkTextInputSubmit}\n onFileRemove={removeImage}\n onImageSelect={selectImage}\n onImageRemove={removeImage}\n />\n
\n \n
\n \n
\n \n {t('Icon Color')}\n
\n \n update({ teamAvatarIconColor: val }), 400)}\n onInputRemove={() => update({ teamAvatarIconColor: '' })}\n ariaLabel={t('Icon Color')}\n />\n
\n \n
\n \n {t('Background Color')}\n
\n \n update({ teamAvatarIconBgColor: val }), 400)}\n onInputRemove={() => update({ teamAvatarIconBgColor: '' })}\n ariaLabel={t('Background Color')}\n />\n
\n \n
\n \n
\n \n {t('CUSTOMIZE COVER')}\n
\n \n
\n \n
\n \n
\n \n {t('Background Color')}\n
\n \n update({ coverBgImageURL: '', coverBgColor: val }), 400)}\n onInputRemove={() => update({ coverBgColor: '' })}\n />\n
\n \n
\n \n {t('Title Color')}\n
\n \n update({ coverTitleColor: val }), 400)}\n onInputRemove={() => update({ coverTitleColor: '' })}\n />\n
\n \n
\n \n {\n selectImage(file?.url);\n handleResetSelectedImage();\n }}\n onLinkTextInputSubmit={onLinkTextInputSubmit}\n onFileRemove={removeImage}\n onImageSelect={selectImage}\n onImageRemove={removeImage}\n />\n
\n \n \n \n \n
\n \n
\n );\n};\n","/* eslint-disable react/default-props-match-prop-types */\nimport React, { FunctionComponent } from 'react';\nimport { Tooltip } from '@jotforminc/tooltip';\nimport { translationRenderer } from '@jotforminc/translation';\nimport { ImageWithWrapper } from '../Image/ImageWithWrapper';\nimport { TeamBadgeProps, TeamImageProps } from './types';\n\nimport '../../styles/TeamBadge.scss';\n\nexport const TeamImage: FunctionComponent\n \n \n {tooltipText || translationRenderer(`This ${productType} belongs to [1[teamName]] team`)({\n renderer1: () => teamProperties?.name as string\n })}\n \n \n {children}\n
\n );\n};\n","import Styled from 'styled-components';\nimport { PickerModal } from '@jotforminc/picker-modal';\n\nexport const ScPickerModal = Styled(PickerModal)`\n .header-content {\n margin: 20px 0;\n font-family: Circular,-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\";\n\n .pm-t {\n margin: 0;\n font-size: 20px;\n font-weight: 500;\n letter-spacing: 0.15px;\n color: #141E46;\n }\n\n .pm-d {\n margin: 0.25em 0 0;\n font-size: 16px;\n letter-spacing: 0.12px;\n color: #60658C;\n }\n }\n\n .close-modal {\n margin-right: 24px;\n }\n\n .pm-b {\n max-width: 600px;\n width: 90%;\n min-height: 570px;\n\n [data-sc=\"smartList-controlBar\"] {\n .cb-body {\n display: none;\n }\n .cb-searchCont {\n flex: 0 0 100%;\n }\n }\n\n .emptyList {\n text-align: center;\n min-height: 60vh;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n }\n\n\n [data-sc='footer'] {\n background-color: rgba(239,239,246,.45);\n }\n\n .pm-f {\n display: flex;\n justify-content: space-between;\n\n button {\n font-weight: 500;\n font-family: Circular,-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\";\n }\n\n .taste.isGray {\n padding: 8px 32px;\n }\n\n .taste.isGreen {\n background-color: #01BD6F;\n padding: 0px 32px;\n\n &:hover {\n background-color: #01d67e;\n }\n &[disabled] {\n opacity: 1;\n background-color: #78D6AF;\n }\n }\n }\n\n .js-ConfirmationModal {\n font-family: inherit;\n }\n\n &.autoHeight {\n .pm-b {\n min-height: auto;\n\n ul {\n overflow-y: auto;\n\n li:last-child {\n margin-bottom: 28px;\n }\n }\n }\n }\n\n @media screen and (min-width: 480px) {\n [data-sc=\"picker-body\"] {\n max-height: 60vh;\n }\n }\n`;\n","/* eslint-disable max-len */\nimport { Button } from '@jotforminc/uikit';\nimport styled from 'styled-components';\n\nexport const ScButton = styled(Button)`\n &.bare {\n font-size: .875em;\n color: #4573e3;\n text-decoration: none;\n background: transparent;\n cursor: pointer;\n box-shadow: none;\n padding: 0;\n border: 0;\n }\n\n &.taste {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: .5em .75em;\n border-radius: 4px;\n cursor: pointer;\n text-transform: uppercase;\n border: 0;\n font-size: 1em;\n line-height: 1.5;\n font-weight: 500;\n font-family: inherit;\n }\n\n &.panel {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: 2px;\n cursor: pointer;\n text-transform: capitalize;\n border: 0;\n padding: 6px;\n margin: 0;\n font-size: 15px;\n font-family: Roboto,Circular,-apple-system,BlinkMacSystemFont,\"Segoe UI\",Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\";\n transition: .3s background-color ease;\n }\n\n &.panel.isGreen {\n background-color: #4BC073;\n color: #fff;\n\n &:hover {\n background-color: #65DA8D;\n }\n\n &:active {\n background-color: #32A75A;\n }\n }\n\n &.taste.isGreen {\n background-color: #54b45c;\n color: #fff;\n }\n\n\n &.taste.isPurple {\n background-color: #8563ce;\n color: #fff;\n }\n\n &.taste.isRed {\n background-color: #ff4947;\n color: #fff;\n }\n\n &.taste.isGray {\n background-color: #FAFAFC;\n border: 1px solid #ADB4D2;\n color: #A0A6C3;\n\n &:hover {\n background-color: #fff;\n color: #9EA7CE;\n border-color: #9EA7CE;\n }\n\n &[disabled] {\n color: #A0A6C3;\n border-color: #A0A6C3;\n background-color: #FAFAFC;\n }\n }\n\n &.taste.isBlue, &.panel.isBlue {\n background-color: #0099FF;\n color: #fff;\n transition: .3s background-color ease;\n\n &:hover {\n background-color: #33adff;\n }\n\n &:active {\n background-color: #007acc;\n }\n }\n\n &.taste.isLightGreen {\n background-color: #78BB07;\n color: #fff;\n\n &:hover {\n background-color: #4EB100;\n }\n\n &:active {\n background-color: #5FA200;\n }\n }\n\n &.taste.isSubGray {\n background-color: #e9e9f2;\n color: #898ba9;\n\n &:hover {\n background-color: #F2F2FE;\n }\n\n &:active {\n background-color: #DEDEEC;\n }\n\n &[disabled] {\n &:hover,&:active {\n background-color: #e9e9f2;\n }\n }\n }\n\n &.taste.isWhite {\n background-color: #fff;\n color: #8E4FCD;\n transition: .3s background-color ease;\n border: 1px solid #8E4FCD;\n\n svg path {\n fill: #8E4FCD;\n }\n\n &:hover {\n background-color: #7735BA;\n color: #fff;\n\n svg path { fill: #fff; }\n }\n\n &:active {\n background-color: #6722AC;\n color: #fff;\n\n svg path { fill: #fff; }\n }\n }\n\n\n &.taste.quickQR {\n border-radius: 4px;\n & > svg {\n & > path { fill: #fff }\n }\n\n @media screen and (max-width: 480px) {\n border-radius: 29px;\n }\n }\n\n &.taste.quickQR {\n margin: 0 20px;\n font-weight: 500;\n font-size: 14px;\n font-family: inherit;\n transition: .3s background-color ease;\n text-transform: none;\n\n & > svg { margin-right: 7px;}\n\n @media screen and (max-width: 480px) {\n padding: 11px;\n margin: 0;\n\n & > span { display: none; }\n & > svg {\n margin-right: 0;\n & > path { fill: #fff }\n }\n }\n }\n\n &.taste.quickQR {\n background-color: #0a1551;\n\n &:hover {\n background-color: #252d5b;\n }\n }\n\n &.taste.quickQR.isSelected {\n background-color: #091141;\n }\n\n &.taste.undoRedo {\n margin: 0 2px;\n padding: 12px 17px;\n font-size: 14px;\n font-family: inherit;\n transition: .3s background-color ease;\n text-transform: none;\n font-weight: 400;\n\n & > svg { margin-right: 11px;}\n & > span { color: #23283A; line-height: 16px; }\n\n @media screen and (max-width: 768px) {\n padding: 12px 10px;\n & > span { display: none; }\n & > svg { margin-right: 0; }\n }\n\n @media screen and (max-width: 480px) {\n padding: 12px 10px;\n & > span { display: none; }\n & > svg { margin-right: 0; }\n }\n\n &[disabled] {\n & > svg > path { fill: #979797;}\n & > span { color: #898BA9; }\n }\n }\n\n &[disabled] { opacity: .6; cursor: initial; }\n\n\n &.outline {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: .5em 1em;\n border-radius: 2px;\n cursor: pointer;\n background: transparent;\n border: 1px solid currentColor;\n font-size: .875em;\n line-height: 1rem;\n font-weight: 500;\n }\n\n &.outline.isRed {\n color: #ff4947;\n }\n\n &.outline.removeForms { padding: .625em; }\n &.outline.removeForms span { margin-left: .25rem; }\n\n &.goBack {\n font-size: .875em;\n line-height: 1;\n color: #90a4ae;\n padding: 0 1em 1em 0;\n\n & > * { vertical-align: middle; }\n svg { width: 18px; margin-right: 5px; }\n }\n\n /*\n &.forRevoke {\n font-size: .875em;\n color: #f9535c;\n margin: 0 .5rem 0 auto;\n padding: .5em 1em .5em 1.5rem;\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='15' viewBox='0 0 11 15'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23F9535C'%3E%3Cpath d='M8.834 3.252v9.037c0 .834-.58 1.445-1.375 1.446-1.757.002-3.514.002-5.271 0-.795-.001-1.374-.612-1.374-1.447V3.252h8.02zM2.828 5.345v6.292h1.137c.166 0 .187 0 .19-.138V5.548c0-.037.01-.079-.003-.108-.018-.037-.056-.09-.085-.09-.41-.007-.82-.005-1.239-.005zm3.99 0H5.686c-.192 0-.193 0-.193.202v6.08H6.82V5.345zM0 2.414V.819h.184C.992.82 1.8.823 2.607.814c.08 0 .177-.05.238-.112.178-.187.339-.396.515-.585.05-.054.13-.097.198-.097.843-.007 1.687-.007 2.53 0 .067 0 .148.043.198.097.177.19.337.399.515.585.061.063.158.112.238.112.803.009 1.605.005 2.408.005h.195v1.595H0z' transform='translate(-3 -1) translate(3.542 1.417)'/%3E%3C/g%3E%3Cpath d='M0 0L17 0 17 17 0 17z' transform='translate(-3 -1)'/%3E%3C/g%3E%3C/svg%3E%0A\");\n background-repeat: no-repeat;\n background-size: 11px 15px;\n background-position: 8px 7px;\n }\n */\n\n @media screen and (max-width: 480px) {\n &.outline.removeForms span { display: none; }\n &.cb-addForm {\n margin-left: 0.5em;\n span { display: none; }\n svg { margin-right: 0 !important; }\n }\n }\n`;\n","import React, {\n forwardRef, useState, useMemo, useCallback, useImperativeHandle, useRef\n} from 'react';\nimport {\n func, oneOf, shape, string\n} from 'prop-types';\nimport { Hooks } from '@jotforminc/uikit';\nimport { t } from '@jotforminc/translation';\n\nimport { ResourcePicker, resourceConfigs } from '@jotforminc/resource-picker';\nimport { ScPickerModal } from './ScPickerModal';\nimport { ScButton } from './ScButton';\n\nconst ResourcePickerModal = forwardRef(({\n resourceType,\n defaultValue = '',\n onResourceSelectionChange = f => f,\n onResourceSelectionComplete = f => f,\n onCreateNewResource = null,\n headerDescription = '',\n footerCreateNew = t('Create New'),\n footerCancel = t('Cancel'),\n footerDone = t('Done'),\n // eslint-disable-next-line\n classNames = '',\n pickerProps = {},\n ...rest\n}, ref) => {\n const [selectedResource, setSelectedResource] = useState('');\n const [resources, setResources] = useState([]);\n const pickerRef = useRef();\n\n useImperativeHandle(ref, () => ({\n ...pickerRef.current,\n showPicker: content => {\n setSelectedResource('');\n setResources(content);\n pickerRef.current.show();\n }\n }));\n\n const onChange = useCallback(resourceID => {\n if (resourceID !== selectedResource && resourceID !== '') {\n setSelectedResource(resourceID);\n }\n }, [selectedResource]);\n\n const hidePicker = useCallback(() => {\n pickerRef.current.hide();\n }, []);\n\n const handleCreateNew = useCallback(() => {\n onCreateNewResource();\n hidePicker();\n }, []);\n\n const isDoneButtonActive = useMemo(() => !selectedResource, [selectedResource]);\n\n const onDoneClick = useCallback(() => {\n if (selectedResource) {\n onResourceSelectionComplete(selectedResource);\n }\n hidePicker();\n }, [selectedResource, resources]);\n\n const Footer = useMemo(() => (\n \n {onCreateNewResource && typeof onCreateNewResource === 'function' ? (\n \n {footerCreateNew}\n \n ) : (\n \n {footerCancel}\n \n )}\n {resources.length !== 0 && (\n \n {footerDone}\n \n )}\n
\n ), [isDoneButtonActive, resources]);\n\n const Header = useMemo(() => (\n <>\n {t(resourceConfigs[resourceType].headerTitle || '')}
\n {headerDescription}
\n \n ), []);\n\n Hooks.useEffectIgnoreFirst(() => {\n onResourceSelectionChange(selectedResource);\n }, [selectedResource]);\n\n return (\n\n \n {children}\n \n \n {t(disableMessage)}\n \n
\n \n
\n );\n};\n\nTeamSection.propTypes = {\n teams: arrayOf(shape({})),\n isTeamCreationDisabled: bool,\n isTeamBrowsingDisabled: bool,\n openCreateTeamModal: func,\n currentTeamID: string,\n isTeamPage: bool,\n user: shape({\n username: string,\n account_type: shape({\n name: string\n })\n }).isRequired\n};\n\nexport default TeamSection;\n","import React, { useState } from 'react';\nimport {\n shape, string, func, bool, arrayOf\n} from 'prop-types';\nimport qs from 'querystring';\nimport { t } from '@jotforminc/translation';\nimport { handleCustomNavigation } from '@jotforminc/utils';\nimport { canCreateTeam } from '@jotforminc/enterprise-components';\nimport { isEnterprise } from '@jotforminc/enterprise-utils';\nimport { IconChevronRight } from '@jotforminc/svg-icons';\nimport { ActivityLogger } from '@jotforminc/activity-logger';\n\nimport classNames from 'classnames';\nimport {\n appConfigPropsTypes, getDefaultNavItems\n} from './navigationConstants';\nimport NavigationItem from './NavigationItem';\nimport TeamSection from './TeamSection';\n\nconst hasNewBadge = () => {\n return false;\n};\n\n// eslint-disable-next-line complexity\nconst Navigation = ({\n form = {},\n forms = [],\n appID = '',\n appList = [],\n formIDs = [],\n summary = {},\n hideIfEmpty = false,\n showBackToMyForms = true,\n visibleNavigationApps = [],\n backToMyFormsLink = '/myforms',\n backToMyFormsText = 'Go Back to My Forms',\n onMyformsClick = f => f,\n logDiscoverabilityActions = f => f,\n toggleNavigation = f => f,\n isAppPickerSideModeActive = false,\n teamID = '',\n teams = [],\n openCreateTeamModal = () => {},\n showTeamSection = false,\n isTeamPage = false,\n isInListings = false,\n isTeamCreationDisabled = false,\n isTeamBrowsingDisabled = false,\n createForm = f => f,\n user,\n appConfig,\n appName: currentAppName,\n agentID = ''\n}) => {\n const [loading, setLoading] = useState(false);\n const [loadingApp, setLoadingApp] = useState('');\n\n const isNotFormOwner = form?.owner && user?.username && form.owner !== user.username;\n const appConfigs = { ...getDefaultNavItems(true), [currentAppName]: appConfig };\n const apps = appList.indexOf(currentAppName) !== -1 || currentAppName === 'myTeams' ? appList : [...appList, currentAppName];\n const hideBackButton = window.JOTFORM_ENV === 'ENTERPRISE' && visibleNavigationApps.length > 0 && visibleNavigationApps.indexOf('toMyForms') === -1;\n const userAccountType = user?.accountType || user?.account_type;\n const hideTeamSection = teams.length === 0 && !canCreateTeam(isTeamCreationDisabled, userAccountType);\n const isJotformAdmin = !isEnterprise() && (userAccountType === 'ADMIN' || userAccountType?.name === 'ADMIN');\n const isTeamSectionVisible = showTeamSection && !hideTeamSection;\n const isHideBetaEnabled = user?.hideBetaBadges === '1';\n const noRedirectedApps = ['myTeams', 'myWorkspace'];\n const preventWorkspaceRedirect = !isEnterprise() && user && !!user.allowMixedListing && !isJotformAdmin;\n\n if (!teamID && isNotFormOwner && currentAppName !== 'portal') {\n // For now, don't show app builder on navigation for subusers\n const portalIndex = apps.indexOf('portal');\n if (portalIndex !== -1) {\n apps.splice(portalIndex, 1);\n }\n }\n\n if (isHideBetaEnabled) {\n const myPagesIndex = apps.indexOf('myPages');\n if (myPagesIndex !== -1) {\n apps.splice(myPagesIndex, 1);\n }\n }\n\n const setLoadingState = app => state => {\n setLoading(state);\n setLoadingApp(state ? app : '');\n };\n\n const handleBackToMyFormsClick = e => {\n ActivityLogger.setLogger(window?.JotFormActions?.('productPickerNavigationActions'))\n .log({\n action: 'click',\n target: backToMyFormsText?.replace(/ +/g, '')\n });\n\n const parameters = qs.stringify({ ...(preventWorkspaceRedirect ? { preventWorkspaceRedirect: true } : {}) });\n e.preventDefault();\n if (onMyformsClick) {\n onMyformsClick({ queryParams: parameters });\n } else {\n const hasParameter = backToMyFormsLink && backToMyFormsLink.indexOf('?') > -1 ? '&' : '?';\n if (backToMyFormsLink.includes('myagents') || window.location.pathname.includes('/agent/build')) {\n handleCustomNavigation(`${backToMyFormsLink}${parameters ? `${hasParameter}${parameters}` : ''}`, '_blank', true);\n } else {\n handleCustomNavigation(`${backToMyFormsLink}${parameters ? `${hasParameter}${parameters}` : ''}`, '_blank');\n }\n }\n\n logDiscoverabilityActions({\n action: 'click',\n target: 'goBackToMyForms'\n });\n };\n\n return (\n \n {t('MY TEAMS')}\n
\n\n {teams.length\n ? teams.slice(0, 3).map(team => (\n {\n e.preventDefault();\n handleCustomNavigation(`/myteams/${team?.slug || team?.id}`, '_self');\n }}\n className={classNames({ selected: isTeamPage && currentTeamID === team?.id })}\n >\n
\n {!isTeamBrowsingDisabled && !!teams.length && (\n \n
\n \n )) : (\n {team?.name || ''}
\n \n {team?.memberCount}\n \n {isPlural(team?.memberCount) ? t('members') : t('member')}\n
\n \n
\n )}\n \n
\n {`${t(\"You don't have any teams yet. Create your first team and start collaborating with your colleagues.\")}`}
\n\n {t('View All')}\n
\n )}\n \n \n {`+ ${t('CREATE A TEAM')}`}\n \n
\n - \n {apps.map(app => {\n return (\n
\n
\n \n ) }\n \n \n
\n )}\n\n {isAppPickerTooltipActive\n && (\n <>\n {t(\"You've got responses! 🎉'\")}
\n{t('Now click here to discover how you can make the most of your responses.')}
\n\n
\n );\n }\n}\n\nNavigationWrapper.propTypes = {\n appConfig: appConfigPropsTypes.isRequired,\n appList: PropTypes.arrayOf(PropTypes.string),\n appID: PropTypes.string,\n formIDs: PropTypes.arrayOf(PropTypes.string),\n appName: PropTypes.string,\n appTag: PropTypes.string,\n showBackToMyForms: PropTypes.bool,\n form: PropTypes.shape({}),\n forms: PropTypes.arrayOf(PropTypes.shape({})),\n isNavigationOpened: PropTypes.bool,\n toggleNavigation: PropTypes.func,\n backToMyFormsText: string,\n backToMyFormsLink: string,\n onMyformsClick: PropTypes.func,\n summary: PropTypes.shape({}),\n visibleNavigationApps: PropTypes.arrayOf(PropTypes.string),\n title: string,\n user: PropTypes.shape({\n account_type: PropTypes.shape({\n name: PropTypes.string\n })\n }).isRequired,\n hideIfEmpty: bool,\n isAppPickerSideModeActive: bool,\n isAppPickerTooltipActive: bool,\n onAppPickerTooltipOverlayClicked: PropTypes.func,\n onAppPickerTooltipCloseIconClicked: PropTypes.func,\n onAppPickerTooltipRendered: PropTypes.func,\n darkMode: PropTypes.bool,\n isInSsrHeader: PropTypes.bool,\n teamID: PropTypes.string,\n teams: PropTypes.arrayOf(PropTypes.shape({})),\n openCreateTeamModal: PropTypes.func,\n showTeamSection: PropTypes.bool,\n isTeamPage: PropTypes.bool,\n isInListings: PropTypes.bool,\n isTeamCreationDisabled: PropTypes.bool,\n isTeamBrowsingDisabled: PropTypes.bool,\n createForm: PropTypes.func,\n agentID: PropTypes.string\n};\n\nexport default onClickOutsideHOC(NavigationWrapper);\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { t } from '@jotforminc/translation';\nimport { handleCustomNavigation } from '@jotforminc/utils';\nimport { ActivityLogger } from '@jotforminc/activity-logger';\nimport { getDefaultLogoSrc } from '../../utils';\n\nconst Logo = props => {\n const {\n alt = 'JotForm Logo',\n title = 'My Forms',\n className = 'jfLogo',\n href = '',\n background = '',\n src = getDefaultLogoSrc(),\n wrapperClassName = 'jNewHeader-logo iBlock',\n onClick = null,\n preventRedirection = false,\n ariaLabel = ''\n } = props;\n\n const handleClick = e => {\n e.preventDefault();\n if (window?.JotFormActions) {\n ActivityLogger.setLogger(window?.JotFormActions('header-actions'))\n .log({\n action: 'click',\n target: 'topLeftMainLogo'\n });\n }\n\n if (onClick) {\n onClick();\n } else {\n handleCustomNavigation(href, '_self');\n }\n };\n\n return (\n <>\n {preventRedirection\n ? (\n \n
\n )\n : (\n \n \n
\n {isMenuOpened\n && (\n \n
\n Compliance\n \n
\n );\n case 'government': {\n return (\n \n Compliance\n \n
\n \n
\n );\n }\n default: return null;\n }\n};\n","/* eslint-disable react/destructuring-assignment */\nimport React from 'react';\nimport {\n func,\n bool,\n string,\n node,\n shape,\n oneOfType,\n instanceOf,\n arrayOf,\n elementType,\n array\n} from 'prop-types';\nimport classnames from 'classnames';\nimport isObject from 'lodash/isObject';\nimport { truncate } from 'lodash/fp';\nimport { ResizeObserver as ResizeObserverPolyfill } from '@juggle/resize-observer';\nimport { EmptyList } from '@jotforminc/empty-list';\nimport { ResourcePicker, RESOURCE_TYPES } from '@jotforminc/resource-picker';\nimport { ActivityLogger } from '@jotforminc/activity-logger';\nimport { isEnterprise } from '@jotforminc/enterprise-utils';\nimport { AccountBox, FormUserAccountBox } from '@jotforminc/account-box';\nimport { t } from '@jotforminc/translation';\nimport { TeamBadge, isBillingTabActive } from '@jotforminc/enterprise-components';\nimport { propTypes } from '@jotforminc/constants';\nimport { handleCustomNavigation, readCookie } from '@jotforminc/utils';\nimport { ActionManager } from '@jotforminc/abtest-manager';\n\nimport NavigationWrapper from '../Navigation/NavigationWrapper';\nimport Logo from '../Logo';\nimport Title from '../Title';\nimport SubTitle from '../SubTitle';\nimport '../../styles/_jfHeader.scss';\nimport {\n appConfigPropsTypes,\n getDefaultNavItems\n} from '../Navigation/navigationConstants';\nimport {\n getToggleContext, getToggleDisabled, getToggleHandler, isShowTeamBadge, hasTeamAvatarInfo\n} from '../../utils';\nimport { fetchTeamProps, getUnpaidInvoices } from '../../utils/api';\nimport IconEmptyFormList from '../../assets/svg/emptyFormList.svg';\nimport { HeaderBadge } from './HeaderBadge';\n\nclass ProductHeader extends React.PureComponent {\n constructor(props) {\n super(props);\n\n this.toggleNavigation = this.toggleContext.bind(this, 'navigation');\n this.toggleFormList = this.toggleContext.bind(this, 'formList');\n this.toggleAccountBox = this.toggleContext.bind(this, 'accountBox');\n this.subTitleClick = this.subTitleClick.bind(this);\n this.isFieldVisible = this.isFieldVisible.bind(this);\n this.handleFormChange = this.handleFormChange.bind(this);\n this.renderTitle = this.renderTitle.bind(this);\n this.updateTeamBadgeVisibility = this.updateTeamBadgeVisibility.bind(this);\n this.skipToMainContent = this.skipToMainContent.bind(this);\n this.isAdmin = this.isAdmin.bind(this);\n this.getInvoices = this.getInvoices.bind(this);\n this.showAdminConsole = this.showAdminConsole.bind(this);\n\n // A/B Test: productHeaderSignupButtonII\n this.isGuest = this.isGuest.bind(this);\n this.distributeProductHeaderSignupButtonAbTest = this.distributeProductHeaderSignupButtonAbTest.bind(this);\n\n this.navigationTrigger = React.createRef();\n this.navigationWrapper = React.createRef();\n this.rightWrapper = React.createRef();\n this.titleAligner = React.createRef();\n\n const isProd = window.JOTFORM_ENV === 'PRODUCTION';\n\n const {\n appName = '', user = {}, teamProperties = null\n } = this.props;\n\n this.state = {\n isFormListOpened: false,\n isNavigationOpened: false,\n isAccountBoxOpened: false,\n leftSideWidth: 0,\n rightSideWidth: 0,\n team: teamProperties,\n showTeamBadge: false,\n isTestVariant: false,\n isAbTestLoading: isProd,\n logAbTestAction: f => f\n };\n\n if ('JotFormActions' in window) {\n if (user.username) {\n ActivityLogger.setLogger(window.JotFormActions('commonHeader'))\n .setMiddleware(window.location.href.indexOf('.jotform.pro') < 0)\n .setMiddleware(['ADMIN', 'SUPPORT', 'INTERN'].indexOf(user.account_type.name) < 0)\n .setApp(appName);\n }\n }\n }\n\n componentDidMount() {\n this.updateTeamBadgeVisibility();\n this.getInvoices();\n const ResizeObserver = window.ResizeObserver || ResizeObserverPolyfill;\n this.resizeRightSideObserver = new ResizeObserver(entries => {\n const newWidth = entries[0].target.offsetWidth;\n this.setState(state => {\n if (state.rightSideWidth !== newWidth) {\n return { rightSideWidth: newWidth };\n }\n });\n });\n\n this.resizeLeftSideObserver = new ResizeObserver(entries => {\n const newWidth = entries[0].target.offsetWidth;\n this.setState(state => {\n if (state.leftSideWidth !== newWidth) {\n return { leftSideWidth: newWidth };\n }\n });\n });\n\n this.resizeRightSideObserver.observe(this.rightWrapper.current);\n if (this.navigationWrapper.current) {\n this.resizeLeftSideObserver.observe(this.navigationWrapper.current);\n }\n\n // A/B Test: productHeaderSignupButtonII\n this.distributeProductHeaderSignupButtonAbTest();\n }\n\n componentDidUpdate(prevProps) {\n const {\n user = {}, isTeamMember = false, teamBadgeID = ''\n } = this.props;\n const {\n user: prevUser, isTeamMember: prevIsTeamMember, teamBadgeID: prevTeamBadgeID\n } = prevProps;\n if ((prevUser && user && prevUser.userType !== user.userType)\n || prevIsTeamMember !== isTeamMember\n || prevTeamBadgeID !== teamBadgeID\n ) {\n this.updateTeamBadgeVisibility();\n\n // A/B Test: productHeaderSignupButtonII\n this.distributeProductHeaderSignupButtonAbTest();\n }\n if (user.username) {\n ActivityLogger.setUsername(user.username);\n }\n\n this.titleMaxWidthCalculator();\n }\n\n componentWillUnmount() {\n if (this.resizeRightSideObserver) {\n this.resizeRightSideObserver.disconnect();\n }\n if (this.resizeLeftSideObserver) {\n this.resizeLeftSideObserver.disconnect();\n }\n }\n\n get forms() {\n const { forms } = this.props;\n if (!forms) {\n return [];\n }\n\n return forms.filter(f => !f.properties || f.properties?.resourceType !== 'AGENT');\n }\n\n isGuest(user) {\n return user?.accountType === 'GUEST' || user?.accountType?.name === 'GUEST' || user?.account_type === 'GUEST' || user?.account_type?.name === 'GUEST';\n }\n\n // A/B Test: productHeaderSignupButtonII\n distributeProductHeaderSignupButtonAbTest() {\n const { user = {} } = this.props;\n\n try {\n const urlParams = new URLSearchParams(window.location.search);\n const hasUrlParam = urlParams.get('phsbii') === 'true';\n const variation = readCookie('phsb_variation');\n const isTestVariant = variation === '27331' || hasUrlParam;\n const isIncludedInAbTest = !!variation || hasUrlParam;\n const actionManager = new ActionManager({ user, projectName: 'productHeaderSignupButtonII', enableDebugMode: hasUrlParam });\n const logAbTestAction = isIncludedInAbTest && this.isGuest(user) ? actionManager.registerJotformAction : f => f;\n\n this.setState({ isTestVariant, logAbTestAction });\n } catch (e) {\n this.setState({ isTestVariant: false, logAbTestAction: f => f });\n } finally {\n this.setState({ isAbTestLoading: false });\n }\n }\n\n handleFormChange(formID) {\n const { linkHandler = f => f, form: { id } = {} } = this.props;\n if (id === formID || id === formID[0]) return;\n linkHandler(formID);\n this.setState({\n isFormListOpened: false\n });\n ActivityLogger.log({\n action: 'formChanged',\n target: formID\n });\n }\n\n get appConfig() {\n const { appConfig = null, appName = '' } = this.props;\n if (appConfig) return appConfig;\n return getDefaultNavItems(true)[appName];\n }\n\n get textTheme() {\n return 'isDark';\n }\n\n // Fetches invoices to be passed to the AccountBox component to display a warning for overdue invoices\n getInvoices = async () => {\n try {\n if (this.showAdminConsole() && await isBillingTabActive()) {\n const unpaidInvoices = await getUnpaidInvoices();\n\n this.setState(\n currState => ({\n ...currState,\n mostOverdueInvoice: Array.isArray(unpaidInvoices?.mostOverdueInvoice)\n ? unpaidInvoices?.mostOverdueInvoice[0] || {}\n : unpaidInvoices?.mostOverdueInvoice || {}\n })\n );\n }\n } catch (error) {\n // eslint-disable-next-line no-console\n console.error('Unable to get invoices', error);\n }\n };\n\n titleMaxWidthCalculator = () => {\n const { leftSideWidth, rightSideWidth } = this.state;\n if (!leftSideWidth || !rightSideWidth) return;\n\n const maxValue = Math.max(leftSideWidth, rightSideWidth);\n const totalValue = leftSideWidth + rightSideWidth;\n\n if (this.maxValue !== maxValue || window.innerWidth < 501) {\n if (window.innerWidth > 500) {\n this.titleAligner.current.style.maxWidth = `calc(100% - ${maxValue * 2 + 40}px)`;\n } else if (window.innerWidth < 501) {\n this.titleAligner.current.style.maxWidth = `calc(100% - ${totalValue + 20}px)`;\n }\n this.maxValue = maxValue;\n }\n };\n\n showAdminConsole() {\n const { hideAdminConsole = false } = this.props;\n\n return !hideAdminConsole && isEnterprise() && this.isAdmin();\n }\n\n isAdmin() {\n const { user = {} } = this.props;\n\n return isObject(user.account_type) ? user.account_type.name === 'ADMIN' : user.account_type === 'ADMIN';\n }\n\n updateTeamBadgeVisibility() {\n const {\n user = {}, isTeamMember = false, teamBadgeID = '', teamProperties = null\n } = this.props;\n const { team } = this.state;\n const showTeamBadge = isShowTeamBadge(user, isTeamMember, teamBadgeID);\n this.setState(currState => ({ ...currState, showTeamBadge }));\n if (showTeamBadge && !hasTeamAvatarInfo(team)) {\n if (hasTeamAvatarInfo(teamProperties)) {\n this.setState(currState => ({ ...currState, team: teamProperties }));\n } else {\n fetchTeamProps(teamBadgeID).then(resp => {\n if (resp?.name) {\n this.setState(currState => ({ ...currState, team: resp }));\n }\n });\n }\n }\n }\n\n toggleContext(_context) {\n const context = getToggleContext(_context);\n const handler = getToggleHandler(_context);\n const disable = getToggleDisabled(_context);\n\n if (this.props[disable] === true) return;\n\n this.setState(state => ({ [context]: !state[context] }), () => {\n ActivityLogger.log({\n action: context,\n target: this.state[context]\n });\n if (context === 'isFormListOpened' && !this.state[context]) {\n ActivityLogger.log({\n action: 'formListClosed'\n });\n }\n this.props[handler](this.state[context]);\n });\n }\n\n subTitleClick() {\n const { form = {} } = this.props;\n ActivityLogger.log({\n action: 'subTitleClicked',\n target: form.id\n });\n }\n\n logoutUser() {\n const { location: { origin } } = window;\n handleCustomNavigation(`${origin}/logout.php?backTo=${origin}`, '_self', true);\n }\n\n isFieldVisible(field) {\n if (!isEnterprise()) {\n return true;\n }\n\n const { enterpriseConfigs: { hideFields = [] } } = this.props;\n return hideFields.indexOf(field) === -1;\n }\n\n /**\n * Gain focus on the element with the id given in\n * mainContentLinkDestination prop, if an event is passed\n * prevent its default behaviour.\n */\n skipToMainContent(e) {\n const { mainContentLinkDestination = '' } = this.props;\n e.preventDefault();\n document.getElementById(mainContentLinkDestination.replace('#', ''))?.focus();\n }\n\n renderTitle() {\n const {\n form = {},\n onTitleBlur = f => f,\n onTitleClick = f => f,\n titleClassName = '',\n appMenuComponent = null,\n forceTitleRename = false,\n TitleRenderer = Title,\n title = ''\n } = this.props;\n const { components } = this.appConfig;\n\n return (\n \n
\n \n
\n ) : (\n Complete 5 simple steps to start collecting data through your form!
We’d love to show you how.
',\n emoji: '🎉',\n onConfirm: {\n text: \"Let's go!\",\n waitCbComplete: 500,\n callback: e => {\n walkthroughManager.closePreviewMode(e);\n walkthroughManager.openBuilderTab(e);\n walkthroughManager.closeRightPanel();\n walkthroughManager.closeLeftPanel();\n logFullStoryClick({ step: 'initialModalStep', buttonName: 'letsGo' });\n }\n },\n onDismiss: {\n text: 'No thanks',\n callback: () => { logFullStoryClick({ step: 'initialModalStep', buttonName: 'noThanks' }); }\n }\n },\n // step1\n {\n type: 'popover',\n step: 1,\n name: 'addElementsStep',\n title: 'Add the form elements you need',\n content: 'There’s a form element for every use case. E-signatures, file uploads, payment processors, and other widgets let you collect data in many different ways.',\n reference: '#toogleLeftPanel',\n placement: 'right-start',\n styles: {\n overlay: {\n borderRadius: '0px 36px 36px 0px',\n widthExpand: 16,\n heightExpand: 16\n }\n },\n visuals: {\n posterUrl: 'https://cdn.jotfor.ms/assets/img/v4/walkthrough/formElements/formElements.png',\n webmVideoUrl: 'https://cdn.jotfor.ms/assets/img/v4/walkthrough/formElements/formElements.webm',\n mp4VideoUrl: 'https://cdn.jotfor.ms/assets/img/v4/walkthrough/formElements/formElements.mp4',\n playRate: 1.2,\n height: 282,\n minHeight: 226\n },\n onConfirm: {\n callback: () => {\n logFullStoryClick({ step: 'addElementsStep', buttonName: 'next' });\n }\n }\n },\n // step2\n {\n type: 'popover',\n step: 2,\n name: 'designYourFormStep',\n title: 'Style your form for a more professional look',\n content: 'Change colors and fonts to match your branding. Add custom CSS to make your form blend in with your website or app.',\n reference: '[data-testid=\"panelToggle-designer\"]',\n placement: 'bottom-start',\n styles: {\n overlay: {\n widthExpand: 16,\n heightExpand: 16,\n borderRadius: '40px'\n }\n },\n visuals: {\n posterUrl: 'https://cdn.jotfor.ms/assets/img/v4/walkthrough/formDesigner/formDesigner.png',\n webmVideoUrl: 'https://cdn.jotfor.ms/assets/img/v4/walkthrough/formDesigner/formDesigner.webm',\n mp4VideoUrl: 'https://cdn.jotfor.ms/assets/img/v4/walkthrough/formDesigner/formDesigner.mp4',\n playRate: 1.2,\n height: 296,\n minHeight: 239\n },\n onConfirm: {\n callback: () => {\n logFullStoryClick({ step: 'designYourFormStep', buttonName: 'next' });\n }\n },\n onBack: {\n callback: () => {\n logFullStoryClick({ step: 'designYourFormStep', buttonName: 'back' });\n }\n }\n },\n // step3\n {\n type: 'popover',\n step: 3,\n name: 'adjustSettingsStep',\n title: 'Set up automations',\n content: 'Discover everything you can do with your form. Integrate with your favorite apps, create approval flows, adjust security settings, and more.',\n reference: '#siteNav_id_settings',\n placement: 'bottom',\n styles: {\n overlay: {\n borderRadius: '8px'\n }\n },\n visuals: {\n posterUrl: 'https://cdn.jotfor.ms/assets/img/v4/walkthrough/formSettings/formSettings.png',\n webmVideoUrl: 'https://cdn.jotfor.ms/assets/img/v4/walkthrough/formSettings/formSettings.webm',\n mp4VideoUrl: 'https://cdn.jotfor.ms/assets/img/v4/walkthrough/formSettings/formSettings.mp4',\n height: 296,\n minHeight: 239\n },\n onConfirm: {\n callback: () => {\n logFullStoryClick({ step: 'adjustSettingsStep', buttonName: 'next' });\n }\n },\n onBack: {\n callback: e => {\n walkthroughManager.closePreviewMode(e);\n logFullStoryClick({ step: 'adjustSettingsStep', buttonName: 'back' });\n }\n }\n },\n // step4\n {\n type: 'popover',\n step: 4,\n name: 'previewYourFormStep',\n title: 'Test your form',\n content: 'See how the user experience will look on different devices — such as mobile, tablet, and desktop.',\n reference: '#js-previewSwitch',\n placement: 'bottom-end',\n styles: {\n overlay: {\n borderRadius: '8px'\n }\n },\n visuals: {\n posterUrl: 'https://cdn.jotfor.ms/assets/img/v4/walkthrough/formPreview/formPreview.png',\n webmVideoUrl: 'https://cdn.jotfor.ms/assets/img/v4/walkthrough/formPreview/formPreview.webm',\n mp4VideoUrl: 'https://cdn.jotfor.ms/assets/img/v4/walkthrough/formPreview/formPreview.mp4',\n playRate: 1.2,\n height: 291,\n minHeight: 235\n },\n onConfirm: {\n callback: () => {\n logFullStoryClick({ step: 'previewYourFormStep', buttonName: 'next' });\n }\n },\n onBack: {\n callback: () => {\n logFullStoryClick({ step: 'previewYourFormStep', buttonName: 'back' });\n }\n }\n },\n // step5\n {\n type: 'popover',\n step: 5,\n name: 'publishYourFormStep',\n title: 'Share your form with the world',\n content: 'Share your form with a link, email it to users, or embed your form into your website easily.',\n reference: '#siteNav_id_publish',\n placement: 'bottom',\n styles: {\n overlay: {\n borderRadius: '8px'\n }\n },\n visuals: {\n posterUrl: 'https://cdn.jotfor.ms/assets/img/v4/walkthrough/formPublish/formPublish__nb.png',\n webmVideoUrl: 'https://cdn.jotfor.ms/assets/img/v4/walkthrough/formPublish/formPublish__nb.webm',\n mp4VideoUrl: 'https://cdn.jotfor.ms/assets/img/v4/walkthrough/formPublish/formPublish__nb.mp4',\n playRate: 1.2,\n height: 296,\n minHeight: 239\n },\n onConfirm: {\n callback: () => {\n logFullStoryClick({ step: 'publishYourFormStep', buttonName: 'next' });\n }\n },\n onBack: {\n callback: e => {\n walkthroughManager.closePreviewMode(e);\n logFullStoryClick({ step: 'publishYourFormStep', buttonName: 'back' });\n }\n }\n },\n // step6\n // {\n // type: 'popover',\n // step: 6,\n // name: 'viewYourSubmissions',\n // title: 'View your submissions',\n // content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dignissim metus nulla, a imperdiet risus rutrum non. Proin porta augue ac finibus malesuada.',\n // reference: '.jNewHeader-buttonNew.appSelectorTrigger-button',\n // placement: 'bottom',\n // styles: {\n // overlay: {\n // top: 12,\n // heightExpand: -25,\n // borderRadius: '8px'\n // },\n // popover: {\n // offset: [226, -16],\n // triangleOffset: [0, -164]\n // }\n // },\n // visuals: {\n // posterUrl: 'https://cdn.jotfor.ms/assets/img/v4/walkthrough/formPublish/formPublish__nb.png',\n // webmVideoUrl: 'https://cdn.jotfor.ms/assets/img/v4/walkthrough/formPublish/formPublish__nb.webm',\n // mp4VideoUrl: 'https://cdn.jotfor.ms/assets/img/v4/walkthrough/formPublish/formPublish__nb.mp4',\n // playRate: 1.2,\n // height: 296,\n // minHeight: 239\n // },\n // onConfirm: {\n // callback: () => {\n // console.log('open app navigation');\n // logFullStoryClick({ step: 'viewYourSubmissions', buttonName: 'next' });\n // }\n // },\n // onBack: {\n // callback: (e) => {\n // walkthroughManager.closePreviewMode(e);\n // logFullStoryClick({ step: 'viewYourSubmissions', buttonName: 'back' });\n // }\n // }\n // },\n // finalPopover\n {\n type: 'finalPopover',\n step: 6,\n name: 'finalStep',\n title: 'Nice work, #{username}',\n // eslint-disable-next-line max-len\n content: 'If you need additional resources, check out our user guides or video tutorials. Just click on the Help menu at the top right.',\n reference: '.helpButton',\n placement: 'bottom-end',\n contentLinks: {\n help: '/help',\n videoTutorial: 'https://www.youtube.com/watch?v=XXwv6n61xEg&list=PLPsiQt6a8YQlfNE57uWA7wGVjiZrbwbcy&t=71s'\n },\n visuals: {\n posterUrl: 'https://cdn.jotfor.ms/assets/img/v4/walkthrough/finalStep/finalStep@2x.png',\n height: 251,\n minHeight: 203\n },\n styles: {\n overlay: {\n borderRadius: '18px'\n }\n },\n emoji: '🎉',\n onConfirm: {\n callback: () => {\n logFullStoryClick({ step: 'finalStep', buttonName: 'finishTour' });\n }\n },\n onContinue: {\n waitCbComplete: 500,\n callback: () => {\n logFullStoryClick({ step: 'finalStep', buttonName: 'restart' });\n }\n }\n },\n // ending step\n {\n type: 'endingPopover',\n step: 7,\n name: 'endingStep',\n title: '',\n content: 'In case you need to visit it later, you can restart the onboarding tour under the Help menu.',\n reference: '.helpButton',\n placement: 'bottom-end',\n onLastStep: {\n waitCbComplete: 150,\n callback: stepData => {\n if (stepData) {\n logFullStoryClick({ step: `${stepData.name}`, buttonName: 'endTour' });\n }\n }\n }\n }\n];\n\nexport default steps;\n","/* eslint-disable max-len */\nimport Styled from 'styled-components';\n\nconst minScreenResolutionControl = 'screen and (max-height: 599px), (max-width: 959px)';\nconst fontFamily = '\"Circular\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", roboto, oxygen-sans, ubuntu, cantarell, \"Helvetica Neue\", sans-serif';\n\nexport const ScWrapper = Styled.div`\n\n@font-face {\n font-family:\"Circular\";\n src: local(\"Circular Regular\"), local(\"Circular-Regular\"), url(\"https://cdn.jotfor.ms/fonts/circular/fonts/Circular-Book.woff2\") format(\"woff2\"), url(\"https://cdn.jotfor.ms/fonts/circular/fonts/Circular-Book.woff\") format(\"woff\");\n font-display:swap;\n font-style:normal;\n font-weight:400;\n }\n @font-face {\n font-family:\"Circular\";\n src: local(\"Circular Medium\"), local(\"Circular-Medium\"), url(\"https://cdn.jotfor.ms/fonts/circular/fonts/Circular-Medium.woff2\") format(\"woff2\"), url(\"https://cdn.jotfor.ms/fonts/circular/fonts/Circular-Medium.woff\") format(\"woff\");\n font-display:swap;\n font-style:normal;\n font-weight:500;\n }\n @font-face {\n font-family:\"Circular\";\n src: local(\"Circular Bold\"), local(\"Circular-Bold\"), url(\"https://cdn.jotfor.ms/fonts/circular/fonts/Circular-Bold.woff2\") format(\"woff2\"), url(\"https://cdn.jotfor.ms/fonts/circular/fonts/Circular-Bold.woff\") format(\"woff\");\n font-display:swap;\n font-style:normal;\n font-weight:700;\n }\n\nfont-family:${fontFamily};\n\n@media ${minScreenResolutionControl}{\n display: none;\n}\n\nbutton{\n font-family:${fontFamily};\n}\n\n`;\n","/* eslint-disable max-len */\nimport Styled, { keyframes } from 'styled-components';\n\nconst slideFromBottom = keyframes`\n 0% { margin-bottom: -64px }\n 100% { margin-bottom: 0 }\n`;\n\nconst completedColor = '#01BD6F';\nconst inProgressColor = '#5C5CFF';\n\nconst onMediumDesktop = 'screen and (max-width: 1400px)';\nconst onSmallDesktop = 'screen and (max-width: 1200px)';\nconst heightResolutionControl = 'screen and (max-height: 800px)';\n\nexport const ScFooterOutline = Styled.div`\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n background: #ffffff;\n z-index: 1020;\n box-shadow: 0px 0px 24px 0px rgba(43, 50, 69, 0.25);\n display: flex;\n animation-name: ${slideFromBottom};\n animation-duration: .25s;\n animation-fill-mode: forwards;\n animation-timing-function: ease-in;\n`;\n\nexport const ScStepsOutline = Styled.div`\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n align-items: stretch;\n`;\n\nexport const ScFooterButton = Styled.button`\n display: flex;\n align-self: auto;\n align-items: center;\n justify-content: center;\n text-align: left;\n height: 64px;\n font-weight: 400;\n font-style: normal;\n font-size: 12px;\n line-height: 16px;\n border: none;\n background: transparent;\n position: relative;\n padding: 8px 40px;\n cursor: pointer;\n color: #2B3245;\n letter-spacing: 0.35px;\n transition: color .2s, background-color .2s;\n margin: 0;\n text-align: center;\n\n @media ${onMediumDesktop} {\n padding: 8px 30px;\n }\n\n @media ${heightResolutionControl}, ${onSmallDesktop} {\n padding: 8px 16px;\n height: 48px;\n }\n\n &:after{\n content:\"\";\n display: block;\n width: 0;\n height: 0;\n border-radius: 50%;\n position: absolute;\n left: 24px;\n top: 32px;\n transition: all .2s;\n }\n\n &:hover{\n background-color: #F8FBFF\n // color: #4644ff;\n // &>div{\n // background-color: #9392ff;\n // }\n }\n\n &>div{\n &:before{\n transition: width 1s;\n width: 0%;\n }\n &:after{\n transition: width 1s;\n width: 0%;\n }\n }\n\n ${({ status }) => {\n if (status === 'notStarted') {\n return `\n `;\n } if (status === 'inProgress') {\n return `\n color: #2B3245;\n font-weight: 700;\n letter-spacing: 0.05px;\n \n &>div{\n &:before{\n background-color: ${inProgressColor};\n width: 100%;\n }\n &:after{\n background-color: ${inProgressColor};\n width: 100%;\n right: inherit;\n left: 0;\n }\n }\n `;\n } if (status === 'completed') {\n return `\n font-weight: 700;\n letter-spacing: 0.05px;\n color: #26A65B;\n &::after{\n width: 16px;\n height: 16px;\n left: 16px;\n top: 24px;\n background: ${completedColor};\n border-color: ${completedColor};\n background-image: url(\"data:image/svg+xml,%3Csvg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 3L3 5L7 1' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A\");\n background-repeat: no-repeat;\n background-position: center;\n\n html[dir=\"rtl\"] & {\n left: inherit;\n right: 16px;\n }\n\n @media ${onMediumDesktop} {\n left: 10px;\n\n html[dir=\"rtl\"] & {\n left: inherit;\n right: 10px;\n }\n }\n\n @media ${heightResolutionControl}, ${onSmallDesktop} {\n left: 2px;\n top: 17px;\n width: 12px;\n height: 12px;\n background-size: 6px;\n\n html[dir=\"rtl\"] & {\n left: inherit;\n right: 2px;\n }\n }\n\n }\n\n &>div{\n background: ${completedColor};\n &:before{\n background-color: ${completedColor};\n width: 0%;\n }\n }\n\n &:hover{\n color: #26A65B;\n &>div{\n background-color: ${completedColor};\n }\n }\n\n `;\n }\n }}\n`;\n\nexport const ScFooterButtonLoader = Styled.div`\n position: absolute;\n left: 0;\n right: 0;\n bottom: 0;\n height: 8px;\n background-color: #C3CAD8;\n transition: background .2s;\n\n &:before{\n content: \"\";\n display: block;\n width: 0%;\n height: 8px;\n\n ${({ status }) => {\n if (status === 'inProgress') {\n return `\n background-color: ${inProgressColor};\n `;\n }\n }}\n\n }\n\n &:after{\n content: \"\";\n display: block;\n width: 0%;\n height: 8px;\n position: absolute;\n right: 0;\n bottom: 0;\n background: ${inProgressColor};\n transition: all .2s;\n\n html[dir=\"rtl\"] & {\n right: inherit;\n left: 0;\n }\n\n }\n\n`;\n\nexport const ScFooterButtonCurrentIndicator = Styled.div`\n display: block;\n width: 100%;\n height: 8px;\n background-color: ${inProgressColor}!important;\n position: absolute;\n bottom: 0;\n`;\n\nexport const ScFooterDivider = Styled.div`\n // width: 1px;\n // background-color: #E6EBF2;\n // display: flex;\n // margin: 8px 8px 8px 16px;\n // height: 32px;\n\n // @media ${onSmallDesktop}{\n // margin-left: 8px;\n // }\n`;\n\nexport const ScFooterClose = Styled.button`\n border:none;\n font-size: 12px;\n white-space: nowrap;\n line-height: 16px;\n padding: 4px 16px;\n cursor: pointer;\n background: transparent;\n color: #57647E;\n margin-right: auto;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all .2s;\n min-width: 170px;\n position: relative;\n\n html[dir=\"rtl\"] & {\n margin-right: 0;\n margin-left: auto;\n }\n\n @media ${onMediumDesktop}{\n min-width: 120px;\n }\n \n @media ${heightResolutionControl}, ${onSmallDesktop}{\n min-width: 100px;\n }\n\n &:after{\n content: \"\";\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 8px;\n background-color: #E6EBF2;\n transition: all .2s;\n }\n\n &:hover{\n background: #F8FBFF;\n }\n\n ${({ switchCloseView }) => {\n if (switchCloseView === true) {\n return `\n background-color: rgba(85, 216, 139, 0.1);\n font-weight: 700;\n\n &:after{\n background-color: #55D88B\n }\n\n &::before{\n display: none!important;\n }\n\n &:hover{\n background-color: #01BD6F;\n color: #ffffff;\n }\n `;\n }\n }}\n\n &:before{\n content: \"\";\n display: inline-flex;\n flex-shrink: 0;\n width: 9px;\n height: 9px;\n margin-top: -1px;\n margin-right: 8px;\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10px' height='10px' viewBox='0 0 10 10' style='enable-background:new 0 0 10 10;' xml:space='preserve'%3E%3Cpath fill='%238894AB' d='M8.5,9.5C8.2,9.5,8,9.4,7.8,9.2L5,6.4L2.2,9.2c-0.4,0.4-1,0.4-1.4,0s-0.4-1,0-1.4L3.6,5L0.8,2.2 c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0L5,3.6l2.8-2.8c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4L6.4,5l2.8,2.8c0.4,0.4,0.4,1,0,1.4 C9,9.4,8.8,9.5,8.5,9.5z'/%3E%3C/svg%3E%0A\");\n background-position: center left;\n background-size: 9px;\n background-repeat: no-repeat;\n\n html[dir=\"rtl\"] & {\n margin-right: 0;\n margin-left: 8px;\n }\n }\n`;\n\nexport const ScFooterContinue = Styled.button`\n height: 48px;\n font-style: normal;\n font-size: 16px;\n line-height: 32px;\n border: none;\n cursor: pointer;\n color: #ffffff;\n background: ${inProgressColor};\n border-radius: 4px;\n margin-left: 8px;\n margin-top: 8px;\n margin-right: 8px;\n padding: 8px 24px;\n transition: all .2s;\n\n @media ${heightResolutionControl}, ${onSmallDesktop} {\n height: 36px;\n padding: 2px 16px;\n font-size: 12px;\n margin-top: 6px;\n margin-right: 6px;\n }\n\n &:hover{\n background-color: #3F3FCA;\n }\n\n ${({ continueButtonVisible }) => {\n if (continueButtonVisible === true) {\n return `\n opacity: 1;\n `;\n } if (continueButtonVisible === false) {\n return `\n opacity: 0;\n pointer-events: none;\n `;\n }\n }}\n`;\n","/* eslint-disable max-len */\nimport Styled, { keyframes } from 'styled-components';\n\nconst onSmallDesktop = 'screen and (max-width: 1200px)';\nconst heightResolutionControl = 'screen and (max-height: 800px)';\n\nconst animationHide = keyframes`\n 0% {\n opacity: 0;\n width: 100px;\n height: 80px;\n transform: translate(-300px, -300px);\n }\n 10% {\n opacity: 1;\n width: 380px;\n height: 100%;\n transform: translate(0%, 0%);\n }\n 95% { opacity: 1 }\n 100% { opacity: 0 }\n`;\n\nconst animationHideSmallDesktop = keyframes`\n 0% {\n opacity: 0;\n width: 100px;\n height: 80px;\n transform: translate(-300px, -300px);\n }\n 10% {\n opacity: 1;\n width: 320px;\n height: 100%;\n transform: translate(0%, 0%);\n }\n 95% { opacity: 1 }\n 100% { opacity: 0 }\n`;\n\nexport const ScContinuePopoverOutline = Styled.div`\n position: relative;\n padding: 16px 8px;\n background: #ffffff;\n border-radius: 8px;\n box-shadow: 0px 0px 24px 0px rgba(43, 50, 69, 0.25);\n width: 380px;\n margin-bottom: 16px;\n animation-name: ${animationHide};\n animation-duration: 8s;\n animation-delay: 0s;\n animation-fill-mode: forwards;\n animation-timing-function: ease;\n ${({ alignleft }) => (alignleft ? 'margin-left: -30px;' : 'margin-left: 12px;')};\n\n html[dir=\"rtl\"] & {\n margin-left: 0;\n ${({ alignleft }) => (alignleft ? 'margin-right: -30px;' : 'margin-right: 12px;')};\n }\n\n @media ${heightResolutionControl}, ${onSmallDesktop} {\n ${({ alignleft }) => (alignleft ? 'margin-left: -30px;' : 'margin-left: 70px;')};\n padding: 8px;\n width: 320px;\n animation-name: ${animationHideSmallDesktop};\n\n html[dir=\"rtl\"] & {\n margin-left: 0;\n ${({ alignleft }) => (alignleft ? 'margin-right: -30px;' : 'margin-right: 70px;')};\n }\n }\n\n ${({ type }) => {\n if (type === 'primary') {\n return `\n background: #493cff;\n color: #ffffff;\n margin-bottom: 0;\n `;\n }\n }\n}\n`;\n\nexport const ScContinuePopoverTriangle = Styled.div` \n display: block;\n width: 30px;\n height: 8px;\n position: absolute;\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30px' height='9px' viewBox='0 0 30.8 8'%3E%3Cpath fill='%23ffffff' d='M17.7,0.9c-1.4-1-3.3-1-4.7,0L7,5.2C5,6.7,2.5,7.6,0,8h30.8c-2.5-0.4-5-1.3-7.1-2.8L17.7,0.9z'/%3E%3C/svg%3E\");\n bottom: -8px;\n ${({ alignleft }) => (alignleft ? 'left: 105px;' : 'left: 290px;')};\n transform: rotate( 180deg);\n\n html[dir=\"rtl\"] & {\n left: inherit;\n ${({ alignleft }) => (alignleft ? 'right: 105px;' : 'right: 290px;')};\n }\n\n @media ${heightResolutionControl}, ${onSmallDesktop}{\n ${({ alignleft }) => (alignleft ? 'left: 96px;' : 'left: 264px;')};\n\n html[dir=\"rtl\"] & {\n left: inherit;\n ${({ alignleft }) => (alignleft ? 'right: 96px;' : 'right: 264px;')};\n }\n }\n\n ${({ type }) => {\n if (type === 'primary') {\n return `\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30px' height='9px' viewBox='0 0 30.8 8'%3E%3Cpath fill='%23493cff' d='M17.7,0.9c-1.4-1-3.3-1-4.7,0L7,5.2C5,6.7,2.5,7.6,0,8h30.8c-2.5-0.4-5-1.3-7.1-2.8L17.7,0.9z'/%3E%3C/svg%3E\");`;\n }\n }\n}\n\n`;\n\nconst animationOpacity = keyframes`\n 0% { opacity: 0}\n 100% { opacity: 1 }\n`;\n\nexport const ScContinuePopoverContent = Styled.div`\n padding: 16px;\n font-size: 16px;\n line-height: 24px;\n font-weight: 700;\n opacity: 0;\n animation-name: ${animationOpacity};\n animation-duration: .25s;\n animation-delay: .75s;\n animation-fill-mode: forwards;\n animation-timing-function: ease-in;\n\n @media ${heightResolutionControl}, ${onSmallDesktop}{\n padding: 8px;\n font-size: 14px;\n }\n`;\n","import React, { useRef } from 'react';\nimport { shape, bool } from 'prop-types';\nimport { Popover } from '@jotforminc/uikit';\nimport { t } from '@jotforminc/translation';\n\nimport { ScContinuePopoverOutline, ScContinuePopoverTriangle, ScContinuePopoverContent } from './sc/scContinuePopover';\n\nconst ContinuePopover = ({ targetRef, visible }) => {\n const popoverRef = useRef();\n\n const popoverStyles = {\n zIndex: '1030',\n width: '400px',\n paddingRight: '12px',\n pointerEvents: 'none'\n };\n\n const popoverOptions = {\n placement: 'top'\n };\n\n if (!visible) return null;\n\n return (\n\n {overlay && currentBoundingRect\n && (\n \n { renderChildren() }\n \n
\n );\n});\n\nPopover.propTypes = {\n data: shape().isRequired,\n children: node.isRequired,\n targetElSelector: string.isRequired,\n overlay: bool,\n isInformative: bool\n};\n\nPopover.defaultProps = {\n overlay: true,\n isInformative: false\n};\n\nexport default Popover;\n","/* eslint-disable max-len */\nimport Styled, { keyframes } from 'styled-components';\n\nconst heightResolutionControl = 'screen and (max-height: 800px)';\nconst opacityContentDelay = '.4s';\nconst opacityAnimation = keyframes`\n 0% { opacity: 0 }\n 100% { opacity: 1 }\n`;\n\nexport const ScVisualOutline = Styled.div`\n display: flex;\n width: 100%;\n margin-bottom: 16px;\n\n ${({ height }) => {\n if (height > 0) {\n return `\n min-height: ${height}px;\n `;\n }\n }}\n\n transition: all .2s;\n\n @media ${heightResolutionControl}{\n margin-bottom: 0;\n ${({ minHeight }) => {\n if (minHeight > 0) {\n return `\n min-height: ${minHeight}px;\n `;\n }\n }}\n }\n \n &:after{\n content: \"\";\n clear: both;\n display: table;\n }\n\n &>video,\n &>img {\n width: 100%;\n height: 100%;\n opacity: 0;\n animation-delay: ${opacityContentDelay};\n animation-name: ${opacityAnimation};\n animation-duration: .5s;\n animation-fill-mode: forwards;\n animation-timing-function: ease-in;\n pointer-events: none;\n }\n`;\n","import React, { useRef, useEffect } from 'react';\nimport { string, number } from 'prop-types';\n\nconst Video = ({\n webmVideoUrl,\n mp4VideoUrl,\n posterUrl,\n playRate\n}) => {\n const videoRef = useRef();\n useEffect(() => {\n videoRef.current.playbackRate = playRate;\n }, [playRate]);\n\n return (\n <>\n {children}
);\n\nDialogRenderer.propTypes = { children: node };\nDialogRenderer.defaultProps = { children: null };\n\nexport const ContentRenderer = ({ children, ...props }) => (\n \n
\n);\n\nContentRenderer.propTypes = { children: node };\nContentRenderer.defaultProps = { children: null };\n\nexport const HeaderRenderer = ({ onCloseClick, ...props }) => (\n \n {children}\n
\n \n
\n );\n};\n\nAside.propTypes = {\n onContactSalesClick: func.isRequired,\n onLearnMoreClick: func.isRequired\n};\n\nexport default Aside;\n","import React, { useEffect, useRef, useState } from 'react';\nimport { Modal } from '@jotforminc/uikit';\nimport {\n func, bool, object\n} from 'prop-types';\nimport { handleCustomNavigation } from '@jotforminc/utils';\nimport { t } from '@jotforminc/translation';\nimport {\n ASSET_IDENTIFIER, ALL_TEXTS, CTA_URLS, userPropType, LEAD_FORM_MAP, GA_FORM_TRACKING_ITEMS, GA_AD_FORM_TRACKING_ITEMS,\n GA_SUFFIXES, createGaAttributes, gaDataLayerPushClose, setEPActions, mapCallbacksToGaTrackingItems, hasAdwordsModeOn,\n PrefilledLeadFormAside\n} from '@jotforminc/ep-utils';\nimport { ContentRenderer, DialogRenderer, HeaderRenderer } from './Renderers';\nimport Aside from './Aside';\nimport '../../../../styles/scheduleZoomModal.scss';\n\nconst ScheduleZoomModal = ({\n user,\n modalProps,\n logAbTestAction,\n onClose\n}) => {\n const { AB_TEST: { SCHEDULE_ZOOM_MODAL: target } } = ASSET_IDENTIFIER;\n const { SCHEDULE_ZOOM_MODAL: { LEARN_MORE_URL } } = CTA_URLS;\n\n const uikitModalRef = useRef(null);\n const [isFormVisible, setIsFormVisible] = useState(false);\n\n const gaAttributes = createGaAttributes(target);\n const gaAttributesClose = createGaAttributes(target, GA_SUFFIXES.CLOSE);\n\n const isAdForm = hasAdwordsModeOn();\n let { [target]: gaFormTrackingItems } = isAdForm ? GA_AD_FORM_TRACKING_ITEMS : GA_FORM_TRACKING_ITEMS;\n\n useEffect(() => {\n const actionData = { action: 'seen', target };\n\n logAbTestAction(actionData);\n setEPActions({ asset: target, ...actionData });\n }, []);\n\n const handleCloseClick = () => {\n const actionData = { action: 'click', target: 'closeButton' };\n\n logAbTestAction(actionData);\n setEPActions({ asset: target, target: 'closeButton', action: 'click' });\n\n uikitModalRef.current?.hide();\n };\n\n const handleClose = () => {\n gaDataLayerPushClose(gaAttributes);\n\n const actionData = { action: 'close', target };\n logAbTestAction(actionData);\n setEPActions({ asset: target, ...actionData });\n\n onClose();\n };\n\n const handleUpgradeToEnterpriseClick = () => {\n const actionData = { target: 'upgradeToEnterprise', action: 'click' };\n\n logAbTestAction(actionData);\n setEPActions({ asset: target, ...actionData });\n\n setIsFormVisible(true);\n };\n\n const handleLearnMoreClick = () => {\n const actionData = { target: 'learnMoreButton', action: 'click' };\n\n logAbTestAction(actionData);\n setEPActions({ asset: target, target: 'learnMoreButton', action: 'click' });\n\n handleCustomNavigation(`${window.location.origin}${LEARN_MORE_URL}`);\n };\n\n const handleContactNowClick = () => {\n const actionData = { target: 'contactNowButton', action: 'click' };\n\n logAbTestAction(actionData);\n setEPActions({ asset: target, ...actionData });\n };\n\n const handleFormSubmit = () => {\n const actionData = { target, action: 'formSubmit' };\n\n logAbTestAction(actionData);\n setEPActions({ asset: target, ...actionData });\n };\n\n gaFormTrackingItems = mapCallbacksToGaTrackingItems(gaFormTrackingItems, [handleContactNowClick]);\n\n return (\n \n
\n {t(ALL_TEXTS.JOTFORM_ENTERPRISE)}
\n\n {translationRenderer(ALL_TEXTS.APPLY_FOR_DEDICATED_ZOOM_SUPPORT)({\n renderer1: str => {str}\n })}\n
\n\n {/* contact sales */}\n \n {t(ALL_TEXTS.UPGRADE_TO_ENTERPRISE)}\n \n {/* learn more */}\n \n {t(ALL_TEXTS.LEARN_MORE_ABOUT_JOTFORM_ENTERPRISE)}\n \n
\n \n
\n );\n};\n\nScheduleZoomModal.propTypes = {\n user: userPropType.isRequired,\n modalProps: object,\n defaultVisible: bool,\n onClose: func,\n logAbTestAction: func\n};\n\nScheduleZoomModal.defaultProps = {\n modalProps: {},\n defaultVisible: true,\n onClose: f => f,\n logAbTestAction: f => f\n};\n\nexport default ScheduleZoomModal;\n","import React, { useEffect } from 'react';\nimport { t } from '@jotforminc/translation';\nimport { func } from 'prop-types';\nimport { IconRocketSquareBrokenFilled, IconZoomCircleFilled } from '@jotforminc/svg-icons';\nimport {\n GA_SUFFIXES, createGaAttributes, renderModal,\n ALL_TEXTS, ASSET_IDENTIFIER, userPropType, setEPActions\n} from '@jotforminc/ep-utils';\nimport '../../../styles/scheduleZoomBanner.scss';\nimport { ScheduleZoomModal } from '../../Modals';\n\nconst ScheduleZoomBanner = ({ user, logAbTestAction }) => {\n const { AB_TEST: { SCHEDULE_ZOOM_BANNER: target } } = ASSET_IDENTIFIER;\n\n const gaAttributes = createGaAttributes(target);\n const gaAttributesAn = createGaAttributes(target, GA_SUFFIXES.SCHEDULE_ZOOM_CALL);\n\n useEffect(() => {\n const actionData = { action: 'seen', target };\n\n logAbTestAction(actionData);\n setEPActions({ asset: target, ...actionData });\n }, []);\n\n const handleScheduleAZoomCallClick = () => {\n logAbTestAction({ action: 'click', target: target });\n renderModal({\n user,\n Modal: ScheduleZoomModal,\n logAbTestAction\n });\n };\n\n return (\n \n {isFormVisible ? (\n
\n \n \n \n {t(ALL_TEXTS.CONTACT_ENTERPRISE_SALES_REPRESENTATIVE)}\n \n
\n ) : (\n <>\n \n {/* aside */}\n
\n \n 
\n 
\n
\n \n )}\n\n 
\n 
\n \n \n \n
\n );\n};\n\nScheduleZoomBanner.propTypes = {\n user: userPropType.isRequired,\n logAbTestAction: func\n};\n\nScheduleZoomBanner.defaultProps = {\n logAbTestAction: f => f\n};\n\nexport default ScheduleZoomBanner;\n","import React from 'react';\nimport { func, node } from 'prop-types';\nimport { t } from '@jotforminc/translation';\nimport { ALL_TEXTS } from '@jotforminc/ep-utils';\nimport CloseIcon from '../../../../assets/svg/close_revised.svg';\n\nexport const DialogRenderer = ({ children }) => ({children}
);\n\nDialogRenderer.propTypes = { children: node };\nDialogRenderer.defaultProps = { children: null };\n\nexport const ContentRenderer = ({ children, ...props }) => (\n \n
\n);\n\nContentRenderer.propTypes = { children: node };\nContentRenderer.defaultProps = { children: null };\n\nexport const HeaderRenderer = ({ onCloseClick, ...props }) => (\n \n {children}\n
\n \n
\n \n );\n});\n\nSupportModal.propTypes = {\n title: string.isRequired,\n descriptionText: string.isRequired,\n gaAttributes: gaAttributesPropType.isRequired,\n gaAttributesClose: gaAttributesPropType.isRequired,\n user: userPropType.isRequired,\n formUiModifier: string.isRequired,\n gaFormTrackingItems: gaFormTrackingItemsPropType.isRequired,\n modalProps: object,\n onClose: func,\n onCloseClick: func,\n logAbTestAction: func,\n onFormSubmit: func,\n isAdForm: bool\n};\n\nSupportModal.defaultProps = {\n modalProps: {},\n onClose: f => f,\n onCloseClick: f => f,\n logAbTestAction: f => f,\n onFormSubmit: f => f,\n isAdForm: false\n};\n\nexport default SupportModal;\n","import React, { useEffect } from 'react';\nimport { func } from 'prop-types';\nimport {\n ASSET_IDENTIFIER, ALL_TEXTS,\n GA_FORM_TRACKING_ITEMS, userPropType, GA_AD_FORM_TRACKING_ITEMS,\n GA_SUFFIXES, createGaAttributes, gaDataLayerPushClose, hasAdwordsModeOn, setEPActions, mapCallbacksToGaTrackingItems\n} from '@jotforminc/ep-utils';\nimport SupportModal from './SupportModal';\n\n// A/B Test: formBuilderHelpMenuDedicatedSupportII\nconst HelpDedicatedSupportModal = (({\n user,\n onCloseClick,\n logAbTestAction,\n onClose\n}) => {\n const { PRODUCT: { HELP_DEDICATED_SUPPORT_MODAL } } = ASSET_IDENTIFIER;\n const target = HELP_DEDICATED_SUPPORT_MODAL;\n\n const isAdForm = hasAdwordsModeOn();\n let { [target]: gaFormTrackingItems } = isAdForm ? GA_AD_FORM_TRACKING_ITEMS : GA_FORM_TRACKING_ITEMS;\n\n const gaAttributes = createGaAttributes(target);\n const gaAttributesClose = createGaAttributes(target, GA_SUFFIXES.CLOSE);\n\n useEffect(() => {\n const actionData = { action: 'seen', target };\n\n logAbTestAction(actionData);\n setEPActions({ asset: target, ...actionData });\n }, []);\n\n const handleCloseClick = () => {\n const actionData = { action: 'click', target: 'closeButton' };\n\n logAbTestAction(actionData);\n setEPActions({ asset: target, target: 'closeButton', action: 'click' });\n\n onCloseClick();\n };\n\n const handleClose = () => {\n gaDataLayerPushClose(gaAttributes);\n\n const actionData = { action: 'close', target };\n logAbTestAction(actionData);\n setEPActions({ asset: target, ...actionData });\n\n onClose();\n };\n\n const handleContactNowClick = () => {\n const actionData = { target: 'contactNowButton', action: 'click' };\n\n logAbTestAction(actionData);\n setEPActions({ asset: target, ...actionData });\n };\n\n gaFormTrackingItems = mapCallbacksToGaTrackingItems(gaFormTrackingItems, [handleContactNowClick]);\n\n return (\n \n \n 
\n
\n {/* aside */}\n \n {translationRenderer(descriptionText)({\n renderer1: nowrapText => (\n \n {nowrapText}\n \n )\n })}\n
\n\n \n
\n \n \n {t(ALL_TEXTS.CONTACT_SALES)}\n \n
\n );\n};\n\nDedicatedSupportBanner.propTypes = {\n user: userPropType.isRequired,\n logAbTestAction: func,\n isFirstOpen: bool\n};\n\nDedicatedSupportBanner.defaultProps = {\n isFirstOpen: false,\n logAbTestAction: f => f\n};\n\nexport default DedicatedSupportBanner;\n","import React, { useEffect, useRef, useState } from 'react';\nimport { bool } from 'prop-types';\nimport { ABTestManager } from '@jotforminc/abtest-manager';\nimport { userPropType } from '@jotforminc/ep-utils';\nimport '../../styles/loader.scss';\nimport { DedicatedSupportBanner, ScheduleZoomBanner } from '../Banners';\n\n// A/B Test: formBuilderHelpMenuDedicatedSupportIII\nconst DedicatedSupportAbTester = ({\n user,\n isFirstOpen\n}) => {\n const [isLoading, setIsLoading] = useState(true);\n const [isTestVariant, setIsTestVariant] = useState(null);\n const logAbTestAction = useRef(f => f);\n\n useEffect(() => {\n (async () => {\n const abTestManager = new ABTestManager({\n isTestEnabled: true,\n testName: 'formBuilderHelpMenuDedicatedSupportIII',\n controlVariantCode: '28202',\n testVariantCode: '28212',\n urlParam: 'fbhmdsiii',\n user,\n cacheVariantCodeAtLocalStorage: true\n });\n\n logAbTestAction.current = abTestManager.registerABTestAction;\n\n try {\n const _isTestVariant = await abTestManager.isTestVariant();\n setIsTestVariant(_isTestVariant);\n } finally {\n setIsLoading(false);\n }\n })();\n }, [user]);\n\n if (isLoading) return null;\n\n return isTestVariant ? \n
\n \n {t(ALL_TEXTS.DEDICATED_SUPPORT)}\n
\n\n {t(ALL_TEXTS.DEDICATED_SUPPORT_CONTENT)}\n
\n {/* contact sales */}\n\n
\n \n
\n );\n }\n\n const translatedNoResultText = t('No search results for \"#{searchTerm}\"');\n const dynamicNoResultText = translatedNoResultText.replace('#{searchTerm}', searchTerm);\n\n if (count === 0) {\n return (\n <>\n {t('Search Results')}\n {dynamicNoResultText}\n \n \n \n \n
\n - \n {popularArticleItems.map(item => (\n
\n
\n );\n};\n\nShortcutModal.propTypes = {\n onClose: PropTypes.func,\n shortcuts: PropTypes.arrayOf(PropTypes.shape({}))\n};\n\nShortcutModal.defaultProps = {\n onClose: f => f,\n shortcuts: []\n};\n\nexport default ShortcutModal;\n","import React, { useRef, useState } from 'react';\nimport {\n bool, func, shape, arrayOf, object\n} from 'prop-types';\nimport { t } from '@jotforminc/translation';\nimport { IconQuestionCircleFilled } from '@jotforminc/svg-icons';\nimport { Button } from '@jotforminc/magnet';\nimport { formBuilderWalkthroughManager as walkthroughManager } from '@jotforminc/product-walkthrough';\nimport { ActionLoggerContext } from '../context';\nimport { useFirstOpen, useWalkthrough } from '../hooks';\nimport HelpMenu from './HelpMenu';\nimport { staticMenuItems as staticMenuItemsConstant, shortcuts as shortcutsConstant } from '../constants';\nimport ShortcutModal from './ShortcutModal';\nimport '../styles/styles.scss';\n\nconst Help = ({\n user,\n newVersion,\n openHelpMenu,\n isPreviewModOn,\n isHelpMenuOpen,\n formBuilderActions,\n openCollaborationPopup,\n isCollaborationPopupOpen,\n logJotformAction,\n staticMenuItems,\n shortcuts,\n buttonProps,\n showDedicatedSupportBanner\n}) => {\n const [isshortcutModalShow, setIsShortcutModalShow] = useState(false);\n const isFirstOpen = useFirstOpen();\n\n const isHelpMenuSeenRef = useRef(false);\n\n useWalkthrough(user, formBuilderActions);\n\n const handleShortcutOpenClick = () => { setIsShortcutModalShow(true); };\n const handleShortcutCloseClick = () => { setIsShortcutModalShow(false); };\n\n const toggleHelpMenu = async () => {\n if (isPreviewModOn) return;\n\n openHelpMenu(!isHelpMenuOpen);\n\n if (isCollaborationPopupOpen) {\n openCollaborationPopup(false);\n }\n\n if (!isHelpMenuSeenRef.current) {\n logJotformAction({ action: 'seen', target: 'helpMenu' });\n isHelpMenuSeenRef.current = true;\n }\n };\n\n walkthroughManager.builderActions.toggleHelpMenu = toggleHelpMenu;\n\n return (\n \n\n
\n \n
\n \n
\n\n {t('Keyboard Shortcuts')}
\n \n\n {shortcuts.filter(item => item.combinations[osKey]).map(({ id, title, combinations }) => (\n
\n \n \n
\n ))}\n \n {combinations[osKey].map((keys, index) => (\n \n {!!index && ' or '}\n {keys.map((key, _index) => (\n \n {!!_index && ' + '}\n {key}\n \n ))}\n \n ))}\n
\n \n
\n ), [isMobile]);\n\n const QRDialogRenderer = useCallback(({ children }) => (\n \n
\n {\n isMobile && (\n {t('See app in action')}
\n {t('Use your camera to scan the QR code and preview the app on your device.')}
\n \n
\n ), [user.username, portalID, scope]);\n\n const isDownloadButtonActive = useMemo(() => (!!qrLink));\n\n // TODO :: research text range\n const handleSelectAllText = ({ target }) => {\n if (document.body.createTextRange) {\n const range = document.body.createTextRange();\n range.moveToElementText(target);\n range.select();\n } else if (window.getSelection) {\n const selection = window.getSelection();\n const range = document.createRange();\n range.selectNodeContents(target);\n selection.removeAllRanges();\n selection.addRange(range);\n }\n };\n\n const QRFooterRenderer = useCallback(() => {\n return (\n \n
\n \n );\n }, [publicLink, qrLink, isDownloadButtonActive]);\n\n const quickQRPopoverRef = useRef();\n const quickQRButtonRef = useRef();\n\n const [isQuickQRVisible, setQuickQRVisible] = Hooks.useClickOutsideState(false, [quickQRButtonRef, quickQRPopoverRef]);\n\n const handleQuickQR = () => {\n onClick(!isQuickQRVisible);\n dispatch(trackEventAction({ action: 'quickQrOpened ' }));\n if (isMobile) {\n return QRModalRef.current.show();\n }\n setQuickQRVisible(true);\n };\n\n return (\n <>\n \n \n {t('Download')}\n \n \n {t('Open')}\n \n
\n {/* TODO:: @resat, conditional error msg */}\n {/* {t('Something went wrong')}
*/}\n\n {t('Your app link')}
\n \n \n {publicLink}\n
\n \n
\n \n )\n )\n }\n \n );\n};\n\nQuickQr.propTypes = {\n portalID: string,\n scope: string,\n user: shape({\n username: string\n }),\n buttonText: string,\n buttonStartIcon: node,\n onClick: func\n};\n\nQuickQr.defaultProps = {\n portalID: '',\n scope: '',\n user: {\n username: ''\n },\n buttonText: '',\n buttonStartIcon: null,\n onClick: f => f\n};\n\nexport default QuickQr;\n","/* eslint-disable max-len */\nimport styled from 'styled-components';\n\nexport const ScOptionLinkIcon = styled.div`\n min-width: 16px;\n min-height: 16px;\n margin-right: 8px;\n background-position: center;\n background-repeat: no-repeat;\n background-size: contain;\n`;\n\nexport const ScActionLinkIcon = styled.div`\n width: 10px;\n height: 7px;\n background-position: center;\n background-repeat: no-repeat;\n background-image: url(\"data:image/svg+xml,${p => {\n switch (p.type) {\n case 'ArrowSubMenu':\n return \"%3Csvg width='8' height='12' viewBox='0 0 8 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.446 1.166l4.416 4.477-4.417 4.474a.303.303 0 00.008.434.344.344 0 00.467 0l4.636-4.695a.302.302 0 00-.002-.426L1.928.741a.346.346 0 00-.475-.008.3.3 0 00-.007.433z' fill='%23767689' stroke='%23B5BAC8' fill-rule='evenodd'/%3E%3C/svg%3E\";\n case 'ArrowDropdown':\n default:\n return \"%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.58086 1.06762L4.99975 4.40954L1.42064 1.06662C1.32114 0.97657 1.16863 0.977071 1.07313 1.07263C0.975624 1.17018 0.975624 1.32877 1.07313 1.42633C1.07513 1.42833 4.82925 4.93434 4.82925 4.93434C4.92625 5.02239 5.07375 5.02239 5.16975 4.93334L8.92037 1.43233C9.02437 1.32877 9.02437 1.17018 8.92687 1.07263C8.83137 0.977071 8.67887 0.976571 8.58086 1.06762Z' fill='%230A1551' stroke='%230A1551'/%3E%3C/svg%3E\";\n }\n }}\");\n\n &.isViewForm {\n min-width: 10px;\n max-width: 10px;\n min-height: 12px;\n max-height: 12px;\n }\n\n &.isMoreMenu {\n background-image: url(\"data:image/svg+xml,${p => {\n switch (p.type) {\n case 'ArrowSubMenu':\n return \"%3Csvg width='6' height='10' viewBox='0 0 6 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4-4 4' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\";\n default:\n return '%3Csvg width=\\'10\\' height=\\'7\\' fill=\\'none\\' xmlns=\\'http://www.w3.org/2000/svg\\'%3E%3Cpath fill-rule=\\'evenodd\\' clip-rule=\\'evenodd\\' d=\\'M.4193.8c-.2472-.3296-.012-.8.4-.8h8c.412 0 .6472.4704.4.8l-4 5.3333c-.2.2667-.6.2667-.8 0L.4193.8z\\' fill=\\'%23282F42\\'/%3E%3C/svg%3E';\n }\n }}\");\n }\n`;\n\nexport const ScActionLink = styled.a`\n text-decoration: none;\n color: #e2e2e2;\n font-size: .875em;\n display: inline-block;\n padding: 1em .75em;\n font-weight: 500;\n position: absolute;\n left: 0;\n top: 0;\n pointer-events: ${p => (p.disabled ? 'none' : 'auto')};\n opacity: ${p => (p.disabled ? 0.5 : 1)};\n z-index: 1;\n\n &:hover {\n cursor: pointer;\n }\n\n @media screen and (max-width: 480px) {\n white-space: normal;\n text-align: center;\n }\n & + & {\n margin-left: 6px;\n\n html[dir=\"rtl\"] & {\n margin-left: 0;\n margin-right: 6px;\n }\n\n }\n &:last-of-type:before {\n border-radius: 0 6px 6px 0;\n }\n`;\n","import React from 'react';\nimport { shape, bool } from 'prop-types';\nimport {\n ScOptionLinkIcon, ScActionLinkIcon\n} from './scPopoverMenu';\n\nconst PopoverOption = ({\n option: {\n text, value, component, disabled = false, desc, icon: Icon,\n hideOnDisable = true\n }, isSelected, hasSubMenu = false\n}) => {\n if (hideOnDisable && disabled) {\n return null;\n }\n\n return (\n \n
\n \n );\n};\n\nPopoverOption.propTypes = {\n option: shape({}).isRequired,\n isSelected: bool,\n hasSubMenu: bool\n};\n\nPopoverOption.defaultProps = {\n isSelected: false,\n hasSubMenu: false\n};\n\nexport default PopoverOption;\n","import React, {\n useRef, forwardRef, useImperativeHandle\n} from 'react';\nimport {\n node, element, oneOfType, elementType, func, bool, arrayOf, shape\n} from 'prop-types';\nimport {\n Popover, SelectionGroup, Hooks\n} from '@jotforminc/uikit';\nimport PopoverOption from './PopoverOption';\nimport { ScActionLink } from './scPopoverMenu';\n\nimport './PopoverMenu.scss';\n\nconst ItemGroupRenderer = ({\n// eslint-disable-next-line react/prop-types\n text, groupIcon, children: options, ...props\n}) => {\n return (\n \n {component}\n
\n { text && (\n \n {text}\n
\n )}\n { hasSubMenu && {desc}
\n )}\n - \n {options}\n
\n {!isInJotformKiosk() && window.JOTFORM_ENV !== 'ENTERPRISE' && (\n \n {t('Give Feedback')}\n \n )}\n
\n );\n};\n\nexport default FeedbackButton;\n","import React, { useCallback, useMemo, useState } from 'react';\nimport { useDebounce } from '@jotforminc/hooks';\nimport { Header as JFHeader, getDefaultNavItems } from '@jotforminc/header-components';\nimport { t } from '@jotforminc/translation';\nimport { useSelector, useDispatch } from 'react-redux';\nimport { Help } from '@jotforminc/help';\nimport {\n IconBellVerticalFilled, IconFileFilled, IconMessageFilled, IconMessageSmileFilled, IconMessageStarFilled, IconPaperPlaneFilled, IconProductAppsFilled, IconRocketFilled\n} from '@jotforminc/svg-icons';\nimport isEmpty from 'lodash/isEmpty';\nimport SELECTORS from '../../store/selectors';\nimport {\n updatePortalAction, startShowWhatsNewModalFlow, showGenericModalAction, sendFeedbackAction\n} from '../../store/actionCreators';\nimport { checkMobilePhone, getTeamID, getUpdatedDate } from '../../utils';\nimport { useAppDefaults } from '../../properties';\nimport QuickQr from '../Builder/components/QuickQr';\nimport AppMenuPopover from './AppMenuPopover';\nimport { FEATURE_NAMES } from '../../constants/features';\nimport { isFeatureEnabled } from '../../utils/features/helper';\nimport { useGetAvailableWhatsNewFeatures, useProductNavigationAppList } from '../../utils/hooks';\nimport CloneAppButton from './CloneAppButton';\nimport { APP_PREVIEW_STATES, feedbackModalInfo } from '../../constants';\nimport AiAssistantButton from '../Builder/components/AiAssistant/AiAssistantButton';\nimport { MODALS } from '../../constants/modals';\nimport FeedbackButton from '../Builder/components/HomePage/FeedbackButton';\nimport './styles.scss';\n\nconst Header = () => {\n const [isHelpMenuOpen, openHelpMenu] = useState(false);\n\n const dispatch = useDispatch();\n const user = useSelector(SELECTORS.getUser);\n const currentStep = useSelector(SELECTORS.getCurrentStep);\n const { time_zone: timeZone } = user;\n const {\n created_at: createdAt, updated_at: updatedAt,\n name, title, id, scope\n } = useSelector(SELECTORS.getAppInfoWithDefaults);\n\n const appPreviewStatus = useSelector(SELECTORS.appPreviewStatusSelector);\n const forceTitleRename = useSelector(SELECTORS.getForceTitleRenameSelector);\n const currentTeam = useSelector(SELECTORS.getCurrentTeam);\n const isTeamMember = useSelector(SELECTORS.getIsTeamMember);\n const availableWhatsNewFeatures = useGetAvailableWhatsNewFeatures();\n const isAppPreviewActive = appPreviewStatus !== APP_PREVIEW_STATES.IDLE;\n\n const lastUpdatedAt = updatedAt || createdAt;\n const branding21 = true;\n const showAppClone = useSelector(SELECTORS.getShouldWarnToEditers);\n const showAiAssistant = isFeatureEnabled(FEATURE_NAMES.AiAssistant) && currentStep === 'build';\n\n const setInitialValueForTitle = newName => {\n const { title: defaultName } = useAppDefaults();\n return newName || defaultName;\n };\n\n const _handleAppTitleChange = useCallback(\n newText => {\n const latestText = setInitialValueForTitle(newText ? newText.replace(/(<([^>]+)>)/ig, '') : '');\n const baseProp = { title: latestText };\n dispatch(updatePortalAction(baseProp));\n const headerTitle = document.querySelector('.jNewHeader-title');\n if (headerTitle) {\n headerTitle.scrollLeft = 0;\n }\n },\n [name, title]\n );\n const handleAppTitleChange = useDebounce(_handleAppTitleChange);\n\n const getDate = useMemo(() => () => {\n const editDate = lastUpdatedAt ? getUpdatedDate(new Date(`${lastUpdatedAt.replace(/-/g, '/')} GMT-0500`).getTime(), timeZone)\n : getUpdatedDate(new Date(), timeZone);\n let dateString = '';\n if (editDate.yesterday) {\n dateString = lastUpdatedAt === createdAt ? `${t('Created yesterday.')}` : `${t('Last edited yesterday.')}`;\n } else if (editDate.oldDate || editDate.today) {\n const newDate = editDate.oldDate ? t(editDate.oldDate) : t(editDate.today, { timeOnly: true });\n dateString = lastUpdatedAt === createdAt ? `${t('Created at')} ${newDate}` : `${t('Last edited at')} ${newDate}`;\n }\n return dateString;\n }, [lastUpdatedAt, createdAt, timeZone]);\n\n const appConfig = useMemo(() => {\n const HeaderNavigationConstants = getDefaultNavItems(branding21);\n return {\n ...HeaderNavigationConstants.portal,\n appLink: function appLink() {\n return window.location.href;\n },\n components: {\n ...HeaderNavigationConstants.portal.components,\n title: {\n visible: true,\n editable: true,\n isIconVisible: isFeatureEnabled(FEATURE_NAMES.BuilderTopBar)\n },\n subTitle: {\n title: getDate(),\n visible: Boolean(lastUpdatedAt)\n }\n }\n };\n }, [lastUpdatedAt, branding21]);\n\n // JFHeader only needs id and title\n const appDetails = useMemo(() => { return { id, title }; }, [title]);\n\n const isMobilePhone = checkMobilePhone();\n\n const appList = useProductNavigationAppList();\n\n const teamID = getTeamID();\n\n const getMainContentSelector = () => {\n switch (currentStep) {\n case 'build':\n return '#appLogo-container';\n case 'settings':\n return '#settings-content';\n case 'publish':\n return '#publish-content';\n default:\n break;\n }\n };\n\n const helpMenuItems = useMemo(() => [\n ...(\n !isEmpty(availableWhatsNewFeatures)\n ? [{\n id: 1,\n name: 'whatsNewModal',\n title: `${t(\"What's new\")} - ${t('List')} ${t('Element')}`,\n icon: