\n
\n \n Need help with creating \n {this.getTypeText()}\n ?\n
\n\n Feel free to request personalized assistance. We would be delighted to assist you in creating your \n {this.getTypeText()}\n through a\n Zoom video call. \n It’s\n FREE!\n
\n\n \n Request Help\n \n \n Ask Me Later\n \n
\n \n );\n }\n}\n\nexport default RequestHelp;\n","/* eslint-disable react/jsx-one-expression-per-line */\n/* eslint-disable react/prop-types */\n/* eslint-disable react/destructuring-assignment */\nimport React from 'react';\nimport { IconMicrophoneFilled, IconScreencast } from '@jotforminc/svg-icons';\nimport { createZoomRequest, handleZoomSupportLog } from '../../libs/zoomSocket';\n\nclass ConnectSection extends React.Component {\n handleConnect = () => {\n const { username } = this.props.user;\n\n handleZoomSupportLog(username, 'connect-meeting-click');\n\n createZoomRequest();\n this.props.changeStep('waiting-agent-response');\n };\n\n render() {\n const name = this.props.user.name || this.props.user.username;\n return (\n <>\n \n
\n Before starting the call, please make sure that:\n \n \n
\n \n \n
\n \n
\n We are looking for a support agent who is available to assist you.\n \n \n
\n Start meeting to get help from our support agent.\n \n
\n All of our support agents are busy right now. Please try again later.\n \n );\n }\n}\n\nexport default NotAvailableScreen;\n","/* eslint-disable react/prop-types */\n/* eslint-disable react/destructuring-assignment */\n/* eslint-disable react/jsx-one-expression-per-line */\nimport React from 'react';\n\nimport { handleZoomSupportLog } from '../../libs/zoomSocket';\n\nclass NotAvailableScreen extends React.Component {\n constructor(props) {\n super(props);\n\n this.meetingTimeOut = null;\n }\n\n componentDidMount() {\n const { username } = this.props.user;\n\n handleZoomSupportLog(username, 'declined-screen-shown');\n\n this.meetingTimeOut = setTimeout(() => {\n this.props.closeWidget();\n }, 10000);\n }\n\n componentWillUnmount() {\n clearTimeout(this.meetingTimeOut);\n }\n\n render() {\n const name = this.props.user.name || this.props.user.username;\n\n return (\n <>\n \n
\n Thank you for using Jotform. All our support agents are too busy with helping other users. Please try again later.\n \n );\n }\n}\n\nexport default NotAvailableScreen;\n","import RequestHelp from './RequestHelp';\nimport ConnectSection from './ConnectSection';\nimport WaitingAgentResponse from './WaitingAgentResponse';\nimport MeetingReady from './MeetingReady';\nimport NotAvailableScreen from './NotAvailableScreen';\nimport DeclinedScreen from './DeclinedScreen';\n\nexport const stepConfig = [\n {\n key: 'request-help',\n name: 'Request Help',\n component: RequestHelp\n }, {\n key: 'connection-start',\n name: 'Connection Start',\n component: ConnectSection\n }, {\n key: 'waiting-agent-response',\n name: 'Waiting Agent Response',\n component: WaitingAgentResponse\n }, {\n key: 'meeting-ready',\n name: 'Meeting Ready',\n component: MeetingReady\n }, {\n key: 'not-available',\n name: 'Not available',\n component: NotAvailableScreen\n }, {\n key: 'declined',\n name: 'Declined',\n component: DeclinedScreen\n }\n];\n","/* eslint-disable react/prop-types */\n/* eslint-disable react/destructuring-assignment */\nimport React from 'react';\n\nimport { IconXmarkSm } from '@jotforminc/svg-icons';\n\nimport { stepConfig } from './steps';\nimport NotAvailableScreen from './NotAvailableScreen';\nimport { handleZoomSupportLog, selfDenyRequest } from '../../libs/zoomSocket';\n\nclass ZoomWidget extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n step: 'request-help',\n closedWidgetByUser: false,\n agentResponse: {}\n };\n this.agentImage = 'https://support.jotform.com/uploads/forum/muhammetburak/1704728810_659c18ea1e281_shutterstock_1170187057.png';\n }\n\n componentDidMount() {\n window.addEventListener('beforeunload', this.handleBeforeUnload);\n }\n\n UNSAFE_componentWillReceiveProps(nextProps) {\n if (nextProps.user?.username === nextProps.agentResponse?.target || nextProps.agentResponse?.targets?.includes(nextProps.user?.username)) {\n this.setState({\n agentResponse: nextProps.agentResponse\n });\n if (nextProps.agentResponse?.actionType === 'accept-request') {\n this.setState({\n step: 'meeting-ready'\n });\n } else if (nextProps.agentResponse?.actionType === 'deny-request') {\n this.setState({\n step: 'declined'\n });\n } else if (this.state.step !== 'request-help') {\n this.setState({\n step: 'declined'\n });\n }\n }\n }\n\n componentDidUpdate(prevProps) {\n const prevOptions = prevProps.zoomWidgetOptions;\n const currentOptions = this.props.zoomWidgetOptions;\n\n // Check if there's a change in the relevant props\n if (prevOptions.isAgentsAvailable !== currentOptions.isAgentsAvailable || prevOptions.isChatLimitReached !== currentOptions.isChatLimitReached) {\n this.checkAndLogZoomWidget();\n }\n }\n\n componentWillUnmount() {\n window.removeEventListener('beforeunload', this.handleBeforeUnload);\n }\n\n handleBeforeUnload = () => {\n const { username } = this.props.user;\n\n const { isAgentsAvailable, isChatLimitReached } = this.props.zoomWidgetOptions;\n const showZoomWidget = isAgentsAvailable && !isChatLimitReached;\n\n if (showZoomWidget) {\n handleZoomSupportLog(username, 'page-closed', true);\n }\n };\n\n checkAndLogZoomWidget = () => {\n const { isAgentsAvailable, isChatLimitReached } = this.props.zoomWidgetOptions;\n const showZoomWidget = isAgentsAvailable && !isChatLimitReached;\n\n if (showZoomWidget) {\n const { username } = this.props.user;\n handleZoomSupportLog(username, 'zoom-widget-shown');\n }\n };\n\n closeWidget = (isUserClick = false) => {\n if (isUserClick) {\n selfDenyRequest(); // Removes chat request on close button click\n const { username } = this.props.user;\n\n handleZoomSupportLog(username, 'close-widget-click');\n }\n\n this.setState({\n closedWidgetByUser: true\n });\n };\n\n changeStep = (step = 'request-help') => {\n this.setState({\n step: step\n });\n };\n\n renderStep = () => {\n const { step } = this.state;\n const { isAgentsAvailable, isChatLimitReached } = this.props.zoomWidgetOptions;\n\n const showZoomWidget = isAgentsAvailable && !isChatLimitReached;\n\n const Component = stepConfig.find(item => item.key === step)?.component;\n\n if (!showZoomWidget && step === 'connection-start') {\n return (\n \n {this.state.step !== 'request-help' && (\n \n )}\n {this.renderStep()}\n
\n );\n }\n}\n\nexport default ZoomWidget;\n","/* eslint-disable react/prop-types */\nimport React from 'react';\n\nimport ZoomWidget from './ZoomWidget/ZoomWidget';\nimport * as ZoomSocket from '../libs/zoomSocket';\nimport '../styles/style.css';\n\nclass ZoomSocketLayer extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n agentResponse: {},\n zoomWidgetOptions: {\n isAgentsAvailable: false,\n isChatLimitReached: true\n }\n };\n }\n\n UNSAFE_componentWillMount() {\n const { user, isAllowedToSeeZoomWidget } = this.props;\n if (user && isAllowedToSeeZoomWidget) {\n ZoomSocket.connect()\n .then(() => {\n ZoomSocket.setUser(user);\n ZoomSocket.initialize();\n this.initZoomSocketMessageListeners();\n });\n }\n }\n\n initZoomSocketMessageListeners = () => {\n ZoomSocket.Config.socket.on('reconnect', () => {\n if (ZoomSocket.Config.user) {\n ZoomSocket.joinRoom();\n }\n });\n\n ZoomSocket.Config.socket.on('set-client-id', () => {\n ZoomSocket.joinRoom();\n });\n\n ZoomSocket.Config.socket.on('status', data => {\n const { isAgentsAvailable, isChatLimitReached } = data;\n this.setState({\n zoomWidgetOptions: {\n isAgentsAvailable: isAgentsAvailable, isChatLimitReached: isChatLimitReached\n }\n });\n });\n\n ZoomSocket.Config.socket.on('accept-request', data => {\n this.setState({\n agentResponse: data\n });\n });\n\n ZoomSocket.Config.socket.on('deny-request', data => {\n this.setState({\n agentResponse: data\n });\n });\n };\n\n render() {\n const { agentResponse, zoomWidgetOptions } = this.state;\n\n return (\n \n {elements.map(({\n type, title, icon, isNew, isBeta\n }, index) => (\n
\n );\n }, []);\n\n return (\n \n {useCategoryTypes ? (\n categories.map(category => {\n const { items: _items, title, showTitle = true } = categoryItems[category];\n const elements = generateList(_items, title);\n return (\n \n {showTitle && (\n \n {t(title)}\n \n )}\n \n );\n })\n ) : generateList(items)}\n
\n );\n};\n\nAppItemList.propTypes = {\n items: arrayOf(shape({})),\n categoryItems: shape({})\n};\n\nAppItemList.defaultProps = {\n items: [{}],\n categoryItems: {}\n};\n\nexport default AppItemList;\n","import React from 'react';\nimport AppItemList from './AppItemList';\n\nconst BasicsPanel = props => - \n {elements}\n
\n {t('App Elements')}\n \n
\n {children}\n \n );\n};\n\nexport const TabListContainer = props => ;\n\n// eslint-disable-next-line react/prop-types\nexport const TabButtonContainer = props => {\n return ;\n};\n\nexport const TabButton = props => \n { isActiveItem ? (\n
\n \n \n );\n};\n\nNavigationItem.propTypes = {\n id: oneOfType([number, string]),\n name: string,\n isActiveItem: bool,\n onClick: func,\n onPageNameChange: func,\n DragHandleRenderer: elementType.isRequired,\n SortableDragHandle: elementType.isRequired\n};\n\nNavigationItem.defaultProps = {\n id: '',\n name: '',\n isActiveItem: false,\n onClick: f => f,\n onPageNameChange: f => f\n};\n\nexport default NavigationItem;\n","import React from 'react';\nimport Styled from 'styled-components';\n\nconst ScPageListContainer = Styled.div`\n position: relative;\n bottom: 0;\n z-index: 11;\n height: 63px;\n background-color: #fff;\n display: flex;\n align-items: center;\n padding: 0 12px;\n border-top: 1px solid #C9CADD80;\n`;\n\nconst PageListContainer = ({\n ...props\n}) => {\n return (\n {t(value)}
;\n };\n\n return (\n\n {isActiveItem ? (\n
\n \n handlePageUpdate({ showPageOnNavigation: hidePageNavigation ? 'Yes' : 'No' })} />\n
\n \n )\n )}\n inactiveComponent={(\n \n )}\n />\n {isMobileOrTablet ? (\n \n dispatch(ACTION_CREATORS.addNewPageAction({ newPageOrder: pages.length + 1 }))}\n data-testid=\"pageNavPanel_addPageButton\"\n colorStyle=\"secondary\"\n startIcon={IconPlusCircleFilled}\n variant=\"outline\"\n aria-label={t('Add a Page')}\n showTextOnly=\"sm\"\n >\n {t('Add Page')}\n \n
\n ), [pages.length]);\n\n const handleOpenPageSettingsPanel = () => dispatch(ACTION_CREATORS.openRightPanelWithModeAction(RightPanelModes.MENU_SETTINGS));\n const handleContactInfoClick = () => {\n dispatch(ACTION_CREATORS.setCheckoutFormVisibility(true));\n dispatch(ACTION_CREATORS.selectPortalItemAction('contactInformationItem'));\n const contactInfoElement = document.querySelector('div[type=\"CONTACT_INFORMATION\"]');\n contactInfoElement?.scrollIntoView({ block: 'center' });\n dispatch(ACTION_CREATORS.openRightPanelWithModeAction(RightPanelModes.CONTACT_INFORMATION_SETTINGS));\n };\n\n const defaultPopoverOptions = {\n placement: 'bottom',\n modifiers: [{ name: 'offset', options: { offset: [0, 10] } }]\n };\n\n const rightBottomPopoverOptions = {\n placement: 'bottom-end',\n modifiers: [{ name: 'offset', options: { offset: [-6, 10] } }]\n };\n\n const PageListContainer = useCallback(props => (\n \n {isPaymentApp && (\n <>\n \n {t('Contact Information')}\n \n {checkHasMobileWidth() && (\n \n {t('Contact Information')}\n \n )}\n \n )}\n \n {t('Navigation Settings')}\n \n
\n \n ), [isPaymentApp, isPreviewPanelOpen]);\n\n const handlePageNameChange = (pageID, name) => dispatch(ACTION_CREATORS.updatePageAction({ pageID, prop: { name } }));\n\n return (\n \n
\n );\n};\nDefaultZoomSlider.propTypes = {\n value: number.isRequired,\n min: number.isRequired,\n max: number.isRequired,\n step: number,\n onChange: func\n};\n\nDefaultZoomSlider.defaultProps = {\n step: 0.4,\n onChange: f => f\n};\n","import {\n elementType, func, number, shape, string, bool\n} from 'prop-types';\nimport React, {\n useCallback, useEffect, useMemo, useRef, useState, forwardRef, useImperativeHandle\n} from 'react';\n\nimport Cropper from 'react-easy-crop';\nimport { Hooks } from '@jotforminc/uikit';\nimport { useDebounce } from '@jotforminc/hooks';\nimport {\n DefaultActionButtonWrapper, DefaultCloseButton, DefaultCropperWrapper, DefaultSaveButton, DefaultZoomSlider\n} from './defaults';\n\nconst ImageCropper = forwardRef(({\n Wrapper,\n CropperWrapper,\n ActionButtonsWrapper,\n SaveButtonRenderer,\n CloseButtonRenderer,\n ZoomSliderRenderer,\n cropHeight,\n cropWidth,\n initialCropInfo,\n onClose,\n onSave,\n image,\n disableZoom,\n useFullWidthImage\n}, ref) => {\n const cropperRef = useRef();\n\n const hasInitialCropInfo = !!Object.keys(initialCropInfo).length;\n\n const [cropperReady, setCropperReady] = useState(false);\n const [mediaLoaded, setMediaLoaded] = useState(false);\n const [cropInfo, setCropInfo] = useState(hasInitialCropInfo ? initialCropInfo : { x: 0, y: 0, zoom: 1 });\n const [minZoom, setMinZoom] = useState(1);\n const [cropSize, setCropSize] = useState({ width: cropWidth, height: cropHeight });\n const [fullWidthYPerc, setFullWidthYPerc] = useState(hasInitialCropInfo ? initialCropInfo.fullWidthYPercentage : 0);\n\n const { rawCrop, rawZoom } = useMemo(() => ({\n rawCrop: { x: cropInfo.x, y: cropInfo.y },\n rawZoom: cropInfo.zoom\n }), [cropInfo]);\n\n useImperativeHandle(ref, () => ({\n cropSize,\n cropperRef\n }));\n\n const handleMediaLoaded = useCallback(mediaSize => {\n const { current } = cropperRef;\n if (current) {\n setMediaLoaded(true);\n }\n const initialCropAreaWidth = cropWidth || cropSize.width;\n const initialCropAreaHeight = cropHeight || cropSize.height;\n const cropAreaWidth = initialCropAreaWidth || current?.clientWidth;\n const cropAreaHeight = initialCropAreaHeight || current?.clientHeight;\n const {\n width: mediaWidth, height: mediaHeight, naturalWidth, naturalHeight\n } = mediaSize;\n const useNaturalSizes = useFullWidthImage && !hasInitialCropInfo && cropAreaWidth > naturalWidth && cropAreaHeight > naturalHeight;\n const mWidth = useNaturalSizes ? naturalWidth : mediaWidth;\n const mHeight = useNaturalSizes ? naturalHeight : mediaHeight;\n\n const zoomToFitRatio = mediaHeight < cropHeight ? cropAreaHeight / mHeight : cropAreaWidth / mWidth;\n\n setMinZoom(zoomToFitRatio);\n if (!hasInitialCropInfo) {\n setCropInfo({ ...cropInfo, zoom: zoomToFitRatio });\n }\n }, [cropWidth, cropHeight, hasInitialCropInfo, cropInfo, cropperRef]);\n\n const maxZoom = useMemo(() => { return minZoom * 12; }, [minZoom]);\n\n const isExist = val => typeof val !== 'undefined' && !Number.isNaN(val);\n\n const handleCropChange = cropData => {\n if (isExist(cropData.x) && isExist(cropData.y)) {\n setCropInfo({ ...cropInfo, ...cropData });\n }\n };\n\n const handleZoomChange = zoomData => {\n if (zoomData) {\n setCropInfo({ ...cropInfo, zoom: zoomData });\n }\n };\n\n const handleSliderValueChange = zoomVal => {\n setCropInfo(currCropInfo => ({ ...currCropInfo, zoom: zoomVal }));\n };\n\n const handleOnClose = () => onClose();\n\n const handleOnSave = () => {\n onSave(cropInfo, fullWidthYPerc);\n handleOnClose();\n };\n\n const updateSize = useDebounce(() => {\n const { current } = cropperRef;\n if (current && ((current.clientWidth !== cropSize.width) || (current.clientHeight !== cropSize.height))) {\n setCropSize({\n width: current.clientWidth,\n height: current.clientHeight\n });\n }\n }, 150);\n\n const handleCropComplete = () => {\n if (!cropWidth && !cropHeight) {\n updateSize();\n }\n };\n\n const handleCropAreaChange = croppedArea => {\n if (croppedArea && isExist(croppedArea.y)) {\n setFullWidthYPerc(croppedArea.y);\n }\n };\n\n useEffect(() => {\n if (!cropperReady) { // large media may take a little time\n setCropperReady(true);\n }\n }, [minZoom]);\n\n Hooks.useEffectIgnoreFirst(() => {\n setCropInfo(initialCropInfo);\n }, [initialCropInfo]);\n\n useEffect(() => {\n handleCropComplete();\n }, []);\n\n const isFullWidth = useFullWidthImage && isExist(fullWidthYPerc);\n\n return (\n \n
\n \n
\n \n
\n )}\n \n {translationRenderer('[1[Upgrade your account]] to remove it.')({\n renderer1: str => {\n return (\n \n {` ${str}`}\n \n );\n }\n })}\n
\n \n )\n )}\n \n {t(TOOLBOX_TITLE_MAPPER[item.id])}\n
\n {SuffixMarkup && \n
\n \n );\n};\n\nItemToolbox.propTypes = {\n items: arrayOf(shape({\n id: string,\n icon: string,\n onClick: func\n })),\n elementID: oneOfType([string, number])\n};\n\nItemToolbox.defaultProps = {\n items: [],\n elementID: ''\n};\n\nexport default ItemToolbox;\n","import React, { useMemo } from 'react';\nimport {\n func, bool, string, number, oneOfType, shape, object\n} from 'prop-types';\nimport { CSSTransition } from 'react-transition-group';\nimport { useDispatch, useSelector } from 'react-redux';\nimport ItemToolbox from '../../ItemToolbox/ItemToolbox';\nimport { ITEM_TYPES } from '../../../../../constants/itemTypes';\nimport { BUTTON_ROLE_TYPES } from '../RightPanel/ButtonActions/buttonRoleTypes';\nimport { FEATURE_NAMES } from '../../../../../constants/features';\nimport { isFeatureEnabled } from '../../../../../utils/features/helper';\nimport { openRightPanelWithModeAction, trackEventAction } from '../../../../../store/actionCreators';\nimport { RightPanelModes } from '../constants';\nimport SELECTORS from '../../../../../store/selectors';\nimport * as ACTION_CREATORS from '../../../../../store/actionCreators';\nimport { MODALS } from '../../../../../constants/modals';\nimport ActionHelper from '../../../../../utils/ActionsHelper';\nimport { DS_ITEM_LOAD_TYPES } from '../../../../../store/reducers/dataSource/constants';\n\nconst BuilderItemToolbox = ({\n isEditMode, type, itemInfo, resourceItemEditClick, paragraphItemEditClick,\n isSelected, onItemSettingsClick, onItemDeleteClick, openLinkClick, isLinkItemURLEmpty,\n onMoveUpClick, onMoveDownClick, canMoveDown, canMoveUp, elementID, canOpenLink, isDeletable, resourceItemEditClickList, scrollToDetailPage,\n detailPage\n}) => {\n const dispatch = useDispatch();\n const canEditReport = (useSelector(SELECTORS.getUserPermission('editReport')) || !itemInfo.isTeamAsset) && itemInfo.resourceSubType === 'reports';\n\n const toolboxItems = useMemo(() => {\n const orderButtons = [];\n if (canMoveUp) {\n orderButtons.push({\n key: 'upIcon',\n id: 'upIcon',\n icon: 'IconUp',\n onClick: onMoveUpClick\n });\n }\n if (canMoveDown) {\n orderButtons.push({\n key: 'downIcon',\n id: 'downIcon',\n icon: 'IconDown',\n onClick: onMoveDownClick\n });\n }\n\n const settingsIcon = {\n key: 'settingsIcon',\n id: 'settingsIcon',\n icon: 'IconGear',\n onClick: onItemSettingsClick\n };\n const productListSettings = {\n key: 'productList',\n id: 'productList',\n icon: 'IconProductList',\n onClick: onItemSettingsClick\n };\n const editDonationPayment = {\n key: 'editDonationPayment',\n id: 'editDonationPayment',\n icon: 'IconEditPayment',\n onClick: () => {\n dispatch(openRightPanelWithModeAction(RightPanelModes.DONATION_PAYMENT_SETTINGS));\n dispatch(trackEventAction({ action: 'donationPaymentPropertiesButtonClicked' }));\n }\n };\n const editPayment = {\n key: 'editPayment',\n id: 'editPayment',\n icon: 'IconEditPayment',\n onClick: () => dispatch(openRightPanelWithModeAction(RightPanelModes.PAYMENT_SETTINGS))\n };\n const deleteIcon = {\n key: 'deleteIcon',\n id: 'deleteIcon',\n icon: 'IconTrash',\n onClick: onItemDeleteClick\n };\n\n const donationSettingsIcon = {\n key: 'donationSettings',\n id: 'donationSettings',\n icon: 'DonationSettings',\n onClick: onItemSettingsClick\n };\n\n const contactInformationPropertiesIcon = {\n key: 'contactInformationProperties',\n id: 'contactInformationProperties',\n icon: 'IconGear',\n onClick: onItemSettingsClick\n };\n\n const viewContactInformationIcon = {\n key: 'viewContactInformation',\n id: 'viewContactInformation',\n icon: 'IconView',\n onClick: () => dispatch(ACTION_CREATORS.showGenericModalAction({ name: MODALS.CHECKOUT_FORM_PREVIEW_MODAL, onItemSettingsClick: onItemSettingsClick }))\n };\n\n const baseToolboxItems = isDeletable ? [settingsIcon, deleteIcon] : [settingsIcon];\n const isActionOpenForm = ({ type: itemType, buttonRole = '', buttonValue = '' }) => ActionHelper.ACTIONABLE_ITEMS.includes(itemType) && buttonRole === BUTTON_ROLE_TYPES.FORM && !!buttonValue;\n\n // eslint-disable-next-line complexity\n const getTools = (itemType, itemProps) => {\n const { status } = itemProps;\n const isButtonTypeForm = isActionOpenForm({ ...itemProps });\n switch (true) {\n case ((itemType === ITEM_TYPES.FORM || isButtonTypeForm) && status !== 'DELETED'):\n return [\n {\n key: 'editFormIcon',\n id: 'editFormIcon',\n icon: 'IconEditForm',\n onClick: resourceItemEditClick\n },\n ...baseToolboxItems\n ];\n case (itemType === ITEM_TYPES.REPORT_LINK) && canEditReport:\n return [\n {\n key: 'editReportIcon',\n id: 'editReportIcon',\n icon: 'IconEditReport',\n onClick: resourceItemEditClick\n },\n ...baseToolboxItems\n ];\n case (itemType === ITEM_TYPES.TABLE_LINK):\n return [\n {\n key: 'editTableIcon',\n id: 'editTableIcon',\n icon: 'IconEditTable',\n onClick: resourceItemEditClick\n },\n ...baseToolboxItems\n ];\n case (itemType === ITEM_TYPES.LIST):\n return [\n {\n key: 'viewDetailPage',\n id: 'viewDetailPage',\n icon: 'IconDetailsPage',\n onClick: scrollToDetailPage,\n isVisible: !!detailPage\n\n },\n {\n key: 'editList',\n id: 'editList',\n icon: 'IconEditTable',\n // TODO: it may be controlled via default resourceItemEditClick\n onClick: resourceItemEditClickList,\n getIsLoading: () => useSelector(SELECTORS.dsGetItemIsLoading(itemInfo.id, DS_ITEM_LOAD_TYPES.TABLE_CLONE))\n },\n ...baseToolboxItems\n ];\n case (itemType === ITEM_TYPES.SIGN_LINK):\n return [\n {\n key: 'editSignIcon',\n id: 'editSignIcon',\n icon: 'IconEditSign',\n onClick: resourceItemEditClick\n },\n ...baseToolboxItems\n ];\n case (itemType === ITEM_TYPES.PARAGRAPH):\n return [\n {\n key: isEditMode ? 'doneIcon' : 'editIcon',\n id: isEditMode ? 'doneIcon' : 'editIcon',\n icon: isEditMode ? 'IconDone' : 'IconEdit',\n onClick: paragraphItemEditClick\n },\n ...baseToolboxItems\n ];\n case (\n itemType === ITEM_TYPES.LINK\n || itemType === ITEM_TYPES.IMAGE\n || canOpenLink\n ):\n return canOpenLink ? [\n {\n key: 'openLinkIcon',\n id: 'openLinkIcon',\n icon: 'IconOpenLink',\n onClick: openLinkClick\n }, ...baseToolboxItems\n ] : baseToolboxItems;\n case (itemType === 'PAGE'):\n if (isFeatureEnabled(FEATURE_NAMES.MultipageImps)) {\n return (isDeletable ? [settingsIcon, deleteIcon] : []);\n }\n\n return (isDeletable ? [deleteIcon] : []);\n case (itemType === ITEM_TYPES.PRODUCT_LIST):\n return [\n productListSettings,\n editPayment,\n deleteIcon\n ];\n case itemType === ITEM_TYPES.DONATION:\n return [donationSettingsIcon, editDonationPayment, deleteIcon];\n case itemType === ITEM_TYPES.CONTACT_INFORMATION:\n return [contactInformationPropertiesIcon, viewContactInformationIcon];\n default:\n return baseToolboxItems;\n }\n };\n return [...orderButtons, ...getTools(type, itemInfo)];\n }, [\n isEditMode, type, canMoveUp, canMoveDown, isLinkItemURLEmpty, onMoveUpClick, onMoveDownClick, onItemDeleteClick, canOpenLink,\n onItemSettingsClick, resourceItemEditClick, paragraphItemEditClick, openLinkClick, itemInfo\n ]);\n\n return (\n \n {isEditMode ? (\n
\n {!isEditMode && (\n \n \n \n {!hasIcon && !isMobileOrTablet && (\n \n
\n \n );\n};\n\nPageInlineEdit.propTypes = {\n page: shape({}),\n onChange: func,\n onSettingsClick: func,\n isHomepage: bool,\n handleSelectPage: func\n};\n\nPageInlineEdit.defaultProps = {\n page: {},\n onChange: f => f,\n onSettingsClick: f => f,\n isHomepage: false,\n handleSelectPage: f => f\n};\n\nexport default PageInlineEdit;\n","import Styled from 'styled-components';\nimport AppScItemContainer from '../../../../PublicApp/ScItemContainer';\n\nconst ScItemContainer = Styled(AppScItemContainer)`\n li[data-available-in-app=\"false\"] {\n .itemContent, .buttonItem {\n opacity: .4;\n }\n\n // Donation Box element will be visible even if don't have any integration\n [type=\"DONATION\"] .itemContent {\n opacity: 1;\n }\n\n .withIconItemContent {\n opacity: .4;\n .itemContent {\n opacity: 1;\n }\n }\n }\n\n [aria-selected=\"true\"], [aria-selected=\"true\"] &:focus {\n outline: none;\n .appItem {\n box-shadow: 0px 0px 0px 2px ${({ isDsItemContainer }) => (isDsItemContainer ? '#049E38' : '#0087E0')};\n border-radius: 4px;\n transition: .2s box-shadow ease;\n z-index: 2;\n }\n &.product-list-item {\n box-shadow: none;\n }\n }\n\n li:not([aria-selected=\"true\"]) {\n [contenteditable=true]:empty {\n display: none;\n }\n }\n\n .item-animation-appear {\n opacity: 0;\n position: absolute !important;\n }\n\n .item-animation-appear-done {\n animation: bounce .7s cubic-bezier(0.215, 0.61, 0.355, 1);\n @keyframes bounce {\n 0%{\n opacity: 0;\n transform: scale(0.5);\n }\n\n 50%{\n opacity: 0.7;\n transform: scale(1.02);\n }\n\n 90%{\n opacity: 1;\n transform: scale(0.98);\n }\n\n 100%{\n opacity: 1;\n transform: scale(1);\n }\n }\n }\n`;\n\nexport default ScItemContainer;\n","import Styled from 'styled-components';\n\nexport const ScAddFirstElementBtn = Styled.button`\n display: flex;\n align-items: center;\n justify-content: center;\n height: 78px;\n width: 100%;\n max-width: 672px;\n min-width: 292px;\n border-radius: 4px;\n background-color: #e6f5ff;\n color: #0099ff;\n border: 1px solid #0099FF;\n font-family: inherit;\n margin: 0px 10px 16px 10px;\n padding: 12px;\n svg {\n width: 22px;\n height: 22px;\n margin-right: 8px;\n }\n\n font-size: 14px;\n cursor: pointer;\n`;\n","import React, { useCallback } from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { t } from '@jotforminc/translation';\nimport PropTypes from 'prop-types';\nimport { IconArrows4WayFromCenter } from '@jotforminc/svg-icons';\nimport { ScAddFirstElementBtn } from './ScAddFirstElementBtn';\n\nimport * as ACTION_CREATORS from '../../../../../store/actionCreators';\nimport SELECTORS from '../../../../../store/selectors';\n\nconst AddFirstElementBtn = ({ isDraggingOver, pageID }) => {\n const dispatch = useDispatch();\n const isHomepage = useSelector(SELECTORS.getIsHomepage(pageID));\n\n const handleAddFirstElementButton = useCallback(e => {\n e.stopPropagation();\n dispatch(ACTION_CREATORS.updateLastInteractedPageIDAction(pageID));\n dispatch(ACTION_CREATORS.toggleLeftPanelAction(true));\n dispatch(ACTION_CREATORS.trackEventAction({ action: 'addFirstElementButtonClicked' }));\n }, [pageID]);\n\n return !isDraggingOver ? (\n \n
\n );\n};\n\nImageUploadPanel.propTypes = {\n onFileUpload: func.isRequired\n};\n\nexport default ImageUploadPanel;\n","export const EVENTS = [\n 'focusin', 'focusout', 'click', 'dblclick', 'mousedown', 'mouseup',\n 'mousemove', 'mouseover', 'beforepaste', 'paste', 'cut', 'copy',\n 'selectionchange', 'mouseout', 'mouseenter', 'mouseleave', 'keydown',\n 'keypress', 'keyup', 'contextmenu', 'dragend', 'dragover', 'draggesture',\n 'dragdrop', 'drop', 'drag', 'BeforeRenderUI', 'SetAttrib', 'PreInit',\n 'PostRender', 'init', 'deactivate', 'activate', 'NodeChange',\n 'BeforeExecCommand', 'ExecCommand', 'show', 'hide', 'ProgressState',\n 'LoadContent', 'SaveContent', 'BeforeSetContent', 'SetContent',\n 'BeforeGetContent', 'GetContent', 'VisualAid', 'remove', 'submit', 'reset',\n 'BeforeAddUndo', 'AddUndo', 'change', 'undo', 'redo', 'ClearUndos',\n 'ObjectSelected', 'ObjectResizeStart', 'ObjectResized', 'PreProcess',\n 'PostProcess', 'focus', 'blur', 'customButtonSettingClick'\n];\n\nexport const HANDLER_NAMES = EVENTS.map(event => `on${event[0].toUpperCase() + event.substring(1)}`);\n\nexport const BASE_CONFIG = {\n menubar: false,\n statusbar: false,\n min_height: 320,\n link_title: false,\n skin: 'lightgray',\n fullpage_hide_in_source_view: true,\n // content_css: '/css/customButtonsStyles.css',\n plugins: 'autolink link image fullpage lists print preview textcolor code fullscreen table paste',\n paste_retain_style_properties: 'all',\n paste_webkit_styles: 'all',\n toolbar: 'customfontfamily | customfontsize | bold italic | alignment | forecolor | link customimage | code | table | fullscreen | questionlist',\n content_style: `\n html, body { height: 100% }\n body { overscroll-behavior-x: none; }\n `,\n body_class: 'form-all'\n};\n\nexport const DEFAULT_FORMATS = `Andale Mono=andale mono,monospace;\nArial=arial,helvetica,sans-serif;\nArial Black=arial black,sans-serif;\nBook Antiqua=book antiqua,palatino,serif;\nComic Sans MS=comic sans ms,sans-serif;\nCourier New=courier new,courier,monospace;\nGeorgia=georgia,palatino,serif;\nHelvetica=helvetica,arial,sans-serif;\nImpact=impact,sans-serif;\nSymbol=symbol;\nTahoma=tahoma,arial,helvetica,sans-serif;\nTerminal=terminal,monaco,monospace;\nTimes New Roman=times new roman,times,serif;\nTrebuchet MS=trebuchet ms,geneva,sans-serif;\nVerdana=verdana,geneva,sans-serif;\nWebdings=webdings;\nWingdings=wingdings,zapf dingbats;`;\n\nexport const DEFAULT_FONT_SIZES = ['8pt', '10pt', '12pt', '14pt', '18pt', '24pt', '36pt'];\n\nexport const ALIGNMENT_MENU = `\n
\n Alt Text:
\n \n
`;\n\nexport const LIST_MENU = `\n \n
\n \n \n
\n \n \n
\n \n \n
\n\n
`;\n\nexport const CONTENT_REGEX = /(data:((.*?)\\/(.*?)*?)[.,/#!$%^&*;:{}=\\-_`~()]+?)/ig;\n\nexport const AVAILABLE_LANGUAGE_CODES = [\n 'ca-ES', 'da-DA', 'de-DE', 'en-US',\n 'es-ES', 'fi-FI', 'fr-FR', 'hu-HU',\n 'it-IT', 'nl-NL', 'no-NO', 'pl-PL',\n 'pt-PT', 'ro-RO', 'ru-RU', 'sv-SE',\n 'tr-TR', 'zh-CN'\n];\n","import ReactDOM from 'react-dom';\nimport React from 'react';\nimport Popover from '../../Popover';\n\nconst containerID = 'tinymce-popoverContainer';\n\nexport const renderPopoverButton = ({ id, editor, component }) => {\n if (document.getElementById(containerID)) {\n return;\n }\n const popoverContainer = document.createElement('div');\n popoverContainer.id = containerID;\n editor.editorContainer.appendChild(popoverContainer);\n const btn = document.getElementById(id);\n const targetRef = { current: btn };\n let firstTime = false;\n const onClick = event => {\n if (!firstTime) {\n firstTime = true;\n return;\n }\n const formFieldsPopoverContains = document?.getElementsByClassName('formFields-popover')?.[0]?.contains(event.target);\n const emailOutcomePopoverContains = document?.getElementsByClassName('wfEmail-outcome-popover')?.[0]?.contains(event.target);\n const isClickOutside = !(popoverContainer.contains(event.target) || formFieldsPopoverContains || emailOutcomePopoverContains);\n if (isClickOutside) {\n ReactDOM.unmountComponentAtNode(popoverContainer);\n window.removeEventListener('click', onClick);\n if (editor.contentWindow.removeEventListener) {\n editor.contentWindow.removeEventListener('click', onClick);\n }\n popoverContainer.remove();\n }\n };\n ReactDOM.render(\n \n \n
\n \n \n
\n \n \n
\n \n \n
\n \n \n
\n${dom.join('')}
`;\n};\n\nconst createCustomFontSizeMenu = fontSizes => {\n window.changeTinMCEFontSize = fontSize => global.tinyMCE.execCommand('FontSize', false, decodeURIComponent(fontSize));\n const dom = fontSizes.map(size => {\n return ``;\n });\n return `${dom.join('')}
`;\n};\n\nconst createCustomButtonConfig = ({ icon, tooltip, html }) => ({\n icon,\n tooltip,\n type: 'colorbutton',\n border: '0 0 0 0',\n image: '',\n panel: {\n html,\n role: 'application',\n ariaRemember: true,\n onClick: () => {}\n },\n onPostRender: function onPostRender() {\n document.getElementById(this._id).addEventListener('click', () => {\n document.getElementById(this._id).querySelector('span.mce-open').click();\n });\n const id = this._id.replace('tinymce-', '');\n if (id !== undefined) {\n document.getElementById(`${id}-preview`).style.display = 'none';\n }\n },\n onclick: () => false\n});\n\nexport const sanitizeEditorContent = content => content.replace(CONTENT_REGEX, '');\n\nexport const getGlobalEventName = (id, eventName) => {\n return `tiny_${id}_${eventName}`;\n};\n\nexport const setGlobalEvents = (editorID, props) => {\n EVENTS.forEach((eventName, index) => {\n const handlerName = HANDLER_NAMES[index];\n const handler = props[handlerName];\n if (typeof handler !== 'function') { return; }\n\n window[getGlobalEventName(editorID, eventName)] = handler;\n });\n};\n\nexport const clearGlobalEvents = editorID => {\n EVENTS.forEach(eventName => {\n const globalHandlerName = getGlobalEventName(editorID, eventName);\n if (typeof window[globalHandlerName] === 'function') {\n delete window[globalHandlerName];\n }\n });\n};\nconst handleSaveStyle = () => {\n};\n\nconst handlePortalButtons = (e, id, type, wrapper, editor) => {\n const buttonSettings = {\n e,\n id: id,\n buttonType: type,\n onChange: handleSaveStyle(),\n targetButton: wrapper,\n actualButton: editor.dom.doc.getElementById(id)\n };\n editor.customEventForButtons.fire('customButtonClicked', buttonSettings);\n wrapper?.remove();\n};\nconst buttonTypes = ['setting', 'delete'];\nconst handleCustomButtonClick = (e, id, editor, customType) => {\n let wrapper = document.body.querySelector('.settingButonWrapper');\n if (wrapper) {\n wrapper.remove();\n }\n wrapper = global.document.createElement('div');\n ['click', 'scroll'].forEach(eventName => {\n editor.dom.doc.addEventListener(eventName, () => {\n wrapper.remove();\n }, true);\n document.getElementById('root').addEventListener(eventName, () => {\n wrapper.remove();\n }, true);\n });\n const mainPos = editor.contentAreaContainer.getBoundingClientRect();\n const realPos = e.currentTarget.getBoundingClientRect();\n if (!mainPos || !realPos) return;\n const x = mainPos.x + realPos.x + realPos.width;\n let y = mainPos.y + realPos.y + (realPos.height / 2);\n if (y < mainPos.y) {\n y = mainPos.y + 40;\n }\n if (y > mainPos.y + mainPos.height) {\n y = mainPos.y + mainPos.height - 40;\n }\n\n wrapper.style.left = `${x}px`;\n wrapper.style.top = `${y}px`;\n\n wrapper.classList.add('settingButonWrapper', 'shown');\n buttonTypes.forEach(type => {\n if (customType === 'customTable' && type === 'style') return;\n const button = global.document.createElement('div');\n button.classList.add('settingButon', [type]);\n button.append('\\u00A0');\n button.addEventListener('click', ev => handlePortalButtons(ev, id, type, wrapper, editor, ev.currentTarget), false);\n wrapper.append(button);\n });\n global.document.body.appendChild(wrapper);\n};\n\nconst handleHover = e => {\n if (e.type === 'mouseenter') {\n e.currentTarget.parentElement.classList.add('hoveredActionButton');\n return;\n }\n e.currentTarget.parentElement.classList.remove('hoveredActionButton');\n};\n\nexport const handleCustomButtonEvents = (editor, buttons) => {\n if (buttons.length <= 0) return;\n const content = editor.getContent();\n editor.setContent(content);\n buttons.forEach(buttonID => {\n const button = editor.dom.get(buttonID);\n\n if (!button) return;\n\n const type = button.getAttribute('data-buttontype');\n\n ['click', 'touchstart'].forEach(eventName => {\n button.addEventListener(eventName, ev => {\n handleCustomButtonClick(ev, buttonID, editor, type);\n }, true);\n });\n\n ['mouseenter', 'mouseleave'].forEach(eventName => {\n button.addEventListener(eventName, ev => handleHover(ev));\n });\n\n button.addEventListener('dblclick', ev => {\n handlePortalButtons(ev, button.id, 'setting', document.body.querySelector('.settingButonWrapper'), editor);\n });\n });\n};\n\nexport const setupEditor = (editorID, editor, props) => {\n const {\n translate, handleInsertImageClick, extraButtons, extraSetupFunctions, editorContainerClassname, popoverButtons, onCustomButtonSettingClick\n } = props;\n const isNewActionButtonsEnabled = window.isNewActionButtons;\n EVENTS.forEach((event, index) => {\n const handler = props[HANDLER_NAMES[index]];\n if (typeof handler !== 'function') { return; }\n editor.on(event, e => {\n const globalHandlerName = getGlobalEventName(editorID, event);\n window[globalHandlerName](e, editor); // working\n });\n });\n\n editor.customEventForButtons = new global.tinyMCE.util.EventDispatcher();\n editor.customEventForButtons.on('addCustomButton', ({ buttons }) => {\n handleCustomButtonEvents(editor, buttons);\n });\n editor.customEventForButtons.on('removeCustomButton', ({ buttons }) => {\n handleCustomButtonEvents(editor, buttons);\n });\n\n editor.customEventForButtons.on('customButtonClicked', ({\n e, id, buttonType, onChange, targetButton, actualButton\n }) => {\n if (onCustomButtonSettingClick) {\n onCustomButtonSettingClick(e, id, buttonType, editor, onChange, targetButton, actualButton);\n }\n });\n\n editor.on('redo undo', () => {\n handleCustomButtonEvents(editor, editor.customButtons);\n });\n\n if (isNewActionButtonsEnabled) {\n editor.on('drop', ({ targetClone, target }) => {\n const doc = target?.dom.doc;\n const dragContainer = doc.querySelector('.mce-drag-container');\n\n if (targetClone && targetClone?.getAttribute('data-isCustomButton')) {\n document.body.querySelector('.settingButonWrapper')?.remove();\n }\n\n if (dragContainer && dragContainer.querySelector('[data-iscustombutton=\"true\"')) {\n dragContainer.remove();\n }\n });\n }\n\n editor.on('init', () => {\n const content = editor.getContent();\n\n editor.dom.setAttrib(editor.dom.select('html')[0], 'id', 'stage');\n\n if (document.getElementById('mce-customfullscreen')) {\n const customFullscreenToolbarBtn = document.getElementById('mce-customfullscreen');\n const parent = customFullscreenToolbarBtn.parentNode.parentNode;\n parent.classList.add('mce-customfullscreen-btn');\n }\n\n if (editorContainerClassname) {\n editor.editorContainer.classList.add(editorContainerClassname);\n }\n const nonEditableLength = content.match(/mceNonEditable/g)?.length;\n // eslint-disable-next-line no-param-reassign\n editor.nonEditableLength = nonEditableLength;\n // eslint-disable-next-line no-param-reassign\n editor.hasNonEditables = nonEditableLength !== 0;\n });\n\n editor.on('change', () => {\n const content = editor.getContent();\n const { nonEditableLength, hasNonEditables } = editor;\n if (hasNonEditables) {\n const areNonEditablesDeleted = (content.match(/mceNonEditable/g)?.length ?? 0) < nonEditableLength;\n // eslint-disable-next-line no-prototype-builtins\n if (editor.plugins?.hasOwnProperty('noneditable') && areNonEditablesDeleted) {\n const undoed = editor.undoManager.undo();\n if (undoed?.content) {\n const eventName = getGlobalEventName(editorID, 'change');\n if (typeof window[eventName] === 'function') {\n window[eventName](null, undoed.content);\n }\n }\n return;\n }\n }\n if (CONTENT_REGEX.test(content)) {\n const newContent = sanitizeEditorContent(content);\n editor.setContent(newContent);\n }\n\n if (isNewActionButtonsEnabled && editor.customButtons) {\n editor.customButtons.forEach(buttonID => {\n const button = editor.dom.get(buttonID);\n\n if (!button) return;\n\n const type = button.getAttribute('data-buttontype');\n\n ['click', 'touchstart'].forEach(eventName => {\n button.addEventListener(eventName, ev => {\n handleCustomButtonClick(ev, buttonID, editor, type);\n }, true);\n });\n\n ['mouseenter', 'mouseleave'].forEach(eventName => {\n button.addEventListener(eventName, ev => handleHover(ev));\n });\n\n button.addEventListener('dblclick', ev => {\n handlePortalButtons(ev, button.id, 'setting', document.body.querySelector('.settingButonWrapper'), editor);\n });\n });\n }\n });\n\n if (extraSetupFunctions && extraSetupFunctions.length > 0) {\n extraSetupFunctions.forEach(({ id, callback }) => {\n if (callback !== undefined && typeof callback === 'function') {\n editor.on(id, callback);\n }\n });\n }\n\n const handleEsc = e => {\n if (e.key === 'Escape') {\n editor.setFullScreen(false);\n }\n };\n\n editor.setFullScreen = isOpen => {\n editor.editorContainer.classList.toggle('mce-fullscreen');\n editor.editorContainer.classList.toggle('mce-fullscreen-custom');\n if (isOpen) {\n editor.isFullscreen = true;\n window.addEventListener('keydown', handleEsc);\n editor.contentWindow.frameElement.contentDocument.body.addEventListener('keydown', handleEsc);\n } else {\n editor.isFullscreen = false;\n editor.editorContainer.style = editor.exStyles;\n window.removeEventListener('keydown', handleEsc);\n editor.contentWindow.frameElement.contentDocument.body.removeEventListener('keydown', handleEsc);\n }\n };\n\n const fontSizes = editor.settings.font_sizes || DEFAULT_FONT_SIZES;\n const fonts = createFormats(editor.settings.font_formats || DEFAULT_FORMATS);\n editor.addButton('customimage', { icon: 'image', tooltip: translate('Insert Image'), onClick: handleInsertImageClick });\n editor.addButton('alignment', createCustomButtonConfig({ tooltip: 'Text Align', icon: 'alignleft', html: ALIGNMENT_MENU }));\n editor.addButton('listmenu', createCustomButtonConfig({ tooltip: 'List', icon: 'bullist', html: LIST_MENU }));\n editor.addButton('customfontsize', createCustomButtonConfig({ tooltip: translate('Font Size'), icon: 'fontsize', html: createCustomFontSizeMenu(fontSizes) }));\n editor.addButton('customfontfamily', createCustomButtonConfig({ tooltip: 'Font Family', icon: 'fontfamily', html: createCustomFontFamilyMenu(fonts) }));\n editor.addButton('customfullscreen', {\n type: 'button',\n role: 'fullscreen',\n tooltip: 'Toggle fullscreen',\n icon: 'fullscreen',\n onclick: () => {\n editor.setFullScreen(!editor.isFullscreen);\n },\n id: 'mce-customfullscreen'\n });\n if (extraButtons && extraButtons.length > 0) {\n extraButtons.forEach(({ id, generator, ...editorButtonProps }) => {\n switch (true) {\n case generator !== undefined && typeof generator === 'function': {\n editor.addButton(id, { classes: 'custom-button ', ...generator(editor) });\n break;\n }\n default:\n editor.addButton(id, editorButtonProps);\n break;\n }\n });\n }\n\n if (popoverButtons && popoverButtons.length) {\n popoverButtons.forEach(({ id, component, ...popoverButtonProps }) => {\n editor.addButton(id, {\n type: 'button',\n id,\n onclick: () => {\n renderPopoverButton({ id, component, editor });\n },\n ...popoverButtonProps\n });\n });\n }\n};\n","import React, {\n useMemo, useEffect, useRef, useState, forwardRef, useImperativeHandle\n} from 'react';\nimport {\n string, elementType, shape, func, arrayOf\n} from 'prop-types';\n\nimport {\n Container as DefaultContainer,\n ErrorWrapper as DefaultErrorWrapper,\n LoadingWrapper as DefaultLoadingWrapper,\n ImageUploadPanel as DefaultImageUploadPanel\n} from './defaults';\n\nimport Modal from '../Modal';\n\nimport { generateShortID } from '../../utils';\nimport { useScript, useEffectIgnoreFirst } from '../../utils/hooks';\nimport {\n setupEditor, sanitizeEditorContent, setGlobalEvents, clearGlobalEvents\n} from './utils';\n\nimport { BASE_CONFIG, AVAILABLE_LANGUAGE_CODES } from './constants';\n\nconst RichTextEditor = forwardRef(({\n name, scriptSrc, value, defaultValue, config, translate, modalProperties, extraButtons,\n extraPlugins, extraSetupFunctions, customActionButtons,\n ErrorWrapperRenderer, LoadingWrapperRenderer, ImageUploadPanelRenderer, ContainerRenderer,\n ModalRenderer, editorContainerClassname, popoverButtons, ...props\n}, ref) => {\n const imageUploadModelRef = useRef();\n const editorFirst = useRef();\n const [editor, setEditor] = useState(false);\n const [customButtons, setCustomButtons] = useState([]);\n const { loaded, error } = useScript(scriptSrc);\n const id = useMemo(() => `react_tinymce_${generateShortID()}`, []);\n setGlobalEvents(id, props); // putting this line into an effect/memoize breaks everything. stupid but it should be in render. React useEffect bug.\n\n const defaultPlugins = config.plugins || BASE_CONFIG.plugins;\n const plugins = window.isNewActionButtons ? `${defaultPlugins} noneditable` : defaultPlugins;\n\n const editorConfig = useMemo(() => {\n const mceConfig = {\n ...BASE_CONFIG,\n ...config,\n plugins\n };\n return { ...mceConfig, language: mceConfig.language ? mceConfig.language.replace('_', '-') : BASE_CONFIG.language };\n }, [config]);\n\n const handleInsertImageClick = () => imageUploadModelRef.current.show();\n const handleImageUpload = ({ file: { url }, altText }) => {\n const img = `\n
\n \n
\n \n
\n \n
\n \n
\n \n {t('Select Form Fields')}\n
\n {selectedQuestionIDs && (\n \n
\n \n
\n \n {t('Your email content will be here')}\n \n \n
\n {selectedQuestionIDs.length > 0 && (\n \n
\n )}\n \n {questionRows.slice(0, 5).map(({ name, text }, i) => (\n
\n \n
\n ))}\n \n {text}\n
\n \n {`{${name}}`}\n
\n \n
\n );\n};\n\nDeleteSubmissionTableDialog.propTypes = {\n isDialogOpen: bool,\n tableID: string,\n editor: shape({}),\n onClose: func\n};\n\nDeleteSubmissionTableDialog.defaultProps = {\n isDialogOpen: false,\n tableID: '',\n editor: {},\n onClose: f => f\n};\n\nexport default DeleteSubmissionTableDialog;\n","function checkNodeType(selectedElement) {\n if (selectedElement.nodeName === '#text') return { node: selectedElement?.parentElement, nearestTable: selectedElement?.parentElement?.closest('table') };\n return { node: selectedElement, nearestTable: selectedElement?.closest('table') };\n}\n\nfunction getLatestRow(editor) {\n const emailDoc = editor.dom.doc;\n return emailDoc.querySelector('#mainMailContent')?.lastChild?.lastChild;\n}\n\nfunction findNearestParent(lastSelectedElement, editor) {\n let nearestParent;\n const { nearestTable, node } = checkNodeType(lastSelectedElement);\n const isMainTable = nearestTable?.id === 'mainMailContent';\n if (isMainTable) {\n if (lastSelectedElement.nodeName !== 'TBODY') {\n nearestParent = node?.closest('tr');\n } else {\n nearestParent = null;\n }\n } else if (lastSelectedElement.nodeName !== '#text' && lastSelectedElement?.querySelector('#mainMailContent')) {\n nearestParent = null;\n } else {\n nearestParent = nearestTable?.closest('tr');\n }\n\n if (lastSelectedElement.nodeName === 'P') {\n lastSelectedElement.remove();\n }\n\n return nearestParent ?? getLatestRow(editor);\n}\n\nexport function insertRow(editor, template) {\n let nearestParent = null;\n const latestCaretPos = editor.dom.doc.getSelection().anchorNode;\n const buttonContainer = document.createElement('tr');\n if (latestCaretPos) {\n nearestParent = findNearestParent(latestCaretPos, editor);\n } else {\n nearestParent = getLatestRow(editor);\n }\n buttonContainer.innerHTML = template;\n\n if (nearestParent) {\n editor.dom.insertAfter(buttonContainer, nearestParent);\n } else {\n editor.insertContent(buttonContainer);\n }\n\n editor.fire('change');\n}\n","import React, {\n useRef, forwardRef, useImperativeHandle, useState, useEffect, useMemo\n} from 'react';\nimport {\n bool, arrayOf, shape, string, func\n} from 'prop-types';\nimport { RichTextEditor } from '@jotforminc/uikit';\nimport { getPlaceholderListWithStaticFields, getTextForDuplicate } from '@jotforminc/utils';\nimport { t as translate } from '@jotforminc/translation';\nimport { SubmissionTableModal } from '@jotforminc/submission-table-modal';\nimport EditorImageUploadModal from '@jotforminc/image-upload-modal';\nimport DeleteSubmissionTableDialog from './components/DeleteSubmissionTableDialog';\nimport { insertRow } from './editorHelpers';\n\nimport './tinymce/scss/tinymce.scss';\n\nconst thankYouLayouts = [\n 'smallImageUp', 'smallImageDown', 'smallImageLeft',\n 'smallImageRight', 'smallCircleImageUp', 'smallCircleImageDown',\n 'smallCircleImageLeft', 'smallCircleImageright', 'bigImageUp',\n 'bigImageDown', 'bigImageRight', 'bigImageLeftHalf', 'bigImageCenterRectangle',\n 'bigImageCenterSquare', 'bigImageCenterCircle', 'bigImageQuarterCenter',\n 'bigImageRightQuzxarter', 'bigImageLeftHalfQuarter', 'bigImageTwoThirdsTop',\n 'bigImageTwoThirdsBottom', 'bigImageQuarterTop', 'bigImageQuarterBottom',\n 'bigImageQuarterLeft', 'bigImageQuarterRight', 'none', 'bigImageRightQuarter'\n];\n\nconst EmailEditor = forwardRef(({\n addFormFields,\n staticFieldsAtTop,\n staticFields,\n questions,\n extraEditorButtons,\n customActionButtons,\n selectedRow,\n initCallbacks,\n isEncrypted,\n ...props\n}, ref) => {\n const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);\n const [tableID, setTableID] = useState('');\n const [selectedQuestionIDs, setSelectedQuestionIDs] = useState([]);\n const [wizardQuestions, setWizardQuestions] = useState([]);\n const [newTables, setNewTables] = useState([]);\n const editorRef = useRef();\n const modalRef = useRef();\n\n const isNewActionButtons = !!window.isNewActionButtons;\n\n const mergedActionButtons = useMemo(() => [...customActionButtons, ...newTables], [customActionButtons, newTables]);\n\n useImperativeHandle(ref, () => ({\n ...editorRef.current,\n addStyleTag: (id, content) => {\n if (!(editorRef.current?.editor)) { return; }\n const layoutStyle = global.document.createElement('style');\n layoutStyle.type = 'text/css';\n layoutStyle.setAttribute('id', id);\n layoutStyle.innerHTML = content;\n const hasLayout = thankYouLayouts.find(el => editorRef.current?.editor.getWin().document.getElementById(el));\n if (!hasLayout) {\n editorRef.current?.editor.getWin().document.head.appendChild(layoutStyle);\n } else {\n if (hasLayout === id) { return; }\n const foundStyle = editorRef.current?.editor.getWin().document.getElementById(hasLayout);\n foundStyle.setAttribute('id', id);\n foundStyle.innerHTML = content;\n }\n }\n }));\n\n const editSubmissionTable = id => {\n const { editor } = editorRef.current;\n const questionTable = editor.dom.doc.getElementById(id);\n\n const questionRows = questionTable.getElementsByClassName('questionRow');\n const questionIDs = [];\n Array.from(questionRows).forEach(node => questionIDs.push(node.id.split('_')[1]));\n\n setSelectedQuestionIDs(questionIDs);\n setWizardQuestions(questions);\n\n modalRef.current.show();\n };\n\n useEffect(() => {\n return () => {\n const htmlClass = document.querySelector('html').classList;\n const bodyClass = document.querySelector('body').classList;\n if (htmlClass.contains('mce-fullscreen') || bodyClass.contains('mce-fullscreen')) {\n document.querySelector('body').classList.remove('mce-fullscreen');\n document.querySelector('html').classList.remove('mce-fullscreen');\n }\n };\n }, []);\n\n useEffect(() => {\n const { targetItem, actionType } = selectedRow;\n if (targetItem && actionType && targetItem?.id && !tableID) {\n const targetItemID = targetItem.id;\n setTableID(targetItemID);\n if (actionType === 'tableSetting') {\n editSubmissionTable(targetItemID);\n }\n if (actionType === 'tableDelete') {\n setIsDeleteDialogOpen(true);\n }\n }\n }, [selectedRow]);\n\n const handleSubmissionTable = selectedQuestionIDList => {\n const selectedQuestions = questions.filter(question => {\n return selectedQuestionIDList.includes(question.qid);\n });\n\n if (!tableID) {\n let questionsTemplate = '';\n selectedQuestions.forEach(({\n qid, name, text, order\n }) => {\n questionsTemplate += `\n
\n )}\n \n
\n \n );\n};\n\nEditableItem.propTypes = {\n itemInfo: shape({}),\n handleDoubleClick: func,\n isMobileMultipleSelectMode: bool,\n isDragDisabled: bool,\n isDragging: bool,\n isLinkedWithDataSource: bool\n};\n\nEditableItem.defaultProps = {\n itemInfo: {},\n handleDoubleClick: f => f,\n isMobileMultipleSelectMode: false,\n isDragDisabled: false,\n isDragging: false,\n isLinkedWithDataSource: false\n};\n\nexport default memo(EditableItem);\n","/* eslint-disable react/prop-types */\nimport React, { useEffect } from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { useParams } from '@reach/router';\nimport SELECTORS from '../../../store/selectors';\nimport * as ACTION_CREATORS from '../../../store/actionCreators';\nimport { Loading } from '../../../components/Loading';\n\nconst dataSourceHoc = WrappedComponent => {\n return props => {\n const { itemInfo } = props;\n const isBuilder = useSelector(SELECTORS.getIsBuilder);\n const itemProps = isBuilder ? itemInfo : props;\n const { linkedItemID } = useSelector(SELECTORS.getPageByID(itemProps?.page)) ?? {};\n const isLinkedWithDataSource = !!linkedItemID;\n\n const dispatch = useDispatch();\n const _activeRowID = useSelector(SELECTORS.dsGetActiveListRowID(linkedItemID));\n const { rowID } = useParams();\n const activeRowID = _activeRowID ?? rowID;\n const isLoading = useSelector(SELECTORS.dsGetItemIsLoading(itemProps.id));\n const dataSourceProps = useSelector(SELECTORS.dsGetRowsByItemID(itemProps?.id));\n\n useEffect(() => {\n if (itemProps?.id && isLinkedWithDataSource && !!activeRowID) {\n dispatch(ACTION_CREATORS.dsFetchRow({ itemID: itemProps.id, rowID: activeRowID, linkedItemID }));\n }\n }, [\n itemProps.id,\n activeRowID,\n linkedItemID\n ]);\n\n if (!isLinkedWithDataSource) {\n return (\n \n \n {error}\n \n
\n )}\n {\n info && isItemSelected && (\n \n \n \n {info}\n \n \n\n
\n )\n }\n \n
\n \n {showPageInlineEdit && !linkedItemID && (\n \n 1}\n onMoveUpClick={onPageMoveUp}\n onMoveDownClick={onPageMoveDown}\n onItemSettingsClick={onPageSettingsClick}\n />\n \n \n \n \n {isErrorVisible && (\n \n {errorMessage}\n \n )}\n \n {showAddNewPage ? (\n dispatch(ACTION_CREATORS.addNewPageAction({ newPageOrder: parseInt(pageOrder, 10) + 1 }))}\n data-testid=\"addPageButton\"\n text={t('Add a Page')}\n />\n ) : null}\n
\n );\n};\n\nPageItem.propTypes = {\n pageItem: shape({}),\n pageIndex: number,\n pageCount: number,\n disableAddPageButton: bool\n};\n\nPageItem.defaultProps = {\n pageItem: {},\n pageIndex: 0,\n pageCount: 0,\n disableAddPageButton: false\n};\n\nexport default memo(PageItem);\n","import React from 'react';\nimport { useSelector } from 'react-redux';\nimport ScBuilderItemListWrapper from '../ScBuilderItemListWrapper';\nimport ScItemListWrapper from '../ScItemListWrapper';\nimport SELECTORS from '../../../../../store/selectors';\nimport BuilderItem from '../BuilderItem';\nimport { ITEM_TYPES } from '../../../../../constants/itemTypes';\nimport ScItemContainer from '../ItemContainer/ScItemContainer';\nimport { ITEM_STYLING_LIST } from '../../../../../properties/styling';\n\nconst ContactInformationPage = () => {\n const listBgColor = useSelector(SELECTORS.getListBgColor);\n const selectedTheme = useSelector(SELECTORS.getSelectedAppTheme);\n\n const itemStyles = ITEM_STYLING_LIST[selectedTheme?.id];\n\n return (\n \n
\n \n {pages.map((page, pageIndex) => (\n
\n {(isFeatureEnabled(FEATURE_NAMES.ContactInformation) && isPaymentApp) && \n {children}\n
\n );\n};\n\nconst FitHeight = ({ children }) => children;\n\nconst containerMapper = {\n [LIVE_PREVIEW_SIZE_MODES.ACTUAL_SIZE]: ActualSize,\n [LIVE_PREVIEW_SIZE_MODES.FIT_HEIGHT]: FitHeight\n};\n\nconst PreviewPanelContainer = ({ children }) => {\n const previewSizeMode = useSelector(SELECTORS.getLivePreviewSizeMode);\n const Container = containerMapper[previewSizeMode];\n\n return (\n \n
\n - \n {items.map(item => (\n
\n {icon}\n {title && (\n \n Phone\n \n )}\n
\n {type === 'dropdown' && (\n \n
\n );\n};\n\nexport default memo(PreviewPanelHeader);\n","import { usePrevious } from '@jotforminc/hooks';\nimport { useState, useEffect } from 'react';\nimport { useSelector } from 'react-redux';\nimport selectors from '../../store/selectors';\n\nconst usePanelAnimation = () => {\n const isLivePreviewOn = useSelector(selectors.getIsLivePreviewOn);\n const isPreviewPanelOpen = useSelector(selectors.isPreviewPanelOpenSelector);\n const isRightPanelOpen = useSelector(selectors.isRightPanelOpenSelector);\n const previousLivePreviewOn = usePrevious(isLivePreviewOn);\n const [rightPanelAnimation, setRightPanelAnimation] = useState(false);\n const [previewPanelAnimation, setPreviewPanelAnimation] = useState(false);\n\n useEffect(() => {\n const updateRightPanelAnimation = () => {\n if (!isLivePreviewOn || !isRightPanelOpen) {\n setRightPanelAnimation(isRightPanelOpen);\n } else if (isRightPanelOpen) {\n setTimeout(() => setRightPanelAnimation(isRightPanelOpen), 350);\n }\n };\n\n updateRightPanelAnimation();\n }, [isRightPanelOpen, isLivePreviewOn]);\n\n useEffect(() => {\n const updatePreviewPanelAnimation = () => {\n const isOpen = isPreviewPanelOpen && isLivePreviewOn;\n if (isPreviewPanelOpen && (previousLivePreviewOn !== isLivePreviewOn)) {\n setPreviewPanelAnimation(isOpen);\n }\n\n if (!isPreviewPanelOpen) {\n setPreviewPanelAnimation(isOpen);\n }\n\n setTimeout(() => setPreviewPanelAnimation(isOpen), 350);\n };\n\n updatePreviewPanelAnimation();\n }, [isLivePreviewOn, isPreviewPanelOpen]);\n\n return {\n rightPanelAnimation,\n previewPanelAnimation,\n isLivePreviewOn,\n isPreviewPanelOpen\n };\n};\n\nexport default usePanelAnimation;\n","import React, { useEffect, useRef, useState } from 'react';\nimport './styles/styles.scss';\nimport { useDispatch, useSelector } from 'react-redux';\nimport classNames from 'classnames';\nimport { useDebounce } from '@jotforminc/hooks';\nimport { CSSTransition } from 'react-transition-group';\nimport SELECTORS from '../../../../../store/selectors';\nimport PreviewPanelBody from './components/PreviewPanelBody';\nimport PreviewPanelHeader from './components/PreviewPanelHeader';\nimport { APP_PREVIEW_STATES } from '../../../../../constants';\nimport { setLivePreviewStatus, togglePreviewPanelAction } from '../../../../../store/actionCreators';\nimport { checkHasTabletWidth } from '../../../../../utils';\nimport usePanelAnimation from '../../../../../utils/hooks/usePanelAnimations';\n\nconst PreviewPanel = () => {\n const dispatch = useDispatch();\n const previewPanelRef = useRef(null);\n const isRightPanelOpen = useSelector(SELECTORS.isRightPanelOpenSelector);\n const isLeftPanelOpen = useSelector(SELECTORS.isLeftPanelOpenSelector);\n const shouldSqueeze = useSelector(SELECTORS.shouldSqueezeSelector);\n const updatedAt = useSelector(SELECTORS.getAppUpdatedAt);\n const [hasTabletWidth, setHasTabletWidth] = useState(checkHasTabletWidth());\n const [isUpdated, setIsUpdated] = useState(updatedAt);\n const {\n previewPanelAnimation,\n isPreviewPanelOpen,\n isLivePreviewOn\n } = usePanelAnimation();\n\n useEffect(() => {\n if (!isPreviewPanelOpen) {\n dispatch(setLivePreviewStatus(APP_PREVIEW_STATES.IDLE));\n }\n }, [isPreviewPanelOpen, isLivePreviewOn]);\n\n useEffect(() => {\n if (updatedAt !== isUpdated) {\n setIsUpdated(true);\n const timer = setTimeout(() => {\n setIsUpdated(false);\n }, 1300);\n return () => clearTimeout(timer);\n }\n }, [updatedAt]);\n\n const handlePreviewPanelDisplay = () => {\n if (!isLivePreviewOn) return;\n\n if (checkHasTabletWidth()) {\n dispatch(togglePreviewPanelAction(false));\n setHasTabletWidth(true);\n return;\n }\n\n if (shouldSqueeze) {\n setHasTabletWidth(false);\n dispatch(togglePreviewPanelAction(!isRightPanelOpen && !isLeftPanelOpen));\n return;\n }\n\n setHasTabletWidth(false);\n dispatch(togglePreviewPanelAction(!isRightPanelOpen));\n };\n const debouncedHandlePreviewPanelDisplay = useDebounce(handlePreviewPanelDisplay, 150);\n\n useEffect(() => {\n window.addEventListener('resize', debouncedHandlePreviewPanelDisplay);\n debouncedHandlePreviewPanelDisplay();\n return () => {\n window.removeEventListener('resize', debouncedHandlePreviewPanelDisplay);\n };\n }, [hasTabletWidth, isPreviewPanelOpen, shouldSqueeze, isRightPanelOpen, isLeftPanelOpen]);\n\n if (hasTabletWidth) {\n return null;\n }\n\n return (\n \n
\n Live Preview
\n\n
\n \n
\n );\n};\n\nexport default VoiceButton;\n","import { UserState } from '../typings/state';\n\n/* eslint-disable max-len */\nexport const createInitial = (user: UserState) => {\n const reducers = {\n promptValue: '',\n form: {\n form_id: '',\n url: ''\n },\n messages: [],\n manual_changes: null,\n formProperties: {},\n user,\n fullstoryUrl: ''\n };\n return reducers;\n};\n\nexport const CustomActionTypes = [\n {\n id: 'add-logo',\n text: 'Add a logo to your form'\n },\n {\n id: 'change-tone-of-voice',\n text: 'Change tone of voice'\n },\n {\n id: 'get-fonts',\n text: 'Change Font'\n }\n];\n\nexport const AIActionTypes = {\n CREATE_AI_FORM: 'CREATE_AI_FORM',\n ADD_MESSAGE_TO_CHAT: 'ADD_MESSAGE_TO_CHAT',\n UNDO_LAST_ACTION: 'UNDO_LAST_ACTION',\n SHOW_ERROR_MESSAGE: 'SHOW_ERROR_MESSAGE',\n SET_FULLSTORY_URL: 'SET_FULLSTORY_URL'\n} as const;\n\nexport const mockFormProps = {\n form_id: '240242090608044',\n url: 'https://form.jotform.com/240242090608044',\n messages: []\n};\n\nexport const MessageTypes = {\n // It's only user's entered prompt. It's use for ai prompt history\n USER_MESSAGE: 'USER_MESSAGE',\n // Only user action, it's exist in ai message histories\n USER_ACTION: 'USER_ACTION',\n ASSISTANT: 'ASSISTANT',\n TOOL: 'TOOL',\n CUSTOM: 'CUSTOM',\n ERROR: 'ERROR',\n RETRYABLE_ERROR: 'RETRYABLE_ERROR',\n UNDO: 'UNDO',\n HELP: 'HELP',\n WELCOME: 'WELCOME'\n};\n\nexport const ExampleBuildPrompts = [\n 'I want to build a registration form for student events',\n 'I want to build an order form for my cupcake store',\n 'I want to build a feedback form for my customers',\n 'I want to build a job application form for my company'\n];\n\nexport const ExamplePromptBoxes = [\n {\n slug: 'Registration Form',\n prompt: 'Create a course registration form suitable for any school or institution.'\n },\n {\n slug: 'Job Application Form',\n prompt: 'Develop a basic job application form that serves as a one-page solution for collecting essential information from applicants. This form should encompass personal details, educational background, and reference information. You can use your imagination to generate more fields related to the topic.'\n },\n {\n slug: 'Feedback Form',\n prompt: 'Create a client feedback form to gather valuable insights from my clients.'\n },\n {\n slug: 'Appointment Form',\n prompt: 'Develop an appointment request form tailored for medical practices. This form should collect information needed to schedule health appointments, such as a patient\\'s name, address, and contact details.'\n }\n];\n\nexport const ExamplePrompts = [\n {\n slug: 'Course Registration Form',\n prompt: 'Create a course registration form suitable for any school or institution.'\n },\n {\n slug: 'Job Application Form',\n prompt: 'Develop a basic job application form that serves as a one-page solution for collecting essential information from applicants. This form should encompass personal details, educational background, and reference information. You can use your imagination to generate more fields related to the topic.'\n },\n {\n slug: 'Client Feedback Form',\n prompt: 'Create a client feedback form to gather valuable insights from my clients.'\n },\n {\n slug: 'Appointment Request Form',\n prompt: 'Develop an appointment request form tailored for medical practices. This form should collect information needed to schedule health appointments, such as a patient\\'s name, address, and contact details.'\n },\n {\n slug: 'Math Quiz',\n prompt: 'Generate a math quiz form to conduct quizzes online. Customize the form to include various math questions, sections, or topics that align with high school curriculum.'\n },\n {\n slug: 'Summer Camp Consent Form',\n prompt: 'Create a summer camp permission or consent form for students. Add a signature field for parents\\' consent.'\n },\n {\n slug: 'Beauty Clinic Feedback Form',\n prompt: 'I run a beauty clinic. Create a feedback form to collect my customers\\' comments, suggestions, questions, and complaints.'\n },\n {\n slug: 'Hotel Booking Form',\n prompt: 'Generate a hotel booking form for my boutique hotel.'\n },\n {\n slug: 'Volunteer Application Form',\n prompt: 'My nonprofit organization needs a volunteer application form that includes a background check.'\n },\n {\n slug: 'Clinic Appointment Form',\n prompt: 'Create a comprehensive appointment form for my clinic.'\n },\n {\n slug: 'Video Contest Application Form',\n prompt: 'Generate a form to accept applications to my video contest. The form should have fields for application details and a section to allow applicants to upload up to 3 videos. Applicants should pass a CAPTCHA to submit.'\n },\n {\n slug: 'Tattoo Studio Contact Form',\n prompt: 'I need a contact form for my tattoo studio. My communication tone is friendly and sarcastic, so the form should be as well.'\n },\n {\n slug: 'Identity Verification Form',\n prompt: 'Develop an online identity verification form for my company to conduct thorough identity checks on new employees. The form should gather essential information to ensure the accuracy and legitimacy of the provided details.'\n },\n {\n slug: 'Mobile App Satisfaction Survey',\n prompt: 'Client satisfaction survey for my mobile app.'\n }\n];\n\nexport const ASSISTANT_ROLES: string[] = [\n MessageTypes.ASSISTANT,\n MessageTypes.CUSTOM,\n MessageTypes.UNDO,\n MessageTypes.ERROR,\n MessageTypes.RETRYABLE_ERROR,\n MessageTypes.HELP,\n MessageTypes.WELCOME\n];\n\nexport const EXCEPTIONAL_ASSISTANT_ROLES: string[] = [\n MessageTypes.UNDO,\n MessageTypes.ERROR,\n MessageTypes.RETRYABLE_ERROR\n];\n\nexport const PROMT_PROPS = {\n MAX_LENGTH: 500\n};\n","import React, { useEffect, useRef } from 'react';\nimport { t } from '@jotforminc/translation';\nimport { PROMT_PROPS } from '../../constants';\nimport './ai-chat.scss';\nimport { MessageState } from '../../typings/state';\n\ntype Props = {\n text: string,\n setText: (text: string) => void,\n handleSend?: () => void,\n disabled?: boolean,\n inputProps?: object,\n isOpened?: boolean\n isWaitingAnswer?: boolean\n messages: MessageState[]\n}\n\nconst ChatInput: React.FC\n
\n );\n};\n\nexport default ChatInput;\n","import React, {\n useEffect, useState, useRef, ReactNode\n} from 'react';\nimport DOMPurify from 'dompurify';\nimport AILogo from '../../assets/svg/AILogo.svg';\nimport GuestLogo from '../../assets/svg/guest-podo.svg';\n\n// TODO add to SVGs lib.\nconst AIIcon = () => {\n return \n
\n \n setText?.(e.target.value)}\n aria-label={t('Chat Input')}\n onKeyDown={handleKeyDown}\n maxLength={PROMT_PROPS.MAX_LENGTH}\n {...inputProps}\n />\n
\n \n {isAssistant ?
\n\n \n
\n \n {username}\n
\n \n \n {actionButtons && actionButtons}\n
\n - ${helpMessagesText}
- \n {children}\n
\n {isActionGroupOpen && (\n \n \n \n
\n\n );\n};\n\nexport default ActionGroup;\n","/* eslint-disable max-len */\nimport React, {\n useState, useEffect, useRef,\n FormEvent,\n ComponentProps\n} from 'react';\n\n// @components\nimport { Button } from '@jotforminc/magnet';\nimport {\n IconArrowReverseLeft, IconPaperPlaneFilled\n} from '@jotforminc/svg-icons';\nimport VoiceButton from '@jotforminc/voice-button';\nimport { t } from '@jotforminc/translation';\nimport { isSafari, isUserAllowedView } from '@jotforminc/utils';\nimport type { User } from '@jotforminc/types';\nimport ChatInput from '../ChatInput';\nimport Message from '../Message';\n// import Loading from '../Loading';\nimport PromptLoader from '../../assets/svg/PromptLoader.svg';\nimport {\n ASSISTANT_ROLES,\n EXCEPTIONAL_ASSISTANT_ROLES,\n MessageTypes\n} from '../../constants';\nimport { formatMessage, noop, promptLengthLimit } from '../../utils';\nimport { ActionState, MessageState } from '../../typings/state';\nimport ActionGroup from '../ActionGroup';\n\n// TODO: add to SVG icons lib.\nconst LoadingIcon = () => {\n return \n
\n )}\n There are no messages to display here.
,\n addMessage,\n undoLastAction,\n onSpeechEnd = noop,\n hideActionsIn = 0,\n isUserFormOwner = false,\n chatName = 'Jotform AI',\n logAIBuilderActions = noop,\n staticActions = null,\n undoable = true\n}) => {\n const scrollDivRef = useRef\n
\n \n );\n}\n\nexport default AiAssistant;\n","import React, { useRef } from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport RightPanel from '.';\nimport usePanelAnimation from '../../../../../utils/hooks/usePanelAnimations';\n\nconst RightPanelTransition = () => {\n const previewPanelRef = useRef(null);\n const { rightPanelAnimation } = usePanelAnimation();\n\n return (\n \n \n
\n \n {[...Array(15)].map(() => (\n \n ))}\n
\n \n (\n
\n \n
\n )}\n />\n \n {translationRenderer('Hi [1[{username}]], welcome to [2[Copilot!]]')({\n renderer1: () => user.name || user.username,\n renderer2: () => Copilot!\n })}\n\n
\n \n {t('Create an app for your needs, add new pages or generate content for elements with the help of AI.')}\n
\n \n
\n \n );\n};\n\nexport default RightPanelTransition;\n","import React, { useEffect, useCallback, useState } from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { DragDropContext } from 'react-beautiful-dnd';\nimport classnames from 'classnames';\n\nimport { ZoomSocketLayer } from '@jotforminc/zoom-socket';\nimport { PanelToggleWrapper } from '@jotforminc/panel-components';\nimport { BGColorLightness } from '@jotforminc/jotform-common';\n\nimport DesignButton from '../DesignButton';\nimport AddItemButton from '../AddItemButton';\nimport SELECTORS from '../../../../store/selectors';\nimport { ScBuilderStageContainer } from '../../styles/scSelect';\nimport * as ACTION_CREATORS from '../../../../store/actionCreators';\nimport LeftPanel from './LeftPanel';\nimport { ITEM_TYPES } from '../../../../constants/itemTypes';\nimport MultiPageNavigationBar from '../MultiPageNavigationBar';\nimport PortalFeedbackWithWarning from '../PortalFeedbackWithWarning';\nimport Main from './Main';\nimport PaymentSettingsButton from '../PaymentSettingsButton';\nimport BuilderSelectable from '../BuilderSelectable';\nimport { isFeatureEnabled } from '../../../../utils/features/helper';\nimport { FEATURE_NAMES } from '../../../../constants/features';\nimport { fetchIsAllowedZoomWidget } from '../../../api';\nimport PreviewPanel from './MobileView/PreviewPanel';\nimport AiAssistant from '../AiAssistant';\nimport RightPanelTransition from './RightPanel/RightPanelTransition';\nimport { ScPageStagePanels } from '../../styles/scRightPanel';\nimport AiAssistantButton from '../AiAssistant/AiAssistantButton';\n\nconst HomePage = () => {\n const dispatch = useDispatch();\n const createdWithForm = useSelector(SELECTORS.getCreatedWithForm);\n const isAppCoverCropperActive = useSelector(SELECTORS.getAppCoverCropState);\n const isAppHeaderCropperActive = useSelector(SELECTORS.getAppHeaderCropState);\n const isRightPanelOpen = useSelector(SELECTORS.isRightPanelOpenSelector);\n const isLeftPanelOpen = useSelector(SELECTORS.isLeftPanelOpenSelector);\n const lastPanelOpened = useSelector(SELECTORS.getLastPanelOpened);\n const isShoppingApp = useSelector(SELECTORS.getIsShoppingApp);\n const isDonationApp = useSelector(SELECTORS.getIsDonationApp);\n const user = useSelector(SELECTORS.getUser);\n const { appHeaderBgColor } = useSelector(SELECTORS.getAppInfoWithDefaults);\n const isDesignButtonInvert = BGColorLightness(appHeaderBgColor);\n const currentStep = useSelector(SELECTORS.getCurrentStep);\n const showAiAssistant = isFeatureEnabled(FEATURE_NAMES.AiAssistant) && currentStep === 'build';\n\n const [isAllowedToSeeZoomWidget, setIsAllowedToSeeZoomWidget] = useState(false);\n\n const handleZoomWidget = async () => {\n try {\n const content = await fetchIsAllowedZoomWidget();\n if (content) {\n setIsAllowedToSeeZoomWidget(true);\n }\n } catch (error) {\n console.log(error);\n }\n };\n\n useEffect(() => {\n if (window.resourcePickerOpen && window.resourceType !== '') {\n window.resourcePickerOpen = false;\n dispatch(ACTION_CREATORS.onLeftPanelItemClickAction(ITEM_TYPES[window.resourceType]));\n window.resourceType = '';\n }\n }, []);\n\n useEffect(() => {\n if (createdWithForm) {\n dispatch(ACTION_CREATORS.toggleLeftPanelAction(true));\n }\n handleZoomWidget();\n }, []);\n\n const handleDragEnd = useCallback(dragDropResult => {\n dispatch(ACTION_CREATORS.onDragEnd(dragDropResult));\n }, []);\n const isPreviewPanelOpen = useSelector(SELECTORS.isPreviewPanelOpenSelector);\n const selectedItems = useSelector(SELECTORS.getSelectedPortalItemsCount) > 0;\n\n return (\n \n \n \n
\n \n \n \n \n \n \n \n {isFeatureEnabled(FEATURE_NAMES.AiAssistant) &&
\n