- {children}
\n
\n );\n};\n\nNoImage.propTypes = {\n altText: string,\n showAltText: bool,\n PlaceholderRenderer: elementType\n};\n\nNoImage.defaultProps = {\n altText: '',\n showAltText: true,\n PlaceholderRenderer: IconImageBrokenFilled\n};\n\nexport default memo(NoImage);\n","import {\n bool, elementType, string\n} from 'prop-types';\nimport React, { memo, useEffect, useState } from 'react';\nimport NoImage from './NoImage';\n\nconst Image = ({\n imageURL, altText, showAltTextActiveOnError, PlaceholderRenderer\n}) => {\n const [useFallback, setUseFallback] = useState(false);\n\n useEffect(() => {\n setUseFallback(false);\n }, [imageURL]);\n\n if (useFallback) {\n return {altText}
}\n \n {ItemIcon}\n
\n \n );\n};\n\nSimpleIcon.propTypes = {\n iconURL: string,\n itemType: string,\n fileType: string,\n itemTextAlignment: string,\n itemIconBgColor: string,\n itemIconColor: string,\n elementSize: string,\n useResourceSelectionIcons: bool,\n iconClassName: string\n};\n\nSimpleIcon.defaultProps = {\n iconURL: '',\n itemType: '',\n fileType: '',\n itemTextAlignment: '',\n itemIconBgColor: '',\n itemIconColor: '',\n elementSize: '',\n useResourceSelectionIcons: false,\n iconClassName: ''\n};\n\nexport default SimpleIcon;\n","import React, { useCallback, useMemo } from 'react';\nimport {\n elementType, bool, string, node\n} from 'prop-types';\nimport { checkMobilePhone, sanitizeHTML } from '../../../utils';\nimport { DefaultDivRenderer } from '../defaultRenderers';\nimport { withContentWrapper } from '../withContentWrapper';\n\nconst SimpleItem = ({\n TitleRenderer, DescriptionRenderer,\n showIcon, IconRenderer,\n title, description,\n badge, iconClassName\n}) => {\n const isMobile = checkMobilePhone();\n // Consider twice while adding prop!\n const contentPart = useMemo(withContentWrapper(() => (\n <>\n \n
\n);\n","import React from 'react';\nimport { useSelector } from 'react-redux';\nimport SELECTORS from '../../../store/selectors';\n\nconst DefaultStartElement = () => {\n const { listBgColor, appBgColor } = useSelector(SELECTORS.getAppInfoWithDefaults);\n const { id: themeId } = useSelector(SELECTORS.getSelectedAppTheme) || {};\n const defaultColors = { background: appBgColor, icon: listBgColor };\n\n const getSvgColors = theme => {\n switch (theme) {\n case 'shadow':\n return { background: listBgColor, icon: appBgColor };\n case 'default':\n return { background: '#E3E5F5', icon: '#6C73A8' };\n default:\n return defaultColors;\n }\n };\n\n const svgColors = themeId ? getSvgColors(themeId) : defaultColors;\n\n return (\n \n {\n data === SIDE_SELECTION_DEFAULTS[type]\n ? 
\n }\n
\n );\n }\n\n case OPTION_VALUES.ICON: {\n return ({ colorScheme }) => {\n return (\n {t('An unexpected error occurred.')}
\n{t('Can you elaborate what were you trying to do?')}
\n \n
\n );\n };\n return renderThumbnail();\n};\n\nThumbnail.propTypes = {\n file: shape({\n name: string,\n type: string\n })\n};\n\nThumbnail.defaultProps = {\n file: {}\n};\n\nexport default Thumbnail;\n","import React, { useCallback, useRef } from 'react';\nimport { bool, func, string } from 'prop-types';\nimport { Button } from '@jotforminc/magnet';\nimport { IconImageArrowUpFilled } from '@jotforminc/svg-icons';\nimport { Utils } from '@jotforminc/uikit';\nimport { isMultiSelection } from '../../utils';\n\nconst FileInput = ({\n putFileInput, translate, buttonText, onClick, ...inputProps\n}) => {\n const inputRef = useRef();\n const isBrowserMsEdge = global.isMsEdge && global.isMsEdge === true;\n const htmlFor = isBrowserMsEdge ? 'dummyHtmlForElement' : null;\n const handleLabelClick = () => isBrowserMsEdge && inputRef.current && inputRef.current.click();\n const handlelInputClick = useCallback(e => {\n const multipleSelectionMode = isMultiSelection(e);\n if (!multipleSelectionMode) return onClick(e);\n\n e.preventDefault();\n }, []);\n\n const handleLabelKeyDown = event => Utils.isPressedKeyEnterOrSpace(event) && handleLabelClick();\n const onUploadBtnClick = () => inputRef.current.click();\n\n return (\n <>\n \n
\n );\n};\n\nFileLoadingRenderer.propTypes = {\n translate: func\n};\n\nFileLoadingRenderer.defaultProps = {\n translate: f => f\n};\n\nexport default FileLoadingRenderer;\n","import React from 'react';\nimport {\n bool, elementType, func, shape, string\n} from 'prop-types';\nimport { t } from '@jotforminc/translation';\nimport { ImageUpload as CommonFileUpload } from '@jotforminc/image-upload';\nimport { ScFileUpload } from './scFileUpload';\nimport Thumbnail from './Thumbnail';\nimport FileInput from './FileInputRenderer';\nimport FileLoadingRenderer from './FileLoadingRenderer';\n\nconst PortalFileUpload = ({\n onFileUpload, onFileRemove, onFileUploading, theme, isFileUploading, value, onFileUploadError, TextWrapperRenderer,\n inputButtonText, allowedFileTypes, allowImageUpload\n}) => {\n return (\n \n {translate('Uploading')}\n ...\n
\n\n
\n { buttonText && (\n {t(message)}
\n { description && ({t(description)}
) }\n \n
\n ) : null}\n {errorMessage}
: null}\n \n {icon}\n
\n {title}
\n {subtitle}
\n {children && (\n \n {children}\n
\n )}\n {description && {description}
}\n {showDontShowAgain ? (\n \n ) : null}\n\n {t('To continue editing this app, let us know you\\'re still active by clicking the button below.')}\n
\n \n {t('Otherwise, you\\'ll be redirected to the Apps page.')}\n
\n \n )}\n />\n {children}
;\n\nDefaultContainerRenderer.propTypes = {\n children: node.isRequired,\n onMouseLeave: func\n};\n\nDefaultContainerRenderer.defaultProps = {\n onMouseLeave: f => f\n};\n\nexport default DefaultContainerRenderer;\n","import React, { useCallback, useMemo, useState } from 'react';\nimport {\n elementType, func, number, oneOfType, string\n} from 'prop-types';\nimport DefaultItemRenderer from './defaults/DefaultItemRenderer';\nimport DefaultContainerRenderer from './defaults/DefaultContainerRenderer';\n\nconst Rating = ({\n scale,\n value,\n onChange,\n ItemRenderer,\n ContainerRenderer\n}) => {\n const [hoveredIndex, setHoveredIndex] = useState();\n\n const items = useMemo(() => Array.from(new Array(scale), f => f), [scale]); // eslint-disable-line prefer-spread\n\n const valueCoversIndex = useCallback(itemIndex => { // itemIndices are 1 based!\n if (!value) return false;\n\n const numericVal = Number(value);\n return !Number.isNaN(value) && itemIndex <= numericVal;\n }, [value]);\n\n const handleMouseEnter = useCallback(hoveredIdx => setHoveredIndex(hoveredIdx), []);\n const handleMouseLeave = useCallback(() => setHoveredIndex(), []);\n\n return (\n \n
\n );\n };\n\n // eslint-disable-next-line no-unused-vars\n const FooterRenderer = () => (\n \n
\n {t('Give Feedback')}
\n{t('Help us provide you with a better experience.')}
\n\n {\n feedbackSent\n ? \n : (\n <>\n \n {t('Cancel')}\n \n \n {t('Send')}\n \n \n )\n }\n
\n );\n\n // eslint-disable-next-line react/prop-types\n const ContainerRenderer = ({ children, onMouseLeave }) => {\n return (\n {children}
\n );\n };\n\n const ItemRenderer = ({\n // eslint-disable-next-line react/prop-types\n index, covered, hovered, onChange, onMouseEnter\n }) => {\n const handleMouseEnter = useCallback(() => onMouseEnter(index), [index]);\n return (\n \n {!feedbackSent\n ? (\n \n \n {t(`How would you rate your experience with ${featureName}?`)} \n setStars(newRating)}\n />\n \n\n \n {t(feedbackTextLabel)} \n handlleTextareaValueChange(e.target.value)}\n />\n \n\n {isGuest && feedbackText.length > 0 && (\n \n {`${t('Email')} (${t('optional')})`} \n setFeedbackEmail(e.target.value)}\n />\n \n )}\n \n )\n : (\n <>\n
\n \n {t('Thank You!')}
\n{t('Your feedback has been received!')}
\n \n )}\n\n
\n ),\n message: 'Item deleted from your cart',\n color: 'red'\n },\n [FAVORITE_PRODUCT]: { Icon: () => \n
\n\n {product && (\n <>\n {t(message)}
\n \n
\n \n {type === FAVORITE_PRODUCT ? (\n \n {t('View My Favorites')}\n \n ) : (\n <>\n \n {t('View My Cart')}\n \n \n \n )}\n
\n \n )}\n \n Created\n `;\n\n changesInPages.forEach(change => {\n let messageItem = `
';\n\n lastMessage = {\n ...lastMessage,\n content: `${messageContent}`\n };\n\n newMessages[newMessages.length - 1] = lastMessage;\n\n return newMessages;\n};\n","import {\n call, put, select, takeEvery\n} from 'redux-saga/effects';\nimport * as ACTION_TYPES from '../actionTypes';\nimport SELECTORS from '../selectors';\nimport * as API from '../../modules/api';\nimport { isFeatureEnabled } from '../../utils/features/helper';\nimport { FEATURE_NAMES } from '../../constants/features';\nimport { AiChangesdList } from './helper';\nimport { AB_TESTS, logAbTestActionFor } from '../../utils/abtests';\nimport { isCreateAppWithCopilot } from '../../utils';\n\nconst AIMessages = {\n SOMETHING_WENT_WRONG: 'Sorry, something went wrong. Please try again later.'\n};\n\nconst withActions = isFeatureEnabled(FEATURE_NAMES.CopilotWithActions);\n\nfunction* fetchAIChatMessages() {\n const appID = yield select(SELECTORS.getAppID);\n\n try {\n const { messages } = yield call(API.aiFetchChatMessages, appID);\n if (!messages) {\n console.error('Expected messages on fetch chat messages but received: ', messages);\n return;\n }\n yield put({ type: ACTION_TYPES.AI_SET_MESSAGES, payload: messages });\n } catch (err) {\n console.log(err);\n }\n}\n\nfunction* addChatMessage({ payload }) {\n const appID = yield select(SELECTORS.getAppID);\n const { prompt: message } = payload;\n\n try {\n const { messages, portal, changes } = yield call(API.aiAddChatMessage, { appID, message, withActions });\n if (!messages) {\n console.error('Expected messages on add chat message but received: ', messages);\n yield put({ type: ACTION_TYPES.AI_SHOW_ERROR_MESSAGE, payload: AIMessages.SOMETHING_WENT_WRONG });\n return;\n }\n yield put({ type: ACTION_TYPES.AI_SET_MESSAGES, payload: messages });\n if (portal) {\n yield put({ type: ACTION_TYPES.UPDATE_PORTAL.SUCCESS, payload: portal });\n }\n if (changes) {\n const newMessages = AiChangesdList(messages, changes);\n if (newMessages) {\n yield put({ type: ACTION_TYPES.AI_SET_MESSAGES, payload: newMessages });\n }\n }\n document.querySelector('.ai-chat-input')?.focus();\n } catch (err) {\n console.error({ err });\n yield put({ type: ACTION_TYPES.AI_SHOW_ERROR_MESSAGE, payload: AIMessages.SOMETHING_WENT_WRONG });\n }\n}\n\nfunction* aiAssistantFlow({ payload }) {\n const { aiIsShow } = payload;\n const isBuilder = yield select(SELECTORS.getIsBuilder);\n const isAsisstantEnabledUser = isCreateAppWithCopilot();\n if (isAsisstantEnabledUser && isBuilder && aiIsShow) {\n yield fetchAIChatMessages();\n }\n}\n\nfunction logAbTestAction(params) {\n return function* logActionFor() {\n yield call(logAbTestActionFor, AB_TESTS.AiAssistant, params);\n };\n}\n\nexport default function* aiAssistant() {\n yield takeEvery(ACTION_TYPES.AI_SHOW_ASSISTANT, aiAssistantFlow);\n yield takeEvery(ACTION_TYPES.AI_ADD_CHAT_MESSAGE, addChatMessage);\n\n yield takeEvery(ACTION_TYPES.AI_SHOW_ASSISTANT, logAbTestAction({ action: 'click', target: 'copilot-button' }));\n yield takeEvery(ACTION_TYPES.ADD_PORTAL_ITEMS.REQUEST, logAbTestAction({ action: 'click', target: 'add-element' }));\n yield takeEvery(ACTION_TYPES.REMOVE_PORTAL_ITEMS.REQUEST, logAbTestAction({ action: 'click', target: 'remove-element' }));\n yield takeEvery(ACTION_TYPES.ADD_NEW_PAGE.REQUEST, logAbTestAction({ action: 'click', target: 'add-page' }));\n yield takeEvery(ACTION_TYPES.AI_ADD_CHAT_MESSAGE, logAbTestAction({ action: 'click', target: 'send-message' }));\n}\n","import { t } from '@jotforminc/translation';\nimport { addressHintObjectToString } from '@jotforminc/utils';\n\n// TODO: use from constants when question properties are moved to constants\nexport const getDefaultQuestionValues = () => ({\n control_textbox: {\n text: t('Type a question'),\n labelAlign: 'Auto',\n required: 'No',\n size: 20,\n validation: 'None',\n maxsize: '',\n inputTextMask: '',\n defaultValue: '',\n subLabel: '',\n hint: '',\n description: '',\n readonly: 'No'\n },\n control_phone: {\n text: t('Phone Number'),\n labelAlign: 'Auto',\n required: 'No',\n countryCode: 'No',\n inputMask: 'enable',\n inputMaskValue: '(###) ###-####',\n validation: 'None',\n description: '',\n sublabels: {\n country: t('Country Code'),\n area: t('Area Code'),\n phone: t('Phone Number'),\n full: t('Phone Number'),\n masked: ''\n },\n readonly: 'No',\n compoundHint: ''\n },\n control_address: {\n text: t('Address'),\n labelAlign: 'Auto',\n required: 'No',\n requiredInputs: 'st1|state|city|zip|country',\n selectedCountry: '',\n states: 'textbox',\n description: '',\n subfields: 'state|zip|st1|city|st2',\n sublabels: {\n addr_line1: t('Street Address'),\n addr_line2: t('Street Address Line 2'),\n city: t('City'),\n state: t('State / Province'),\n postal: t('Postal / Zip Code'),\n country: t('Country')\n },\n compoundHint: addressHintObjectToString({\n state_select: t('Please Select'),\n country_select: t('Please Select')\n }),\n countryDropdownDefaultText: t('Please Select'),\n customCountryDropdown: 'No',\n customCountryOptions: '',\n hasAutocomplete: 'No',\n hasGeolocation: 'No',\n customStateOptions: ''\n },\n control_textarea: {\n text: t('Type a question'),\n labelAlign: 'Auto',\n required: 'No',\n cols: 40,\n rows: 6,\n validation: 'None',\n entryLimitMin: 'None-0',\n entryLimit: 'None-0',\n maxsize: '',\n defaultValue: '',\n subLabel: '',\n hint: '',\n description: '',\n readonly: 'No',\n wysiwyg: 'Disable',\n mde: 'No',\n enableSentiment: 'No'\n },\n control_checkbox: {\n text: t('Type a question'),\n labelAlign: 'Auto',\n required: 'No',\n options: `${t('Type option 1')}|${t('Type option 2')}|${t('Type option 3')}|${t('Type option 4')}`,\n special: 'None',\n calcValues: '',\n allowOther: 'No',\n otherText: t('Other'),\n spreadCols: '1',\n selected: '',\n minSelection: '',\n maxSelection: '',\n description: '',\n shuffle: 'No',\n readonly: 'No'\n },\n control_radio: {\n text: t('Type a question'),\n labelAlign: 'Auto',\n required: 'No',\n options: `${t('Type option 1')}|${t('Type option 2')}|${t('Type option 3')}|${t('Type option 4')}`,\n special: 'None',\n calcValues: '',\n allowOther: 'No',\n otherText: t('Other'),\n selected: '',\n spreadCols: '1',\n description: '',\n shuffle: 'No',\n readonly: 'No'\n }\n});\n","import {\n put, take, takeEvery, select, call\n} from 'redux-saga/effects';\nimport { PaymentActions, Variables, checkIsGatewayConnectedAndTestMode } from '@jotforminc/payment-settings-editor';\nimport { arrayMove } from '@jotforminc/utils';\nimport { FEATURE_NAMES } from '../../constants/features';\nimport { isFeatureEnabled } from '../../utils/features/helper';\nimport * as ACTION_TYPES from '../actionTypes';\nimport SELECTORS from '../selectors';\nimport * as ACTION_CREATORS from '../actionCreators';\nimport { isYes } from '../../utils';\nimport { getDefaultQuestionValues } from '../../constants/questions';\nimport * as API from '../../modules/api';\n\nfunction* watchFetchQuestions({ payload: checkoutFormID }) {\n const result = yield call(PaymentActions.getQuestionProps, checkoutFormID);\n\n yield put({ type: ACTION_TYPES.FETCH_CHECKOUT_FORM_QUESTIONS.SUCCESS, payload: result });\n}\n\nfunction* watchFetchQuestionsSuccess() {\n const { connectedGateway, isGatewayConfigured, isGatewayTestMode } = yield select(SELECTORS.getGatewayProperties);\n const gatewaySettings = yield select(SELECTORS.getCheckoutFormActiveGatewaySettings);\n const checkoutFormPaymentQuestion = yield select(SELECTORS.getCheckoutFormPaymentQuestion);\n if (!checkoutFormPaymentQuestion) {\n const appID = yield select(SELECTORS.getAppID);\n try {\n const questions = yield call(API.createPaymentQuestion, appID);\n yield put({ type: ACTION_TYPES.ADD_CHECKOUT_FORM_QUESTION.SUCCESS, payload: questions[Variables.CHECKOUT_FORM_QUESTIONS.GATEWAY] });\n } catch (e) {\n console.error('Error while creating payment question', e);\n }\n }\n const { type = '' } = gatewaySettings;\n const [isConnected, isTestMode] = checkIsGatewayConnectedAndTestMode(gatewaySettings);\n if (connectedGateway !== type || isYes(isGatewayConfigured) !== isConnected || isYes(isGatewayTestMode) !== isTestMode) {\n yield put(ACTION_CREATORS.updatePortalAction({ connectedGateway: type, isGatewayConfigured: isConnected, isGatewayTestMode: isTestMode }));\n }\n}\n\nfunction* watchPaymentGatewayChanges({ payload }) {\n const { gatewaySettings, itemDeleted = 0, ...others } = payload;\n if (!isFeatureEnabled(FEATURE_NAMES.NewPaymentModal)) {\n const [isConnected, isTestMode] = checkIsGatewayConnectedAndTestMode(payload);\n const { type = '' } = payload;\n yield put(ACTION_CREATORS.updatePortalAction({ connectedGateway: type, isGatewayConfigured: isConnected, isGatewayTestMode: isTestMode }));\n yield put({ type: ACTION_TYPES.CHECKOUT_FORM_GATEWAY_SETTINGS_CHANGE.SUCCESS, payload });\n } else {\n const [isConnected, isTestMode] = checkIsGatewayConnectedAndTestMode({ ...others, ...gatewaySettings });\n const { type = '' } = payload;\n const checkoutFormID = yield select(SELECTORS.getCheckoutFormIDSelector);\n const result = yield call(PaymentActions.switchPaymentGateway, checkoutFormID, others, itemDeleted);\n if (type === 'control_iyzico' && isConnected) {\n yield put(ACTION_CREATORS.addCheckoutFormQuestion({\n type: 'control_address', name: 'address', required: 'Yes', subfields: 'state|zip|st1|city|st2|country'\n }));\n const { payload: { qid } } = yield take(ACTION_TYPES.ADD_CHECKOUT_FORM_QUESTION.SUCCESS);\n yield put(ACTION_CREATORS.updateCheckoutFormQuestion(Variables.CHECKOUT_FORM_QUESTIONS.GATEWAY.toString(), { billingAdd: qid }));\n }\n yield put(ACTION_CREATORS.updatePortalAction({ connectedGateway: type, isGatewayConfigured: isConnected, isGatewayTestMode: isTestMode }));\n yield put({ type: ACTION_TYPES.CHECKOUT_FORM_GATEWAY_SETTINGS_CHANGE.SUCCESS, payload: { ...result[0], ...(others.paymentType && { paymentType: others.paymentType }) } });\n if (gatewaySettings) {\n yield put(ACTION_CREATORS.updateCheckoutFormSettings(gatewaySettings));\n }\n }\n}\nfunction* watchCheckoutFormSettingsChanges({ payload: settings }) {\n const paymentQuestion = yield select(SELECTORS.getCheckoutFormPaymentQuestion);\n const questionFormattedSettings = Object.entries(settings).reduce((prev, [property, PropertyValue]) => {\n return { ...prev, [`question[${property}]`]: PropertyValue };\n }, {});\n const checkoutFormID = yield select(SELECTORS.getCheckoutFormIDSelector);\n const result = yield call(PaymentActions.updateActiveGatewaySettings, checkoutFormID, Variables.CHECKOUT_FORM_QUESTIONS.GATEWAY, questionFormattedSettings);\n yield put({ type: ACTION_TYPES.CHECKOUT_FORM_SETTINGS_CHANGE.SUCCESS, payload: { ...paymentQuestion, ...result[0] } });\n}\n\nfunction* watchAddQuestion({ payload: question }) {\n const checkoutFormID = yield select(SELECTORS.getCheckoutFormIDSelector);\n const lastVisibleQuestionOrder = yield select(SELECTORS.getLastVisibleQuestionOrder);\n const lastQuestionID = yield select(SELECTORS.getLastQuestionID);\n\n const { type } = question;\n\n const defaultQuestionValues = getDefaultQuestionValues()[type];\n\n // TODO: extract default props getter from form-builder\n const { questions } = yield call(PaymentActions.addCheckoutFormQuestion, checkoutFormID, {\n ...defaultQuestionValues,\n ...question,\n name: `${type.replace('control_', '')}${lastQuestionID + 1}`,\n order: lastVisibleQuestionOrder + 1\n });\n\n yield put({ type: ACTION_TYPES.ADD_CHECKOUT_FORM_QUESTION.SUCCESS, payload: questions });\n}\n\nfunction* watchRemoveQuestion({ payload: questionID }) {\n const checkoutFormID = yield select(SELECTORS.getCheckoutFormIDSelector);\n\n yield call(PaymentActions.removeCheckoutFormQuestion, checkoutFormID, questionID);\n\n yield put({ type: ACTION_TYPES.REMOVE_CHECKOUT_FORM_QUESTION.SUCCESS, payload: questionID });\n}\n\nfunction* watchSortQuestion({ payload: { oldIndex, newIndex } }) {\n const checkoutFormID = yield select(SELECTORS.getCheckoutFormIDSelector);\n const questions = yield select(SELECTORS.getCheckoutFormVisibleQuestionsArray);\n const hiddenQuestions = yield select(SELECTORS.getCheckoutFormHiddenQuestionsArray);\n\n const sortedQuestions = arrayMove([...questions, ...hiddenQuestions], oldIndex, newIndex).map((question, index) => ({ ...question, order: index + 1 }));\n\n const questionsObject = Object.fromEntries(sortedQuestions.map(question => [question.qid, question]));\n\n yield put({ type: ACTION_TYPES.SORT_CHECKOUT_FORM_QUESTION.SUCCESS, payload: questionsObject });\n\n const nakedQuestions = sortedQuestions.map(({ qid, order }) => ({ qid, order }));\n\n yield call(PaymentActions.updateCheckoutFormQuestions, checkoutFormID, nakedQuestions);\n}\n\nfunction* watchUpdateQuestion({ payload: { id, prop } }) {\n const checkoutFormID = yield select(SELECTORS.getCheckoutFormIDSelector);\n\n yield call(PaymentActions.updateCheckoutFormQuestionProp, checkoutFormID, id, prop);\n\n yield put({ type: ACTION_TYPES.UPDATE_CHECKOUT_FORM_QUESTION.SUCCESS, payload: { id, prop } });\n}\n\nexport default function* sagas() {\n yield takeEvery(ACTION_TYPES.FETCH_CHECKOUT_FORM_QUESTIONS.REQUEST, watchFetchQuestions);\n yield takeEvery(ACTION_TYPES.FETCH_CHECKOUT_FORM_QUESTIONS.SUCCESS, watchFetchQuestionsSuccess);\n yield takeEvery(ACTION_TYPES.ADD_CHECKOUT_FORM_QUESTION.REQUEST, watchAddQuestion);\n yield takeEvery(ACTION_TYPES.REMOVE_CHECKOUT_FORM_QUESTION.REQUEST, watchRemoveQuestion);\n yield takeEvery(ACTION_TYPES.UPDATE_CHECKOUT_FORM_QUESTION.REQUEST, watchUpdateQuestion);\n yield takeEvery(ACTION_TYPES.SORT_CHECKOUT_FORM_QUESTION.REQUEST, watchSortQuestion);\n yield takeEvery(ACTION_TYPES.CHECKOUT_FORM_GATEWAY_SETTINGS_CHANGE.REQUEST, watchPaymentGatewayChanges);\n yield takeEvery(ACTION_TYPES.CHECKOUT_FORM_SETTINGS_CHANGE.REQUEST, watchCheckoutFormSettingsChanges);\n}\n","import isUndefined from 'lodash/isUndefined';\nimport { DATA_SOURCE_COLUMN_TYPES, ITEM_TYPES } from '../../../constants/itemTypes';\n\nexport const strToDsFormat = str => {\n if (!str) {\n return '';\n }\n return `{${str}}`;\n};\n\nexport const detailsPageDefaultFuncsMap = {\n [DATA_SOURCE_COLUMN_TYPES.TEXT]: ({ text, qid, ...rest }) => ({\n title: text,\n cardLayout: 'horizontal',\n description: `{${qid}}`,\n itemBgColor: '#ffffff',\n itemBorderColor: '#d8dae9',\n itemFontColor: '#2c3345',\n start: {\n type: 'none',\n data: null\n },\n end: {\n type: 'none',\n data: null\n },\n ...rest,\n type: 'CARD_ITEM'\n }),\n\n [DATA_SOURCE_COLUMN_TYPES.IMAGE]: ({ text, qid, ...rest }) => ({\n imageURL: `{${qid}}`,\n itemTextAlignment: 'center',\n shrink: 'No',\n ...rest,\n type: 'IMAGE'\n }),\n\n [ITEM_TYPES.HEADING]: ({ text, qid, ...rest }) => ({\n title: `{${qid}}`,\n description: '',\n headingSize: 'default',\n itemTextAlignment: 'left',\n shrink: 'No',\n ...rest,\n type: 'HEADING'\n })\n};\n\n// {\n// \"start\": {\n// \"type\": \"image\",\n// \"data\": {\n// \"url\": \"https://www.jotform.com/uploads/erencam/form_files/Blank-Avatar.6666c07f7603c4.07905215.png\"\n// }\n// },\n// \"version\": 2\n// }\n\nconst divideColumnsByType = columns => {\n return columns.reduce((prev, column, order) => {\n switch (column.type) {\n case DATA_SOURCE_COLUMN_TYPES.IMAGE:\n return { ...prev, images: [...prev.images, { ...column, order }] };\n case DATA_SOURCE_COLUMN_TYPES.TEXT:\n return { ...prev, texts: [...prev.texts, { ...column, order }] };\n default:\n return prev;\n }\n }, { images: [], texts: [] });\n};\n\nexport const generateDetailDefaultElements = ({ columns, pageID }) => {\n const { images, texts } = divideColumnsByType(columns);\n const orderedColumns = [...images, ...texts].toSorted((({ order: o1 }, { order: o2 }) => o1 - o2));\n const headingOrder = texts?.[0].order;\n\n if (!isUndefined(headingOrder)) {\n orderedColumns[headingOrder] = { ...orderedColumns[headingOrder], type: ITEM_TYPES.HEADING };\n }\n\n return orderedColumns.map(({ order, ...col }) => detailsPageDefaultFuncsMap[col.type]?.({ ...col, page: pageID }));\n};\n\nexport const generateNewPropsForPresentationItem = columns => {\n const { images, texts } = divideColumnsByType(columns);\n const [titleCol, descriptionCol] = texts;\n const [imageURLCol] = images;\n\n return {\n ...(titleCol ? { title: strToDsFormat(titleCol.qid) } : {}),\n ...(descriptionCol ? { description: strToDsFormat(descriptionCol.qid) } : {}),\n ...(imageURLCol ? { start: { type: 'image', data: { url: strToDsFormat(imageURLCol.qid) } } } : {})\n };\n};\n","import {\n all,\n call, put, putResolve, select, take, takeEvery, takeLatest, throttle\n} from 'redux-saga/effects';\nimport { t } from '@jotforminc/translation';\nimport isEmpty from 'lodash/isEmpty';\nimport * as ACTION_CREATORS from '../../actionCreators';\nimport SELECTORS from '../../selectors';\nimport * as ACTION_TYPES from '../../actionTypes';\nimport * as API from '../../../modules/api';\nimport { DESTINATION_TYPES } from '../../../constants/navigation';\nimport { generateDetailDefaultElements, generateNewPropsForPresentationItem } from './constants';\nimport { CARD_ACTION_VALUES, CARD_LAYOUT } from '../../../modules/Builder/components/HomePage/RightPanel/constants';\nimport { ITEM_TYPES } from '../../../constants/itemTypes';\nimport { DS_ITEM_LOAD_TYPES, DS_ITEM_OFFSET } from '../../reducers/dataSource/constants';\nimport { pageActions } from '../../watchers/pageActions';\nimport { safeWorker } from '../../utils';\nimport { checkMobilePhone } from '../../../utils';\nimport { MODALS } from '../../../constants/modals';\n\nfunction* fetchColumns({ payload: { resourceID, viewID } }) {\n if (!resourceID) {\n return;\n }\n\n try {\n const { columns, title } = yield call(API.fetchColumns, {\n resourceID,\n viewID\n });\n\n if (columns) {\n yield put(ACTION_CREATORS.dsFetchColumnsSuccess({\n resourceID, viewID, columns, title\n }));\n }\n } catch (err) {\n console.error('NOT IMPLEMENTED', err);\n }\n}\n\nfunction* fetchSourceItemData({\n payload: {\n itemID,\n offset,\n isButtonRoleUpdate = false\n }\n}) {\n try {\n const item = yield select(SELECTORS.getPortalItemByIDSelector(itemID));\n if (!itemID || !item) {\n return;\n }\n\n const appID = yield select(SELECTORS.getAppID);\n const isBuilder = yield select(SELECTORS.getIsBuilder);\n const isMobile = checkMobilePhone();\n const { cardLayout = CARD_LAYOUT.HORIZONTAL } = yield select(SELECTORS.getPortalItemByIDSelector(item.presentationItemID));\n\n const limit = (() => {\n if (!isBuilder) {\n return DS_ITEM_OFFSET;\n }\n\n if (isMobile && cardLayout === CARD_LAYOUT.HORIZONTAL) {\n return 3;\n }\n\n return 4;\n })();\n\n const itemData = yield call(API.fetchRow, {\n appID, itemID, limit, offset\n });\n\n if (isBuilder) {\n yield putResolve(ACTION_CREATORS.dsFetchRowSuccess({\n itemID, itemData\n }));\n\n if (isButtonRoleUpdate) {\n yield put(ACTION_CREATORS.dsSetLoading({ itemID, loadType: DS_ITEM_LOAD_TYPES.INIT, isLoading: false }));\n }\n } else {\n yield put(ACTION_CREATORS.dsFetchSourceItemDataSuccess({\n itemID, itemData\n }));\n }\n } catch (err) {\n yield put(ACTION_CREATORS.dsFetchSourceItemDataError({ itemID }));\n console.error('NOT IMPLEMENTED', err);\n }\n}\n\nfunction* fetchRow({\n payload: {\n itemID, rowID\n }\n}) {\n const item = yield select(SELECTORS.getPortalItemByIDSelector(itemID));\n\n if (!itemID || !item) {\n return;\n }\n\n try {\n const appID = yield select(SELECTORS.getAppID);\n const itemData = yield call(API.fetchRow, {\n appID, itemID, rowID\n });\n\n yield put(ACTION_CREATORS.dsFetchRowSuccess({\n itemID, itemData: itemData?.[0]\n }));\n } catch (err) {\n console.error('NOT IMPLEMENTED', err);\n }\n}\n\nfunction* fetchDetailPage({\n payload: {\n pageID,\n divideByItemID\n }\n}) {\n try {\n const { linkedItemID } = yield select(SELECTORS.getPageByID(pageID)) ?? {};\n\n if (!linkedItemID) {\n return;\n }\n const appID = yield select(SELECTORS.getAppID);\n const rowID = yield select(SELECTORS.dsGetActiveListRowID(linkedItemID));\n const data = yield call(API.fetchRow, { appID, itemID: pageID, rowID });\n yield put(ACTION_CREATORS.dsFetchPageDetailSuccess({ pageID, data, divideByItemID }));\n } catch (err) {\n console.error('NOT IMPLEMENTED', err);\n }\n}\n\nfunction* setActiveRowAndNavigateToDetailsPage({ payload: { id, rowID } }) {\n yield put(ACTION_CREATORS.dsSetActiveListRowIDSuccess({ id, rowID }));\n const dsPageProps = yield select(SELECTORS.getDataSourcePage(id));\n if (!dsPageProps) {\n return;\n }\n\n const isBuilder = yield select(SELECTORS.getIsBuilder);\n\n const { id: detailsPageID = null } = dsPageProps;\n if (!isBuilder && detailsPageID) {\n yield put(ACTION_CREATORS.navigateToAction({ to: DESTINATION_TYPES.SPECIAL_PAGE, pageID: `details/${detailsPageID}/${rowID}` }));\n }\n}\n\nfunction* createAndLinkDetailsPage({\n payload: {\n itemID, columns, resourceID, viewID\n }\n}) {\n yield take(ACTION_TYPES.DS_FETCH_RESOURCE_COLUMNS.SUCCESS);\n const { page } = yield select(SELECTORS.getPortalItemByIDSelector(itemID));\n const { title = '' } = yield select(SELECTORS.dsGetColumnsByResourceID({ resourceID, viewID }));\n const oldDetailPage = yield select(SELECTORS.getDataSourcePage(itemID));\n\n if (oldDetailPage?.id) {\n yield call(pageActions, { type: ACTION_TYPES.DELETE_PAGE.UNDOABLE, payload: { pageID: oldDetailPage.id, deleteItems: true }, dontStack: true });\n }\n\n const { pageOrder } = yield select(SELECTORS.getPageByID(page));\n yield call(pageActions, {\n type: ACTION_TYPES.ADD_NEW_PAGE.UNDOABLE,\n payload: {\n newPageOrder: Number(pageOrder) + 1,\n dontSelect: true,\n pageProps: {\n showPageOnNavigation: false,\n name: t(title ? `${title} Detail Page` : 'Details Page')\n },\n detailPageProps: {\n linkedItemID: itemID\n }\n }\n });\n\n yield put(ACTION_CREATORS.dsInitializeItems({\n itemID,\n columns,\n oldDetailPage\n }));\n}\n\nfunction* initializeDsItemsWatcher(action) {\n const { itemID, columns: selectedColumns } = action.payload;\n\n const { resourceID, viewID } = yield select(SELECTORS.getPortalItemByIDSelector(itemID));\n const { columns: resourceColumns } = yield select(SELECTORS.dsGetColumnsByResourceID({ resourceID, viewID }));\n const { id: pageID } = yield select(SELECTORS.getDataSourcePage(itemID));\n\n const columns = selectedColumns ?? resourceColumns ?? [];\n\n yield putResolve(ACTION_CREATORS.dsInitializePropsWithColumns({ ...action.payload, columns, pageID }));\n yield putResolve(ACTION_CREATORS.dsCreateDetailPageDefaults({ ...action.payload, columns, pageID }));\n}\n\nfunction* initializeDsItemWithColumns({ payload: { itemID, columns, pageID } }) {\n const { presentationItemID } = yield select(SELECTORS.getPortalItemByIDSelector(itemID));\n\n const defaultPresentationItemProps = generateNewPropsForPresentationItem(columns);\n\n yield put(ACTION_CREATORS.updateItemPropAction({\n itemID: presentationItemID,\n prop: {\n ...defaultPresentationItemProps,\n buttonRole: CARD_ACTION_VALUES.NAVIGATION,\n buttonValue: pageID\n },\n bypassDebounce: true,\n linkedItemID: itemID\n }));\n\n yield put({ type: ACTION_TYPES.DS_INITIALIZE_PROPS_WITH_COLUMNS.SUCCESS });\n}\n\nfunction* createDefaultElements({ payload: { pageID, columns, itemID } }) {\n yield take(ACTION_TYPES.DS_INITIALIZE_PROPS_WITH_COLUMNS.SUCCESS);\n\n yield put(ACTION_CREATORS.toastAction({\n message: t('The detail page has been prepared automatically. You can click any item to see how the dynamic values change on the detail page'),\n options: {\n autoClose: 4e3\n }\n }));\n\n if (columns.length < 1) {\n return;\n }\n\n const newItems = generateDetailDefaultElements({ columns, pageID });\n\n // Unfortunately i have passed undefined to not to lose default parameters (because it is written in this way)\n // This action could be refactored to accept object instead of args like this\n yield put(ACTION_CREATORS.addPortalItemAction(newItems, 1, undefined, undefined, itemID));\n}\n\nfunction* handleDetailPageDeletionOnListRemoval({ payload: { item } }) {\n const detailPage = yield select(SELECTORS.getDataSourcePage(item.id));\n if (detailPage?.id) {\n yield call(pageActions, { type: ACTION_TYPES.DELETE_PAGE.UNDOABLE, payload: { pageID: detailPage.id, deleteItems: true }, dontStack: true });\n }\n}\n\nfunction* watchViewDefaultTable({ payload: { itemID } }) {\n try {\n const isLoading = yield select(SELECTORS.dsGetItemIsLoading(itemID, DS_ITEM_LOAD_TYPES.TABLE_CLONE));\n if (isLoading) {\n return;\n }\n\n const appID = yield select(SELECTORS.getAppID);\n yield put(ACTION_CREATORS.dsSetLoading({ itemID, isLoading: true, loadType: DS_ITEM_LOAD_TYPES.TABLE_CLONE }));\n const {\n sheetID: newResourceID, viewId: viewID, isClone = false, updatedAt\n } = yield call(API.viewTable, { appID, itemID });\n\n if (isClone) {\n yield put(ACTION_CREATORS.updateItemPropAction({\n itemID: itemID,\n prop: {\n resourceID: newResourceID\n }\n }));\n }\n\n yield put(ACTION_CREATORS.showGenericModalAction({\n name: MODALS.TABLE_PRODUCT_MODAL,\n resourceID: newResourceID,\n viewID: viewID !== newResourceID ? viewID : null,\n updatedAt\n }));\n } catch (err) {\n console.error('not implemented', err);\n } finally {\n yield put(ACTION_CREATORS.dsSetLoading({ itemID, isLoading: false, loadType: DS_ITEM_LOAD_TYPES.TABLE_CLONE }));\n }\n}\n\nexport function* dsFetchColumnsFlow() {\n const isBuilder = yield select(SELECTORS.getIsBuilder);\n if (!isBuilder) {\n return;\n }\n\n const items = yield select(SELECTORS.getPortalItems);\n const listItems = items.filter(item => item.type === ITEM_TYPES.LIST);\n if (!isEmpty(listItems)) {\n yield all(listItems.reduce((prev, { resourceID, viewID }) => {\n if (!resourceID) {\n return prev;\n }\n\n return [...prev, put(ACTION_CREATORS.dsFetchColumnsRequest({ resourceID, viewID }))];\n }, []));\n }\n}\n\n// TODO: TEMPORARY FIX for mobile builder version c, instead of improve the update iframe logic\nfunction* setUpdatedAtOnRowSuccess() {\n yield put(ACTION_CREATORS.setAppUpdatedAt(true));\n}\n\nfunction* createTable({ payload: { setFetchKey } }) {\n yield call(API.createTable);\n setFetchKey(prev => prev + 1);\n}\n\nfunction* detailPageOrderNormalizer({ payload }) {\n const { data = [] } = payload;\n\n const pages = yield select(SELECTORS.getPortalPages);\n\n yield all(\n data.reduce((acc, item) => {\n if (item.type === ITEM_TYPES.LIST && item.page) {\n const { pageOrder } = pages.find(({ id }) => id === item.page);\n if (pageOrder) {\n return [...acc, put(ACTION_CREATORS.changePageOrderAction({ oldIndex: pageOrder, newIndex: pageOrder }))];\n }\n return acc;\n }\n\n return acc;\n }, [])\n );\n}\n\nfunction* fetchAllResourceLinkedItems({ payload }) {\n const { resourceID, viewID } = payload;\n const items = yield select(SELECTORS.getPortalItems);\n const listItems = items.filter(({ type }) => type === ITEM_TYPES.LIST);\n const resourceLinkedItems = listItems.filter(listItem => (listItem.resourceID === resourceID && viewID ? listItem.viewID === viewID : true));\n const pages = yield select(SELECTORS.getPortalPages);\n const linkedPages = pages.filter(({ linkedItemID }) => listItems.some(({ id }) => id === linkedItemID));\n\n const fetchSourceItemActions = resourceLinkedItems.map(({ id }) => put(ACTION_CREATORS.dsFetchSourceItemData({ itemID: id })));\n const fetchPageActions = linkedPages.map(({ id }) => put(ACTION_CREATORS.dsFetchDetailPage({ pageID: id, divideByItemID: true })));\n\n yield all([...fetchSourceItemActions, ...fetchPageActions]);\n}\n\nfunction* dsResetActiveRowIDs({ payload: { itemIDs } }) {\n const allItems = yield select(SELECTORS.getPortalItems);\n yield all(\n itemIDs.map(itemID => {\n const item = allItems.find(({ id }) => id === itemID);\n if (item.type === ITEM_TYPES.LIST) {\n return put(ACTION_CREATORS.dsSetActiveRowID({ id: item.id, rowID: null }));\n }\n\n return null;\n })\n );\n}\n\n// eslint-disable-next-line func-names\nexport default function* () {\n yield takeEvery(ACTION_TYPES.DS_CREATE_DETAIL_PAGE, safeWorker(createAndLinkDetailsPage));\n yield takeEvery(ACTION_TYPES.DS_FETCH_RESOURCE_COLUMNS.REQUEST, fetchColumns);\n yield throttle(5000, ACTION_TYPES.DS_FETCH_RESOURCE_COLUMNS.WITH_THROTTLE, fetchColumns);\n yield takeEvery(ACTION_TYPES.DS_FETCH_SOURCE_ITEM_DATA.REQUEST, fetchSourceItemData);\n yield takeEvery(ACTION_TYPES.DS_FETCH_RESOURCE_ROW.REQUEST, fetchRow);\n yield takeEvery(ACTION_TYPES.DS_LIST_SET_ACTIVE_ROW_ID.REQUEST, safeWorker(setActiveRowAndNavigateToDetailsPage));\n yield takeEvery(ACTION_TYPES.DS_DELETE_DETAIL_PAGE, safeWorker(handleDetailPageDeletionOnListRemoval));\n\n // initialize ds item & detail page\n yield takeEvery(ACTION_TYPES.DS_INITIALIZE_ITEMS, initializeDsItemsWatcher);\n yield takeEvery(ACTION_TYPES.DS_CREATE_DETAIL_PAGE_DEFAULTS, safeWorker(createDefaultElements));\n yield takeEvery(ACTION_TYPES.DS_INITIALIZE_PROPS_WITH_COLUMNS.REQUEST, initializeDsItemWithColumns);\n\n // detail page data for preview\n yield takeLatest(ACTION_TYPES.DS_FETCH_DETAIL_PAGE.REQUEST, fetchDetailPage);\n\n yield takeLatest(ACTION_TYPES.DS_EDIT_TABLE.REQUEST, watchViewDefaultTable);\n\n yield takeLatest([ACTION_TYPES.DS_FETCH_SOURCE_ITEM_DATA.SUCCESS, ACTION_TYPES.DS_FETCH_RESOURCE_ROW.SUCCESS], safeWorker(setUpdatedAtOnRowSuccess));\n yield takeLatest(ACTION_TYPES.DS_CREATE_TABLE.REQUEST, safeWorker(createTable));\n yield takeLatest(ACTION_TYPES.UPDATE_ORDER.UNDOABLE, safeWorker(detailPageOrderNormalizer));\n yield takeLatest(ACTION_TYPES.DS_FETCH_ALL_RESOURCE_LINKED_ITEMS, safeWorker(fetchAllResourceLinkedItems));\n yield takeEvery(ACTION_TYPES.REMOVE_PORTAL_ITEMS.REQUEST, safeWorker(dsResetActiveRowIDs));\n}\n","import { StorageHelper } from '@jotforminc/storage-helper';\nimport Moment from 'moment';\nimport { NOTIFICATION_DISMISS_KEY } from '../../../constants';\n\nexport const isPushPermissionRecentlyDismissed = appID => {\n const notificationDismissKey = `${NOTIFICATION_DISMISS_KEY}_${appID}`;\n const dismissedAt = StorageHelper.getLocalStorageItem({ key: notificationDismissKey });\n if (dismissedAt === null) return false;\n return Moment(dismissedAt).isAfter(Moment().subtract(1, 'month'));\n};\n","import { t } from '@jotforminc/translation';\n\nimport { IconLinkDiagonal, IconAnglesSelectorSlashHorizontal } from '@jotforminc/svg-icons';\n\nexport const publishNavPaths = {\n quickShare: 'link',\n embed: 'embed'\n};\n\nexport const getPublishNavigationProperties = () => ([\n {\n key: 'link',\n title: t('Quick Share'),\n description: t('Direct app link.'),\n path: publishNavPaths.quickShare,\n Icon: IconLinkDiagonal\n },\n {\n key: 'embed',\n title: t('Embed'),\n description: t('Get embed code.'),\n path: publishNavPaths.embed,\n Icon: IconAnglesSelectorSlashHorizontal\n }\n]);\n\nexport const publishDefaultActiveTab = publishNavPaths.quickShare;\n","/* eslint-disable max-lines */\n/* eslint-disable camelcase */\nimport React from 'react';\nimport {\n actionChannel, all, call, delay, put, select, spawn, take, takeEvery, takeLatest, debounce,\n fork, race\n} from 'redux-saga/effects';\nimport { buffers } from 'redux-saga';\nimport difference from 'lodash/difference';\nimport isUndefined from 'lodash/isUndefined';\nimport { navigate } from '@reach/router';\nimport { sumMoney } from '@jotforminc/money-utils';\nimport { safeJSONParse, handleCustomNavigation } from '@jotforminc/utils';\nimport { isEnterprise } from '@jotforminc/enterprise-utils';\nimport { prepareIcons } from '@jotforminc/icon-selector';\nimport { t } from '@jotforminc/translation';\nimport { StorageHelper } from '@jotforminc/storage-helper';\nimport Tracking from '@jotforminc/tracking';\nimport { getAppPath } from '@jotforminc/router-bridge';\nimport { PushManager, SubscriptionError } from '@jotforminc/push-notification';\nimport { PaymentActions } from '@jotforminc/payment-settings-editor';\nimport Moment from 'moment';\nimport isEqual from 'lodash/isEqual';\nimport isEmpty from 'lodash/isEmpty';\nimport some from 'lodash/some';\nimport * as ACTION_TYPES from '../actionTypes';\nimport * as API from '../../modules/api';\nimport SELECTORS from '../selectors';\nimport * as ACTION_CREATORS from '../actionCreators';\nimport {\n ADD_ELELEMT_PULSE_EFFECT_LC_ST_KEY,\n ADD_ELELEMT_PULSE_EFFECT_MAX,\n APP_HEADER_PROPS,\n APP_MODES,\n APP_PREVIEW_STATES,\n BRANDING_DEFAULT_UTM_SCHEME,\n CHECKOUT_FORM_STATUSES,\n ERROR_MESSAGES,\n getLayoutProps,\n getProtectedStylingProps,\n IMAGE_TYPE,\n ITEM_ADDITION_ORDER_STRATEGY,\n NOTIFICATION_DISMISS_KEY,\n NOTIFICATION_ERROR_MESSAGES,\n NOTIFICATION_PERMISSION_STATES,\n PORTAL_ERROR_MAP,\n UI_PROPS\n} from '../../constants';\nimport {\n captureException,\n checkMobilePhone,\n getUserAgentPlatformType,\n getTeamID,\n getUpdatedDate,\n ignoredActions,\n isItemTypeWidget,\n isTestingEnv,\n isTeamResourcePicker,\n isYes,\n sanitizeHTML,\n sendBreadcrumbsToSentry,\n sendTrackData,\n updateAndOverrideButtonProperties,\n utmParser,\n checkAndAddProtocolToTargetLink,\n isValidLinkTarget,\n isIosSafari\n} from '../../utils';\nimport { getOrderedItemList, safeWorker, sanitizeSVGIconURLs } from '../utils';\nimport { generateResourceURL } from '../../utils/navigation';\nimport { isPWA } from '../../modules/PublicApp/utils';\nimport { ITEM_TYPES, RESOURCE_TYPES } from '../../constants/itemTypes';\nimport {\n getAvailableItemTypesByVersion,\n getLatestVersion,\n guardPropsForGrandfatheredApps,\n isAppGrandfathered,\n useAppDefaults,\n useItemDefaults\n} from '../../properties';\nimport { FEATURE_NAMES } from '../../constants/features';\nimport { isFeatureEnabled, useEnabledFeatures } from '../../utils/features/helper';\nimport { watchUndoableActions, watchUndoRedoActions } from '../watchers/undoRedo';\nimport {\n checkAddElementPulseVisible,\n initAppElementPanelAbTest,\n initAppNameIconModalAbTest,\n keepClosedUIPanels,\n watchMultipleSelection,\n watchSelectAllItems,\n watchUIPanelsChanges,\n watchUIupdates,\n watchWindowSqueeze\n} from './ui';\nimport { watchToastActions } from '../watchers/toast';\nimport { watchNetworkStatus } from '../watchers/network';\nimport { watchItemDuplication } from '../watchers/itemDuplication';\nimport { watchDoneItemProgress, watchRestartProgress, watchTodoItemProgress } from '../watchers/progress';\nimport {\n watchFetchShareList,\n watchResourceShareURLUpdate,\n watchShareDeletePortal,\n watchSharePortal\n} from '../watchers/share';\nimport VERSIONS from '../../properties/versions';\nimport { watchStylingActions } from '../watchers/styling';\nimport { watchProgressBarAvailability } from '../workers/progressBarAvailability';\nimport { pageActions, watchHeadingItemToPageNaming, watchPageUpdate } from '../watchers/pageActions';\nimport { handleInstallableAppIcon, watchInstallableIconBuilderFlow } from '../watchers/assetGeneration';\nimport { watchPortalOrderInItemAddition } from '../workers/portalOrder';\nimport appConfig from '../../constants/appConfig';\nimport { watchItemSorting } from '../workers/itemSorting';\nimport { BUTTON_ROLE_TYPES } from '../../modules/Builder/components/HomePage/RightPanel/ButtonActions/buttonRoleTypes';\nimport { watchModals } from '../watchers/modals';\nimport { watchSignupActions } from '../watchers/signup';\nimport { resourceLinkTypes, resourceTypeMap, RightPanelModes } from '../../modules/Builder/components/HomePage/constants';\nimport productListActions from '../watchers/productListActions';\nimport navigationActions from '../watchers/navigation';\nimport collaborationFlow from '../watchers/collaboration';\nimport { momentToString } from '../../modules/Builder/components/Settings/utils';\nimport watchAppToast from '../watchers/appToast';\nimport searchInProductsActions from '../watchers/filterProducts';\nimport { MODALS } from '../../constants/modals';\nimport { TEAM_ID } from '../../constants/team';\nimport { DESTINATION_TYPES } from '../../constants/navigation';\nimport eventsFlow from '../events';\nimport { AllWidgetIDs } from '../../constants/availableWidgets';\nimport { activateFullStoryOnTheFly } from '../watchers/fullstory';\nimport { getColoredPropertiesBySchemeID } from '../../properties/styling';\nimport { getFilteredProperties } from '../../modules/Builder/components/HomePage/MultipleRightPanel/utils';\nimport productList from './productList';\nimport aiAssitant from './aiAssistant';\nimport checkoutFormFlow from './checkoutForm';\nimport dataSourceFlow, { dsFetchColumnsFlow } from './dataSource/dataSource';\nimport { eventChannelRegistry, resultMutaters, shouldUpdatePropFromResponse } from './helper';\nimport { abTestActionLoggerSingleton, AB_TEST_NAMES, LC_KEYS } from '../../utils/AbTestActionLoggerSingleton';\nimport ActionHelper from '../../utils/ActionsHelper';\nimport { AB_TESTS, logAbTestActionFor } from '../../utils/abtests';\nimport { AVAILABLE_DETAIL_PAGE_ITEMS } from '../../modules/Builder/components/HomePage/RightPanel/dataSourceHelpers';\nimport { isPushPermissionRecentlyDismissed } from '../../modules/PublicApp/PushNotificationPermission/utils';\nimport { DS_ITEM_LOAD_TYPES } from '../reducers/dataSource/constants';\nimport { WHATS_NEW_MODAL_FEATURES } from '../../modules/Builder/components/Modals/WhatsNewModal';\nimport { publishNavPaths } from '../../modules/Builder/components/Publish/constants';\n\nconst isUpdateAPIAction = type => /(UPDATE|ADD|REMOVE).*\\/(REQUEST|SUCCESS)/.test(type);\nconst isAPISuccessAction = ({ type }) => /SUCCESS$/.test(type);\nconst isAPIRequestAction = ({ type }) => /(REQUEST|UNDOABLE)$/.test(type);\nconst isAPIErrorAction = ({ type }) => /ERROR$/.test(type); // eslint-disable-line no-unused-vars\n\nexport function* fetchUserFlow() {\n let currentUser = yield select(SELECTORS.getUser);\n let payload;\n if (currentUser.username) {\n // We already got it from index.php\n delete window?.__userInfo;\n payload = { credentials: currentUser, type: currentUser.USER_TYPE };\n } else {\n // we should've got the user.. It seems something unexpected occurred let's try one last time for the sentry :D\n yield put({ type: ACTION_TYPES.FETCH_USER.REQUEST });\n try {\n const withCred = yield call(API.fetchUser);\n payload = withCred;\n currentUser = withCred.credentials;\n } catch (e) {\n console.error('Error on fetch user:', e);\n // Mocking since no valid user found at session.\n // The show must go on..\n const mockPublicUser = {\n type: 'USER',\n credentials: {\n username: 'guest_apiDemo',\n name: null,\n account_type: 'GUEST',\n allowMyApps: true,\n time_zone: ''\n }\n };\n payload = mockPublicUser;\n }\n }\n\n yield spawn(watchSignupActions);\n\n const { username, name } = currentUser;\n yield put({ type: ACTION_TYPES.FETCH_USER.SUCCESS, payload });\n\n if (Tracking.FSisInitialized()) {\n Tracking.identify(username, {\n displayName: name || username,\n appBuilder_bool: true\n });\n }\n}\n\nexport function* watchFetchPortalSuccess({ payload: { checkoutFormID } }) {\n const isBuilder = yield select(SELECTORS.getIsBuilder);\n if (isBuilder && checkoutFormID) {\n yield put({ type: ACTION_TYPES.FETCH_CHECKOUT_FORM_QUESTIONS.REQUEST, payload: checkoutFormID });\n }\n}\n\nexport function* fetchWidgetsFlow() {\n const appMode = yield select(SELECTORS.getAppModeSelector);\n if (appMode === APP_MODES.builder) {\n let { username } = yield select(SELECTORS.getUser);\n if (window.isDevelopment && window.DEVELOPER) {\n username = window.DEVELOPER;\n }\n yield put({ type: ACTION_TYPES.FETCH_WIDGETS.REQUEST });\n try {\n const allWidgets = yield call(API.fetchWidgets, username);\n const filterUsedWidgets = allWidgets.filter(widget => AllWidgetIDs.includes(widget?.client_id));\n yield put({ type: ACTION_TYPES.FETCH_WIDGETS.SUCCESS, payload: filterUsedWidgets });\n } catch (exception) {\n console.error(exception);\n yield put({ type: ACTION_TYPES.FETCH_WIDGETS.ERROR });\n }\n }\n}\n\nexport function* fetchEnvironmentFlow() {\n let environment = yield select(SELECTORS.getEnvironmentSelector);\n if (!environment) {\n yield put({ type: ACTION_TYPES.FETCH_ENVIRONMENT.REQUEST });\n environment = yield call(API.fetchEnvironmentVariables);\n }\n\n yield put({ type: ACTION_TYPES.FETCH_ENVIRONMENT.SUCCESS, data: environment });\n}\n\nconst getNewMigrationProps = (fromVersion, incomingData) => {\n // WORKS FOR 0 Only\n const {\n logoURL, logoType, logoBackground, iconColor\n } = incomingData;\n const latestDefaults = useAppDefaults(getLatestVersion());\n const defaultsByVersion = useAppDefaults(fromVersion);\n const keysByVersion = Object.keys(defaultsByVersion);\n const reducedLatests = Object.entries(latestDefaults).reduce((prev, [key]) => {\n return keysByVersion.includes(key)\n ? { ...prev }\n : { ...prev, [key]: '' }; // This prop don't know by the app. Builder is more capable than app. Should be neutralized.\n }, {});\n const downgradedDefaults = { ...defaultsByVersion, ...reducedLatests };\n if (!downgradedDefaults.appIconURL\n || !downgradedDefaults.appIconType\n || !downgradedDefaults.appIconBackground\n || !downgradedDefaults.appIconColor\n ) {\n // TODO exception for appIcon? handle upward and downward migrations all together! Consider items too..\n downgradedDefaults.appIconURL = logoURL;\n downgradedDefaults.appIconType = logoType;\n downgradedDefaults.appIconBackground = logoBackground;\n downgradedDefaults.appIconColor = iconColor;\n }\n\n return {\n ...downgradedDefaults,\n ...guardPropsForGrandfatheredApps\n };\n};\n\nconst getMigratedItems = ({ items, fromVersion }) => {\n // TODO Possible irem type conversion point!\n return items.map(item => {\n const itemDefaults = useItemDefaults(item.type, fromVersion);\n const {\n itemBorderColor: defaultItemBorderColor,\n itemBgColor: defaultItemBgColor,\n itemFontColor: defaultItemFontColor,\n itemTextAlignment: defaultItemTextAlignment\n } = itemDefaults;\n\n const {\n itemBorderColor = defaultItemBorderColor,\n itemBgColor = defaultItemBgColor,\n itemFontColor = defaultItemFontColor,\n itemTextAlignment = defaultItemTextAlignment\n } = item;\n\n return {\n itemID: item.id,\n itemBorderColor,\n itemBgColor,\n itemFontColor,\n itemTextAlignment\n };\n });\n};\n\nfunction* checkIsAssetBusy({ id: appID, ...props }) {\n const isBuilder = yield select(SELECTORS.getIsBuilder);\n if (!getTeamID() || !isBuilder) return false;\n const result = yield call(API.getAssetIsBusy, appID);\n if (isEmpty(result)) {\n yield call(API.teamLog, appID, 'portalAccessed');\n return false;\n }\n yield put(ACTION_CREATORS.updatePortalPropAction({ editingResourceProps: result, ...props }));\n return true;\n}\n\n// eslint-disable-next-line max-statements\nfunction* normalizeAndRegisterApp(appProps) {\n const latestVersion = getLatestVersion();\n const appMode = yield select(SELECTORS.getAppModeSelector);\n const appDefaultsByVersion = useAppDefaults(latestVersion);\n\n const {\n appVersion, id: portalID,\n name, appBgColor, appBgColorEnd,\n items\n } = appProps;\n\n // BUGFIX #3828940 :: We should clear HTML from the title\n const titleDOM = document.createElement('div');\n titleDOM.innerHTML = sanitizeHTML(appProps.title);\n const title = titleDOM.textContent || titleDOM.innerText || '';\n\n const {\n appBgColor: latestDefaultAppBgColor\n } = appDefaultsByVersion;\n\n let newProps = { ...appProps, title }; // hope it stays 1 level\n\n // we need to update some properties while Fetching portals silently\n const normalizeProperties = {\n name: {\n condition: isUndefined(name),\n replace: name || title\n },\n appBgColorEnd: {\n condition: appBgColor && isUndefined(appBgColorEnd),\n replace: appBgColor\n }\n };\n\n const propertyKeys = Object.keys(normalizeProperties);\n let propertiesToUpdate = {};\n propertyKeys.forEach(property => {\n const element = normalizeProperties[property];\n if (element.condition) {\n propertiesToUpdate = { ...propertiesToUpdate, [property]: element.replace };\n }\n });\n\n newProps = { ...newProps, ...propertiesToUpdate };\n\n let migratedItems = {};\n if (isAppGrandfathered(appVersion)) {\n // Handle App\n const reducedProps = getNewMigrationProps(appVersion, newProps);\n // Downgrade defaults by neutralizing for grandfathered apps (closed appCover, transparent appHeaderBgColor etc.)\n newProps = {\n ...reducedProps,\n ...newProps\n };\n\n const migratedPortal = {\n ...guardPropsForGrandfatheredApps,\n appVersion: getLatestVersion()\n };\n\n const hasCustomBgColor = Object.keys(appProps).includes('appBgColor');\n if (!hasCustomBgColor) {\n Object.assign(migratedPortal, {\n appBgColor: latestDefaultAppBgColor,\n appBgColorEnd: latestDefaultAppBgColor // for now, it is not saved\n });\n }\n\n newProps = { ...newProps, ...migratedPortal };\n propertiesToUpdate = { ...propertiesToUpdate, ...migratedPortal };\n // Handle Items\n migratedItems = getMigratedItems({ items, fromVersion: appVersion });\n }\n\n if (yield checkIsAssetBusy(newProps)) return;\n\n // one and only!\n yield put({ type: ACTION_TYPES.FETCH_PORTAL.SUCCESS, payload: { ...newProps } });\n\n if (appMode === APP_MODES.builder) {\n const hasPropToUpdate = !!Object.keys(propertiesToUpdate).length;\n if (hasPropToUpdate) yield call(API.updatePortal, portalID, { ...propertiesToUpdate, systemAction: 1 });\n\n const hasItemsToMigrate = !!Object.keys(migratedItems).length;\n if (hasItemsToMigrate) {\n for (let i = 0; i < migratedItems.length; i++) {\n const item = migratedItems[i];\n yield put(ACTION_CREATORS.updateItemPropAction({ itemID: item.itemID, prop: item }));\n }\n }\n }\n\n if (appMode === APP_MODES.public) {\n yield put(ACTION_CREATORS.calculateDoneItemCount());\n yield put(ACTION_CREATORS.calculateTodoItemCount());\n }\n}\n\nexport function* fetchPortalFlow(props = {}) {\n const hasPortalInfo = typeof window.__appInfo === 'object' && window.__appInfo.id;\n const { portalID } = props;\n if (!portalID && !hasPortalInfo) return; // BuildWithForm\n const appMode = yield select(SELECTORS.getAppModeSelector);\n const endpoints = {\n [APP_MODES.public]: API.fetchPortalPublicInfo,\n [APP_MODES.builder]: API.fetchPortal\n };\n try {\n const currentApp = yield (hasPortalInfo ? window.__appInfo : call(endpoints[appMode], portalID));\n yield call(normalizeAndRegisterApp, currentApp);\n delete window.__appInfo;\n } catch (error) {\n const status = error?.response?.status;\n const errorMap = appMode === APP_MODES.builder ? 'builder' : status;\n yield put({ type: ACTION_TYPES.SET_APP_STATUS, payload: { error } });\n yield put({ type: ACTION_TYPES.FETCH_PORTAL.ERROR, payload: PORTAL_ERROR_MAP.FETCH[errorMap] || PORTAL_ERROR_MAP.FETCH.default, error });\n }\n}\n\nexport function* fetchShareInfoFlow() {\n try {\n yield put({ type: ACTION_TYPES.FETCH_SHARE_INFO.REQUEST });\n const appMode = yield select(SELECTORS.getAppModeSelector);\n if ((appMode === APP_MODES.builder) && window.__shareInfo) {\n const resourceShareInfo = (typeof window.__shareInfo === 'object' && window.__shareInfo) ? window.__shareInfo : { shareList: [], shareToken: '' };\n yield put({ type: ACTION_TYPES.FETCH_SHARE_LIST.SUCCESS, payload: Object.values(resourceShareInfo.shareList) });\n yield put({ type: ACTION_TYPES.UPDATE_RESOURCE_SHARE_URL.SUCCESS, payload: resourceShareInfo.shareToken });\n delete window.__shareInfo;\n } else if ((appMode === APP_MODES.builder) && !window.__shareInfo) {\n yield put({ type: ACTION_TYPES.FETCH_SHARE_LIST.REQUEST });\n }\n yield put({ type: ACTION_TYPES.FETCH_SHARE_INFO.SUCCESS });\n } catch (error) {\n yield put({ type: ACTION_TYPES.SET_APP_STATUS, payload: { error } });\n yield put({ type: ACTION_TYPES.FETCH_SHARE_INFO.ERROR, payload: { error } });\n }\n}\n\nfunction* withPrefetchedData(key, ACTION) {\n if (typeof window[key] === 'object' && window[key]) {\n yield put({ type: ACTION.SUCCESS, payload: window[key] });\n delete window[key];\n } else {\n yield put({ type: ACTION.REQUEST });\n }\n}\n\nfunction* fetchStorePropertiesFlow() {\n const isPaymentApp = yield select(SELECTORS.getIsPaymentApp);\n const isBuilder = yield select(SELECTORS.getIsBuilder);\n if (!isBuilder && isPaymentApp) {\n yield withPrefetchedData('__storeProperties', ACTION_TYPES.FETCH_STORE_PROPERTIES);\n }\n}\n\nexport function* fetchTeamFlow() {\n const isBuilder = yield select(SELECTORS.getIsBuilder);\n if (isBuilder) {\n yield withPrefetchedData('__userTeams', ACTION_TYPES.FETCH_USER_TEAMS);\n yield withPrefetchedData('__userPermissionsInfo', ACTION_TYPES.FETCH_USER_TEAM_PERMISSIONS);\n }\n}\n\nexport function* appStatusChecker() {\n const appMode = yield select(SELECTORS.getAppModeSelector);\n if (appMode === APP_MODES.builder) {\n yield all([\n take(ACTION_TYPES.FETCH_PORTAL.SUCCESS),\n take(ACTION_TYPES.FETCH_ENVIRONMENT.SUCCESS),\n take(ACTION_TYPES.FETCH_USER.SUCCESS),\n take(ACTION_TYPES.FETCH_WIDGETS.SUCCESS)\n ]);\n } else {\n yield all([\n take(ACTION_TYPES.FETCH_PORTAL.SUCCESS),\n take(ACTION_TYPES.FETCH_USER.SUCCESS)\n ]);\n }\n yield put({ type: ACTION_TYPES.SET_APP_STATUS, payload: 'ready' });\n}\n\nfunction* trackEvent({ payload: { action = '', target = {} } } = {}) {\n if (!action) return;\n if (ignoredActions.includes(action)) return;\n\n if (typeof target === 'object') {\n /* eslint-disable no-param-reassign */\n target.device = getUserAgentPlatformType();\n target.isPWA = isPWA();\n /* eslint-enable no-param-reassign */\n }\n\n const username = yield select(SELECTORS.getUsername);\n const portalID = yield select(SELECTORS.getPortalIDSelector);\n const portalType = yield select(SELECTORS.getPortalType);\n yield call(sendTrackData, username, action, { portalID, portalType, ...target });\n}\n\nfunction* trackEvents() {\n yield takeEvery(ACTION_TYPES.TRACK_EVENT, trackEvent);\n}\n\nfunction* watchErrors({ type, error }) { // eslint-disable-line require-yield\n sendBreadcrumbsToSentry({\n level: 'error', type: 'error', category: 'actions', message: `Error occured type: ${type}`\n });\n yield call(captureException, error);\n}\n\n// TODO :: seperate this\n/* eslint-disable max-statements */\nexport function* watchPortalUpdates(action) {\n const { payload: properties } = action;\n const portalID = yield select(SELECTORS.getPortalIDSelector);\n const appVersion = yield select(SELECTORS.getAppVersionSelector);\n\n const keysToUpdate = Object.keys(properties);\n const defaultAppByVersion = useAppDefaults(appVersion);\n const defaultsKeysByVersion = Object.keys(defaultAppByVersion);\n const defaultAppByLatest = useAppDefaults(getLatestVersion());\n const defaultsKeysByLatest = Object.keys(defaultAppByLatest);\n\n const migrationRequiredKeys = difference(defaultsKeysByLatest, defaultsKeysByVersion);\n const shouldMigrate = keysToUpdate.some(key => migrationRequiredKeys.includes(key));\n const finalVersion = shouldMigrate ? getLatestVersion() : appVersion;\n\n const resetCropTriggers = {\n appCoverBgURL: 'appCoverBgCropInfo',\n appHeaderBgURL: 'appHeaderBgCropInfo'\n };\n\n const updatingProperties = Object.entries(properties).reduce((prev, [key]) => {\n return Object.keys(resetCropTriggers).includes(key)\n ? {\n ...prev,\n [resetCropTriggers[key]]: ''\n }\n : { ...prev };\n }, properties);\n\n // Removing appLogo should reset AppLogoSize too..\n if (updatingProperties.logoURL === '') {\n updatingProperties.appLogoSize = 0;\n }\n\n // title\n if (updatingProperties.name) {\n const title = yield select(SELECTORS.getAppTitle);\n const name = yield select(SELECTORS.getAppName);\n const { title: defaultAppTitle } = defaultAppByVersion;\n if (defaultAppTitle === title || title === name) {\n updatingProperties.title = updatingProperties.name;\n }\n }\n\n // attach version\n let newVersionProps = { appVersion: finalVersion };\n const currentApp = yield select(SELECTORS.getAppInfoWithDefaults);\n if (shouldMigrate) {\n const initialMigrationProps = getNewMigrationProps(finalVersion, currentApp);\n newVersionProps = { ...initialMigrationProps, ...currentApp, appVersion: finalVersion };\n }\n const propsToUpdate = { ...updatingProperties, ...newVersionProps };\n const currentData = Object.keys(propsToUpdate).reduce((pre, next) => {\n return { ...pre, [next]: currentApp[next] };\n }, {});\n\n if (propsToUpdate.mobileMenuIcon) {\n propsToUpdate.mobileMenuIcon = sanitizeSVGIconURLs(propsToUpdate.mobileMenuIcon);\n }\n\n yield put({\n type: ACTION_TYPES.UPDATE_PORTAL.REQUEST,\n payload: propsToUpdate\n });\n\n const updateResult = yield call(API.updatePortal, portalID, propsToUpdate);\n yield put(ACTION_CREATORS.trackEventAction({ action: 'appUpdated', target: { props: Object.keys(updatingProperties) } }));\n if (shouldMigrate) {\n yield put(ACTION_CREATORS.trackEventAction({ action: 'appMigrated', target: { to: finalVersion } }));\n }\n\n // make mode on crop state while changing AppHeader/Cover background\n const backgroundCropProps = Object.keys(resetCropTriggers);\n const updatingBackgroundCropProp = Object.keys(updateResult).filter(prop => backgroundCropProps.includes(prop))[0];\n if (updatingBackgroundCropProp && !!updateResult[updatingBackgroundCropProp] && !checkMobilePhone()) {\n yield put(ACTION_CREATORS.toggleRightPanelAction(false));\n yield put(ACTION_CREATORS.toggleImageCropState(updatingBackgroundCropProp, true));\n }\n\n // close RightPanel after AppHeader is closed\n const isClosingAppHeader = propsToUpdate?.openAppHeader === 'No';\n if (isClosingAppHeader) {\n yield put(ACTION_CREATORS.setRightPanelModeAction(''));\n yield put(ACTION_CREATORS.selectPortalItemAction());\n }\n\n yield put({\n type: ACTION_TYPES.UPDATE_PORTAL.SUCCESS,\n payload: updateResult,\n requestAction: action,\n currentData\n });\n}\n\nfunction* fetchCheckoutFormID() {\n const appID = yield select(SELECTORS.getAppID);\n\n yield put(ACTION_CREATORS.fetchPortalAction(appID));\n}\n\n// eslint-disable-next-line complexity\nexport function* watchPortalItemAdditions(action) {\n const logAbTestAction = abTestActionLoggerSingleton[AB_TEST_NAMES.ELEMENT_PANEL_VISIBILITY] || (f => f);\n const getItemDefaults = yield select(SELECTORS.getItemDefaultsGetter);\n\n const isElementAlreadyAdded = StorageHelper.getLocalStorageItem({ key: LC_KEYS.ELEMENT_PANEL_VISIBILITY.IS_ELEMENT_ADDED });\n if (!isElementAlreadyAdded) {\n StorageHelper.setLocalStorageItem({ key: LC_KEYS.ELEMENT_PANEL_VISIBILITY.IS_ELEMENT_ADDED, value: true });\n logAbTestAction(\n {\n action: 'click',\n target: 'appElementAddedFirstTime'\n }\n );\n }\n\n const {\n payload: {\n items, order, isDuplicate = false, focusItemID\n }, dontStack = false, isUndo = false\n } = action;\n if (Array.isArray(items) && items.length === 0) {\n return;\n }\n const portalID = yield select(SELECTORS.getPortalIDSelector);\n\n // Considers the page of the LAST item in the payload in order to cover the case of adding into different pages (caused by an undo of multiple delete)\n const pageOfTheItem = items.reduce((prev, { page = 'homepage' }) => page, '');\n\n if (!focusItemID) {\n yield put(ACTION_CREATORS.updateLastInteractedPageIDAction(pageOfTheItem));\n }\n\n let overridedItems = items;\n // Override w/selected scheme/theme\n if (!isDuplicate) {\n const { overridingItemProps } = yield select(SELECTORS.getAppInfoWithDefaults);\n const overridingProps = safeJSONParse(overridingItemProps);\n overridedItems = items.map(i => {\n const { type } = i;\n if (!isEmpty(overridingProps) && Object.keys(overridingProps).includes('itemColors')) {\n return { ...i, ...type === ITEM_TYPES.BUTTON ? overridingProps.buttonColors : overridingProps.itemColors };\n }\n return { ...i, ...type === ITEM_TYPES.BUTTON ? {} : overridingProps };\n });\n }\n\n overridedItems = overridedItems.map(item => {\n switch (item.type) {\n case ITEM_TYPES.LIST: {\n const { presentationItemType } = item;\n const presentationItem = getItemDefaults(presentationItemType);\n return { ...item, presentationItem };\n }\n default: {\n return item;\n }\n }\n });\n\n const result = yield call(API.addItemToPortal, portalID, overridedItems, Math.round(order));\n\n const listItems = result.filter(item => item.type === ITEM_TYPES.LIST);\n\n if (listItems.length > 0 && !isUndo) {\n yield all(\n listItems.map(item => [\n put(ACTION_CREATORS.createAndLinkDetailsPage({ itemID: item.id, resourceID: item.resourceID, viewID: item.viewID })),\n put(ACTION_CREATORS.dsSetLoading({ itemID: item.id, loadType: DS_ITEM_LOAD_TYPES.INIT, isLoading: true }))\n ]).flat()\n );\n }\n\n const hasCheckoutRelatedItem = result.some(({ type }) => [ITEM_TYPES.PRODUCT_LIST, ITEM_TYPES.DONATION].includes(type));\n if (hasCheckoutRelatedItem) yield fetchCheckoutFormID();\n\n yield put({\n type: ACTION_TYPES.ADD_PORTAL_ITEMS.SUCCESS, payload: result, requestAction: action, dontStack\n });\n\n // manage pulse effect\n const pulseStorage = StorageHelper.getLocalStorageItem({ key: ADD_ELELEMT_PULSE_EFFECT_LC_ST_KEY });\n const currentPulseCount = yield select(SELECTORS.getUIProp(UI_PROPS.addElementButtonPulseCount));\n if (!pulseStorage && (currentPulseCount < ADD_ELELEMT_PULSE_EFFECT_MAX)) {\n const nextPulseCount = currentPulseCount + 1;\n yield put(ACTION_CREATORS.setUIProp(UI_PROPS.addElementButtonPulseCount, nextPulseCount));\n if (nextPulseCount === ADD_ELELEMT_PULSE_EFFECT_MAX) {\n yield put(ACTION_CREATORS.setUIProp(UI_PROPS.addElementButtonPulseVisible, false));\n StorageHelper.setLocalStorageItem({\n key: ADD_ELELEMT_PULSE_EFFECT_LC_ST_KEY,\n value: true\n });\n }\n }\n\n const isLeftPanelOpen = yield select(SELECTORS.isLeftPanelOpenSelector);\n const isMobile = checkMobilePhone();\n if (isLeftPanelOpen && isMobile) {\n yield put(ACTION_CREATORS.toggleLeftPanelAction(false));\n }\n\n // make mobile multiple selection mode false while adding new item\n const isMobileMultiSelectedMode = yield select(SELECTORS.getSelectedMultipleItems);\n if (isMobileMultiSelectedMode) {\n yield put(ACTION_CREATORS.toggleMultipleSelectionModeAction(false));\n }\n\n // User may trying to add a \"newer\" item type. That requires migration.\n const appVersion = yield select(SELECTORS.getAppVersionSelector);\n const availableTypesByVersion = getAvailableItemTypesByVersion(appVersion);\n const addedSomeNewItemType = items.some(({ type }) => !availableTypesByVersion.includes(type)); // a \"newer\" item is being added\n const shouldMigrate = appVersion < VERSIONS[1] && addedSomeNewItemType;\n if (shouldMigrate) {\n yield put(ACTION_CREATORS.updatePortalAction({ appVersion: getLatestVersion() }));\n }\n\n const additionResult = result.filter(({ type }) => !!type); // Result with no type means order update as a side effect of addition\n for (let i = 0; i < additionResult.length; i++) {\n const { type, portalOrder, id } = additionResult[i];\n const eventAction = `${type === ITEM_TYPES.FORM ? 'formsAdded' : `${type.toLowerCase()}Added`}`;\n const details = { portalOrder, id };\n const target = type === ITEM_TYPES.FORM ? { ...details, count: 1 } : details;\n yield put(ACTION_CREATORS.trackEventAction({ action: eventAction, target }));\n }\n\n // Treat last added item\n const [{ id: lastAddedItemID, type }] = listItems.length > 0 ? listItems.slice(-1) : additionResult.slice(-1);\n if (isLeftPanelOpen && isMobile) {\n yield delay(300);\n }\n\n const settedLastAddedItem = focusItemID ?? lastAddedItemID;\n\n yield put({ type: ACTION_TYPES.SET_LAST_ADDED_ITEM, payload: settedLastAddedItem });\n\n const isWidget = type === ITEM_TYPES.WIDGET;\n const targetRightPanelMode = isWidget ? RightPanelModes.APP_WIDGET : RightPanelModes.APP_ITEM;\n yield put(ACTION_CREATORS.prepareRightPanelAction(targetRightPanelMode, settedLastAddedItem));\n if ([ITEM_TYPES.PRODUCT_LIST, ITEM_TYPES.DONATION].includes(type)) {\n yield put(ACTION_CREATORS.toggleLeftPanelAction(false));\n yield put(ACTION_CREATORS.toggleRightPanelAction(true));\n }\n}\n\nexport function* watchPortalItemRemovals(action) {\n const { payload: { itemIDs }, dontStack = false } = action;\n const portalID = yield select(SELECTORS.getPortalIDSelector);\n const existingItems = yield select(SELECTORS.getPortalItems);\n const itemIDList = itemIDs.filter(i => i);\n const itemsToRemove = existingItems.filter(({ id }) => itemIDList.includes(id));\n const formsToRemoveIds = itemsToRemove.filter(({ type }) => type === ITEM_TYPES.FORM).map(({ id }) => id);\n const sentboxItems = existingItems.filter(({ type }) => type === ITEM_TYPES.SENTBOX_LINK);\n\n if (formsToRemoveIds && sentboxItems) {\n const sentboxItemsToRemove = sentboxItems.filter(({ resourceID }) => formsToRemoveIds.includes(resourceID));\n sentboxItemsToRemove.forEach(sentboxItem => {\n itemsToRemove.push(sentboxItem);\n itemIDList.push(sentboxItem.id);\n });\n }\n\n if (!itemIDList.length) {\n throw new Error('No item ID supplied for removal.');\n }\n\n let newItemList = existingItems;\n\n itemsToRemove.forEach(item => {\n newItemList = getOrderedItemList(newItemList, item);\n });\n\n yield call(API.removeItemsFromPortal, portalID, itemIDList);\n const isSingleItem = itemsToRemove.length === 1;\n yield put(ACTION_CREATORS.trackEventAction(\n {\n action: 'itemsRemoved',\n target: {\n count: itemIDList.length,\n ...isSingleItem && { type: itemsToRemove[0].type, id: itemsToRemove[0].id }\n }\n }\n ));\n\n const isPaymentFieldDeleted = itemsToRemove.find(item => [ITEM_TYPES.PRODUCT_LIST, ITEM_TYPES.DONATION].includes(item.type));\n const noPaymentAfterDeletion = !newItemList.find(item => [ITEM_TYPES.PRODUCT_LIST, ITEM_TYPES.DONATION].includes(item.type));\n const isReusableConnectionEnabled = yield select(SELECTORS.getIsReusableConnectionEnabled);\n if (isPaymentFieldDeleted && noPaymentAfterDeletion && isReusableConnectionEnabled) { // remove/detach connection\n const checkoutFormID = yield select(SELECTORS.getCheckoutFormIDSelector);\n yield put(ACTION_CREATORS.updateGatewaySettings({ type: 'control_payment', currency: 'USD', itemDeleted: 1 }));\n yield call(PaymentActions.detachPaymentConnection, 'APP', checkoutFormID);\n }\n\n yield put({\n type: ACTION_TYPES.REMOVE_PORTAL_ITEMS.SUCCESS, payload: newItemList, requestAction: action, dontStack, currentData: itemsToRemove\n });\n\n const message = isSingleItem\n ? t('Item is deleted')\n : t('Items are deleted');\n\n yield put(ACTION_CREATORS.undoableToastAction(message));\n yield put(ACTION_CREATORS.selectPortalItemAction(''));\n}\n\nexport function* watchFetchForms() {\n let forms = yield call(API.fetchForms);\n if (isTeamResourcePicker()) {\n const teamForms = yield call(API.getTeamResources, { teamID: TEAM_ID, resourceType: 'form' });\n forms = [...forms, ...teamForms];\n }\n yield put({ type: ACTION_TYPES.FETCH_FORMS.SUCCESS, payload: forms });\n}\n\nfunction* fetchTeamResources(resourceType, actionType) {\n const teamID = getTeamID();\n const response = yield call(API.getTeamResources, { teamID, resourceType });\n yield put({ type: actionType, payload: response });\n}\n\nexport function* watchFetchResources(resourceType, actionType, regularAction) {\n const actions = {\n team: () => call(fetchTeamResources, resourceType, actionType),\n regular: () => call(regularAction)\n };\n\n yield actions[isTeamResourcePicker() ? 'team' : 'regular']();\n}\n\nconst prepateSignDocuments = signs => {\n const preparedSigns = signs.map(sign => {\n const { signerCount, embedDocumentKey, formID } = sign;\n\n const handleGoToSign = () => {\n handleCustomNavigation(`/sign/${formID}/send/embed`, '_blank');\n };\n\n const errorText = (\n <>\n Only single signer and\n {' '}\n embed code generated\n {' '}\n documents can be added\n \n );\n\n if (signerCount < 1) {\n return {\n ...sign, errorText, disabled: true, noSigner: true\n };\n }\n\n if (signerCount > 1) {\n return {\n ...sign, errorText, disabled: true, multipleSigner: true\n };\n }\n\n if (!embedDocumentKey) {\n return {\n ...sign, errorText, disabled: true, noLink: true\n };\n }\n\n return sign;\n });\n\n const sortSigns = items => {\n return items.sort((a, b) => {\n const date1 = new Date(a.modificationDate);\n const date2 = new Date(b.modificationDate);\n return date1.getTime() - date2.getTime();\n });\n };\n\n const noLinkSigns = preparedSigns.filter(item => item.noLink);\n const noSignerSigns = preparedSigns.filter(item => item.noSigner);\n const multipleSigners = preparedSigns.filter(item => item.multipleSigner);\n const demonstrableSings = preparedSigns.filter(item => !item.disabled);\n const sortedSigns = sortSigns(demonstrableSings);\n\n // change the parts if it needed..\n return [...sortSigns(sortedSigns), ...sortSigns([...noLinkSigns, ...noSignerSigns, ...multipleSigners])];\n};\n\nexport function* wathcFetchSigns() {\n if (!isFeatureEnabled(FEATURE_NAMES.SignField)) {\n return;\n }\n const appID = yield select(SELECTORS.getAppID);\n const signs = yield call(API.fetchSigns, appID);\n const preparedSigns = prepateSignDocuments(signs);\n yield put({ type: ACTION_TYPES.FETCH_SIGNS.SUCCESS, payload: preparedSigns });\n}\n\nexport function* portalCreationError(error) {\n const { data: { responseCode } = {} } = error;\n let reason = 'default';\n switch (responseCode) {\n case 429:\n const isUserLoggedIn = yield select(SELECTORS.selectIsUserLoggedIn);\n reason = isUserLoggedIn ? PORTAL_ERROR_MAP.CREATE.CREATE_APP_RATE_LIMIT : PORTAL_ERROR_MAP.CREATE.CREATE_APP_RATE_LIMIT_GUEST;\n break;\n case 500:\n reason = PORTAL_ERROR_MAP.CREATE.CREATE_APP;\n break;\n default:\n }\n yield put({ type: ACTION_TYPES.SET_APP_STATUS, payload: { error } });\n yield put({ type: ACTION_TYPES.CREATE_NEW_PORTAL.ERROR, payload: PORTAL_ERROR_MAP.CREATE[reason], error });\n}\n\nexport function* watchCreatePortal({ formIDs = null, widgetDefaults = null, createWithFormProperties = {} }) {\n try {\n const appPropertiesDefault = useAppDefaults();\n const appProperties = { ...appPropertiesDefault, ...createWithFormProperties };\n const homePage = { id: 0, pageOrder: 0 };\n const _page = isFeatureEnabled(FEATURE_NAMES.SortPages) ? homePage : null;\n const app = yield call(API.createPortal, formIDs, appProperties, widgetDefaults, _page);\n const { id } = app;\n const isFromStartFromScratch = StorageHelper.getSessionStorageItem({ key: 'create_app_from_scratch' });\n const from = isFromStartFromScratch && { from: 'wizard:start-from-scratch' };\n\n yield put(ACTION_CREATORS.trackEventAction({ action: 'appCreated', target: { portalID: id, ...from } }));\n StorageHelper.removeSessionStorageItem({ key: 'create_app_from_scratch' });\n yield call(normalizeAndRegisterApp, app);\n yield put({ type: ACTION_TYPES.CREATE_NEW_PORTAL.SUCCESS, payload: { formIDs, widgetDefaults } });\n navigate(`${getAppPath()}/build/${id}${window.location.search}`, { replace: true });\n } catch (error) {\n yield call(portalCreationError, error);\n }\n}\n\nexport function* watchBuildOrCreate({ payload: formID }) {\n yield put(ACTION_CREATORS.fetchFormsAction());\n const portalsOfForm = yield call(API.fetchPortalsByFormID, formID);\n if (portalsOfForm.length === 0) {\n navigate(`${getAppPath()}/create/${formID}`, { replace: true });\n return;\n }\n yield put({ type: ACTION_TYPES.FETCH_APPS.SUCCESS, payload: portalsOfForm });\n}\n\nexport function* shareFlow() {\n yield takeEvery(ACTION_TYPES.BULK_SHARE_PORTAL.REQUEST, watchSharePortal);\n yield takeEvery(ACTION_TYPES.BULK_DELETE_SHARE_PORTAL.REQUEST, watchShareDeletePortal);\n yield takeEvery(ACTION_TYPES.UPDATE_RESOURCE_SHARE_URL.REQUEST, watchResourceShareURLUpdate);\n yield takeLatest(ACTION_TYPES.FETCH_SHARE_LIST.REQUEST, watchFetchShareList);\n}\n\nexport function* watchItemOrderUpdate(action) {\n const { payload, dontStack = false } = action;\n const {\n data, sortInfo, page, elementID\n } = payload;\n\n const pageHeadingItems = data.filter(i => i.page === page).filter(i => i.type === ITEM_TYPES.HEADING);\n const isItFirstHeading = pageHeadingItems.length === 1;\n\n if (isItFirstHeading) {\n const { title } = yield select(SELECTORS.getPortalItemByIDSelector(elementID));\n yield put({\n type: ACTION_TYPES.WATCH_HEADING_ITEM_FOR_PAGE_NAMING,\n payload: {\n itemID: elementID,\n prop: {\n title,\n newPage: page\n }\n }\n });\n }\n\n const requestAction = { type: ACTION_TYPES.UPDATE_ORDER.REQUEST, payload: data };\n const portalID = yield select(SELECTORS.getPortalIDSelector);\n const currentData = yield select(SELECTORS.getPortalItems);\n yield put(requestAction);\n\n const result = yield call(API.bulkUpdateItems, portalID, data);\n\n yield put({\n type: ACTION_TYPES.UPDATE_ORDER.SUCCESS,\n payload: result,\n currentData,\n requestAction: action,\n dontStack\n });\n\n yield put(ACTION_CREATORS.trackEventAction({ action: 'itemOrdersUpdated', target: sortInfo }));\n}\n\nfunction* checkLoginableApp() {\n const { loginable, id } = yield select(SELECTORS.getAppInfoWithDefaults);\n if (isYes(loginable)) {\n return;\n }\n // make portal loginable\n yield put(ACTION_CREATORS.updatePortalAction({ loginable: 'Yes' }));\n const redirectPublish = () => {\n navigate(`${getAppPath()}/build/${id}/publish/link/shareSettings`);\n };\n yield put(ACTION_CREATORS.toastAction({\n message: 'Users now can access their submissions through the app.',\n buttonText: 'Go to Publish',\n onButtonClick: redirectPublish\n }));\n}\n\n// TODO :: seperate this\n/* eslint-disable max-statements */\n/* eslint-disable-next-line complexity */\nexport function* watchItemPropUpdate(action) {\n const {\n payload: {\n itemID, prop, linkedItemID = null, bypassDebounce = false\n }\n } = action;\n const portalID = yield select(SELECTORS.getPortalIDSelector);\n if (!itemID) {\n throw new Error('No item ID specified');\n }\n\n let updatingProps = { ...prop };\n let linkPreviewResolved = false;\n const itemProps = yield select(SELECTORS.getPortalItemByIDSelector(itemID));\n const {\n showLinkPreview: currentShowLinkPreview, type, title: itemTitle, formTitle\n } = itemProps;\n const updatingShowLinkPreview = updatingProps?.showLinkPreview;\n\n if (type === ITEM_TYPES.LINK) {\n const updatingLinkWithPreviewEnabled = Object.keys(prop).includes('title') && isYes(currentShowLinkPreview);\n const turningPreviewOn = isYes(updatingShowLinkPreview);\n // Do not send request when showLinkPreview is No.\n if (updatingLinkWithPreviewEnabled || turningPreviewOn) {\n const sanitizedTitle = (prop.title || '').replace(/^https:\\/\\/(https?):\\/\\//, '$1://'); // replace w/ first matched group // TODO try to handle other protocols and occurrences too\n const linkTargetIsMailTo = sanitizedTitle.startsWith('mailto:'); // Dirty fix, validUrl check gets confused about mailto..\n const URL = checkAndAddProtocolToTargetLink(sanitizedTitle || itemTitle);\n if (isValidLinkTarget(URL) && !linkTargetIsMailTo) {\n yield put(ACTION_CREATORS.updateItemLoadingStatus({ [itemID]: true }));\n linkPreviewResolved = true;\n // get preview\n const {\n title: previewTitle,\n image: previewImageURL,\n imageWidth: previewImageWidth,\n imageHeight: previewImageHeight\n } = yield call(API.getLinkItemPreviewDetails, { portalID, itemID, URL });\n\n // Enrich props\n updatingProps = {\n ...updatingProps,\n previewTitle,\n previewImageURL,\n previewImageWidth,\n previewImageHeight\n };\n\n if (prop.title && sanitizedTitle !== prop.title) {\n updatingProps = {\n ...updatingProps,\n title: sanitizedTitle\n };\n }\n\n // Track\n yield put(ACTION_CREATORS.trackEventAction({ action: 'linkPreviewResolved', target: { itemID } }));\n } else {\n updatingProps = {\n ...updatingProps,\n previewTitle: 'Link',\n previewImageURL: '',\n previewImageWidth: '',\n previewImageHeight: ''\n };\n }\n }\n }\n\n // Guard for empty form titles\n if ([ITEM_TYPES.FORM, ITEM_TYPES.SIGN_LINK].includes(type)) {\n const { title, required_showBadge, completed_showBadge } = updatingProps;\n if (title === '' && type === ITEM_TYPES.FORM) {\n updatingProps = { ...updatingProps, title: formTitle };\n }\n // todo :: handle elsewhere\n if (isYes(required_showBadge)) updatingProps = { ...updatingProps, completed_showBadge: required_showBadge };\n\n if ((isYes(required_showBadge) || isYes(completed_showBadge))) {\n yield call(checkLoginableApp);\n }\n }\n\n if (ITEM_TYPES.FORM === type && !!prop.embeddedForm && itemProps.isInitialForm === 'Yes') {\n const _action = prop.embeddedForm === 'Yes' ? 'enabled' : 'disabled';\n logAbTestActionFor(AB_TESTS.ShowFormFromFormBuilder, { action: _action, target: 'showForm' });\n }\n\n const currentItem = yield select(SELECTORS.getItemWithDefaults(itemID));\n\n const { buttonRole, buttonValue: updatingButtonValue } = updatingProps;\n\n if (ActionHelper.ACTIONABLE_ITEMS.includes(type)) {\n const ItemActionHelper = ActionHelper.createComponent(type);\n const userInfo = yield select(SELECTORS.getUser);\n const firstPageID = yield select(SELECTORS.getFirstPageID);\n const pages = yield select(SELECTORS.getPortalPages);\n const pagesLength = pages?.length;\n\n const { title, buttonRole: currentButtonRole, buttonValue } = currentItem;\n const { title: currentFormTitle } = yield select(SELECTORS.getFormByID(buttonValue));\n\n const isTitleFormTitle = title === currentFormTitle;\n const isTitleDefault = ItemActionHelper.isTitleDefault(title);\n\n if (!updatingButtonValue && buttonRole) {\n const { defaultTexts } = ItemActionHelper;\n const updatingButtonProps = updateAndOverrideButtonProperties({\n defaultTexts,\n currentItem,\n updatingProps,\n userInfo,\n isTitleFormTitle,\n isTitleDefault,\n navigationDefaultPage: pagesLength > 1 ? firstPageID : ''\n });\n updatingProps = { ...updatingProps, ...updatingButtonProps };\n }\n\n if (currentButtonRole === BUTTON_ROLE_TYPES.FORM && updatingButtonValue) {\n const { title: updatingFormTitle } = yield select(SELECTORS.getFormByID(updatingButtonValue));\n\n const newTitle = (!title || isTitleDefault || isTitleFormTitle) ? { title: updatingFormTitle } : {};\n\n // We need to send buttonRole even if it's not one of the changing props\n updatingProps = { ...updatingProps, ...newTitle, buttonRole: currentButtonRole };\n }\n }\n\n if (type === ITEM_TYPES.HEADING) {\n yield put({ type: ACTION_TYPES.WATCH_HEADING_ITEM_FOR_PAGE_NAMING, payload: action.payload });\n }\n\n // Make icon svg urls relative\n if (updatingProps.itemIcon) {\n updatingProps.itemIcon = sanitizeSVGIconURLs(updatingProps.itemIcon);\n }\n\n const currentData = Object.keys(updatingProps).reduce((pre, next) => {\n return { ...pre, [next]: currentItem[next] };\n }, {});\n\n const shouldUpdate = shouldUpdatePropFromResponse(type, updatingProps);\n\n const actionType = bypassDebounce ? ACTION_TYPES.UPDATE_ITEM_PROP.WITHOUT_DEBOUNCE : ACTION_TYPES.UPDATE_ITEM_PROP.WITH_DEBOUNCE;\n\n yield put({\n type: actionType,\n payload: {\n itemID,\n prop: updatingProps,\n linkedItemID\n },\n shouldUpdate,\n currentData,\n linkPreviewResolved,\n requestAction: action,\n currentItem\n });\n}\n\nexport function* watchItemPropUpdateRequest(action) {\n const isBuilder = yield select(SELECTORS.getIsBuilder);\n if (!isBuilder) return;\n\n const portalID = yield select(SELECTORS.getPortalIDSelector);\n const previewPanelOpened = yield select(SELECTORS.isPreviewPanelOpenSelector);\n\n const {\n payload: { itemID, prop: updatingProps, linkedItemID = null }, linkPreviewResolved, currentData, shouldUpdate, currentItem\n } = action;\n\n try {\n let result = yield call(API.changeItemProp, portalID, itemID, updatingProps);\n\n if (shouldUpdate) {\n const mutaterFunc = resultMutaters(currentItem)?.[currentItem?.type];\n if (mutaterFunc && typeof mutaterFunc === 'function') {\n result = mutaterFunc(result);\n }\n }\n\n if (shouldUpdate || previewPanelOpened) {\n yield put({\n type: ACTION_TYPES.UPDATE_ITEM_PROP.SUCCESS,\n payload: result,\n requestAction: action,\n currentData\n });\n }\n\n if (currentItem?.page) {\n const pageProps = yield select(SELECTORS.getPageByID(currentItem.page));\n if (pageProps?.linkedItemID) {\n const activeRowID = yield select(SELECTORS.dsGetActiveListRowID(pageProps.linkedItemID));\n yield put(ACTION_CREATORS.dsFetchRow({ itemID, rowID: activeRowID }));\n } else if (linkedItemID) {\n yield put(ACTION_CREATORS.setLivePreviewStatus(APP_PREVIEW_STATES.LOADING));\n\n const isButtonRoleUpdate = Object.keys(updatingProps).includes('buttonRole');\n yield put(ACTION_CREATORS.dsFetchSourceItemData({ itemID: linkedItemID, isButtonRoleUpdate }));\n }\n }\n\n if (currentItem?.type === ITEM_TYPES.LIST && Object.keys(updatingProps)?.includes('resourceID')) {\n yield put(ACTION_CREATORS.dsFetchColumnsRequest({ resourceID: updatingProps.resourceID, viewID: updatingProps?.viewID }));\n yield put(ACTION_CREATORS.dsFetchSourceItemData({ itemID: currentItem.id }));\n yield put(ACTION_CREATORS.dsSetActiveRowID({ id: itemID, rowID: null }));\n }\n\n if (linkPreviewResolved) { // TODO Handle error cases too\n yield put(ACTION_CREATORS.updateItemLoadingStatus({ [itemID]: false }));\n }\n\n // Track\n const resultsEntries = Object.entries(result);\n for (let i = 0; i < resultsEntries.length; i++) {\n const [updatedItemID, value] = resultsEntries[i];\n const updatedPropKeys = Object.keys(value);\n yield put(ACTION_CREATORS.trackEventAction({ action: 'itemUpdated', target: { itemID: updatedItemID, prop: updatedPropKeys } }));\n }\n if (linkedItemID) {\n yield put(ACTION_CREATORS.setAppUpdatedAt(true));\n }\n } catch (err) {\n console.error(err);\n yield put(ACTION_CREATORS.toastAction({\n message: 'Changes are not saved',\n error: true,\n type: 'error'\n }));\n }\n}\n/* eslint-enable max-statements */\n\nexport function* watchCreateFormFromTemplate({ payload: { cloneData } }) {\n const { status, data: { form: { id: formID } } } = yield call(API.cloneTemplate, 'form', cloneData);\n yield put(ACTION_CREATORS.trackEventAction({ action: 'templateUsed', target: { templateID: cloneData.formID } }));\n if (status !== 200) {\n yield put({ type: ACTION_TYPES.CREATE_FORM_FROM_TEMPLATE.ERROR });\n return;\n }\n\n yield put(ACTION_CREATORS.fetchFormsAction());\n const formProps = {\n id: formID,\n ...useItemDefaults(ITEM_TYPES.FORM)\n };\n yield put(ACTION_CREATORS.addPortalItemAction(formProps));\n}\n\nexport function* watchCreateFormFromScratch({ payload: formID }) {\n yield put(ACTION_CREATORS.trackEventAction({ action: 'formCreated', target: { formID: formID } }));\n if (!formID) {\n yield put({ type: ACTION_TYPES.CREATE_FORM_FROM_SCRATCH.ERROR });\n return;\n }\n\n yield put(ACTION_CREATORS.fetchFormsAction());\n const formProps = {\n id: formID,\n ...useItemDefaults(ITEM_TYPES.FORM)\n };\n yield put(ACTION_CREATORS.addPortalItemAction(formProps));\n}\n\nexport function* watchCreateSignDocumentFromTemplate({ payload: { cloneData, confirmData } }) {\n const { status, data: { formID, documentID, embedDocumentKey = '' } } = yield call(API.cloneTemplate, 'pdf', cloneData);\n yield put(ACTION_CREATORS.trackEventAction({ action: 'signTemplateUsed', target: { templateID: cloneData.id } }));\n if (status !== 200) {\n yield put({ type: ACTION_TYPES.CREATE_SIGN_DOCUMENT_FROM_TEMPLATE.ERROR });\n return;\n }\n const signElementProps = {\n formID, id: documentID, embedDocumentKey, ...useItemDefaults(ITEM_TYPES.SIGN_LINK)\n };\n yield put(ACTION_CREATORS.onResourcePickerModalConfirm({ ...confirmData, selectedResourcesArray: [signElementProps] }));\n}\n\nexport function* watchMultipleItemUpdate(action) {\n const { payload, dontStack = false } = action;\n const portalID = yield select(SELECTORS.getPortalIDSelector);\n const currentPortalItems = yield select(SELECTORS.getPortalItems);\n const itemsToUpdate = {};\n let checkAppIsLoginable = false;\n payload.forEach(({ id: itemID, ...itemProps }, key) => {\n let updatedProps = itemProps;\n // todo :: handle elsewhere\n const showRequiredBadge = isYes(itemProps.required_showBadge);\n if (showRequiredBadge) {\n updatedProps = { ...itemProps, completed_showBadge: itemProps.required_showBadge };\n payload[key].completed_showBadge = itemProps.required_showBadge;\n }\n // We must prevent enabling shrink from multiple right panel if embeddedForm is enabled\n if (isYes(updatedProps.shrink) && isYes(!updatedProps.embeddedForm)) {\n const { embeddedForm } = currentPortalItems.find(({ id }) => id === itemID);\n if (isYes(embeddedForm)) {\n updatedProps = { ...updatedProps, shrink: 'No' };\n payload[key].shrink = 'No';\n }\n }\n if ((showRequiredBadge || isYes(itemProps.completed_showBadge))) {\n checkAppIsLoginable = true;\n }\n itemsToUpdate[itemID] = updatedProps;\n });\n\n if (checkAppIsLoginable) {\n yield call(checkLoginableApp);\n }\n const updatedItemIDs = Object.keys(itemsToUpdate);\n if (updatedItemIDs.length === 0) {\n return;\n }\n const currentData = currentPortalItems.filter(({ id }) => updatedItemIDs.includes(id));\n yield put({\n type: ACTION_TYPES.UPDATE_MULTIPLE_ITEM.REQUEST,\n payload: itemsToUpdate,\n currentData,\n requestAction: action\n });\n\n const response = yield call(API.bulkUpdateItems, portalID, payload);\n\n yield put({\n type: ACTION_TYPES.UPDATE_MULTIPLE_ITEM.SUCCESS,\n payload: response,\n currentData,\n requestAction: action,\n dontStack\n });\n yield put(ACTION_CREATORS.trackEventAction({ action: 'bulkItemUpdate', target: { itemIDs: Object.keys(response) } }));\n}\n\nexport function* updateSlug({\n slug,\n forReset,\n reject: rejectCheck,\n resolve: resolveCheck\n}) {\n try {\n const prevSlug = yield select(SELECTORS.getAppSlug);\n if (prevSlug === slug) {\n resolveCheck();\n return;\n }\n if (!forReset) {\n const { isSlugAvailable } = yield call(API.isSlugAvailable, slug);\n if (!isSlugAvailable) {\n rejectCheck(t('Slug is already in use.'));\n return;\n }\n }\n\n yield put({\n type: ACTION_TYPES.UPDATE_PORTAL.UNDOABLE,\n payload: {\n slug\n }\n });\n resolveCheck();\n } catch (err) {\n if (err?.data?.message) {\n const errorMessageFromAPI = ERROR_MESSAGES[err.data?.message] || ERROR_MESSAGES.DEFAULT;\n rejectCheck(t(errorMessageFromAPI));\n } else {\n rejectCheck(t('Slug is already in use.'));\n }\n }\n}\n\nexport function* watchUserSettingUpdate({ payload: userData }) {\n const username = yield select(SELECTORS.getUsername);\n if (username) {\n const res = yield call(API.updateUserSettings, username, userData);\n const updatedKeys = Object.keys(userData);\n // use only updated keys\n const payload = updatedKeys.reduce((prev, next) => ({ ...prev, [next]: res[next] }), {});\n yield put({ type: ACTION_TYPES.UPDATE_USER.SUCCESS, payload });\n }\n}\n\nexport function* watchContinueAsUser() {\n const appID = yield select(SELECTORS.getAppID);\n yield call(API.portalUserAddCurrentUser, appID);\n yield put({ type: ACTION_TYPES.CONTINUE_AS_USER.SUCCESS, payload: false });\n}\n\nexport function* watchAPIRequests() {\n const currentUpdateReqActions = yield actionChannel(({ type }) => isUpdateAPIAction(type), buffers.expanding());\n // check if there are upcoming updates\n const savingProcess = yield select(SELECTORS.areAPIRequestsCompletedSelector);\n try {\n while (true) {\n const { type: actionType } = yield take(currentUpdateReqActions);\n if (isAPIRequestAction({ type: actionType }) && !savingProcess) {\n yield put(ACTION_CREATORS.setApiRequestsCompleted(false));\n } else if (isAPISuccessAction({ type: actionType })) {\n yield put(ACTION_CREATORS.setApiRequestsCompleted(true));\n }\n }\n } catch (e) {\n //\n }\n}\n\nfunction* sendFeedback({ payload }) {\n const {\n stars, feedbackText, feedbackEmail, formID: feedbackFormID\n } = payload;\n const portalID = yield select(SELECTORS.getPortalIDSelector);\n const currentUser = yield select(SELECTORS.getUser);\n const { username, email } = currentUser;\n const emailValue = feedbackEmail || email;\n const feedbackData = {\n ...stars && {\n q5_howWould: stars,\n q5_stars: stars,\n q7_greatWhat7: (stars > 3 ? feedbackText : ''),\n q9_whatCould: (stars === 3 ? feedbackText : ''),\n q8_wereSorry: (stars < 3 ? feedbackText : '')\n },\n ...!stars && {\n q9_whatCould: feedbackText || ''\n },\n q11_appid: portalID,\n q3_username: username,\n q20_email: emailValue,\n // plase don't change below 3 keys & values\n formID: feedbackFormID,\n q18_ticketcategoryid: 37,\n q19_assignee: 'Orion_Team'\n };\n\n try {\n yield call(API.sendFeedbackSubmission, feedbackData);\n yield put({ type: ACTION_TYPES.SEND_FEEDBACK.SUCCESS });\n } catch (e) {\n yield put({ type: ACTION_TYPES.SEND_FEEDBACK.ERROR, error: e });\n }\n}\n\nfunction* fetchApps() {\n const { id: appID } = yield select(SELECTORS.getAppInfoWithDefaults);\n const apps = yield call(API.fetchUserPortals, appID);\n yield put({ type: ACTION_TYPES.FETCH_APPS.SUCCESS, payload: apps });\n}\n\nexport function* watchFetchUserApps() {\n yield call(watchFetchResources, 'portal', ACTION_TYPES.FETCH_APPS.SUCCESS, fetchApps);\n}\n\nexport function* watchDeleteSelectedItems() {\n const multipleSelecteds = yield select(SELECTORS.getSelectedMultipleItems);\n const items = yield select(SELECTORS.getPortalItems);\n const listItemsToRemoved = items.filter(({ type, id }) => type === ITEM_TYPES.LIST && multipleSelecteds.includes(id));\n yield all(listItemsToRemoved?.map(item => put(ACTION_CREATORS.dsDeleteDetailPage({ item }))));\n const presentationItemIDs = listItemsToRemoved.map(({ presentationItemID }) => presentationItemID);\n\n yield put(ACTION_CREATORS.removePortalItems([...multipleSelecteds, ...presentationItemIDs]));\n}\n\nexport function* watchBrandingButtonClick() {\n const appMode = yield select(SELECTORS.getAppModeSelector);\n const isBuilder = appMode === APP_MODES.builder;\n const appID = yield select(SELECTORS.getPortalIDSelector);\n const utmScheme = {\n ...BRANDING_DEFAULT_UTM_SCHEME,\n ...(isBuilder && { source: 'appBuilder' }),\n appID\n };\n const utmString = utmParser(utmScheme);\n if (!isBuilder) yield put(ACTION_CREATORS.trackEventAction({ action: 'brandingFooterClicked' }));\n handleCustomNavigation(`${isBuilder ? '/pricing' : 'https://www.jotform.com/myapps/'}?${utmString}&action=createWizard`, '_blank', true);\n}\n\nfunction* templateCategoriesFlow() {\n const appMode = yield select(SELECTORS.getAppModeSelector);\n if (appMode === APP_MODES.builder && isFeatureEnabled(FEATURE_NAMES.ShareAsTemplate)) {\n const response = yield call(API.getTemplateCategories);\n yield put({ type: ACTION_TYPES.SET_TEMPLATE_CATEGORIES, payload: response });\n\n const { data: { languages } } = yield call(API.getTemplateLanguages);\n yield put({ type: ACTION_TYPES.SET_TEMPLATE_LANGUAGES, payload: languages });\n }\n}\n\nfunction* svgIconsFlow() {\n const appMode = yield select(SELECTORS.getAppModeSelector);\n if (appMode === APP_MODES.builder) {\n // put icons svgRefs to the dom\n yield call(prepareIcons, appConfig.svgIconsContainer);\n }\n}\n\nexport function* fetchCDNConfigFlow() {\n const appMode = yield select(SELECTORS.getAppModeSelector);\n if (appMode === APP_MODES.builder || isEnterprise()) {\n yield put({ type: ACTION_TYPES.FETCH_CDN_CONFIG.REQUEST });\n const result = yield call(API.fetchCDNConfig);\n const { configs = {} } = result;\n const CDN = (!configs.cloudURL || (configs.cloudURL && configs.cloudURL.length === 0)) ? '/' : configs.cloudURL;\n const config = { ...configs, CDN };\n yield put({ type: ACTION_TYPES.FETCH_CDN_CONFIG.SUCCESS, payload: config });\n }\n}\n\nexport function* fetchResources() {\n const appMode = yield select(SELECTORS.getAppModeSelector);\n if (appMode === APP_MODES.builder) {\n yield put(ACTION_CREATORS.fetchFormsAction());\n yield put(ACTION_CREATORS.fetchSignAction());\n }\n}\n\nfunction* fetchUserApps() {\n yield take(ACTION_TYPES.FETCH_PORTAL.SUCCESS);\n const appMode = yield select(SELECTORS.getAppModeSelector);\n if (appMode === APP_MODES.builder) {\n yield put(ACTION_CREATORS.fetchUserAppsAction());\n }\n}\n\nexport function* watchLayoutChange(action) {\n const { payload: appLayout } = action;\n const { portalProps } = getLayoutProps(appLayout);\n\n if (portalProps) {\n yield put(ACTION_CREATORS.updatePortalAction(portalProps));\n }\n\n const items = yield select(SELECTORS.getPortalItems);\n\n const updatingItems = items.reduce((prev, item) => {\n const { type } = item;\n const { itemProps } = getLayoutProps(appLayout, type);\n const stylingProps = getProtectedStylingProps(appLayout, item);\n\n return [...prev, { ...item, ...itemProps, ...stylingProps }];\n }, []);\n\n yield put(ACTION_CREATORS.updateMultipleItemAction(updatingItems));\n}\n\nfunction* fetchUserSlugFlow() {\n yield all([take(ACTION_TYPES.FETCH_USER.SUCCESS), take(ACTION_TYPES.FETCH_PORTAL.SUCCESS)]);\n\n try {\n const [appMode, appInfo] = yield all([\n select(SELECTORS.getAppModeSelector),\n select(SELECTORS.getPortalInfoSelector)\n ]);\n\n if (appMode === APP_MODES.builder && appInfo?.username) {\n const { slug } = yield call(API.getUserSlug, appInfo.username);\n yield put({ type: ACTION_TYPES.SET_USER_SLUG, slug });\n }\n } catch (e) {\n console.error('Error on fetch user slug');\n }\n}\n\nfunction* watchUserChange(action) {\n const { payload: user } = action;\n\n const { id: appID } = yield select(SELECTORS.getAppInfoWithDefaults);\n\n yield call(API.claimGuestAccount, appID);\n\n try {\n yield call(API.portalUserAddCurrentUser, appID);\n } catch (err) {\n console.error('Error on adding portal user: ', err);\n }\n\n yield put(ACTION_CREATORS.setUserAction(user));\n\n yield put(ACTION_CREATORS.fetchPortalAction(appID));\n}\n\nexport function* watchUpdatePortalUserProps({ payload }) {\n const portalID = yield select(SELECTORS.getPortalIDSelector);\n\n const data = yield call(API.updatePortalUserProperty, portalID, payload);\n yield put({ type: ACTION_TYPES.UPDATE_PORTAL.REQUEST, payload: data });\n}\n\nexport function* watchCheckoutFormStatusChanges({ payload }) {\n switch (payload) {\n case CHECKOUT_FORM_STATUSES.COMPLETED:\n const isDonationApp = yield select(SELECTORS.getIsDonationApp);\n if (isDonationApp) {\n const portalPaymentCurrencyInfo = yield select(SELECTORS.getPortalPaymentCurrencyInfo);\n const donationPrice = yield select(SELECTORS.getDonationPriceInCart);\n const oldDonationGoal = yield select(SELECTORS.getCurrentDonationGoal);\n const currentDonationGoal = sumMoney({ ...portalPaymentCurrencyInfo, price: oldDonationGoal }, donationPrice).toString();\n yield put(ACTION_CREATORS.updatePortalPropAction({ currentDonationGoal, lastOrderAmount: donationPrice }));\n }\n yield put({ type: ACTION_TYPES.SET_CART_PRODUCTS, payload: {} });\n yield put({ type: ACTION_TYPES.SET_CHECKOUT_KEY, payload: '' });\n break;\n default:\n break;\n }\n}\n\nfunction* watchNavigationItemClick({ payload: { targetPageID } }) {\n yield put(ACTION_CREATORS.navigateToAction({ to: DESTINATION_TYPES.PAGE, pageID: targetPageID }));\n}\n\nfunction* watchSetTodoComplete({ payload: { formID, submissionCount } }) {\n const lastSubmitted = momentToString(Moment(getUpdatedDate(new Date().getTime(), 'America/New_York', true)), true);\n yield put(ACTION_CREATORS.setTodoItemCompleted({\n itemID: formID,\n prop: { lastSubmitted, submissionCount: submissionCount + 1 }\n }));\n}\n\nfunction* createNewPortalWithAny(onAppCreated, customAppProperties = {}, from) {\n try {\n const isMobilePhone = checkMobilePhone();\n const appPropertiesDefault = useAppDefaults();\n const appProperties = { ...appPropertiesDefault, ...customAppProperties };\n const homePage = { id: 0, pageOrder: 0 };\n const _page = isFeatureEnabled(FEATURE_NAMES.SortPages) ? homePage : null;\n const app = yield call(API.createPortal, null, appProperties, null, _page);\n const { id } = app;\n yield put(ACTION_CREATORS.trackEventAction({ action: 'appCreated', target: { portalID: id, ...from } }));\n yield call(normalizeAndRegisterApp, app);\n const isDonationActive = isFeatureEnabled(FEATURE_NAMES.DonationItem);\n let redirectUrl = `${getAppPath()}/build/${id}`;\n if (isDonationActive) {\n redirectUrl += '?useNewBuilder';\n }\n yield call(navigate, redirectUrl, { replace: true });\n if (id) {\n yield call(onAppCreated);\n if (!isMobilePhone) {\n yield put(ACTION_CREATORS.openRightPanelWithModeAction(RightPanelModes.APP_ITEM));\n }\n }\n } catch (error) {\n yield call(portalCreationError, error);\n }\n}\n\nexport function* createNewPortalWithTemplate({ payload }) {\n try {\n const app = yield call(API.fetchPortal, payload.appID);\n yield call(normalizeAndRegisterApp, app);\n const redirectUrl = `${getAppPath()}/build/${payload.appID}`;\n yield call(navigate, redirectUrl, { replace: true });\n StorageHelper.removeSessionStorageItem({ key: 'create_app_from_app_templates' });\n } catch (error) {\n yield call(portalCreationError, error);\n }\n}\n\nexport function* createNewPortalWithStore() {\n const isFromStoreBuilder = StorageHelper.getSessionStorageItem({ key: 'create_app_from_store_builder' });\n const from = isFromStoreBuilder && { from: 'create_app_from_store_builder' };\n function* onAppCreated() {\n const itemProps = {\n type: 'PRODUCT_LIST',\n title: t('Products'),\n page: '0'\n };\n yield put(ACTION_CREATORS.addPortalItemAction(itemProps, -1, true));\n yield take(ACTION_TYPES.ADD_PORTAL_ITEMS.SUCCESS);\n yield put(ACTION_CREATORS.selectPortalItemAction('1'));\n }\n yield call(createNewPortalWithAny, onAppCreated, {}, from);\n StorageHelper.removeSessionStorageItem({ key: 'create_app_from_store_builder' });\n}\n\nexport function* createNewPortalWithDonation() {\n function* onAppCreated() {\n const getItemDefaults = yield select(SELECTORS.getItemDefaultsGetter);\n yield put(ACTION_CREATORS.addPortalItemAction([\n { ...getItemDefaults(ITEM_TYPES.IMAGE), page: '0' },\n { ...getItemDefaults(ITEM_TYPES.DONATION), page: '0' }\n ]));\n yield put(ACTION_CREATORS.trackEventAction({ action: 'donationBoxAddedFromURL', target: { url: '/createWithDonationBuilder' } }));\n yield take(ACTION_TYPES.ADD_PORTAL_ITEMS.SUCCESS);\n yield put(ACTION_CREATORS.selectPortalItemAction('1'));\n }\n let customAppProperties = {\n [APP_HEADER_PROPS.appHeaderBgColor]: '#B2E0FF'\n };\n\n if (global.JOTFORM_ENV !== 'ENTERPRISE') {\n customAppProperties = {\n ...customAppProperties,\n appIconColor: '#0099FF',\n appIconBackground: '#FFFFFF',\n appIconSvgRef: 'jfc_icon_solid-heart',\n appIconURL: '/cardforms/assets/icons/icon-sets-v2/solid/Basic UI/jfc_icon_solid-heart.svg',\n appIconType: IMAGE_TYPE.icon,\n\n logoBackground: '#FFFFFF',\n logoIconSvgRef: 'jfc_icon_solid-heart',\n logoURL: '/cardforms/assets/icons/icon-sets-v2/solid/Basic UI/jfc_icon_solid-heart.svg',\n logoType: IMAGE_TYPE.icon,\n iconColor: '#0099FF'\n };\n }\n\n yield call(createNewPortalWithAny, onAppCreated, customAppProperties);\n}\nexport function* watchIsAppDone({ payload: isAppDone }) {\n const shouldShowProgressBar = yield select(SELECTORS.getShouldShowProgressBar);\n if (isAppDone && shouldShowProgressBar) {\n yield put(ACTION_CREATORS.showGenericModalAction({ name: MODALS.APP_IS_DONE_MODAL }));\n }\n}\n\nexport function* watchFormPickerModalConfirm({ payload }) {\n const {\n selection, portalOrder = ITEM_ADDITION_ORDER_STRATEGY.TO_END_OF_THE_PAGE, page, withClicking = false\n } = payload;\n const lastSelectedItemOrder = yield select(SELECTORS.getLastSelectedItemOrder);\n const getItemDefaults = yield select(SELECTORS.getItemDefaultsGetter);\n const formItems = selection.map(formID => ({ id: formID, type: ITEM_TYPES.FORM }));\n const useDndDropOrder = portalOrder && portalOrder !== ITEM_ADDITION_ORDER_STRATEGY.TO_END_OF_THE_PAGE;\n const newPortalOrder = useDndDropOrder ? portalOrder : lastSelectedItemOrder;\n\n const formsWithPage = formItems.reduce((prev, item) => ([...prev, { ...item, page }]), []);\n\n const forms = (page && page !== 'homepage') ? formsWithPage : formItems;\n const formsWithDefaultValues = forms.map(form => {\n return {\n ...form,\n ...getItemDefaults(ITEM_TYPES.FORM)\n };\n });\n yield put(ACTION_CREATORS.addPortalItemAction(formsWithDefaultValues, newPortalOrder, withClicking));\n}\n\nexport function* watchResourcePickerModalConfirm({ payload }) {\n const {\n selectedResourcesArray,\n resourceType,\n addOrder = ITEM_ADDITION_ORDER_STRATEGY.TO_END_OF_THE_PAGE,\n page,\n withClicking = false\n } = payload;\n const lastSelectedItemOrder = yield select(SELECTORS.getLastSelectedItemOrder);\n const getItemDefaults = yield select(SELECTORS.getItemDefaultsGetter);\n const appID = yield select(SELECTORS.getAppID);\n const useDndDropOrder = addOrder && addOrder !== ITEM_ADDITION_ORDER_STRATEGY.TO_END_OF_THE_PAGE;\n const newPortalOrder = useDndDropOrder ? addOrder : lastSelectedItemOrder;\n\n const itemTypesMap = {\n [RESOURCE_TYPES.TABLE]: ITEM_TYPES.TABLE_LINK,\n [RESOURCE_TYPES.REPORT]: ITEM_TYPES.REPORT_LINK,\n [RESOURCE_TYPES.SENTBOX]: ITEM_TYPES.SENTBOX_LINK,\n [RESOURCE_TYPES.SIGN]: ITEM_TYPES.SIGN_LINK,\n [RESOURCE_TYPES.DATA_SOURCE]: ITEM_TYPES.LIST\n };\n\n if (isFeatureEnabled(FEATURE_NAMES.FormResource)) {\n itemTypesMap[RESOURCE_TYPES.FORM] = ITEM_TYPES.FORM;\n }\n\n const newPortalItems = selectedResourcesArray.map(({\n name,\n title,\n id,\n type: reportType = 'reports', // Will be only used for reports,\n isTeamAsset = false,\n ...restResource\n }) => {\n const resourceSubType = (resourceType === RESOURCE_TYPES.REPORT) ? { resourceSubType: reportType } : {};\n const resourceURL = resourceType === RESOURCE_TYPES.FORM && isFeatureEnabled(FEATURE_NAMES.FormResource) ? restResource.url : generateResourceURL(resourceType, id, appID, reportType);\n return {\n ...getItemDefaults(itemTypesMap[resourceType]),\n resourceType,\n ...resourceSubType,\n resourceID: id,\n resourceURL,\n title: title || name,\n isTeamAsset,\n ...(page && page !== 'homepage') && { page }\n };\n });\n\n yield put(ACTION_CREATORS.addPortalItemAction(newPortalItems, newPortalOrder, withClicking));\n}\n\nexport function* watchLeftPanelItemClick({ payload: type }) {\n const getItemDefaults = yield select(SELECTORS.getItemDefaultsGetter);\n const lastSelectedItemOrder = yield select(SELECTORS.getLastSelectedItemOrder);\n const isMultiPage = yield select(SELECTORS.getIsMultiPage);\n const pageWithMaxPageOrder = yield select(SELECTORS.getPageWithMaxPageOrder);\n const lastInteractedPageID = yield select(SELECTORS.getLastInteractedPageID);\n const firstPageID = yield select(SELECTORS.getFirstPageID);\n const selectedPortalItems = yield select(SELECTORS.getSelectedPortalItems);\n const [selectedPortalItem] = selectedPortalItems ?? [];\n const lastPageID = isMultiPage && pageWithMaxPageOrder.id;\n const page = (lastInteractedPageID || (!selectedPortalItem && lastPageID)) || firstPageID;\n const pageProps = yield select(SELECTORS.getPageByID(page));\n\n switch (!!pageProps?.linkedItemID || type) {\n case ITEM_TYPES.FORM:\n if (isFeatureEnabled(FEATURE_NAMES.FormResource)) {\n yield put(ACTION_CREATORS.showGenericModalAction({\n name: MODALS.RESOURCE_PICKER_MODAL,\n resourceType: RESOURCE_TYPES.FORM,\n page,\n withClicking: true\n }));\n } else {\n yield put(ACTION_CREATORS.showGenericModalAction({\n name: MODALS.FORM_PICKER_MODAL,\n page,\n withClicking: true\n }));\n }\n return;\n case ITEM_TYPES.TABLE_LINK:\n yield put(ACTION_CREATORS.showGenericModalAction({\n name: MODALS.RESOURCE_PICKER_MODAL,\n resourceType: RESOURCE_TYPES.TABLE,\n page,\n withClicking: true\n }));\n return;\n case ITEM_TYPES.REPORT_LINK:\n yield put(ACTION_CREATORS.showGenericModalAction({\n name: MODALS.RESOURCE_PICKER_MODAL,\n resourceType: RESOURCE_TYPES.REPORT,\n page,\n withClicking: true\n }));\n return;\n case ITEM_TYPES.SENTBOX_LINK:\n yield put(ACTION_CREATORS.showGenericModalAction({\n name: MODALS.RESOURCE_PICKER_MODAL,\n resourceType: RESOURCE_TYPES.SENTBOX,\n page,\n withClicking: true\n }));\n return;\n case ITEM_TYPES.SIGN_LINK:\n yield put(ACTION_CREATORS.showGenericModalAction({\n name: MODALS.RESOURCE_PICKER_MODAL,\n resourceType: RESOURCE_TYPES.SIGN,\n page,\n withClicking: true\n }));\n return;\n default: // For other types\n const itemProps = getItemDefaults(type);\n yield put(ACTION_CREATORS.addPortalItemAction({ ...itemProps, ...page ? { page } : {} }, lastSelectedItemOrder, true));\n }\n}\n\nfunction* watchItemClick({ payload }) {\n const {\n itemID, metaKey, ctrlKey, shiftKey, rightPanelMode = RightPanelModes.APP_ITEM\n } = payload;\n\n const isMobileMultipleSelectMode = yield select(SELECTORS.getMobileMultipleSelectionMode);\n const selectedPortalItems = yield select(SELECTORS.getSelectedPortalItems);\n const [selectedPortalItem] = selectedPortalItems;\n // const { metaKey, ctrlKey, shiftKey } = event || {};\n const multipleSelectionMode = metaKey || ctrlKey || shiftKey;\n\n if ((multipleSelectionMode || isMobileMultipleSelectMode)) {\n yield put(ACTION_CREATORS.selectMultipleItemAction({ selection: itemID, withRange: shiftKey }));\n return;\n }\n\n if (!isEqual(selectedPortalItem, itemID)) {\n // TODO:: we should handle tempIDs\n // When a new item added, initially we are waiting for a response from API to get the item's ID\n // if the user wants to update this item before its ID return from API,\n // we are selecting an empty(undefined) item in UI since this false equality check returns true.\n // leads to problems both in UI and backend\n yield put(ACTION_CREATORS.selectPortalItemAction(itemID));\n yield put(ACTION_CREATORS.setRightPanelModeAction(rightPanelMode));\n }\n}\n\nfunction* watchOpenRightPanelWithMode({ payload: mode }) {\n yield put(ACTION_CREATORS.setRightPanelModeAction(mode));\n const isRightPanelOpen = yield select(SELECTORS.isRightPanelOpenSelector);\n const selectedItems = yield select(SELECTORS.getSelectedPortalItems);\n if (!isEmpty(selectedItems) && mode === RightPanelModes.APP_HEADER) {\n yield put(ACTION_CREATORS.selectPortalItemAction());\n }\n if (!isRightPanelOpen) {\n yield put(ACTION_CREATORS.toggleRightPanelAction(true));\n }\n}\n\nfunction* watchFetchUserTeams() {\n const userTeams = yield call(API.getUserTeams);\n\n yield put({ type: ACTION_TYPES.FETCH_USER_TEAMS.SUCCESS, payload: userTeams });\n}\n\nfunction* watchFetchUserTeamPermissions() {\n const teamPermissions = yield call(API.fetchUserPermissions);\n yield put({ type: ACTION_TYPES.FETCH_USER_TEAM_PERMISSIONS.SUCCESS, payload: teamPermissions });\n}\n\nfunction* watchUpdateAppLogo({ payload }) {\n const installableProps = yield call(handleInstallableAppIcon, payload);\n\n yield put(ACTION_CREATORS.updatePortalPropAction(installableProps));\n yield put(ACTION_CREATORS.trackEventAction({ action: 'appUpdated', target: { props: Object.keys(installableProps) } }));\n}\n\nfunction* watchOnStageClick() {\n const isAppCoverCropperActive = yield select(SELECTORS.getAppCoverCropState);\n const isAppHeaderCropperActive = yield select(SELECTORS.getAppHeaderCropState);\n const isRightPanelOpen = yield select(SELECTORS.isRightPanelOpenSelector);\n const isLeftPanelOpen = yield select(SELECTORS.isLeftPanelOpenSelector);\n const selectedItems = yield select(SELECTORS.getSelectedPortalItems);\n const selectedPage = yield select(SELECTORS.getSelectedPage);\n const lastAddedItemAction = yield select(SELECTORS.getLastAddedItemIDSelector);\n const isMobile = checkMobilePhone();\n\n const isAnyCropperActive = isAppCoverCropperActive || isAppHeaderCropperActive;\n\n if (isRightPanelOpen) {\n yield put(ACTION_CREATORS.toggleRightPanelAction(false));\n yield put(ACTION_CREATORS.setRightPanelModeAction(''));\n }\n if (!isAnyCropperActive) {\n if (!isEmpty(selectedItems)) {\n yield put(ACTION_CREATORS.selectPortalItemAction(''));\n }\n if (selectedPage) {\n yield put(ACTION_CREATORS.selectPageAction());\n }\n if (lastAddedItemAction) {\n yield put(ACTION_CREATORS.clearLastAddedItemAction());\n }\n }\n if (isMobile && isLeftPanelOpen) {\n yield put(ACTION_CREATORS.toggleLeftPanelAction(false));\n }\n}\n\nfunction* watchShowDonationItem() {\n const allItems = yield select(SELECTORS.getPortalItems);\n const activePageID = yield select(SELECTORS.getActivePageID);\n const donationItem = allItems.find(item => item.type === ITEM_TYPES.DONATION);\n const donationItemPage = donationItem?.page;\n\n yield put(ACTION_CREATORS.trackEventAction({ action: 'topBarDonationButtonClicked' }));\n\n if (activePageID !== donationItemPage) {\n yield put(ACTION_CREATORS.navigateToAction({ to: DESTINATION_TYPES.PAGE, pageID: donationItemPage }));\n yield take(ACTION_TYPES.ACTIVE_PAGE);\n }\n\n const donationItemElement = document.querySelector('div[type=\"DONATION\"]');\n donationItemElement.scrollIntoView({ block: 'center' });\n}\n\nfunction* watchOnDragEnd({ payload }) {\n const getItemDefaults = yield select(SELECTORS.getItemDefaultsGetter);\n const { source, destination, draggableId } = payload;\n\n if (!destination) return;\n const { droppableId: srcDropppableID, index: oldIndex } = source;\n const { droppableId: destDropppableID, index: newIndex } = destination;\n if (!destDropppableID.includes('droppable')) return; // Forbidden to drop outside\n\n const page = destDropppableID.split('_')[1];\n const oldpage = srcDropppableID.split('_')[1];\n\n const isSourceDetailPage = yield select(SELECTORS.getIsDataSourcePage(oldpage));\n\n if (isSourceDetailPage && page !== oldpage) {\n yield put(ACTION_CREATORS.toastAction({\n message: 'Elements cannot be moved from details page'\n }));\n return;\n }\n\n const { type: itemType } = yield select(SELECTORS.getPortalItemByIDSelector(draggableId));\n const isDestinationDetailPage = yield select(SELECTORS.getIsDataSourcePage(page));\n\n if (isDestinationDetailPage && !(AVAILABLE_DETAIL_PAGE_ITEMS.includes(draggableId) || AVAILABLE_DETAIL_PAGE_ITEMS.includes(itemType))) {\n yield put(ACTION_CREATORS.toastAction({\n message: 'Element is not supported for detail page'\n }));\n\n yield put(ACTION_CREATORS.trackEventAction({ action: 'detailPageUnsupportedItemAddition', target: { itemType: itemType ?? draggableId, pageID: page } }));\n return;\n }\n\n const pageObject = page && page !== 'homepage' ? { page } : {};\n if (Object.values(ITEM_TYPES).includes(draggableId) || isItemTypeWidget(draggableId)) {\n // New Addition\n const droppedItem = getItemDefaults(draggableId);\n const newItemOrder = newIndex + 1;\n const { type } = droppedItem;\n\n if (type === ITEM_TYPES.FORM && !isFeatureEnabled(FEATURE_NAMES.FormResource)) {\n yield put(ACTION_CREATORS.showGenericModalAction({\n name: MODALS.FORM_PICKER_MODAL,\n portalOrder: newItemOrder,\n page\n }));\n return;\n }\n\n if (resourceLinkTypes.includes(type)) {\n yield put(ACTION_CREATORS.showGenericModalAction({\n name: MODALS.RESOURCE_PICKER_MODAL,\n resourceType: resourceTypeMap[type],\n page,\n addOrder: newItemOrder\n }));\n return;\n }\n\n yield put(ACTION_CREATORS.addPortalItemAction({ ...droppedItem, ...pageObject }, newItemOrder));\n return;\n }\n yield put(ACTION_CREATORS.changeOrderAction({\n oldIndex, newIndex, page, elementID: draggableId, oldpage: oldpage || ''\n }));\n\n yield put(ACTION_CREATORS.updateLastInteractedPageIDAction(page));\n}\n\nfunction* pushNotificationFlowPublic() {\n const status = yield select(SELECTORS.getPushNotificationStatus);\n if (!isYes(status)) {\n return;\n }\n const appID = yield select(SELECTORS.getAppID);\n if (!appID) {\n return;\n }\n\n if (!PushManager.isSupported()) {\n if (!(!isPWA() && isIosSafari())) {\n yield put(ACTION_CREATORS.trackEventAction({ action: 'pushNotificationNotSupported' }));\n }\n return;\n }\n\n const portalPush = new PushManager({\n resourceType: 'portal',\n resourceId: appID\n });\n\n const isSubscribed = yield call([portalPush, portalPush.isSubscribed]);\n const swRegistration = yield window.navigator.serviceWorker.ready;\n\n if (!isSubscribed && swRegistration && !isPushPermissionRecentlyDismissed(appID)) {\n yield put(ACTION_CREATORS.setUIProp(UI_PROPS.notificationPermissionState, NOTIFICATION_PERMISSION_STATES.VISIBLE));\n yield put(ACTION_CREATORS.trackEventAction({ action: 'notificationPermissionShown' }));\n yield takeLatest(ACTION_TYPES.PUSH_NOTIFICATION_ALLOW, function* allow() {\n yield put(ACTION_CREATORS.trackEventAction({ action: 'notificationPermissionAllowClicked' }));\n yield put(ACTION_CREATORS.setUIProp(UI_PROPS.notificationPermissionState, NOTIFICATION_PERMISSION_STATES.LOADING));\n const username = yield select(SELECTORS.getUsername);\n try {\n yield call([portalPush, portalPush.subscribe], { username });\n yield put(ACTION_CREATORS.setUIProp(UI_PROPS.notificationPermissionState, NOTIFICATION_PERMISSION_STATES.HIDDEN));\n } catch (err) {\n if (err instanceof SubscriptionError) {\n switch (err.name) {\n case 'PermissionDefault':\n yield put(ACTION_CREATORS.setUIProp(UI_PROPS.notificationPermissionState, NOTIFICATION_PERMISSION_STATES.VISIBLE));\n break;\n case 'PermissionDenied':\n yield put(ACTION_CREATORS.setUIProp(UI_PROPS.notificationPermissionState, NOTIFICATION_PERMISSION_STATES.DENIED));\n yield put(ACTION_CREATORS.trackEventAction({ action: 'notificationPermissionDenied' }));\n break;\n case 'NoSwRegistration':\n case 'DeviceNotSupported':\n yield put(ACTION_CREATORS.setUIProp(UI_PROPS.notificationPermissionState, NOTIFICATION_PERMISSION_STATES.HIDDEN));\n console.error('Error on registering push subscription:', err);\n break;\n default:\n console.error('Error on registering push subscription:', err);\n }\n } else {\n console.log(err);\n yield put(ACTION_CREATORS.setUIProp(UI_PROPS.notificationPermissionState, NOTIFICATION_PERMISSION_STATES.ERROR));\n }\n }\n });\n yield takeLatest(ACTION_TYPES.PUSH_NOTIFICATION_DISMISS, function* dismiss() {\n yield put(ACTION_CREATORS.trackEventAction({ action: 'notificationPermissionDismissed' }));\n const notificationDismissKey = `${NOTIFICATION_DISMISS_KEY}_${appID}`;\n StorageHelper.setLocalStorageItem({\n key: notificationDismissKey,\n value: Date.now()\n });\n yield put(ACTION_CREATORS.setUIProp(UI_PROPS.notificationPermissionState, NOTIFICATION_PERMISSION_STATES.HIDDEN));\n });\n }\n}\n\nfunction* pushNotificationHistoryPolling() {\n const pendingCampaign = yield select(SELECTORS.hasPendingPushCampaign);\n const serverTimeZone = 'America/New_York';\n if (pendingCampaign && Moment.tz(pendingCampaign.createdAt, serverTimeZone).isAfter(Moment.tz(serverTimeZone).subtract(2, 'minutes'))) {\n yield delay(3000);\n yield put({ type: ACTION_TYPES.FETCH_NOTIFICATON_HISTORY.REQUEST });\n }\n}\n\nfunction* pushNotificationFlow() {\n const appMode = yield select(SELECTORS.getAppModeSelector);\n if (appMode === APP_MODES.public) {\n yield spawn(pushNotificationFlowPublic);\n } else if (appMode === APP_MODES.builder) {\n const currentStep = yield select(SELECTORS.getCurrentStep);\n const currentSubtab = yield select(SELECTORS.getCurrentSubTab);\n if (currentStep === 'settings' && currentSubtab === 'pushNotification') { // TODO: check is push enabled (performance)\n yield put({ type: ACTION_TYPES.FETCH_NOTIFICATON_HISTORY.REQUEST });\n yield put({ type: ACTION_TYPES.FETCH_NOTIFICATION_STATS.REQUEST });\n }\n yield takeLatest(ACTION_TYPES.SET_ACTIVE_BUILDER_PAGE, function* handler({ payload }) {\n if (payload.subTab === 'pushNotification') {\n yield put({ type: ACTION_TYPES.FETCH_NOTIFICATON_HISTORY.REQUEST });\n yield put({ type: ACTION_TYPES.FETCH_NOTIFICATION_STATS.REQUEST });\n }\n });\n yield takeLatest([ACTION_TYPES.SEND_PUSH_NOTIFICATION.SUCCESS, ACTION_TYPES.FETCH_NOTIFICATON_HISTORY.SUCCESS], pushNotificationHistoryPolling);\n }\n}\n\nfunction* uxrExitIntentSurveyFlow() {\n const key = 'appBuilder:uxrExitIntentSurveySeen';\n const isSurveySeen = StorageHelper.getLocalStorageItem({ key });\n const isBuilder = yield select(SELECTORS.getIsBuilder);\n const currentUser = yield select(SELECTORS.getUser);\n const isGuestUser = currentUser.account_type?.name === 'GUEST';\n const isAppFirstUser = yield select(SELECTORS.getIsAppFirstUser);\n const portalID = yield select(SELECTORS.getPortalIDSelector);\n\n if (!isBuilder || !isAppFirstUser || isSurveySeen) return;\n\n const selectors = ['.jNewHeader-logo', '.jNewHeader-appBoxContent'];\n yield delay(2000);\n const elements = selectors.map(s => document.querySelector(s));\n\n const { register, closeAll } = eventChannelRegistry();\n\n function* showSurveyModal() {\n yield put(ACTION_CREATORS.showGenericModalAction({ name: MODALS.EXIT_INTENT_SURVEY_MODAL, username: currentUser.username, appID: portalID }));\n StorageHelper.setLocalStorageItem({ key, value: true });\n closeAll();\n }\n\n const clickChannel = register(emitter => {\n elements.forEach(el => el?.addEventListener('click', emitter));\n return () => {\n elements.forEach(el => el?.removeEventListener('click', emitter));\n };\n });\n\n yield takeEvery(clickChannel, function* handler(event) {\n event.preventDefault();\n event.stopPropagation();\n yield fork(showSurveyModal);\n });\n\n if (isGuestUser) {\n const mouseEnterChannel = register(emitter => {\n document.addEventListener('mouseenter', emitter);\n return () => document.removeEventListener('mouseenter', emitter);\n });\n\n const timeoutMouseLeaveChannel = register(emitter => {\n const timeout = setTimeout(() => {\n document.addEventListener('mouseleave', emitter);\n }, 2 * 60 * 1000);\n return () => {\n clearTimeout(timeout);\n document.removeEventListener('mouseleave', emitter);\n };\n });\n\n yield takeEvery(timeoutMouseLeaveChannel, function* handler(event) {\n if (event.clientY < 0) { // only upper side of the window\n const { timeout } = yield race({\n mouseEnter: take(mouseEnterChannel),\n timeout: delay(1000)\n });\n if (timeout) {\n yield fork(showSurveyModal);\n }\n }\n });\n } else {\n // const unloadChannel = register(emitter => {\n // window.addEventListener('beforeunload', emitter);\n // return () => {\n // window.removeEventListener('beforeunload', emitter);\n // };\n // }, false); // TODO: replace w/ !isGuestUser\n\n // yield takeEvery(unloadChannel, function* handler() {\n // TODO: send email\n // });\n }\n}\n\nfunction* whatsNewModalFlow(action) {\n const isBuilder = yield select(SELECTORS.getIsBuilder);\n const appPreviewStatus = yield select(SELECTORS.appPreviewStatusSelector);\n if (!isBuilder || APP_PREVIEW_STATES.IDLE !== appPreviewStatus) return;\n const currentUser = yield select(SELECTORS.getUser);\n const forceShowModal = action?.payload?.forceShowModal;\n\n const features = useEnabledFeatures();\n const enabledFeatures = Object.keys(features).filter(key => features[key]);\n const featureKeys = Object.keys(WHATS_NEW_MODAL_FEATURES);\n const viableFeatureModalKeys = featureKeys.filter(viableKey => enabledFeatures.includes(viableKey) && (WHATS_NEW_MODAL_FEATURES[viableKey]?.condition?.({ currentUser }) ?? true));\n\n if (viableFeatureModalKeys.length) {\n yield put(ACTION_CREATORS.showWhatsNewModalAction({ whatsNewKeys: viableFeatureModalKeys, forceShowModal }));\n yield all(\n viableFeatureModalKeys.map(key => put(ACTION_CREATORS.trackEventAction({ action: `${key.charAt(0).toLowerCase() + key.slice(1)}` })))\n );\n }\n}\n\nfunction* fetchUserManagementUsers() {\n const appID = yield select(SELECTORS.getAppID);\n\n try {\n const { users, sheetID, sheetViewID } = yield call(API.fetchUserManagementUsers, appID);\n if (!users) {\n console.error('Expected users on fetch user management users but received: ', users);\n return;\n }\n yield put({ type: ACTION_TYPES.SET_USER_MANAGEMENT_USERS, payload: { users, sheetID, sheetViewID } });\n } catch (err) {\n console.log(err);\n }\n}\n\nfunction* userManagement() {\n const userManagementEnabledUser = isFeatureEnabled(FEATURE_NAMES.UserManagement);\n const isBuilder = yield select(SELECTORS.getIsBuilder);\n if (!userManagementEnabledUser || !isBuilder) return;\n yield takeEvery(ACTION_TYPES.SET_ACTIVE_BUILDER_PAGE, function* handler({ payload }) {\n if (payload.subTab === publishNavPaths.quickShare) {\n yield fetchUserManagementUsers();\n }\n });\n}\n\nfunction* watchAppStatus({ payload: status }) {\n if (status === 'ready') {\n yield spawn(fetchResources);\n yield spawn(fetchShareInfoFlow);\n yield spawn(watchInstallableIconBuilderFlow);\n yield spawn(fetchStorePropertiesFlow);\n yield spawn(checkAddElementPulseVisible);\n yield spawn(pushNotificationFlow);\n yield spawn(uxrExitIntentSurveyFlow);\n yield spawn(dsFetchColumnsFlow);\n yield spawn(aiAssitant);\n\n yield spawn(whatsNewModalFlow);\n // A/B Test: ctAppNameIconModal\n yield spawn(initAppNameIconModalAbTest);\n }\n}\n\nfunction* watchOnMultipleItemUpdate({ payload: props }) {\n const selectedItemProps = yield select(SELECTORS.getSelectedPortalItemsWithInfo);\n const designatedItemID = yield select(SELECTORS.getDesignatedItemIDSelector);\n const version = yield select(SELECTORS.getAppVersionSelector);\n\n const getItemWithDefaults = type => useItemDefaults(type, version);\n const selectedItemsWithDefaults = selectedItemProps.map(({ type, ...rest }) => ({ ...getItemWithDefaults(type), ...rest }));\n\n const { schemeID } = props;\n\n if (designatedItemID) {\n const designatedProperties = ['itemBgColor', 'itemFontColor', 'itemBorderColor', 'itemTextAlignment'];\n const propValues = Object.keys(props);\n const shouldUpdateDesignated = some(propValues, prop => designatedProperties.includes(prop));\n if (shouldUpdateDesignated) {\n yield put(ACTION_CREATORS.updatePortalAction({ designatedItemProps: '' }));\n }\n }\n\n const designatedProperties = schemeID && getColoredPropertiesBySchemeID(selectedItemsWithDefaults, schemeID, version);\n const properties = schemeID ? designatedProperties.itemsToChange : getFilteredProperties(selectedItemsWithDefaults, props, version);\n\n yield put(ACTION_CREATORS.updateMultipleItemAction(properties));\n yield put(ACTION_CREATORS.trackEventAction({ action: 'multipleItemsUpdated', target: { props: Object.keys(props) } }));\n}\n\nfunction* watchOnDeletePage({ payload }) {\n const { pageID, type = '' } = payload;\n const appItems = yield select(SELECTORS.getPortalItems);\n const pageHasItem = appItems.find(({ page }) => page && page.toString() === pageID.toString());\n const pageProps = yield select(SELECTORS.getPageByID(pageID));\n const presentationItem = yield select(SELECTORS.getPresentationItemByDsPageID(pageID));\n const isPageLinked = presentationItem?.buttonValue === pageID;\n\n if (isPageLinked) {\n yield put(ACTION_CREATORS.showGenericModalAction({\n name: MODALS.PREVENT_DETAIL_PAGE_DELETION_MODAL,\n pageID,\n type,\n dsItemID: pageProps.linkedItemID\n\n }));\n\n return;\n }\n\n if (pageHasItem) {\n yield put(ACTION_CREATORS.showGenericModalAction({\n name: MODALS.DELETE_PAGE_MODAL, pageID, type, forceDeleteItems: !!pageProps.linkedItemID\n }));\n return;\n }\n\n yield put(ACTION_CREATORS.deletePageAction(pageID, false, type));\n}\n\nfunction* watchReplaceFormItem({ payload: { itemID, formID } }) {\n const appID = yield select(SELECTORS.getAppID);\n const sentboxItem = yield select(SELECTORS.getSentboxByFormID(itemID));\n\n const form = yield call(API.replaceFormItem, { appID, itemID, formID });\n\n yield put({ type: ACTION_TYPES.REPLACE_FORM_ITEM.SUCCESS, payload: { form, itemID } });\n\n if (sentboxItem) {\n const {\n id, type, name, title\n } = yield select(SELECTORS.getFormByID(formID));\n yield put(ACTION_CREATORS.updateItemPropAction({\n itemID: sentboxItem.id,\n prop: {\n resourceID: id,\n resourceTitle: '',\n title: name || title,\n resourceURL: generateResourceURL(ITEM_TYPES.SENTBOX_LINK, id, appID, type)\n }\n }));\n }\n}\n\nfunction* watchDonations({ payload: { title, description, selectedPrice: price } }) {\n const appID = yield select(SELECTORS.getAppID);\n const appIcon = yield select(SELECTORS.getInstallableIconURL);\n const donationCartData = {\n donation: [{\n description,\n images: [appIcon],\n name: title,\n options: [],\n pid: '1000',\n price,\n quantity: '1'\n }]\n };\n\n yield put(ACTION_CREATORS.setCartProductsAction(donationCartData));\n\n const { checkoutKey } = yield call(API.updateCart, appID, JSON.stringify(donationCartData));\n\n if (checkoutKey) {\n yield put(ACTION_CREATORS.setCheckoutKeyAction(checkoutKey));\n }\n}\n\nfunction* watchShowWhatsNewModal({ payload: { whatsNewKeys, forceShowModal = false } }) {\n if (forceShowModal) {\n yield put(ACTION_CREATORS.showGenericModalAction({ name: MODALS.WHAT_IS_NEW, whatsNewKeys }));\n return;\n }\n const storageKeys = whatsNewKeys\n .reduce((acc, key) => ({ ...acc, [key]: `whats_new_portal_${key.split(/(?=[A-Z])/).map(word => word.toLowerCase()).join('_')}` }), {});\n\n const unseenedKeys = Object.entries(storageKeys).filter(([, localStorageKey]) => global?.localStorage?.getItem(localStorageKey) !== '1');\n\n if (unseenedKeys.length && !isTestingEnv()) {\n const unseenedWhatsNewKeys = unseenedKeys.map(key => key[0]);\n yield put(ACTION_CREATORS.showGenericModalAction({ name: MODALS.WHAT_IS_NEW, whatsNewKeys: unseenedWhatsNewKeys }));\n unseenedKeys.forEach(([, localStorageKey]) => global?.localStorage?.setItem(localStorageKey, 1));\n }\n}\n\nfunction* watchFetchStorePropertiesSuccess() {\n const cartProducts = yield select(SELECTORS.getCart);\n if (isEmpty(cartProducts)) {\n return;\n }\n const appID = yield select(SELECTORS.getAppID);\n const productListItems = yield select(SELECTORS.getProductListItems);\n const validCartProducts = Object.fromEntries(Object.entries(cartProducts).map(([formID, products]) => [\n formID,\n products.filter(({ pid }) => productListItems.find(item => item.formID === formID)?.products?.some(product => product.pid === pid))\n ]));\n\n if (!isEqual(validCartProducts, cartProducts)) {\n yield put(ACTION_CREATORS.setCartProductsAction(validCartProducts));\n yield call(API.updateCart, appID, JSON.stringify(validCartProducts));\n }\n\n const validPriceCartProducts = Object.fromEntries(Object.entries(cartProducts).map(([formID, products]) => [\n formID,\n products.filter(({ pid, price }) => {\n const productListItem = productListItems.find(item => item.formID === formID)?.products?.find(product => product.pid === pid);\n return productListItem && productListItem.price === price;\n })\n ]));\n\n if (!isEqual(validPriceCartProducts, validCartProducts)) {\n yield put(ACTION_CREATORS.setIsChangedPriceInCartAction(true));\n yield put(ACTION_CREATORS.setCartProductsAction(validPriceCartProducts));\n yield call(API.updateCart, appID, JSON.stringify(validPriceCartProducts));\n }\n}\n\nfunction* watchFetchStorePropertiesRequest() {\n const portalID = yield select(SELECTORS.getPortalIDSelector);\n const { cartProducts, favoriteProducts, checkoutKey } = yield call(API.getStorePropertiesOfUser, portalID);\n\n yield put({ type: ACTION_TYPES.FETCH_STORE_PROPERTIES.SUCCESS, payload: { cartProducts, favoriteProducts, checkoutKey } });\n}\n\nfunction* watchFetchNotificationHistory() {\n const appID = yield select(SELECTORS.getAppID);\n try {\n const historyList = yield call(API.getNotificationHistory, appID);\n yield put({ type: ACTION_TYPES.FETCH_NOTIFICATON_HISTORY.SUCCESS, notificationHistory: historyList });\n } catch (err) {\n console.error(err);\n }\n}\n\nfunction* watchFetchNotificationStats() {\n const appID = yield select(SELECTORS.getAppID);\n try {\n const stats = yield call(API.getNotificationStats, appID);\n yield put({ type: ACTION_TYPES.FETCH_NOTIFICATION_STATS.SUCCESS, stats });\n } catch (err) {\n console.error(err);\n }\n}\n\nfunction* watchSendPushNotificationError({ payload: error }) {\n if (error?.data?.responseCode === 401) {\n let message;\n switch (error.data.message) {\n case NOTIFICATION_ERROR_MESSAGES.HOURLY_LIMIT:\n message = t('You have reached the maximum number of push notifications allowed per hour. Please try again later.');\n break;\n case NOTIFICATION_ERROR_MESSAGES.DAILY_LIMIT:\n message = t('You have reached the maximum number of push notifications allowed for today. Please try again tomorrow.');\n break;\n case NOTIFICATION_ERROR_MESSAGES.NOT_ALLOWED:\n message = t(\"You're not authorized to use this feature.\");\n break;\n default:\n message = t('Something went wrong. Please try again.');\n }\n yield put(ACTION_CREATORS.toastAction({\n message,\n error: true,\n type: 'error'\n }));\n }\n}\n\nfunction* watchSendPushNotification({ payload: { title, message, reset } }) {\n const appID = yield select(SELECTORS.getAppID);\n const notificationHistoryList = yield select(SELECTORS.notificationHistory);\n\n try {\n const response = yield call(API.sendPushNotification, { appID, title, message });\n const newHistoryList = [response, ...notificationHistoryList];\n\n yield put({ type: ACTION_TYPES.SEND_PUSH_NOTIFICATION.SUCCESS, payload: newHistoryList });\n reset();\n yield put(ACTION_CREATORS.toastAction({\n message: t('All users will receive a notification.'),\n type: 'success',\n backdrop: false\n }));\n } catch (error) {\n yield put({ type: ACTION_TYPES.SEND_PUSH_NOTIFICATION.ERROR, payload: error });\n }\n}\n\nfunction* popStateListener() {\n const { register } = eventChannelRegistry();\n\n const popStateChannel = register(emitter => {\n window.addEventListener('popstate', emitter);\n return () => {\n window.removeEventListener('popstate', emitter);\n };\n });\n\n yield takeEvery(popStateChannel, function* handler() {\n yield put({ type: ACTION_TYPES.POPSTATE });\n });\n}\n\n// eslint-disable-next-line max-statements\nexport function* rootSagaFlow() {\n yield takeLatest(ACTION_TYPES.UPDATE_PORTAL.UNDOABLE, safeWorker(watchPortalUpdates));\n yield takeEvery(ACTION_TYPES.ADD_PORTAL_ITEMS.REQUEST, safeWorker(watchPortalItemAdditions));\n yield takeLatest(ACTION_TYPES.REMOVE_PORTAL_ITEMS.REQUEST, safeWorker(watchPortalItemRemovals));\n yield takeEvery(ACTION_TYPES.UPDATE_ORDER.UNDOABLE, safeWorker(watchItemOrderUpdate));\n yield takeLatest(ACTION_TYPES.UPDATE_ITEM_PROP.UNDOABLE, safeWorker(watchItemPropUpdate));\n yield takeLatest(ACTION_TYPES.CREATE_NEW_PORTAL.REQUEST, safeWorker(watchCreatePortal));\n yield takeLatest(ACTION_TYPES.BRANDING_BANNER_CLICK, watchBrandingButtonClick);\n yield takeLatest(ACTION_TYPES.BUILD_WITH_FORM, watchBuildOrCreate);\n yield takeEvery(ACTION_TYPES.FETCH_PORTAL.REQUEST, safeWorker(fetchPortalFlow));\n yield takeEvery(ACTION_TYPES.FETCH_SIGNS.REQUEST, safeWorker(wathcFetchSigns));\n yield takeEvery(ACTION_TYPES.FETCH_FORMS.REQUEST, safeWorker(watchFetchForms));\n yield takeEvery(ACTION_TYPES.CREATE_FORM_FROM_TEMPLATE.REQUEST, safeWorker(watchCreateFormFromTemplate));\n yield takeEvery(ACTION_TYPES.CREATE_FORM_FROM_SCRATCH.REQUEST, safeWorker(watchCreateFormFromScratch));\n yield takeEvery(ACTION_TYPES.CREATE_SIGN_DOCUMENT_FROM_TEMPLATE.REQUEST, safeWorker(watchCreateSignDocumentFromTemplate));\n yield takeEvery(ACTION_TYPES.SHOULD_WINDOW_SQUEEZE, watchWindowSqueeze);\n yield takeEvery(ACTION_TYPES.SEND_FEEDBACK.REQUEST, safeWorker(sendFeedback));\n yield takeEvery(ACTION_TYPES.FETCH_APPS.REQUEST, safeWorker(watchFetchUserApps));\n yield takeEvery(ACTION_TYPES.SELECT_ALL_ITEMS, watchSelectAllItems);\n yield takeEvery(ACTION_TYPES.REMOVE_SELECTED_ITEMS, watchDeleteSelectedItems);\n yield takeLatest(ACTION_TYPES.UPDATE_MULTIPLE_ITEM.UNDOABLE, safeWorker(watchMultipleItemUpdate));\n yield takeEvery(action => /^@UI/ig.test(action.type), watchUIupdates);\n yield takeEvery(isAPIErrorAction, watchErrors);\n yield takeEvery(ACTION_TYPES.SELECT_MULTIPLE_PORTAL_ITEM, watchMultipleSelection);\n yield takeEvery(\n [\n ACTION_TYPES.UPDATE_ITEM_PROP.REQUEST,\n ACTION_TYPES.CALCULATE_DONE_COUNT,\n ACTION_TYPES.UPDATE_ITEM_PROP.WITHOUT_DEBOUNCE,\n ACTION_TYPES.UPDATE_ITEM_PROP.WITH_DEBOUNCE\n ],\n watchDoneItemProgress);\n yield takeEvery(ACTION_TYPES.CALCULATE_TODO_COUNT, watchTodoItemProgress);\n yield takeEvery(ACTION_TYPES.RESTART_PROGRESS, watchRestartProgress);\n yield takeEvery(ACTION_TYPES.UPDATE_ITEM_PROP.WITHOUT_DEBOUNCE, watchItemPropUpdateRequest);\n yield debounce(500, ACTION_TYPES.UPDATE_ITEM_PROP.WITH_DEBOUNCE, watchItemPropUpdateRequest);\n yield takeEvery([ACTION_TYPES.UPDATE_ITEM_PROP.SUCCESS, ACTION_TYPES.UPDATE_MULTIPLE_ITEM.SUCCESS], watchProgressBarAvailability);\n yield takeEvery(ACTION_TYPES.ITEM_ADDITION_PORTAL_ORDER_WORKER.REQUEST, safeWorker(watchPortalOrderInItemAddition));\n yield takeEvery(ACTION_TYPES.WATCH_HEADING_ITEM_FOR_PAGE_NAMING, watchHeadingItemToPageNaming);\n yield takeEvery(ACTION_TYPES.UPDATE_PORTAL_SLUG.REQUEST, updateSlug);\n yield takeEvery(ACTION_TYPES.LAYOUT_CHANGE.REQUEST, safeWorker(watchLayoutChange));\n yield takeEvery(ACTION_TYPES.FETCH_USER_TEAMS.REQUEST, safeWorker(watchFetchUserTeams));\n yield takeEvery(ACTION_TYPES.FETCH_USER_TEAM_PERMISSIONS.REQUEST, safeWorker(watchFetchUserTeamPermissions));\n\n yield takeEvery([ACTION_TYPES.ADD_NEW_PAGE.UNDOABLE, ACTION_TYPES.UPDATE_PAGE.UNDOABLE, ACTION_TYPES.DELETE_PAGE.UNDOABLE], safeWorker(pageActions));\n yield takeEvery(ACTION_TYPES.CHANGE_PAGE_ORDER.REQUEST, safeWorker(watchPageUpdate));\n yield takeEvery(ACTION_TYPES.UPDATE_ORDER_WORKER.REQUEST, safeWorker(watchItemSorting));\n yield takeEvery(ACTION_TYPES.UPDATE_USER.REQUEST, safeWorker(watchUserSettingUpdate));\n yield takeEvery(ACTION_TYPES.CONTINUE_AS_USER.REQUEST, safeWorker(watchContinueAsUser));\n yield takeEvery(ACTION_TYPES.DUPLICATE_ITEM, safeWorker(watchItemDuplication));\n yield takeEvery(ACTION_TYPES.REPLACE_FORM_ITEM.REQUEST, safeWorker(watchReplaceFormItem));\n\n yield takeEvery(ACTION_TYPES.USER_CHANGE, safeWorker(watchUserChange));\n\n yield takeEvery(ACTION_TYPES.UPDATE_PORTAL_USER_PROPS.REQUEST, safeWorker(watchUpdatePortalUserProps));\n\n yield takeEvery(ACTION_TYPES.SET_CHECKOUT_FORM_STATUS, watchCheckoutFormStatusChanges);\n\n yield takeEvery(ACTION_TYPES.NAVIGATION_ITEM_CLICK, watchNavigationItemClick);\n\n yield takeEvery(ACTION_TYPES.ON_TODO_COMPLETE, watchSetTodoComplete);\n\n yield takeEvery(ACTION_TYPES.CREATE_PORTAL_WITH_STORE, createNewPortalWithStore);\n\n yield takeEvery(ACTION_TYPES.CREATE_PORTAL_WITH_TEMPLATE, createNewPortalWithTemplate);\n\n yield takeEvery(ACTION_TYPES.CREATE_PORTAL_WITH_DONATION, createNewPortalWithDonation);\n\n yield takeEvery(ACTION_TYPES.SET_IS_APP_DONE, watchIsAppDone);\n\n yield takeEvery(ACTION_TYPES.ON_FORM_PICKER_MODAL_CONFIRM, watchFormPickerModalConfirm);\n\n yield takeEvery(ACTION_TYPES.ON_RESOURCE_PICKER_MODAL_CONFIRM, watchResourcePickerModalConfirm);\n\n yield takeEvery(ACTION_TYPES.ON_LEFT_PANEL_ITEM_CLICK, watchLeftPanelItemClick);\n\n yield takeEvery(ACTION_TYPES.ON_ITEM_CLICK, watchItemClick);\n\n yield takeEvery(ACTION_TYPES.ON_STAGE_CLICK, watchOnStageClick);\n yield takeEvery(ACTION_TYPES.SHOW_DONATION_ITEM, watchShowDonationItem);\n yield takeEvery(ACTION_TYPES.ON_DRAG_END, watchOnDragEnd);\n yield takeEvery(ACTION_TYPES.ON_DELETE_PAGE, watchOnDeletePage);\n yield takeEvery(ACTION_TYPES.ON_MULTIPLE_ITEM_UPDATE, watchOnMultipleItemUpdate);\n\n yield takeEvery(ACTION_TYPES.OPEN_RIGHT_PANEL_WITH_MODE, watchOpenRightPanelWithMode);\n\n yield takeEvery(ACTION_TYPES.UPDATE_APP_LOGO.REQUEST, watchUpdateAppLogo);\n\n yield takeEvery(ACTION_TYPES.SET_APP_STATUS, watchAppStatus);\n\n // yield takeEvery(ACTION_TYPES.SET_APP_STATUS, watchUXRSurveyModal);\n\n yield takeEvery(ACTION_TYPES.FETCH_PORTAL.SUCCESS, watchFetchPortalSuccess);\n\n yield takeEvery(ACTION_TYPES.DONATE, watchDonations);\n\n yield takeEvery(ACTION_TYPES.SHOW_WHATS_NEW_MODAL, watchShowWhatsNewModal);\n yield takeEvery(ACTION_TYPES.START_SHOW_WHATS_NEW_MODAL_FLOW, whatsNewModalFlow);\n yield takeEvery(ACTION_TYPES.FETCH_STORE_PROPERTIES.REQUEST, watchFetchStorePropertiesRequest);\n yield takeEvery(ACTION_TYPES.FETCH_STORE_PROPERTIES.SUCCESS, watchFetchStorePropertiesSuccess);\n yield takeLatest(ACTION_TYPES.INIT_ELEMENTS_PANEL_AB_TEST, initAppElementPanelAbTest);\n yield takeEvery(ACTION_TYPES.SEND_PUSH_NOTIFICATION.REQUEST, watchSendPushNotification);\n yield takeEvery(ACTION_TYPES.SEND_PUSH_NOTIFICATION.ERROR, watchSendPushNotificationError);\n yield takeEvery(ACTION_TYPES.FETCH_NOTIFICATON_HISTORY.REQUEST, watchFetchNotificationHistory);\n yield takeEvery(ACTION_TYPES.FETCH_NOTIFICATION_STATS.REQUEST, watchFetchNotificationStats);\n\n yield spawn(productListActions);\n yield spawn(searchInProductsActions);\n yield spawn(navigationActions);\n\n yield spawn(fetchUserSlugFlow);\n yield spawn(fetchWidgetsFlow);\n yield spawn(templateCategoriesFlow);\n yield spawn(svgIconsFlow);\n yield spawn(appStatusChecker);\n yield spawn(fetchUserFlow);\n yield spawn(fetchPortalFlow);\n yield spawn(fetchEnvironmentFlow); // TODO why? Ask Berkay\n yield spawn(trackEvents);\n yield spawn(shareFlow);\n yield spawn(watchAPIRequests);\n yield spawn(watchUIPanelsChanges);\n yield spawn(keepClosedUIPanels);\n yield spawn(watchModals);\n yield spawn(watchUndoableActions);\n yield spawn(watchUndoRedoActions);\n yield spawn(watchToastActions);\n yield spawn(watchAppToast);\n yield spawn(watchNetworkStatus);\n yield spawn(watchStylingActions);\n yield spawn(fetchCDNConfigFlow);\n yield spawn(fetchUserApps);\n yield spawn(eventsFlow);\n if (getTeamID()) {\n yield spawn(fetchTeamFlow);\n yield spawn(collaborationFlow);\n }\n yield spawn(activateFullStoryOnTheFly);\n yield spawn(productList); // it is new\n yield spawn(checkoutFormFlow);\n yield spawn(uxrExitIntentSurveyFlow);\n yield spawn(dataSourceFlow);\n yield spawn(popStateListener);\n yield spawn(userManagement);\n}\n","import {\n combineReducers, createStore, compose, applyMiddleware\n} from 'redux';\nimport createSagaMiddleware from 'redux-saga';\nimport UIReducer from './reducers/ui';\nimport userReducer from './reducers/user';\nimport portalReducer from './reducers/portal';\nimport formsReducer from './reducers/forms';\nimport signsReducer from './reducers/signs';\nimport shareReducer from './reducers/share';\nimport appsReducer from './reducers/apps';\nimport undoRedo from './reducers/undoRedo';\nimport progress from './reducers/progress';\nimport widgetsReducer from './reducers/widgets';\nimport productsReducer from './reducers/products';\nimport CDNConfigReducer from './reducers/cdnconfig';\nimport teamReducer from './reducers/team';\nimport checkoutFormReducer from './reducers/checkoutForm';\nimport pushNotificationReducer from './reducers/pushNotification';\nimport livePreviewReducer from './reducers/livePreview';\nimport AssistantReducer from './reducers/assistant';\nimport dataSourceReducer from './reducers/dataSource';\nimport UserManagementReducer from './reducers/userManagement';\n\nimport { rootSagaFlow } from './saga';\n\nconst rootReducer = combineReducers({\n ui: UIReducer,\n user: userReducer,\n forms: formsReducer,\n signs: signsReducer,\n portal: portalReducer,\n share: shareReducer,\n apps: appsReducer,\n widgets: widgetsReducer,\n cdnConfig: CDNConfigReducer,\n undoRedo,\n progress,\n products: productsReducer,\n team: teamReducer,\n checkoutForm: checkoutFormReducer,\n pushNotification: pushNotificationReducer,\n livePreview: livePreviewReducer,\n assistant: AssistantReducer,\n dataSource: dataSourceReducer,\n userManagement: UserManagementReducer\n});\n\nconst sagaMiddleware = createSagaMiddleware();\n\nconst middlewares = applyMiddleware(\n sagaMiddleware\n);\n\nconst composeEnhancers = (typeof window !== 'undefined' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) || compose;\nconst store = createStore(rootReducer, composeEnhancers(middlewares));\n\nsagaMiddleware.run(rootSagaFlow);\nexport default store;\n","import React from 'react';\nimport { Provider } from 'react-redux';\nimport store from './store';\n\nconst withStore = AppComponent => {\n return () => (\n ${change.name}:`;\n messageItem += '
`;\n });\n\n messageContent += '- ';\n change.elements.forEach(element => {\n messageItem += `
- ${formatString(element)} `;\n });\n messageContent += `${messageItem}
{t('Are you sure you want to restart your progress?')}
\n{t('All required steps will be restored, and')}
\n{t('your submissions won’t be deleted.')}
\n\n
\n );\n }\n\n renderTarget() {\n const { targetContainer } = this.props;\n\n if (typeof targetContainer === 'string') {\n return document.querySelector(targetContainer);\n }\n\n return targetContainer;\n }\n\n renderContent() {\n const {\n Navigation, isReportEdit, reportType, forms, digest, user, digestProps, teamID\n } = this.props;\n const { CurrentView, setViewProps } = this.state;\n if (isReportEdit && reportType && CurrentView === 'Main') {\n if (reportType === 'digest') {\n this.setView('DigestEmailBuilder', {\n forms,\n user,\n digest,\n digestProps,\n setView: this.setView,\n teamID\n });\n return;\n }\n this.setView('ReportConfiguration');\n }\n const CurrentViewComponent = Navigation[CurrentView];\n const isMobileApp = global.navigator.userAgent.indexOf('JotForm Mobile') > -1 || global.navigator.userAgent.indexOf('JFCEMobile') > -1;\n const {\n wrapperProps: { className, ...wrapperRestProps },\n isModal,\n usePortal,\n ...props\n } = this.props;\n\n const { isVisible } = this.state;\n\n if (!isVisible) return null;\n\n return (\n \n {this.backButton}\n {this.title}\n {this.subTitle}\n
\n );\n }\n}\n\nHeader.propTypes = {\n setView: func,\n actionLogger: func,\n onBackButtonClick: func,\n backButtonVisible: bool,\n isModalVisible: bool,\n onModalClose: func,\n noDecodeURI: bool,\n title: oneOfType([string, node]),\n extraSubTitleClasses: arrayOf(string),\n subTitle: oneOfType([string, node]),\n customStyles: object,\n backToMixModalActionLogger: func\n};\n\nHeader.defaultProps = {\n setView: f => f,\n actionLogger: f => f,\n onBackButtonClick: null,\n backButtonVisible: false,\n isModalVisible: false,\n onModalClose: null,\n noDecodeURI: false,\n title: null,\n subTitle: null,\n extraSubTitleClasses: [],\n customStyles: {},\n backToMixModalActionLogger: f => f\n};\n","import React from 'react';\nimport {\n oneOfType, arrayOf, node, string\n} from 'prop-types';\nimport { classNames } from '@jotforminc/utils';\n\nexport default class WizardBody extends React.Component {\n render() {\n const { className, children, ...props } = this.props;\n\n return (\n \n {children}\n
\n );\n }\n}\n\nWizardBody.propTypes = {\n children: oneOfType([\n arrayOf(node),\n node\n ]),\n className: string\n};\n\nWizardBody.defaultProps = {\n children: null,\n className: ''\n};\n","import React from 'react';\nimport {\n oneOfType, arrayOf, node, string, bool\n} from 'prop-types';\nimport { classNames } from '@jotforminc/utils';\n\nexport default class WizardItem extends React.Component {\n render() {\n const {\n children,\n className,\n noGutter,\n noMaxWidth,\n ...props\n } = this.props;\n\n return (\n \n {children}\n
\n );\n }\n}\n\nWizardItem.propTypes = {\n children: oneOfType([\n arrayOf(node),\n node\n ]),\n className: string,\n noGutter: bool,\n noMaxWidth: bool\n};\n\nWizardItem.defaultProps = {\n children: null,\n className: '',\n noGutter: false,\n noMaxWidth: false\n};\n","/* eslint-disable max-len */\nexport const placeholderImage = 'https://cdn.jotfor.ms/assets/img/templates/placeholder-form.svg';\nexport const placeholderPdfImage = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAADPAQMAAAB1FH6uAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAB5JREFUWMPtwTEBAAAAwiD7p7bETmAAAAAAAAAAQOcfiQABx6hqKQAAAABJRU5ErkJggg==';\nexport const placeholderPageImage = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA8gAAAJxAQMAAACkLglIAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAG1JREFUeNrswYEAAAAAgKD9qRepAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADg9uCQAAAAAEDQ/9feMAAAAAAAAAAAAAAAAAAAADASKekAAXrKGqUAAAAASUVORK5CYII=';\nexport const placeholderApprovalBG = 'https://cdn.jotfor.ms/assets/img/templates/placeholder-approval.svg';\nexport const placeholderApprovalImage = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAECAQMAAADq3xPHAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAACJJREFUaN7twQEBAAAAgqD+r26IwAAAAAAAAAAAAAAAACDvM2YAAT++t4sAAAAASUVORK5CYII=';\nexport const placeholderTableImage = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAATQAAADJAQMAAACXNFyvAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAB5JREFUWMPtwYEAAAAAw6D7U19hANUAAAAAAAAAgOwfaAABUTPfMQAAAABJRU5ErkJggg==';\nexport const placeholderAgentImage = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAATYAAADXAQMAAACqHe95AAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAB9JREFUaN7twTEBAAAAwiD7pzbFPmAAAAAAAAAAACQOIZgAAZFj4y4AAAAASUVORK5CYII=';\n","export const getDeviceType = () => {\n const ua = global.navigator.userAgent;\n if (/(tablet|ipad|playbook|silk)|(android(?!.*mobi))/i.test(ua)) {\n return 'tablet';\n } if (/Mobile|Android|iP(hone|od)|IEMobile|BlackBerry|Kindle|Silk-Accelerated|(hpw|web)OS|Opera M(obi|ini)/.test(ua)) {\n return 'mobile';\n }\n return 'desktop';\n};\n","const getScrollableHeightOfElement = (element, withoutLimit) => {\n const maxScrollableDistance = 10000;\n const wrapperEl = element.parentElement;\n let distance = element.clientHeight - wrapperEl.clientHeight;\n distance = !withoutLimit && distance >= maxScrollableDistance ? maxScrollableDistance : distance;\n return -distance;\n};\n\nexport const getTopValue = screenshotRef => {\n const screenshotElement = screenshotRef.current;\n if (screenshotElement === null || !screenshotElement) return;\n const { clientHeight } = screenshotElement;\n if (clientHeight <= 0) return;\n return getScrollableHeightOfElement(screenshotElement);\n};\n","import { placeholderImage } from './constantImages';\n\nexport const onImageError = (e, image) => {\n const { target } = e;\n target.onerror = null;\n target.src = (image || placeholderImage);\n};\n","import React from 'react';\nimport { string } from 'prop-types';\nimport { t } from '@jotforminc/translation';\nimport { IconEyeFilled } from '@jotforminc/svg-icons';\n\nconst PreviewHint = ({ ctaText }) => {\n return (\n \n \n previewTemplateWrapper('viewTemplateFromImg')}\n >\n setImageLoaded(true)}\n src={!isSkeleton ? screenshotURL : placeholderImage}\n />\n \n
\n \n
\n \n {getCurrentTime()}\n
\n \n \n
\n previewTemplateWrapper('viewTemplateFromTitle')}>\n {title}\n
\n\n previewTemplateWrapper('viewTemplateFromImg')}\n >\n setImageLoaded(true)}\n src={!isSkeleton ? screenshot : placeholderPdfImage}\n />\n
\n previewTemplateWrapper('viewTemplateFromTitle')}>\n {title}\n
\n\n {\n setScreenshotPosition(0);\n setScreenshotScrolled(false);\n }}\n onMouseEnter={handleMouseEnterAnimation}\n >\n
\n \n handlePreviewTemplate('viewTemplateFromImg')}\n className=\"template-item-imgur cursor-pointer block h-full bg-navy-50 color-white\"\n >\n \n {theme === 'card' && (\n \n )}\n\n \n setLoadImageErr(true)}\n onLoad={({ target: { src: screenshotSrc } }) => {\n const isScreenshotImageLoaded = screenshotSrc === placeholderImage;\n setIsPlaceholder(screenshotSrc && isScreenshotImageLoaded);\n setImageLoaded(!isScreenshotImageLoaded);\n }}\n />\n
\n {theme === 'classic' && (\n <>\n \n handlePreviewTemplate('viewTemplateFromTitle')}\n onKeyDown={() => handlePreviewTemplate('viewTemplateFromTitle')}\n >\n {!isSkeleton && _title}\n \n
\n \n \n \n { t(customCloneText || 'Use Template') }\n \n \n handlePreviewTemplate('viewTemplateFromPreviewCta')}\n >\n {t('Preview')}\n \n
\n \n \n );\n};\n\nexport default FormTemplateItem;\nFormTemplateItem.defaultProps = {\n context: '',\n useSlider: false,\n customCloneText: ''\n};\nFormTemplateItem.propTypes = {\n template: object.isRequired,\n imageLoaded: bool.isRequired,\n setImageLoaded: func.isRequired,\n templateCloneWrapper: func.isRequired,\n handlePreviewTemplate: func.isRequired,\n theme: string.isRequired,\n context: string,\n useSlider: bool,\n customCloneText: string\n};\n","import React from 'react';\nimport { object, func, bool } from 'prop-types';\nimport { t } from '@jotforminc/translation';\n\nimport { placeholderTableImage } from '../../constantImages';\nimport { onImageError } from '../../onImageError';\nimport PreviewHint from './PreviewHint';\n\nconst TableTemplateItem = ({\n template, imageLoaded, handlePreviewTemplate,\n setImageLoaded, templateCloneWrapper\n}) => {\n const {\n _slug,\n _title,\n thumbnailBackgroundColor\n // _imageUrl,\n } = template;\n const isSkeleton = _title === 'skeleton';\n const screenshotURL = _slug ? `https://cdn.jotfor.ms/templates/screenshot/table-templates/${_slug}?f=png&w=930` : placeholderTableImage;\n return (\n \n templateCloneWrapper(event)}\n >\n {t('Use Template')}\n \n handlePreviewTemplate('viewTemplateFromPreviewCta')}\n >\n {t('Preview')}\n \n
\n );\n};\n\nexport default TableTemplateItem;\nTableTemplateItem.defaultProps = {\n};\nTableTemplateItem.propTypes = {\n template: object.isRequired,\n imageLoaded: bool.isRequired,\n setImageLoaded: func.isRequired,\n templateCloneWrapper: func.isRequired,\n handlePreviewTemplate: func.isRequired\n};\n","import React from 'react';\nimport { object, func, bool } from 'prop-types';\nimport { t } from '@jotforminc/translation';\n\nimport { placeholderApprovalImage, placeholderApprovalBG } from '../../constantImages';\nimport { onImageError } from '../../onImageError';\nimport PreviewHint from './PreviewHint';\n\nconst ApprovalTemplateItem = ({\n template, imageLoaded, handlePreviewTemplate,\n setImageLoaded, templateCloneWrapper\n}) => {\n const {\n slug,\n title\n } = template;\n const isSkeleton = title === 'skeleton';\n\n const screenshotURL = `https://cdn.jotfor.ms/templates/screenshot/workflow-templates/${slug}?f=png&w=1482`;\n const image = slug ? screenshotURL : placeholderApprovalImage;\n\n return (\n handlePreviewTemplate('viewTemplateFromImg')}>\n \n setImageLoaded(true)}\n src={!isSkeleton ? (screenshotURL) : placeholderTableImage}\n />\n
\n handlePreviewTemplate('viewTemplateFromTitle')}>{_title}
\n\n onImageError(e, placeholderApprovalBG)}\n onLoad={() => setImageLoaded(true)}\n />\n
\n handlePreviewTemplate('viewTemplateFromImg')}>\n \n \n\n
\n handlePreviewTemplate('viewTemplateFromTitle')}>{title}
\n\n \n {t('Use Agent')}\n \n handlePreviewTemplate('viewTemplateFromPreviewCta')}\n >\n {t('Preview')}\n \n
\n );\n};\n\nexport default AgentTemplateItem;\nAgentTemplateItem.defaultProps = {\n};\nAgentTemplateItem.propTypes = {\n template: object.isRequired,\n imageLoaded: bool.isRequired,\n setImageLoaded: func.isRequired,\n templateCloneWrapper: func.isRequired,\n handlePreviewTemplate: func.isRequired\n};\n","import React, { useRef } from 'react';\nimport { object, func, bool } from 'prop-types';\nimport { t } from '@jotforminc/translation';\n\nimport { getTopValue } from './utils';\nimport { placeholderPageImage } from '../../constantImages';\nimport { getDeviceType } from '../../getDeviceType';\nimport { onImageError } from '../../onImageError';\nimport PreviewHint from './PreviewHint';\n\nconst PdfTemplateItem = ({\n template, imageLoaded, handlePreviewTemplate, setImageLoaded\n}) => {\n let animationTimeoutReferance;\n const screenshotRef = useRef();\n const { screenshot } = template;\n const title = template._title || template.title;\n const isSkeleton = title === 'skeleton';\n\n const updateScreenshotPosition = position => {\n if (!imageLoaded || getDeviceType() !== 'desktop') return;\n const screenshotElement = screenshotRef.current;\n if (screenshotElement === null || !screenshotElement) return;\n screenshotElement.style.top = `${position}px`;\n };\n\n const handleMouseEnterAnimation = () => {\n updateScreenshotPosition(getTopValue(screenshotRef));\n animationTimeoutReferance = setTimeout(() => updateScreenshotPosition(0), 2000);\n };\n\n const handleMouseLeave = () => {\n if (animationTimeoutReferance === undefined) return;\n clearTimeout(animationTimeoutReferance);\n updateScreenshotPosition(0);\n };\n\n const previewTemplateWrapper = action => {\n handlePreviewTemplate(action, { ...template });\n };\n\n return (\n handlePreviewTemplate('viewTemplateFromImg')}>\n setImageLoaded(true)}\n src={!isSkeleton ? (screenshot || _previewImageUrl) : placeholderAgentImage}\n />\n
\n handlePreviewTemplate('viewTemplateFromTitle')}>{title}
\n\n previewTemplateWrapper('viewTemplateFromImg')}\n >\n setImageLoaded(true)}\n src={!isSkeleton ? screenshot : placeholderPageImage}\n />\n
\n previewTemplateWrapper('viewTemplateFromTitle')}>\n {title}\n
\n\n \n \n \n
\n );\n};\n\nexport default Loader;\n","import axios from 'axios';\n\nimport { templateConstants } from './templateConstants';\n\nconst removeLastCharacter = string => string.substring(0, string.length - 1);\n\nconst apiCallWrapper = requestParams => {\n let paramString = '?';\n Object.keys(requestParams).forEach(paramKey => {\n const parameterValue = requestParams[paramKey];\n if (paramKey === 'language') {\n if (parameterValue !== undefined && parameterValue !== '') paramString += `${paramKey}=${parameterValue}&`;\n } else if (parameterValue !== undefined) {\n paramString += `${paramKey}=${parameterValue}&`;\n }\n });\n return removeLastCharacter(paramString);\n};\n\nconst languageFlatter = language => { if (language.length !== 0) return language[0]; };\n\nexport async function fetchCategories(templateType, language, source) {\n const { aliasType, getCustomReqParams = () => {} } = templateConstants[templateType];\n const templateTypeParameter = aliasType === 'agent-directory' ? aliasType : removeLastCharacter(aliasType || templateType);\n const requestParameters = apiCallWrapper({\n language: languageFlatter(language),\n ...getCustomReqParams(source)\n });\n return axios.get(`/API/${templateTypeParameter}/category${requestParameters}`);\n}\n\nconst categoryParamFlatter = (selectedCategory, isMyTemplates, searchKeywordParameter) => {\n if (selectedCategory?.slug) return selectedCategory?.slug;\n if (!isMyTemplates && searchKeywordParameter === '') return 'homepage';\n return undefined;\n};\n\nexport async function getTemplate(templateType, templateID, source = '', theme) {\n const {\n aliasType,\n getCustomPropertiesReqParams = () => ({ idKey: 'id' })\n } = templateConstants[templateType];\n\n const { idKey, ...rest } = getCustomPropertiesReqParams(source);\n const requestParameters = apiCallWrapper({\n ...rest,\n [idKey]: templateID,\n ...(theme === 'card' ? { theme } : {})\n });\n let endpointURL = templateType;\n switch (endpointURL) {\n case 'form-templates':\n endpointURL = 'form-template';\n break;\n case 'agent-templates':\n endpointURL = 'agent-directory';\n break;\n default:\n endpointURL = aliasType || endpointURL;\n }\n return axios.get(`/API/${endpointURL}${requestParameters}`);\n}\n\nexport async function getEnterpriseTemplate(id, theme = 'classic') {\n const formData = new FormData();\n\n formData.append('action', 'renderTemplateModalView');\n formData.append('id', id);\n formData.append('theme', theme);\n formData.append('mode-single', true);\n return axios.post('/form-templates/standalone/api', formData);\n}\n\nexport async function convertFormUserToCloneTemplate() {\n return axios.post('/API/formuser/convertAccount?forceLogin=1&appName=listings');\n}\n\nexport async function getCategory(filters, selectedCategory, language = ['en'], templateType, source) {\n const { theme = 'classic', sorting = 'popular' } = filters;\n const { aliasType, getCustomReqParams = () => {} } = templateConstants[templateType];\n const isFormTemplates = templateType === 'form-templates';\n const requestParameters = apiCallWrapper({\n ...getCustomReqParams(source),\n theme: isFormTemplates ? theme : undefined,\n sorting,\n filterBy: 'id',\n language: languageFlatter(language),\n id: selectedCategory._id || selectedCategory.id\n });\n const templateTypeParameter = aliasType === 'agent-directory' ? aliasType : removeLastCharacter(aliasType || templateType);\n return axios.get(`/API/${templateTypeParameter}/category${requestParameters}`);\n}\n\nexport async function fetchStarterPackTemplates(payload = {}) {\n const { templateType, featuredTemplates = false } = payload;\n if (templateType === 'sign-templates') {\n return axios.get('/API/sign/starter-pack-templates');\n }\n\n return axios.get(`/API/${templateType}/starter-pack-templates`, {\n // A/B Test: templateSuggestionModalOnMyAppsIII\n params: {\n ...(featuredTemplates && { featuredTemplates: '1' })\n }\n });\n}\n\nexport async function fetchTemplates(payload = {}) {\n const {\n source,\n filters,\n category,\n language,\n templateType,\n username = '',\n offsetParameter = 0,\n getOnlyMyTemplates = false,\n searchKeywordParameter = '',\n rpp = 24\n } = payload;\n const { sorting, theme } = filters;\n const isFormTemplates = templateType === 'form-templates';\n const isAgentTemplates = templateType === 'agent-templates';\n const { aliasType, getCustomReqParams = () => {} } = templateConstants[templateType];\n const requestParameters = apiCallWrapper({\n ...getCustomReqParams(source),\n theme: isFormTemplates ? theme : undefined,\n rpp,\n sorting: isAgentTemplates ? 'priority' : sorting,\n filterListing: 'all',\n start: offsetParameter,\n filterStatus: 'public',\n noESign: source === 'pdf-editor-new' ? '1' : '0',\n language: languageFlatter(language),\n username: getOnlyMyTemplates ? username : undefined,\n keyword: searchKeywordParameter !== '' ? searchKeywordParameter : undefined,\n category: categoryParamFlatter(category, getOnlyMyTemplates, searchKeywordParameter)\n });\n return axios.get(`/API/${aliasType || templateType}/filter${requestParameters}`);\n}\n\nexport async function fetchLanguages(templateType, source) {\n const { aliasType, getCustomReqParams = () => {} } = templateConstants[templateType];\n const type = aliasType || templateType;\n const requestParameters = apiCallWrapper({\n ...getCustomReqParams(source)\n });\n return axios.get(`/API/${type}/languages${requestParameters}`);\n}\n","import React from 'react';\nimport { t, translationRenderer } from '@jotforminc/translation';\nimport { capitalizeFirstLetter } from '@jotforminc/utils';\nimport { IconAngleLeft, IconCopyLine } from '@jotforminc/svg-icons';\nimport { getCategory } from './apiTemplates';\nimport { getDeviceType } from './getDeviceType';\nimport IconNoResult from './assets/icon-noresult.svg';\n\nexport const filterWrapper = (templateType, list, filters, index = 0) => {\n if (filters.length <= index) return list;\n const { property, value } = filters[index];\n return filterWrapper(templateType, list.filter(listItem => {\n if (templateType === 'form-templates' && listItem?.slug === 'salesforce-forms') return true;\n return listItem[property] === value;\n }), filters, index + 1);\n};\n\nexport const addOrRemoveMultipleEventListeners = (listeners, handlerFunction, addOrRemove, target) => {\n if (target === null) return;\n listeners.forEach(listener => {\n if (addOrRemove === 'add') {\n target.addEventListener(listener, handlerFunction);\n } else {\n target.removeEventListener(listener, handlerFunction);\n }\n });\n};\n\nexport const getInitialLanguage = isFormTemplates => {\n let result = 'en';\n const jfLang = window?.langCode;\n if (jfLang && jfLang !== '' && isFormTemplates) {\n result = jfLang.includes('-') ? jfLang.split('-')[0] : jfLang;\n }\n return result;\n};\n\nexport const prettyTemplatePageType = (templateType, isPlural = true) => {\n const templateType_ = templateType === 'approval-templates' ? 'workflow-templates' : templateType;\n const [first, second] = templateType_.split('-');\n const prettyName = `${capitalizeFirstLetter(first)} ${capitalizeFirstLetter(second)}`;\n return isPlural ? prettyName : prettyName.substring(0, prettyName.length - 1);\n};\n\nexport const categoryHasParent = category => category.parent !== '' && category.parent !== null && category.parent !== undefined;\n\nexport const getTemplateId = template => template?.id || template?._id;\n\nexport const getSubCategoryViewData = (selectedCategory, allCategories, setSubCategoryViewData, filters, language, templateType, source) => {\n if (!selectedCategory) return [];\n const subCategories = allCategories.filter(category => getTemplateId(category?.parent) === getTemplateId(selectedCategory));\n if (subCategories.length === 0) return [];\n setSubCategoryViewData({ subCategories: [], loading: true });\n return getCategory(filters, selectedCategory, language, templateType, source);\n};\n\nexport const getNoResultContent = (isNoUserTemplates = false, handleClearResult, searchResult, templatePageTypePrettyPlural) => {\n return (\n \n
\n );\n};\n\nexport const getTemplateCountText = total => t('{categoryTotal} Templates').replace('{categoryTotal}', total);\n\nexport const getJfWizardWrapper = () => document.querySelector('.jfWizard');\n\nexport const scrollToTop = (isMobile, containerRef, isInline) => {\n const scrollPayload = { top: 0, behavior: 'smooth' };\n // eslint-disable-next-line no-nested-ternary\n const scrollElement = (isMobile || getDeviceType() !== 'desktop') ? containerRef.current : (isInline ? getJfWizardWrapper() : window);\n if (scrollElement !== null && scrollElement) {\n scrollElement.scrollTo(scrollPayload);\n }\n};\n\nconst handleClickBackToHomeButton = (handleSelectCategory, username) => {\n window.standaloneTemplatesLogger({\n actor: username,\n action: `${getDeviceType()}:back-homepage`\n });\n handleSelectCategory();\n};\n\nexport const categoryHeaderRenderer = props => {\n const {\n selectedCategory, handleSelectCategory, templatePageTypePrettyPlural, setActiveParentCategory,\n isAllCategoriesSelected, templatePageTypePretty, subCategoryViewData, activeParentCategory, username\n } = props;\n if (selectedCategory) {\n const totalCount = selectedCategory.total ? selectedCategory.total : subCategoryViewData.total;\n return (\n {t('Oops, No Result Found')}
\n {\n isNoUserTemplates ? (\n{t('We could not find any user template for your current filtered language.')}
\n ) : (\n <>\n\n {translationRenderer(`Sorry we could not find any results for [1[{keyword}]] in our ${templatePageTypePrettyPlural}.`)({\n renderer1: () => (\n \n {`\"${searchResult.searchedKeyword}\"`}\n \n )\n })}\n
\n \n \n )\n }\n\n
\n );\n }\n if (isAllCategoriesSelected) {\n return (\n \n \n handleSelectCategory()} style={{ cursor: 'pointer' }}>\n {t(templatePageTypePrettyPlural)}\n \n {(categoryHasParent(selectedCategory) || activeParentCategory) && (\n {\n handleSelectCategory({ category: (activeParentCategory || selectedCategory.parent) });\n setActiveParentCategory();\n }}\n >\n {t((activeParentCategory?.name || selectedCategory.parent.name))}\n \n )}\n {t(selectedCategory.name)}\n
\n {t(selectedCategory.pageTitle || selectedCategory.title || selectedCategory._title)}
\n\n
\n \n
\n );\n }\n return null;\n};\n\nexport const allCategoriesRenderer = (categories, handleSelectCategory, setActiveParentCategory) => (\n categories.map(category => {\n const {\n description, total, name, _id\n } = category;\n return (\n {t(`${templatePageTypePretty} Categories`)}
\n{t(`You can find any ${templatePageTypePretty} Category that fits your needs.`)}
\n {t(name)}
\n {t(description)}\n \n\n setSearchKeyword(sanitize(e.target.value))}\n onKeyDown={e => e.key === 'Enter' && handleSearch()}\n />\n
\n \n \n \n );\n};\n\nexport default Search;\n","import { IconAngleDown, IconAngleUp } from '@jotforminc/svg-icons';\nimport React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport camelCase from 'lodash/camelCase';\nimport { classNames } from '@jotforminc/utils';\n\nconst Accordion = ({\n text, label, children, open, scrollable, username, isLast, onToggle\n}) => {\n const [isOpen, setIsOpen] = useState(open);\n\n const handleClick = () => {\n const actionText = `${isOpen ? 'close' : 'open'}-clicked-${camelCase(text)}`;\n setIsOpen(!isOpen);\n window.standaloneTemplatesLogger({\n actor: username,\n action: `${window.innerWidth <= 780 ? 'mobile' : 'desktop'}:${actionText}`,\n target: 'newSidebar'\n });\n onToggle();\n };\n\n return (\n ${t(elm.innerText)}
`);\n }\n };\n\n const myTemplatesVisible = username !== '' && !isGuest();\n const industryCategoryType = categories.find(category => category.slug === selectedIndustryCat);\n\n useEffect(() => {\n const categoryList = document.querySelectorAll('.jfSidebar--categoryList a span:not(.countTotal)');\n categoryList.forEach(elm => addTooltip(elm));\n }, [categories, subMenuActive, asideShow, accordionOpen]);\n\n return (\n \n
\n );\n};\n\nexport default Sidebar;\n","import React, { useState } from 'react';\nimport {\n object, string, func, bool\n} from 'prop-types';\nimport { getDeviceType } from '../../getDeviceType';\nimport { templateConstants } from '../../templateConstants';\n\nconst TemplateItemContainer = ({\n type, template, templateTheme, setSelectedTemplate,\n handleTemplateClone, username, source, context, logAbTestAction, liteMode, useSlider, customCloneText\n}) => {\n const [imageLoaded, setImageLoaded] = useState(false);\n const templateTitle = template._title || template.title;\n const handlePreviewTemplate = (target, selectedTemplate = template) => {\n setSelectedTemplate(selectedTemplate);\n if (window.standaloneTemplatesLogger) {\n window.standaloneTemplatesLogger({\n actor: username,\n target: `/${type}/standalone/${template?.slug || templateTitle}`,\n action: `${getDeviceType()}:${target}`\n });\n }\n\n // A/B Test: templateSuggestionModalOnMyAppsIII\n if (liteMode) {\n logAbTestAction?.({ action: 'preview', target: template?.slug });\n }\n };\n\n const { templateItem: TemplateItemRenderer, getCloneTemplatePayload } = templateConstants[type];\n const templateCloneWrapper = event => {\n if (window.standaloneTemplatesLogger) {\n window.standaloneTemplatesLogger({\n actor: username,\n target: template._id || template.id,\n action: `${getDeviceType()}:useTemplate`\n });\n }\n const { payload } = getCloneTemplatePayload(undefined, { ...template, theme: templateTheme }, source);\n handleTemplateClone(payload, event.target);\n\n // A/B Test: templateSuggestionModalOnMyAppsIII\n if (liteMode) {\n logAbTestAction?.({ action: 'clone', target: template.slug });\n }\n };\n\n return (\n \n setAsideShow(true)}\n className=\"asideMobileButton\"\n >\n {t(`${templatePageTypePretty} Categories`)}\n \n
\n \n {t('More categories like this')}
\n- \n {\n relateds.filter(rel => rel.total !== undefined).map(related => (\n
\n
\n \n ))\n }\n {t(related.name)}
\n \n\n
\n \n
\n {t(name)}
\n {total}\n\n
\n \n
\n {t('See All')}\n \n \n
\n \n \n {\n // A/B Test: templateSuggestionModalOnMyAppsIII\n registerABTestActionRef.current?.({ action: 'click', target: 'seeMoreTemplatesButton' });\n handleClickSeeMoreTemplates(event);\n } : handleClickSeeMore}\n >\n {t(isLoadingMore ? 'Please wait...' : loadMoreText)}\n \n
\n )\n );\n };\n\n const subCategoryGalleryRenderer = () => {\n if (subCategoryModeDisabled) return null;\n const subCategorySkeletons = categories.filter(category => getTemplateId(category?.parent) === getTemplateId(selectedCategory));\n const subCategoryIterators = loading ? subCategorySkeletons : subCategories;\n return (\n subCategoryIterators.map(subCategory => (\n \n
\n )}\n {categoryHeaderRenderer(categoryHeaderRendererProps)}\n {(searchResult.searchView && templates.length > 0) && (\n <>\n {t(`${templatePageTypePrettyPlural} by ${username}`)}
\n \n
\n {\n (suggestedCategories && Array.isArray(suggestedCategories) && suggestedCategories.length > 0) && (\n {t(`Listing ${formatBigNumber(totalTemplates)} Search Results for \"${searchResult.searchedKeyword}\"`)}
\n \n \n
\n {\n suggestedCategories.find(({ hidden }) => hidden) && (\n \n {\n suggestedCategories.map(category => {\n const {\n hidden = false, name, color, total\n } = category;\n if (hidden) return null;\n return (\n handleSelectCategory({ category })}\n onKeyDown={() => handleSelectCategory({ category })}\n >\n
\n );\n })\n }\n {name}
\n\n
\n setSuggestedCategories(suggestedCategories.map(category => ({ ...category, hidden: false })))}\n >\n
\n )\n }\n \n )\n }\n \n )}\n \n {itemsRenderer(isAllCategoriesSelected ? 'all-categories' : 'templates')}\n
\n \n handlePrevNextTemplateHandler({ key: 'ArrowLeft' })}\n >\n \n {isCloningTemplate ? t(texts.PLEASE_WAIT) : t(texts.USE_TEMPLATE)}\n \n )}\n handlePrevNextTemplateHandler({ key: 'ArrowRight' })}\n >\n
\n );\n}\n\nModalControls.propTypes = {\n className: string,\n useTemplate: func,\n isCloningTemplate: bool,\n handlePrevNextTemplateHandler: func,\n newStyle: bool,\n leftRef: oneOfType(func, object),\n rightRef: oneOfType(func, object)\n};\n\nModalControls.defaultProps = {\n className: '',\n useTemplate: f => f,\n isCloningTemplate: false,\n handlePrevNextTemplateHandler: f => f,\n newStyle: false,\n leftRef: f => f,\n rightRef: f => f\n};\n","/* eslint-disable jsx-a11y/alt-text */\n/* eslint-disable @jotforminc/no-native-button */\n/* eslint-disable import/no-cycle */\nimport React, { useState } from 'react';\nimport {\n string, func, object, bool\n} from 'prop-types';\nimport Loader from '../../../Loader';\n\nimport './style.scss';\n\nconst WorkflowTemplateAreaRenderer = ({\n modelContentLoading, frameRef, templatePreviewURL,\n setModelContentLoading, rightArrowRef, leftArrowRef, template\n}) => {\n let formID;\n const { source_snapshot: sourceSnapshot = '{}' } = template;\n try {\n const { data } = JSON.parse(sourceSnapshot);\n try {\n const { properties: { id: parsedFormID } } = JSON.parse(data);\n formID = parsedFormID;\n } catch {\n //\n }\n } catch {\n //\n }\n const [activeTab, setActiveTab] = useState(0);\n\n const previewBtns = [\n { btnType: 'workflow', btnName: 'WORKFLOW' },\n { btnType: 'form', btnName: 'FORM PREVIEW' }\n ];\n\n const handleLoadObject = () => {\n setModelContentLoading(false);\n rightArrowRef.current.classList.remove('load-active');\n leftArrowRef.current.classList.remove('load-active');\n };\n\n return (\n \n { modelContentLoading &&
\n \n \n {\n previewBtns.map(({ btnType, btnName }, index) => (\n setActiveTab(index)}\n className={`item relative radius-full flex items-center justify-center px-2 py-1 min-w-28 border-0 bg-navy-50 ${activeTab === index ? 'bg-navy-900 color-white' : 'color-navy-300'}`}\n >\n {btnName}\n \n ))\n }\n
\n \n
\n \n );\n};\n\nTableTemplateAreaRenderer.defaultProps = {\n _slug: '',\n backgroundColor: '',\n setModelContentLoading: f => f,\n rightArrowRef: null,\n leftArrowRef: null,\n _previewImageUrl: '',\n title: '',\n modelContentLoading: true\n};\n\nTableTemplateAreaRenderer.propTypes = {\n modelContentLoading: bool,\n _slug: string,\n backgroundColor: string,\n setModelContentLoading: func,\n rightArrowRef: object,\n leftArrowRef: object,\n _previewImageUrl: string,\n title: string\n};\n\nexport default TableTemplateAreaRenderer;\n","/* eslint-disable quotes */\n/* eslint-disable quote-props */\n/* eslint-disable react/prop-types */\nimport { t } from '@jotforminc/translation';\nimport React, { useRef } from 'react';\nimport { Swiper, SwiperSlide } from 'swiper/react';\nimport { isEnterprise } from '@jotforminc/enterprise-utils';\nimport { handleCustomNavigation } from '@jotforminc/utils';\nimport { IconArrowUpLeft } from '@jotforminc/svg-icons';\nimport TemplateItemContainer from '../TemplateItem/TemplateItemContainer';\nimport { ScTemplates } from '../ScTemplates';\n\nimport 'swiper/css';\nimport 'swiper/css/navigation';\nimport { getDeviceType } from '../../getDeviceType';\n\nconst handleAskMeAction = (question, frameRef) => {\n const frameContent = frameRef.current;\n const objWindow = frameContent.contentWindow;\n const objDoc = frameContent.contentDocument || frameContent.contentWindow.document;\n objWindow.postMessage({\n question,\n source: 'agent-directory'\n }, window.location.origin);\n setTimeout(() => {\n const agentSendBtn = objDoc.querySelector('.sendButton');\n if (agentSendBtn) {\n agentSendBtn.click();\n }\n }, 500);\n};\n\nexport const OverviewTabRenderer = (props = {}) => {\n const { description = '' } = props;\n return (\n \n
\n \n
\n \n { modelContentLoading && \n {\n setModelContentLoading(false);\n rightArrowRef.current.classList.remove('load-active');\n leftArrowRef.current.classList.remove('load-active');\n }}\n className=\"pointer-events-none absolute left-0 bottom-0 z-0 block w-auto radius-lg transform translate-x-10 translate-y-8 image lazyloaded\"\n src={_previewImageUrl}\n alt={title}\n style={{ maxWidth: 'unset', height: '99%' }}\n />\n
\n \n \n \n \n
\n \n \n {t('About this agent')}\n \n
\n );\n};\n\nexport const FormTemplatesTabRenderer = (data = {}) => {\n const { username, formTemplate: formTemplateData } = data || {};\n const connectedFormTemplates = formTemplateData || [];\n const sliderRef = useRef(null);\n\n const deviceType = getDeviceType();\n const isDesktop = deviceType === 'desktop';\n return (\n \n {t('Connected Forms')}\n \n \n \n {\n connectedFormTemplates.map(formTemplate => (\n \n {\n handleCustomNavigation(`${window.location.origin}/form-templates/${formTemplate._slug}`, '_blank');\n }}\n handleTemplateClone={() => {\n handleCustomNavigation(`${window.location.origin}/form-templates/${formTemplate._slug}`, '_blank');\n }}\n liteMode={false}\n />\n \n ))\n }\n \n \n
\n \n );\n};\n\nexport const AskMeSectionRenderer = ({ template, frameRef }) => {\n try {\n const { JSON: jsonData = '{}' } = template;\n const { questions } = JSON.parse(jsonData);\n return (\n \n {t('Ask me things like...')}\n
\n );\n } catch {\n return null;\n }\n};\n\nconst AgentTemplatePreviewContent = () => {\n return null;\n};\n\nexport default AgentTemplatePreviewContent;\n","export const RESPONSIVE_MODES = {\n MOBILE: 'mobile',\n TABLET: 'tablet',\n DESKTOP: 'desktop'\n};\n\nexport const DUMMY_RECOMMENDED_THEMES = [{\n id: 211301991871959,\n thumbnail_url: 'https://cdn.jotfor.ms/assets/img/appPreview/industry_education.png'\n}, {\n id: 212721702558958,\n thumbnail_url: 'https://cdn.jotfor.ms/assets/img/appPreview/theme1.png'\n}, {\n id: 211602841262951,\n thumbnail_url: 'https://cdn.jotfor.ms/assets/img/appPreview/theme2.png'\n}, {\n id: 211302146772952,\n thumbnail_url: 'https://cdn.jotfor.ms/assets/img/appPreview/theme3.png'\n}, {\n id: 212382889685978,\n thumbnail_url: 'https://cdn.jotfor.ms/assets/img/appPreview/default.png'\n}];\n","import { autoTranslate } from '@jotforminc/utils';\n\nexport default autoTranslate({\n APP_TITLE: 'Your app is ready!',\n APP_CTA_TEXT: 'Use this app',\n SELECT_THEME: 'Select Theme',\n TRY_ME: 'Try me'\n});\n","import React from 'react';\nimport { string, func } from 'prop-types';\nimport { IconMobile, IconTablet, IconDesktop } from '@jotforminc/svg-icons';\nimport { RESPONSIVE_MODES } from '../core/constants';\n\nconst ViewMode = ({ viewMode, onViewModeChange }) => {\n const { MOBILE, TABLET, DESKTOP } = RESPONSIVE_MODES;\n\n const isActive = (vMode, type) => (vMode === type ? 'bg-blue-500 color-white' : '');\n\n return (\n - \n {\n questions.map(question => (\n
\n onViewModeChange(MOBILE)}\n className={`mobile border-0 flex items-center justify-center w-full h-12 radius-t-lg ${isActive(viewMode, MOBILE)}`}\n >\n onViewModeChange(TABLET)}\n className={`tablet border-0 flex items-center justify-center w-full h-12 radius-b-lg lg:radius-b-none ${isActive(viewMode, TABLET)}`}\n >\n onViewModeChange(DESKTOP)}\n className={`pc border-0 hidden lg:flex items-center justify-center w-full h-12 radius-b-lg ${isActive(viewMode, DESKTOP)}`}\n >\n
\n );\n};\n\nViewMode.propTypes = {\n viewMode: string,\n onViewModeChange: func\n};\n\nViewMode.defaultProps = {\n viewMode: RESPONSIVE_MODES.MOBILE,\n onViewModeChange: f => f\n};\n\nexport default ViewMode;\n","/* eslint-disable max-len */\nimport React from 'react';\n\nconst MobileBorder = () => {\n return (\n \n
\n \n
\n {\n viewMode === RESPONSIVE_MODES.MOBILE ? (\n loadingAnimationStatus ? (\n \n {!modalContentLoading && (\n 
\n )}\n
\n {title}
\n \n \n {/* preview frames: mobile, tablet, desktop */}\n
\n );\n};\n\nAppPreviewBody.propTypes = {\n template: object,\n themes: arrayOf(shape()),\n currentThemeId: (oneOfType([number, string])),\n onViewModeChange: func,\n showThemeChangeTransition: bool,\n showAsTemplatePreview: bool,\n forStandalonePageTemplate: bool,\n previewQueryParams: string,\n customTryText: string,\n modalContentLoading: bool,\n customOnLoad: func\n};\n\nAppPreviewBody.defaultProps = {\n onViewModeChange: f => f,\n themes: [],\n currentThemeId: 0,\n customTryText: null,\n modalContentLoading: false,\n showThemeChangeTransition: false,\n forStandalonePageTemplate: false,\n previewQueryParams: '',\n showAsTemplatePreview: false,\n template: {\n splashBgColor: 'rgba(243, 243, 254, 1)'\n },\n customOnLoad: f => f\n};\n\nexport default AppPreviewBody;\n","import React from 'react';\nimport {\n string, object, bool, func\n} from 'prop-types';\nimport './style.scss';\nimport { AppPreviewBody } from '../../../AppPreview';\n\nconst AppTemplateAreaRenderer = ({\n modelContentLoading, backgroundColor, setModelContentLoading,\n rightArrowRef, leftArrowRef, template\n}) => {\n const { app_id: appID } = template;\n return (\n \n
\n {/* responsive controls */}\n \n {!forStandalonePageTemplate ? (\n <>\n
\n \n
\n \n {getCurrentTime()}\n
\n \n \n
\n \n {!forStandalonePageTemplate ? (\n
\n \n {/* standard preview */}\n {!showAsTemplatePreview && !areThemesLoading && (\n
\n {\n !forStandalonePageTemplate && (\n \n {customTryText !== null ? t(customTryText) : texts.TRY_ME}\n
\n )\n }\n \n
\n );\n};\n\nAppTemplateAreaRenderer.defaultProps = {\n backgroundColor: '',\n rightArrowRef: null,\n leftArrowRef: null,\n modelContentLoading: true,\n template: {},\n setModelContentLoading: f => f\n};\n\nAppTemplateAreaRenderer.propTypes = {\n modelContentLoading: bool,\n backgroundColor: string,\n rightArrowRef: object,\n leftArrowRef: object,\n template: object,\n setModelContentLoading: func\n};\n\nexport default AppTemplateAreaRenderer;\n","/* eslint-disable react/prop-types */\nimport React, { forwardRef, useEffect, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { TextInput, Dropdown } from '@jotforminc/uikit';\nimport { classNames } from '@jotforminc/utils';\n\nconst DropdownEditor = ({\n options,\n onChange,\n selectedOptionValue,\n textInputPlaceholder,\n ...props\n}) => {\n const [menuOpen, setMenuOpen] = useState(false);\n const selectOption = selectedOption => {\n onChange(selectedOption);\n };\n\n const ContainerRenderer = ({ children }) => (\n \n
\n \n
\n \n {\n setModelContentLoading(false);\n rightArrowRef.current.classList.remove('load-active');\n leftArrowRef.current.classList.remove('load-active');\n }}\n modalContentLoading={modelContentLoading}\n />\n
\n - {children}
\n \n {text || placeholder}\n \n
\n );\n });\n\n const TextInputRenderer = ({ ...textInputProps }) => {\n return (\n \n
\n );\n };\n\n const GroupRenderer = ({ text, children, ...groupProps }) => {\n return (\n \n {text}\n
\n );\n };\n\n const OptionContainerRenderer = optionProps => {\n // eslint-disable-next-line react/destructuring-assignment\n const color = optionProps?.children?.props?.option?.color || '#151039';\n return (\n \n );\n };\n\n return (\n {children}
\n \n
\n\n );\n};\n\nDropdownEditor.propTypes = {\n options: PropTypes.array.isRequired,\n onChange: PropTypes.func,\n selectedOptionValue: PropTypes.string,\n textInputPlaceholder: PropTypes.string\n};\n\nDropdownEditor.defaultProps = {\n onChange: f => f,\n selectedOptionValue: null,\n textInputPlaceholder: null\n};\n\nexport default DropdownEditor;\n","/* eslint-disable import/no-cycle */\n/* eslint-disable react/prop-types */\nimport React, {\n useState, useRef, useEffect\n} from 'react';\nimport { object } from 'prop-types';\nimport { IconEyeFilled } from '@jotforminc/svg-icons';\nimport { capitalizeFirstLetter, classNames } from '@jotforminc/utils';\nimport { t } from '@jotforminc/translation';\n\nimport './style.scss';\nimport RoleSelector from '../RoleSelector';\nimport { templateConstants } from '../../templateConstants';\n// import Button from '../../../Button';\n// import texts from '../../../../core/texts';\n\nconst PDFTemplateAreaRenderer = ({\n template, DOM,\n setModelContentLoading, templateType\n}) => {\n const objectRef = useRef();\n const [signers, setSigners] = useState([]);\n const [signAnnotations, setSignAnnotations] = useState([]);\n const [currentParticipantID, setCurrentParticipantID] = useState('');\n const [loadingPreview, setLoadingPreview] = useState(true);\n\n const {\n _id,\n screenshot\n } = template;\n\n const { aliasType } = templateConstants[templateType];\n\n const resetPreviewStates = () => {\n setSigners([]);\n setSignAnnotations([]);\n setLoadingPreview(true);\n setCurrentParticipantID('');\n };\n\n useEffect(() => {\n resetPreviewStates();\n }, [template]);\n\n const getIframeInsideObject = objectEl => {\n if (!objectEl) return;\n const iFrameElement = objectEl.querySelector('IFRAME');\n const { contentDocument, contentWindow } = iFrameElement !== null ? iFrameElement : {};\n if (!contentWindow) return;\n return contentDocument || contentWindow.document;\n };\n\n const isFirstPdfPageRendered = iframeDoc => iframeDoc.getElementsByClassName('PDFV-canvas').length > 0;\n\n const getOwnerName = owner => {\n const { role, type } = owner;\n if (type === 'owner') return 'Owner';\n return capitalizeFirstLetter(role || type);\n };\n\n const formatAnnotations = (annotations, iframeDoc) => {\n if (!iframeDoc) return;\n return annotations.map(annotation => {\n const { id } = annotation;\n return {\n id,\n ref: iframeDoc.querySelector(`[data-annotation-id=\"${id}\"]`)\n };\n });\n };\n\n const handleLoadObject = (event, tryCount = 0) => {\n const { current } = objectRef || {};\n if (!current) return;\n\n const { contentDocument, contentWindow = {} } = current;\n if (!contentDocument) return;\n\n if (tryCount > 100) {\n setLoadingPreview(false);\n }\n\n const iframeDoc = getIframeInsideObject(contentDocument);\n if (!iframeDoc || iframeDoc.readyState !== 'complete') {\n setTimeout(() => handleLoadObject(null, tryCount + 1), 100);\n return;\n }\n\n if (!isFirstPdfPageRendered(iframeDoc)) {\n setTimeout(() => handleLoadObject(null, tryCount + 1), 100);\n return;\n }\n setLoadingPreview(false);\n const { documentProps: { participants }, annotations = [] } = contentWindow;\n\n const allAnnotations = formatAnnotations(annotations, iframeDoc).filter(annotation => annotation.ref !== null);\n\n if (allAnnotations.length !== annotations.length && tryCount !== 100) {\n setTimeout(() => handleLoadObject(null, tryCount + 1), 100);\n return;\n }\n\n setSignAnnotations(allAnnotations);\n setSigners(\n participants.map(singer => {\n return { ...singer, prettyName: getOwnerName(singer) };\n })\n );\n };\n\n const showHideAnnotationElement = (show, element) => {\n if (show) {\n element.removeAttribute('data-participant');\n } else {\n element.setAttribute('data-participant', 'passive');\n }\n };\n\n const handleRoleChange = event => {\n const selectedValue = event?.value?.target || event?.value;\n\n setCurrentParticipantID(selectedValue);\n const { fields: selectedParticipantFields } = signers.find(signer => signer.participantID === selectedValue) || { fields: [] };\n signAnnotations.forEach(annotation => {\n const { ref: annotationElement } = annotation;\n if (selectedValue === '') {\n showHideAnnotationElement(true, annotationElement);\n } else {\n const qid = annotationElement.getAttribute('data-qid');\n const isPassive = !selectedParticipantFields.includes(qid);\n showHideAnnotationElement(!isPassive, annotationElement);\n }\n });\n };\n\n const signerOptions = [{ prettyName: 'All Roles ', participantID: '' }, ...signers];\n const isRoleBarActive = signers.length > 0;\n\n const { signable } = template;\n const isSignablePDF = signable === '1';\n\n // eslint-disable-next-line max-len\n const embedPDFCss = '';\n return (\n <>\n \n {loadingPreview && (\n <>\n {\n handleLoadObject(event);\n setModelContentLoading(false);\n }}\n id=\"pdf-template-preview\"\n className='w-full h-full relative z-2'\n data={`/${(aliasType || templateType)}/preview/esign/${_id}`}\n style={{\n opacity: loadingPreview ? 0 : 1, height: loadingPreview ? '0px' : '100%'\n }}\n />\n ) : (\n
\n \n {\n isSignablePDF && (\n \n \n \n \n
\n {\n isSignablePDF && (\n \n {\n setTimeout(() => { setLoadingPreview(false); }, 1000);\n setModelContentLoading(false);\n }}\n data={`data:text/html,${encodeURIComponent(`${embedPDFCss}${DOM}`)}`}\n style={{\n opacity: loadingPreview ? 0 : 1, zIndex: 0\n }}\n />\n
\n\n )\n }\n \n
\n )\n }\n \n );\n};\n\nPDFTemplateAreaRenderer.defaultProps = {\n template: {}\n};\n\nPDFTemplateAreaRenderer.propTypes = {\n template: object\n};\n\nexport default PDFTemplateAreaRenderer;\n","/* eslint-disable import/no-cycle */\n/* eslint-disable react/prop-types */\nimport React from 'react';\nimport { Button } from '@jotforminc/magnet';\nimport { IconCopy } from '@jotforminc/svg-icons';\n\nimport { handleCustomNavigation } from '@jotforminc/utils';\nimport { t } from '@jotforminc/translation';\nimport WorkflowTemplateAreaRenderer from './components/PreviewModalContents/ApprovalTemplatePreviewContent';\nimport TableTemplateAreaRenderer from './components/PreviewModalContents/TableTemplatePreviewContent';\nimport { AskMeSectionRenderer, FormTemplatesTabRenderer, OverviewTabRenderer } from './components/PreviewModalContents/AgentTemplatePreviewContent';\nimport AppTemplateAreaRenderer from './components/PreviewModalContents/AppTemplateAreaRenderer';\nimport { formatBigNumber } from './utils';\nimport PDFTemplateAreaRenderer from './components/PreviewModalContents/PDFTemplateAreaRenderer';\n\nexport const customModalConstants = {\n 'agent-templates': {\n OverviewTabRenderer,\n cloneCTAColor: 'apps',\n ctaClasses: ['isAgent'],\n customCTAText: 'Use Agent',\n FormTemplatesTabRenderer,\n customLoadMoreText: 'Show more agents',\n similarTemplatesText: 'Other agents',\n customSearchPlaceholder: 'Search in Agent Directory',\n templateAreaRendererClass: 'w-full h-full relative z-0',\n tabs: [{ id: 'form-templates', name: 'Connected Forms', data: '' }],\n CategoriesSectionRenderer: ({ template, frameRef }) => \n {\n return {\n text: option.prettyName,\n value: option.participantID,\n color: option.color\n };\n })}\n onChange={handleRoleChange}\n selectedOptionValue={currentParticipantID}\n />\n
\n \n
\n \n {t('Customize this template and share it to collect e-signatures')}\n
\n \n {\n (!isEnterpriseEnv) && (\n
\n );\n};\n","/* eslint-disable @jotforminc/no-native-button */\nimport React, {\n useRef, useState, useEffect, Fragment\n} from 'react';\nimport {\n arrayOf, object, func, string, number, bool\n} from 'prop-types';\nimport { t } from '@jotforminc/translation';\nimport { isEnterprise } from '@jotforminc/enterprise-utils';\nimport { Swiper, SwiperSlide } from 'swiper/react';\n\nimport 'swiper/css';\nimport 'swiper/css/navigation';\n\nimport { IconChevronLeft, IconChevronRight } from '@jotforminc/svg-icons';\nimport { ScTemplates } from '../ScTemplates';\nimport TemplateItemContainer from '../TemplateItem/TemplateItemContainer';\nimport { getDeviceType } from '../../getDeviceType';\n// eslint-disable-next-line import/no-cycle\nimport { customModalConstants } from '../../customModalConstants';\n\nconst dummyTemplatesArray = [\n { screenshot: 'skeleton', title: 'skeleton', id: 'skeleton-1' },\n { screenshot: 'skeleton', title: 'skeleton', id: 'skeleton-2' },\n { screenshot: 'skeleton', title: 'skeleton', id: 'skeleton-3' },\n { screenshot: 'skeleton', title: 'skeleton', id: 'skeleton-4' },\n { screenshot: 'skeleton', title: 'skeleton', id: 'skeleton-5' },\n { screenshot: 'skeleton', title: 'skeleton', id: 'skeleton-6' }\n];\n\nconst SimilarTemplatesItem = ({\n similarTemplates, modalBodyRef, categoryData, onTemplateClone, templateType, source, theme, useSlider, newStandaloneActive,\n setModalContentLoading, customOnSelectTemplate, skeletonCount, selectTemplateCallback, parentTemplateID, displayMyformsModal,\n modelContentLoading\n}) => {\n const sliderRef = useRef(null);\n const [sliderRealIndex, setSliderRealIndex] = useState(0);\n const [disableNavigationNext, setDisableNavigationNext] = useState(false);\n const [similarsLoaded, setSimilarsLoaded] = useState(false);\n\n const deviceType = getDeviceType();\n const isDesktop = deviceType === 'desktop';\n\n useEffect(() => {\n if (Object.keys(categoryData).length > 0) {\n setSimilarsLoaded(true);\n }\n }, [categoryData]);\n\n const handleSelectTemplateWrapper = newTemplate => {\n selectTemplateCallback();\n customOnSelectTemplate();\n setSimilarsLoaded(false);\n modalBodyRef?.current?.scrollTo({ top: 0, behavior: 'smooth' });\n if (!newStandaloneActive) {\n const navigatedTemplateData = {\n ...newTemplate\n };\n displayMyformsModal({ template: { navigatedTemplateData }, ...navigatedTemplateData });\n return;\n }\n global?.setSelectedTemplate(newTemplate);\n setModalContentLoading(true);\n };\n\n const seeAlsoTemplates = (similarsLoaded && !modelContentLoading) ? similarTemplates : dummyTemplatesArray.slice(0, skeletonCount);\n\n if (seeAlsoTemplates.length <= 0) return null;\n\n const prettySeeAlsoTemplates = seeAlsoTemplates.length > 3 ? seeAlsoTemplates.slice(0, 6) : seeAlsoTemplates;\n\n const { similarTemplatesText = 'Related templates' } = customModalConstants[templateType];\n return (\n \n {t('About this template')}\n \n
\n )\n }\n \n
\n \n Categories\n
\n - \n {templateCategoriesData.map(category => (\n
- \n
\n Details\n
\n {\n !isEnterpriseEnv && (\n \n
\n \n
\n \n {formatBigNumber(_clonecount || clonecount)}\n \n {' '}\n {t('Clone')}\n \n
\n \n Created by\n
\n )\n }\n \n \n {_username || username}\n \n
\n \n \n
\n \n {t(similarTemplatesText)}\n
\n \n {\n if (!sliderRef.current) return;\n sliderRef.current.swiper.slidePrev();\n setSliderRealIndex(sliderRef.current.swiper.realIndex);\n setDisableNavigationNext(sliderRef.current.swiper.isEnd);\n }}\n disabled={sliderRealIndex === 0}\n style={{ opacity: sliderRealIndex === 0 ? 0.4 : 1, pointerEvents: sliderRealIndex === 0 ? 'none' : 'auto' }}\n >\n {\n if (!sliderRef.current) return;\n sliderRef.current.swiper.slideNext();\n setDisableNavigationNext(sliderRef.current.swiper.isEnd);\n setSliderRealIndex(sliderRef.current.swiper.realIndex);\n }}\n disabled={disableNavigationNext}\n style={{\n opacity: disableNavigationNext ? 0.4 : 1,\n pointerEvents: disableNavigationNext ? 'none' : 'auto'\n }}\n >\n Next\n
\n {t('More templates like this')}
\n\n \n \n
\n \n )\n }\n \n );\n};\n\nSimilarTemplatesItem.defaultProps = {\n theme: '',\n source: '',\n useSlider: false,\n skeletonCount: 6,\n categoryData: null,\n similarTemplates: [],\n parentTemplateID: '',\n modalBodyRef: undefined,\n onTemplateClone: () => {},\n customOnSelectTemplate: () => {},\n selectTemplateCallback: () => {},\n displayMyformsModal: f => f,\n newStandaloneActive: true,\n modelContentLoading: false\n};\n\nSimilarTemplatesItem.propTypes = {\n theme: string,\n source: string,\n useSlider: bool,\n modalBodyRef: object,\n categoryData: object,\n skeletonCount: number,\n onTemplateClone: func,\n parentTemplateID: string,\n selectTemplateCallback: func,\n customOnSelectTemplate: func,\n templateType: string.isRequired,\n similarTemplates: arrayOf(object),\n setModalContentLoading: func.isRequired,\n displayMyformsModal: func,\n newStandaloneActive: bool,\n modelContentLoading: bool\n};\n\nexport default SimilarTemplatesItem;\n","import { useState, useEffect } from 'react';\n\nconst useIsMobile = () => {\n const [isMobile, setIsMobile] = useState(false);\n useEffect(() => {\n const handleResize = () => {\n setIsMobile(window.innerWidth < 780);\n };\n window.addEventListener('resize', handleResize);\n handleResize();\n return () => window.removeEventListener('resize', handleResize);\n }, []);\n return isMobile;\n};\n\nexport default useIsMobile;\n","import {\n useEffect,\n useState,\n useRef\n} from 'react';\nimport { ABTestManager } from '@jotforminc/abtest-manager';\n\nexport const useABTestManager = options => {\n const [isLoading, setIsLoading] = useState(true);\n const [isTestVariant, setIsTestVariant] = useState(false);\n const abTestActionRef = useRef(f => f);\n\n useEffect(() => {\n const abTestManager = new ABTestManager(options);\n abTestManager.isTestVariant().then(setIsTestVariant).finally(() => setIsLoading(false));\n abTestActionRef.current = abTestManager.registerABTestAction;\n }, []);\n\n return [isLoading, isTestVariant, abTestActionRef.current];\n};\n\nexport const useOutsideClick = (callback, exceptionalSelectorList = []) => {\n const ref = useRef(null);\n\n useEffect(() => {\n const handleClickOutside = event => {\n event.stopPropagation();\n let clickedExceptionalElement = false;\n for (let index = 0; index < exceptionalSelectorList.length; index++) {\n const selector = exceptionalSelectorList[index];\n const exceptionalEl = document.querySelector(selector);\n if (exceptionalEl && exceptionalEl.contains(event.target)) {\n clickedExceptionalElement = true;\n break;\n }\n }\n if (clickedExceptionalElement) return;\n\n if (ref.current && (!ref.current.contains(event.target) || ref.current === event.target)) {\n callback();\n }\n };\n\n document.addEventListener('mouseup', handleClickOutside);\n document.addEventListener('touchend', handleClickOutside);\n\n return () => {\n document.removeEventListener('mouseup', handleClickOutside);\n document.removeEventListener('touchend', handleClickOutside);\n };\n }, [callback]);\n\n return ref;\n};\n","/* eslint-disable react/button-has-type */\n/* eslint-disable react/prop-types */\n/* eslint-disable max-len */\n/* eslint-disable jsx-a11y/click-events-have-key-events */\n/* eslint-disable eqeqeq */\n/* eslint-disable jsx-a11y/anchor-is-valid */\n/* eslint-disable complexity */\n/* eslint-disable @jotforminc/no-native-button */\nimport React, { useRef, useState, useEffect } from 'react';\nimport ReactDOM from 'react-dom';\n\nimport { t } from '@jotforminc/translation';\nimport { classNames, capitalizeFirstLetter } from '@jotforminc/utils';\n\nimport { Button, InputText } from '@jotforminc/magnet';\nimport {\n IconArrowDown, IconXmark, IconChevronLeft,\n IconChevronRight, IconMagnifyingGlass\n} from '@jotforminc/svg-icons';\nimport { isEnterprise } from '@jotforminc/enterprise-utils';\nimport texts from '../../core/texts';\nimport ModalControls from '../StandaloneTemplates/components/PreviewModalContents/ModalControls';\nimport SimilarTemplatesItem from '../StandaloneTemplates/components/PreviewModalContents/SimilarTemplatesItem';\nimport useIsMobile from '../../hooks/useIsMobile';\nimport { useOutsideClick } from '../StandaloneTemplates/hooks';\nimport { getTemplatePreviewURL } from '../StandaloneTemplates/utils';\nimport Loader from '../Loader';\nimport { customModalConstants, DefaultOverviewTabRenderer } from '../StandaloneTemplates/customModalConstants';\n\nconst NewWizardTemplateModal = ({\n similarTemplates, handleClose, previewURL, modalProps, username, formTemplate, forms,\n template, title, frameSrc, categoryData, setModalContentLoading, theme, displayMyformsModal,\n isCloningTemplate = false, useTemplate, categories, setSelectedCategory, legacyStandaloneFrameRef,\n templateTabs = [], searchKeyword, setSearchKeyword, standaloneTemplates, newStandaloneActive, DOM, openTemplateModalInPortal\n}) => {\n const [activeTabID, setActiveTabID] = useState('overview');\n\n const [modelContentLoading, setModelContentLoading] = useState(true);\n const wizardModalBodyRef = useOutsideClick(\n handleClose,\n ['.jfWizard-modal', '#CookieBanner', '.templateSuggestionModal-neverShowGroup']\n );\n const frameRef = useRef();\n const closeBtnRef = useRef();\n const similarTemplatefRef = useRef();\n\n const leftArrowRef = useRef();\n const rightArrowRef = useRef();\n\n const templateType = frameSrc.split('/')[1];\n const [resourceName] = templateType.split(' ');\n\n const isMobile = useIsMobile();\n const modalVisibleClassName = 'jfWizard--isModalVisible';\n\n const {\n _id, id,\n _metaDescription, metaDescription, _slug, thumbnailBackgroundColor: backgroundColor,\n _categories, categories: templateCategories, _previewImageUrl\n } = template;\n\n useEffect(() => {\n if (closeBtnRef.current) {\n closeBtnRef.current.scrollIntoView({ behavior: 'smooth' });\n }\n setModelContentLoading(true);\n }, [(_id || id)], _previewImageUrl);\n\n const handleArrowClick = ({ key }) => {\n if (!['ArrowLeft', 'ArrowRight'].includes(key)) return;\n const isArrowLeft = key === 'ArrowLeft';\n const actionTarget = isArrowLeft ? leftArrowRef.current : rightArrowRef.current;\n\n if (actionTarget) actionTarget.classList.add('load-active');\n\n let currentTemplateOrder = standaloneTemplates.findIndex(templateIterator => (_id || id) === (templateIterator._id || templateIterator.id));\n\n if ((currentTemplateOrder === 0 && isArrowLeft) || (currentTemplateOrder === standaloneTemplates.length - 1 && !isArrowLeft)) {\n currentTemplateOrder = isArrowLeft ? standaloneTemplates.length : -1;\n }\n\n const navigatedTemplate = standaloneTemplates[isArrowLeft ? currentTemplateOrder - 1 : currentTemplateOrder + 1];\n if (navigatedTemplate) {\n global.setSelectedTemplate(navigatedTemplate);\n }\n };\n\n useEffect(() => {\n document.body.classList.add(modalVisibleClassName);\n return () => {\n document.body.classList.remove(modalVisibleClassName);\n };\n }, []);\n\n useEffect(() => {\n window.addEventListener('keydown', handleArrowClick);\n return () => {\n window.removeEventListener('keydown', handleArrowClick);\n };\n }, [standaloneTemplates, template]);\n\n const {\n tabs = [],\n ctaClasses = [],\n OverviewTabRenderer,\n FormTemplatesTabRenderer = () => null,\n SecondaryCTA = () => null,\n customCTAText = texts.USE_TEMPLATE,\n templateAreaRendererClass = 'w-full h-full lg:min-h-md lg:radius-md lg:absolute'\n } = customModalConstants[templateType];\n\n const formatedTabs = [\n { id: 'overview', name: 'Overview', data: '' },\n ...tabs,\n ...(templateTabs.filter(tab => tab.id !== 'more')) // more: unknown app template tab?\n ];\n const splitedTemplateCategories = (_categories || templateCategories || '').trim().split(',').filter(category => category);\n const templateCategoriesData = categories.filter(({ id: categoryID, _id: _categoryID }) => splitedTemplateCategories.find(cat => cat == (_categoryID || categoryID)));\n const isEnterpriseEnv = isEnterprise();\n\n const tabsRenderer = () => {\n switch (activeTabID) {\n case 'overview':\n if (OverviewTabRenderer) return \n {prettySeeAlsoTemplates.map(similiarTemplate => {\n return (\n \n handleSelectTemplateWrapper(newTemplate)}\n />\n \n );\n })}\n
\n \n \n
\n );\n };\n\n const formatLegacyStandaloneCategoryData = () => {\n if (!categoryData) return [];\n const result = [];\n const { parent } = categoryData;\n if (parent) result.push({ ...parent, title: parent.name });\n result.push({ ...categoryData, title: categoryData.name });\n return result;\n };\n\n const templateTypePretty = templateType.split('-')[0] === 'pdf' ? 'PDF' : capitalizeFirstLetter(templateType.split('-')[0]);\n const templatePreviewURL = getTemplatePreviewURL({ template, templateType, previewURL });\n\n const CategoriesRenderer = () => (\n \n {t('Categories')}\n
\n );\n const QRImageRenderer = () => (\n - \n {\n (newStandaloneActive ? templateCategoriesData : formatLegacyStandaloneCategoryData(categoryData)).map(category => (\n
- \n
\n \n
\n\n \n
\n \n );\n\n const {\n customLoadMoreText = 'Show more templates',\n customSearchPlaceholder = `Search in ${templateTypePretty} Templates`,\n TemplateAreaRenderer, cloneCTAColor = 'primary',\n CategoriesSectionRenderer = CategoriesRenderer,\n QRSectionRenderer = QRImageRenderer\n } = customModalConstants[templateType];\n\n const CloneTemplateCTA = ({ mainClass }) => (\n {t('See app in action')}
\n\n {t('Use your camera to scan the QR code and preview the app on your device.')}\n
\n\n
\n \n \n f}\n rightRef={!isMobile ? rightArrowRef : f => f}\n />\n )\n }\n
\n \n \n \n );\n\n const usePortal = openTemplateModalInPortal;\n\n if (usePortal) {\n return ReactDOM.createPortal(ModalRenderer, global.document.body);\n }\n return ModalRenderer;\n};\n\nexport default NewWizardTemplateModal;\n","import React, { useState } from 'react';\nimport { string, object, func } from 'prop-types';\nimport Loader from '../Loader';\n\nconst LegacyTemplatesRenderer = ({ frameSrc, frameRef, handleTemplateLoad }) => {\n const [frameActive, setFrameActive] = useState(false);\n return (\n <>\n \n
\n {\n !isMobile && (\n \n
\n \n
\n \n \n {title}\n \n
\n \n \n
\n \n {\n TemplateAreaRenderer ? (\n \n f}\n // eslint-disable-next-line max-len\n className=\"modal-arrow bg-transparent border-0 outline-0 left relative w-12 h-12 color-navy-500 inline-flex items-center justify-center radius hover:bg-navy-25 duration-200 transform rtl:rotate-180\"\n aria-label={t('Previous Template')}\n onClick={() => handleArrowClick({ key: 'ArrowLeft' })}\n >\n f}\n className=\"modal-arrow bg-transparent border-0 outline-0 right relative w-12 h-12 color-navy-500 inline-flex items-center justify-center radius hover:bg-navy-25 duration-200 transform rtl:rotate-180\"\n aria-label={t('Next Template')}\n onClick={() => handleArrowClick({ key: 'ArrowRight' })}\n >\n
\n \n {modelContentLoading && {\n setModelContentLoading(false);\n rightArrowRef.current.classList.remove('load-active');\n leftArrowRef.current.classList.remove('load-active');\n }}\n className={templateAreaRendererClass}\n />\n
\n )\n }\n \n
\n \n
\n \n
\n \n
\n \n {\n if (e.keyCode === 13) {\n if (!newStandaloneActive) {\n const frameWindow = legacyStandaloneFrameRef?.current.contentWindow;\n const currentPath = frameWindow.location.pathname;\n frameWindow.open(`${currentPath}/search?q=${searchKeyword}`, '_self');\n } else {\n window.handleSearch();\n }\n handleClose();\n }\n }}\n onChange={event => {\n setSearchKeyword(event.target.value);\n }}\n prefix={{ icon: IconMagnifyingGlass }}\n />\n
\n \n
\n \n
\n \n {title}\n
\n\n {_metaDescription || metaDescription}\n
\n {\n !isMobile && (\n \n
\n )\n }\n \n
\n \n
\n {\n similarTemplates && (\n \n {\n !isEnterpriseEnv && (\n {\n similarTemplatefRef.current.scrollIntoView({ behavior: 'smooth' });\n }}\n className=\"showMoreTemplatesBtn flex items-center color-navy-500 outline-0 border-0 radius-full hover:bg-navy-25 pr-3 rtl:pl-3 rtl:pr-0\"\n >\n \n
\n {tabsRenderer()}\n \n {\n formatedTabs.map(({ id: tabID, name: tabName }) => (\n {\n setActiveTabID(tabID);\n if (tabID === 'form-templates') similarTemplatefRef.current.scrollIntoView({ behavior: 'smooth' });\n }}\n data-tab={tabID}\n >\n {tabName}\n \n ))\n }\n
\n )\n }\n \n useTemplate(templateParam, target)}\n categoryData={categoryData}\n displayMyformsModal={displayMyformsModal}\n modelContentLoading={modelContentLoading}\n similarTemplates={similarTemplates}\n setModalContentLoading={stillLoading => setModalContentLoading(stillLoading)}\n />\n
\n )\n }\n - \n {children}\n
\n
\n )}\n \n {icon}\n
\n {isLoading && (\n \n
\n )}\n {isNew && (\n {texts.NEW}
\n )}\n \n {text &&
\n \n \n );\n }\n}\n\nWizardListItem.propTypes = {\n icon: oneOfType([\n arrayOf(node),\n node\n ]),\n text: string,\n subText: string,\n className: string,\n isBeta: bool,\n isNew: bool,\n isLoading: bool\n};\n\nWizardListItem.defaultProps = {\n icon: null,\n text: null,\n subText: null,\n className: '',\n isBeta: false,\n isNew: false,\n isLoading: false\n};\n","import { autoTranslate } from '@jotforminc/utils';\n\nexport default autoTranslate({\n CREATE_A_FORM: 'Create a Form',\n CREATE_FORM: 'Create Form',\n CREATE_A_FORM_SUBTITLE: 'Create or import a form to start gathering data',\n START_FROM_SCRATCH: 'Start From Scratch',\n START_FROM_SCRATCH_SUBTEXT: 'A blank slate is all you need',\n USE_TEMPLATE: 'Use Template',\n USE_TEMPLATE_SUBTEXT: 'Choose from 10,000+ premade forms',\n IMPORT_FORM: 'Import Form',\n IMPORT_FORM_SUBTEXT: 'Convert an existing form in seconds',\n IMPORT_FORM_SUBTITLE: 'Import existing forms into your Jotform account in seconds',\n SELECT_LAYOUT: 'Select form layout',\n SELECT_LAYOUT_SUBTITLE: 'Choose a layout according to your needs',\n CLASSIC_FORM: 'Classic Form',\n CLASSIC_FORM_SUBTITLE: 'Show all questions on one page',\n CARD_FORM: 'Card Form',\n CARD_FORM_SUBTITLE: 'Show single question per page',\n DESCRIBE_IN_SECONDS: 'Describe a form and get it in seconds',\n DESCRIBE_IN_WORDS: 'Describe in words what kind of information you want to collect.',\n PDF_FORM: 'PDF Form',\n PDF_FORM_SUBTITLE: 'PDF forms can be filled out on digital devices',\n GENERATING_FORM: 'Generating form',\n ENTER_URL: 'Enter URL',\n SELECT_FROM_YOUR_FORMS: 'Select from your forms',\n IMPORT_FAILED_PLEASE_TRY_AGAIN: 'Import failed, please try again later.',\n FROM_A_WEBPAGE: 'From a web page',\n FROM_A_WEBPAGE_SUBTITLE: 'Import a form from any page',\n CLONE_AN_EXISTING: 'Clone your existing form',\n CLONE_AN_EXISTING_SUBTITLE: 'Create a copy of one of your existing forms',\n IMPORT_PDF_FORM: 'Import PDF form',\n IMPORT_PDF_FORM_SUBTITLE: 'Convert your PDF form to an online form',\n SELECT_A_FORM: 'Select a Form',\n SELECT_FORM: 'Select Form',\n PREVIEW_FORM: 'Preview Form',\n PLEASE_WAIT: 'Please wait...',\n BETA: 'Beta',\n CREATE_SALESFORCE_FORM: 'Create Salesforce Form',\n CREATE_SALESFORCE_FORM_SUBTEXT: 'Create an integrated form with Salesforce objects',\n SALESFORCE_SELECT_OBJECT: 'Enter or select object',\n SALESFORCE_OBJECTS: 'Salesforce Objects',\n SALESFORCE_FIELD_SELECTED: '1 field selected',\n SALESFORCE_FIELDS_SELECTED: '{selectedFieldsCount} fields selected'\n});\n","import React from 'react';\nimport { func, string } from 'prop-types';\nimport { classNames, trackDataForMobile } from '@jotforminc/utils';\nimport {\n WizardBody,\n WizardList,\n WizardItem,\n WizardListItem,\n WizardHeader as Header\n} from '@jotforminc/wizard-shared';\n\nimport texts from '../../core/texts';\nimport IconClassicForm from '../../assets/svg/iconClassicForm.svg';\nimport IconCardForm from '../../assets/svg/iconCardForm.svg';\n\nexport default class FormTypeSelect extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n isLoading: null\n };\n }\n\n onCreateForm(formType) {\n const { onClickItem } = this.props;\n this.setState({ isLoading: formType });\n onClickItem(formType);\n }\n\n render() {\n const {\n setView, className, onBackButtonClick, actionLogger\n } = this.props;\n\n const {\n isLoading\n } = this.state;\n\n return (\n {text}
}\n {subText && {subText}
}\n {isBeta && (\n {texts.BETA}
\n )}\n \n \n \n {\n this.onCreateForm('ClassicForm');\n trackDataForMobile('formLayout', 'classic');\n }}\n icon={ {\n this.onCreateForm('CardForm');\n trackDataForMobile('formLayout', 'card');\n }}\n icon={ \n \n
\n \n \n \n \n
\n ) : (\n \n {onCancel ? (\n \n ) : (\n
\n);\n\nFooter.propTypes = {\n type: PropTypes.string.isRequired,\n selectedItemCount: PropTypes.number.isRequired,\n onAddButtonClick: PropTypes.func.isRequired,\n hasItems: PropTypes.bool.isRequired,\n confirmText: PropTypes.string,\n onCancel: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),\n hasSentbox: PropTypes.bool\n};\n\nFooter.defaultProps = {\n confirmText: 'Add',\n onCancel: false,\n hasSentbox: false\n};\n\nexport default Footer;\n","import React from 'react';\nimport { t } from '@jotforminc/translation';\nimport { DATA_SOURCE_ITEMS } from '../../../../../constants/itemTypes';\nimport Footer from '../FormPickerModal/Footer';\n\nexport const COMPONENT_KEYS = {\n FOOTER: 'Footer',\n HEADER: 'Header'\n};\n\nconst getDefaultElement = (key, props) => {\n switch (key) {\n case COMPONENT_KEYS.FOOTER: {\n return ;\n }\n\n case COMPONENT_KEYS.HEADER: {\n return (\n <>\n \n {hasSentbox ? (\n \n \n ) : (\n <>\n {(selectedItemCount > 0 && isTeamResourcePicker()) && t(`{itemCount} ${type}s selected.`).replace('{itemCount}', selectedItemCount)}\n \n )}\n
\n )}\n {hasItems && (\n \n )}\n {t(props.modalTitle)}
\n {t(props.modalDescription)}
\n \n );\n }\n\n default: {\n return <>;\n }\n }\n};\n\nexport const decideElementByType = (type, key, props) => {\n if (!DATA_SOURCE_ITEMS.includes(type)) {\n return getDefaultElement(key, props);\n }\n};\n","import React, { useState, useCallback } from 'react';\nimport { bool, func, oneOf } from 'prop-types';\nimport { isEnterprise } from '@jotforminc/enterprise-utils';\n\nimport { ResourcePicker } from '@jotforminc/resource-picker';\nimport { PickerModal } from '@jotforminc/picker-modal';\nimport { EmptyList, NotFoundList } from '@jotforminc/empty-list';\nimport { t } from '@jotforminc/translation';\nimport { useDispatch, useSelector } from 'react-redux';\nimport SelectTemplate from '../../SelectTemplate';\nimport { ScResourcePicker } from './ScResourcePicker';\n\nimport NoFormsFoundIcon from '../../../../../assets/noFormsFoundIcon.svg';\nimport NoSignsFoundIcon from '../../../../../assets/noSignsFoundIcon.svg';\nimport NoTablesFoundIcon from '../../../../../assets/noTablesFoundIcon.svg';\nimport NoReportsFoundIcon from '../../../../../assets/noReportsFoundIcon.svg';\nimport NoAppsFoundIcon from '../../../../../assets/noAppsFoundIcon.svg';\n\nimport NoFormsIcon from '../../../../../assets/noFormsIcon.svg';\nimport NoTablesIcon from '../../../../../assets/noTablesIcon.svg';\nimport NoReportsIcon from '../../../../../assets/noReportsIcon.svg';\nimport NoAppsIcon from '../../../../../assets/noAppsIcon.svg';\n\nimport { ITEM_TYPES, RESOURCE_TYPES } from '../../../../../constants/itemTypes';\nimport * as ACTION_CREATORS from '../../../../../store/actionCreators';\nimport SELECTORS from '../../../../../store/selectors';\nimport { useSignTemplateAction } from '../../../../../store/actionCreators';\nimport ResourcePickerWithControlBar from '../../../../../components/ResourcePickerWithControlBar';\nimport { COMPONENT_KEYS, decideElementByType } from './helper';\n\nconst resourceData = {\n [RESOURCE_TYPES.SENTBOX]: {\n resourceName: 'form',\n emptyListTitle: 'YOU DON\\'T HAVE ANY FORMS IN THE APP YET!',\n emptyListDescription: 'There should be at least one form in the app to add the Sentbox element.',\n modalTitle: 'Select Forms',\n modalDescription: 'Select the forms you want to show submissions.',\n resourcePickerType: 'form',\n notFoundIcon: NoFormsFoundIcon,\n emptyListIcon: NoFormsIcon,\n emptyListResourceType: 'form',\n dataSelector: SELECTORS.getPortalFormItems\n },\n [RESOURCE_TYPES.TABLE]: {\n resourceName: 'table',\n emptyListTitle: 'YOU DON\\'T HAVE ANY TABLES YET!',\n emptyListDescription: ' ',\n modalTitle: 'Select Tables',\n modalDescription: 'Select the tables you want to add to your app.',\n resourcePickerType: 'sheet',\n notFoundIcon: NoTablesFoundIcon,\n emptyListIcon: NoTablesIcon,\n emptyListResourceType: 'table',\n controlBar: true\n },\n [RESOURCE_TYPES.REPORT]: {\n resourceName: 'report',\n emptyListTitle: 'YOU DON\\'T HAVE ANY REPORTS YET!',\n emptyListDescription: ' ',\n modalTitle: 'Select Reports',\n modalDescription: 'Select the reports you want to add to your app.',\n resourcePickerType: 'report',\n notFoundIcon: NoReportsFoundIcon,\n emptyListIcon: NoReportsIcon,\n emptyListResourceType: 'report',\n controlBar: true\n },\n [RESOURCE_TYPES.SIGN]: {\n resourceName: 'sign',\n emptyListTitle: 'YOU DON\\'T HAVE ANY SIGNS IN THE APP YET!',\n emptyListDescription: 'There should be at least one sign in the app to add the Sentbox element.',\n modalTitle: 'Select Sign Documents',\n modalDescription: 'Select the sign document you want to add to your app.',\n resourcePickerType: 'sign',\n notFoundIcon: NoSignsFoundIcon,\n emptyListIcon: NoFormsIcon,\n emptyListResourceType: 'sign',\n confirmText: 'Add Sign Documents',\n showTemplatesOnNoResource: true,\n cloneTemplateAction: useSignTemplateAction,\n dataSelector: SELECTORS.getAvailableSignSelector\n },\n PORTAL: {\n resourceName: 'app',\n emptyListTitle: 'YOU DON\\'T HAVE ANY APPS YET!',\n emptyListDescription: ' ',\n modalTitle: 'Go to another app',\n modalDescription: 'Select another app to view, edit, or share.',\n resourcePickerType: 'app',\n notFoundIcon: NoAppsFoundIcon,\n emptyListIcon: NoAppsIcon,\n emptyListResourceType: 'portal',\n dataSelector: SELECTORS.getApps\n },\n [RESOURCE_TYPES.FORM]: {\n resourceName: 'form',\n emptyListTitle: 'YOU DON\\'T HAVE ANY FORMS YET!',\n emptyListDescription: ' ',\n modalTitle: 'Select Forms',\n modalDescription: 'Select the forms you want to add to your app.',\n resourcePickerType: 'form',\n notFoundIcon: NoFormsFoundIcon,\n emptyListIcon: NoFormsIcon,\n emptyListResourceType: 'form',\n dataSelector: SELECTORS.getForms\n }\n};\n\nconst NotFoundListPlaceholder = ({ resourceType }) => { // eslint-disable-line react/prop-types\n const { [resourceType]: { emptyListResourceType } } = resourceData;\n return (\n\n
\n )}\n {(showResourceTemplates) ? (\n {t(modalTitle)}
\n {t(modalDescription)}
\n{t(`Select Form${isMultiSelect ? 's' : ''}`)}
\n {t(`Select the form${isMultiSelect ? 's' : ''} you want to add to your ${isTeamResourcePicker() ? 'team\\'s app.' : 'app.'}`)}
\n \n);\n\nHeader.propTypes = {\n isMultiSelect: PropTypes.bool.isRequired\n};\n\nexport default Header;\n","import React, { useState, useCallback } from 'react';\nimport { PickerModal } from '@jotforminc/picker-modal';\nimport { isEnterprise } from '@jotforminc/enterprise-utils';\nimport { openFormLimitDialog } from '@jotforminc/limit-dialog';\nimport {\n arrayOf, bool, func, number, shape, string\n} from 'prop-types';\n\nimport { useDispatch, useSelector } from 'react-redux';\nimport SelectTemplate from '../../SelectTemplate';\nimport { ScFormPicker } from './ScFormPicker';\nimport ResourcePickerWithControlBar from '../../../../../components/ResourcePickerWithControlBar';\nimport SELECTORS from '../../../../../store/selectors';\nimport { onFormPickerModalConfirm, useFormCreateAction, useTemplateAction } from '../../../../../store/actionCreators';\nimport NotFoundListPlaceholder from './NotFoundListPlaceholder';\nimport Header from './Header';\nimport Footer from './Footer';\n\nconst FormPickerModal = ({\n onConfirm, onClose, isMultiSelect, initialSelectedForms, useNonPortalForms, isChangeFormAction, page, portalOrder, withClicking, ...rest\n}) => {\n const dispatch = useDispatch();\n const user = useSelector(SELECTORS.getUser);\n const forms = useSelector(useNonPortalForms ? SELECTORS.getNonPortalForms : SELECTORS.getForms);\n const [selectedForms, setSelectedForms] = useState(initialSelectedForms);\n let usedFormIDs = useNonPortalForms ? useSelector(SELECTORS.getUsedPortalFormIDs) : [];\n let hasSentbox = false;\n if (isChangeFormAction) {\n usedFormIDs = usedFormIDs.filter(id => !id.includes(initialSelectedForms));\n hasSentbox = !!useSelector(SELECTORS.getSentboxByFormID(initialSelectedForms[0]));\n }\n\n const hasForms = forms.length > 0;\n\n const getLimitInfo = userData => {\n const formUsage = userData?.usage?.form_count;\n const formLimit = userData?.account_type?.limits?.formCount;\n const belowLimits = formUsage && formLimit && parseInt(formUsage, 10) < parseInt(formLimit, 10);\n return { formUsage, belowLimits };\n };\n\n const handleSelectionChange = useCallback(selection => setSelectedForms(Array.isArray(selection) ? selection : [selection]), []);\n\n const handlePickerClose = () => {\n setSelectedForms([]);\n onClose();\n };\n\n const handleAddButtonClick = useCallback(() => {\n if (onConfirm) {\n onConfirm(selectedForms);\n } else {\n dispatch(onFormPickerModalConfirm({\n selection: selectedForms,\n page,\n portalOrder,\n withClicking\n }));\n }\n handlePickerClose();\n }, [onConfirm, selectedForms]);\n\n const handleSelectFormTemplate = cloneFormData => {\n const { belowLimits, formUsage } = getLimitInfo(user);\n\n if (!belowLimits && formUsage !== undefined) {\n handlePickerClose();\n const portalElement = document.querySelector('#modal-root');\n if (portalElement !== null && !isEnterprise()) {\n openFormLimitDialog({ user, portalRoot: document.querySelector('#modal-root') });\n }\n } else {\n dispatch(useTemplateAction({\n cloneData: {\n ...cloneFormData, source: 'APPS-FORM-ELEMENT', action: 'cloneForm', context: 'standalone'\n }\n }));\n handlePickerClose();\n }\n };\n\n const handleFormCreate = formID => {\n const { belowLimits, formUsage } = getLimitInfo(user);\n\n if (!belowLimits && formUsage !== undefined) {\n handlePickerClose();\n const portalElement = document.querySelector('#modal-root');\n if (portalElement !== null && !isEnterprise()) {\n openFormLimitDialog({ user, portalRoot: document.querySelector('#modal-root') });\n }\n } else {\n dispatch(useFormCreateAction(formID));\n handlePickerClose();\n }\n };\n\n return (\n{title}
\n {productCountsWilBeShown}
\n \n onSearchQueryChange(value)}\n value={searchQuery}\n ref={callbackRef}\n />\n {t('Clear')}\n
\n \n {filteredProductsLists.map(productList =>
\n \n {children}\n
\n );\n\n const DialogRenderer = useCallback(props => {\n return isMobile ? \n
\n {children}\n {t('Search')}
\n \n
\n);\n\nexport default HeaderRenderer;\n","import React from 'react';\nimport Styled from 'styled-components';\nimport { renderable } from '../../../../../constants/propTypes';\n\nexport const ScContentRenderer = Styled.div`\n background-color: #fff;\n padding: 0;\n margin: 0;\n top: 50%;\n left: 50%;\n position: absolute;\n transform: translate(-50%,-50%);\n width: 80%;\n border-radius: 4px;\n max-width: 824px;\n max-height: 80vh;\n height: 80vh;\n overflow-y: auto;\n\n @media screen and (max-width: 480px) {\n width: 100%;\n height: 100%;\n border-radius: 0;\n max-height: none;\n }\n`;\n\nconst ContentRenderer = ({ children }) => (\n
\n {t('View Contact Information')}
\n \n \n \n
\n);\n\nexport default HeaderRenderer;\n","import React, {\n useCallback, useEffect, useMemo, useRef, useState\n} from 'react';\nimport { Button } from '@jotforminc/magnet';\nimport {\n IconLinkDiagonal,\n IconFacebookSquareFilled,\n IconLinkedinSquareFilled,\n IconEllipsisHorizontal,\n IconCopyFilled,\n IconTwitterSquareFilled,\n IconWhatsappSquareFilled\n} from '@jotforminc/svg-icons';\nimport { t } from '@jotforminc/translation';\nimport { CopyButton } from '@jotforminc/uikit';\nimport { func, string } from 'prop-types';\nimport { shareUsingNavigator } from '@jotforminc/utils';\nimport { useDispatch, useSelector } from 'react-redux';\nimport AppModal from '../../../../components/AppModal';\nimport DialogRenderer from './DialogRenderer';\nimport HeaderRenderer from './HeaderRenderer';\nimport { getSocialMediaOptions, getSocialSharingUtmSources } from '../../utils';\nimport { checkMobileOrTablet, getAppLinkWithUTM, readURLHash } from '../../../../utils';\nimport { trackEventAction } from '../../../../store/actionCreators';\nimport SELECTORS from '../../../../store/selectors';\nimport { APP_PREVIEW_URL_HASH } from '../../../../constants';\nimport { momentToMilliSeconds } from '../../../Builder/components/Settings/utils';\n\nconst ShareAppModal = ({\n onClose, shareMessage, publicLink, appTitle, appID\n}) => {\n const ref = useRef();\n const [, setWidth] = useState(0);\n const [isCopied, setCopied] = useState(false);\n const copyButtonText = useMemo(() => (isCopied ? t('Copied to clipboard!') : t('Copy Link')));\n const copyButtonTextMobile = useMemo(() => (isCopied ? t('Copied!') : t('Copy Link')));\n const dispatch = useDispatch();\n const { updated_at: updatedAt } = useSelector(SELECTORS.getAppInfoWithDefaults);\n useEffect(() => {\n const copyTimer = setTimeout(() => {\n setCopied(false);\n }, 3e3);\n return () => clearTimeout(copyTimer);\n }, [isCopied]);\n\n const handleCopyLink = useCallback(() => {\n setCopied(true);\n dispatch(trackEventAction({ action: 'copyButtonClickedAtShareAppModal' }));\n }, []);\n\n useEffect(() => {\n if (readURLHash() !== APP_PREVIEW_URL_HASH) return;\n const handleResize = () => setWidth(window.innerWidth);\n window.addEventListener('resize', handleResize);\n return () => window.removeEventListener('resize', handleResize);\n }, []);\n\n const isMobileOrTablet = checkMobileOrTablet();\n\n const icons = {\n facebookIcon: \n
\n {t('Share This App')}
\n{t('Choose a social media platform to share this app.')}
\n \n {socialMediaOptions.map(option => {\n return (\n handleShareButtonClick(option)}\n className=\"lg:min-h-28 lg:max-w-40 w-24 h-24 inline-flex flex-col justify-center items-center shrink-0\n font-medium duration-300 outline-2 outline-transparent outline-offset-0 border\n focus:outline-opacity-50 h-10 radius border-transparent bg-transparent\n color-navy-500 hover:bg-navy-25 focus:outline-navy-50 px-3\"\n >\n {option.icon}\n \n \n
\n {!isMobileOrTablet && (\n {option.title}
\n \n );\n })}\n {isMobileOrTablet && (\n <>\n \n
\n {copyButtonTextMobile}\n \n {(window.navigator.share) && (\n \n
\n {t('More')}
\n \n )}\n \n )}\n \n
\n )}\n \n ), [isCopied, isMobileOrTablet]);\n\n return (\n \n \n {copyButtonText}\n \n
\n \n
\n \n
,\n document.body\n );\n});\n\nexport default Wrapper;\n","import React, { FunctionComponent } from 'react';\nimport { useSelector } from 'react-redux';\nimport { t } from '@jotforminc/translation';\nimport classNames from 'classnames';\nimport { IconXmark } from '@jotforminc/svg-icons';\nimport { Button } from '@jotforminc/magnet';\nimport { I_MODAL_HEADER } from '../Types';\nimport useGatewayFlows from '../Context/useGatewayFlows';\nimport { sendTrackData } from '../../../../utils';\nimport selectors from '../../../../store/selectors';\n\nconst Header: FunctionComponent\n {children}\n
\n \n \n {\n const hasChangedSettings = currentlyStep === 'select-gatewaySettings' && Object.keys(changedSettings).length > 0;\n if (hasChangedSettings) {\n setStep('discard-changes');\n setNextStepForDiscard(null);\n } else {\n sendTrackData(username, 'new_payment_modal_close_button_clicked', { resourceType, formId });\n closeModal();\n }\n }}\n startIcon={IconXmark}\n colorStyle='secondary'\n rounded\n />\n
\n );\n});\n\nexport default Header;\n","import React, { FunctionComponent } from 'react';\nimport classNames from 'classnames';\nimport { I_MODAL_BODY } from '../Types';\nimport useGatewayFlows from '../Context/useGatewayFlows';\n\nconst Body: FunctionComponent\n {leftIcon && (\n
\n \n {leftIcon}\n
\n )}\n \n {currentlyStep !== 'discard-changes' && (
\n {title}
)}\n {description && (\n{description}
\n )}\n\n {children}\n
\n );\n});\n\nexport default Body;\n","/* eslint-disable no-unused-vars */\n/* eslint-disable @typescript-eslint/no-unused-vars */\nimport React, { FunctionComponent, memo } from 'react';\nimport { t } from '@jotforminc/translation';\nimport { Button } from '@jotforminc/magnet';\nimport { useSelector } from 'react-redux';\nimport useGatewayFlows from '../Context/useGatewayFlows';\nimport { I_MODAL_FOOTER } from '../Types';\nimport { GATEWAY_PROPERTIES, GATEWAYS_PREDEFINED_TEST } from '../Constants/GatewayProperties';\nimport { deleteConnectionToReusable } from '../../../../api';\nimport { checkIsGatewayConnected, isYes, sendTrackData } from '../../../../utils';\nimport selectors from '../../../../store/selectors';\n\nconst Footer: FunctionComponent\n
\n );\n};\n\nexport default memo(Footer);\n","import React, { useState, ChangeEvent } from 'react';\nimport {\n IconCreditCardFilled,\n IconMagnifyingGlass,\n IconXmark\n} from '@jotforminc/svg-icons';\nimport { Button } from '@jotforminc/magnet';\nimport { t, translationRenderer } from '@jotforminc/translation';\nimport { C_GATEWAYS } from '../Constants';\nimport { I_APM_ELEMENT_TYPES } from '../Types';\nimport * as Modal from '../Items';\nimport useGatewayFlows from '../Context/useGatewayFlows';\n\nconst PaymentGateways = (): JSX.Element => {\n const {\n selectGateway,\n selectApm,\n currentlyGateway,\n resourceType\n } = useGatewayFlows();\n const [filteredList, setFilteredList] = useState(C_GATEWAYS);\n const [searchKey, setSearchKey] = useState\n {leftSide()}\n {rightSide()}\n
\n \n {\n setSearchKey('');\n setFilteredList(C_GATEWAYS);\n }}\n variant='ghost'\n colorStyle='neutral'\n size='small'\n startIcon={IconXmark}\n className='max-h-4'\n />\n )\n }\n
\n {filteredList.length > 0 ? (\n \n {filteredList.filter(gateway => gateway.resourceTypes.includes(resourceType)).map(data => {\n return (\n {\n if (data.nameAPMType && data.nameAPMType === 'appleAndGooglePay') {\n selectApm(data.type as I_APM_ELEMENT_TYPES);\n } else {\n selectGateway(data.type);\n }\n }}\n type='button'\n key={data.type}\n className={`w-full h-auto radius border hover:border-blue-500 ${currentlyGateway === data.type ? 'border-blue-500 bg-blue-100' : 'border-navy-100'}`}\n >\n
\n ) : (\n \n {data.icon &&
\n \n );\n })}\n {data.name}
\n\n
\n )}\n \n \n {t('Oops, No Result Found')}\n
\n\n {translationRenderer('Sorry we could not find any results for [1[{keyword}]] in our gateway list.')({\n renderer1: () => (\n \n {`\"${searchKey}\"`}\n \n )\n })}\n
\n\n {\n setChangedSettings({ ...changedSettings, [data.key]: data.value });\n }}\n />\n );\n })\n }\n {\n modeSettings && !isModeSectionHidden && (\n
\n {!isCurrencySupported.isSupported && (\n \n
\n {\n connSectionProperties && connSectionProperties.map(prop => {\n return (\n \n
\n {\n isOauth\n ? (\n \n {connectionSettingsLabel}\n {\n isMasked && (\n
\n 640 ? '' : 'Bottom'}\n hideArrow\n tooltipDistance={width > 640 ? '4px' : '2px'}\n style={{\n zIndex: 999999,\n width: width > 640 ? '360px' : '272px',\n fontSize: '14px',\n lineHeight: '14px',\n backgroundColor: '#0a1551',\n padding: '8px 12px'\n }}\n >\n {t('Your gateway\\'s credentials are partially hidden due to security reasons.')}\n \n
\n )\n }\n \n \n {connectionSettingsDesc}\n
\n\n
\n )\n : (\n connectionSectionVisible && (\n \n {\n connectionFields.map(({\n key,\n label,\n hideCondition,\n type,\n staticKey,\n isSensitiveField\n }) => {\n const defaultValue = isEdit ? gatewayQuestionProps[key] : changedSettings[key];\n const isHidden = hideCondition && hideCondition(staticSettings);\n if (isHidden) {\n return null;\n }\n const CredentialComponent = (isMasked && isSensitiveField !== false) ? Credential : NewTextInput;\n const sensitiveContainerClass = 'sm:max-w-68 md:max-w-84 lg:max-w-96';\n const credentialContainerClass = 'sm:max-w-56 md:max-w-72 lg:max-w-84';\n const notSensitiveWhenMasked = isMasked && isSensitiveField === false;\n return (\n
\n )\n )\n }\n \n \n {t(label)}\n *\n \n {\n type === 'dropdown' ? (\n { setChangedSettings({ ...changedSettings, [key]: val }); }}\n inputClass=\"w-full\"\n dropdownWrapperClass=\"portal-new-dropdown-wrapper\"\n />\n ) : (\n setChangedSettings({ ...changedSettings, [key]: val })}\n defaultValue={defaultValue}\n />\n )\n }\n
\n );\n })\n }\n \n \n {t('Test mode is enabled for this payment.')}\n \n \n {t('If you change your mode type, you’ll need to reconnect to your payment gateway.')}\n \n
\n )\n }\n {\n modeTypeProperties && (\n \n
\n \n {t('Enable Test Mode')}\n
\n\n {t('Use Test Mode to process simulated payments before going live.')}\n
\n\n
\n \n
\n )}\n {\n additionalSettings && !hideAdditionalSettings && (\n <>\n \n {\n setChangedSettings({ ...changedSettings, [data.key]: data.value });\n }}\n />\n
\n \n )\n }\n \n {\n C_PAYMENT_TYPES.map(data => {\n const isAllowType = currentlyGatewayProperties.paymentTypes?.includes(data.type);\n return (\n selectPaymentType(data.type)}\n type='button'\n key={data.type}\n data-paymenttype={data.type}\n className={classNames(\n `w-full h-auto radius border hover:border-blue-400 hover:bg-navy-25 ${currentlyPaymentType === data.type ? 'border-blue-400 bg-navy-25' : 'border-navy-75'}`,\n {\n 'cursor-not-allowed order-last jfTooltipNew-hoverTarget relative': !isAllowType\n }\n )}\n disabled={!isAllowType}\n >\n \n {!isPurchaseOrder ? t('This payment type is not available for this gateway') : t('You must integrate with a payment gateway to select this option')}\n \n )\n }\n \n );\n })\n }\n
\n \n
\n {\n !isAllowType && (\n {data.icon &&
\n \n \n {t(data.name)}\n \n
\n \n \n {t(data.description)}\n \n
\n \n {t('Our Apple Pay and Google Pay integration is powered by Square and Stripe Checkout. '\n + 'Credit card will also be offered as a payment option in case the user is on a device or browser that doesn\\'t support Apple Pay or Google Pay.')}\n
\n{t('Select a gateway')}
\n\n {currentlyApmProperties.childTypes?.map(type => {\n return C_GATEWAYS.filter(data => data.type === type).map(gateway => {\n return (\n selectGateway(gateway.type, currentlyApmProperties)}\n type='button'\n key={gateway.type}\n className={`w-full h-auto radius border hover:border-blue-500 ${currentlyGateway === gateway.type ? 'border-blue-500 bg-blue-100' : 'border-navy-100'}`}\n >\n
\n \n { gateway.type === 'control_square' &&
\n \n );\n });\n })}\n \n
\n {t('Continue without saving your configuration?')}
\n{t('Any unsaved changes will be lost.')}
\n\n\n
\n );\n}\n","import React from 'react';\nimport { t, translationRenderer } from '@jotforminc/translation';\nimport { IconInfoCircleFilled } from '@jotforminc/svg-icons';\n\n/** Data */\nimport { supportedGatewayConnectionPropsList, gatewayDefaultIcons } from '@jotforminc/payment-constants';\n\n/** Context */\nimport { useGatewayConnection } from '../../../context';\n\n/**\n * Renders a gateway picker for Apple Pay & Google Pay integration.\n *\n * This component displays a list of supported gateways for Apple Pay & Google Pay integration.\n * It includes an icon, name, and information about the integration. Users can select a gateway from the list.\n *\n * @returns {React.ReactElement} The rendered gateway picker component\n */\nexport function ApmGatewayPicker(): any {\n const {\n selectedChildGatewayType, currentlyGatewayProperties, backStep, changeChildSelectedGateway\n } = useGatewayConnection();\n\n if (!currentlyGatewayProperties) {\n backStep();\n return null;\n }\n\n const {\n isChildTypes, childTypes, name, gateway_type: GatewayType\n } = currentlyGatewayProperties;\n const Icon = gatewayDefaultIcons[GatewayType] as React.FunctionComponent\n \n ) => {\n setSearchKey(e.target.value || null);\n // log entry\n if (e.target.value !== '') { logPaymentEventDebounced('search-gateways', e.target.value); }\n }}\n value={searchKey || ''}\n data-test-id=\"gateway_search_input\"\n />\n {searchKey && (\n \n
\n\n {gatewayList().length > 0 ? (\n \n setSearchKey(null)} />\n
\n )}\n \n\n \n {gatewayList().map(gateway => {\n const Icon = gatewayDefaultIcons[gateway.gateway_type] as React.FunctionComponent>;\n\n return (\n changeSelectedGateway(gateway.gateway_type)}\n data-test-id={`gateway_picker_${gateway.gateway_type}`}\n >\n {isDevelopment() && gateway.env === 'development' && (\n \n {t('Only Devs')}\n \n )}\n\n {isDevelopment() && gateway.isDeprecated && (\n \n {t('Deprecated!')}\n \n )}\n\n
\n ) : (\n \n
\n \n );\n })}\n \n \n
\n \n
\n {gateway.name}
\n\n \n {\n setOpenRequestModal(true);\n }}\n data-test-id=\"request_payment_gateway\"\n >\n {t('Request payment gateway')}\n \n )}\n\n {!isEnterprise() && openRequestModal && (\n setOpenRequestModal(false)}\n onCompleteRequest={() => setSearchKey(null)}\n searchedKeyword={searchKey}\n user={user || null}\n userLocation={userLocation}\n modalSource={modalSource || resourceType}\n resourceId={resourceId || null}\n />\n )}\n
\n )}\n {t('No results found.')}
\n \n {t('Sorry, we couldn’t find what you’re looking for in our gateway list.')}\n \n\n {!isEnterprise() && (\n\n
\n \n );\n}\n","import { t } from '@jotforminc/translation';\nimport type { GATEWAY_NEW_CONNECTION_ERROR_TYPES } from '../../types';\n\n/**\n * Returns a user-friendly error message based on the provided gateway error type.\n *\n * @param messageType - The type of the gateway error.\n * @param connectionInvalidCredentialMessages - Optional custom message for invalid credentials.\n * @returns A string containing the user-friendly error message.\n */\nexport const getGatewayErrorMessage = (\n messageType: GATEWAY_NEW_CONNECTION_ERROR_TYPES,\n connectionInvalidCredentialMessages?: string | null\n): string => {\n switch (messageType) {\n case 'missingRequiredFields':\n return t('You have to fill all required fields.');\n case 'invalidCredentials':\n return connectionInvalidCredentialMessages || t('Your credentials are invalid.');\n case 'notUniqueConnectionName':\n return t('You already have a connection with this connection name.');\n case 'notUniqueConnection':\n return t('You already have a connection with these credentials.');\n case 'invalidFields':\n return t('Some fields are invalid. Please check and try again.');\n case 'invalidGateway':\n return t('Something went wrong. Please try again later. #E00IGT');\n case 'rateLimiter':\n return t('Because of too many failed attempts connection creation is temporarily disabled. Try again later.');\n case 'invalidEmailAddress':\n return t('The format of your email address is not correct.');\n case 'credentialsNotSame':\n return t('Changing the credentials of this payment connection will affect your connected assets. Reconnect using the same credentials as before.');\n default:\n return t('Something went wrong. Please try again later.');\n }\n};\n","/* eslint-disable max-len */\n/* eslint-disable complexity */\nimport React from 'react';\nimport { t, translationRenderer } from '@jotforminc/translation';\nimport type { GATEWAY_CONNECTION_MODE_INFORMATION } from '../../../types';\n\nconst ExternalLink: React.FC<{ href: string; children: React.ReactNode }> = ({ href, children }) => (\n \n {/* header */}\n\n
\n \n
\n\n {/* body: child gateway list */}\n \n {/* left */}\n
\n {/* Information */}\n \n
\n \n
\n \n
\n \n
\n {name}
\n \n
\n \n {isChildTypes && (\n
\n \n \n {t('Select Gateway')}\n {' '}\n *\n \n
\n )}\n \n {isChildTypes === true && childTypes && childTypes.map(childType => {\n const { gateway_type: Gateway, name: ChildGatewayName } = supportedGatewayConnectionPropsList[childType];\n const ChildIcon = gatewayDefaultIcons[Gateway] as React.FunctionComponent>;\n\n return (\n changeChildSelectedGateway(Gateway)}\n data-test-id={`child_gateway_${Gateway}`}\n >\n
\n );\n })}\n \n
\n {ChildGatewayName}\n \n
\n);\n\nexport const LoginFlowColumn = (): any => {\n const firstRow = [\n { logo: LogoAuthorizenetColor },\n { logo: LogoStripeDark, width: 'w-14' },\n { logo: LogoPaypalColor }\n ];\n\n const secondRow = [\n { logo: LogoBraintreeDark },\n { logo: LogoCardconnectColor },\n { logo: LogoSquareDark, width: 'w-18' },\n {\n logo: LogoEwayDark, width: 'w-11', marginTop: 'mt-2'\n }\n ];\n\n const thirdRow = [\n { logo: LogoVenmoDark, width: 'w-12' },\n { logo: LogoMollieDark, width: 'w-12' },\n { logo: LogoCybersourceDark },\n { logo: LogoPayjunctionColor }\n ];\n\n return (\n \n {Logo &&
\n \n {/* first row */}\n\n
\n );\n};\n","import React from 'react';\nimport { t } from '@jotforminc/translation';\nimport { LoginFlow } from '@jotforminc/login-flow';\n\n/** context */\nimport { useGatewayConnection } from '../../../context';\n\n/** types */\nimport type { LOGGED_USER } from '../../../types';\n\n/** components */\nimport { LoginFlowColumn } from './loginFlowColumn';\n\n/**\n * CommonLoginFlow component provides a general flow for user login and registration.\n *\n * This component creates a customized login flow using the LoginFlow component\n * from the @jotforminc/login-flow package. It displays the login flow in a\n * multi-column modal and uses customized button names for various login methods.\n *\n * When a user successfully logs in, it:\n * - Saves connection data before login.\n * - Updates the logged-in user information.\n * - Closes the modal.\n * - Reloads the page if the resource type is 'APP' or 'FORM'.\n *\n * @component\n * @param {Object} props\n * @param {() => void} props.onClose - Function used to close the modal\n *\n * @example\n * \n
\n \n
\n \n
\n \n {secondRow.map(gateway => GatewayLogoCard(gateway))}\n
\n \n {thirdRow.map(gateway => GatewayLogoCard(gateway))}\n
\n \n
\n Connect with more than 40 payment gateways
\nTurn your form into a powerful payment tool to collect online payments
\n\n \n \n ) => {\n changeConnectionInputValue({\n [name as PAYMENT_QUESTION_PROP_NAMES]: e.target.value || ''\n });\n }}\n onBlur={(e: React.ChangeEvent) => {\n if (connectionErrorTypes?.includes('missingRequiredFields') && connectionErrorInputErrors[name] && e.target.value !== '') {\n removeInputError(name);\n }\n }}\n data-test-id={name}\n />\n \n
\n );\n case 'toggle':\n if (!toggleProps) {\n return null;\n }\n\n const { defaultValue, enabled, disabled } = toggleProps;\n\n return (\n \n
\n );\n default:\n return null;\n }\n });\n};\n","/* eslint-disable complexity */\n/* eslint-disable jsx-a11y/label-has-associated-control */\n/* eslint-disable max-len */\nimport React, { useState } from 'react';\nimport { t, translationRenderer } from '@jotforminc/translation';\nimport {\n Button, FormControl, InputText, Badge\n} from '@jotforminc/magnet';\nimport {\n IconPlugFilled,\n IconCheck,\n IconExclamationCircleFilled,\n IconCircleSmFilled,\n IconInfoCircleFilled,\n IconCheckCircleFilled\n} from '@jotforminc/svg-icons';\n\n/** Data */\nimport { gatewayDefaultIcons, supportedGatewayConnectionPropsList } from '@jotforminc/payment-constants';\n\n/** Context */\nimport { useGatewayConnection } from '../../../context';\n\n/** Utils */\nimport { getGatewayConnectionPropReferences, getGatewayErrorMessage } from '../../../utils/functions';\n\n/** Components */\nimport { gatewayModeInformation } from '../core/gatewayModeInformation';\nimport { CommonLoginFLow } from '../core/commonLoginFlow';\nimport { RenderCredentialInputs } from '../core/renderCredentialInputs';\n\n/** Styles */\nimport '../assets/style.css';\n\nconst UnPlugIcon = () => (\n \n {\n changeConnectionInputValue({\n [name as PAYMENT_QUESTION_PROP_NAMES]: value || ''\n });\n }}\n />\n
\n \n \n {inputLabels?.label}\n \n \n {inputLabels?.description}\n {inputLabels?.learnMoreLink && (\n Learn more.\n )}\n \n
\n \n\n {/* header */}\n
\n );\n}\n","import React from 'react';\nimport { Badge } from '@jotforminc/magnet';\nimport { IconUserFilled } from '@jotforminc/svg-icons';\n\ninterface I_RESOURCEOWNERBADGE {\n ownerFullname: string;\n additionalClass: string;\n ownerUsername: string;\n}\n\nconst COLOR_CLASS_LIST = [\n 'bg-navy-300',\n 'bg-blue-600',\n 'bg-red-400',\n 'bg-green-600',\n 'bg-orange-600',\n 'bg-purple-600',\n 'bg-tables-dark',\n 'bg-sign-dark',\n 'bg-reports-dark',\n 'bg-pdf-dark',\n 'bg-pages-dark',\n 'bg-inbox-dark',\n 'bg-apps-dark',\n 'bg-approvals-dark',\n 'bg-analytics-dark'\n];\n\n/* eslint-disable no-bitwise */\nfunction simpleHash(str: string) {\n let hash = 0;\n for (let i = 0; i < str.length; i++) {\n hash = (hash << 5) - hash + str.charCodeAt(i);\n hash |= 0;\n }\n return Math.abs(hash);\n}\n/* eslint-enable no-bitwise */\n\nconst getColorClass = (ownerUsername: string) => {\n return COLOR_CLASS_LIST[simpleHash(ownerUsername) % COLOR_CLASS_LIST.length];\n};\n\n/**\n * Renders a badge displaying the resource owner's information.\n *\n * This component creates a customized badge with the owner's full name and a color-coded background.\n * The background color is determined by a hash of the owner's username for consistent, unique coloring.\n *\n * @param {Object} props - The component props\n * @param {string} props.ownerFullname - The full name of the resource owner\n * @param {string} props.additionalClass - Additional CSS classes to apply to the badge\n * @param {string} props.ownerUsername - The username of the resource owner (used for color determination)\n * @returns {React.ReactElement} The rendered badge component\n */\nexport function ResourceOwnerBadge({\n ownerFullname,\n additionalClass = '',\n ownerUsername\n}: I_RESOURCEOWNERBADGE): any {\n return (\n \n
\n\n {/* body */}\n \n {/* left */}\n
\n {/* Information */}\n {getInformationMessage() && (\n \n
\n {/* right */}\n {connectionProperties.allowSwitchMode && connectionProperties.mode.options && (\n \n
\n \n
\n \n \n {connectionState === 'connected' ? t('Connected') : t('Not connected')}\n \n
\n {name}
\n \n {connectionProperties.mode.options.map(option => {\n return (\n {\n if (connectionState === 'connected' && connectionMode !== option.value) {\n showOrHideDiscardNewConnectionDialog('changeMode');\n changeDiscardedConnectionMode(option.value);\n return;\n }\n\n changeConnectionMode(option.value);\n }}\n data-test-id={`connection_mode_${option.value}`}\n >\n {option.text}\n \n );\n })}\n
\n )}\n {!connectionProperties.allowSwitchMode && (\n \n \n {t('Live Mode')}\n \n
\n )}\n \n
\n )}\n \n {/* connection name */}\n \n \n ) => {\n const inputValue = e.target.value;\n if (inputValue.length > 40) {\n setIsValidConnectionName(false);\n } else {\n setIsValidConnectionName(true);\n changeConnectionName(inputValue);\n }\n }}\n onBlur={(e: React.ChangeEvent) => {\n if (!isValidConnectionName) {\n setIsValidConnectionName(true);\n }\n\n if (connectionErrorTypes?.includes('missingRequiredFields') && connectionErrorInputErrors.connectionName && e.target.value !== '') {\n removeInputError('connectionName');\n }\n\n if (connectionState !== 'connected' && connectionState === 'idle' && e.target.value !== '') {\n checkUniqueConnectionNameOnBlur(e.target.value);\n }\n }}\n data-test-id=\"connection_name\"\n />\n {connectionState !== 'connected' && (\n {\n if (isGuestUser) {\n setIsOpenLoginFlow(true);\n return;\n }\n\n if (connectionState === 'connected') {\n showOrHideDiscardNewConnectionDialog('disconnect');\n return;\n }\n\n connectionButtonHandler();\n }}\n data-test-id=\"connection_button\"\n >\n {connectionButtonDefaultLabel()}\n \n\n {\n connectionError && connectionErrorTypes && (\n setIsOpenLoginFlow(false)} />\n )}\n
\n {/* body: end */}\n\n \n \n {connectionName?.length || 0}\n /40\n \n
\n )}\n \n\n {/* credentials */}\n {connectionProperties.type === 'credentials' && getConnectionProps && (\n \n
\n )}\n\n {/* warning for 3D secure 2.0 */}\n {connectionProperties.isSecure3DSupport && (\n \n
\n )}\n\n {/* connect button */}\n \n
\n )\n }\n {\n connectionState && connectionState === 'connected' && (\n \n
\n {\n connectionErrorTypes.length > 1 && (\n \n {connectionErrorTypes.map(errorType => (\n \n \n
\n \n
\n
\n )\n }\n {\n (\n currentlyFlow === 'EDIT_CONNECTION' || currentlyFlow === 'RE_CONNECT') && connectionProperties.isChargeLaterSupport && (\n \n
\n )\n }\n {isGuestUser && (\n \n setIsOpenLoginFlow(true)}\n data-test-id=\"sign_up_button\"\n >\n {t('Sign Up Now')}\n {' '}\n -\n {' '}\n {t('It’s Free!')}\n \n
\n )}\n {/* login flow */}\n {isOpenLoginFlow && (\n \n
\n \n
\n )\n }\n\n {/* connect button */}\n\n \n {isShowSearch && (\n \n ) => {\n setSearchKey(e.target.value || null);\n // log entry\n if (e.target.value !== '') { logPaymentEventDebounced('search-connections', e.target.value); }\n }}\n value={searchKey || ''}\n data-test-id='connection_search'\n />\n {searchKey && (\n \n )}\n
\n\n {\n searchKey && connectionListData.length === 0 ? (\n \n setSearchKey(null)} />\n
\n )}\n \n \n
\n ) : (\n {t('No results found.')}
\n \n {t('Sorry, we couldn’t find what you’re looking for in your connection list.')}\n \n\n {\n !connectionListData || connectionListData.length === 0 ? (\n >;\n const viaGateway = childGatewayType ? supportedGatewayConnectionPropsList[childGatewayType].name : null;\n const isShowSubUserOwnerBadged = scope === 'user' && subuser === true && user && scopeName !== user.username;\n const isShowTeamConnectionBadged = scope === 'team';\n const isShowOrganizationConnectionBadged = scope === 'org';\n\n return (\n {\n if (inUse === true || disabled === true) {\n return;\n }\n\n selectConnection(selectedConnectionId === id ? null : id);\n }}\n data-test-id={`connection_${id}`}\n >\n
\n );\n })\n }\n \n changeStep('gatewayPicker')}\n className='mx-auto mb-4 cursor-pointer'\n />\n\n
\n ) : connectionListData.map(connection => {\n const {\n id,\n gateway,\n title,\n sandbox,\n assetCount = 0,\n parent_gateway: childGatewayType,\n inUse = false,\n disabled = false,\n disabled_reason: disabledReason = null,\n resources,\n scope,\n subuser,\n scope_name: scopeName,\n scope_fullname: scopeFullName,\n status,\n secure3d_support: secure3DSupport,\n is_gateway_disabled: isGatewayDisabledInEnterprise = false\n } = connection;\n const Icon = gatewayDefaultIcons[gateway] as React.FunctionComponent{t('Connect with your favorite payment gateways!')}
\n \n {t('The connections you add will be listed here.')}\n \n\n
\n \n
\n \n {title}\n {\n isShowSubUserOwnerBadged && scopeFullName && (\n \n
\n \n {\n (status === '3' || status === '5') && (\n <>\n \n {status === '3' && {\n e.stopPropagation();\n\n const reformatResources: CONNECTION_LIST_RESOURCE_DATA[] = [];\n Object.values(resources).forEach(subArray => {\n subArray.forEach(item => {\n reformatResources.push(item);\n });\n });\n setResourcesListDialogTitle(title);\n setResourcesListConnectionId(id);\n setConnectionResourcesDialogData(reformatResources);\n setIsOpenConnectionResourcesListDialog(true);\n }}\n data-test-id={`connection_resources_${id}`}\n >\n \n {\n translationRenderer('via [1[{viaGateway}]]')({\n renderer1: () => viaGateway\n })\n }\n \n \n )}\n {secure3DSupport && (\n \n \n {t('3D Secure Enabled')}\n \n \n )}\n
\n \n {\n inUse && inUse === true ? (\n \n {t('In Use')}\n \n ) : connectedId === id && (\n \n {t('New')}\n \n )\n }\n {selectedConnectionId === id && (
\n \n {isShowAddNewConnectionButton() && (\n changeStep('gatewayPicker')}\n data-test-id='add_new_connection'\n >\n {t('Add New Connection')}\n \n )}\n
\n\n {/* resource list dialog */}\n {\n isOpenConnectionResourcesListDialog\n && connectionResourcesDialogData && (\n \n
\n );\n })}\n {connectionResourcesDialogData.length > 4 && (\n \n {getIcon(resource.type)}\n {resource.title}\n
\n {\n showOwnerBadge && (\n \n {\n translationRenderer('+ [1[{count}]] more')({\n renderer1: () => connectionResourcesDialogData.length - 4\n })\n }\n
\n )}\n \n
\n )\n }\n {\n connectionFooterError && ['EDIT_CONNECTION', 'RE_CONNECT'].includes(currentlyFlow) && (\n \n \n {text}\n \n )\n })\n }\n \n
\n \n
\n )\n }\n {\n (\n currentlyFlow === 'GATEWAY_TO_CONNECTION'\n || currentlyFlow === 'EDIT_CONNECTION'\n || currentlyFlow === 'RE_CONNECT'\n || currentlyFlow === 'FORM_CONNECTION_DEPENDENT_AUTO_FLOW'\n ) && !isShowBackButton && ()\n }\n \n
\n {\n hasRequiredProp && (\n \n \n
\n \n
\n \n
\n {FromGatewayName}\n {currentlyConnection.title}\n \n {currentlyConnection.sandbox === '0' ? t('Live') : t('Test') }\n \n \n
\n \n
\n \n
\n {ToGatewayName}\n {getSelectedConnection.title}\n \n {getSelectedConnection.sandbox === '0' ? t('Live') : t('Test') }\n \n \n
\n )\n }\n \n );\n };\n\n const getDetail: Partial<{\n [key in GATEWAY_CONNECTION_DISCARD_TYPES]: {\n title: string;\n description: React.ReactNode | string | null;\n }\n }> = {\n changeMode: {\n title: t('Do you want to change your payment mode?'),\n description: changeModeDescription()\n },\n disconnect: {\n title: t('Do you want to disconnect from this gateway?'),\n description: null\n },\n backOrClose: {\n title: t('Do you want to continue without saving?'),\n description: backOrCloseDescription()\n },\n switchGateway: {\n title: t('Do you want to switch your payment connection?'),\n description: switchGatewayDescription()\n }\n };\n\n const discardText = (): string => {\n if (currentlyFlow === 'EDIT_CONNECTION' || currentlyFlow === 'RE_CONNECT') {\n return t('Yes, Continue');\n }\n\n if (connectionDiscardType && connectionDiscardType === 'switchGateway') {\n return t('Yes, Switch');\n }\n\n return t('Yes, Continue');\n };\n\n const { title, description } = getDetail[connectionDiscardType] as OBJECT_DETAIL;\n\n return (\n \n {t(title)}\n
\n )}\n {desc && {t(desc)}}\n\n {children}\n
\n);\n\nDialogRenderer.propTypes = {\n children: node.isRequired\n};\n\nconst ContentRenderer = ({ children }) => (\n \n
\n);\n\nContentRenderer.propTypes = {\n children: node.isRequired\n};\n\nconst HeaderRenderer = forwardRef(({ iframeLoaded }, uikitModalRef) => {\n if (!iframeLoaded) return <>;\n\n return (\n \n );\n});\n\nHeaderRenderer.propTypes = {\n iframeLoaded: bool.isRequired\n};\n\nexport const ExitIntentSurveyModal = ({ username, appID, onClose }) => {\n const uikitModalRef = useRef(null);\n const [iframeLoaded, setIframeLoaded] = useState(false);\n\n return (\n {children}
\n \n
\n );\n};\n\nExitIntentSurveyModal.propTypes = {\n appID: string.isRequired,\n username: string.isRequired,\n onClose: func\n};\n\nExitIntentSurveyModal.defaultProps = {\n onClose: () => { }\n};\n","import React, { createContext, useContext, useState } from 'react';\nimport { element } from 'prop-types';\n\nconst SharedStateContext = createContext();\n\nexport const useSharedState = () => {\n return useContext(SharedStateContext);\n};\n\nexport const SharedStateProvider = ({ children }) => {\n const [sharedState, setSharedState] = useState({});\n\n return (\n \n {!iframeLoaded && (\n {\n setIframeLoaded(true);\n const externalStyles = document.getElementById('externalStyles');\n e.target.contentWindow.document.querySelector('head').append(externalStyles);\n window.parent.scrollTo(0, 0);\n }}\n />\n
\n \n \n \n
\n \n
\n \n {\n column.id === COLUMN_IDS.SELECTION_COLUMN && (
\n {column?.items?.map((item, index) => {\n return (\n \n
\n )\n }\n \n
\n )}\n \n {text}\n
\n \n {\n isItemAdded &&
\n \n );\n }}\n \n );\n};\n\nSelectionItem.propTypes = {\n item: object.isRequired,\n index: number.isRequired,\n setColumns: func.isRequired,\n columns: object.isRequired\n};\n\nexport default SelectionItem;\n","/* eslint-disable jsx-a11y/click-events-have-key-events */\nimport { IconXmark, IconGridDotsVertical } from '@jotforminc/svg-icons';\nimport React from 'react';\nimport { Draggable } from 'react-beautiful-dnd';\nimport { func, number, object } from 'prop-types';\nimport { COLUMN_IDS, ICONS_WRT_COLUMN_TYPE } from './constants';\n\nconst SelectedItem = ({\n item, index, setColumns\n}) => {\n const { text, qid, type } = item;\n const removeItem = (e, itemID) => {\n setColumns(prev => {\n const newSelectedItems = prev[COLUMN_IDS.SELECTEDS_COLUMN].items.filter(({ qid: prevSelectedItemID }) => prevSelectedItemID !== itemID);\n\n return {\n ...prev,\n [COLUMN_IDS.SELECTEDS_COLUMN]: { ...prev[COLUMN_IDS.SELECTEDS_COLUMN], items: newSelectedItems }\n };\n });\n };\n\n const Icon = ICONS_WRT_COLUMN_TYPE[type];\n\n return (\n \n
\n )}\n \n {text}\n
\n \n
\n removeItem(e, qid)}>\n
\n \n );\n }}\n \n );\n};\n\nSelectedItem.propTypes = {\n item: object.isRequired,\n index: number.isRequired,\n setColumns: func.isRequired,\n columns: object.isRequired\n};\n\nexport default SelectedItem;\n","import React from 'react';\nimport { DragDropContext } from 'react-beautiful-dnd';\nimport { Flex } from '@jotforminc/magnet';\nimport Column from './Column';\nimport { stepPropTypeDefaults, stepPropTypes } from '../../constants';\nimport SelectionItem from './SelectionItem';\nimport SelectedItem from './SelectedItem';\nimport { COLUMN_IDS } from './constants';\n\nconst SelectionDnd = ({ columns, setColumns }) => {\n const onDragEnd = result => {\n if (!result.destination) return;\n const { source, destination } = result;\n\n if (\n (\n source.droppableId === COLUMN_IDS.SELECTION_COLUMN\n && source.droppableId === destination.droppableId\n )\n ) {\n return;\n }\n\n // prevent item move from selected column to selection column\n // and remove the moved item\n if (source.droppableId === COLUMN_IDS.SELECTEDS_COLUMN && destination.droppableId === COLUMN_IDS.SELECTION_COLUMN) {\n const sourceColumn = columns[source.droppableId];\n const sourceItems = [...sourceColumn.items];\n sourceItems.splice(source.index, 1);\n setColumns(prev => ({\n ...prev,\n [source.droppableId]: {\n ...sourceColumn,\n items: sourceItems\n }\n }));\n return;\n }\n\n if (source.droppableId !== destination.droppableId) {\n const sourceColumn = columns[source.droppableId];\n const destColumn = columns[destination.droppableId];\n const sourceItems = [...sourceColumn.items];\n const destItems = [...destColumn.items];\n const sourceItem = sourceItems[source.index];\n\n // check item is already added\n if (destItems.some(destItem => destItem.qid === sourceItem.qid)) {\n return;\n }\n\n destItems.splice(destination.index, 0, sourceItem);\n\n setColumns({\n ...columns,\n [source.droppableId]: {\n ...sourceColumn,\n items: sourceItems\n },\n [destination.droppableId]: {\n ...destColumn,\n items: destItems\n }\n });\n } else {\n const column = columns[source.droppableId];\n const copiedItems = [...column.items];\n const [removed] = copiedItems.splice(source.index, 1);\n copiedItems.splice(destination.index, 0, removed);\n setColumns({\n ...columns,\n [source.droppableId]: {\n ...column,\n items: copiedItems\n }\n });\n }\n };\n\n return (\n \n \n \n {t('Create Table')}\n \n \n
\n );\n\n return (\n <>\n \n
\n \n \n {getLastUpdatedText(updatedAt, userTimezone)}\n \n \n )\n }\n
\n {resourceTitle}
\n {\n updatedAt\n && (\n \n\n
\n \n
\n \n
\n {t('Some forms couldn’t be cloned')}
\n{t('Since the app owner restricted cloning for some forms, these forms may be missing from your app.')}
\n\n
\n );\n};\n\nSettingsPanelWrapper.propTypes = {\n listClasses: string,\n listWrapperClasses: string,\n children: node\n};\n\nSettingsPanelWrapper.defaultProps = {\n listClasses: null,\n listWrapperClasses: null,\n children: null\n};\n\nexport default SettingsPanelWrapper;\n","import React from 'react';\nimport { bool, elementType, string } from 'prop-types';\nimport { Badge, Indicator } from '@jotforminc/magnet';\nimport { IconExclamation } from '@jotforminc/svg-icons';\nimport classNames from 'classnames';\n\nconst SettingsPanelListNavigation = ({\n badgeText, customBadgeText, badgeType, badgeClass, indicatorClass, description, hasError, icon: Icon, label, listNavigationClasses, showMsLaunchBadge, BadgeComponent, subLabel, ...props\n}) => {\n return (\n - \n {children}\n
\n handleLocationChange(pathname)}>\n {!window.isStandaloneWithSlug && \n \n \n \n ) : (\n \n \n \n {window.isStandaloneWithSlug && window.appID ? (\n \n \n
\n );\n};\n\nexport default withFeatureToggles()(withStore(App));\n","import '@jotforminc/router-bridge/init';\nimport '@jotforminc/tracking/init';\n// Open to use WDYR\n// import './wdyr';\nimport '@jotforminc/jotform.css';\nimport '@jotforminc/jotform.css/reset.css';\nimport React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport App from './App';\n\nconst container = document.getElementById('root');\nconst root = createRoot(container);\nroot.render(\n
\n {children}
, [formTitle || title]);\n const IconRenderer = useCallback(() => \n \n \n { onColorChange({ color }); }}\n />\n \n \n \n { onColorChange({ bgColor: color }); }}\n />\n \n {\n !isValueDefault && (value?.url || value?.svgRef)\n ? (\n }\n />\n )\n : (\n \n { setIsFileUploadButtonVisible(true); }}\n removeButtonText={t('Close')}\n allowShuffle={false}\n uniqKey={`iconselector-${id}`}\n />\n \n )\n }\n
\n );\n};\n\nIconSelector.propTypes = {\n value: propTypes.object,\n onChange: propTypes.func,\n colorScheme: propTypes.object,\n id: propTypes.string,\n defaultSelection: propTypes.object\n};\n\nIconSelector.defaultProps = {\n value: undefined,\n onChange: f => f,\n colorScheme: {},\n id: '',\n defaultSelection: {}\n};\n\nexport default IconSelector;\n","import React from 'react';\nimport { DEFAULT_OPTIONS } from '../MultiSectionSelect/helper';\nimport { OPTION_VALUES, PROP_TYPES, SIDE_SELECTION_DEFAULTS } from './constants';\nimport IconSelector from './subSelections/IconSelector';\nimport Image from './subSelections/Image';\nimport { VALUE_BOUNDED_OPTIONS } from '../../../../../../components/ListItemBase/helper';\nimport TextInput from '../../../TextInput';\nimport DataSourcePicker from '../DataSourcePicker';\nimport { DATA_SOURCE_COLUMN_TYPES } from '../../../../../../constants/itemTypes';\n\nconst Empty = () => <>;\n\nconst shouldUseDefault = (type, value) => {\n return VALUE_BOUNDED_OPTIONS[type] && VALUE_BOUNDED_OPTIONS[type]?.props?.every(prop => value?.[prop] === undefined);\n};\n\nconst generateDefault = ({ type, value, ...rest }) => {\n const useDefault = shouldUseDefault(type, value);\n if (useDefault) {\n const defaultProps = SIDE_SELECTION_DEFAULTS[type];\n if (typeof defaultProps === 'function') {\n return defaultProps({ ...rest });\n }\n return SIDE_SELECTION_DEFAULTS[type];\n }\n return null;\n};\n\nexport const selectSubfield = ({\n type, value, onChange, propLocation\n}) => {\n const defaultSelection = generateDefault({ type, value, propLocation });\n\n const getSubfieldWithProps = () => {\n switch (type) {\n case OPTION_VALUES.AVATAR: {\n return [Image, { type: 'multisection-settings-avatar', onChange }];\n }\n case OPTION_VALUES.IMAGE: {\n return [Image, { type: 'multisection-settings-image', onChange }];\n }\n\n case OPTION_VALUES.ICON: {\n return [IconSelector];\n }\n\n case OPTION_VALUES.BUTTON: {\n return [TextInput, { value: value?.text, maxLength: 20, onChange: text => onChange({ text }) }];\n }\n\n default: {\n return [Empty];\n }\n }\n };\n\n const subfieldWithProps = getSubfieldWithProps();\n\n const subfieldWithDefaultSelection = [subfieldWithProps[0], { ...subfieldWithProps[1], defaultSelection: defaultSelection ?? undefined }];\n return subfieldWithDefaultSelection;\n};\n\nexport const listItemStartDsSubFieldSelection = props => ({\n type, value, onChange, ...rest\n}) => {\n switch (type) {\n case OPTION_VALUES.AVATAR:\n case OPTION_VALUES.IMAGE: {\n return [DataSourcePicker, {\n ...props,\n ...rest,\n columnType: DATA_SOURCE_COLUMN_TYPES.IMAGE,\n value: value?.url,\n onChange: val => onChange({ url: val })\n }];\n }\n\n default: {\n return [Empty];\n }\n }\n};\n\nexport const listItemEndDsSubFieldSelection = props => ({\n type, value, onChange\n}) => {\n switch (type) {\n case OPTION_VALUES.BUTTON: {\n return [DataSourcePicker, {\n ...props, columnType: DATA_SOURCE_COLUMN_TYPES.TEXT, value: value?.text, onChange: val => onChange({ text: val })\n }];\n }\n\n case OPTION_VALUES.ICON: {\n return [IconSelector];\n }\n\n default: {\n return [Empty];\n }\n }\n};\n\nexport const isOptionDefault = optionValue => {\n return !!Object.values(DEFAULT_OPTIONS).find(defaultOpt => defaultOpt.value === optionValue);\n};\n\nexport const decidePropType = propID => {\n return propID.startsWith('start') ? PROP_TYPES.START : PROP_TYPES.END;\n};\n","import React, { useState } from 'react';\nimport propTypes from 'prop-types';\nimport { ImageUpload as JFImageUpload } from '@jotforminc/image-upload';\nimport { t } from '@jotforminc/translation';\nimport classnames from 'classnames';\nimport ImagePreview from '../../../../ImagePreview';\nimport { IMAGE_TYPE } from '../../../../../../../constants';\nimport ChooseFileButton from '../../ChooseFileButton';\nimport { ScRightPanelBlock } from '../../../../../styles/scRightPanel';\nimport { SIDE_SELECTION_DEFAULTS } from '../constants';\n\nconst Image = ({\n value, onChange, type\n}) => {\n const isValueDefault = value === SIDE_SELECTION_DEFAULTS[type];\n const [isFileUploadButtonVisible, setIsFileUploadButtonVisible] = useState(!value || !value?.url || isValueDefault);\n const onRemoveImage = () => {\n onChange(null);\n setIsFileUploadButtonVisible(true);\n };\n\n if (isFileUploadButtonVisible) {\n return (\n {t('Supported formats: jpg, jpeg, png, gif, svg')}
\n \n {\n value?.url && !isValueDefault\n ? (\n onChange({ url })}\n onImageUpload={({ url }) => onChange({ url })}\n onImageRemove={onRemoveImage}\n onLinkTextInputSubmit={url => onChange({ url })}\n renderTabs={['upload', 'choose', 'link']}\n useAPI={true}\n allowMultipleSelection={false}\n allowedTypes='image/*'\n />\n )\n }\n
\n );\n};\n\nImage.propTypes = {\n value: propTypes.object,\n onChange: propTypes.func,\n type: propTypes.string\n};\n\nImage.defaultProps = {\n value: undefined,\n onChange: f => f,\n type: ''\n};\n\nexport default Image;\n","/* eslint-disable default-case */\n/* eslint-disable no-fallthrough */\nimport React from 'react';\nimport { IconInputTextShort } from '@jotforminc/svg-icons';\nimport { t } from '@jotforminc/translation';\n\nexport const DEFAULT_OPTIONS = {\n NONE: { label: t('None'), value: 'none' },\n CUSTOM_TEXT: {\n icon: () => \n // onChange({ text: e.target.value })}\n // maxLength={option?.limit}\n // />\n // {\n // !!option?.limit && {`${value?.text?.length ?? 0}/${option?.limit}`}\n // }\n //
\n // );\n // }\n return (\n onChange(option)}>\n \n {option.label}\n \n {/* selected check */}\n {\n isSelected &&
\n );\n};\n\nOption.propTypes = {\n option: propTypes.object,\n isSelected: propTypes.bool,\n onChange: propTypes.func,\n isActive: propTypes.bool\n};\n\nOption.defaultProps = {\n option: {},\n isSelected: false,\n onChange: f => f,\n isActive: propTypes.bool\n};\n\nexport default Option;\n","export const KEYBOARD_EVENT_KEYS = {\n ENTER: 'Enter',\n ARROW_DOWN: 'ArrowDown',\n ARROW_UP: 'ArrowUp'\n};\n\nexport class KeyboardNavigation {\n constructor(items, keyMap = {}, startIndex = 0) {\n this.items = items;\n this.index = startIndex;\n this.MAX_LENGTH = items.length;\n this.KEY_MAP = {\n [KEYBOARD_EVENT_KEYS.ARROW_UP]: () => this.setIndex(this.index - 1),\n [KEYBOARD_EVENT_KEYS.ARROW_DOWN]: () => this.setIndex(this.index + 1),\n ...keyMap\n };\n }\n\n setIndex = newIndex => {\n if (newIndex >= 0 && newIndex < this.MAX_LENGTH) {\n this.index = newIndex;\n }\n\n return this.index;\n };\n\n getIndex = () => this.index;\n\n handleKeyEvent = (event, callback) => {\n const keyFunc = this.KEY_MAP[event.key];\n let { index } = this;\n\n if (keyFunc) {\n index = keyFunc();\n }\n\n if (typeof callback === 'function') {\n callback(index);\n }\n };\n}\n","import styled from 'styled-components';\n\nexport const SectionDivider = styled.div`\n margin: 10px 0;\n height: 1px;\n background: rgba(75, 82, 96, 1);\n`;\n","import React, {\n useState, useEffect, useMemo\n} from 'react';\nimport propTypes from 'prop-types';\nimport Option from './Option';\nimport { KeyboardNavigation, KEYBOARD_EVENT_KEYS } from '../../../../../../../utils/KeyboardNavigation';\nimport { SectionDivider } from './styled';\n\nconst OptionGroup = ({\n sections,\n onChangeOption,\n selectedOption,\n shouldDivideSections,\n shouldNavigateWithKeyboard\n}) => {\n const orderedOptions = useMemo(() => sections.map(section => section.options).flat(), [sections]);\n const currentOptionIndex = orderedOptions.findIndex(option => option.value === selectedOption.value);\n\n const keyboardNavigation = useMemo(() => (shouldNavigateWithKeyboard ? new KeyboardNavigation(orderedOptions) : null), [orderedOptions]);\n const [activeOption, setActiveOption] = useState(\n currentOptionIndex > -1\n ? { value: orderedOptions[currentOptionIndex].value, index: currentOptionIndex }\n : { value: '', index: 0 }\n );\n\n keyboardNavigation?.setIndex(activeOption.index);\n\n const changeActiveOption = newIndex => {\n if (orderedOptions[newIndex]) {\n setActiveOption({ value: orderedOptions[newIndex].value, index: newIndex });\n }\n };\n\n useEffect(() => {\n const handleKeyDown = e => {\n if (!keyboardNavigation) return;\n\n keyboardNavigation.handleKeyEvent(e, index => {\n changeActiveOption(index);\n if (e.key === KEYBOARD_EVENT_KEYS.ENTER && orderedOptions[index] && orderedOptions[index].value) {\n changeActiveOption(index);\n onChangeOption(orderedOptions[index]);\n }\n });\n };\n\n if (keyboardNavigation) {\n window.addEventListener('keydown', handleKeyDown);\n }\n\n return () => {\n if (keyboardNavigation) {\n window.removeEventListener('keydown', handleKeyDown);\n }\n };\n }, [\n orderedOptions,\n changeActiveOption,\n activeOption,\n onChangeOption,\n keyboardNavigation\n ]);\n\n const filteredSections = sections.filter(({ options }) => options.length > 0);\n\n return (\n <>\n {\n filteredSections.filter(({ options }) => options.length > 0).map((section, indx) => {\n if (section.options.length < 1) {\n return;\n }\n return (\n \n {!!section.description && shouldDivideSections && {section.description.toUpperCase()}}\n { section.options.map(option => {\n return (\n
\n );\n })\n }\n \n );\n};\n\nOptionGroup.propTypes = {\n sections: propTypes.array,\n selectedOption: propTypes.object,\n onChangeOption: propTypes.func.isRequired,\n shouldDivideSections: propTypes.bool.isRequired,\n shouldNavigateWithKeyboard: propTypes.bool.isRequired\n};\n\nOptionGroup.defaultProps = {\n sections: [],\n selectedOption: {}\n};\n\nexport default OptionGroup;\n","/* eslint-disable jsx-a11y/click-events-have-key-events */\n/* eslint-disable react/no-unused-prop-types */\n/* eslint-disable @jotforminc/no-native-button */\n/* eslint-disable max-len */\nimport React, {\n useState, useMemo, useEffect, useRef\n} from 'react';\nimport propTypes from 'prop-types';\nimport { IconCaretDown, IconMagnifyingGlass } from '@jotforminc/svg-icons';\nimport { t } from '@jotforminc/translation';\nimport { Popover } from '@jotforminc/uikit';\nimport { generateDefaultSection, findOption } from './helper';\nimport ValueArea from './ValueArea';\nimport { ScDropdown } from './ScDropdown';\nimport OptionGroup from './OptionGroup';\nimport { useClickOutside } from '../../../../../../utils/hooks';\n\nconst MultiSectionSelect = props => {\n const {\n sections,\n shouldDivideSections,\n onChange,\n value,\n isSearchable,\n shouldNavigateWithKeyboard,\n defaultSection,\n noOptionsText,\n placeholder\n } = props;\n\n const _defaultSection = defaultSection ?? generateDefaultSection(props);\n const sectionsWithDefaultOptions = useMemo(() => ([_defaultSection, ...sections]), [sections, _defaultSection]);\n\n const initialOption = findOption(sectionsWithDefaultOptions, value.option.value);\n\n const [selectedOption, setSelectedOption] = useState(initialOption);\n const [isOptionsVisible, setIsOptionsVisible] = useState(false);\n const [searchText, setSearchText] = useState('');\n const searchRef = useRef(null);\n const dropdownRef = useRef(null);\n const popoverRef = useRef(null);\n\n useClickOutside(() => {\n setIsOptionsVisible(false);\n }, dropdownRef);\n\n const toggleOptionVisibility = () => setIsOptionsVisible(visibility => !visibility);\n\n const filteredSections = useMemo(() => {\n if (!isSearchable || !searchText) {\n return sectionsWithDefaultOptions;\n }\n\n return sectionsWithDefaultOptions.reduce((prev, section) => {\n const newOptions = section.options.filter(option => option.label.includes(searchText) || option.value.includes(searchText));\n if (!newOptions.length) {\n return prev;\n }\n return [...prev, { ...section, options: newOptions }];\n }, []);\n }, [sectionsWithDefaultOptions, isSearchable]);\n\n const onChangeOption = option => {\n toggleOptionVisibility();\n setSelectedOption(option);\n setSearchText('');\n onChange({ option });\n };\n\n useEffect(() => {\n if (isOptionsVisible) {\n searchRef?.current?.focus();\n }\n }, [isOptionsVisible]);\n\n const isThereAnyOption = Object.values(filteredSections).some(({ options }) => options.length > 0);\n\n return (\n \n {\n isSearchable\n && (\n \n {\n isThereAnyOption\n ? (\n
\n )\n }\n \n setSearchText(e.target.value)}\n />\n
\n )\n }\n {t(noOptionsText)}
\n }\n \n {t(description)}
\n);\n\nPanelItemDescriptionRenderer.propTypes = { description: string };\nPanelItemDescriptionRenderer.defaultProps = { description: '' };\n\nexport default PanelItemDescriptionRenderer;\n","import Styled from 'styled-components';\n\nexport const ScLineHr = Styled.hr`\n border: none;\n border-top: 1px solid #4B5260;\n height: 1px;\n width: 100%;\n margin: 0;\n // A/B Test: ctAppNameIconModal\n .appNameIconSettingsModal & {\n border-top: 0;\n margin-top: 39px;\n }\n`;\n","import Styled from 'styled-components';\n\nexport const ScSectionTitle = Styled.div`\n color: var(--jfv-panel-right-title-color);\n font-size: var(--jfv-panel-right-title-font-size);\n font-weight: var(--jfv-panel-right-title-font-weight);\n text-transform: uppercase;\n display: block;\n padding: 1.25em 1em 0 1em;\n\n // A/B Test: ctAppNameIconModal\n .appNameIconSettingsModal & {\n color: #0A1551;\n padding: 0 0 20px 0;\n }\n`;\n","var _rect, _path, _rect2, _rect3, _rect4, _rect5;\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nimport * as React from \"react\";\nconst SvgVerticalCardStyle = props => /*#__PURE__*/React.createElement(\"svg\", _extends({\n xmlns: \"http://www.w3.org/2000/svg\",\n width: 70,\n height: 80,\n fill: \"none\"\n}, props), _rect || (_rect = /*#__PURE__*/React.createElement(\"rect\", {\n width: 69,\n height: 79,\n x: 0.5,\n y: 0.5,\n stroke: \"#7F859C\",\n rx: 3.5\n})), _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n fill: \"#7F859C\",\n d: \"M0 4a4 4 0 0 1 4-4h62a4 4 0 0 1 4 4v36H0z\"\n})), _rect2 || (_rect2 = /*#__PURE__*/React.createElement(\"rect\", {\n width: 54,\n height: 4,\n x: 8,\n y: 49,\n fill: \"#7F859C\",\n rx: 2\n})), _rect3 || (_rect3 = /*#__PURE__*/React.createElement(\"rect\", {\n width: 54,\n height: 2,\n x: 8,\n y: 58,\n fill: \"#7F859C\",\n rx: 1\n})), _rect4 || (_rect4 = /*#__PURE__*/React.createElement(\"rect\", {\n width: 54,\n height: 2,\n x: 8,\n y: 63,\n fill: \"#7F859C\",\n rx: 1\n})), _rect5 || (_rect5 = /*#__PURE__*/React.createElement(\"rect\", {\n width: 28,\n height: 2,\n x: 8,\n y: 68,\n fill: \"#7F859C\",\n rx: 1\n})));\nexport default SvgVerticalCardStyle;","var _rect, _rect2, _rect3, _rect4, _rect5, _path;\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nimport * as React from \"react\";\nconst SvgHorizontalCardStyle = props => /*#__PURE__*/React.createElement(\"svg\", _extends({\n xmlns: \"http://www.w3.org/2000/svg\",\n width: 158,\n height: 89,\n fill: \"none\"\n}, props), _rect || (_rect = /*#__PURE__*/React.createElement(\"rect\", {\n width: 141,\n height: 39,\n x: 8.5,\n y: 25.5,\n stroke: \"#7F859C\",\n rx: 3.5\n})), _rect2 || (_rect2 = /*#__PURE__*/React.createElement(\"rect\", {\n width: 90,\n height: 4,\n x: 54,\n y: 34,\n fill: \"#7F859C\",\n rx: 2\n})), _rect3 || (_rect3 = /*#__PURE__*/React.createElement(\"rect\", {\n width: 90,\n height: 2,\n x: 54,\n y: 44,\n fill: \"#7F859C\",\n rx: 1\n})), _rect4 || (_rect4 = /*#__PURE__*/React.createElement(\"rect\", {\n width: 33,\n height: 2,\n x: 54,\n y: 54,\n fill: \"#7F859C\",\n rx: 1\n})), _rect5 || (_rect5 = /*#__PURE__*/React.createElement(\"rect\", {\n width: 90,\n height: 2,\n x: 54,\n y: 49,\n fill: \"#7F859C\",\n rx: 1\n})), _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n fill: \"#7F859C\",\n d: \"M12 65a4 4 0 0 1-4-4V29a4 4 0 0 1 4-4h36v40z\"\n})));\nexport default SvgHorizontalCardStyle;","var _g, _defs;\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nimport * as React from \"react\";\nconst SvgListLayoutHorizontal = props => /*#__PURE__*/React.createElement(\"svg\", _extends({\n xmlns: \"http://www.w3.org/2000/svg\",\n width: 158,\n height: 89,\n fill: \"none\"\n}, props), _g || (_g = /*#__PURE__*/React.createElement(\"g\", {\n fill: \"#7F859C\",\n clipPath: \"url(#listLayoutHorizontal_svg__a)\"\n}, /*#__PURE__*/React.createElement(\"rect\", {\n width: 40,\n height: 34,\n rx: 4\n}), /*#__PURE__*/React.createElement(\"rect\", {\n width: 40,\n height: 34,\n y: 55,\n rx: 4\n}), /*#__PURE__*/React.createElement(\"path\", {\n fillOpacity: 0.5,\n d: \"M0 44h158v1H0z\"\n}), /*#__PURE__*/React.createElement(\"rect\", {\n width: 100,\n height: 4,\n x: 48,\n y: 11,\n rx: 2\n}), /*#__PURE__*/React.createElement(\"rect\", {\n width: 50,\n height: 4,\n x: 48,\n y: 19,\n rx: 2\n}), /*#__PURE__*/React.createElement(\"rect\", {\n width: 100,\n height: 4,\n x: 48,\n y: 66,\n rx: 2\n}), /*#__PURE__*/React.createElement(\"rect\", {\n width: 50,\n height: 4,\n x: 48,\n y: 74,\n rx: 2\n}))), _defs || (_defs = /*#__PURE__*/React.createElement(\"defs\", null, /*#__PURE__*/React.createElement(\"clipPath\", {\n id: \"listLayoutHorizontal_svg__a\"\n}, /*#__PURE__*/React.createElement(\"path\", {\n fill: \"#fff\",\n d: \"M0 0h158v89H0z\"\n})))));\nexport default SvgListLayoutHorizontal;","var _rect, _path, _rect2, _rect3, _rect4, _rect5, _rect6, _path2, _rect7, _rect8, _rect9, _rect10;\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nimport * as React from \"react\";\nconst SvgListLayoutVertical = props => /*#__PURE__*/React.createElement(\"svg\", _extends({\n xmlns: \"http://www.w3.org/2000/svg\",\n width: 158,\n height: 89,\n fill: \"none\"\n}, props), _rect || (_rect = /*#__PURE__*/React.createElement(\"rect\", {\n width: 69,\n height: 79,\n x: 5.5,\n y: 5.5,\n stroke: \"#7F859C\",\n rx: 3.5\n})), _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n fill: \"#7F859C\",\n d: \"M5 9a4 4 0 0 1 4-4h62a4 4 0 0 1 4 4v36H5z\"\n})), _rect2 || (_rect2 = /*#__PURE__*/React.createElement(\"rect\", {\n width: 54,\n height: 4,\n x: 13,\n y: 54,\n fill: \"#7F859C\",\n rx: 2\n})), _rect3 || (_rect3 = /*#__PURE__*/React.createElement(\"rect\", {\n width: 54,\n height: 2,\n x: 13,\n y: 64,\n fill: \"#7F859C\",\n rx: 1\n})), _rect4 || (_rect4 = /*#__PURE__*/React.createElement(\"rect\", {\n width: 20,\n height: 2,\n x: 13,\n y: 74,\n fill: \"#7F859C\",\n rx: 1\n})), _rect5 || (_rect5 = /*#__PURE__*/React.createElement(\"rect\", {\n width: 54,\n height: 2,\n x: 13,\n y: 69,\n fill: \"#7F859C\",\n rx: 1\n})), _rect6 || (_rect6 = /*#__PURE__*/React.createElement(\"rect\", {\n width: 69,\n height: 79,\n x: 83.5,\n y: 5.5,\n stroke: \"#7F859C\",\n rx: 3.5\n})), _path2 || (_path2 = /*#__PURE__*/React.createElement(\"path\", {\n fill: \"#7F859C\",\n d: \"M83 9a4 4 0 0 1 4-4h62a4 4 0 0 1 4 4v36H83z\"\n})), _rect7 || (_rect7 = /*#__PURE__*/React.createElement(\"rect\", {\n width: 54,\n height: 4,\n x: 91,\n y: 54,\n fill: \"#7F859C\",\n rx: 2\n})), _rect8 || (_rect8 = /*#__PURE__*/React.createElement(\"rect\", {\n width: 54,\n height: 2,\n x: 91,\n y: 64,\n fill: \"#7F859C\",\n rx: 1\n})), _rect9 || (_rect9 = /*#__PURE__*/React.createElement(\"rect\", {\n width: 20,\n height: 2,\n x: 91,\n y: 74,\n fill: \"#7F859C\",\n rx: 1\n})), _rect10 || (_rect10 = /*#__PURE__*/React.createElement(\"rect\", {\n width: 54,\n height: 2,\n x: 91,\n y: 69,\n fill: \"#7F859C\",\n rx: 1\n})));\nexport default SvgListLayoutVertical;","import { t } from '@jotforminc/translation';\nimport {\n IconEnvelopeClosedFilled, IconLinkDiagonal, IconPhoneFilled, IconProductFormBuilderFilled, IconProductPagesFilled, IconXmark\n} from '@jotforminc/svg-icons';\nimport VerticalCard from '../../../../../assets/verticalCardStyle.svg';\nimport HorizontalCard from '../../../../../assets/horizontalCardStyle.svg';\nimport ButtonLinkInput from './ButtonActions/components/ButtonLinkInput';\nimport ButtonMailInput from './ButtonActions/components/ButtonMailInput';\nimport ButtonPhoneInput from './ButtonActions/components/ButtonPhoneInput';\nimport ButtonFormSelection from './ButtonActions/components/ButtonFormSelection';\nimport ButtonPageSelection from './ButtonActions/components/ButtonPageSelection';\nimport { BUTTON_ROLE_TYPES } from './ButtonActions/buttonRoleTypes';\nimport ListLayoutHorizontal from '../../../../../assets/listLayoutHorizontal.svg';\nimport ListLayoutVertical from '../../../../../assets/listLayoutVertical.svg';\n\nexport const PROPERTY_ITEM = {\n TEXT_AREA: 'textarea',\n TEXT_INPUT: 'textinput',\n ITEM_STYLER: 'itemStyler',\n SELECTION: 'selection',\n COLOR_PICKER: 'colorPicker',\n TOGGLE: 'toggle',\n IMAGE_UPLOAD: 'imageUpload',\n APP_LOGO: 'appLogo',\n FONT_PICKER: 'fontPicker',\n COLOR_PALETTE: 'colorPalette',\n DOCUMENT_FILE_UPLOAD: 'documentFileUpload',\n THEMES: 'themes',\n FORM_LABEL: 'formLabel',\n IMAGE_UPLOAD_WITH_LOADING: 'imageUploadWithLoading',\n BADGE_TOGGLE: 'badgeToggle',\n LOGIN_REQUIRED_TOGGLE: 'loginRequiredToggle',\n BUTTON_ACTIONS: 'buttonActions',\n CHECKBOX: 'checkbox',\n BUTTON_ROLE_COMPONENTS: 'buttonRoleComponents',\n ITEM_ICON_TOGGLE: 'itemIconToggle',\n APP_FOOTER: 'appFooter',\n // for external widget items\n WIDGET_FILE_UPLOAD: 'widgetFileUpload',\n DROPDOWN: 'dropdown',\n SCHEMA: 'schema',\n SHOW_FORM_TOGGLE: 'showFormToggle',\n SHRINK_TOGGLE: 'shrinkToggle',\n RESOURCE_SELECTION: 'resourceSelection',\n FORM_SELECTION: 'formSelection',\n EXTERNAL: 'external',\n LAYOUTS: 'layouts',\n LINK_INPUT: 'linkInput',\n RANGESLIDER: 'rangeslider',\n DUPLICATION: 'duplication',\n MENU_SETTINGS: 'menuSettings',\n PAGE_SETTINGS: 'pageSettings',\n PRODUCT_LIST_SETTINGS: 'productListSettings',\n PAYMENT_SETTINGS: 'paymentSettings',\n DONATION_SETTINGS: 'donationSettings',\n DONATION_GATEWAY_WARNING_ITEM: 'donationGatewayWarningItem',\n DONATION_BOX_PROPERTIES_PANEL_FIELD: 'donationBoxPropertiesPanelField',\n CONTACT_INFORMATION_SETTINGS: 'contactInformationSettings',\n LIST_ITEM_START: 'listItemStart',\n LIST_ITEM_END: 'listItemEnd',\n SVG_OPTIONS: 'svgOptions',\n CARD_LAYOUT: 'cardLayout',\n ROLES: 'roles',\n DATA_SOURCE_PICKER: 'dataSourcePicker',\n DS_ROLE_COMPONENTS: 'dsRoleComponents',\n DIMENSION_PICKER: 'dimensionPicker'\n};\n\nexport const CARD_LAYOUT = {\n VERTICAL: 'vertical',\n HORIZONTAL: 'horizontal'\n};\n\nexport const CARD_LAYOUT_OPTIONS = [\n {\n\n value: CARD_LAYOUT.HORIZONTAL,\n Svg: HorizontalCard,\n selectedSvgProps: {},\n label: t('Horizontal')\n },\n {\n value: CARD_LAYOUT.VERTICAL,\n Svg: VerticalCard,\n selectedSvgProps: {},\n label: t('Vertical')\n }\n];\n\nexport const LIST_LAYOUT_OPTIONS = [\n {\n value: CARD_LAYOUT.HORIZONTAL,\n Svg: ListLayoutHorizontal,\n label: t('List View')\n },\n {\n value: CARD_LAYOUT.VERTICAL,\n Svg: ListLayoutVertical,\n selectedSvgProps: {},\n label: t('Card View')\n }\n];\n\nexport const CARD_ACTION_VALUES = {\n LINK: BUTTON_ROLE_TYPES.LINK,\n MAIL: BUTTON_ROLE_TYPES.MAIL,\n PHONE: BUTTON_ROLE_TYPES.PHONE,\n NAVIGATION: BUTTON_ROLE_TYPES.NAVIGATION,\n FORM: BUTTON_ROLE_TYPES.FORM,\n NONE: 'none'\n};\n\nexport const CARD_ACTIONS = [\n {\n value: CARD_ACTION_VALUES.LINK,\n title: t('Visit URL'),\n Icon: IconLinkDiagonal\n },\n {\n value: CARD_ACTION_VALUES.MAIL,\n title: t('Send Email'),\n Icon: IconEnvelopeClosedFilled\n },\n {\n value: CARD_ACTION_VALUES.PHONE,\n title: t('Make Call'),\n Icon: IconPhoneFilled\n },\n {\n value: CARD_ACTION_VALUES.NAVIGATION,\n title: t('Navigate to Page'),\n Icon: IconProductPagesFilled\n },\n {\n value: CARD_ACTION_VALUES.FORM,\n title: t('Open Form'),\n Icon: IconProductFormBuilderFilled\n },\n {\n value: CARD_ACTION_VALUES.NONE,\n title: t('None'),\n Icon: IconXmark\n }\n];\n\nexport const CARD_ACTION_PROPS = {\n [CARD_ACTION_VALUES.LINK]: {\n title: t('Link'),\n RoleComponent: ButtonLinkInput,\n componentProps: {\n placeholder: t('Enter a link'),\n defaultValue: 'https://'\n }\n },\n [CARD_ACTION_VALUES.MAIL]: {\n title: t('Recipient'),\n RoleComponent: ButtonMailInput,\n componentProps: {\n placeholder: t('Enter an email')\n }\n },\n [CARD_ACTION_VALUES.PHONE]: {\n title: t('Phone Number'),\n RoleComponent: ButtonPhoneInput,\n componentProps: {\n placeholder: '(555) - 555 555'\n }\n },\n [CARD_ACTION_VALUES.FORM]: {\n title: t('Form'),\n RoleComponent: ButtonFormSelection\n },\n [CARD_ACTION_VALUES.NAVIGATION]: {\n title: t('Page'),\n RoleComponent: ButtonPageSelection\n }\n};\n\nexport const PAGE_TYPES = {\n DATA_SOURCE: 'DATA_SOURCE'\n};\n\nexport const IMAGE_ACTION_VALUES = {\n LINK: BUTTON_ROLE_TYPES.LINK,\n MAIL: BUTTON_ROLE_TYPES.MAIL,\n PHONE: BUTTON_ROLE_TYPES.PHONE,\n NAVIGATION: BUTTON_ROLE_TYPES.NAVIGATION,\n FORM: BUTTON_ROLE_TYPES.FORM,\n NONE: 'none'\n};\n\nexport const IMAGE_ACTIONS = [\n {\n value: IMAGE_ACTION_VALUES.LINK,\n title: t('Visit URL'),\n Icon: IconLinkDiagonal\n },\n {\n value: IMAGE_ACTION_VALUES.MAIL,\n title: t('Send Email'),\n Icon: IconEnvelopeClosedFilled\n },\n {\n value: IMAGE_ACTION_VALUES.PHONE,\n title: t('Make Call'),\n Icon: IconPhoneFilled\n },\n {\n value: IMAGE_ACTION_VALUES.NAVIGATION,\n title: t('Navigate to Page'),\n Icon: IconProductPagesFilled\n },\n {\n value: IMAGE_ACTION_VALUES.FORM,\n title: t('Open Form'),\n Icon: IconProductFormBuilderFilled\n },\n {\n value: IMAGE_ACTION_VALUES.NONE,\n title: t('None'),\n Icon: IconXmark\n }\n];\n\nexport const IMAGE_ACTION_PROPS = {\n [IMAGE_ACTION_VALUES.LINK]: {\n title: t('Link'),\n RoleComponent: ButtonLinkInput,\n componentProps: {\n placeholder: t('Enter a link'),\n defaultValue: 'https://'\n }\n },\n [IMAGE_ACTION_VALUES.MAIL]: {\n title: t('Recipient'),\n RoleComponent: ButtonMailInput,\n componentProps: {\n placeholder: t('Enter an email')\n }\n },\n [IMAGE_ACTION_VALUES.PHONE]: {\n title: t('Phone Number'),\n RoleComponent: ButtonPhoneInput,\n componentProps: {\n placeholder: '(555) - 555 555'\n }\n },\n [IMAGE_ACTION_VALUES.FORM]: {\n title: t('Form'),\n RoleComponent: ButtonFormSelection\n },\n [IMAGE_ACTION_VALUES.NAVIGATION]: {\n title: t('Page'),\n RoleComponent: ButtonPageSelection\n }\n};\n","import React from 'react';\nimport { useSelector } from 'react-redux';\nimport { string } from 'prop-types';\nimport ButtonPageSelection from '../ButtonPageSelection';\nimport SELECTORS from '../../../../../../../../store/selectors';\n\nconst DsPageSelection = props => {\n const { linkedResourceID } = props;\n const pages = useSelector(SELECTORS.getPagesWithNames);\n const items = useSelector(SELECTORS.getPortalItems);\n\n // Exclude pages that not matched with the linkedResourceID\n const excludedPages = pages.filter(page => {\n if (!page.linkedItemID) {\n return true;\n }\n\n const relatedItem = items.find(item => item.id === page.linkedItemID);\n return relatedItem?.resourceID === linkedResourceID;\n });\n\n return (\n \n
\n )\n },\n center: {\n Renderer: () => (\n \n
\n )\n },\n right: {\n Renderer: () => (\n \n
\n )\n }\n};\n\nexport const TEXT_ALIGNMENT_RENDERER_ARRAY = Object.entries(TEXT_ALIGNMENTS)\n .map(([key, { Renderer }]) => ({\n value: key,\n Renderer\n }));\n","import React from 'react';\nimport { t } from '@jotforminc/translation';\n\nexport const ELEMENT_SIZE_OPTION_TESTIDS = [ // Indices are important\n 'normal',\n 'large'\n];\n\nconst ELEMENT_SIZES = {\n normal: {\n Renderer: () => (\n \n {t('Normal')}\n
\n )\n },\n large: {\n Renderer: () => (\n \n {t('Large')}\n
\n )\n }\n};\n\nexport const ELEMENT_SIZE_RENDERER_ARRAY = Object.entries(ELEMENT_SIZES)\n .map(([key, { Renderer }]) => ({\n value: key,\n Renderer\n }));\n","import { t } from '@jotforminc/translation';\nimport { DESCRIPTION_LIMIT } from '../../../../../constants';\nimport { BUTTON_STYLING_LIST } from '../../../../../properties/styling';\nimport { TEXT_ALIGNMENT_RENDERER_ARRAY } from '../../../constants/textAlignment';\n\nconst DONATION_ITEM_CONSTANTS = {\n tabs: {\n General: {\n label: t('General')\n },\n Style: {\n label: t('Style')\n }\n },\n properties: {\n General: {\n warning: {\n type: 'donationGatewayWarningItem',\n disableElementLabel: true,\n noLine: true\n },\n title: {\n type: 'textinput',\n title: t('Heading Text'),\n placeholder: t('Type a heading'),\n limit: 240,\n description: '',\n noTopLine: true\n },\n description: {\n type: 'textarea',\n title: t('Subheading Text'),\n placeholder: t('Type a subheading'),\n limit: DESCRIPTION_LIMIT,\n description: '',\n sanitize: true\n },\n donationBoxPropertiesPanelField: {\n type: 'donationBoxPropertiesPanelField',\n allowMultiplePropChange: true,\n disableElementLabel: true,\n ariaLabel: t('Show Donation Goal Bar'),\n noPadding: true,\n noLabel: true\n },\n donateButtonTitle: {\n type: 'textinput',\n title: t('Button Text'),\n placeholder: t('Type a donate button text'),\n description: ''\n }\n },\n Style: {\n listItemStyle: {\n type: 'itemStyler',\n title: t('Button Style'),\n buttonText: t('Change Style'),\n colorList: BUTTON_STYLING_LIST,\n storeWithDifferentPropName: {\n itemBgColor: 'itemButtonBgColor',\n itemFontColor: 'itemButtonFontColor',\n itemBorderColor: 'itemButtonBorderColor'\n },\n customPaletteProps: {\n itemBgColor: {\n title: t('Button Bg Color')\n },\n itemFontColor: {\n title: t('Button Font Color'),\n placement: 'bottom-end',\n offsetX: 39\n }\n }\n },\n buttonRadius: {\n type: 'selection',\n title: t('Button Corner'),\n options: [{\n text: 'Default',\n value: 'default'\n },\n {\n text: 'Rounded',\n value: 'rounded'\n }\n ]\n },\n itemTextAlignment: {\n type: 'selection',\n title: t('Heading Text Alignment'),\n options: TEXT_ALIGNMENT_RENDERER_ARRAY\n }\n }\n }\n};\n\nexport { DONATION_ITEM_CONSTANTS };\n","import React, { useEffect } from 'react';\nimport { useSelector } from 'react-redux';\nimport { func, string } from 'prop-types';\nimport { safeJSONParse } from '@jotforminc/utils';\nimport { t } from '@jotforminc/translation';\nimport WarningBox from '@jotforminc/warning-box';\nimport SELECTORS from '../../../../../../../store/selectors';\nimport Dropdown from '../../../../../../../components/Dropdown';\nimport TextArea from '../../../../TextArea';\nimport { ScRightPanelDropdown } from '../../../../../styles/scRightPanel';\nimport { isYes } from '../../../../../../../utils';\nimport { getButtonShareDefMessages, getDefaultButtonShareObj } from '../../../constants';\nimport { getUpdatedShareMessage } from '../../utils';\n\nconst ButtonShareSelection = ({ value, onChange }) => {\n const parsedValue = typeof value === 'string' ? safeJSONParse(value) : value;\n const donationItems = useSelector(SELECTORS.getDonationItems) ?? [];\n const isDonationGoalActive = donationItems[0] && isYes(donationItems[0].showDonationGoal);\n\n const messageTypes = [\n { text: t('App Share'), value: 'appShare' },\n (donationItems.length) && [{ text: t('Donation Share'), value: 'donationShare' }]\n ].flat().filter(Boolean);\n\n const handleMessageTypeChange = typeValue => {\n const defaultMessageType = (typeValue === 'donationShare' && isDonationGoalActive) ? 'donationGoalShare' : typeValue;\n onChange(JSON.stringify({ type: typeValue, text: getButtonShareDefMessages()[defaultMessageType] }));\n };\n\n const handleMessageChange = messageValue => {\n onChange(JSON.stringify({ ...parsedValue, text: messageValue }));\n };\n\n useEffect(() => {\n const updatedShareMessage = getUpdatedShareMessage(parsedValue, donationItems, isDonationGoalActive);\n if (updatedShareMessage) { onChange(JSON.stringify(updatedShareMessage)); }\n }, [isDonationGoalActive]);\n\n // needed for first render on role change\n useEffect(() => {\n if (value === '') {\n onChange(JSON.stringify(getDefaultButtonShareObj()));\n }\n }, []);\n\n return (\n <>\n {children}
, []);\n const IconRenderer = useCallback(() => {t(description)}
}\n\n \n {\n buttonText && (\n \n {t(`Change ${resourceName}`)}\n \n \n
\n \n {isLoading ?
\n {t('Width')}
,\n HeightHintRenderer: props =>{t('Height')}
,\n proportion: 0\n};\n\nexport default DimensionPicker;\n","import React from 'react';\nimport { useDebounce } from '@jotforminc/hooks';\nimport { DimensionPicker as JFDimensionPicker } from '@jotforminc/jotform-common';\nimport { IconLockFilled, IconUnlockFilled } from '@jotforminc/svg-icons';\nimport {\n func, number, oneOfType, string\n} from 'prop-types';\nimport { isYes } from '../../../utils';\n\nconst DimensionPicker = ({\n keepProportion, width, height, onChange, proportion\n}) => {\n const debouncedOnChange = useDebounce(onChange, 400);\n return (\n{altText}
}\n \n
\n )}\n />\n);\n\nImageRenderer.propTypes = {\n image: PropTypes.string.isRequired,\n onRemove: PropTypes.func.isRequired,\n id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n layout: PropTypes.string\n};\n\nImageRenderer.defaultProps = {\n layout: 'column'\n};\n\nconst SortableItem = sortableElement(props => - {children}
\n {selected.length < 1 ? 'Select a font' : toReadable(selected)}\n
\n\n \n
\n \n);\n\nFontPickerHeader.propTypes = {\n onClick: func,\n selected: string\n};\n\nFontPickerHeader.defaultProps = {\n onClick: f => f,\n selected: ''\n};\n\nexport default FontPickerHeader;\n","import React, { forwardRef } from 'react';\nimport { func, string } from 'prop-types';\nimport { IconMagnifyingGlass } from '@jotforminc/svg-icons';\n\nconst FontPickerSearch = forwardRef(({\n defaultFont, onChange, placeholder, value\n}, ref) => ((\n \n \n
\n)));\n\nFontPickerSearch.propTypes = {\n defaultFont: string,\n onChange: func,\n placeholder: string,\n value: string\n};\n\nFontPickerSearch.defaultProps = {\n defaultFont: '',\n onChange: f => f,\n placeholder: 'Search fonts...',\n value: ''\n};\n\nexport default FontPickerSearch;\n","import React from 'react';\nimport {\n bool, func, number, shape, string\n} from 'prop-types';\n\nimport { toReadable } from './helper';\n\nconst FontPickerListItem = ({\n baseBgUrl,\n defaultFont,\n handleFontSelection,\n handleHoverAction,\n hoverIndex,\n index,\n item,\n listCreated,\n selected\n}) => {\n const genericListItem = () => (\n \n Nothing Found\n
\n )\n }\n \n );\n};\n\nFontPickerList.propTypes = {\n data: oneOfType([array, object]),\n defaultFont: string,\n handleFontSearching: func,\n isOpened: bool,\n listCreated: bool,\n onSelectFont: func,\n searchResult: oneOfType([array, object]),\n searchValue: string,\n selected: string\n};\n\nFontPickerList.defaultProps = {\n data: [],\n defaultFont: '',\n handleFontSearching: f => f,\n isOpened: false,\n listCreated: true,\n onSelectFont: f => f,\n searchResult: [],\n searchValue: '',\n selected: ''\n};\n\nexport default FontPickerList;\n","import './style/main.scss';\nimport React, { useCallback, useEffect, useState } from 'react';\nimport {\n arrayOf, func, shape, string\n} from 'prop-types';\nimport FontPickerHeader from './FontPickerHeader';\nimport FontPickerList from './FontPickerList';\nimport { createNewData, handleSearchResult } from './helper';\nimport fontsData from './data/fonts.json';\n\nconst fonts = fontsData && fontsData.fonts ? fontsData.fonts : null;\n\nconst FontPicker = ({\n additionalClassname, defaultFont, dropDownCallback, fontsArr, initialFont, onSelectFont,\n theme\n}) => {\n const [showList, setShowList] = useState(false);\n const [data, setData] = useState(fontsArr);\n const [selectedFont, setSelectedFont] = useState(initialFont || defaultFont || '');\n const [searchValue, setSearchValue] = useState('');\n const [searchResult, setSearchResult] = useState([]);\n const [listCreated, setListCreated] = useState(false);\n\n const outSideClick = useCallback(e => {\n if (\n (!e || !e.target || !e.target.className || typeof e.target.className.indexOf !== 'function')\n ) return;\n\n const isOutsideClicked = !(e.target.className.indexOf('jfc-font-picker') > -1);\n if (isOutsideClicked) setShowList(!isOutsideClicked);\n }, []);\n\n const handleClickHeader = () => {\n setShowList(prevState => !prevState);\n dropDownCallback({ dropdownIsOpened: showList });\n document.removeEventListener('click', outSideClick, true);\n };\n\n const handleFontSelection = selectedObj => {\n setSelectedFont(selectedObj.name);\n onSelectFont(selectedObj);\n };\n\n const handleFontSearcing = ({ target: { value } }) => {\n setSearchValue(value);\n setSearchResult(handleSearchResult(data, value));\n };\n\n useEffect(() => {\n if (\n fontsArr.length === 0\n && fonts\n && Object.keys(fonts).length > 0\n ) {\n setData(createNewData(fonts));\n setListCreated(true);\n }\n }, []);\n\n useEffect(() => {\n if (!showList) {\n document.removeEventListener('click', outSideClick, true);\n return;\n }\n\n document.addEventListener('click', outSideClick, true);\n }, [showList]);\n\n return (\n \n \n {t('Current Theme')}\n \n \n {t('Use Theme')}\n \n \n {t('Apply')}\n \n
\n \n \n
\n \n \n
\n \n {t('Text')}\n
\n \n \n \n \n
\n {themeName}
\n\n \n );\n });\n};\n\nexport default AppThemesPanel;\n","import React, { useCallback, useMemo, useState } from 'react';\n\nimport { Hooks, TextInput as UIKitTextInput } from '@jotforminc/uikit';\nimport {\n bool, elementType, func, string\n} from 'prop-types';\n\nconst ResettableInput = ({\n value,\n defaultValue,\n showHint,\n onChange,\n HintRenderer,\n InputRenderer,\n ResetButtonRenderer,\n InputWrapperRenderer,\n ...props\n}) => {\n const [inputValue, setInputValue] = useState(value || defaultValue);\n\n const isHintActive = useMemo(() => showHint && inputValue !== defaultValue, [inputValue, defaultValue, showHint]);\n\n const isResetButtonVisible = useMemo(() => inputValue !== defaultValue, [inputValue, defaultValue]);\n\n const handleInputChange = useCallback(e => {\n const { target: { value: newValue } } = e;\n onChange(newValue);\n setInputValue(newValue);\n }, []);\n\n const setInputValueAsDefault = useCallback(() => {\n setInputValue(defaultValue);\n }, []);\n\n const handleInputBlur = useCallback(e => {\n if (!e.target.value) {\n setInputValueAsDefault();\n }\n }, [defaultValue]);\n\n Hooks.useEffectIgnoreFirst(() => {\n if (value && value !== defaultValue) setInputValue(value);\n }, [value]);\n\n return (\n <>\n \n Default Value:\n {defaultValue}\n
\n ),\n InputRenderer: props => {wrapperProps.children}
;\n }, []);\n\n return (\n {defaulValue}
\n};\n\nexport default ResettableInput;\n","import { t } from '@jotforminc/translation';\nimport { Hooks } from '@jotforminc/uikit';\nimport { elementType, func, string } from 'prop-types';\nimport React, { useCallback, useState } from 'react';\nimport PanelItemDescriptionRenderer from '../HomePage/RightPanel/PanelItemDescriptionRenderer';\nimport ResettableInput from '../ResettableInput';\n\nconst FormLabel = props => {\n const {\n DescriptionRenderer, onChange, value, placeholder, formTitle\n } = props;\n\n const [innerValue, setInnerValue] = useState(value || formTitle);\n const generateDescription = useCallback(title => t('Original form title: {formTitle}'.replace('{formTitle}', title)), []);\n\n const HintRenderer = useCallback(({ defaultValue }) => \n
\n \n \n
\n {t('Uploading...')}
\n \n
\n )}\n \n );\n};\n\nResetBadge.propTypes = {\n onChange: func,\n completed_clearBadgePeriod: string,\n completed_clearBadgeOn: string\n};\n\nResetBadge.defaultProps = {\n onChange: f => f,\n completed_clearBadgePeriod: '',\n completed_clearBadgeOn: ''\n};\n\nexport default ResetBadge;\n","import React, { forwardRef } from 'react';\nimport {\n bool, element, func, oneOf, oneOfType, string\n} from 'prop-types';\nimport { isEnterprise } from '@jotforminc/enterprise-utils';\nimport { t } from '@jotforminc/translation';\nimport { useSelector } from 'react-redux';\nimport RadioToggle from '../../../RadioToggle';\nimport { isYes } from '../../../../../../utils';\nimport SELECTORS from '../../../../../../store/selectors';\n\nconst LoginRequiredToggle = forwardRef(({\n onChange,\n value,\n title,\n description,\n isMixed,\n readOnly,\n tooltipText: _tooltipText,\n badge\n}, ref) => {\n const isAppLoginable = isYes(useSelector(SELECTORS.selectIsAppLoginable));\n const shouldReadOnly = (!isYes(value) && isEnterprise() && !isAppLoginable);\n let tooltipText = '';\n if (readOnly) {\n tooltipText = _tooltipText;\n } else if (shouldReadOnly) {\n tooltipText = t('You should check “Require Registration” option or change Access Settings to Private or Company Access in the Settings of the Publish tab.');\n }\n return (\n {t('Select a day')}
\n \n
\n )}\n \n )}\n {value || t(`New ${name}`)}
\n );\n }, [filteredFieldArray, name]);\n\n const Definition = useCallback(() => {\n const value = filteredFieldArray.textarea;\n\n return (\n {value}
\n );\n }, [filteredFieldArray]);\n\n const Image = useCallback(() => {\n const value = filteredFieldArray.image;\n\n return value ? (\n <>\n \n
\n \n
\n \n {Image && (
\n \n
\n \n {\n isNewPanel()\n ? (\n <>\n
\n \n Loading... \n
\n \n {imageName} \n \n
\n \n \n
\n );\n};\n\nSchemaDropdown.propTypes = {\n value: string,\n onChange: func\n};\n\nSchemaDropdown.defaultProps = {\n value: '',\n onChange: f => f\n};\n\nexport default SchemaDropdown;\n","import SchemaImageUpload from './components/SchemaImageUpload';\nimport SchemaTextArea from './components/SchemaTextArea';\nimport SchemaTextInput from './components/SchemaTextInput';\nimport SchemaDropdown from './components/SchemaDropdown';\n\nexport const getFieldComponent = type => {\n const mapper = {\n text: SchemaTextInput,\n image: SchemaImageUpload,\n textarea: SchemaTextArea,\n dropdown: SchemaDropdown\n };\n return mapper[type];\n};\n","import { Button } from '@jotforminc/uikit';\nimport { t } from '@jotforminc/translation';\nimport {\n arrayOf, func, number, shape\n} from 'prop-types';\nimport styled from 'styled-components';\nimport React, { useCallback, useState } from 'react';\nimport { getFieldComponent } from './getFieldComponent';\n\nconst ScSchemeEditable = styled.div`\n .schemaEditable {\n display: flex;\n border-radius: 2px;\n background-color: #555F6E;\n\n &-dragHandleWrapper {\n padding: 7px;\n background-color: #0099FF;\n border-radius: 2px 0px 0px 2px;\n flex: 0 0 29px;\n }\n\n &-content {\n border: 1px solid #303339;\n border-radius: 0px 2px 2px 0px;\n padding: 16px;\n flex: 1 1 auto;\n min-width: 0;\n\n &-field {\n margin-top: 20px;\n\n &:first-of-type {\n margin-top: unset;\n }\n\n label { \n display: block;\n }\n\n input {\n width: 100%;\n border: 1px solid #303339;\n background-color: #626E81;\n box-shadow: none;\n padding: 9px 8px;\n }\n\n textarea {\n resize: none;\n outline: none;\n background-color: #626E81;\n color: #fff;\n width: 100%;\n border: 1px solid #303339;\n border-radius: 2px;\n padding: 9px 12px 22px 9px;\n font-size: 16px;\n font-family: inherit;\n height: 110px;\n }\n }\n\n &-actions {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-top: 20px;\n \n & > button {\n background: none;\n color: inherit;\n border: none;\n padding: 0;\n font: inherit;\n cursor: pointer;\n outline: inherit;\n text-transform: uppercase;\n padding: 10px 15px;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n border-radius: 2px;\n }\n \n .closeBtn { background-color: #303339; }\n .saveBtn { background-color: #78BB07; }\n }\n }\n }\n`;\n\nconst SchemaEditable = ({\n id, fields, onSave, onCancel, onChangeEditableID\n}) => {\n const [value, setValue] = useState(fields);\n\n const handleClose = useCallback(() => {\n onChangeEditableID('');\n onCancel();\n }, [onChangeEditableID, onCancel]);\n\n const handleOnChange = (type, label) => data => {\n const newValue = [];\n value.forEach(val => {\n newValue.push(val.label !== label ? val : { type, label, value: data });\n });\n setValue(newValue);\n };\n\n const handleOnSave = useCallback(() => {\n onSave({ id, fields: value });\n handleClose();\n }, [value, id, onSave, handleClose]);\n\n return (\n \n \n
\n \n {value.map(fieldProps => {\n const { type, label, ...rest } = fieldProps;\n const FieldComponent = getFieldComponent(type);\n\n return (\n
\n \n \n
\n );\n })}\n \n \n \n
\n \n {children}\n
\n );\n});\n\nconst SchemaItemList = ({\n items,\n onSortChange,\n ...rest\n}) => {\n const { editableItemID } = rest;\n\n const handleShouldSortingStart = useCallback(e => {\n const { nodeName } = e.target;\n\n if (nodeName === 'BUTTON' || typeof editableItemID === 'number') return true;\n return false;\n }, [editableItemID]);\n\n const [helperClass, setHelperClass] = useState('');\n\n const handleOnSortEnd = useCallback(e => {\n onSortChange(e);\n setHelperClass('');\n }, [onSortChange]);\n\n const handleSortMove = useCallback(() => {\n setHelperClass('isDragMove');\n }, []);\n\n return (\n {t('Height')}
\n \n
\n \n )}\n \n \n
\n \n
\n );\n};\n\nShrinkToggle.propTypes = {\n title: string,\n description: string,\n DescriptionRenderer: elementType,\n value: string,\n onChange: func,\n embeddedForm: string\n};\n\nShrinkToggle.defaultProps = {\n title: '',\n description: '',\n DescriptionRenderer: PanelItemDescriptionRenderer,\n value: 'No',\n onChange: f => f,\n embeddedForm: 'No'\n};\n\nexport default ShrinkToggle;\n","/* eslint-disable */\nconst JFExternalWidgetParamsServer = (function () {\n var root = {};\n var subscribeToken = -1;\n var subscriberIndex = {};\n var referrer = false;\n\n var registeredReceivers = {};\n\n root.subscribe = function (type, handler) {\n if (!subscriberIndex[type]) {\n subscriberIndex[type] = [];\n }\n var token = (++subscribeToken).toString();\n subscriberIndex[type].push({\n func: handler,\n token: token\n });\n\n return token;\n };\n\n root.unsubscribe = function (token) {\n for (var type in subscriberIndex) {\n var subscribers = subscriberIndex[type];\n for (var i = 0; i < subscribers.length; i++) {\n var subscriber = subscribers[i];\n if (token === subscriber.token) {\n subscribers.splice(i, 1);\n return token;\n }\n }\n }\n return this;\n };\n\n root.getSubscribers = function () {\n return subscriberIndex;\n };\n\n root.getRegisteredReceivers = function () {\n return registeredReceivers;\n };\n\n var publish = function () {\n // type of event is the first argument\n var type = arguments[0];\n // rest of arguments will be used as arguments for handler execution\n var args = [].slice.call(arguments, 1);\n if (!subscriberIndex[type]) {\n return false;\n }\n var subscribers = subscriberIndex[type];\n var len = subscribers ? subscribers.length : 0;\n while (len--) {\n subscribers[len].func(args[0]);\n }\n };\n\n /**\n * Start the process\n */\n root.begin = function (callback, refobject, targetframe) {\n var formID = ('formID' in refobject) ? refobject.formID : BuildSource.formID;\n var { qid } = refobject;\n var { name } = refobject;\n var { ref } = refobject;\n\n var key = qid + '-' + name;\n\n // avoid listening from another postMessage for each qid\n if (key in registeredReceivers) {\n callback && callback();\n } else {\n // set referrer\n var a = document.createElement('a');\n a.href = ref;\n referrer = `${a.protocol}//${a.hostname}`;\n\n // register qid to registeredReceivers\n registeredReceivers[key] = true;\n\n // start recieving\n XD.receiveMessage(message => {\n if (!message.data || !(typeof message.data === 'string' || message.data instanceof String)) return;\n var data = JSON.parse(message.data);\n\n // filter out events from other frames which cause builder hang up\n // specially if there are multiple widgets on 1 form\n if (parseInt(qid) !== parseInt(data.qid) || name !== data.name) {\n console.log('Rejecting postMessage from ', data.qid, data.name, ' we only receive from', qid, name);\n return;\n }\n\n // publish to all listerners/subscribers\n switch (data.type) {\n case 'widgetParamData':\n publish('paramData', data);\n break;\n case 'widgetFrameResize':\n publish('frameResize', data);\n break;\n }\n }, referrer);\n\n callback && callback();\n }\n\n // notify clients that we are now ready to receive\n XD.postMessage(JSON.stringify({\n type: 'ready',\n qid: qid,\n name: name,\n formID: formID,\n value: refobject.value,\n widget: refobject.widget\n }), referrer, targetframe);\n };\n\n return root;\n}());\n\nexport default JFExternalWidgetParamsServer;\n","import React, { createRef } from 'react';\nimport { string, func, shape } from 'prop-types';\nimport isUndefined from 'lodash/isUndefined';\nimport { JFExternalWidgetParamsServer } from '@jotforminc/widgets-js-sdk';\nimport { connect } from 'react-redux';\nimport SELECTORS from '../../../../store/selectors';\n\n// taken from builder repo\n// adjusted for app builder\nclass ExternalField extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n lastReceivedMessage: null\n };\n\n // bindings\n this.handleExternalFieldFrameLoad = this.handleExternalFieldFrameLoad.bind(this);\n\n // holds JFExternalWidgetParamsServer token\n this.JFExternalWidgetToken = null;\n this.externalIframeRef = createRef();\n }\n\n componentWillUnmount() {\n // remove load listener of external field iframe if any\n // const { externalFieldIframe } = this.refs;\n if (this.externalIframeRef) {\n const node = this.externalIframeRef.current;\n node.removeEventListener('load', this.handleExternalFieldFrameLoad);\n }\n\n // unsubcribe to any JFExternalWidgetParamsServer\n if (!isUndefined(this.JFExternalWidgetToken) && JFExternalWidgetParamsServer) {\n JFExternalWidgetParamsServer.unsubscribe(this.JFExternalWidgetToken);\n }\n }\n\n /**\n * calls on onload of iframe defined above\n * loads an external script and send messages to that iframe\n * @param {event} e iframe onload event\n * @param {[type]} params [description]\n * @return {[type]} [description]\n */\n handleExternalFieldFrameLoad(e) {\n const {\n value: val, onChange, itemID, src, name\n } = this.props;\n const { target } = e;\n const qid = parseInt(itemID, 10);\n const { formID } = this.props;\n const params = {\n formID,\n qid,\n name,\n ref: src,\n value: val\n };\n JFExternalWidgetParamsServer.begin(() => {\n this.JFExternalWidgetToken = JFExternalWidgetParamsServer.subscribe('paramData', message => {\n if (message && parseInt(message.qid, 10) === parseInt(params.qid, 10) && message.name === name) {\n // set state\n this.setState({\n lastReceivedMessage: message\n });\n // this.lastObtainedToken = message.value;\n\n // trigger onchange event\n const { value = '' } = message;\n onChange(value);\n }\n });\n const frame = document.getElementById(`externalFrame_key_${qid}_${name}`);\n JFExternalWidgetParamsServer.subscribe('frameResize', message => {\n if (message && parseInt(message.qid, 10) === parseInt(params.qid, 10) && message.name === name) {\n const height = parseInt(message.height, 10);\n if (!Number.isNaN(height)) {\n frame.style.height = `${height}px`;\n }\n }\n });\n }, params, target);\n }\n\n /**\n * Properly appends query string to a given url\n * http://stackoverflow.com/a/6021027/1460756\n */\n updateQueryStringParameter(uri, key, value) {\n const re = new RegExp(`([?&])${key}=.*?(&|$)`, 'i');\n const separator = uri.indexOf('?') !== -1 ? '&' : '?';\n let newuri = '';\n if (uri.match(re)) {\n newuri = uri.replace(re, `$1${key}=${value}$2`);\n } else {\n newuri = `${uri + separator + key}=${value}`;\n }\n return newuri;\n }\n\n render() {\n const { lastReceivedMessage } = this.state;\n const {\n id, src, name, question = {}, itemID: qid\n } = this.props;\n // let { qid } = question;\n const uri = `${encodeURIComponent(`${window.location.protocol}//${window.location.host}`)}`;\n let source = this.updateQueryStringParameter(src, 'ref', uri);\n source = this.updateQueryStringParameter(source, 'qid', qid);\n source = this.updateQueryStringParameter(source, 'name', name);\n source = this.updateQueryStringParameter(source, 'env', global.window.JOTFORM_ENV || 'PRODUCTION');\n\n let lastReceivedValue = lastReceivedMessage ? lastReceivedMessage.value : '';\n // if property is already set in question properties\n // - since src came from `default` param, we have to make sure we are getting the right value\n // - question prop value has the default value if the value prop is empty\n if (!isUndefined(question[name]) && question[name] !== src) {\n lastReceivedValue = question[name];\n }\n this.lastObtainedToken = lastReceivedValue;\n\n return (\n \n
\n );\n }\n}\n\nExternalField.propTypes = {\n src: string.isRequired,\n question: shape({}),\n name: string.isRequired,\n id: string.isRequired,\n formID: string.isRequired,\n onChange: func.isRequired,\n itemID: string.isRequired,\n value: string\n};\n\nExternalField.defaultProps = {\n question: {},\n value: ''\n};\n\nconst mapStateToProps = state => ({\n itemID: SELECTORS.getSelectedPortalItem(state)\n});\n\nexport default connect(mapStateToProps)(ExternalField);\n","import React from 'react';\nimport { t } from '@jotforminc/translation';\n\nimport { LAYOUT_TYPES } from '../../../../../../constants';\n\nimport DefualtLayout from '../../../../../../assets/icon_defaultLayout.svg';\nimport AllShrinkedLayout from '../../../../../../assets/icon_allShrinkedLayout.svg';\nimport NoIconLayout from '../../../../../../assets/icon_noIconLayout.svg';\nimport ShrinkedNoIconLayout from '../../../../../../assets/icon_shrinkedNoIconLayout.svg';\nimport AllFormsLayout from '../../../../../../assets/icon_allFormsLayout.svg';\n// import MixedLayout from '../../../../../../assets/icon_mixedLayout.svg';\nimport PlainLayout from '../../../../../../assets/icon_plainLayout.svg';\nimport ShrinkedNoHeaderLayout from '../../../../../../assets/icon_shrinkedNoHeaderLayout.svg';\nimport LeftAlignedLayout from '../../../../../../assets/icon_leftAlignedLayout.svg';\nimport RightAlignedLayout from '../../../../../../assets/icon_rightAlignedLayout.svg';\nimport CenterAlignedLayout from '../../../../../../assets/icon_centerAlignedLayout.svg';\nimport LargeElementLayout from '../../../../../../assets/icon_largeElementLayout.svg';\nimport { FEATURE_NAMES } from '../../../../../../constants/features';\nimport { isFeatureEnabled } from '../../../../../../utils/features/helper';\n\nexport const getLayoutProps = () => ({\n [LAYOUT_TYPES.DEFAULT]: {\n title: t('Default'),\n icon: \n {icon}\n
\n {title}
\n \n handleIconSelectorOnChange(url)}\n onRemove={() => { handleMenuIconChange('No'); setIsIconSelectorVisible(false); }}\n overriddenIcons={OVERRIDED_ICON_LIST[RightPanelModes.MENU_SETTINGS]}\n value={isIconVisible ? mobileMenuIconWithDefault : ''}\n allowRemove\n removeButtonText={t('Remove Icon')}\n uniqKey=\"menuIcon\"\n />\n
\n )}\n \n
\n \n
\n \n setIsIconSelectorVisible(isVisible => !isVisible)}\n className={t(`taste pageSettingsIconBtn ${hasIcon ? 'change' : 'add'}`)}\n {...(!isMobilePhone && { name: t(`${hasIcon ? 'Change' : 'Add'} Icon`) })}\n >\n {hasIcon ? (\n \n \n handlePageUpdate({ showPageIcon: 'Yes', pageIcon: url })}\n onRemove={() => handlePageUpdate({ showPageIcon: 'No', pageIcon: '' })}\n uniqKey=\"pageItem\"\n />\n \n \n \n )}\n
\n );\n};\n\nPageIconButton.defaultProps = {\n showPageIcon: '',\n pageIcon: '',\n handlePageUpdate: () => { }\n};\n\nPageIconButton.propTypes = {\n showPageIcon: string,\n pageIcon: string,\n handlePageUpdate: func\n};\n\nexport default memo(PageIconButton);\n","import React from 'react';\nimport {\n IconTrashFilled,\n IconEyeFilled,\n IconEyeSlashFilled,\n IconPencilFilled,\n IconKeyboard\n} from '@jotforminc/svg-icons';\nimport { t } from '@jotforminc/translation';\nimport {\n bool,\n func\n} from 'prop-types';\nimport { Button } from '@jotforminc/magnet';\nimport { ScPageSettingsPopover } from '../../../../styles/ScPageSettingsPopover';\nimport { isFeatureEnabled } from '../../../../../../utils/features/helper';\nimport { FEATURE_NAMES } from '../../../../../../constants/features';\n\nconst PageSettingsPopover = ({\n onFocusTextInput, toggleVisibility, handleDeletePage, showPageOnNavigation\n}) => {\n const renderText = value => {\n return {t(value)}
;\n };\n\n return (\n\n {\n isLocked ?
\n \n \n {isYes(showAllPagesIcon) && (\n handlePageNameChange('name', e.target.value)}\n onBlur={handlePageNameTextBlur}\n suffix={inputSuffix || {\n as: 'button',\n icon: IconEllipsisVertical,\n ref: pageSettingsButtonPopoverRef,\n onClick: () => setTooltipVisible(true)\n }}\n theme=\"dark\"\n maxLength={50}\n />\n \n {isTooltipVisible && (\n \n
\n \n );\n});\n\nPageSettingsItem.propTypes = {\n page: shape({}),\n draggableProps: shape({}),\n dragHandleProps: shape({}),\n showAllPagesIcon: string,\n isLocked: bool,\n inputSuffix: shape({})\n};\n\nPageSettingsItem.defaultProps = {\n page: {},\n draggableProps: {},\n dragHandleProps: {},\n showAllPagesIcon: '',\n isLocked: false,\n inputSuffix: undefined\n};\n\nexport default memo(PageSettingsItem);\n","import React from 'react';\nimport { number, shape } from 'prop-types';\nimport { Draggable } from 'react-beautiful-dnd';\nimport PageSettingsItem from './PageSettingsItem';\n\nconst DraggablePageSettingsItem = props => {\n const {\n page,\n index,\n inputSuffix\n } = props;\n const isLocked = !!page?.linkedItemID;\n return (\n \n {filteredPages.map((page, index) => (\n
\n )}\n {t('There is no page.')}
\n )}\n \n
\n \n {pages.map((page, index) => (\n
\n )}\n \n dispatch(ACTION_CREATORS.addNewPageAction({ newPageOrder: pages.length + 1, dontSelect: true }))}\n startIcon={IconPlusSm}\n fullWidth\n >\n {t('Add Page')}\n \n
\n \n
\n \n
\n \n {images && (\n
\n\n {(isMobileOrTablet || itemSettingsOpen) && (\n \n {(Array.isArray(images) && images.length > 0) && (\n 
\n )}\n
\n )}\n \n {name}\n {formattedPrice && (\n \n {formattedPrice}\n \n )}\n {text && (\n \n {text}\n \n )}\n
\n \n {actionButtons.map(button => (\n button.action(id)}\n />\n ))}\n
\n )}\n\n {!isMobileOrTablet && (\n <>\n \n {settingsActionButtons?.length ? (\n settingsActionButtons.map(button => (\n button.action(id)}\n />\n ))\n ) : (\n actionButtons.map(button => (\n button.action(id)}\n />\n ))\n )}\n
\n \n )}\n \n \n \n {renderProducts()}\n \n
\n );\n};\n\ninterface IActions {\n sortProducts: FTSortProducts\n removeProduct: FTremoveProduct\n updateProduct: FTupdateProduct,\n createProduct: FTcreateProduct\n}\n\ninterface IProductItemListProps {\n actions: IActions\n}\n\nexport default ProductItemList;\n","import React, { useCallback } from 'react';\nimport { closest } from '@jotforminc/utils';\n\nconst Tabs = ({ children, onSelect } : ITabs) : JSX.Element => {\n const onClickHandler = useCallback((event: React.MouseEvent{children}
;\n};\n\ninterface ITabs {\n children: React.ReactNode,\n onSelect: (tabId: string) => void\n}\n\nexport default Tabs;\n","import React from 'react';\nimport classNames from 'classnames';\nimport { Button } from '@jotforminc/uikit';\n\nconst Tab = ({ id, text, className }: ITab) : JSX.Element => {\n return ;\n};\n\ninterface ITab {\n id: string,\n text: string,\n className?: string\n}\n\nTab.defaultProps = {\n className: ''\n};\n\nexport default Tab;\n","import React, { useState } from 'react';\nimport { t } from '@jotforminc/translation';\nimport { getExactPrice } from '@jotforminc/money-utils';\nimport { isThereASeparator, getRawPrice } from '../fields/ConnectionButton/utils';\nimport { TCurrencyCode } from '../../types/common';\nimport { isLetterKey } from '../../utils';\n\ntype PriceInputProps = {\n price: number,\n currency: TCurrencyCode,\n onValueChangeNative: (e: React.ChangeEvent\n