\n {show && (\n
\n \n
\n )}\n \n
\n { this.modalRef = r; }} className=\"modal-content\">\n {closable && (\n this.toggle(false)}\n onKeyDown={e => {\n if (e.key === 'Enter') {\n e.preventDefault();\n this.toggle(false);\n }\n }}\n />\n )}\n {children}\n
\n {/* Below div is necessary for accessibility tab trap */}\n {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}\n \n ${textValue}
`;\n propsRearranged = { ...properties, answerProps: { ...properties.answerProps, style: {} } };\n }\n }\n\n const close = () => {\n root.unmount();\n };\n\n const save = () => {\n // save the current editor value to document\n let newValue = global.tinyMCE.editors[global.tinyMCE.editors.length - 1].getContent();\n newValue = newValue.replace(/\\n(?=<)/g, '');\n const value = { text: newValue };\n // update field if it is a fillable text field\n if (type === 'Question' && questionType === 'control_text') {\n dispatch(updateFormQuestion(value, qid));\n }\n dispatch(updatePath(direction, {\n ...propsRearranged,\n ...value\n }));\n };\n\n root.render(\n \n
\n \n {React.Children.map(children, child => (\n
\n {child}
\n ))}\n \n {React.Children.map(children, (_, childIndex) => (\n {\n setCurrentSlideIndex(childIndex);\n clearInterval(autoSlideIntervalID);\n autoSlideIntervalID = setInterval(() => {\n setCurrentSlideIndex(s => inRange(s + 1, 0, childCount - 1));\n }, autoSlideDurationSeconds * 1000);\n }}\n />\n ))}\n
\n \n );\n}\n\nSliderComponent.propTypes = {\n children: node.isRequired,\n autoSlideDurationSeconds: number,\n disableAutoSlide: bool\n};\n\nSliderComponent.defaultProps = {\n autoSlideDurationSeconds: undefined,\n disableAutoSlide: false\n};\n\nexport default SliderComponent;\n","\n","\n","\n","\n","\n","","","","\n","","","\n","\n","\n","\n","\n","\n","\n","\n","\n","\n","\n","\n","\n","\n","\n","\n","\n","/* eslint-disable max-statements */\nimport React from 'react';\nimport { connect } from 'react-redux';\nimport PropTypes from 'prop-types';\nimport isEqual from 'lodash/isEqual';\nimport classNames from 'classnames';\nimport { throttle } from '@jotforminc/async-throttle';\nimport { GridLayout, bottom, getLayoutItem } from '@jotforminc/react-grid-layout';\n\nimport {\n removeItem, getIndex, hasSettings, updatePath\n} from '../../../store/document';\nimport Content from '../../Canvas/Content';\nimport {\n adaptiveToAboveFields,\n deprecatedFields,\n pdfType,\n freeSizeFields\n} from '../../../constants';\nimport {\n sendAnalytics,\n getRealPath,\n mmToPx,\n pxToMm,\n checkElementAnswer,\n checkValInObj,\n isAllowedWidget\n} from '../../../utils';\nimport Performance from '../../../utils/Performance';\nimport { CanvasClass, DNDContext } from '../../Canvas/Canvas';\nimport ElementToolbox from '../../ElementToolbox';\nimport { showContextMenu, setHasEmptyFields } from '../../../store/ui';\nimport { selectPath } from '../../../store/inspector';\nimport { findDirectAboveLayoutItem, changedLayoutItemIndex, isLayoutItemEqual } from '../../../utils/layoutHelper';\nimport LineFixer from '../../../utils/layoutHelper/LineFixer';\nimport { prepareProps } from '../../../utils/Question';\nimport BatchUpdateHelper from '../../../savior/BatchUpdateHelper';\nimport PdfNavigationTutorial from '../../Tutorial/PdfNavigation';\n\nclass Section extends React.Component {\n static count = 0;\n\n constructor(props) {\n super(props);\n this.pathString = getRealPath(props.path);\n this.questionFields = {};\n this.textWrappers = {};\n this.layoutItems = {};\n this.firstRender = 'mount';\n this.lastResizedElement = {};\n this.callbacks = {};\n }\n\n // eslint-disable-next-line\n UNSAFE_componentWillMount() {\n this.fixer = new LineFixer();\n this.calculateAutoHeightPerformance = new Performance(`calculateAutoHeight-${Section.count++}`, 'calculateAutoHeight');\n }\n\n componentDidMount() {\n this.fixer.resetLineHeight();\n this.calculateAutoHeight();\n }\n\n // eslint-disable-next-line\n getFirstRender = (nextProps) => {\n const {\n isPreview, isPrinting, labelDirection, orientation, data: submissionData, zoom, selected = [], childDocs, questions, l, layout, marginValues\n } = this.props;\n const {\n isPreview: nextIsPreview,\n isPrinting: nextIsPrinting,\n labelDirection: nextLabeldirection,\n orientation: nextOrientation,\n data: nextData,\n zoom: nextZoom,\n selected: nextSelected = [],\n childDocs: nextChildDocs,\n path: nextPath,\n questions: nextQuestions,\n l: nextL,\n layout: nextLayout,\n marginValues: nextMarginValues\n } = nextProps;\n try {\n if (!nextChildDocs) return;\n\n if (nextIsPrinting !== isPrinting || nextIsPreview !== isPreview) {\n return 'modeChanged';\n }\n // Make sure line height is calculated\n if (\n nextZoom !== zoom\n || nextLabeldirection !== labelDirection\n || nextOrientation !== orientation\n || (nextData && nextData.id !== submissionData.id)\n ) {\n // Clear all line heights, it will already get recalculated via firstRender\n return 'needLineHeightUpdate';\n }\n\n if (nextSelected[0] === nextPath[0]) {\n const selectedItemCurrent = this.selectedItem(selected[0], childDocs);\n const selectedItemNext = this.selectedItem(nextSelected[0], nextChildDocs);\n\n // check if any update exists in selected item (text, label properties etc.)\n if (selectedItemCurrent && selectedItemNext) {\n if (selectedItemCurrent.i === selectedItemNext.i && !isEqual(selectedItemCurrent, selectedItemNext)) {\n return 'selectedItemChanged';\n }\n\n if (selectedItemNext.type === 'Question') {\n const { qid } = selectedItemNext;\n const prevQuestion = questions.find(q => q.qid === qid.toString());\n const nextQuestion = nextQuestions.find(q => q.qid === qid.toString());\n if (isEqual(prevQuestion, nextQuestion)) {\n return 'questionChanged';\n }\n }\n }\n }\n\n if (\n !isLayoutItemEqual(nextL, l)\n ) {\n return 'lChanged';\n }\n\n this.changedLI = changedLayoutItemIndex(nextLayout, layout);\n if (this.changedLI !== -1) {\n return 'layoutChanged';\n }\n\n if (\n nextChildDocs.length !== childDocs.length\n || !isEqual(nextChildDocs, childDocs)\n ) {\n return 'childDocsChanged';\n }\n\n if (!isEqual(marginValues, nextMarginValues)) {\n return 'marginValuesChanged';\n }\n } catch (e) {\n return true;\n }\n\n return false;\n };\n\n // eslint-disable-next-line\n UNSAFE_componentWillUpdate(nextProps) {\n if (getRealPath(nextProps.path) !== getRealPath(this.props.path)) {\n this.pathString = getRealPath(nextProps.path);\n CanvasClass.updateSectionRef(getRealPath(this.props.path), this.pathString);\n }\n\n if (this.firstRender) {\n return true;\n }\n\n this.firstRender = this.getFirstRender(nextProps);\n }\n\n componentDidUpdate() {\n if (this.firstRender) {\n this.calculateAutoHeight();\n this.firstRender = false;\n }\n }\n\n componentWillUnmount() {\n this.fixer.destroy();\n this.fixer = null;\n }\n\n onLayoutChange = (newLayout, newLayoutItem) => {\n const { childDocs } = this.props;\n\n let layoutToCommit = newLayout;\n\n if (this.shouldCommit) {\n layoutToCommit = this.shouldCommit;\n this.shouldCommit = null;\n return this.commitLayout(layoutToCommit);\n }\n\n if (CanvasClass.isMovingFromLeft && newLayoutItem) {\n // No need to do something if only one element is going to be there.\n if (childDocs.length === 1) return;\n\n // new layout item has been added, need to resize if it's an adaptive-to-above element..\n const newChildDoc = getLayoutItem(childDocs, newLayoutItem.i);\n if (newChildDoc && adaptiveToAboveFields.includes(newChildDoc.type)) {\n const directAboveLayoutItem = findDirectAboveLayoutItem(newLayoutItem, newLayout);\n if (directAboveLayoutItem) {\n const layoutItemIndex = getIndex(newLayout, newLayoutItem.i);\n newLayout[layoutItemIndex] = { ...newLayoutItem, w: directAboveLayoutItem.w }; // eslint-disable-line\n setTimeout(() => {\n this.commitLayout(newLayout);\n });\n }\n }\n }\n };\n\n onResize = throttle(lay => this.fixLineHeight(lay), 17);\n\n onResizeStop = (layout, oldItem, newItem) => {\n document.querySelector('body').classList.remove('dragging');\n const index = getIndex(layout, oldItem.i);\n const doc = this.props.childDocs[index];\n const isFreeSize = freeSizeFields[doc.type];\n sendAnalytics('elementResized', doc.type);\n\n const layoutToCommit = layout;\n\n let userHeight = newItem.h - (newItem.spaceHeight || 0);\n const h = userHeight;\n\n const cancelUserHeight = userHeight < newItem.DOMHeight;\n\n if (!isFreeSize && cancelUserHeight) {\n userHeight = undefined;\n }\n\n layoutToCommit[index] = {\n ...newItem,\n h,\n userHeight\n };\n\n // Change child width if it is spanning the whole section\n if (doc.type === 'Section' && doc.layout) {\n const newWidth = layout[index].w;\n\n const innerLayout = doc.layout.map(child => ({\n ...child,\n w: oldItem.w === child.w ? newWidth : child.w\n }));\n\n BatchUpdateHelper.setLayout([...this.props.path, index], innerLayout);\n }\n\n // This is the actual layout we need to save\n this.shouldCommit = layoutToCommit;\n this.firstRender = true;\n };\n\n setPlaceholderId = id => {\n this.placeholderId = id;\n };\n\n selectedItem = (selectedArr, childDocs) => {\n if (!selectedArr || !childDocs) {\n return false;\n }\n const lastItem = selectedArr[selectedArr.length - 1];\n return childDocs[lastItem];\n };\n\n calculatePosition = (offsetX, offsetY) => {\n const selfDOM = document.querySelector(`[data-rgl=\"${this.pathString}\"]`);\n const {\n top, left, height, width\n } = selfDOM.getBoundingClientRect();\n const cols = this.props.l.w || 12;\n\n const relativeX = offsetX - left;\n const relativeY = offsetY - top;\n\n const xRatio = relativeX / width;\n const yRatio = relativeY / height;\n\n const rows = pxToMm(height);\n\n /*\n Using rootZoom as a zoomDivider is necessary and adequate for accurate position calculation for placeholder and draggingNode.\n However, if you have a case points otherwise please contact Burak.\n */\n const zoomDivider = this.props.rootZoom;\n\n const x = Math.round(Math.max(0, Math.min((cols * xRatio), cols) / zoomDivider));\n const y = Math.round(Math.max(0, (rows * yRatio) / zoomDivider));\n\n return {\n x, y\n };\n };\n\n removeNode = itemPath => () => {\n this.props.dispatch(removeItem(getRealPath(itemPath)));\n };\n\n onResizeStart = () => document.querySelector('body').classList.add('dragging');\n\n generateDOM = (childDocs, layout) => {\n const {\n selected, editable, path, zoom,\n contentWidth, contentHeight, rootZoom, hideIfEmpty, size, data,\n docType, form, showLabels, labelDirection, isPreview, isPrinting, readOnlyMode,\n handleShowSettings, alignAllQuestions, userLanguage, companyDomain, isEnterprise\n } = this.props;\n\n if (!layout) return { layout, domElements: [] };\n\n const domElements = [];\n const layoutWithoutHiddens = [];\n let hasEmpty = false;\n\n const isDocumentType = docType === pdfType.DOCUMENT;\n // hiding the empty questions are not effective in editing mode\n const engageHideIfEmpty = isDocumentType && (isPreview || isPrinting || readOnlyMode);\n const multipleSelected = selected.length > 1;\n\n const selectedStrs = selected.map(p => p.join('.'));\n\n /* eslint-disable complexity */\n if (childDocs) {\n // sorting here causes fields re-arrange on preview\n layout.forEach(layoutItem => {\n if (!layoutItem) {\n return;\n }\n\n const i = getIndex(childDocs, layoutItem.i);\n const item = childDocs[i];\n\n if (!item) {\n return;\n }\n const sectionProps = item.type === 'Section' ? {\n handleShowSettings\n } : {};\n\n const itemPath = [...path, i];\n const itemPathStr = itemPath.join('.');\n const isThisSelected = selectedStrs.findIndex(p => itemPathStr === p) > -1;\n const hasSelected = !isThisSelected && selectedStrs.findIndex(p => p.indexOf(itemPathStr) === 0) > -1;\n const doHighlight = (isThisSelected && editable);\n const hasSetting = selected.length === 1 && hasSettings(item.type);\n const isSheetExpandedField = props => checkValInObj(props)('sheetField')('Yes') && checkValInObj(props)('isSubColumn')('1');\n\n const contextHandler = this.showContext(itemPath);\n\n const parsedProps = prepareProps({\n ...item,\n size,\n form,\n userLanguage,\n showLabels,\n data,\n l: layoutItem,\n ...sectionProps,\n contentWidth,\n contentHeight,\n editable,\n labelDirection,\n alignAllQuestions,\n shouldResolveDynamicText: isDocumentType,\n returnUnresolved: !engageHideIfEmpty,\n companyDomain: isEnterprise ? companyDomain : window.location.hostname\n });\n // Hide fields created from Sheets column expansion feature\n if (isSheetExpandedField(parsedProps)) {\n return;\n }\n if (item.type === 'Widget' && !isAllowedWidget(parsedProps)) {\n return;\n }\n\n let isEmpty = false;\n if (hideIfEmpty && engageHideIfEmpty) {\n isEmpty = checkElementAnswer(parsedProps, item); // Check if elements' answers empty\n }\n\n const hasDefaultText = !!((item.type === 'Text' && !item.text));\n const isSectionLoaded = item.type === 'Section' && item.childDocs.length > 0;\n\n hasEmpty = hasEmpty || isEmpty;\n\n layoutWithoutHiddens.push({\n ...layoutItem,\n h: isEmpty ? 0 : layoutItem.h\n });\n\n if (isEmpty || deprecatedFields.includes(item.type)) {\n domElements.push();\n } else {\n domElements.push( // eslint-disable-line\n { this.ddRef = r; }} className={`dropview ${customClassName}${show ? ' active' : ''}${disabled ? ' disabled' : ''}`}>\n ['Enter', 'Space'].includes(e.code) && this.handleClickInside()}\n >\n {title}\n \n {show && (\n \n {children}\n
\n )}\n \n );\n }\n}\n","\n","\n","var _path, _path2, _path3, _path4, _path5;\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 SvgIconHipaaWarning = props => /*#__PURE__*/React.createElement(\"svg\", _extends({\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n viewBox: \"0 0 64 64\"\n}, props), _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M51.009 11.59L34.623 6.44602C32.7296 5.85157 30.6994 5.85157 28.806 6.44602L12.422 11.59C11.723 11.8079 11.1114 12.2426 10.676 12.8312C10.2405 13.4199 10.0038 14.1318 10 14.864V20.994C10.0078 28.0964 11.7337 35.0915 15.0303 41.3825C18.3269 47.6734 23.0965 53.0735 28.932 57.122C29.7335 57.6934 30.6936 58.0001 31.678 57.999C32.6708 58.0169 33.6415 57.7049 34.438 57.112C40.2731 53.0634 45.0441 47.6656 48.3455 41.3775C51.6468 35.0894 53.3808 28.097 53.4 20.995V14.916C53.4541 14.1693 53.2444 13.4272 52.8075 12.8192C52.3705 12.2112 51.734 11.7758 51.009 11.589V11.59Z\",\n fill: \"#008EF9\",\n stroke: \"#13B4FF\",\n strokeWidth: 2.017\n})), _path2 || (_path2 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M38.5 16.719C37.396 15.809 36.594 16.037 35.489 18.005C35.2438 18.48 34.8622 18.8708 34.3932 19.1272C33.9242 19.3837 33.3892 19.494 32.857 19.444V19.178C33.3793 18.9273 33.8009 18.5067 34.0528 17.9849C34.3047 17.4632 34.3718 16.8714 34.2433 16.3066C34.1148 15.7417 33.7981 15.2372 33.3453 14.8758C32.8925 14.5145 32.3303 14.3177 31.751 14.3177C31.1717 14.3177 30.6095 14.5145 30.1567 14.8758C29.7039 15.2372 29.3873 15.7417 29.2587 16.3066C29.1302 16.8714 29.1974 17.4632 29.4492 17.9849C29.7011 18.5067 30.1227 18.9273 30.645 19.178V19.448C30.1127 19.4972 29.5779 19.3861 29.1092 19.129C28.6405 18.8718 28.2595 18.4804 28.015 18.005C26.912 16.007 26.11 15.807 25.005 16.719C23.861 17.626 19.438 22.887 14.015 22.394C14.3725 23.1117 14.9609 23.6884 15.6856 24.0316C16.4103 24.3747 17.2293 24.4643 18.011 24.286C18.5595 24.7748 19.2445 25.0839 19.974 25.1717C20.7034 25.2595 21.4422 25.1218 22.091 24.777C22.5877 25.1336 23.179 25.3348 23.7901 25.3553C24.4011 25.3757 25.0046 25.2145 25.524 24.892C25.9863 25.2212 26.5335 25.4105 27.1003 25.4372C27.6672 25.464 28.2298 25.3272 28.721 25.043C29.301 25.44 30.005 25.615 30.704 25.535L30.783 31.629C30.668 31.591 30.555 31.591 30.44 31.55C30.44 31.55 28.61 31.173 26.704 30.643C25.2318 30.3363 23.8251 29.7731 22.548 28.979C22.588 28.94 22.627 28.94 22.662 28.9C22.903 28.785 23.161 28.708 23.426 28.672C24.2577 28.5301 25.0994 28.4548 25.943 28.447C26.6763 28.3464 27.4207 28.3593 28.15 28.485C28.15 28.405 29.219 28.599 29.484 27.539C29.4891 27.5343 29.4932 27.5286 29.4959 27.5222C29.4987 27.5158 29.5001 27.5089 29.5 27.502C29.5 27.4951 29.4986 27.4882 29.4958 27.4819C29.4931 27.4755 29.4891 27.4698 29.484 27.465C29.406 26.745 28.834 26.707 28.381 26.594C27.929 26.5018 27.4644 26.4889 27.008 26.556C25.329 26.669 20.144 26.254 19.497 28.98V29.167C19.724 31.513 24.607 32.537 28.191 33.254C27.6287 33.6148 27.1504 34.0921 26.7885 34.6536C26.4265 35.2152 26.1894 35.8479 26.093 36.509C25.979 37.985 27.16 39.384 29.867 40.937C27.807 42.413 26.434 43.775 26.549 45.402C26.7935 46.3577 27.2589 47.2427 27.9078 47.9858C28.5566 48.7288 29.3709 49.3091 30.285 49.68C29.484 48.5023 28.8908 47.1961 28.531 45.818C28.417 45.018 28.874 43.847 30.895 42.421L30.975 47.416C30.975 47.6181 31.0553 47.8119 31.1982 47.9548C31.3411 48.0977 31.5349 48.178 31.737 48.178C31.9391 48.178 32.1329 48.0977 32.2758 47.9548C32.4187 47.8119 32.499 47.6181 32.499 47.416L32.578 42.533C34.408 43.896 34.828 45.03 34.751 45.788C34.3916 47.1662 33.7984 48.4725 32.997 49.65C33.912 49.2805 34.727 48.7006 35.3761 47.9573C36.0252 47.2141 36.49 46.3284 36.733 45.372C36.847 43.708 35.473 42.345 33.415 40.907C36.16 39.354 37.305 37.955 37.189 36.479C37.082 35.8213 36.8404 35.1928 36.4794 34.6327C36.1184 34.0727 35.6458 33.5931 35.091 33.224C38.638 32.504 43.557 31.484 43.785 29.138V28.95C43.138 26.262 37.951 26.68 36.274 26.526C35.8162 26.496 35.3565 26.5087 34.901 26.564C34.441 26.642 33.871 26.677 33.798 27.434V27.514C33.89 27.7935 34.0692 28.0362 34.3093 28.2063C34.5494 28.3764 34.8378 28.465 35.132 28.459C35.8677 28.3907 36.6075 28.3784 37.345 28.422C38.1876 28.4489 39.028 28.524 39.862 28.647C40.124 28.695 40.38 28.771 40.626 28.873C40.664 28.913 40.74 28.913 40.74 28.953C39.4632 29.7475 38.0563 30.3108 36.584 30.617C35.3476 30.9562 34.1014 31.2586 32.847 31.524C32.8264 31.5217 32.8055 31.5239 32.7858 31.5305C32.7661 31.537 32.7481 31.5478 32.733 31.562L32.812 25.544C33.5108 25.6308 34.2169 25.4555 34.794 25.052C35.2854 25.3362 35.8483 25.473 36.4154 25.4461C36.9824 25.4191 37.5298 25.2296 37.992 24.9C38.5037 25.2252 39.1017 25.3884 39.7076 25.368C40.3136 25.3477 40.8993 25.1448 41.388 24.786C42.0369 25.1306 42.7758 25.2682 43.5052 25.1803C44.2347 25.0923 44.9196 24.783 45.468 24.294C46.2499 24.4725 47.0691 24.3831 47.794 24.0399C48.5189 23.6968 49.1075 23.1199 49.465 22.402C44.034 22.889 39.61 17.626 38.5 16.719ZM29.31 38.259C28.623 37.843 28.311 37.276 28.395 36.897C28.433 36.367 28.244 35.118 30.76 34.171L30.839 39.204C30.352 38.897 29.847 38.557 29.313 38.259H29.31ZM34.801 36.897C34.881 37.276 34.533 37.843 33.886 38.259C33.429 38.524 33.009 38.826 32.589 39.092L32.669 34.283C34.92 35.151 34.767 36.36 34.805 36.891L34.801 36.897Z\",\n fill: \"white\"\n})), _path3 || (_path3 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M47 60.334C53.6274 60.334 59 54.9471 59 48.302C59 41.6569 53.6274 36.27 47 36.27C40.3726 36.27 35 41.6569 35 48.302C35 54.9471 40.3726 60.334 47 60.334Z\",\n fill: \"#FF4947\"\n})), _path4 || (_path4 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M45 40.28H48.6L48.2 50.829H45.8L45 40.28Z\",\n fill: \"white\"\n})), _path5 || (_path5 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M47 56.285C48.1046 56.285 49 55.4706 49 54.466C49 53.4614 48.1046 52.647 47 52.647C45.8954 52.647 45 53.4614 45 54.466C45 55.4706 45.8954 56.285 47 56.285Z\",\n fill: \"white\"\n})));\nexport default SvgIconHipaaWarning;","\n","\n","import React, { Fragment } from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport classNames from 'classnames';\nimport get from 'lodash/get';\nimport { bottom } from '@jotforminc/react-grid-layout';\nimport WrappingEl from '../../BasicPDFElements/PageBreak';\nimport ElementToolbox from '../../ElementToolbox';\nimport { PageSizes, pageBreakHeight } from '../../../constants';\nimport { selectPath, deselect } from '../../../store/inspector';\nimport { updateDocument } from '../../../store/document';\nimport { decOverflowPageCount, incOverflowedPageCount } from '../../../store/ui';\n\nclass PageBreak extends React.Component {\n static nextState = ({ page, selected }) => {\n const selfPath = [page, -1];\n const isSelected = selected[0] && selected[0].join(',') === selfPath.join(',');\n return {\n selfPath,\n isSelected\n };\n };\n\n constructor(props) {\n super(props);\n this.state = PageBreak.nextState(props);\n }\n\n componentDidMount = () => {\n document.addEventListener('keydown', this.handleShortCut);\n };\n\n // eslint-disable-next-line\n UNSAFE_componentWillReceiveProps = (props) => {\n this.setState(PageBreak.nextState(props));\n };\n\n componentWillUnmount = () => {\n document.removeEventListener('keydown', this.handleShortCut);\n this.props.dispatch(incOverflowedPageCount());\n };\n\n handleShortCut = e => {\n const { isSelected } = this.state;\n if (isSelected && (e.which === 8 || e.which === 46)) {\n e.stopPropagation();\n e.preventDefault();\n this.handleRemove();\n }\n };\n\n handleRemove = () => {\n const { document, dispatch, page } = this.props;\n const nextPage = get(document, ['childDocs', page + 1]);\n if (!nextPage) {\n return;\n }\n\n const thisPage = get(document, ['childDocs', page]);\n thisPage.childDocs = [...thisPage.childDocs, ...nextPage.childDocs];\n const minY = bottom(thisPage.layout);\n\n thisPage.layout = [\n ...thisPage.layout,\n ...nextPage.layout.reduce((layout, l) => {\n layout.push({ ...l, y: l.y + minY });\n return layout;\n }, [])\n ];\n\n const childDocs = [...document.childDocs.slice(0, page), thisPage, ...document.childDocs.slice(page + 2)];\n this.props.dispatch(decOverflowPageCount(1));\n dispatch(updateDocument(childDocs, true));\n };\n\n handleSelect = e => {\n const { dispatch } = this.props;\n const { isSelected, selfPath } = this.state;\n if (!isSelected) {\n e.stopPropagation();\n dispatch(deselect());\n dispatch(selectPath(selfPath));\n }\n };\n\n passiveArea = () => {\n const {\n isPreview, isPrinting, position, document, zoom, readOnlyMode\n } = this.props;\n\n if (isPreview || isPrinting || readOnlyMode) return false;\n\n const pageSize = PageSizes[document.size][1];\n const realPos = position + document.marginValues.top;\n const realHeight = pageBreakHeight / zoom;\n const btm = realPos + realHeight;\n\n if (btm > pageSize) {\n if (btm % pageSize < realHeight) {\n return false;\n }\n }\n\n return (pageSize - document.marginValues.top) - (btm % pageSize);\n };\n\n render() {\n const passiveArea = this.passiveArea();\n\n if (passiveArea === false) {\n return null;\n }\n\n const { zoom } = this.props;\n const { isSelected } = this.state;\n\n return (\n <>\n \n
\n \n {passiveArea && }\n \n );\n }\n}\n\nPageBreak.propTypes = {\n isPreview: PropTypes.bool.isRequired,\n isPrinting: PropTypes.bool.isRequired,\n dispatch: PropTypes.func.isRequired,\n document: PropTypes.shape({}).isRequired,\n page: PropTypes.number.isRequired,\n position: PropTypes.number.isRequired,\n /* eslint-disable react/no-unused-prop-types */\n selected: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.shape({}))).isRequired,\n zoom: PropTypes.number.isRequired\n};\n\nconst mapState = ({\n ui, inspector, document, documentView\n}) => ({\n isPrinting: ui.isPrinting,\n isPreview: ui.previewModeVisible,\n readOnlyMode: ui.isReadOnlyMode,\n selected: inspector.selected,\n document: document.present,\n zoom: documentView.zoom\n});\n\nexport default connect(mapState)(PageBreak);\n","import React, { Fragment } from 'react';\nimport PropTypes from 'prop-types';\nimport { t } from '@jotforminc/translation';\nimport RichTextEditor from '@jotforminc/rich-text-editor';\nimport Modal from './Modal';\nimport Button from './Button';\n\nclass TextEditorModal extends React.Component {\n static propTypes = {\n onModalClose: PropTypes.func.isRequired,\n content: PropTypes.string.isRequired,\n onSave: PropTypes.func.isRequired,\n questions: PropTypes.arrayOf(PropTypes.shape({})).isRequired,\n addFormFields: PropTypes.bool.isRequired\n };\n\n onSaveClick = () => {\n // Save to props\n this.props.onSave();\n this.props.onModalClose();\n };\n\n renderEditor() {\n const FONT_SIZES = ['8pt', '9pt', '10pt', '11pt', '12pt', '13pt', '14pt', '16pt', '18pt', '24pt', '36pt', '48pt', '60pt', '72pt'];\n\n return React.createElement(RichTextEditor, {\n // key: `richTextEditor${this.props.currentQuestion.qid}`,\n content: this.props.content,\n questions: this.props.questions.filter(q => q.type !== 'control_mixed'),\n staticFields: [\n { text: t('Submission ID'), placeholder: '{id}' },\n { text: t('Form Title'), placeholder: '{form_title}' },\n { text: t('Edit Link'), placeholder: '{edit_link}' },\n { text: t('IP Address'), placeholder: '{ip}' }\n ],\n config: {\n menubar: '',\n plugins: 'autolink link image lists print preview textcolor table code paste searchreplace advlist',\n paste_as_text: true,\n height: '200',\n toolbar: 'customfontfamily customfontsize removeformat bold italic underline forecolor backcolor | alignment listmenu outdent indent table | code hr | link customimage preview | styleselect questionlist', // eslint-disable-line\n font_sizes: FONT_SIZES\n },\n containerClass: 'mainCard',\n imagePickerModalClass: 'disable-drag',\n containerStyle: { padding: '10px' },\n addFormFields: this.props.addFormFields,\n staticFieldsAtTop: false,\n filterPostData: false,\n defaultValue: this.props.content,\n onChange: () => { },\n onInit: () => { }\n });\n }\n\n render() {\n const { onModalClose } = this.props;\n return (\n \n {this.renderEditor()}\n
\n \n \n CANCEL\n \n \n SAVE\n \n
\n \n \n );\n }\n}\n\nexport default TextEditorModal;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Canvas from './Canvas';\nimport { updatePDFForSignConversion } from '../../utils';\n\nclass Wrapper extends React.Component {\n static propTypes = {\n editable: PropTypes.bool.isRequired,\n pageHeight: PropTypes.number.isRequired,\n pageWidth: PropTypes.number.isRequired,\n onAutoheightComplete: PropTypes.func.isRequired,\n documentArea: PropTypes.shape({})\n };\n\n static defaultProps = {\n documentArea: null\n };\n\n render() {\n const {\n editable, pageHeight, pageWidth, onAutoheightComplete, documentArea\n } = this.props;\n\n return (\n {t('Switching to Old PDF Designer')}
\n \n {t('Font Family')}\n\n this.handleChange(fontFamilyType, val === 'Default' ? 'Roboto' : val)}\n selectedOptionTitleStyle={{ fontFamily: selectedFontFamily }}\n optionsStyle={fontFamilySet.fonts.map(fontFamily => ({ fontFamily }))}\n />\n
\n \n
\n \n {t('Font Size')}\n this.handleChange(fontSizeVal[0], val)}\n />\n
\n \n {t('Font Style')}\n this.handleChange(styleOpt, val)}\n />\n
\n \n
\n \n );\n }\n}\n","\n","import PropTypes from 'prop-types';\nimport React from 'react';\nimport classNames from 'classnames';\n\nexport class Icon extends React.Component {\n static propTypes = {\n name: PropTypes.string,\n className: PropTypes.string,\n onClick: PropTypes.oneOfType([PropTypes.func, PropTypes.bool])\n };\n\n render() {\n let cx = classNames({\n ji: true,\n [`ji-${this.props.name}`]: this.props.name\n });\n cx = this.props.className ? `${cx} ${this.props.className}` : cx;\n return (\n \n
\n\n \n this.handleChange(fontTextColorVal[0], val)}\n />\n
\n \n {t('Text Alignment')}\n this.handleChange(fontAlignmentVal[0], val)}\n />\n
\n \n
\n );\n }\n}\n\n/* eslint-disable */\nclass SubText extends React.Component {\n static propTypes= {\n onChange: PropTypes.func.isRequired,\n subText: PropTypes.string,\n subHeader: PropTypes.string\n };\n\n subTextInput = React.createRef();\n\n handleClear = (e) => {\n e.stopPropagation();\n this.props.onChange({ subText: '' }, e);\n this.subTextInput.current.focus();\n sendAnalytics('subtext-clear');\n }\n\n handleChange = (e) => {\n this.props.onChange({ subText: sanitizeDOM(e.target.value) }, e);\n };\n\n handleKeyDown = e => e.stopPropagation();\n\n render() {\n const { subText, subHeader } = this.props;\n const subHeading = subText !== undefined ? subText : subHeader;\n\n return (\n \n
\n );\n }\n}\n\n/* eslint-enable */\n\nconst Label = ({\n baseProps: { labelProps: baseLabelProps = {} }, labelProps = {}, onChange\n}) => {\n const { textProps = {} } = labelProps;\n const { textProps: baseTextProps = {} } = baseLabelProps;\n return (\n \n onChange({ direction: val }, val)}\n />\n
\n\n );\n};\n\nQuestionAlignment.propTypes = {\n baseProps: PropTypes.shape({}),\n direction: PropTypes.string.isRequired,\n onChange: PropTypes.func.isRequired,\n alignAllQuestions: PropTypes.oneOfType([\n PropTypes.bool,\n PropTypes.string\n ]),\n labelDirection: PropTypes.string.isRequired\n};\n\nQuestionAlignment.defaultProps = {\n baseProps: {},\n alignAllQuestions: false\n};\n\nconst Answer = ({ baseProps: { answerProps: baseAnswerProps = {} }, answerProps = {}, onChange }) => {\n return (\n \n {\n onChange({ sublabelProps: { style: { display: e.target.checked ? 'table-cell' : 'none' } } });\n }}\n defaultVal={showSublabel}\n labelText={t('Show sublabel')}\n />\n
\n )}\n \n onChange({ style: sectionStyle }, b)}\n />\n
\n \n {t('Background Image')}\n { // eslint-disable-line\n onChange({ backgroundImage });\n }}\n />\n
\n \n {t('Exceed Margins')}\n {\n onChange({ exceedMargins: { ...exceedMargins, [styleOpt]: val } });\n }}\n />\n
\n \n);\n\nSection.propTypes = {\n style: PropTypes.shape({}),\n backgroundImage: PropTypes.string,\n onChange: PropTypes.func.isRequired,\n exceedMargins: PropTypes.shape({\n left: PropTypes.bool.isRequired,\n top: PropTypes.bool.isRequired,\n right: PropTypes.bool.isRequired\n })\n};\n\nSection.defaultProps = {\n style: {},\n backgroundImage: '',\n exceedMargins: {\n left: false, top: false, right: false\n }\n};\n\nconst Heading = ({ headingProps = {}, baseProps: { headingProps: baseHeadingProps = {} }, onChange }) => {\n return (\n \n {\n onChange({ showSubText: e.target.checked });\n }}\n defaultVal={showSubText}\n labelText={t('Show sub-heading text')}\n />\n
\n \n );\n};\n\nSubHeading.propTypes = {\n subHeadingProps: PropTypes.shape({}),\n baseProps: PropTypes.shape({}),\n showSubText: PropTypes.bool,\n onChange: PropTypes.func.isRequired\n};\n\nSubHeading.defaultProps = {\n subHeadingProps: {},\n baseProps: {},\n showSubText: false\n};\n\nconst InlineOptions = ({\n fullContent, showSublabels, onChange\n}) => (\n <>\n \n {\n onChange({ fullContent: e.target.checked });\n }}\n defaultVal={fullContent || false}\n labelText={t('Show full text')}\n />\n
\n {fullContent && (\n \n {\n onChange({ showSublabels: e.target.checked });\n }}\n defaultVal={showSublabels || false}\n labelText={t('Show sublabels')}\n />\n {showSublabels}\n
\n )}\n \n);\n\nInlineOptions.propTypes = {\n onChange: PropTypes.func.isRequired,\n fullContent: PropTypes.bool,\n showSublabels: PropTypes.bool\n};\n\nInlineOptions.defaultProps = {\n fullContent: true,\n showSublabels: true\n};\n\nconst DateFormat = ({\n locale,\n dateFormat,\n amPmHour,\n baseProps: {\n locale: baseLocale = '',\n dateFormat: baseDateFormat = {},\n amPmHour: baseamPmHour = false\n },\n onChange\n}) => {\n return (\n <>\n \n onChange({ dateFormat: val })}\n />\n
\n \n onChange({ amPmHour: !amPmHour })}\n defaultVal={amPmHour}\n labelText={t('Use 12-hour clock')}\n />\n
\n \n );\n};\n\nDateFormat.propTypes = {\n dateFormat: PropTypes.string,\n locale: PropTypes.string,\n amPmHour: PropTypes.bool,\n baseProps: PropTypes.shape({}).isRequired,\n onChange: PropTypes.func.isRequired\n};\n\nDateFormat.defaultProps = {\n dateFormat: '',\n amPmHour: false,\n locale: ''\n};\n\nconst NumberFormat = ({\n numberFormat,\n onChange\n}) => {\n return (\n \n onChange({ viewStyle: val }, val)}\n />\n
\n \n {t('Item Size')}\n onChange({ itemSize: val }, val)}\n />\n
\n \n {\n onChange({ groupByType: e.target.checked });\n }}\n defaultVal={isYes(groupByType)}\n labelText={t('Group by type')}\n />\n
\n \n {\n onChange({ showImageHyperlink: e.target.checked });\n }}\n defaultVal={isYes(showImageHyperlink)}\n labelText={t('Show image link')}\n />\n
\n \n {\n onChange({ showFileInfo: e.target.checked });\n }}\n defaultVal={isYes(showFileInfo)}\n labelText={t('Show file size')}\n />\n
\n \n );\n};\n\nFileUpload.propTypes = {\n showFileInfo: PropTypes.bool.isRequired,\n showImageHyperlink: PropTypes.bool.isRequired,\n onChange: PropTypes.func.isRequired,\n groupByType: PropTypes.bool,\n viewStyle: PropTypes.func,\n itemSize: PropTypes.string\n};\n\nFileUpload.defaultProps = {\n itemSize: 'large',\n viewStyle: 'masonry',\n groupByType: false\n};\n\nconst List = ({\n showAll,\n listType,\n answerProps,\n containerProps,\n baseProps,\n onChange,\n type\n}) => {\n return (\n \n {t('Text Wrapping')}\n onChange({ textWrapping: val }, val)}\n />\n
*/}\n \n {\n onChange({ answerProps: { ...answerProps, hideEmptyRow: e.target.checked } }, e.target.checked);\n }}\n defaultVal={answerProps.hideEmptyRow || false}\n labelText={t('Hide empty row')}\n />\n
\n \n {t('Empty Cell Style')}\n onChange({ answerProps: { ...answerProps, emptyCellStyle: val } }, val)}\n />\n
\n \n onChange({ tableFormat: val }, val)}\n />\n
\n {ROW_BASED_MATRIX_TYPES.indexOf(inputType) > -1 && (\n \n
\n )}\n \n {t('Display Type')}\n ([...acc, { label: t(item), value: item }]), [])}\n value={showAll ? 'Grid' : 'Standard'}\n onChange={val => onChange({ showAll: val === 'Grid' })}\n />\n
\n \n {\n onChange({ showSubtotal: e.target.checked });\n }}\n defaultVal={isYes(showSubtotal)}\n labelText={t('Show subtotal')}\n />\n
\n \n {\n onChange({ showDiscount: e.target.checked });\n }}\n defaultVal={isYes(showDiscount)}\n labelText={t('Show discount')}\n />\n
\n \n {\n onChange({ showPayerInfo: e.target.checked });\n }}\n defaultVal={isYes(showPayerInfo)}\n labelText={t('Show payer information')}\n />\n
\n \n {\n onChange({ showTransactionID: e.target.checked });\n }}\n defaultVal={isYes(showTransactionID)}\n labelText={t('Show transaction ID')}\n />\n
\n \n {\n onChange({ showShippingAddress: e.target.checked });\n }}\n defaultVal={isYes(showShippingAddress)}\n labelText={t('Show shipping address')}\n />\n
\n \n {\n onChange({ showProductOptions: e.target.checked });\n }}\n defaultVal={showProductOptions}\n labelText={t('Show product options column')}\n />\n
\n \n {\n onChange({ showQuantity: e.target.checked });\n }}\n defaultVal={showQuantity}\n labelText={t('Show quantity column')}\n />\n
\n \n {\n onChange({ showAmount: e.target.checked });\n }}\n defaultVal={showAmount}\n labelText={t('Show amount column')}\n />\n
\n \n onChange({ paymentHeaderProps: { style: { background: val.background } } }, b)}\n />\n
\n \n onChange({ paymentView: val }, val)}\n />\n
\n \n {\n onChange({ showProductImage: e.target.checked });\n }}\n defaultVal={showProductImage}\n labelText={t('Show product images')}\n />\n
\n \n {\n onChange({ showPricing: e.target.checked });\n }}\n defaultVal={showPricing}\n labelText={t('Show pricing column')}\n />\n
\n \n onChange({ answerProps: { ...answerProps, style } }, b)}\n />\n
\n \n onChange({ tableBackground: val.background }, val)}\n />\n
\n \n {threadInputs.map(input => (\n
\n );\n};\n\nconst MissingFieldTag = () => (\n \n \n props.onChange({ [input.prop]: !props[input.prop] })}\n defaultVal={props[input.prop]}\n labelText={t(input.label)}\n />\n
\n ))}\n \n
\n \n);\n\nconst ADD_NEW_FIELD = 'addNewField';\nconst CustomerInfoSettings = ({\n onChange, showCustomerInfoLabels, hiddenCustomerInfoFields, ...props\n}) => {\n const dispatch = useDispatch();\n const formQuestions = useSelector(selectFormQuestions);\n const formProperties = useSelector(selectFormProperties);\n const {\n customerFullName,\n customerEmail,\n customerPhoneNumber,\n customerAddress,\n id: formID\n } = formProperties || {};\n\n const handleChange = (key, value) => onChange({ [key]: value });\n\n const handleDropdownChange = (infoName, value, elementType, questionType, customQuestionOptions = {}) => {\n let payload = value;\n switch (value) {\n case 'none':\n handleChange(infoName.withLabel(), null);\n break;\n case ADD_NEW_FIELD:\n const elementInfo = prepareElement({\n questionType,\n type: elementType,\n text: Object.entries(QUESTION_PROPS()).find(([qKey]) => qKey === questionType)[1].text.value\n }, { questions: formQuestions }, true);\n const { element } = elementInfo;\n const { item: { qid } } = element;\n\n dispatch(addAndCreateQuestion(formID, elementInfo, { customQuestionOptions }));\n payload = `${qid}`;\n break;\n default:\n break;\n }\n dispatch(updateFormProperties({ [infoName]: payload }));\n };\n\n const handleVisibility = infoName => event => {\n const { target: { checked } } = event;\n if (!checked) {\n onChange({ hiddenCustomerInfoFields: [...hiddenCustomerInfoFields, infoName] });\n } else {\n const updatedHidingFields = hiddenCustomerInfoFields.filter(hidingField => hidingField !== infoName);\n return onChange({ hiddenCustomerInfoFields: updatedHidingFields });\n }\n };\n\n return (\n <>\n \n
\n {Object.entries({\n customerFullName: {\n questionType: 'control_fullname',\n elementType: 'Fullname',\n questionID: customerFullName\n },\n customerEmail: {\n questionType: 'control_email',\n elementType: 'Email',\n questionID: customerEmail\n },\n customerPhoneNumber: {\n questionType: 'control_phone',\n elementType: 'Phone',\n questionID: customerPhoneNumber,\n customOptions: {\n inputMask: 'enable',\n sublabels: {\n country: 'Country Code',\n area: t('Area Code'),\n phone: t('Phone Number'),\n full: t('Phone Number'),\n masked: t('Please enter a valid phone number.')\n }\n }\n },\n customerAddress: {\n questionType: 'control_address',\n elementType: 'Address',\n questionID: customerAddress\n }\n }).map(([infoName, {\n questionType, questionID, elementType, customOptions = {}\n }]) => {\n const { text: questionText } = formQuestions.find(({ type }) => type === questionType) || {};\n const dropdownOptions = formQuestions.reduce((prev, { type, text, qid }) => {\n if (type === questionType) {\n return [...prev, { value: qid, label: text }];\n }\n return [...prev];\n }, [{ value: 'none', label: t('None') }]);\n const isMissingField = !formQuestions.some(({ qid, type }) => qid === questionID && type === questionType) && !Number.isNaN(parseInt(questionID, 10));\n return (\n {t('Select Visible Fields')}
\n \n {t('Labels')}\n handleChange('showCustomerInfoLabels', !showCustomerInfoLabels)}\n isSelected={showCustomerInfoLabels}\n squareMode={true}\n />\n
\n \n
\n );\n })}\n \n );\n};\n\nCustomerInfoSettings.propTypes = {\n onChange: func,\n showCustomerInfoLabels: bool,\n hiddenCustomerInfoFields: arrayOf(string)\n};\n\nCustomerInfoSettings.defaultProps = {\n onChange: f => f,\n showCustomerInfoLabels: false,\n hiddenCustomerInfoFields: []\n};\n\nconst BusinessDetailsSettings = ({ hiddenBusinessDetailsFields, onChange }) => {\n const dispatch = useDispatch();\n const {\n companyLogo,\n companyEmail,\n companyName,\n companyWebsite,\n companyAddress,\n companyPhoneNumber\n } = useSelector(selectFormProperties);\n\n const businessDetails = {\n companyLogo: {\n defaultValue: companyLogo,\n labelText: t('Logo')\n },\n companyName: {\n defaultValue: companyName,\n labelText: t('Business Name')\n },\n companyEmail: {\n defaultValue: companyEmail,\n labelText: t('Email')\n },\n companyPhoneNumber: {\n defaultValue: companyPhoneNumber,\n labelText: t('Phone')\n },\n companyWebsite: {\n defaultValue: companyWebsite,\n labelText: t('Website')\n },\n companyAddress: {\n defaultValue: companyAddress,\n labelText: t('Address')\n }\n };\n\n const handleVisibility = useCallback(key => event => {\n const { target: { checked } } = event;\n if (!checked) {\n onChange({ hiddenBusinessDetailsFields: [...hiddenBusinessDetailsFields, key] });\n } else {\n const updatedHidingFields = hiddenBusinessDetailsFields.filter(hidingField => hidingField !== key);\n onChange({ hiddenBusinessDetailsFields: updatedHidingFields });\n }\n }, [hiddenBusinessDetailsFields]);\n\n const handleChange = (key, value) => dispatch(updateFormProperties({ [key]: value }));\n\n const renderBusinessDetails = () => Object.entries(businessDetails).map(([detailName, { defaultValue, labelText }], idx) => {\n return (\n \n {showCustomerInfoLabels && (\n
\n \n handleChange(infoName.withLabel(), value)}\n value={props[infoName.withLabel()] ?? questionText}\n scheme=\"dark\"\n type=\"text\"\n />\n
\n )}\n \n
\n \n
\n );\n });\n\n return (\n <>\n \n
\n \n {detailName === 'companyLogo'\n ? (\n handleChange(detailName, src)}\n />\n )\n : (\n handleChange(detailName, value)}\n defaultValue={defaultValue}\n scheme=\"dark\"\n type=\"text\"\n />\n )}\n
\n {t('Select Visible Details')}
\n {renderBusinessDetails()}\n \n );\n};\n\nBusinessDetailsSettings.propTypes = {\n hiddenBusinessDetailsFields: arrayOf(string),\n onChange: func\n};\n\nBusinessDetailsSettings.defaultProps = {\n hiddenBusinessDetailsFields: [],\n onChange: f => f\n};\n\nconst Editors = {\n Text,\n Label,\n Heading,\n SubHeading,\n Answer,\n Sublabel,\n FileUpload,\n Image: ConnectedImageUploader,\n Line,\n Section,\n DateFormat,\n List,\n SubText,\n Table,\n TableFormat,\n TableStyle,\n BorderStyle,\n NumberFormat,\n Payment,\n PaymentHeader,\n PaymentAreaView,\n PaymentColumnOption,\n QuestionAlignment,\n InlineOptions,\n ThreadSettings,\n CustomerInfoSettings,\n BusinessDetailsSettings\n};\n\nexport default Editors;\n","import PropTypes from 'prop-types';\nimport React from 'react';\nimport classNames from 'classnames';\n\nexport class Tooltip extends React.Component {\n static propTypes = {\n kind: PropTypes.string, // error, warning\n arrowTo: PropTypes.string,\n linked: PropTypes.bool,\n className: PropTypes.string,\n style: PropTypes.shape(),\n children: PropTypes.node\n };\n\n render() {\n let linked = 'u-alwaysVisible';\n const externalClasses = (this.props.className ? this.props.className : '');\n if (this.props.linked === true) {\n linked = 'u-tethered';\n }\n let cx = classNames({\n toolTip: true,\n [`u-${this.props.kind}`]: this.props.kind,\n [`u-${this.props.arrowTo}`]: this.props.arrowTo\n });\n cx = `${cx} ${linked} ${externalClasses}`;\n return (\n \n { this.props.children }\n
\n );\n }\n}\n\nexport default Tooltip;\n","import debounce from 'lodash/debounce';\nimport PropTypes from 'prop-types';\nimport React from 'react';\nimport { t } from '@jotforminc/translation';\n\nconst noop = () => { };\n\nexport class TextInput extends React.Component {\n static propTypes = {\n name: PropTypes.string,\n placeholder: PropTypes.string,\n value: PropTypes.string,\n onChange: PropTypes.func,\n onBlur: PropTypes.func,\n disabled: PropTypes.string,\n id: PropTypes.string,\n ariaLabel: PropTypes.string,\n className: PropTypes.string,\n additionalClasses: PropTypes.string,\n inlineStyle: PropTypes.object,\n type: PropTypes.string,\n numberOnly: PropTypes.bool,\n allowDecimal: PropTypes.bool,\n onKeyDown: PropTypes.func,\n preventSpaceAtFirst: PropTypes.bool,\n preventNegativeNumbers: PropTypes.bool,\n preventZeroNumber: PropTypes.bool,\n addActivityLogs: PropTypes.func,\n isThankYou: PropTypes.bool,\n maxLength: PropTypes.string,\n maximumLength: PropTypes.string, // because some components still pass maxLength\n allowInputComma: PropTypes.bool\n };\n\n static defaultProps = {\n onBlur: noop,\n onChange: noop,\n disabled: '',\n type: 'text',\n className: 'inpt',\n isThankYou: false,\n addActivityLogs: () => {}\n };\n\n constructor(props) {\n super(props);\n this._handleKeyDown = this._handleKeyDown.bind(this);\n this._allowTypePoint = this._allowTypePoint.bind(this);\n this._handleOnChange = this._handleOnChange.bind(this);\n this._validateNumber = this._validateNumber.bind(this);\n this._handleOnBlur = this._handleOnBlur.bind(this);\n this.renderTextInput = this.renderTextInput.bind(this);\n this.setInputValue = value => {\n this.setState({ inputValue: value });\n };\n this.setInputValueDebounced = debounce(this.setInputValue, 100);\n\n this.state = {\n inputValue: this.props.value\n };\n }\n\n renderTextInput() {\n // Below method filters out faulty props that are not allowed on elements\n const props = this._preparePropsForRender(this.props);\n return (\n \n \n {this.renderTextInput()}\n
\n )\n : this.renderTextInput()\n }\n \n );\n }\n\n UNSAFE_componentWillReceiveProps = nextProps => {\n if (nextProps.value !== this.props.value) {\n this.setInputValueDebounced(nextProps.value);\n }\n };\n\n _preparePropsForRender() {\n const inProps = this.props;\n const unnecessaryProps = ['isV4', 'isMobile', 'isCardForm', 'formProperties', 'updateFormProperty', 'options', 'inlineStyle', 'decimalCount', 'allowDecimal', 'numberOnly', 'preventNegativeNumbers', 'preventZeroNumber', 'allowInputComma'];\n const outProps = new Object; // eslint-disable-line\n\n for (const property in inProps) {\n if (unnecessaryProps.indexOf(property) < 0) {\n Object.assign(outProps, { [property]: inProps[property] });\n }\n }\n\n if (inProps.numberOnly && inProps.type === 'number') {\n outProps.type = 'text';\n }\n\n outProps.className = inProps.className ? inProps.className : 'inpt';\n outProps.className += ' injectCSSPrevention';\n\n return outProps;\n }\n\n _allowTypePoint(target) {\n const strVal = target.value;\n if (strVal && strVal.length) {\n if (strVal.indexOf('.') === -1) {\n return true;\n }\n }\n\n return false;\n }\n\n _validateNumber(numberString) {\n if (this.props.numberOnly) {\n if (this.props.allowDecimal) {\n if (this.props.preventNegativeNumbers) {\n if (this.props.allowInputComma) {\n return numberString.match(/^([0-9]*)([.,][0-9]{0,2})?$/);\n }\n return numberString.match(/^([0-9]*)(\\.[0-9]{0,2})?$/);\n }\n if (this.props.allowInputComma) {\n return numberString.match(/^((-?)[0-9]*)([.,][0-9]{0,2})?$/);\n }\n return numberString.match(/^((-?)[0-9]*)(\\.[0-9]{0,2})?$/);\n }\n\n if (this.props.preventNegativeNumbers) {\n return numberString.match(/^([0-9]*)$/);\n }\n\n if (this.props.preventZeroNumber) {\n return numberString.match(/^$|[1-9][0-9]*$/);\n }\n\n return numberString.match(/^((-?)[0-9]*)$/);\n }\n\n if (this.props.preventWhitespace) { // prevented whitespace for Payment: apiKey, clientId etc\n return !numberString.match(/\\s/);\n }\n\n return true;\n }\n\n _handleOnChange(e) {\n const { maximumLength } = this.props;\n if (this._validateNumber(e.target.value)) {\n if (this.props.onChange) {\n if (e.persist) {\n e.persist(); // For using event in another function || React-15 persist\n }\n\n // convert comma to point for user input consistency\n if (this.props.allowInputComma) {\n const newValue = e.target.value.replace(/,/g, '.');\n if (newValue !== e.target.value) {\n e.target.value = newValue;\n }\n }\n\n if (maximumLength && e.target.value.length > maximumLength) {\n return;\n }\n\n this.props.onChange(e);\n this.setInputValue(e.target.value);\n }\n const ids = ['formWidth', 'lineSpacing', 'labelWidth', 'fontsize'];\n this.props.addActivityLogs(this.props.id, ids, e.target.value);\n } else {\n e.preventDefault();\n }\n }\n\n _handleOnBlur(e) {\n this.props.onBlur && this.props.onBlur(e);\n }\n\n _handleKeyDown(e) {\n if (this.props.preventSpaceAtFirst) {\n const strVal = e.target.value;\n if (!(strVal && strVal.length)) {\n if (e.keyCode === 32) {\n e.preventDefault();\n return;\n }\n }\n }\n if (e.persist) {\n e.persist(); // For using event in another function || React-15 persist\n }\n if (this.props.onKeyDown) this.props.onKeyDown(e);\n }\n}\n\nexport default TextInput;\n","\n","\n","\n","import PropTypes from 'prop-types';\nimport React from 'react';\nimport {\n IconCartShoppingFilled,\n IconCoinsStackedFilled,\n IconCoinsFilled,\n IconHeartFilled\n} from '@jotforminc/svg-icons';\nimport classNames from 'classnames';\n\nimport Tethered from './Tethered';\nimport { translate } from '../mixins/Translation';\n\nconst PAYMENT_TYPE_ICONS = {\n product: IconCartShoppingFilled,\n subscription: IconCoinsStackedFilled,\n custom: IconCoinsFilled,\n donation: IconHeartFilled\n};\n\nexport class Dropdown extends React.Component {\n static propTypes = {\n name: PropTypes.string,\n id: PropTypes.string,\n ariaLabel: PropTypes.string,\n className: PropTypes.string.isRequired, // class added to \n );\n }\n\n render() {\n const cx = classNames({\n 'm-dropdownWrapper': true,\n [`u-${this.props.size}`]: this.props.size,\n 'u-multiple': this.props.multiple,\n 'm-dropdownTethered': this.props.tethered\n });\n\n const { dropdownMask } = this.props;\n const { selectedElement } = this.state;\n let text = null;\n if (selectedElement && Array.isArray(this.props.options) && this.props.options.length > 0) {\n const opt = this.props.options.find(option => option.key === selectedElement);\n if (opt) {\n text = opt.text;\n }\n }\n\n let options = null;\n if (this.props.options && Array.isArray(this.props.options) && this.props.options.length > 0) {\n let propOptions = this.props.options;\n // 52934d4e3be147110a000027 is the client id of the Country Picker widget\n if (this.props.id === '52934d4e3be147110a000027.country') {\n // it is necessary to sort country names alphabetically regardless of language\n propOptions = propOptions.sort((a, b) => {\n if (!a.value || a.value === 'None' || !b.value || b.value === 'None') return 0;\n const x = a.text.toLowerCase().trim();\n const y = b.text.toLowerCase().trim();\n if (x > y) return 1;\n if (x < y) return -1;\n return 0;\n });\n }\n options = propOptions.map((option, i) => {\n if (typeof option.type !== 'undefined' && option.type === 'group') {\n return this.renderGroup(option.name, option.options, i);\n }\n const disabled = option.disabled || false;\n const style = disabled ? { color: '#CBC6C0' } : {};\n\n return this.renderOption(option.key, option.text, option.value, disabled, i, false, style);\n });\n }\n\n const tetheredOptions = this.props.tethered ? this.props.options.map((option, i) => {\n if (typeof option.type !== 'undefined' && option.type === 'group') {\n return this.renderGroup(option.name, option.options, i, true);\n }\n const disabled = option.disabled || false;\n return this.renderOption(option.key, option.text, option.value, disabled, i, true);\n }) : null;\n const PaymentTypeIcon = this.props.paymentTypeDropdown ? PAYMENT_TYPE_ICONS[this.props.value] : null;\n return this.props.tethered ? (\n { this.currentTetheredSelectWrapper = r; }}>\n { this.currentTetheredSelect = r; }}\n style={{ pointerEvents: 'none' }}\n data-testid={this.props.testId}\n >\n { options }\n \n \n
\n \n ) : (\n \n { PaymentTypeIcon &&
\n );\n }\n\n handleOnClick = (option, type, e) => {\n if (type === 'close') {\n e.target.closest('.pg-dropdown').classList.remove('open');\n const { onChange } = this.props;\n\n if (onChange) {\n e.persist();\n this.props.onChange(e);\n }\n } else {\n const target = e.target.closest('.pg-dropdown');\n const billingInfoFields = ['emailField', 'billingAdd', 'shippingAdd', 'phoneField', 'customDataField']; // for payments that are enabled billing option\n\n if (target.classList.contains('open')) {\n e.target.closest('.pg-dropdown').classList.remove('open');\n if (billingInfoFields.includes(this.props.testId)) {\n e.target.closest('.m-dropdownWrapper').classList.remove('opened');\n }\n } else {\n e.target.closest('.pg-dropdown').classList.add('open');\n if (billingInfoFields.includes(this.props.testId)) {\n e.target.closest('.m-dropdownWrapper').classList.add('opened');\n }\n }\n }\n };\n\n handleOnChange(e) {\n if (this.props.onChange) {\n e.persist();\n this.props.onChange(e);\n }\n this.props.addActivityLogs(this.props.id, ['alignment'], e.target.value);\n }\n}\n\nexport default Dropdown;\n","import PropTypes from 'prop-types';\nimport React from 'react';\nimport { Radio as MagnetRadio } from '@jotforminc/magnet';\n\nexport class Radio extends React.Component {\n static propTypes = {\n name: PropTypes.string,\n value: PropTypes.string,\n checked: PropTypes.bool,\n defaultChecked: PropTypes.bool,\n noBorder: PropTypes.bool,\n onChange: PropTypes.func,\n label: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),\n inlineStyles: PropTypes.object,\n additionalClasses: PropTypes.object,\n id: PropTypes.string\n };\n\n render() {\n const { additionalClasses } = this.props;\n const isNewPanel = true;\n let cx = 'radioButton';\n if (this.props.noBorder) {\n cx = 'radioButton u-noBorder';\n }\n\n return (\n <>\n {(isNewPanel) ? (\n \n {this.props.options && (\n
\n )}\n\n \n \n \n {this.props.options.map((option, index) => (\n \n {option.key === 'addone' && (\n \n )}\n\n {option.key === selectedElement && (\n \n )}\n\n \n {(!this.props.dontShowIndex && this.props.options.length >= 3 && option.key !== 'none' && option.key !== 'addone') && (\n \n {index}\n .\n {' '}\n \n )}\n {option.text}\n \n \n ))}\n \n
\n )}\n\n \n {text || this.props.options[1] && this.props.options[1].key === 'none' && this.props.options[1].text || this.props.options[0].text}\n
\n \n
\n ) : (\n \n )}\n \n );\n }\n}\n\nexport default Radio;\n","import PropTypes from 'prop-types';\nimport React from 'react';\nimport Panel, { DateUtils } from 'react-day-picker';\nimport { IconCalendarFilled } from '@jotforminc/svg-icons';\nimport Tethered from './Tethered';\nimport TextInput from './TextInput';\nimport { translate } from '../mixins/Translation';\nimport 'react-day-picker/lib/style.css';\nimport 'date-format-lite';\n\nconst buildOnChangeObj = selectedDay => ({\n value: selectedDay,\n target: {\n name: 'newDate',\n value: selectedDay\n }\n});\n\nclass DatePicker extends React.Component {\n static propTypes = {\n value: PropTypes.string,\n placeholder: PropTypes.string,\n onChange: PropTypes.func,\n isPastDisabled: PropTypes.bool,\n format: PropTypes.string,\n disableAfterDate: PropTypes.shape(),\n disableBeforeDate: PropTypes.shape(),\n hasError: PropTypes.bool,\n icon: PropTypes.node\n };\n\n static defaultProps = {\n format: 'MMMM DD, YYYY',\n icon: \n !e.disabled && this.onPickerChange(e, day)}\n modifiers={modifiers}\n months={months}\n weekdaysLong={weekDaysLong}\n weekdaysShort={weekDaysShort}\n />\n
\n );\n }\n\n render() {\n const isMobile = global.document.querySelector('body').classList.contains('isMobile');\n const { hasError, placeholder, icon } = this.props;\n return (\n \n this.onTextInputChange(e)}\n placeholder={placeholder}\n />\n \n {icon ||
\n \n );\n }\n\n // translating the selecting date or default current date\n translatedDateValue() {\n return (this.state.value) ? this.state.value.split(' ').map(el => translate(el)).join(' ') : this.state.value;\n }\n\n isValidDate(d) {\n if (Object.prototype.toString.call(d) !== '[object Date]') {\n return false;\n }\n return !isNaN(d.getTime());\n }\n}\n\nexport default DatePicker;\n","\n","\n","import PropTypes from 'prop-types';\nimport React from 'react';\nimport isUndefined from 'lodash/isUndefined';\nimport { t as translate } from '@jotforminc/translation';\nimport {\n IconLockFilled\n} from '@jotforminc/svg-icons';\nimport Icon from './Icon';\n\nexport class Toggle extends React.Component {\n static propTypes = {\n name: PropTypes.string,\n labelId: PropTypes.string,\n valueUnchecked: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.bool\n ]),\n valueChecked: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.bool\n ]),\n initialValue: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.bool\n ]),\n defaultChecked: PropTypes.bool,\n onChange: PropTypes.func,\n type: PropTypes.string,\n labelNameTrue: PropTypes.string,\n labelNameFalse: PropTypes.string,\n isDisabled: PropTypes.bool,\n description: PropTypes.shape({\n content: PropTypes.string,\n key: PropTypes.string\n }),\n preventChange: PropTypes.bool,\n testId: PropTypes.string\n };\n\n constructor(props) {\n super(props);\n\n this._onChangeValue = this._onChangeValue.bind(this);\n this.state = {\n checkedz: this.props.initialValue === this.props.valueChecked\n };\n }\n\n UNSAFE_componentWillReceiveProps(nextProps) {\n this.setState({\n checkedz: nextProps.initialValue === nextProps.valueChecked\n });\n }\n\n getDescriptionMarkup({ content, key, style }) {\n return (\n \n \n { options }\n
\n { !this.props.isCardForm\n && (\n {children}
;\nconst IECompatFragment = isIE() ? Dummy : React.Fragment;\nconst isBranding21 = !!window?.branding21;\nconst formDefaultConfig = {\n id: 0,\n hideMailEmptyFields: false,\n showEditLinkOnMail: false,\n isEnterprise: false,\n isBrandingEnabled: false\n};\n\nconst wfDefaultConfig = {\n id: 0,\n hideMailEmptyFields: false,\n showEditLinkOnMail: false,\n isEnterprise: false,\n isBrandingEnabled: false,\n addActionButtons: false,\n hideMoreActions: false\n};\n\nconst DEFAULT_EMAIL_CONFIGS = {\n [EMAIL_TEMPLATE_TYPES.FORM_SUBMIT_AUTORESPONDER]: formDefaultConfig,\n [EMAIL_TEMPLATE_TYPES.FORM_SUBMIT_NOTIFICATION]: formDefaultConfig,\n [EMAIL_TEMPLATE_TYPES.FORM_SUBMIT_CONDITIONAL]: formDefaultConfig,\n [EMAIL_TEMPLATE_TYPES.WORKFLOW_APPROVE_START]: {\n ...wfDefaultConfig,\n addActionButtons: true,\n moreActionText: t('Go to Inbox'),\n actionButtonsHeaderText: t('Please review the request below.')\n },\n [EMAIL_TEMPLATE_TYPES.WORKFLOW_APPROVE_APPROVED]: {\n ...wfDefaultConfig,\n actionButtonsHeaderText: t('Your request has been approved.')\n },\n [EMAIL_TEMPLATE_TYPES.WORKFLOW_APPROVE_REJECTED]: {\n ...wfDefaultConfig,\n actionButtonsHeaderText: t('Your request has been denied.')\n },\n [EMAIL_TEMPLATE_TYPES.WORKFLOW_SEND_EMAIL_GENERAL]: {\n ...wfDefaultConfig,\n actionButtonsHeaderText: t('You can see the submission details below.')\n },\n [EMAIL_TEMPLATE_TYPES.WORKFLOW_ASSIGN_START]: {\n ...wfDefaultConfig,\n addActionButtons: true,\n actionButtonsHeaderText: t('Please review this submission.')\n },\n [EMAIL_TEMPLATE_TYPES.WORKFLOW_APPROVE_REASSIGN]: {\n ...wfDefaultConfig,\n showSubmissionTable: !isBranding21,\n clearHeight: isBranding21,\n showFooter: isBranding21,\n noSidePadding: true,\n emailPreviewHack: isBranding21 ? (\n \n
\n ) : null,\n actionButtonsHeaderText: (\n isBranding21 ? (\n \n {t('The {approvalFlowName} has been reassigned to {titleAssigneeName}.')}\n
\n \n {t('Your assignee {oldAssigneeName} ({oldAssigneeEmail}) reassigned his/her task to {newAssigneeName} ({newAssigneeEmail}).')}\n
\n \n
\n
\n
\n \n
\n Hi there,\n
\n
\n {t('We are sending this email to inform you. Your assignee {oldAssigneeEmail} reassigned his/her task to {newAssigneeEmail}.')}\n
\n
\n
\n \n
\n
\n
\n
\n {t('Please review the request below.')}\n
\n
\n
\n {'{comment}'}\n\n
\n Please click on the link below to complete this form...\n
\n {'{shareLink}'}\n
\n Thank you!\n
| \n |
| \n | \n
| \n | \n
| \n | \n
| \n | \n
| \n | \n
| \n | \n
\n { }}\n isV4={true}\n isPayment={false}\n isMobile={false}\n // duplicateFunction=\n updateFormProperty={this.updateFormProperty}\n isCardBuilder={false}\n isPDFEditor={true}\n />\n
\n );\n }\n}\n","\n","\n","\n","\n","import React, { createRef } from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport { withRouter } from 'react-router-dom';\nimport { PreviewToggle } from '@jotforminc/header-components';\nimport { t } from '@jotforminc/translation';\n\nimport { updateQuery, sendAnalytics, isSettingsOrPublishURL } from '../utils';\nimport { closeSectionTutorial, focusPreviewButton } from '../store/ui';\n\nclass PreviewModeSwitch extends React.Component {\n static propTypes = {\n history: PropTypes.shape().isRequired,\n location: PropTypes.shape({\n pathname: PropTypes.string.isRequired\n }).isRequired,\n previewMode: PropTypes.bool.isRequired\n };\n\n innerRef = createRef();\n\n componentDidMount() {\n if (this.props.previewMode || this.props.isPreviewToggleActive) {\n this.innerRef.current.focus();\n }\n }\n\n handlePreviewModeChange = () => {\n const {\n location, history, dispatch, previewMode\n } = this.props;\n const preview = !previewMode;\n dispatch(focusPreviewButton(true));\n\n sendAnalytics('previewToggleClicked');\n history.push(updateQuery(location, { preview, from: false }));\n dispatch(closeSectionTutorial());\n };\n\n handleKeyDown = event => {\n if (['Enter', 'Space'].includes(event.code)) {\n this.handlePreviewModeChange();\n }\n };\n\n render() {\n const { previewMode, dispatch } = this.props;\n const isDisabled = isSettingsOrPublishURL(this.props);\n const previewSwitchId = 'previewPDF-button';\n return (\n \n \n {t('UPGRADE NOW')}\n \n
\n );\n };\n\n render() {\n const { isModal } = this.props;\n\n return (\n isModal ? (\n \n \n
\n \n {`${t(accountType)} accounts are limited to ${planFormCount} forms`}\n {' '}\n
\n Delete an existing form or \n\n {t('upgrade')}\n \n to increase your form limit.\n
\n \n Delete an existing form or \n
\n
\n );\n case fillableDialogMode.IMPORT_IN_PROGRESS:\n return (\n {t('Upload Fillable PDF')}
\n \n
\n \n
\n );\n case fillableDialogMode.IMPORT_FAILED:\n return (\n {t('We are importing your fillable PDF')}
\n {t('This may take a couple of seconds please wait')}
\n \n
\n );\n case fillableDialogMode.HAS_REACHED_LIMIT:\n return (\n {t('Import Failed')}
\n \n {t('The file you uploaded does not have fillable areas. Please import a fillable PDF or go back and start with a blank form.')}\n
\n \n
\n \n {optionSet.map(optionItem => {\n return (\n <>\n {(!('enabled' in optionItem) || optionItem.enabled) && (\n
\n );\n }\n };\n\n render() {\n const { onModalClose, hasExistingOpt, closable } = this.props;\n const { mode } = this.state;\n\n return (\n \n this.createNewFillablePDF(optionItem.newFillable) : this.onImport}\n >\n {t(optionItem.buttonText)}\n \n
\n )}\n \n );\n })}\n {optionItem.title}
\n {t(optionItem.subtitle)}
\n \n
\n\n \n {'icon' in optionItem && }\n
\n \n {this.renderModalHeader()}\n
\n {this.renderModalContent()}\n \n );\n }\n}\n\nconst mapStateToProps = ({ form, pdfs }) => {\n return ({\n formName: form.properties ? form.properties.title : 'PDF Form',\n formId: form.id,\n pdfList: pdfs.list,\n isEncrypted: form.properties ? form.properties.isEncrypted === 'Yes' : false\n });\n};\n\nexport default connect(mapStateToProps)(FillableFormDialog);\n","import React from 'react';\nimport { connect } from 'react-redux';\nimport PropTypes from 'prop-types';\nimport { t } from '@jotforminc/translation';\nimport { Button } from '@jotforminc/magnet';\nimport { IconTrashFilled } from '@jotforminc/svg-icons';\nimport { removeMultipleItems } from '../../store/document';\nimport { getRealPath } from '../../utils';\n\nclass MultipleSelectionWizard extends React.Component {\n static propTypes = {\n dispatch: PropTypes.func.isRequired,\n selected: PropTypes.shape().isRequired\n };\n\n handleButtonAction = e => {\n e.stopPropagation();\n e.preventDefault();\n const { dispatch, selected } = this.props;\n const selectedPaths = selected.map(getRealPath);\n dispatch(removeMultipleItems(selectedPaths));\n };\n\n render() {\n return (\n \n \n {t('Delete')}\n \n
\n );\n }\n}\n\nconst mapStateToProps = ({ inspector }) => ({ selected: inspector.selected });\n\nexport default connect(mapStateToProps)(MultipleSelectionWizard);\n","\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { getAPIURL } from '@jotforminc/request-layer';\nimport { LoginFlowWithStyles } from '@jotforminc/login-flow';\nimport { createRoot } from 'react-dom/client';\nimport { getReactRoot } from '../../utils/index';\nimport { initUserData } from '../../store/user';\n\nexport default class SignupModal extends React.Component {\n static propTypes = {\n user: PropTypes.shape({}).isRequired,\n greetingMessage: PropTypes.string.isRequired,\n onUserLogin: PropTypes.func\n };\n\n static defaultProps = {\n onUserLogin: f => f\n };\n\n handleClose = () => {\n const portal = document.getElementById('portal-root');\n const root = createRoot(portal);\n window.showSignupModal = false;\n root.unmount();\n };\n\n handleUserLogin = async () => {\n const { dispatch, onUserLogin } = this.props;\n await initUserData(dispatch);\n this.handleClose();\n onUserLogin();\n };\n\n render() {\n const { user, greetingMessage } = this.props;\n\n return (\n \n \n {t('OK, GOT IT')}\n \n
\n )}\n {showNotification && (\n \n {t('Creating a zip file')}\n ...\n
\n {`${t('We will send you an email to')} ${this.props.email}`}
\n\n \n
\n )}\n \n );\n }\n}\n","/* eslint-disable complexity */\nimport React from 'react';\nimport { connect } from 'react-redux';\nimport PropTypes from 'prop-types';\nimport { t } from '@jotforminc/translation';\nimport { flushPrivateKeys, handleCustomNavigation } from '@jotforminc/utils';\nimport { isEnterprise as isEnterpriseFunc } from '@jotforminc/enterprise-utils';\n\nimport {\n IconArrowUpRightFromSquareSm, IconUsersFilled, IconPencilToSquare, IconFormFilled, IconPaperPlaneFilled, IconPrinterFilled, IconArrowDownToLine, IconEllipsisVertical\n} from '@jotforminc/svg-icons';\nimport {\n DecryptionWizard, FlushPrivateKeysWizard, getEncryptionKey, ManageEncryptionButton, hasEncryptionKey\n} from '@jotforminc/form-encryption';\nimport { createRoot } from 'react-dom/client';\nimport { setZoom } from '../../store/documentView';\nimport DropView from '../DropView';\nimport {\n hijackPDFForJFMobile, isChromium, isJFMobileApp, sendAnalytics\n} from '../../utils';\nimport TinyLoadingIndicator from '../TinyLoadingIndicator';\nimport DownloadButton from '../DownloadButton';\nimport ShareModal from '../ShareModal';\nimport { generatePdf } from '../../api';\nimport { deselect } from '../../store/inspector';\nimport Button from '../Button';\nimport DownloadAll from '../DownloadAll';\nimport {\n showFormModal, showShareModal as setShareModalVisibility, togglePrint, setActiveDialog\n} from '../../store/ui';\nimport { selectSelectedPDFRole } from '../../store/selectors';\nimport PrePDFButtons from './PrePDFButtons';\nimport SignupModal from '../Dialogs/SignupModal';\nimport { FEATURE_NAMES, isFeatureEnabled } from '../../constants/features';\nimport { DIALOGS } from '../../constants/dialogs';\nimport { TOAST_TYPES } from '../../constants/toasts';\nimport { showToast } from '../../utils/showToast';\n\nclass ToolbarButtons extends React.Component {\n static isNativePrintingSupported = isChromium();\n // static isExternalPrintingSupported = !isChromium();\n // static isPrintingSupportedAny = ToolbarButtons.isNativePrintingSupported || ToolbarButtons.isExternalPrintingSupported;\n // eslint-disable-next-line\n state = {\n isSending: false,\n isPrinting: false,\n isDesktop: window.getDeviceType !== 'isMobile',\n dropdownButtonMenu: false\n };\n\n // eslint-disable-next-line\n UNSAFE_componentWillMount() {\n window.addEventListener('afterprint', this.handleAfterPrint);\n }\n\n componentDidMount() {\n this.checkWindowWidth();\n }\n\n componentDidUpdate = () => {\n window.addEventListener('resize', this.checkWindowWidth);\n };\n\n componentWillUnmount = () => {\n window.removeEventListener('resize', this.checkWindowWidth);\n window.removeEventListener('afterprint', this.handleAfterPrint);\n };\n\n getFilename = () => {\n const { docId } = this.props;\n return `${docId}`;\n };\n\n handleAfterPrint = () => {\n const { dispatch } = this.props;\n dispatch(setZoom(this.oldZoom || 1));\n setTimeout(() => { // Editor.js#beforePrintHandler is also relying on setTimeout.\n dispatch(togglePrint(false));\n }, 250);\n this.setState({ isPrinting: false });\n };\n\n checkWindowWidth = () => {\n const { innerWidth } = window;\n const { dropdownButtonMenu } = this.state;\n\n if (innerWidth < 750 && !dropdownButtonMenu) {\n this.setState({ dropdownButtonMenu: true });\n }\n if (innerWidth > 750 && dropdownButtonMenu) {\n this.setState({ dropdownButtonMenu: false });\n }\n };\n\n closeShareModal = () => {\n this.props.dispatch(setShareModalVisibility(false));\n };\n\n handleManageEncryptionKeys = showDecryptKey => {\n if (showDecryptKey) {\n this.renderEncryptionKeyModal();\n } else {\n const { formId, form: { properties: { encryptionProtocol } }, user } = this.props;\n const privateKey = getEncryptionKey(encryptionProtocol, formId);\n\n if (!privateKey) {\n return;\n }\n\n const ReactModalPortal = document.getElementById('portal-root');\n const root = createRoot(ReactModalPortal);\n\n const onClose = () => root.unmount();\n const onSubmit = () => {\n flushPrivateKeys();\n onClose();\n window.location.reload(false);\n };\n\n root.render(\n
\n {`${percentage}% ${t('of your PDF files are ready. We’ll send you an email when your download is complete.')}`}
\n\n {formDropdownButtons.viewForm && (\n {\n dispatch(showFormModal());\n if (window.JOTFORM_ENV === 'PRODUCTION' && window.pdfTutorialWatchman) {\n window.pdfTutorialWatchman.tick({ actor: username, action: 'view-form-clicked', target: 'form-drop-view' });\n }\n }}\n >\n {\n if (window.JOTFORM_ENV === 'PRODUCTION' && window.pdfTutorialWatchman) {\n window.pdfTutorialWatchman.tick({ actor: username, action: 'assign-form-clicked', target: 'form-drop-view' });\n }\n handleCustomNavigation(`/build/${formId}/publish/assign`, '_blank');\n }}\n >\n {\n if (window.JOTFORM_ENV === 'PRODUCTION' && window.pdfTutorialWatchman) {\n window.pdfTutorialWatchman.tick({ actor: username, action: 'edit-form-clicked', target: 'form-drop-view' });\n }\n handleCustomNavigation(`/build/${formId}`, '_blank');\n }}\n >\n
\n );\n };\n\n renderDownloadButtonSet = inDropview => {\n const { dropdownButtonMenu, isDesktop } = this.state;\n const {\n submissionCount, isFormMode, isImportedPDFMode, selectedPDF, formId, account_type: accountType\n } = this.props;\n const buttonStrength = (dropdownButtonMenu && isDesktop && !isImportedPDFMode) || !inDropview ? 'secondary' : 'primary';\n let downloadPdfClassName;\n if (inDropview) {\n downloadPdfClassName = 'full-width';\n } else {\n downloadPdfClassName = dropdownButtonMenu && isDesktop ? 'full-width' : 'hide-text';\n }\n\n return (\n <>\n \n {this.renderFormButtonSet()}\n
\n \n )\n : (\n <>\n \n {this.renderFormButtonSet()}\n
\n \n )}\n \n )}\n {(isEncrypted || submissionEncryptionProtocol === 'JF-CSE-V2') && (\n \n {this.renderDownloadButtonSet(true)}\n
\n \n ) : this.renderDownloadButtonSet()}\n \n )}\n \n );\n };\n\n renderPrePDFButtons = () => {\n const {\n formId, docId, submissionId, isEncrypted, submissionEncryptionProtocol\n } = this.props;\n\n if (isEncrypted || submissionEncryptionProtocol === 'JF-CSE-V2') {\n return;\n }\n\n return (\n \n {dropdownButtonMenu && isDesktop ? (\n
\n {showShareModal && (\n \n {this.renderButtons()}\n
\n \n ) : this.renderButtons()}\n {showPrePDFTestButtons && isDocumentMode ? this.renderPrePDFButtons() : null}\n \n {submissionId && (\n (submissionCount > 1) && (accountType.name !== 'GUEST') ? (\n \n
\n );\n }\n\n render() {\n const { isImportedPDFMode, selectedPDF, formId } = this.props;\n\n return (\n (isImportedPDFMode && selectedPDF === formId) ? this.renderImportedPDFMode() : this.renderNormalMode()\n );\n }\n}\n\nToolbarButtons.propTypes = {\n dispatch: PropTypes.func.isRequired,\n submissionId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n docId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n history: PropTypes.shape({\n push: PropTypes.func\n }),\n formId: PropTypes.string.isRequired,\n user: PropTypes.shape().isRequired,\n form: PropTypes.shape().isRequired,\n submissionCount: PropTypes.number,\n isFormMode: PropTypes.bool.isRequired,\n isImportedPDFMode: PropTypes.bool.isRequired,\n zoom: PropTypes.number.isRequired,\n selectedPDF: PropTypes.string.isRequired,\n selectedPDFRole: PropTypes.string.isRequired,\n showShareModal: PropTypes.bool,\n isAdmin: PropTypes.bool.isRequired,\n isDocumentMode: PropTypes.bool,\n submissionEncryptionProtocol: PropTypes.string,\n isDocumentLoaded: PropTypes.bool,\n isEncrypted: PropTypes.bool,\n isSignMode: PropTypes.bool,\n isMobile: PropTypes.bool,\n isHIPAA: PropTypes.bool,\n pdfPassword: PropTypes.string\n};\n\nToolbarButtons.defaultProps = {\n submissionId: 0,\n submissionCount: 0,\n isDocumentMode: false,\n history: {},\n docId: 0,\n showShareModal: false,\n submissionEncryptionProtocol: '',\n isDocumentLoaded: false,\n isEncrypted: false,\n isSignMode: false,\n isMobile: false,\n isHIPAA: false,\n pdfPassword: ''\n};\n\nconst mapStateToProps = state => {\n const {\n form, documentView, submission, document, ui, pdfs, user\n } = state;\n return {\n form,\n user,\n submissionCount: form.submissions && form.submissions.length,\n formId: form.id,\n submissionId: submission.data && (submission.data.fakeData ? false : submission.data.id),\n docId: document.present.id,\n zoom: documentView.zoom,\n isImportedPDFMode: ui.isImportedPDFMode,\n username: user.username,\n account_type: user.account_type,\n showShareModal: ui.showShareModal,\n selectedPDF: pdfs.selectedPDF,\n isEnterprise: isEnterpriseFunc(),\n isDocumentMode: !ui.isImportedPDFMode && !ui.isFormMode,\n selectedPDFRole: selectSelectedPDFRole(state),\n isAdmin: (user.account_type.name === 'ADMIN' || user.account_type.name === 'SUPPORT'),\n submissionEncryptionProtocol: submission.data?.encryptionProtocol,\n recaptchaSite: ui.recaptchaSite,\n isDocumentLoaded: ui.isDocumentLoaded,\n isEncrypted: form.properties?.isEncrypted === 'Yes',\n isSignMode: ui.isSignMode,\n isMobile: ui.device === 'isMobile',\n isHIPAA: form.properties?.isHIPAA === '1',\n pdfPassword: document.present.password\n };\n};\n\nexport default connect(mapStateToProps)(ToolbarButtons);\n","\n","import PropTypes from 'prop-types';\nimport React from 'react';\n\nexport class FeedbackText extends React.Component {\n static propTypes = {\n delay: PropTypes.string,\n text: PropTypes.string,\n classNames: PropTypes.string,\n closeFeedback: PropTypes.func\n };\n\n constructor(props) {\n super(props);\n\n this.state = {\n visible: true\n };\n }\n\n UNSAFE_componentWillReceiveProps(nextProps) {\n if (nextProps.text !== this.props.text) {\n this.setTimer();\n this.setState({ visible: true });\n }\n }\n\n componentDidMount() {\n this.setTimer();\n }\n\n setTimer() {\n if (this._timer !== null) {\n clearTimeout(this._timer);\n }\n this._timer = setTimeout(() => {\n this._timer = null;\n this.setState({ visible: false });\n if (this.props.closeFeedback) { this.props.closeFeedback(); }\n }, Number(this.props.delay));\n }\n\n render() {\n return (\n this.state.visible ? \n {this.renderDownloadButtonSet(true)}\n
\n \n ) : this.renderDownloadButtonSet())}\n { this.props.text }
: null\n );\n }\n}\n\nexport default FeedbackText;\n","\n","var _rect, _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 SvgEmbedIcon = props => /*#__PURE__*/React.createElement(\"svg\", _extends({\n xmlns: \"http://www.w3.org/2000/svg\",\n fill: \"none\",\n viewBox: \"0 0 40 40\"\n}, props), _rect || (_rect = /*#__PURE__*/React.createElement(\"rect\", {\n width: 40,\n height: 40,\n fill: \"#4C4F97\",\n rx: 4\n})), _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n fill: \"#fff\",\n d: \"M27.873 20.243c-1.052 1.004-2.08 1.955-3.062 2.948-.187.188-.273.549-.272.83.003.419.266.748.668.896.435.16.843.074 1.178-.269q2.236-2.263 4.47-4.528c.037-.038.063-.087.145-.199-.59-.565-1.185-1.118-1.76-1.69-.952-.946-1.887-1.91-2.834-2.86-.528-.53-1.298-.477-1.695.108-.318.468-.247 1.008.204 1.467zm-12.848-3.22c.103-.105.206-.212.287-.333.31-.46.218-1.076-.205-1.436-.405-.345-1.029-.347-1.418.043-1.546 1.55-3.08 3.11-4.689 4.736.284.262.548.49.795.736 1.272 1.281 2.536 2.569 3.81 3.85.61.616 1.5.45 1.82-.334.196-.484.022-.883-.317-1.227-.9-.918-1.807-1.83-2.713-2.744-.045-.047-.1-.083-.157-.13zm7.739-.908c-.025-.514-.35-.95-.814-1.064-.544-.133-1.05.08-1.266.579a1403 1403 0 0 0-3.382 7.85c-.248.582.026 1.196.59 1.435.55.234 1.16-.028 1.417-.621a4313 4313 0 0 0 3.302-7.665c.069-.163.103-.342.154-.513z\"\n})));\nexport default SvgEmbedIcon;","var _rect, _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 SvgFeedbackIcon = props => /*#__PURE__*/React.createElement(\"svg\", _extends({\n xmlns: \"http://www.w3.org/2000/svg\",\n fill: \"none\",\n viewBox: \"0 0 40 40\"\n}, props), _rect || (_rect = /*#__PURE__*/React.createElement(\"rect\", {\n width: 40,\n height: 40,\n fill: \"#09F\",\n rx: 4\n})), _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n fill: \"#fff\",\n d: \"M20 26.43c5.523 0 10-3.454 10-7.715S25.523 11 20 11s-10 3.454-10 7.715c0 2.707 1.807 5.088 4.54 6.465a6.6 6.6 0 0 1-2.018 3.215c-.179.155-.125.453.107.499q.539.105 1.105.106c2.01 0 3.796-1.037 4.914-2.64q.664.07 1.352.07\"\n})));\nexport default SvgFeedbackIcon;","var _rect, _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 SvgIframeIcon = props => /*#__PURE__*/React.createElement(\"svg\", _extends({\n xmlns: \"http://www.w3.org/2000/svg\",\n fill: \"none\",\n viewBox: \"0 0 40 40\"\n}, props), _rect || (_rect = /*#__PURE__*/React.createElement(\"rect\", {\n width: 40,\n height: 40,\n fill: \"#9c4dd3\",\n rx: 4\n})), _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n fill: \"#fff\",\n d: \"M28.5 11h-17l2.75 2.75h11.5zm-17.5.5v17l2.75-2.75v-11.5zm18 17v-17l-2.75 2.75v11.5zm-.5.5h-17l2.75-2.75h11.5z\"\n})));\nexport default SvgIframeIcon;","var _rect, _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 SvgLightboxIcon = props => /*#__PURE__*/React.createElement(\"svg\", _extends({\n xmlns: \"http://www.w3.org/2000/svg\",\n fill: \"none\",\n viewBox: \"0 0 40 40\"\n}, props), _rect || (_rect = /*#__PURE__*/React.createElement(\"rect\", {\n width: 40,\n height: 40,\n fill: \"#FFB629\",\n rx: 4\n})), _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n fill: \"#fff\",\n fillRule: \"evenodd\",\n d: \"M14 16.808C14 13.6 16.686 11 20 11s6 2.6 6 5.808c0 2.085-.853 3.492-2.54 4.49a.32.32 0 0 0-.16.276v2.076c0 .692-.56 1.253-1.252 1.253h-4.096A1.253 1.253 0 0 1 16.7 23.65v-2.076a.32.32 0 0 0-.16-.275c-1.687-1-2.54-2.406-2.54-4.491m3.626 9.265A.626.626 0 0 0 17 26.7v1.675c0 .346.28.626.626.626h4.748c.346 0 .626-.28.626-.626V26.7a.626.626 0 0 0-.626-.626z\",\n clipRule: \"evenodd\"\n})));\nexport default SvgLightboxIcon;","var _rect, _path, _path2;\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 SvgPopupIcon = props => /*#__PURE__*/React.createElement(\"svg\", _extends({\n xmlns: \"http://www.w3.org/2000/svg\",\n fill: \"none\",\n viewBox: \"0 0 40 40\"\n}, props), _rect || (_rect = /*#__PURE__*/React.createElement(\"rect\", {\n width: 40,\n height: 40,\n fill: \"#64B200\",\n rx: 4\n})), _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n fill: \"#fff\",\n d: \"M13.496 15H12a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-1.496h-9A2.504 2.504 0 0 1 13.496 24z\"\n})), _path2 || (_path2 = /*#__PURE__*/React.createElement(\"path\", {\n fill: \"#fff\",\n fillRule: \"evenodd\",\n d: \"M28.98 24.201A1 1 0 0 1 28 25H16a1 1 0 0 1-1-1V12a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v12a1 1 0 0 1-.02.201M20.207 15c0 .415.337.752.752.752h2.225l-4.716 4.716a.752.752 0 1 0 1.064 1.064l4.716-4.717v2.226a.752.752 0 1 0 1.504 0V15a.75.75 0 0 0-.752-.752h-4.04a.75.75 0 0 0-.753.752\",\n clipRule: \"evenodd\"\n})));\nexport default SvgPopupIcon;","var _rect, _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 SvgSourceCodeIcon = props => /*#__PURE__*/React.createElement(\"svg\", _extends({\n xmlns: \"http://www.w3.org/2000/svg\",\n fill: \"none\",\n viewBox: \"0 0 40 40\"\n}, props), _rect || (_rect = /*#__PURE__*/React.createElement(\"rect\", {\n width: 40,\n height: 40,\n fill: \"#FF6100\",\n rx: 4\n})), _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n fill: \"#fff\",\n d: \"M9.505 21.761a.52.52 0 0 1-.366-.138.52.52 0 0 1-.139-.367v-4.751q0-.228.139-.366A.52.52 0 0 1 9.505 16q.228 0 .366.139a.5.5 0 0 1 .139.366v4.751a.52.52 0 0 1-.139.367.5.5 0 0 1-.366.138m4.068 1.98a.52.52 0 0 1-.366-.139.52.52 0 0 1-.139-.366v-2.435q0-.564-.207-.92a1.27 1.27 0 0 0-.565-.525 1.7 1.7 0 0 0-.801-.178 1.66 1.66 0 0 0-.753.168 1.4 1.4 0 0 0-.534.455 1.08 1.08 0 0 0-.198.644h-.624q0-.624.297-1.11a2.2 2.2 0 0 1 .832-.781q.524-.287 1.178-.287.682 0 1.217.297.545.287.851.851.318.564.317 1.386v2.435a.5.5 0 0 1-.148.366.48.48 0 0 1-.357.139m-4.068 0a.52.52 0 0 1-.366-.139.52.52 0 0 1-.139-.366v-4.415q0-.228.139-.366a.52.52 0 0 1 .366-.139q.228 0 .366.139a.5.5 0 0 1 .139.366v4.415a.52.52 0 0 1-.139.366.5.5 0 0 1-.366.139m8.222-.01a1.64 1.64 0 0 1-.89-.247 1.8 1.8 0 0 1-.625-.693 2.1 2.1 0 0 1-.227-.98v-4.722q0-.218.138-.356a.48.48 0 0 1 .357-.14.48.48 0 0 1 .356.14.48.48 0 0 1 .139.356v4.722q0 .396.217.663a.67.67 0 0 0 .535.267h.337q.177 0 .297.139a.5.5 0 0 1 .128.356.44.44 0 0 1-.168.357.6.6 0 0 1-.416.138zm-2.197-4.365a.48.48 0 0 1-.337-.12.39.39 0 0 1-.129-.296.41.41 0 0 1 .129-.317.48.48 0 0 1 .337-.119h2.286q.207 0 .337.12a.41.41 0 0 1 .128.316.39.39 0 0 1-.128.297.48.48 0 0 1-.337.119zm11.308 4.375a.52.52 0 0 1-.367-.139.52.52 0 0 1-.138-.366v-2.831q0-.624-.307-.92-.307-.307-.802-.307a1.12 1.12 0 0 0-.851.356q-.327.357-.327.91h-.821q0-.642.277-1.128.277-.495.772-.772.505-.277 1.148-.277.564 0 1 .247.436.248.673.733.248.476.248 1.158v2.831a.52.52 0 0 1-.139.366.5.5 0 0 1-.366.139m-6.603 0a.52.52 0 0 1-.366-.139.52.52 0 0 1-.139-.366v-4.405q0-.228.139-.366a.52.52 0 0 1 .366-.139q.228 0 .366.139a.5.5 0 0 1 .139.366v4.405a.52.52 0 0 1-.139.366.5.5 0 0 1-.366.139m3.306 0a.52.52 0 0 1-.366-.139.52.52 0 0 1-.139-.366v-2.831q0-.624-.306-.92-.307-.307-.802-.307a1.12 1.12 0 0 0-.852.356q-.336.357-.336.91h-.624q0-.642.258-1.128.257-.495.712-.772t1.04-.277q.564 0 1 .247.435.248.673.733.247.476.247 1.158v2.831a.52.52 0 0 1-.138.366.5.5 0 0 1-.367.139m6.766-.01q-.435 0-.772-.238a1.6 1.6 0 0 1-.525-.643 2.3 2.3 0 0 1-.188-.95v-5.405a.48.48 0 0 1 .139-.356.48.48 0 0 1 .356-.139q.217 0 .357.139a.48.48 0 0 1 .138.356V21.9q0 .366.139.604.137.237.356.237h.248q.197 0 .316.139a.5.5 0 0 1 .129.356.43.43 0 0 1-.188.357.8.8 0 0 1-.485.138z\"\n})));\nexport default SvgSourceCodeIcon;","var _rect, _path, _path2, _path3;\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 SvgWordpressIcon = props => /*#__PURE__*/React.createElement(\"svg\", _extends({\n xmlns: \"http://www.w3.org/2000/svg\",\n fill: \"none\",\n viewBox: \"0 0 40 40\"\n}, props), _rect || (_rect = /*#__PURE__*/React.createElement(\"rect\", {\n width: 40,\n height: 40,\n fill: \"#343c6a\",\n rx: 4\n})), _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n fill: \"#fff\",\n d: \"M11.422 20a8.58 8.58 0 0 0 4.835 7.721L12.164 16.51a8.55 8.55 0 0 0-.742 3.49m14.369-.433c0-1.06-.38-1.794-.707-2.366-.435-.706-.843-1.305-.843-2.011 0-.789.599-1.523 1.441-1.523.038 0 .074.005.111.007A8.55 8.55 0 0 0 20 11.422a8.57 8.57 0 0 0-7.167 3.867c.2.006.39.01.552.01.897 0 2.286-.11 2.286-.11.462-.026.517.653.055.708 0 0-.465.054-.982.081l3.124 9.292 1.877-5.63-1.336-3.662c-.462-.027-.9-.082-.9-.082-.462-.027-.408-.734.054-.706 0 0 1.417.109 2.26.109.897 0 2.286-.11 2.286-.11.463-.027.517.653.055.707 0 0-.465.055-.982.082l3.1 9.222.856-2.86c.371-1.186.653-2.038.653-2.773\"\n})), _path2 || (_path2 = /*#__PURE__*/React.createElement(\"path\", {\n fill: \"#fff\",\n d: \"m20.15 20.75-2.573 7.48a8.58 8.58 0 0 0 5.272-.138 1 1 0 0 1-.061-.118zm7.378-4.867q.057.41.058.882c0 .871-.163 1.85-.653 3.073l-2.62 7.576A8.57 8.57 0 0 0 28.579 20a8.54 8.54 0 0 0-1.051-4.116Z\"\n})), _path3 || (_path3 = /*#__PURE__*/React.createElement(\"path\", {\n fill: \"#fff\",\n d: \"M20 10c-5.514 0-10 4.486-10 10s4.486 10 10 10 10-4.486 10-10-4.486-10-10-10m0 19.542c-5.261 0-9.541-4.28-9.541-9.542s4.28-9.541 9.541-9.541 9.541 4.28 9.541 9.54c0 5.262-4.28 9.543-9.54 9.543Z\"\n})));\nexport default SvgWordpressIcon;","var _rect, _rect2, _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 SvgWeeblyBadge = props => /*#__PURE__*/React.createElement(\"svg\", _extends({\n xmlns: \"http://www.w3.org/2000/svg\",\n width: 155,\n height: 40,\n fill: \"none\"\n}, props), _rect || (_rect = /*#__PURE__*/React.createElement(\"rect\", {\n width: 154.216,\n height: 39.216,\n x: 0.392,\n y: 0.392,\n fill: \"#3192E7\",\n rx: 3.608\n})), _rect2 || (_rect2 = /*#__PURE__*/React.createElement(\"rect\", {\n width: 154.216,\n height: 39.216,\n x: 0.392,\n y: 0.392,\n stroke: \"#fff\",\n rx: 3.608\n})), _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n fill: \"#fff\",\n d: \"M34.323 7.983c-2.445 0-4.483 1.626-5.109 4.058-1.126-3.655-4.01-4.056-5.214-4.056-1.203 0-4.086.4-5.214 4.054-.624-2.43-2.663-4.054-5.109-4.054-3 0-5.349 2.145-5.349 4.881 0 1.211.3 2.177.66 3.226l4.073 11.518C14.425 31.43 17.202 32 18.737 32c2.406 0 4.282-1.233 5.261-3.418.98 2.195 2.855 3.434 5.262 3.434 1.532 0 4.308-.571 5.68-4.405l4.095-11.558.032-.095q.071-.223.139-.419c.218-.644.466-1.375.466-2.272 0-3.062-2.25-5.285-5.35-5.285m1.93 7.086-4.095 11.558c-.5 1.397-1.332 2.438-2.896 2.438-1.465 0-2.332-.817-2.764-2.216l-2.464-7.693h-.068l-2.462 7.693c-.432 1.4-1.299 2.2-2.764 2.2-1.564 0-2.396-1.033-2.896-2.43l-4.062-11.487c-.333-.966-.5-1.564-.5-2.264 0-1.067 1-1.929 2.397-1.929 1.166 0 1.999.77 2.264 1.901l2.764 9.163h.065l2.798-8.96c.366-1.3 1.032-2.102 2.43-2.102s2.064.803 2.43 2.101l2.798 8.963h.065l2.764-9.163c.265-1.132 1.098-1.903 2.264-1.903 1.398 0 2.397.866 2.397 2.331 0 .534-.234 1.067-.466 1.8zM52.542 18.12a3.75 3.75 0 0 1-1.46-.28 3.5 3.5 0 0 1-1.16-.81 3.8 3.8 0 0 1-.77-1.22 4.2 4.2 0 0 1-.27-1.53q0-.84.27-1.54t.76-1.22a3.35 3.35 0 0 1 1.16-.8q.67-.29 1.46-.29.77 0 1.38.27.62.27 1.04.7.43.43.61.92l-.88.43a2.22 2.22 0 0 0-.81-1.03q-.55-.38-1.34-.38-.78 0-1.39.37-.6.37-.94 1.03t-.34 1.54q0 .87.34 1.53.35.66.95 1.03.61.37 1.39.37.68 0 1.23-.29a2.24 2.24 0 0 0 .87-.8q.32-.51.32-1.18v-.46l.45.42h-2.88v-.85h3.42v.66q0 .78-.27 1.41t-.74 1.08q-.47.44-1.09.68t-1.31.24m6.804 0q-.78 0-1.39-.37a2.64 2.64 0 0 1-.96-1.01 3 3 0 0 1-.35-1.45q0-.81.34-1.44.35-.63.94-.99.6-.37 1.34-.37.6 0 1.06.22.47.21.79.58.33.36.5.83.18.46.18.96 0 .11-.02.25-.01.13-.03.25h-4.42v-.8h3.88l-.44.36q.09-.52-.1-.93a1.51 1.51 0 0 0-1.4-.89q-.47 0-.86.24t-.61.69q-.21.44-.17 1.05-.04.59.18 1.04.23.44.64.69.42.24.91.24.54 0 .91-.25.369-.25.6-.64l.78.4a2 2 0 0 1-.5.68q-.33.3-.79.48-.45.18-1.01.18m5.552-.06q-.79 0-1.22-.45-.42-.45-.42-1.27V13.5h-.98v-.89h.2q.36 0 .57-.22t.21-.58v-.44h.93v1.24h1.21v.89h-1.21v2.81q0 .27.08.47.09.2.29.32.2.11.53.11.07 0 .17-.01l.2-.02V18q-.13.03-.29.04-.16.02-.27.02m2.903-.06v-5.39h.93V18zm0-6.25v-1.2h.93v1.2zm4.263 6.31q-.79 0-1.22-.45-.42-.45-.42-1.27V13.5h-.98v-.89h.2q.36 0 .57-.22t.21-.58v-.44h.93v1.24h1.21v.89h-1.21v2.81q0 .27.08.47.09.2.29.32.2.11.53.11.07 0 .17-.01l.2-.02V18q-.13.03-.29.04-.159.02-.27.02m5.464.06q-.78 0-1.41-.36a2.74 2.74 0 0 1-1-1.01 2.84 2.84 0 0 1-.37-1.45q0-.81.36-1.44.37-.63 1-1a2.75 2.75 0 0 1 1.42-.37q.78 0 1.41.37.63.36.99.99.37.63.37 1.45t-.38 1.46q-.38.63-1.01 1-.62.36-1.38.36m0-.9q.5 0 .9-.25a1.73 1.73 0 0 0 .64-.69q.24-.44.24-.98 0-.55-.24-.97a1.75 1.75 0 0 0-.64-.68 1.6 1.6 0 0 0-.9-.26q-.51 0-.92.26-.4.25-.64.68-.24.42-.24.97 0 .54.24.98t.64.69q.41.25.92.25m3.683.78v-5.39h.91v1.05l-.15-.09q.2-.51.64-.79.45-.29 1.05-.29.58 0 1.03.26.459.26.72.72.27.46.27 1.04V18h-.94v-3.19q0-.45-.16-.76a1.14 1.14 0 0 0-.46-.48 1.24 1.24 0 0 0-.67-.18q-.38 0-.68.18a1.2 1.2 0 0 0-.46.49 1.54 1.54 0 0 0-.17.75V18zm9.12.06q-.791 0-1.22-.45-.42-.45-.42-1.27V13.5h-.98v-.89h.2q.36 0 .57-.22t.21-.58v-.44h.93v1.24h1.21v.89h-1.21v2.81q0 .27.08.47.09.2.29.32.199.11.53.11.069 0 .17-.01l.2-.02V18q-.131.03-.29.04-.162.02-.27.02m1.474-.06v-7.57h.93v3.23l-.17-.09q.2-.51.64-.79.45-.29 1.05-.29.58 0 1.03.26.46.26.72.72.27.46.27 1.04V18h-.94v-3.19q0-.45-.17-.76a1.16 1.16 0 0 0-.45-.48 1.24 1.24 0 0 0-.67-.18q-.37 0-.67.18a1.2 1.2 0 0 0-.47.49q-.17.31-.17.75V18zm7.98.12q-.78 0-1.39-.37a2.64 2.64 0 0 1-.96-1.01 3 3 0 0 1-.35-1.45q0-.81.34-1.44.35-.63.94-.99.6-.37 1.34-.37.601 0 1.061.22.47.21.79.58.33.36.5.83.18.46.18.96 0 .11-.02.25-.01.13-.03.25h-4.42v-.8h3.88l-.44.36q.09-.52-.1-.93a1.511 1.511 0 0 0-1.4-.89q-.47 0-.86.24t-.61.69q-.21.44-.17 1.05-.04.59.18 1.04.23.44.64.69.42.24.91.24.54 0 .91-.25.369-.25.6-.64l.78.4a2 2 0 0 1-.5.68q-.33.3-.79.48a2.7 2.7 0 0 1-1.01.18M50.125 30l-2-7.45h1.46l1.57 6.35h-.38l1.64-6.35h1.41l1.63 6.35h-.38l1.57-6.35h1.46l-2 7.45h-1.56l-1.65-6.18h.44L51.685 30zm10.953.12q-.84 0-1.47-.38a2.65 2.65 0 0 1-.98-1.03 3 3 0 0 1-.35-1.44q0-.82.35-1.45.36-.64.97-1.01.62-.37 1.38-.37.64 0 1.12.21.49.21.83.58t.52.85a2.8 2.8 0 0 1 .16 1.31 1 1 0 0 1-.05.26h-4.2v-1h3.46l-.62.47q.09-.46-.05-.82a1.14 1.14 0 0 0-.44-.57 1.24 1.24 0 0 0-.73-.21 1.3 1.3 0 0 0-.73.21 1.26 1.26 0 0 0-.49.6q-.16.39-.12.95-.04.5.13.89.18.38.52.59.35.21.8.21t.76-.19a1.36 1.36 0 0 0 .5-.51l1.06.52q-.16.39-.5.69t-.81.47q-.46.17-1.02.17m6.123 0q-.84 0-1.47-.38a2.65 2.65 0 0 1-.98-1.03 3 3 0 0 1-.35-1.44q0-.82.35-1.45.36-.64.97-1.01.62-.37 1.38-.37.64 0 1.12.21.49.21.83.58t.52.85a2.8 2.8 0 0 1 .16 1.31 1 1 0 0 1-.05.26h-4.2v-1h3.46l-.62.47q.09-.46-.05-.82a1.14 1.14 0 0 0-.44-.57 1.24 1.24 0 0 0-.73-.21 1.3 1.3 0 0 0-.73.21 1.26 1.26 0 0 0-.49.6q-.16.39-.12.95-.04.5.13.89.18.38.52.59.35.21.8.21t.76-.19a1.36 1.36 0 0 0 .5-.51l1.06.52q-.16.39-.5.69t-.81.47q-.46.17-1.02.17m6.513 0q-.59 0-1.09-.23a1.93 1.93 0 0 1-.78-.68l.13-.26V30h-1.23v-7.57h1.31v3.21l-.2-.27q.28-.44.76-.68.48-.25 1.11-.25.77 0 1.39.38t.98 1.02q.37.64.37 1.44 0 .79-.36 1.44t-.98 1.03q-.62.37-1.41.37m-.15-1.2q.45 0 .8-.21t.54-.58q.2-.37.2-.85t-.2-.84a1.4 1.4 0 0 0-.54-.58q-.35-.22-.8-.22-.43 0-.78.21-.34.21-.54.59-.19.37-.19.84 0 .48.19.85.2.37.54.58.35.21.78.21M77.463 30v-7.57h1.31V30zm3.18 2.21a2.3 2.3 0 0 1-.43-.04 1.3 1.3 0 0 1-.38-.11v-1.1q.13.03.31.06.189.03.35.03.45 0 .65-.21.209-.21.37-.55l.36-.84-.02 1.1-2.37-5.99h1.41l1.66 4.42h-.5l1.65-4.42h1.42l-2.37 5.99q-.21.53-.51.9t-.7.56q-.39.2-.9.2M87.118 30l2.57-7.45h1.76l2.57 7.45h-1.48l-.53-1.6h-2.88l-.54 1.6zm2.4-2.8h2.1l-1.24-3.71h.38zm5.219 4.8v-7.44h1.23v1.08l-.12-.27q.28-.44.76-.68.48-.25 1.11-.25.77 0 1.39.38t.98 1.02q.37.64.37 1.44 0 .79-.36 1.44t-.98 1.03q-.62.37-1.41.37-.59 0-1.09-.23a1.93 1.93 0 0 1-.78-.68l.21-.26V32zm2.82-3.08q.45 0 .8-.21t.54-.58q.2-.37.2-.85t-.2-.84a1.4 1.4 0 0 0-.54-.58q-.35-.22-.8-.22-.43 0-.78.21-.34.21-.54.59-.19.37-.19.84 0 .48.19.85.2.37.54.58.35.21.78.21m3.899 3.08v-7.44h1.23v1.08l-.12-.27q.28-.44.76-.68.48-.25 1.11-.25.77 0 1.39.38t.98 1.02q.37.64.37 1.44 0 .79-.36 1.44t-.98 1.03q-.621.37-1.41.37-.59 0-1.09-.23a1.93 1.93 0 0 1-.78-.68l.21-.26V32zm2.82-3.08q.45 0 .8-.21t.54-.58q.2-.37.2-.85t-.2-.84a1.4 1.4 0 0 0-.54-.58q-.35-.22-.8-.22-.43 0-.78.21-.34.21-.54.59-.19.37-.19.84 0 .48.19.85.2.37.54.58.35.21.78.21m9.286 1.2a3.7 3.7 0 0 1-1.48-.29 3.7 3.7 0 0 1-1.18-.81 3.7 3.7 0 0 1-.78-1.22 4.1 4.1 0 0 1-.28-1.53q0-.83.27-1.53.279-.71.78-1.22.51-.52 1.19-.8a3.7 3.7 0 0 1 1.48-.29 3.6 3.6 0 0 1 1.43.27q.639.27 1.08.72.44.44.63.97l-1.22.57a1.97 1.97 0 0 0-.71-.92q-.5-.37-1.21-.37-.7 0-1.24.33-.53.33-.83.91-.29.58-.29 1.36t.29 1.37q.3.58.83.91.54.33 1.24.33.71 0 1.21-.36.5-.37.71-.93l1.22.57q-.19.53-.63.98a3.4 3.4 0 0 1-1.08.71 3.6 3.6 0 0 1-1.43.27m6.616 0q-.84 0-1.47-.38a2.65 2.65 0 0 1-.98-1.03 3 3 0 0 1-.35-1.44q0-.82.35-1.45a2.7 2.7 0 0 1 .97-1.01q.621-.37 1.38-.37.64 0 1.12.21.49.21.83.58t.52.85a2.8 2.8 0 0 1 .16 1.31 1 1 0 0 1-.05.26h-4.2v-1h3.46l-.62.47q.09-.46-.05-.82a1.13 1.13 0 0 0-.44-.57 1.24 1.24 0 0 0-.73-.21q-.41 0-.73.21a1.27 1.27 0 0 0-.49.6q-.159.39-.12.95-.04.5.13.89.18.38.52.59.35.21.8.21t.76-.19q.32-.19.5-.51l1.06.52q-.16.39-.5.69t-.81.47q-.459.17-1.02.17m3.543-.12v-5.44h1.23v1.07l-.1-.19q.19-.49.62-.74a1.97 1.97 0 0 1 1.02-.26q.6 0 1.06.26.47.26.73.73.26.46.26 1.07V30h-1.31v-3.19q0-.36-.14-.62a.98.98 0 0 0-.39-.4q-.24-.15-.57-.15-.32 0-.57.15a1 1 0 0 0-.39.4q-.14.26-.14.62V30zm8.408.06q-.92 0-1.43-.5-.5-.51-.5-1.43v-2.4h-.94v-1.17h.1q.4 0 .62-.21t.22-.61v-.42h1.31v1.24h1.25v1.17h-1.25v2.33q0 .27.09.46a.67.67 0 0 0 .3.29q.21.1.53.1.07 0 .16-.01l.19-.02V30q-.14.02-.32.04t-.33.02m4.182.06q-.84 0-1.47-.38a2.65 2.65 0 0 1-.98-1.03 3 3 0 0 1-.35-1.44q0-.82.35-1.45.36-.64.97-1.01a2.64 2.64 0 0 1 1.38-.37q.64 0 1.12.21.49.21.83.58t.52.85a2.8 2.8 0 0 1 .16 1.31 1 1 0 0 1-.05.26h-4.2v-1h3.46l-.62.47a1.46 1.46 0 0 0-.05-.82 1.14 1.14 0 0 0-.44-.57 1.24 1.24 0 0 0-.73-.21 1.3 1.3 0 0 0-.73.21 1.26 1.26 0 0 0-.49.6q-.16.39-.12.95-.04.5.13.89.18.38.52.59.35.21.8.21t.76-.19q.32-.19.5-.51l1.06.52q-.16.39-.5.69t-.81.47q-.46.17-1.02.17m3.543-.12v-5.44h1.23v1.21l-.1-.18q.19-.61.59-.85.41-.24.98-.24h.32v1.16h-.47q-.56 0-.9.35-.34.34-.34.96V30z\"\n})));\nexport default SvgWeeblyBadge;","\n","\n","var _title, _desc, _g;\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 SvgQrCode = props => /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: \"30px\",\n height: \"30px\",\n xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\"\n}, props), _title || (_title = /*#__PURE__*/React.createElement(\"title\", null, \"qr_code\")), _desc || (_desc = /*#__PURE__*/React.createElement(\"desc\", null, \"Created with Sketch.\")), _g || (_g = /*#__PURE__*/React.createElement(\"g\", {\n id: \"page-2\",\n stroke: \"none\",\n strokeWidth: 1,\n fill: \"none\",\n fillRule: \"evenodd\"\n}, /*#__PURE__*/React.createElement(\"g\", {\n id: \"share2\",\n transform: \"translate(-420.000000, -212.000000)\"\n}, /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group-8\",\n transform: \"translate(420.000000, 210.000000)\"\n}, /*#__PURE__*/React.createElement(\"image\", {\n id: \"qr_code\",\n x: 0,\n y: 2,\n width: 30,\n height: 30,\n xlinkHref: \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAMAAACahl6sAAAABlBMVEX///8AAABVwtN+AAALUUlEQVR4Ae2Z0ZLdxhFDk///6WzEPleLE0yLlJVyKkW/4AINoIfDu1rZ/sc/3n/eG3hv4L2B9wb+xhv452/80487RQxXytIxQ58ge8AnWbxkE2eKuFI1QZ8ge8AnWbxkE2eKuFI1QZ8ge8AnWbxkE2eKuFI1QZ8ge8AnWbxkE2eKuFI1QZ8ge8AnWbxkE2eKuFI1QZ8ge8AnWbxkE2eKuFI1QZ8ge0DtQ67Inhl2qmQ3HVRlO52shwfZth98X9+bDpk0y1SXf8SM/kr+zL9/0L5Ovwe+PnfTQVW208l6eJBt+8H39b3pkEmzTHX5R8zor+TP/PsH7ev0e+DrczcdVGU7nayHB9m2H3xf35sOmTTLVJd/xIz+Sv7Mv3/Qvk6/B74+d9NBVbbTyXp4kG37wff1vemQSbNMdflHzOhJpjJx3Iif8PbhsO+KqOlAkS9k2ahQUHJmYWMWpaKjitOkpgNFvpCGUaGg5MzCxixKRUcVp0lNB4p8IQ2jQkHJmYWNWZSKjipOk5oOFPlCGkaFgpIzCxuzKBUdVZwmNR0o8oU0jAoFJWcWNmZRKjqqOE1qOlDkC2kYFQpKzixszKJUdFRxmtR0oMgX0jAqFJScWdiYDxT5QhXn8J9MEzFpD3ItzobPb17kzMK0QBRX3ZfD90G+7kN3DQXnxkT7PaKOGZp4qwmTmkTXYlXwlzrkzMK0QBTXhbeaMKlJdC1WxfsgXxeSFwbjpuCJTBPxjApNJDIqFJScWZgWiOK6UMU5/PzE4roQ05PibPhcKzKViVqAOWWpOdQTUN9NTBPpHxUKSs4srO87VCBfqIreJBM0kd5RoaDkzML6+kMF8oWq6E0yQRPpHRUKSs4srK8/VCBfqIreJBM0kd5RoaDkzML6+kMF8oWq6E0yQRPpHRUKSs4srK8/VCBfqIreJBM0kd5RoaDkzML6+kMF8oWq6E0yQRPpHRUKHmTGgRSPCM2Kruq3Z9R+fgfoz2iZoLkOlQUfvn3gjOOBZnNX2ZNelpGBr9grWLBGGWofNJu7yp70HoqRO/YKFvSMVM44MjSbu8qe9NJPBr5ir2DBGmWofdBs7ip70nsoRu7YK1jQM1I548jQbO4qe9JLPxn4ir2CBWuUofZBs7mr7EnvoRi5Y6/QAp3iQGcB06Rs176kPYp6C9kD3grJlCfnT/8xqbhTCtWEfAcpBu9k7NH6pCrulMaMot5CisFbIZm0PqmKO6Uwo6i3kGLwVkgmrU+q4k4pzCjqLaQYvBWSSeuTqrhTCjOKegspBm+FZNL6pCrulMKMot5CisFbIZm0PqmKO6Uwo6i3kOI/iH2vFoxJJ5fpb6bvg/z8L+x/86vQ9yTfjM72frV0If9Nmm8Cpo3vG9GFHCkXuOKkV4/+ErxTjpPviX+n0LpOqQD3w+Wi3dv3kcmptnfao9wQGRD3imNePSzApExSbe90byID4l5xzKvnfZCv69Gt6t46JQPutzxTVfWMTCvV9k5Z05vIgLhXVFX3yrRSbe+UNb2JDIh7RVV1r0wr1fZOWdObyByQcOLBnPJEELPh82NwjQ9DVVCVmVRPTBvWZnXIq6Y0H4aq6JlUT0wb1mZ1yKumNB+GquiZVE9MG9ZmdcirpjQfhqromVRPTBvWZnXIq6Y0H4aq6JlUT0wb1mZ1yKumNB+GquiZVE9MG9ZmdcirpjQfhqromVQ/TJWqSirvp+P6kF6GysjUp1Knqqvs4V8BDq6Rb1WllwUqlqlPpd7a/j7I161x6XljXe2XfLjGbu7qZ53GQxknlRfTYHoZKiNTn0rNfoYsANETNb1VNQ1Ee0am3HpgvUl7Di8XV+7VIky5qKuHqOROsx+P9kAZDyJnR1f9s3Irk/so7tuZrsWYsthn6wvI0JG4Z8heSLJnmA7upix+H+Tb5fWL04XJJPqt7dvH3aQF33L//tizZGQeumfIXkhDzzBdizFl8fvV4l6+sN+uLkwm0W9t3z7uJi34lvv3x54lI/PQPUP2Qhp6hula/Isz5j5Yb9YpMP8+sqY3MAW1fuSeRSVbzQwx/z7uTUzB2QMd3LevZoZ7xZ3p3sQUfB+Em/j8UaAruXPnu4cN3cUU1PqRexaVbDUzxPz7uDcxBWcPdHDfvpoZ7hV3pnsTU1APsi5QBi/yAyTat08Rpk69rVfRkUg2Vf99BteGh4aRJ4mpU9dnlt+PdCSSTfV9kJ/3oRvqrwA7ZuGMUXFXPJiQH6DqSeZhMM1UlAyY2ferxb3cRG63X+OUYOrUm3oVHYlkU/3f/GHX0+dj3noAmaC9mOmKPcqtglMBXUNap0yPktmnuCr2qLdPVLIK71VdLkWhvYLpij066gem4sOvDyqeaVf3KJlewXTFHtVa/ryVrOJ7VZdLUWivYLpij476gan48OuDimfa1T1KplcwXbFHtfb/9o3M1ehxu9pNXG6fjopJxSmrAarMQe6urlIxmKfwr8msOHhTVj80m1D91equrn46rg95ivdBft6HLgp6uFXJohPuKs1pGu/7RriI//jf39zb4VYli+ZlU9Xx5wl+fJIpiw/elNUAzSZU/7CPTqNo78CcuEbTemCcccbQA3YX1etpaMScuEbTemDqhx5wSjSlemTobk7XGk3rgXGmvpUp2F1Ur6dRBZlsvKXKlA2Hbz/bQYV0ctHdnMdZo2k9sP2ITMH9bOtpVKHjrFF5O1U/9IDvg/y8mPU+NZyU1E7ZMFPon0fW5+HYwzSP0VUy2YRX0z9PtShPzJ813SRVZ2OqRrn+HGXfNGot05S7qjPdMinzVyj73gc5/QWXGxr8K5d9K8u+94380TfCtT7BfAVK6mX2KaqaktKEOZEpmNN7LPcpQ3E3SV0pTVowlCnYXbuq9WmmuJukrpSm7IcxBdGfoNZnlOJukrpSmrIfxhREf4Jan1GKu0nqSmnKfhhTEP0Jan1GKe4mqSulKfthTEH0J6j1GaW4m6SulKbshzEF0Z+g1meU4m6SulKash/GFBwduuKho1dITXpomu1Mn2T42/b6AAxZAM+9u/rkUOx5knkf5Nv958UxkJp0mP9Ld75imUTZA+YC1I6Hql4hNemhadYyfZJ5v1rf3lleHAOpSYf9F79abEjUK++UJ9A0m54wCnuGKTguUWVnitopFZoSeo4U9iRTcFyiys4UtVMqNCX0HCnsSabguESVnSlqp1RoSug5UtiTTMFxiSo7U9ROqdCU0HOksCeZguMSVXamqJ1SoSmh50hhTzIFxyWq7ExRO6VCU0LPkcKeZAqOS1TZmaKKIl9Ik0yik5EqmsVi4/1ANvKLvodQ132f5uvDnlGTKNmK2sPJkWuGX8AM1300ySQ6VVJF2VdxvB/IRp5LUS0QTfOn+frAsGekipKtON4PjAleM+8b+boebmZuCpr3h9pNTBO5ejAbP3trCHHdR7FMorn2VjGmjH7WSZY7pwz7odLLgj2jJlGyFVkAan3N/OJnhKoL1cBQstbiClSE2SEqWeGcMpxKUakZ3b+znDGR/t6U3s8PI7LC2cFwzKJSM/o+CLf18/9u6Yb0CkR/xn980mV3KlX71Kgp6wMVYXaISlY4pwx1ZDZciCmj71fr571wX7qhX8iMAykdEZrNqJH8/KHCNBFvqjCmuVYqr9xy5WqGDuYefvdQJHPS3cQ0F0h9H+TrQvJWeQWoujHkinjrkGKZoOBkoSuyZ0zQrEBVE3JFvHX4PgjX85/Ihc0EOihVcZmT4k0VxjQXSOWLbrlyNUMHc8/hC6FMRjmMTDqLMkwVukV15DXDnlu4NmnoQo1v0fdBfIvmt65xTH8ly573jfgWzbmpO/hXsvS/b8S3aM5N3UFnX/7ewHsD7w28N/DewO/cwL8ABzpJ4uF4JQ4AAAAASUVORK5CYII=\"\n}))))));\nexport default SvgQrCode;","\n","\n","/* eslint-disable complexity */\n/* eslint-disable max-len */\nimport PropTypes from 'prop-types';\nimport React, { createRef } from 'react';\nimport isUndefined from 'lodash/isUndefined';\nimport RichTextEditor from '@jotforminc/rich-text-editor';\nimport { ImageUploadModal } from '@jotforminc/jotform-common';\nimport { getStringByteLength, checkAndAddProtocolToTargetLink } from '@jotforminc/utils';\nimport { translate } from '../mixins/Translation';\nimport Utils from '../utils';\n\nconst {\n object, string, bool, array, func\n} = PropTypes;\n\nexport default class Editor extends React.Component {\n static propTypes = {\n name: string,\n config: object.isRequired, // tinyMCE config\n content: string.isRequired, // value in tiyMCE textarea\n addFormFields: bool, // whether to add formfields listbox or not\n questions: array, // questions obtained form QuestionStore\n statics: array,\n onInit: func, // on tiyMCE init\n containerClass: string,\n containerStyle: object,\n staticFieldsAtTop: bool,\n imagePickerModalClass: string,\n filterPostData: bool,\n renderTabs: array,\n filterFields: array,\n formProperties: object,\n isPDFImporter: bool,\n actions: object,\n getLayouts: func,\n getGalleryImages: func,\n translationEditor: bool,\n updateDependencies: array,\n isUpdateNecessary: func,\n isEncrypted: bool\n };\n\n constructor(props) {\n super(props);\n this._prepareEditorContent = this._prepareEditorContent.bind(this);\n this._staticTyButtonContentHTML = this._staticTyButtonContentHTML.bind(this);\n this._pdfFooterTyPageHTML = this._pdfFooterTyPageHTML.bind(this);\n this._pdfItemTYPageHTML = this._pdfItemTYPageHTML.bind(this);\n this._editorAddRemovePDFClass = this._editorAddRemovePDFClass.bind(this);\n this._changeVisibilityOfTyIcon = this._changeVisibilityOfTyIcon.bind(this);\n this._changeVisibilityOfPDFImporterButtons = this._changeVisibilityOfPDFImporterButtons.bind(this);\n this._handleClassNameAccToLayout = this._handleClassNameAccToLayout.bind(this);\n this._preparePDFs = this._preparePDFs.bind(this);\n this._checkDefaultSchemeV1 = this._checkDefaultSchemeV1.bind(this);\n this._yesToBool = this._yesToBool.bind(this);\n this.formatFormFieldsToPDFName = this.formatFormFieldsToPDFName.bind(this);\n this.mapFieldValuesToPDFName = this.mapFieldValuesToPDFName.bind(this);\n this._handleUploadSuccess = this._handleUploadSuccess.bind(this);\n this._handleRemove = this._handleRemove.bind(this);\n this._removeExistedTyButtonContent = this._removeExistedTyButtonContent.bind(this);\n this._createPDFFooterContent = this._createPDFFooterContent.bind(this);\n this._createFillAnotherFormFooterContent = this._createFillAnotherFormFooterContent.bind(this);\n this._createVisitURLFooterContent = this._createVisitURLFooterContent.bind(this);\n this._createStaticButtonContent = this._createStaticButtonContent.bind(this);\n this._prepareTYContentAccToLayouts = this._prepareTYContentAccToLayouts.bind(this);\n this._getAllPDFS = this._getAllPDFS.bind(this);\n this._createImportedPdfEnableThankYouButtonsContent = this._createImportedPdfEnableThankYouButtonsContent.bind(this);\n this._pdfImporterThankYouButtons = this._pdfImporterThankYouButtons.bind(this);\n this._pdfImporterSendEmailButton = this._pdfImporterSendEmailButton.bind(this);\n this.encodeHTML = this.encodeHTML.bind(this);\n this.isAnyThankyouSelectedPDFMismatches = this.isAnyThankyouSelectedPDFMismatches.bind(this);\n this.isActionButtonsHasError = this.isActionButtonsHasError.bind(this);\n // this._createBase64Icon = this._createBase64Icon.bind(this);\n this.editor = createRef();\n\n this.state = {\n value: this.props.content || '',\n error: null,\n imageUploadModal: false\n };\n\n const self = this;\n this.extraPlugins = [\n {\n id: 'charactercount',\n generator: function (editor) {\n const _self = this;\n // mysql allows 65535 bytes but there is an small difference between byte calculation made in getCount and the one made in backend. so we have left some tolerance.\n const maxByteSize = 60000;\n const showWarningByteSize = 50000;\n function update() {\n const limitExceededLabel = document.querySelector('.mce-characterpercentage');\n const editorSelector = document.querySelector('.mce-tinymce.mce-panel.mce-container:not(.mce-fullscreen)');\n const count = _self.getCount();\n if (limitExceededLabel) {\n if (count >= showWarningByteSize) {\n limitExceededLabel.style.display = 'flex';\n } else {\n limitExceededLabel.style.display = 'none';\n }\n }\n\n if (editorSelector) {\n if (count >= maxByteSize) {\n editorSelector.classList.add('errored-tinymce');\n } else {\n editorSelector.classList.remove('errored-tinymce');\n }\n }\n\n editor.theme.panel.find('#charactercount').text([`{0} / ${maxByteSize}`, count]);\n editor.theme.panel.find('#characterpercentage').text(['{0}% of Limit Used', _self.getPercentage(count)]);\n }\n editor.on('init', () => {\n const style = 'color:#ffffff; margin: 2px 0 2px 8px; padding: 4px 8px; font-size: 12px; cursor: pointer;';\n const limitExceededStyle = 'border-radius: 4px; background: #d73027;';\n const statusbar = editor.theme.panel && editor.theme.panel.find('#statusbar')[0];\n if (statusbar) {\n window.setTimeout(() => {\n const editorSelector = document.querySelector('.mce-tinymce.mce-panel.mce-container:not(.mce-fullscreen)');\n const count = _self.getCount();\n if (editorSelector) {\n if (count >= maxByteSize) {\n editorSelector.classList.add('errored-tinymce');\n } else {\n editorSelector.classList.remove('errored-tinymce');\n }\n }\n\n statusbar.insert({\n type: 'label',\n tooltip: 'If you exceed this character limit, the exceeded parts of your text will be cut.',\n name: 'charactercount',\n style: style,\n visible: !window.location.href.split('/').indexOf('pdf-editor') > -1,\n text: [`{0} / ${maxByteSize}`, count],\n classes: 'charactercount',\n disabled: editor.settings.readonly\n }, 0);\n statusbar.insert({\n type: 'label',\n tooltip: 'If you exceed this character limit, the exceeded parts of your text will be cut.',\n name: 'characterpercentage',\n style: `${style} ${limitExceededStyle} ${count <= showWarningByteSize ? 'display: none;' : ''}`,\n visible: !window.location.href.split('/').indexOf('pdf-editor') > -1,\n text: ['{0}% of Limit Used', _self.getPercentage(count)],\n classes: 'characterpercentage',\n disabled: editor.settings.readonly\n }, 0);\n editor.on('setcontent beforeaddundo keyup', update);\n }, 0);\n }\n });\n\n _self.isMaxBytesExceeded = () => {\n return _self.getCount() >= maxByteSize;\n };\n\n _self.getCount = () => getStringByteLength(editor.getContent());\n\n _self.getPercentage = byteSize => {\n const calculatePercentage = (byteSize / maxByteSize) * 100;\n const percentageToHuman = Math.round(calculatePercentage);\n\n return percentageToHuman;\n };\n }\n },\n {\n id: 'preventdelete',\n generator: function (ed) {\n ed.on('dragover dragstart dragenter dragend drag drop', evt => {\n const { target } = evt;\n if (target.contentEditable === 'false') {\n evt.preventDefault();\n evt.stopPropagation();\n return false;\n }\n });\n ed.on('click', evt => {\n const { target } = evt;\n const range = ed.selection.getRng();\n const isImage = target.className.indexOf('col-1') > -1 || target.className.indexOf('tyBgImage') > -1;\n const isTextBox = range.endContainer.parentElement.className.indexOf('wrapper') > -1 || range.endContainer.parentElement.className.indexOf('col-2') > -1 || range.endContainer.parentElement.className.indexOf('mce-content-body') > -1;\n if (isImage) {\n self.setState({ imageUploadModal: true });\n }\n if (isTextBox) {\n ed.selection.setCursorLocation(ed.getBody().querySelector('.col-2'), 0);\n }\n });\n ed.on('blur', () => {\n const content = ed.getBody();\n const { getLayouts, formProperties: { thankYouImageSrc, thankYouPageLayout = 'none' } } = self.props;\n const layouts = getLayouts(thankYouImageSrc);\n const galleryMode = layouts[thankYouPageLayout].imageType;\n const buttonClassses = ['thankYouDownloadPDF', 'thankYouEditSubmission', 'thankYouFillAgain', 'thankYouFillAnotherForm', 'thankYouVisitURL', 'thankYouViewCompletedTask'];\n let textClasses = [];\n if (galleryMode !== 'none') {\n textClasses = (galleryMode === 'Icon') ? ['wrapper', 'col-1', 'col-2', 'tyBgImage'] : ['wrapper', 'col-1', 'col-2'];\n }\n if (content) {\n const missingButtonClasses = buttonClassses.filter(buttonClass => {\n const button = content.querySelector(`.${buttonClass}`);\n if (!button) {\n self.props.actions.updateFormProperty({ [buttonClass]: 'No' });\n return true;\n }\n return false;\n });\n const missingTextClasses = textClasses.filter(textClass => {\n const textElement = content.querySelector(`.${textClass}`);\n if (!textElement) {\n return true;\n }\n return false;\n });\n if (missingButtonClasses.length > 0 || missingTextClasses.length > 0) {\n if (ed.getBody()) {\n self._prepareEditorContent(ed, self.props);\n }\n }\n }\n });\n }\n }\n ];\n\n window.addEventListener('message', event => {\n if (!isUndefined(event.data) && !isUndefined(event.data.imageUpload)) {\n if (tinymce.activeEditor.windowManager.getParams() !== null) {\n tinymce.activeEditor.windowManager.getParams().setSrc(event.data.imageUpload);\n }\n }\n });\n }\n\n componentDidUpdate(prevProps) {\n if (this.editor.current && this.editor.current.reinitializeTinyMCE && this.props.isUpdateNecessary(prevProps, this.props)) {\n this.editor.current.reinitializeTinyMCE();\n }\n }\n\n componentDidCatch(error) {\n this.setState({ error });\n }\n\n componentWillUnmount() {\n const element = document.getElementsByClassName('mce-tinymce mce-container mce-panel mce-fullscreen').length;\n if (element > 0) {\n document.querySelector('body').classList.remove('mce-fullscreen');\n document.querySelector('html').classList.remove('mce-fullscreen');\n }\n }\n\n encodeHTML(text) {\n // In order to prevent XSS Attacks.\n const encoded = Utils.htmlEncode(text);\n\n return encoded;\n }\n\n isActionButtonsHasError() {\n if (this.isAnyThankyouSelectedPDFMismatches()) return true;\n\n return false;\n }\n\n _createNdtToolBarItems(props) {\n const extraButtons = [];\n const {\n user\n } = props;\n\n // refactor !!\n if (global.location.href.indexOf('workflow') > -1) {\n if (!user?.isCSICollaborator) {\n extraButtons.push({\n id: 'actionButtons',\n classes: 'new-action-buttons-icon add-button toolbar-btn',\n type: 'button',\n text: translate('Action Button'),\n icon: false,\n onClick: () => {\n props.actions.openThankYouActionButtonsWizard();\n }\n });\n }\n return extraButtons;\n }\n if (!user?.isCSICollaborator) {\n extraButtons.push({\n id: 'actionButtons',\n classes: `new-action-buttons-icon add-button toolbar-btn ${this.isActionButtonsHasError() ? 'hasErrorBadge' : ''}`,\n type: 'button',\n text: translate('Action Buttons'),\n icon: false,\n onClick: () => {\n props.actions.openThankYouActionButtonsWizard();\n }\n });\n }\n extraButtons.push({\n id: 'addfields',\n classes: 'add-field toolbar-btn',\n type: 'button',\n text: translate('Add Field'),\n icon: false,\n onClick: () => {\n props.actions.openThankYouPageWizard('fields');\n props.actions.toggleUiProp('isSettingsRightPanelOpen', true);\n }\n });\n return extraButtons;\n }\n\n formatFormFieldsToPDFName(pdfName) {\n const { questions } = this.props;\n switch (true) {\n case pdfName.indexOf('{q_') > -1:\n // get question id inside the curly braces.\n const questionId = pdfName.split(/\\{([^\\}]*)\\}/gim).filter(v => v !== '');\n const findQid = questionId[0].split('_')[1];\n const foundQuestion = questions.find(el => el.qid === findQid);\n return (foundQuestion && foundQuestion.name) ? `{${foundQuestion.name}}` : '';\n case pdfName === '{sid}':\n return '{id}';\n case pdfName === '{formTitle}':\n return '{form_title}';\n default: return pdfName;\n }\n }\n\n mapFieldValuesToPDFName(pdfName) {\n if (!pdfName) return '';\n const pdfNamewithCurly = pdfName.split(/(\\{[^\\}]*\\})/g).filter(v => v !== '');\n const arr = [];\n if (pdfNamewithCurly) {\n Array.prototype.slice.call(pdfNamewithCurly).forEach(elem => {\n arr.push(this.formatFormFieldsToPDFName(elem));\n });\n }\n return arr.join('');\n }\n\n isAnyThankyouSelectedPDFMismatches() {\n const { formProperties: { thankYouSelectedPDFs, pdfs, id: formID } } = this.props; // eslint-disable-line react/prop-types\n const thankYouSelectedPDFList = Array.isArray(thankYouSelectedPDFs) ? thankYouSelectedPDFs : [];\n const pdfList = Array.isArray(pdfs) ? pdfs : [];\n return thankYouSelectedPDFList.some(item => pdfList.findIndex(({ id }) => id === item.pdfId) === -1 && item.pdfId !== formID);\n }\n\n _preparePDFs(thankYouSelectedPDFs, pdfs, isPDFImporter, isAdmin, id, importedPdfIsConnected, importedPdfFileName) {\n const thankYouSelectedPDFlist = Array.isArray(thankYouSelectedPDFs) ? thankYouSelectedPDFs : [];\n const selectedPDFIDs = thankYouSelectedPDFlist.map(selectedPDF => { return selectedPDF.pdfId; });\n const filteredPDFs = this._getAllPDFS(pdfs, id, isAdmin, isPDFImporter, importedPdfIsConnected, importedPdfFileName);\n if (filteredPDFs && filteredPDFs.length > 0) {\n return filteredPDFs.map(pdf => ({ ...pdf, isSelected: pdf.pdfId ? (selectedPDFIDs.indexOf((pdf.pdfId).toString()) > -1) : false }));\n }\n return null;\n }\n\n _getAllPDFS(pdfs, id, isAdmin, isPDFImporter, importedPdfIsConnected, importedPdfFileName) {\n let options = [];\n const filteredPDFlist = Array.isArray(pdfs) ? pdfs : [];\n const filteredPDFs = filteredPDFlist.filter(pdf => { return pdf.type === 'DOCUMENT'; });\n const isPDFConnected = isPDFImporter && importedPdfIsConnected;\n options = filteredPDFs.map(pdf => {\n if (pdf.type === 'DOCUMENT') {\n return {\n // isSelected: selectedPDFIDs.indexOf(pdf.id) > -1,\n pdfId: pdf.id,\n pdfName: pdf.filename,\n title: pdf.title\n };\n }\n });\n if (options.length < 1 && isAdmin && !isPDFConnected) {\n options.unshift({\n // isSelected: true,\n pdfId: id, // form id for now\n pdfName: '{sid}-{formTitle}',\n title: translate('Default Document')\n });\n } else if (isAdmin && isPDFConnected) {\n options.unshift({\n // isSelected: true,\n pdfId: id, // form id for now\n pdfName: importedPdfFileName,\n title: translate('Original PDF')\n });\n }\n return options;\n }\n\n _checkDefaultSchemeV1() {\n // since we had no selector for defaultScheme, we have to distinguish from colors, it will be refactored later\n let styleJSON;\n if (typeof this.props.formProperties.styleJSON === 'string' && this.props.formProperties.styleJSON !== '') {\n styleJSON = JSON.parse(this.props.formProperties.styleJSON);\n } else {\n styleJSON = this.props.formProperties.styleJSON || {};\n }\n const clrBg = styleJSON['welcome-titleColor'] ? true : (styleJSON['@clrBg'] && ['#F3F3FE', '#FFF', '#F5F5F5'].some(arrVal => styleJSON['@clrBg'].toUpperCase().indexOf(arrVal) > -1));\n const clrFrame = styleJSON['@clrFrame'] && styleJSON['@clrFrame'].toUpperCase().indexOf('#FFF') > -1;\n const clrText = styleJSON['@clrText'] && ['#2C3345', '#000', '#555'].some(arrVal => styleJSON['@clrText'].toUpperCase().indexOf(arrVal) > -1);\n return (clrBg && clrText && clrFrame);\n }\n\n _createBase64Icon(type, fillColor) {\n const svgBtnAttribute = [\n {\n type: 'pdf',\n d1: 'M6.99961 12C7.29961 12 7.49961 11.9 7.69961 11.7L13.3996 6L11.9996 4.6L7.99961 8.6V0H5.99961V8.6L1.99961 4.6L0.599609 6L6.29961 11.7C6.49961 11.9 6.69961 12 6.99961 12Z',\n d2: 'M0 14H14V16H0V14Z'\n },\n {\n type: 'fill',\n d1: 'M13.1073 8.66994C13.2679 9.63142 13.431 10.5712 13.1871 11.5296C12.9477 12.4689 12.5886 13.3329 11.9619 14.0762C11.3392 14.8145 10.6086 15.3876 9.72284 15.7482C7.13399 16.8011 4.48701 15.8462 3.00218 13.8954C1.43804 11.8397 1.35872 8.96081 2.81646 6.85354C4.23921 4.79677 6.62164 4.11707 8.1518 4.42915C8.16608 5.40173 8.17988 6.38189 8.19318 7.3363C9.35779 6.14304 10.549 4.9215 11.7318 3.70956C10.5303 2.47741 9.34547 1.26295 8.11337 0C8.10943 0.890274 8.10549 1.71288 8.10106 2.53549C4.00915 2.23149 0.956723 5.24166 0.2148 8.3816C-0.561115 11.6629 0.807451 15.0953 3.63523 16.8697C6.40685 18.6084 10.0135 18.3175 12.4422 16.1603C14.9749 13.9111 15.5592 10.7348 14.7266 8.02408C14.1896 8.23768 13.6551 8.45078 13.1073 8.66994Z'\n },\n {\n type: 'edit',\n d1: 'M14.342 1.20609C15.1513 2.01527 15.9558 2.81974 16.7442 3.60809C17.0976 3.26733 17.4754 2.92582 17.8245 2.55732C18.0191 2.35196 18.0013 2.0058 17.8216 1.82452C17.2761 1.27398 16.7282 0.725658 16.1749 0.182907C15.9333 -0.0540902 15.6174 -0.0630702 15.374 0.169383C15.019 0.508352 14.6805 0.864416 14.342 1.20609ZM13.6848 1.91378C13.6657 1.9312 13.635 1.95706 13.6066 1.98519C11.0286 4.54461 8.45047 7.10387 5.87536 9.66615C5.82808 9.71322 5.79362 9.79663 5.79308 9.86339C5.78729 10.5891 5.7893 11.3148 5.78984 12.0406C5.78984 12.0836 5.79525 12.1266 5.79822 12.1705C5.83522 12.1744 5.85724 12.1788 5.87931 12.1789C6.63207 12.1793 7.38482 12.1812 8.13758 12.1756C8.19476 12.1752 8.26395 12.1336 8.30684 12.0904C10.8652 9.51777 13.4214 6.94293 15.9776 4.36815C16.0086 4.33693 16.0374 4.30355 16.0555 4.28386C15.2619 3.49043 14.4759 2.70462 13.6848 1.91378Z',\n d2: 'M15.0431 17.9996H2.87866C1.5738 17.9996 0.512207 16.938 0.512207 15.6332V3.0813C0.512207 1.77638 1.5738 0.714844 2.87866 0.714844H10.0662C10.5143 0.714844 10.8777 1.07816 10.8777 1.52629C10.8777 1.97443 10.5143 2.33774 10.0662 2.33774H2.87866C2.46866 2.33774 2.13511 2.6713 2.13511 3.0813V15.6332C2.13511 16.0431 2.46866 16.3767 2.87866 16.3767H15.0431C15.4531 16.3767 15.7867 16.0431 15.7867 15.6332V10.0489C15.7867 9.60081 16.15 9.2375 16.5981 9.2375C17.0462 9.2375 17.4096 9.60081 17.4096 10.0489V15.6332C17.4096 16.938 16.348 17.9996 15.0431 17.9996Z'\n }\n\n ];\n\n const foundedSvgD = svgBtnAttribute.find(o => o.type === type);\n let propertyNames = [];\n if (foundedSvgD) {\n propertyNames = Object.keys(foundedSvgD).filter(propertyName => {\n return propertyName.indexOf('d') > -1;\n });\n }\n\n const node = document.createElementNS('http://www.w3.org/2000/svg', 'svg');\n node.setAttribute('class', 'svgTyButtons');\n node.setAttribute('viewBox', '0 0 16 16');\n node.setAttribute('width', 16);\n node.setAttribute('height', 24);\n node.setAttribute('fill', fillColor);\n\n let newPath;\n propertyNames.forEach(elem => {\n newPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');\n newPath.setAttribute('fill', fillColor);\n newPath.setAttribute('opacity', '1');\n newPath.setAttribute('d', foundedSvgD[elem]);\n newPath.setAttribute('clip-rule', 'evenodd');\n newPath.setAttribute('fill-rule', 'evenodd');\n node.appendChild(newPath);\n });\n\n // const img = document.createElement('img');\n const svgString = new XMLSerializer().serializeToString(node);\n const decoded = unescape(encodeURIComponent(svgString));\n const base64 = window.btoa(decoded);\n const imgSource = `data:image/svg+xml;base64,${base64}`;\n return imgSource;\n }\n\n _changeVisibilityOfTyIcon(displayMode, currentContent) {\n const tyIconArr = ['https://cdn.jotfor.ms/img/Thankyou-iconV2.png?v=0.1', 'https://cdn.jotfor.ms/img/check-icon.png', 'https://cdn.jotfor.ms/img/Thankyou-iconV2.png', 'https://cdn.jotfor.ms/assets/img/pdf-importer/thankyou-ok-icon.svg'];\n const allImages = currentContent && currentContent.querySelectorAll('img');\n if (allImages && allImages.length > 0) {\n Array.prototype.slice.call(allImages).forEach(el => {\n Array.prototype.slice.call(tyIconArr).forEach(elem => {\n if (el.src && (elem === el.src)) {\n this._handleClassNameAccToLayout(el, 'activeTyIcon', 'notActiveTyIcon', displayMode);\n }\n });\n });\n }\n }\n\n _handleClassNameAccToLayout(el, activeClass, passiveClass, displayMode) {\n const isActiveOrNotActiveClass = [activeClass, passiveClass].some(arrVal => el.className.indexOf(arrVal) > -1);\n el.style.display = displayMode;\n if (displayMode === 'none') {\n isActiveOrNotActiveClass ? (el.className = el.className.replace(activeClass, passiveClass)) : el.classList.add(passiveClass);\n } else if (displayMode === '') {\n isActiveOrNotActiveClass ? (el.className = el.className.replace(passiveClass, activeClass)) : el.classList.add(activeClass);\n }\n }\n\n _changeVisibilityOfPDFImporterButtons(displayMode, currentContent) {\n const pdfTyButtonsWrapper = currentContent && currentContent.querySelector('.pdff-tyButtonsWrapper');\n if (pdfTyButtonsWrapper) this._handleClassNameAccToLayout(pdfTyButtonsWrapper, 'active', 'notActive', displayMode);\n }\n\n _editorAddRemovePDFClass(thankYouDownloadPDF, hasSelectedPDFDoc, className, selector, currentContent, additionalCheck) {\n const wrapper = currentContent && currentContent.querySelector(`.${selector}`);\n if (this._yesToBool(thankYouDownloadPDF) && hasSelectedPDFDoc && wrapper && (wrapper.className.indexOf(className) === -1 && additionalCheck)) {\n wrapper.classList.add(className);\n } else if (wrapper && (wrapper.className.indexOf(className) > -1) && (!hasSelectedPDFDoc || !this._yesToBool(thankYouDownloadPDF))) {\n wrapper.classList.remove(className);\n }\n }\n\n _staticTyButtonContentHTML({\n thankYouEditSubmissionText,\n thankYouFillAgainText, id, thankYouEditSubmission, thankYouFillAgain, isNewDefaultSchemeV1, isPDFImporterNoneLayout, thankYouFillAgainSettings = [],\n thankYouViewCompletedTask,\n thankYouViewCompletedTaskText\n }) {\n const hasTyButton = (this._yesToBool(thankYouFillAgain) || this._yesToBool(thankYouEditSubmission) || this._yesToBool(thankYouViewCompletedTask)) && !isPDFImporterNoneLayout;\n const [{ prefillID = '' } = {}] = thankYouFillAgainSettings;\n\n return `\n \n
`;\n }\n\n _fillAnotherFormFooterTyPageHTML(thankYouFillAnotherForm, isNewDefaultSchemeV1) {\n return `\n \n \n
\n \n \n \n
`;\n }\n\n _fillAnotherFormItemTYPageHTML(form, thankYouFillAnotherFormText, isNewDefaultSchemeV1) {\n return ''\n + `\n \n
\n \n ${form.targetFormTitle}\n
\n `;\n }\n\n _pdfFooterTyPageHTML(thankYouDownloadPDF, isNewDefaultSchemeV1, isHIPAAUser, hasSelectedPDFDoc) {\n return `\n \n
`;\n }\n\n _pdfItemTYPageHTML(pdf, thankYouDownloadPDFText, isNewDefaultSchemeV1) {\n const isOriginalPDFSelected = (pdf.title === translate('Original PDF'));\n return ''\n + `\n \n
\n \n ${this.mapFieldValuesToPDFName(pdf.pdfName)}.pdf\n
\n `;\n }\n\n _pdfImporterThankYouButtons(isHIPAAUser) {\n return ''\n + `\n {\n this._handleUploadSuccess(e.file, galleryMode);\n this.setState({ imageUploadModal: false });\n }}\n isOpen={this.state.imageUploadModal}\n onBack={() => this.setState({ imageUploadModal: false })}\n renderTabs={['gallery', 'upload', 'choose']}\n galleryImageList={galleryImages}\n noUploadedImageText={translate('Your uploaded images will be listed here.')}\n galleryMode={galleryMode}\n {...(imageSrc ? {\n value: {\n name: imageSrc.split('/').pop(), type: 'other', url: imageSrc, size: ''\n },\n PreviewThumbnail: () => (
),\n onFileRemove: () => this._handleRemove(galleryMode)\n } : {})}\n />\n );\n }\n\n render() {\n const { error } = this.state;\n if (error) {\n return \n \n \n \n
\n );\n }\n}\n\nexport default LoadingIndicator;\n","\n","\n","\n","\n","\n","\n","\n","import PropTypes from 'prop-types';\nimport React from 'react';\nimport { LoadingIndicator } from './LoadingIndicator';\n\nclass ProcessIndicator extends React.Component {\n static propTypes = {\n children: PropTypes.node,\n messageLine1: PropTypes.string,\n messageLine2: PropTypes.string\n };\n\n render() {\n return (\n \n ${isHIPAAUser ? '' : this._pdfImporterSendEmailButton()}\n \n ![](\"//cdn.jotfor.ms/assets/img/pdf-importer/thankyou-download.svg\")
\n ${translate('Download PDF')}\n \n
`;\n }\n\n _pdfImporterSendEmailButton() {\n return ''\n + `\n ${translate('Download PDF')}\n \n - \n
- \n \n ${translate('Send')}\n \n \n
- \n \n
![](\"//cdn.jotfor.ms/assets/img/pdf-importer/thankyou-envelope.svg\")
\n ${translate('Send PDF as Email')}\n \n \n
\n \n
`;\n\n visitURLFromFooter.innerHTML = combinedHTML;\n\n return visitURLFromFooter;\n }\n\n _createStaticButtonContent({\n thankYouEditSubmissionText,\n thankYouFillAgainText,\n id,\n thankYouEditSubmission,\n thankYouFillAgain,\n isNewDefaultSchemeV1,\n isPDFImporterNoneLayout,\n thankYouFillAgainSettings,\n thankYouViewCompletedTask,\n thankYouViewCompletedTaskText\n }) {\n const staticButtonContent = document.createElement('div');\n staticButtonContent.className = 'nonEditableInvisable';\n staticButtonContent.setAttribute('contentEditable', 'false');\n const staticButtons = {\n thankYouEditSubmissionText,\n thankYouFillAgainText,\n id,\n thankYouEditSubmission,\n thankYouFillAgain,\n isNewDefaultSchemeV1,\n isPDFImporterNoneLayout,\n thankYouFillAgainSettings,\n thankYouViewCompletedTask,\n thankYouViewCompletedTaskText\n };\n staticButtonContent.innerHTML = this._staticTyButtonContentHTML(staticButtons);\n return staticButtonContent;\n }\n\n _createImportedPdfEnableThankYouButtonsContent(props) {\n const { isHIPAA } = props;\n const isHIPAAUser = (isHIPAA === 1);\n const importedPdfEnableThankYouButtonsContent = document.createElement('div');\n importedPdfEnableThankYouButtonsContent.innerHTML = this._pdfImporterThankYouButtons(isHIPAAUser);\n return importedPdfEnableThankYouButtonsContent;\n }\n\n // eslint-disable-next-line max-statements\n _prepareEditorContent(activeEditor, props) {\n const currentContent = activeEditor.getBody();\n const layouts = props.getLayouts(props.formProperties.thankYouImageSrc);\n const isNewDefaultSchemeV1 = this._checkDefaultSchemeV1();\n const {\n isPDFImporter,\n formProperties: {\n thankYouDownloadPDF,\n thankYouSelectedPDFs,\n thankYouEditSubmissionText,\n thankYouFillAgainText,\n id,\n thankYouEditSubmission,\n thankYouFillAgain,\n thankYouFillAgainSettings,\n thankYouPageLayout = 'none',\n importedPdfEnableThankYouButtons,\n thankYouFillAnotherForm,\n thankYouFillAnotherFormText,\n thankYouFillAnotherFormSettings,\n\n thankYouVisitURL,\n thankYouVisitURLText,\n thankYouVisitURLPageURL,\n thankYouVisitURLImageSource,\n\n thankYouViewCompletedTask,\n thankYouViewCompletedTaskText,\n\n [`thankYou${layouts[thankYouPageLayout].imageType}Src`]: imageSrc = 'https://cdn.jotfor.ms/img/Thankyou-iconV2.png'\n } = {}\n } = props;\n // TODO: I simply bypass this isAdmin check here instead of doing it everywhere; but it needs to be cleared all over the functions.\n // We've just enabled original pdf download on thank you action buttons, so there will be no need to check smart pdf forms and enterprise env. together.\n const isAdmin = !(props.isPDFImporter && global.JOTFORM_ENV === 'ENTERPRISE') || true;\n const isIconLayout = layouts[thankYouPageLayout].imageType === 'Icon';\n const isNoneLayout = thankYouPageLayout === 'none';\n // TODO: Since we've enabled download option for original PDF, 'isPDFImporterNoneLayout' check is deprecated and it needs to deleted all over the file\n const isPDFImporterNoneLayout = isNoneLayout && isPDFImporter && isAdmin && false;\n const hasSelectedPDFDoc = Array.isArray(thankYouSelectedPDFs) ? (thankYouSelectedPDFs.length > 0) : false;\n\n this._removeExistedTyButtonContent(currentContent);\n\n let oldContent = currentContent.innerHTML;\n let preWrapperContent = [];\n let preCol1Content = [];\n const currentContentWrapper = currentContent.querySelector('.wrapper');\n\n if (currentContentWrapper) {\n const tyContent = currentContent.querySelector('.col-2');\n if (tyContent) {\n oldContent = tyContent.innerHTML;\n }\n\n /*\n Written code use only col-1 and col-2 in the wrapper.\n But it doesn't think to use the same level as the wrapper or the same level with col-1 or col2\n */\n\n // The purpose of these lines if some elements are the same level with the wrapper on thank you page is to prevent lost elements\n const allContent = Array.from(currentContent.children);\n preWrapperContent = Array.from(allContent.slice(0, allContent.findIndex(c => c === currentContentWrapper)));\n\n // The purpose of these lines if some elements are before col1 and inside the wrapper on thank you page is to prevent lost elements\n const tyImage = currentContent.querySelector('.col-1');\n if (tyImage) {\n const wrapperContent = Array.from(currentContentWrapper.children);\n preCol1Content = Array.from(wrapperContent.slice(0, wrapperContent.findIndex(c => c === tyImage)));\n }\n\n currentContent.querySelector('.wrapper').remove();\n }\n currentContent.querySelector('.thankYouContentWrapper') && currentContent.querySelector('.thankYouContentWrapper').remove();\n\n if (thankYouPageLayout !== 'none') {\n const thankYouContentWrapper = this._prepareTYContentAccToLayouts(isIconLayout, oldContent, imageSrc, preCol1Content);\n currentContent.innerHTML = '';\n currentContent.appendChild(thankYouContentWrapper);\n\n // it should be rescued the losts\n preWrapperContent.forEach(element => {\n currentContent.insertBefore(element, thankYouContentWrapper);\n });\n } else {\n currentContent.innerHTML = oldContent;\n this._changeVisibilityOfTyIcon('', currentContent);\n this._changeVisibilityOfPDFImporterButtons('', currentContent);\n }\n\n this._editorAddRemovePDFClass(thankYouDownloadPDF, hasSelectedPDFDoc, 'isPDF', 'thankyou-wrapper', currentContent, isNoneLayout);\n this._editorAddRemovePDFClass(thankYouDownloadPDF, thankYouSelectedPDFs, 'isPDF', 'wrapper', currentContent, true);\n\n const staticButtonContent = this._createStaticButtonContent({\n thankYouEditSubmissionText,\n thankYouFillAgainText,\n id,\n thankYouEditSubmission,\n thankYouFillAgain,\n isNewDefaultSchemeV1,\n isPDFImporterNoneLayout,\n thankYouFillAgainSettings,\n thankYouViewCompletedTask,\n thankYouViewCompletedTaskText\n }\n );\n const fillAnotherFormFooter = this._createFillAnotherFormFooterContent(isNewDefaultSchemeV1, thankYouFillAnotherForm, thankYouFillAnotherFormText, thankYouFillAnotherFormSettings);\n const pdfFooter = this._createPDFFooterContent(props.formProperties, hasSelectedPDFDoc, isNewDefaultSchemeV1, isPDFImporter, isNoneLayout, isAdmin);\n\n const visitURLFooter = this._createVisitURLFooterContent(isNewDefaultSchemeV1, thankYouVisitURL, thankYouVisitURLText, thankYouVisitURLPageURL, thankYouVisitURLImageSource);\n\n const tyWrapper = currentContent.querySelector('.thankyou-wrapper');\n const importedPdfEnableThankYouButtonsContent = this._createImportedPdfEnableThankYouButtonsContent(props.formProperties);\n if (thankYouPageLayout !== 'none') {\n currentContent.querySelector('.col-2').appendChild(staticButtonContent);\n\n if (importedPdfEnableThankYouButtons === 'Yes') {\n currentContent.appendChild(importedPdfEnableThankYouButtonsContent);\n }\n } else if (isNoneLayout && tyWrapper) {\n tyWrapper.appendChild(staticButtonContent);\n } else {\n currentContent.appendChild(staticButtonContent);\n }\n currentContent.appendChild(fillAnotherFormFooter);\n currentContent.appendChild(pdfFooter);\n currentContent.appendChild(visitURLFooter);\n\n props.actions.updateFormProperty({ thanktext: currentContent.innerHTML });\n\n this._getIncjectCSSCodeToTYPage(activeEditor, props.formProperties.injectCSS);\n }\n\n _getIncjectCSSCodeToTYPage(editor, injectCSS) {\n const formStyles = document.createElement('style');\n formStyles.setAttribute('type', 'text/css');\n formStyles.setAttribute('id', 'form-styles');\n\n let customCSS = injectCSS;\n const cssSeparator = '/*__INSPECT_SEPERATOR__*/';\n\n if (injectCSS.indexOf(cssSeparator) !== -1) {\n [, customCSS] = injectCSS.split(cssSeparator);\n }\n\n formStyles.innerHTML = customCSS;\n\n editor.getDoc().querySelector('head').append(formStyles);\n }\n\n _prepareTYContentAccToLayouts(isIconLayout, oldContent, imageSrc, preCol1Content) {\n const thankYouContentWrapper = document.createElement('div');\n thankYouContentWrapper.setAttribute('contentEditable', 'false');\n thankYouContentWrapper.className = 'wrapper';\n const thankYouBgImageWrapper = document.createElement('div');\n thankYouBgImageWrapper.className = 'col-1';\n thankYouBgImageWrapper.setAttribute('contentEditable', 'false');\n if (isIconLayout) {\n const thankYouBgImage = document.createElement('img');\n thankYouBgImage.classList.add('tyBgImage');\n if (imageSrc) {\n thankYouBgImage.src = imageSrc;\n thankYouBgImage.alt = 'thank you icon';\n }\n thankYouBgImageWrapper.setAttribute('aria-label', 'thank you background image');\n thankYouBgImageWrapper.setAttribute('role', 'img');\n thankYouBgImageWrapper.appendChild(thankYouBgImage);\n }\n const thankYouContent = document.createElement('div');\n thankYouContent.setAttribute('contentEditable', 'true');\n thankYouContent.className = 'col-2';\n thankYouContent.innerHTML = oldContent;\n this._changeVisibilityOfTyIcon('none', thankYouContent);\n this._changeVisibilityOfPDFImporterButtons('none', thankYouContent);\n\n // it should be rescued the losts\n preCol1Content.forEach(element => {\n thankYouContentWrapper.appendChild(element);\n });\n thankYouContentWrapper.appendChild(thankYouBgImageWrapper);\n thankYouContentWrapper.appendChild(thankYouContent);\n return thankYouContentWrapper;\n }\n\n _yesToBool(text) {\n return text && text.toLowerCase() === 'yes';\n }\n\n _handleUploadSuccess(data, type) {\n const { url } = data;\n this.props.actions.updateFormProperty({ [`thankYou${type}Src`]: url });\n }\n\n _handleRemove(type) {\n this.props.actions.updateFormProperty({ [`thankYou${type}Src`]: '' });\n }\n\n renderThankYouImageUploadModal() {\n const layouts = this.props.getLayouts(this.props.formProperties.thankYouImageSrc);\n const { thankYouPageLayout = 'none', [`thankYou${layouts[thankYouPageLayout].imageType}Src`]: imageSrc = 'https://cdn.jotfor.ms/img/Thankyou-iconV2.png' } = this.props.formProperties;\n const galleryMode = layouts[thankYouPageLayout].imageType;\n const galleryImages = this.props.getGalleryImages(galleryMode);\n const imageInGallery = galleryImages?.find(image => image.urlThumb === imageSrc) != null;\n const thankYouIconAlt = imageInGallery ? galleryImages?.find(image => image.urlThumb === imageSrc).alt : 'your uploaded galery icon';\n\n return (\n Something went wrong when loading text editor. Please try again.
;\n }\n const self = this;\n const {\n containerClass, containerStyle, formProperties, translationEditor, config, questions, addFormFields, fromThankYou\n } = this.props;\n const extraButtons = addFormFields && (global.location.href.indexOf('thankyou') > -1 || global.location.href.indexOf('workflow') > -1) ? this._createNdtToolBarItems(this.props) : [];\n const extraSetupFunctions = (global.location.href.indexOf('thankyou') > -1 || (global.location.href.indexOf('workflow') > -1 && fromThankYou)) ? [{\n id: 'init',\n callback: e => {\n self._prepareEditorContent(e.target, self.props);\n }\n }] : [];\n\n return (\n \n {formProperties && !translationEditor ? this.renderThankYouImageUploadModal() : null}\n
\n );\n }\n}\n","import PropTypes from 'prop-types';\nimport React from 'react';\nimport scriptjs from 'scriptjs';\n\nimport TinyMCE from './TinyMCEEditor';\nimport { translate } from '../mixins/Translation';\nimport { RICH_TEXT_EDITOR_URL } from '../constants';\n\nconst { object, bool } = PropTypes;\n\nexport default class RichTextEditor extends React.Component {\n static propTypes = {\n config: object, // tinyMCE config object\n formProperties: object,\n isPDFImporter: bool,\n user: object,\n fromThankYou: bool\n };\n\n static defaultProps = {\n addFormFields: false,\n filterPostData: false,\n fromThankYou: false\n };\n\n constructor(props) {\n super(props);\n\n let tinyMCEAddress = '/js/rich-text-editor/editor.min.js';\n if (window.location.host.indexOf('jotform') > 0) {\n window.tinyMCEPreInit = {\n base: '/js/rich-text-editor/',\n suffix: '',\n query: ''\n };\n tinyMCEAddress = '/js/rich-text-editor/editor.min.js';\n }\n\n scriptjs([tinyMCEAddress], () => {\n this.setState({\n dependenciesLoaded: true\n });\n });\n\n this.state = {\n dependenciesLoaded: false,\n error: null\n };\n\n this.handleScroll = this.handleScroll.bind(this);\n }\n\n componentDidMount() {\n const stage = global.document.getElementById('stage');\n if (stage) {\n stage.addEventListener('scroll', this.handleScroll);\n }\n }\n\n shouldComponentUpdate(nextProps) {\n if (!this.state.dependenciesLoaded) {\n return true;\n }\n // this if statement neessary for thankyou module preview mode\n if (nextProps.config.readonly !== this.props.config.readonly) {\n return true;\n }\n if (!nextProps.formProperties) {\n return false;\n }\n return this.isUpdateNecessary(this.props, nextProps);\n }\n\n componentWillUnmount() {\n const stage = global.document.getElementById('stage');\n if (stage) {\n stage.removeEventListener('scroll', this.handleScroll);\n }\n }\n\n render() {\n if (this.state.error) {\n return Something went wrong when loading text editor. Please try again.
;\n }\n if (!this.state.dependenciesLoaded) {\n return (\n { translate('Loading...') }
\n );\n }\n return (\n \n
\n );\n }\n}\n\nexport default ProcessIndicator;\n","var _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 SvgFormCopilotLogo = props => /*#__PURE__*/React.createElement(\"svg\", _extends({\n xmlns: \"http://www.w3.org/2000/svg\",\n width: 23,\n height: 27,\n fill: \"currentColor\"\n}, props), _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n fillRule: \"evenodd\",\n d: \"M2.927 0A2.927 2.927 0 0 0 0 2.927v21.08a2.927 2.927 0 0 0 2.927 2.928h16.287a2.927 2.927 0 0 0 2.927-2.928V2.927A2.927 2.927 0 0 0 19.214 0zm4.775 10.615a.325.325 0 0 0 0-.61l-.417-.154a2.17 2.17 0 0 1-1.28-1.28l-.154-.417a.325.325 0 0 0-.61 0l-.154.417a2.17 2.17 0 0 1-1.28 1.28l-.417.154a.325.325 0 0 0 0 .61l.416.154c.594.22 1.061.687 1.28 1.28l.155.417a.325.325 0 0 0 .61 0l.154-.416c.22-.594.687-1.061 1.28-1.28zm7.681 5.4a.65.65 0 0 1 0 1.22l-.833.308a4.33 4.33 0 0 0-2.56 2.56l-.309.833a.65.65 0 0 1-1.22 0l-.308-.833a4.33 4.33 0 0 0-2.56-2.56l-.834-.309a.65.65 0 0 1 0-1.22l.833-.307a4.33 4.33 0 0 0 2.561-2.561l.308-.833a.65.65 0 0 1 1.22 0l.308.833a4.33 4.33 0 0 0 2.561 2.56zm.832-10.158a.433.433 0 0 0-.813 0l-.206.555a2.89 2.89 0 0 1-1.707 1.707l-.556.206a.433.433 0 0 0 0 .813l.556.205a2.89 2.89 0 0 1 1.707 1.707l.206.556c.14.377.673.377.813 0l.205-.556a2.89 2.89 0 0 1 1.707-1.707l.556-.205a.433.433 0 0 0 0-.813l-.556-.206a2.89 2.89 0 0 1-1.707-1.707z\",\n clipRule: \"evenodd\"\n})));\nexport default SvgFormCopilotLogo;","\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Publish as PublishWizard } from '@jotforminc/builder-components';\nimport { withRouter } from 'react-router-dom';\nimport { t } from '@jotforminc/translation';\n\nimport { IconDocumentPdfFilled, IconLinkDiagonal, IconLayersFilled } from '@jotforminc/svg-icons';\nimport { createRoot } from 'react-dom/client';\nimport SettingsLeftPanel from '../Settings/SettingsLeftPanel';\nimport { downloadFillablePDF } from '../../utils';\nimport SignupModal from '../Dialogs/SignupModal';\n\nclass Publish extends React.Component {\n constructor() {\n super();\n this.shareProperties = {};\n }\n\n static propTypes = {\n formProperties: PropTypes.shape().isRequired,\n user: PropTypes.shape().isRequired,\n // actions: PropTypes.shape({\n // updateFormProperties: PropTypes.func\n // }).isRequired,\n match: PropTypes.shape().isRequired\n };\n\n WizardListCopy = ['PDF Form', 'Quick Share', 'Platforms'];\n\n WizardList = ['pdf', 'link', 'platforms'];\n\n WizardListHints = ['Download Fillable PDF', 'Direct form link and social share', 'Third-party publish options'];\n\n WizardListIcons = [{\n icon: IconDocumentPdfFilled\n }, {\n icon: IconLinkDiagonal\n }, {\n icon: IconLayersFilled\n }];\n\n displaySignupPrompt = () => {\n const { user, dispatch } = this.props;\n const portal = document.getElementById('portal-root');\n const root = createRoot(portal);\n root.render(\n
\n \n { this.props.messageLine1 }\n
\n { this.props.messageLine2 }\n
\n \n { this.props.messageLine2 }\n
\n
\n );\n }\n}\n\nexport default withRouter(Publish);\n","\n","\n","\n","\n","\n","\n","\n","\n","var _circle, _circle2, _circle3;\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 SvgStepWizardInProgress = props => /*#__PURE__*/React.createElement(\"svg\", _extends({\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n viewBox: \"0 0 21 21\"\n}, props), _circle || (_circle = /*#__PURE__*/React.createElement(\"circle\", {\n cx: 10,\n cy: 10,\n r: 8.5,\n fill: \"#2E69FF\"\n})), _circle2 || (_circle2 = /*#__PURE__*/React.createElement(\"circle\", {\n cx: 10,\n cy: 10,\n r: 8.5,\n stroke: \"white\",\n strokeWidth: 3\n})), _circle3 || (_circle3 = /*#__PURE__*/React.createElement(\"circle\", {\n cx: 10,\n cy: 10,\n r: 8.5,\n stroke: \"#D4DAE5\",\n strokeWidth: 3\n})));\nexport default SvgStepWizardInProgress;","var _circle, _circle2, _circle3, _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 SvgStepWizardDone = props => /*#__PURE__*/React.createElement(\"svg\", _extends({\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n viewBox: \"0 0 21 21\"\n}, props), _circle || (_circle = /*#__PURE__*/React.createElement(\"circle\", {\n cx: 10,\n cy: 10,\n r: 8.5,\n fill: \"#01BD6F\"\n})), _circle2 || (_circle2 = /*#__PURE__*/React.createElement(\"circle\", {\n cx: 10,\n cy: 10,\n r: 8.5,\n stroke: \"#F8FBFF\",\n strokeWidth: 3\n})), _circle3 || (_circle3 = /*#__PURE__*/React.createElement(\"circle\", {\n cx: 10,\n cy: 10,\n r: 8.5,\n stroke: \"#D4DAE5\",\n strokeWidth: 3\n})), _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M13 8L9 12L7 10\",\n stroke: \"white\",\n strokeWidth: 2,\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n})));\nexport default SvgStepWizardDone;","\n","\n","\n","\n","\n","\n","\n","var _path, _path2;\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 SvgFillAnotherIcon = props => /*#__PURE__*/React.createElement(\"svg\", _extends({\n viewBox: \"0 0 24 24\",\n xmlns: \"http://www.w3.org/2000/svg\"\n}, props), _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n d: \"M16.2475 2.00001H8.65246c-.11651-.00049-.23329.02049-.34402.06327-.08278.03198-.16217.07614-.23554.13262a.9612931.9612931 0 0 0-.06214.05215L2.32113 7.40669c-.01828.01628-.03594.03325-.05293.05088-.166.1723-.2682.40732-.2682.66639V18.2668c0 1.5854 1.27576 2.8706 2.84949 2.8706h2.8495c.52458 0 .94983-.4284.94983-.9569s-.42525-.9569-.94983-.9569h-2.8495c-.52457 0-.94983-.4284-.94983-.9568V9.08083h4.74916c.52458 0 .94983-.4284.94983-.95687V3.91374h6.64885c.5245 0 .9498.42841.9498.95687v3.82747c0 .52847.4253.95687.9498.95687.5246 0 .9499-.4284.9499-.95687V4.87061c0-1.58539-1.2758-2.8706-2.8495-2.8706ZM7.69899 7.16709H5.42508L7.69899 5.1054v2.06169ZM5.79933 12.5256c0-.5285.42525-.9569.94983-.9569h4.74914c.5246 0 .9498.4284.9498.9569 0 .5284-.4252.9568-.9498.9568H6.74916c-.52458 0-.94983-.4284-.94983-.9568Zm.94983 2.8706c-.52458 0-.94983.4284-.94983.9568 0 .5285.42525.9569.94983.9569h1.89966c.52458 0 .94983-.4284.94983-.9569 0-.5284-.42525-.9568-.94983-.9568H6.74916Z\"\n})), _path2 || (_path2 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M21.3509 10.5416c-.8655-.87192-2.2687-.87192-3.1342 0l-7.1682 7.2213c-.3272.3296-.5591.7418-.671 1.1926l-.3618 1.4581c-.23189.9344.6083 1.7807 1.5358 1.5471l1.4376-.362c.4538-.1143.8678-.3502 1.1974-.6823l7.1644-7.2174c.8655-.8719.8655-2.2855 0-3.1574Z\"\n})));\nexport default SvgFillAnotherIcon;","var _path, _path2;\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 SvgViewAllSubmissions = props => /*#__PURE__*/React.createElement(\"svg\", _extends({\n xmlns: \"http://www.w3.org/2000/svg\",\n viewBox: \"0 0 24 24\"\n}, props), _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n d: \"M3.26133 0C2.01243 0 1 1.01243 1 2.26133V16.9387C1 18.1876 2.01243 19.2 3.26133 19.2H14.7387C15.9876 19.2 17 18.1876 17 16.9387V2.26133C17 1.01243 15.9876 0 14.7387 0H3.26133ZM5.13192 5.40941C4.54929 5.40941 4.07698 5.8636 4.07698 6.42388C4.07698 6.98416 4.54929 7.43836 5.13192 7.43836H12.8682C13.4508 7.43836 13.9231 6.98416 13.9231 6.42388C13.9231 5.8636 13.4508 5.40941 12.8682 5.40941H5.13192ZM5.13199 8.7906C4.54936 8.7906 4.07705 9.24479 4.07705 9.80507C4.07705 10.3654 4.54936 10.8195 5.13199 10.8195H12.8683C13.4509 10.8195 13.9232 10.3654 13.9232 9.80507C13.9232 9.24479 13.4509 8.7906 12.8683 8.7906H5.13199ZM4.07705 13.1863C4.07705 12.6261 4.54936 12.1719 5.13199 12.1719H12.8683C13.4509 12.1719 13.9232 12.6261 13.9232 13.1863C13.9232 13.7466 13.4509 14.2008 12.8683 14.2008H5.13199C4.54936 14.2008 4.07705 13.7466 4.07705 13.1863Z\"\n})), _path2 || (_path2 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M16.0973 20.8001C17.4243 20.8001 18.5 19.7244 18.5 18.3974V3.6001H19.5973C20.9243 3.6001 22 4.67581 22 6.00276V21.5974C22 22.9244 20.9243 24.0001 19.5973 24.0001H7.40267C6.07571 24.0001 5 22.9244 5 21.5974V20.8001H16.0973Z\"\n})));\nexport default SvgViewAllSubmissions;","var _path, _path2;\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 SvgIconWhatsappCircle = props => /*#__PURE__*/React.createElement(\"svg\", _extends({\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n viewBox: \"0 0 20 20\"\n}, props), _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M0 20L1.40648 14.8645C0.53877 13.3615 0.0824614 11.6563 0.0830088 9.90991C0.0852842 4.44559 4.53247 0 9.99666 0C12.6487 0.00119757 15.1378 1.0333 17.0093 2.90652C18.8811 4.77973 19.9114 7.26964 19.9103 9.91766C19.908 15.3821 15.4606 19.8281 9.99706 19.8281C9.99666 19.8281 9.99733 19.8281 9.99706 19.8281H9.99264C8.33354 19.8276 6.70332 19.4111 5.25542 18.622L0 20Z\",\n fill: \"white\"\n})), _path2 || (_path2 = /*#__PURE__*/React.createElement(\"path\", {\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n d: \"M7.43177 5.61502C7.23957 5.18771 7.03722 5.17915 6.85437 5.17168C6.70481 5.16526 6.53359 5.16565 6.36264 5.16565C6.19156 5.16565 5.91355 5.22995 5.67845 5.48671C5.44322 5.74347 4.78027 6.36417 4.78027 7.62656C4.78027 8.88909 5.69984 10.109 5.82801 10.2803C5.95632 10.4514 7.60312 13.1248 10.2112 14.1533C12.3787 15.0081 12.8198 14.8381 13.2903 14.7953C13.7607 14.7525 14.8083 14.1747 15.0222 13.5755C15.236 12.9765 15.236 12.463 15.1719 12.3556C15.1077 12.2487 14.9366 12.1845 14.68 12.0562C14.4234 11.9279 13.1619 11.3071 12.9267 11.2215C12.6915 11.136 12.5204 11.0932 12.3493 11.3501C12.1782 11.6067 11.6868 12.1845 11.5371 12.3556C11.3874 12.5271 11.2377 12.5485 10.981 12.4202C10.7244 12.2915 9.89801 12.0208 8.91764 11.1467C8.15486 10.4666 7.63987 9.62671 7.49017 9.36983C7.34048 9.11321 7.47413 8.97421 7.60285 8.84629C7.71805 8.73134 7.85947 8.54676 7.98778 8.39693C8.11582 8.24709 8.15859 8.14017 8.24413 7.96908C8.32967 7.79773 8.2869 7.64791 8.22274 7.5196C8.15859 7.39129 7.65992 6.12238 7.43177 5.61502Z\",\n fill: \"#5CD467\"\n})));\nexport default SvgIconWhatsappCircle;","\n","\n","\n","\n","var _path, _path2;\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 SvgSetPrefillIcon = props => /*#__PURE__*/React.createElement(\"svg\", _extends({\n viewBox: \"0 0 24 24\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\"\n}, props), _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n d: \"M6.90674 19.8607C7.07609 19.8925 7.2508 19.9092 7.4294 19.9092H15.4516C17.0035 19.9092 18.2615 18.6512 18.2615 17.0993V5.92896C18.2615 5.75034 18.2448 5.57562 18.213 5.40625C19.5151 5.65119 20.5002 6.79436 20.5002 8.16761V19.338C20.5002 20.8898 19.2422 22.1479 17.6903 22.1479H9.66809C8.29486 22.1479 7.1517 21.1628 6.90674 19.8607Z\",\n fill: \"white\"\n})), _path2 || (_path2 = /*#__PURE__*/React.createElement(\"path\", {\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n d: \"M6.30988 2C4.75803 2 3.5 3.25803 3.5 4.80988V15.9802C3.5 17.5321 4.75803 18.7901 6.30988 18.7901H14.3321C15.8839 18.7901 17.142 17.5321 17.142 15.9802V4.80988C17.142 3.25803 15.8839 2 14.3321 2H6.30988ZM6.57819 6.25354C5.99091 6.25354 5.51482 6.72963 5.51482 7.31691C5.51482 7.9042 5.99091 8.38029 6.57819 8.38029H13.8539C14.4412 8.38029 14.9173 7.9042 14.9173 7.31691C14.9173 6.72963 14.4412 6.25354 13.8539 6.25354H6.57819ZM9.37654 9.05188H13.8539C14.4412 9.05188 14.9173 9.52797 14.9173 10.1153C14.9173 10.7025 14.4412 11.1786 13.8539 11.1786H9.37726H9.37654H6.57819C5.99091 11.1786 5.51482 10.7025 5.51482 10.1153C5.51482 9.52797 5.99091 9.05188 6.57819 9.05188H9.37654ZM10.2437 10.7309H13.8539C14.1939 10.7309 14.4695 10.4553 14.4695 10.1153C14.4695 9.77525 14.1939 9.49962 13.8539 9.49962H10.2437C10.3673 9.67335 10.4399 9.88582 10.4399 10.1153C10.4399 10.3447 10.3673 10.5572 10.2437 10.7309ZM5.96255 12.9136C5.96255 12.5736 6.23818 12.298 6.57819 12.298H13.8539C14.1939 12.298 14.4695 12.5736 14.4695 12.9136C14.4695 13.2536 14.1939 13.5292 13.8539 13.5292H6.57819C6.23818 13.5292 5.96255 13.2536 5.96255 12.9136ZM6.57819 11.8502C5.99091 11.8502 5.51482 12.3263 5.51482 12.9136C5.51482 13.5009 5.99091 13.977 6.57819 13.977H13.8539C14.4412 13.977 14.9173 13.5009 14.9173 12.9136C14.9173 12.3263 14.4412 11.8502 13.8539 11.8502H6.57819Z\",\n fill: \"white\"\n})));\nexport default SvgSetPrefillIcon;","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { Emails as EmailsWizard } from '@jotforminc/builder-components';\nimport { isEnterprise } from '@jotforminc/enterprise-utils';\n\nexport default class Emails extends React.Component {\n static propTypes = {\n formProperties: PropTypes.shape().isRequired,\n user: PropTypes.shape().isRequired,\n questions: PropTypes.arrayOf(PropTypes.shape).isRequired,\n actions: PropTypes.shape({\n updateFormProperties: PropTypes.func\n }).isRequired\n };\n\n constructor(props) {\n super(props);\n this.changes = {};\n }\n\n handleChange = change => {\n this.changes = { ...this.changes, ...change };\n };\n\n handleSave = keys => {\n const properties = Object.keys(this.changes).reduce((pre, curr) => {\n if (keys.indexOf(curr) > -1) {\n return { ...pre, [curr]: this.changes[curr] };\n }\n return pre;\n }, {});\n\n this.props.actions.updateFormProperties(properties);\n };\n\n handleAutoResponderSettings = val => {\n console.warn('\"handleAutoResponderSettings\" action is not implemented!', val);\n };\n\n goBack = () => {\n console.warn('\"goBack\" action is not implemented!');\n };\n\n showSignUp = () => {\n console.warn('\"showSignUp\" action is not implemented!');\n };\n\n render() {\n const {\n formProperties, user, questions\n } = this.props;\n\n return (\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n );\n }\n}\n","\n","\n","\n","\n","import PropTypes from 'prop-types';\nimport React from 'react';\nimport classNames from 'classnames';\n\nexport class Tabs extends React.Component {\n static propTypes = {\n children: PropTypes.node,\n onChange: PropTypes.func.isRequired,\n activeKey: PropTypes.oneOfType([\n PropTypes.number,\n PropTypes.string\n ]),\n kind: PropTypes.string\n };\n\n static defaultProps = {\n kind: 'navigation'\n };\n\n constructor(props) {\n super(props);\n this.state = {\n activeKey: this.props.activeKey\n };\n }\n\n render() {\n const { activeChild, injectedChildren } = this.injectChildrenProps();\n const { kind } = this.props;\n const uppercx = classNames({\n tabMenu: kind === 'navigation',\n 'tabMenu-inner': kind === 'inner'\n });\n const props = { ...this.props };\n delete props.activeKey; // there isn't a parameter named activeKey for pure html div. react-15 warning fix.\n return (\n \n
\n );\n }\n\n handleActiveTabChange(key) {\n this.setState({\n activeKey: key\n });\n this.props.onChange(key);\n }\n\n injectChildrenProps() {\n const childrenProps = {\n classNames: 'tabMenu-link',\n onClick: key => { this.handleActiveTabChange(key); }\n };\n\n let activeChild = null;\n\n const { kind } = this.props;\n\n const injectedChildren = this.props.children.map((child, idx) => {\n if (!child) { return child; }\n Object.assign(childrenProps, { key: `tab_${idx}`, ref: `ref_${idx}` });\n\n if (child.props.eventKey === this.state.activeKey) {\n activeChild = child;\n }\n const cx = classNames({\n 'tabMenu-link': kind === 'navigation',\n 'tabMenu-inner-link': kind === 'inner',\n 'is-active': child.props.eventKey === this.state.activeKey\n });\n childrenProps.classNames = cx;\n return React.cloneElement(\n child,\n childrenProps\n );\n });\n\n this.activeChild = activeChild;\n\n return {\n activeChild,\n injectedChildren\n };\n }\n}\n\nexport default Tabs;\n","import PropTypes from 'prop-types';\nimport React from 'react';\n\nexport class Tab extends React.Component {\n static propTypes = {\n onClick: PropTypes.func,\n eventKey: PropTypes.oneOfType([\n PropTypes.number,\n PropTypes.string\n ]),\n children: PropTypes.node,\n active: PropTypes.bool,\n classNames: PropTypes.string,\n title: PropTypes.string\n };\n\n constructor(props) {\n super(props);\n\n this.state = {\n active: this.props.active || false\n };\n }\n\n render() {\n return (\n \n {injectedChildren}\n
\n \n { activeChild && activeChild.props.children }\n
\n \n
\n \n {t(usedFor === 'formSettings'\n ? `This form is connected to an ${isWorkflowReleased ? 'workflow' : 'approval flow'}`\n : `Some of your forms are connected to ${isWorkflowReleased ? 'workflows' : 'approval flows'}`)}\n
\n \n {t(`Enabling the auto-delete submissions feature may prevent your ${isWorkflowReleased ? 'workflow' : 'approval flow'}${usedFor === 'myaccount' ? 's' : ''} from working properly.`)}\n
\n \n );\n};\n\nconst AutoDeleteApprovalFlowFooter = ({ onClose, onNext }) => {\n return (\n \n \n {t('Cancel')}\n \n \n {t('Got it!')}\n \n
\n );\n};\n\nAutoDeleteApprovalFlowContent.propTypes = contentPropTypes;\nAutoDeleteApprovalFlowContent.defaultProps = contentDefaultProps;\nAutoDeleteApprovalFlowFooter.propTypes = footerPropTypes;\nAutoDeleteApprovalFlowFooter.defaultProps = footerDefaultProps;\n\nexport default {\n Content: AutoDeleteApprovalFlowContent,\n Footer: AutoDeleteApprovalFlowFooter,\n key: 'AutoDeleteApprovalFlow'\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport {\n FormPropertiesEditor,\n FormWarnings,\n LanguageEditor,\n LanguagePanels\n} from '@jotforminc/builder-components';\nimport { QUESTION_PROPS } from '@jotforminc/question-props';\nimport cloneDeep from 'lodash/cloneDeep';\nimport DefaultTips from '../../../../constants/DefaultTips';\n\nconst Tips = {\n injectCSS: `Add your own CSS code to your form. You can change every aspect of the form by using CSS codes.\n Learn more.`,\n expireDate: 'Disable form on a date.',\n title: 'A short descriptive name for this form.',\n pagetitle: 'Used in the HTML <title> when shared as a standalone page.',\n status: 'Disable your form now, on a specific date, or when it reaches a submission limit.'\n};\n\nconst modifiedTips = Object.assign(Object.keys(DefaultTips).reduce((acc, tipKey) => {\n return Object.assign(acc, { [tipKey]: DefaultTips[tipKey].tip });\n}, {}), Tips);\n\nexport default class FormSettings extends React.Component {\n static propTypes = {\n formProperties: PropTypes.shape().isRequired,\n user: PropTypes.shape().isRequired,\n questions: PropTypes.arrayOf(PropTypes.shape).isRequired,\n ui: PropTypes.shape(),\n actions: PropTypes.shape({\n updateFormProperties: PropTypes.func\n }).isRequired\n };\n\n static defaultProps = {\n ui: {\n device: 'isDesktop',\n hasDirtyWizard: false,\n builderType: 'card' /* TODO Maybe we should add 'fillablePDF'? */\n }\n };\n\n constructor(props) {\n super(props);\n\n this.state = {\n wizard: 'properties' // , isShowEncryptModal: false\n };\n }\n\n setDirty = flag => {\n console.warn('\"setDirty\" action is not implemented!', { flag });\n };\n\n handleQuestionSaveApi = (question, changes) => {\n // TODO call saveFormQuestion action!\n console.log('handleQuestionSaveApi', question, changes);\n };\n\n handleQuestionUpdate = (question, changes) => {\n // TODO call updateFormProperty action!\n this.handleQuestionSaveApi(question, changes);\n };\n\n handleWizardSwitch = (wizard, properties = {}) => {\n // TODO @Mert we may need a mechanism to scrolllToTop.\n this.setState({\n wizard,\n nextWizardProps: properties\n });\n };\n\n translationUpdate = () => {\n console.warn('\"translationUpdate\" action is not implemented!');\n };\n\n translationSuccess = () => {\n console.log('\"translationSuccess\" action is not implemented!');\n };\n\n goBack = () => {\n console.warn('\"goBack\" action is not implemented!');\n };\n\n renderWizard = () => {\n const { wizard } = this.state;\n const { updateFormProperties } = this.props.actions;\n\n switch (wizard) {\n case 'language-panel':\n return (\n \n
\n );\n }\n}\n","export const isTouchDevice = 'ontouchstart' in window || window?.navigator?.maxTouchPoints > 0;\n","\n","\n","\n","\n","\n","import PropTypes from 'prop-types';\nimport React from 'react';\n\nexport default class DynamicImage extends React.Component {\n static propTypes = {\n src: PropTypes.string,\n style: PropTypes.object\n };\n\n constructor(props) {\n super(props);\n this.state = {\n loaded: 'loading'\n };\n }\n\n componentDidMount() {\n }\n\n render() {\n return (\n \n {this.renderWizard()}\n
\n \n }img/builder/publish/perfect.png`})
\n
\n );\n }\n\n renderErrorNotification() {\n return (\n \n { this.props.title }
\n{ this.props.message }
\n { this.props.children }\n\n }img/not_found_icon@2x.png`})
\n
\n );\n }\n\n renderOneMoreStepNotification() {\n return (\n \n { this.props.title }
\n{ this.props.message }
\n { this.props.children }\n\n }img/builder/integrations/one-more-step-podo.png`})
\n
\n );\n }\n}\n\nexport default Notification;\n","\n","\n","var _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 SvgFeedbackIcon = props => /*#__PURE__*/React.createElement(\"svg\", _extends({\n xmlns: \"http://www.w3.org/2000/svg\",\n viewBox: \"0 0 18.33 17.41\"\n}, props), _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n fill: \"#fff\",\n fillRule: \"evenodd\",\n d: \"M0 2.5A2.5 2.5 0 0 1 2.5 0h13.33a2.5 2.5 0 0 1 2.5 2.5v3.75c0 .46-.37.83-.83.83s-.83-.37-.83-.83V2.5c0-.46-.37-.83-.83-.83H2.5c-.46 0-.83.37-.83.83v9.17c0 .46.37.83.83.83h5c.46 0 .83.37.83.83s-.37.83-.83.83h-5a2.5 2.5 0 0 1-2.5-2.5zm8.71 11.31-.32 1.25c-.35 1.38.9 2.63 2.28 2.28l1.25-.32c.44-.11.83-.34 1.15-.65l4.56-4.56c.81-.81.81-2.13 0-2.95l-.76-.76c-.81-.81-2.13-.81-2.95 0l-4.55 4.55c-.32.32-.54.71-.65 1.15Zm1.39 1.29.23-.88c.04-.14.11-.28.22-.38l3.03-3.03 1.35 1.35-3.03 3.03c-.11.11-.24.18-.38.22l-.88.23-.37.09a.206.206 0 0 1-.25-.15v-.1l.1-.37Zm6.01-4.13.34-.34c.16-.16.16-.43 0-.59l-.76-.76a.423.423 0 0 0-.59 0l-.34.34zM5.42 8.32a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5m5-1.25a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0m2.14 1.2 1.56-1.56a1.25 1.25 0 1 0-1.56 1.56\"\n})));\nexport default SvgFeedbackIcon;","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { Integrations as IntegrationsWizard } from '@jotforminc/builder-components';\n\nimport { getIntegrationConfig } from '../../../../api';\n\nconst builderOptions = { initialWizard: undefined };\n\nexport default class FormSettings extends React.Component {\n static propTypes = {\n formProperties: PropTypes.shape().isRequired,\n user: PropTypes.shape().isRequired,\n questions: PropTypes.arrayOf(PropTypes.shape).isRequired,\n actions: PropTypes.shape({\n preUpdateFormProperties: PropTypes.func\n }).isRequired,\n pdfList: PropTypes.arrayOf(PropTypes.shape).isRequired\n };\n\n // eslint-disable-next-line\n UNSAFE_componentWillMount() {\n this.setConfigs();\n }\n\n setConfigs = async () => {\n if (!window.GOOGLE_PICKER_KEY && !window.GOOGLE_SHEETS_APP_ID) {\n const integrationConfig = await getIntegrationConfig();\n if (integrationConfig) {\n const { GOOGLE_PICKER_KEY, GOOGLE_SHEETS_APP_ID } = integrationConfig;\n if (GOOGLE_PICKER_KEY) {\n window.GOOGLE_PICKER_KEY = GOOGLE_PICKER_KEY;\n }\n if (GOOGLE_SHEETS_APP_ID) {\n window.GOOGLE_SHEETS_APP_ID = GOOGLE_SHEETS_APP_ID;\n }\n }\n }\n };\n\n render() {\n const {\n actions: {\n preUpdateFormProperties,\n showSidePanels,\n preUpdateUserSettings\n },\n history,\n formProperties,\n user,\n questions,\n team,\n pdfList\n } = this.props;\n\n const actions = {\n goBackToSettings: () => {},\n updateFormProperty: props => { preUpdateFormProperties(props); },\n updateUserSettings: data => { preUpdateUserSettings(data); },\n leftPanelToggle: () => { showSidePanels('left'); },\n goBack: () => { history.push(`/${formProperties.id}`); },\n goBackToIntegrations: () => { history.push(`/${formProperties.id}/settings/integrations`); }\n };\n\n return (\n \n { this.props.title }
\n \n { this.props.children }\n\n
\n );\n }\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withRouter, Switch, Route } from 'react-router-dom';\n\nimport { IconEnvelopeClosedFilled, IconGearFilled, IconPuzzlePieceFilled } from '@jotforminc/svg-icons';\nimport { Emails } from './Wizards/Emails';\nimport { FormSettings } from './Wizards/FormSettings';\nimport { Integrations } from './Wizards/Integrations';\nimport SettingsLeftPanel from './SettingsLeftPanel';\n\nclass Settings extends React.Component {\n static propTypes = {\n match: PropTypes.shape({}).isRequired\n };\n\n getPathForDefaultView(view) {\n return this.WizardDefaultView === view ? '' : view;\n }\n\n WizardList = ['formSettings', 'emails', 'integrations'];\n\n WizardListCopy = ['Form Settings', 'Emails', 'Integrations'];\n\n WizardListHints = ['Form status and properties.', 'Send emails after submissions.', 'Connect your form to other apps.'];\n\n WizardListIcons = [{\n icon: IconGearFilled\n\n }, {\n icon: IconEnvelopeClosedFilled\n\n }, {\n icon: IconPuzzlePieceFilled\n\n }];\n\n WizardDefaultView = 'formSettings';\n\n render() {\n const { match } = this.props;\n\n // We needed a way to default main settings view to email without modifying the url.\n // This is the result of it. Please don't shoot me down. <3\n const rawURL = new URL(window.location.href);\n const { pathname } = rawURL;\n const currentView = pathname.split('/').pop();\n const currentTabName = currentView === 'settings' ? this.WizardDefaultView : currentView;\n\n return (\n \n
\n );\n }\n}\n\nexport default withRouter(Settings);\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\n\nclass FillableStyleGenerator extends React.Component {\n static propTypes = {\n doc: PropTypes.shape({\n answerAlignment: PropTypes.string,\n answerFontFamily: PropTypes.string,\n answerFontSize: PropTypes.string,\n answerFontStyle: PropTypes.string,\n answerFontWeight: PropTypes.string,\n answerTextColor: PropTypes.string,\n answerTextDecoration: PropTypes.string,\n labelAlignment: PropTypes.string,\n labelFontFamily: PropTypes.string,\n labelFontSize: PropTypes.string,\n labelFontStyle: PropTypes.string,\n labelFontWeight: PropTypes.string,\n labelTextColor: PropTypes.string,\n labelTextDecoration: PropTypes.string\n }).isRequired\n };\n\n render() {\n // append css here\n const {\n answerAlignment,\n answerFontFamily,\n answerFontSize,\n answerFontStyle,\n answerFontWeight,\n answerTextColor,\n answerTextDecoration,\n labelAlignment,\n labelFontFamily,\n labelFontSize,\n labelFontStyle,\n labelFontWeight,\n labelTextColor,\n labelTextDecoration\n } = this.props.doc;\n\n const styles = `\n .questionWrapper > div {\n font-family: ${labelFontFamily};\n font-size: ${labelFontSize};\n font-weight: ${labelFontWeight};\n font-style: ${labelFontStyle};\n text-decoration: ${labelTextDecoration};\n color: ${labelTextColor};\n text-align: ${labelAlignment};\n }\n\n .questionWrapper .question {\n font-family: ${answerFontFamily};\n font-size: ${answerFontSize};\n font-weight: ${answerFontWeight};\n font-style: ${answerFontStyle};\n text-decoration: ${answerTextDecoration};\n color: ${answerTextColor};\n text-align: ${answerAlignment};\n }\n `;\n return ReactDOM.createPortal(styles, document.getElementById('fillable-styles'));\n }\n}\n\nconst mapStateToProps = state => ({\n doc: state.document.present\n});\n\nexport default connect(mapStateToProps)(FillableStyleGenerator);\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Cookies from 'js-cookie';\nimport scrollIntoView from 'scroll-into-view';\nimport { t, translationRenderer } from '@jotforminc/translation';\nimport { createRoot } from 'react-dom/client';\nimport store from '../../store';\nimport { updateQuery } from '../../utils';\nimport { showSidePanels, hideSidePanels, changeRightPanelMode } from '../../store/ui';\nimport Checkbox from '../Checkbox';\nimport Modal from '../Modal';\nimport { RIGHT_PANEL_MODES } from '../../constants/RightPanelModes';\n\nexport default class HideIfEmptyWarningModal extends React.Component {\n static propTypes = {\n location: PropTypes.shape({}).isRequired,\n history: PropTypes.shape().isRequired,\n previewMode: PropTypes.bool.isRequired\n };\n\n constructor(props) {\n super(props);\n this.state = {\n isChecked: false\n };\n }\n\n dispatch = store.dispatch;\n\n handleEmptyFieldsAction = () => {\n const { location, history } = this.props;\n const preview = !this.props.previewMode;\n const selected = document.getElementById('Hide-empty-form-fields');\n\n history.push(updateQuery(location, { preview, from: false }));\n this.dispatch(showSidePanels('right'));\n this.dispatch(hideSidePanels('left'));\n this.dispatch(changeRightPanelMode(RIGHT_PANEL_MODES.SETTINGS));\n setTimeout(() => {\n scrollIntoView(selected, { time: 500 });\n\n if (selected && selected.parentNode && selected.parentNode.style) {\n selected.parentNode.style.animation = 'indicate-option 1.2s .6s';\n }\n }, 1000);\n };\n\n handleClose = () => {\n const portal = document.getElementById('portal-root');\n const root = createRoot(portal);\n root.unmount();\n };\n\n handleChange = e => {\n const isToggleOn = e.target.checked;\n this.setState({ isChecked: isToggleOn });\n if (isToggleOn) {\n Cookies.set('hideEmptyFieldsWarning', 'true', { expires: 7 });\n }\n };\n\n render() {\n return (\n \n \n \n
\n \n
\n \n \n {translationRenderer('To change your settings and display them on your document, [1[click here.]]')({\n renderer1: str => ()\n })}\n \n
\n
\n
\n {templateSelected\n ? (\n this.props.setShowFormList(false)}\n >\n \n
\n );\n }\n}\n\nconst mapState = ({\n form\n}) => ({\n currentForm: form\n});\n\nexport default connect(mapState)(withRouter(FormPicker));\n","import React from 'react';\nimport { t } from '@jotforminc/translation';\nimport PropTypes from 'prop-types';\nimport { getAppPath, getBaseURL } from '@jotforminc/router-bridge';\n\nimport { Feature } from '@paralleldrive/react-feature-toggles';\nimport { IconFormXmarkFilled, IconFormTrashFilled } from '@jotforminc/svg-icons';\nimport { sendAnalytics } from '../../utils';\nimport Modal from '../Modal';\nimport Button from '../Button/Button';\nimport FormPicker from '../FormPicker';\nimport PDFEditorFormPicker from '../PDFEditorFormPicker';\nimport { FEATURE_NAMES, isFeatureEnabled } from '../../constants/features';\n\nexport default class FormNotAvailableModal extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n isFormPickerOpen: false\n };\n }\n\n static propTypes = {\n user: PropTypes.shape({}).isRequired,\n isFormExist: PropTypes.bool.isRequired,\n formId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired\n };\n\n handleGotoMyforms = () => {\n window.location = `https://${window.location.host}/myforms`;\n };\n\n toggleFormPickerVisibility = () => {\n this.setState(prevState => ({ isFormPickerOpen: !prevState.isFormPickerOpen }));\n };\n\n handleFormChange = e => {\n const value = isFeatureEnabled(FEATURE_NAMES.NewFormPicker) ? e : e.target.getAttribute('data-value');\n\n if (!value) {\n return;\n }\n\n const oldFormId = this.props.formId;\n sendAnalytics('formChanged', `${value}-${oldFormId}`);\n window.location = `${getBaseURL()}${getAppPath()}/${value}`;\n };\n\n render() {\n const { user, isFormExist } = this.props;\n const { isFormPickerOpen } = this.state;\n\n const contentSet = {\n icon: isFormExist ? \n
\n TEMPLATES\n \n ) : null}\n {this.closeModalMethod\n && (\n ×
\n ESC\n \n )}\n \n
\n \n {templateScreenshot ? 
: null }\n
\n {t(this.props.title)}
\n {t(subtitle)}
\n \n 0 ? '' : ' isHidden'}`}\n onClick={this.handleClearSearchText}\n >\n ×\n \n
\n \n {templateID\n ? (\n this.createForm(templateID)}\n data-value={templateID}\n >\n \n
\n \n
\n \n ) : null}\n {forms.length > 0\n ? forms.map(form => (\n {t('Create a New Form')}
\n \n
\n \n
\n \n ))\n : (\n {form.title}
\n \n {t('Created by')}\n {' '}\n {username === form.username ? t('you') : form.username}\n ,\n {' '}\n {t('Last edit')}\n {' '}\n {form.updated_at ? form.updated_at.split(' ')[0] : form.created_at.split(' ')[0]}\n
\n \n
\n {form.count}
\n \n ![\"No](\"https://cdn.jotfor.ms/img/not_found_icon@2x.png\")
\n
\n )}\n \n \n {t('No result found for')}\n {' '}\n {this.state.searchTerm}\n
\n \n
\n \n {contentSet.icon}\n
\n {t(contentSet.title)}
\n {t(contentSet.content)}
\n \n or \n \n {t('Go to MyForms')}\n \n
\n {isFormPickerOpen && (\n \n \n {t('Decrypt Entries')}\n \n
\n );\n};\n\nexport default EncryptedSubmissionPage;\n","import React, {\n FC, useEffect, useRef, ReactNode, Suspense\n} from 'react';\nimport { t, translationRenderer } from '@jotforminc/translation';\nimport { IconFileLockFilled, IconXmark } from '@jotforminc/svg-icons';\nimport { Modal } from '@jotforminc/uikit';\nimport { safeLazy } from '@jotforminc/safe-lazy-import';\n\nimport { Button } from '@jotforminc/magnet';\nimport { Protocol, ModalRef, User } from '../../types';\nimport { hasEncryptionKey, convertText } from '../../utils';\nimport '../../styles/decryptionWizard.scss';\n\nconst DecryptByPassword = safeLazy(() => import(/* webpackChunkName: \"LazyDecryptByPassword\" */ './DecryptByPassword'));\nconst DecryptByFile = safeLazy(() => import(/* webpackChunkName: \"LazyDecryptByFile\" */ './DecryptByFile'));\n\ntype Props = {\n closable: boolean,\n onClose: () => void,\n onLoad: () => void,\n isOnLoadAfterDone: boolean,\n formID: string,\n encryptionProtocol: Protocol,\n user: User\n};\n\nconst DecryptionWizard: FC\n
\n \n
\n \n {t('THIS SUBMISSION IS END-TO-END ENCRYPTED')}\n
\n \n {translatedResult}\n
\n \n {closable && (\n
\n )}\n ContentRenderer={({ children }: { children: ReactNode }) => <>{children}}\n // eslint-disable-next-line\n DialogRenderer={({ children }: { children: ReactNode }) => {children}
}\n FooterRenderer={() => <>}\n >\n \n
\n {\n {\n 'JF-CSE-V1': (\n {t('Access Encrypted Submissions')}
\n\n {translationRenderer(convertText('[1[Your form data is encrypted.]] Please enter your access code to view your form submissions.', user?.username))({\n renderer1: (text?: string) => {text}\n })}\n
\n\n {text &&
\n )}\n {text}
}\n {desc && {desc}
}\n \n
\n );\n }\n return (this.props.children);\n }\n}\n\nErrorCatcher.propTypes = {\n allowedErrorCount: PropTypes.number,\n children: PropTypes.node.isRequired\n};\n\nErrorCatcher.defaultProps = {\n allowedErrorCount: 1\n};\n","import React from 'react';\n\nconst SpaceElement = () => ;\n\nexport default SpaceElement;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { mmToPx, optimizedImg } from '../../../utils';\nimport { FEATURE_NAMES, isFeatureEnabled } from '../../../constants/features';\n\nconst Image = ({\n src, l\n}) => {\n const height = parseInt(mmToPx(l.userHeight || l.h), 10);\n const _src = optimizedImg(src, height);\n const isNoBgImageElement = isFeatureEnabled(FEATURE_NAMES.NoBgImageElement);\n\n return (\n isNoBgImageElement ? (\n \n ¯\\_(ツ)_/¯ - there seems to be an error! We are working on it.\n
\n\n
\n ) : (\n \n {headElement}\n {showSubText && subHeaderElement}\n
\n );\n};\n\nHead.propTypes = {\n text: PropTypes.string,\n showSubText: PropTypes.bool,\n headingProps: PropTypes.shape({}),\n subHeadingProps: PropTypes.shape({}),\n labelProps: PropTypes.shape({}),\n subText: PropTypes.string\n};\n\nHead.defaultProps = {\n text: '',\n subText: '',\n showSubText: false,\n headingProps: {},\n subHeadingProps: {},\n labelProps: {\n textProps: {\n }\n }\n};\n\nexport default Head;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport Head from '../Head';\n\nconst FormNameBase = ({\n formName, headingProps, text, labelProps\n}) => {\n const properties = { text: text || formName, headingProps, labelProps };\n return {text}
\n {text}
)}\n {props.type}
;\n\nDefault.propTypes = {\n type: PropTypes.string.isRequired\n};\n\nexport default Default;\n","import React, { Suspense } from 'react';\nimport { safeLazy } from '@jotforminc/safe-lazy-import';\n\nconst Preview = safeLazy(() => import(/* webpackChunkName: \"CommonPreview\" */ './CommonPreview'));\n\nconst LazyPreview = ({ ...props }) => (\n \n updatePreviewVisibility(true)}\n onKeyDown={null}\n data-index={index}\n >\n {isImageFile\n ? (\n {\n e.target.onerror = null;\n e.target.src = IMAGE_ERROR_FALLBACK;\n }}\n />\n )\n : (\n <>\n
\n \n \n \n {removeExtension(fileName)}\n \n .\n {extension.toLowerCase()}\n \n \n {fileSize && (\n \n {fileSize}\n \n )}\n
\n {!isEmail && isDownloadButtonShow && (\n \n downloadFile(fileUrl)}\n >\n
\n )}\n {isPreviewOpen && files && (\n \n { hyperLink && {filename} }\n { sizeText && {formatBytes(size)}}\n
\n )\n }\n \n {processedAnswer[type].map(this.renderItem)}\n
\n ))\n }\n \n );\n }\n}\n\nFileupload.propTypes = {\n text: string,\n answer: oneOfType([arrayOf(string), shape({})]),\n labelProps: shape({}),\n answerProps: shape({}),\n answerWrapperProps: shape({ className: string }),\n baselineProps: shape({}),\n containerProps: shape({}),\n fileNameProps: oneOfType([shape({}), array]),\n showImageHyperlink: bool,\n direction: string,\n viewStyle: string,\n itemSize: string,\n groupByType: bool,\n prettyFormat: string\n};\n\nFileupload.defaultProps = {\n text: '',\n answer: [''],\n labelProps: {},\n answerProps: {},\n answerWrapperProps: { className: undefined },\n baselineProps: {},\n containerProps: {},\n fileNameProps: [],\n showImageHyperlink: true,\n direction: 'column',\n viewStyle: 'masonry',\n itemSize: 'large',\n groupByType: false,\n prettyFormat: ''\n};\n\nexport default Fileupload;\n","import React, { Component } from 'react';\nimport classNames from 'classnames';\nimport styled from 'styled-components';\nimport ColumnResizer from 'column-resizer';\nimport {\n bool, arrayOf, number, func, shape, string\n} from 'prop-types';\nimport { sendAnalytics } from '../../../utils';\n\nclass ResizableTable extends Component {\n /* eslint-disable-next-line */\n UNSAFE_componentWillUpdate() {\n const { initer } = this.props;\n if (initer) {\n initer(this.init);\n }\n }\n\n componentWillUnmount() {\n this.destroy();\n }\n\n getTable = () => {\n return this.parent && this.parent.querySelector('table');\n };\n\n getColumns = () => {\n const table = this.getTable();\n const rows = table && table.querySelector('tr');\n const columns = (rows && rows.querySelectorAll('th, td')) || [];\n return [...columns];\n };\n\n getWidths = () => {\n return this.getColumns().map(td => td.getBoundingClientRect().width);\n };\n\n getDefaults = passedWidths => {\n if (passedWidths.length) {\n return passedWidths;\n }\n\n const columns = this.getColumns();\n\n const table = this.getTable();\n const { width = 0 } = (table && table.getBoundingClientRect()) || {};\n\n if (columns.length === 2) {\n return [width * 0.4, width * 0.6];\n }\n\n // return this.getWidths();\n return columns.map(() => width / columns.length);\n };\n\n setWidths = passedWidths => {\n const widths = this.getDefaults(passedWidths);\n if (!widths) {\n return;\n }\n // eslint-disable-next-line no-param-reassign\n this.getColumns().forEach((col, i) => { col.style.width = `${widths[i]}px`; });\n };\n\n mouseHandler = e => {\n e.stopPropagation();\n };\n\n handleResize = () => {\n const { onResize, inputType } = this.props;\n sendAnalytics('tableResized', inputType);\n const widths = this.getWidths();\n return onResize && onResize(widths);\n };\n\n enableResize = () => {\n const { widths } = this.props;\n\n const options = {\n liveDrag: true, // yeah!\n widths,\n onResize: this.handleResize,\n resizeMode: 'fit'\n };\n\n const table = this.getTable();\n if (!table) {\n return;\n }\n this.setWidths(widths);\n this.resizer = new ColumnResizer(table, options);\n global.requestAnimationFrame(() => {\n this.parent.querySelectorAll('.grip-handle').forEach(h => h.addEventListener('mousedown', this.mouseHandler));\n });\n };\n\n disableResize = () => {\n if (!this.resizer) {\n return;\n }\n\n this.resizer.reset({ disable: true });\n this.resizer = undefined;\n const grips = this.parent.querySelector('.grip-container');\n if (grips) grips.remove();\n };\n\n init = parent => {\n this.parent = parent;\n\n if (!this.parent) {\n return;\n }\n\n this.disableResize();\n this.enableResize();\n };\n\n destroy() {\n this.disableResize();\n }\n\n componentDidUpdate = () => {\n if (this.getTable()) {\n this.disableResize();\n this.enableResize();\n }\n };\n\n render() {\n const {\n className, tableFormat, tableProps, tableBackground, textWrapping, initer, ...props\n } = this.props;\n\n return (\n \n
\n \n );\n }\n}\n\nconst cellDataPropTypes = [\n PropTypes.string,\n PropTypes.number,\n PropTypes.bool\n];\n\nMatrix.propTypes = {\n rows: PropTypes.arrayOf(PropTypes.string),\n columns: PropTypes.arrayOf(PropTypes.string),\n dcolumns: PropTypes.string,\n text: PropTypes.string,\n normalizedAnswer: PropTypes.arrayOf(PropTypes.oneOfType([\n ...cellDataPropTypes,\n PropTypes.arrayOf(cellDataPropTypes)\n ])),\n emojiArray: PropTypes.arrayOf(PropTypes.number),\n toggleOptions: PropTypes.arrayOf(PropTypes.string),\n labelProps: PropTypes.shape({}),\n answerProps: PropTypes.shape({}),\n answerWrapperProps: PropTypes.shape({}),\n baselineProps: PropTypes.shape({}),\n sublabelProps: PropTypes.shape({}),\n containerStyle: PropTypes.shape({}),\n columnnHeaderProps: PropTypes.arrayOf(PropTypes.shape({})),\n transpose: PropTypes.bool,\n showRowHeader: PropTypes.bool,\n showColumnHeader: PropTypes.bool,\n orientation: PropTypes.oneOf([\n 'row',\n 'column'\n ]),\n answer: PropTypes.oneOfType([\n PropTypes.bool,\n PropTypes.shape({}),\n PropTypes.arrayOf(PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.number\n ]))\n ]),\n inputType: PropTypes.string,\n showAll: PropTypes.bool,\n direction: PropTypes.string\n};\n\nMatrix.defaultProps = {\n rows: [],\n text: '',\n normalizedAnswer: [],\n dcolumns: '',\n emojiArray: [],\n toggleOptions: ['Yes', 'No'],\n labelProps: {},\n answerProps: {},\n answerWrapperProps: {},\n baselineProps: {},\n sublabelProps: {},\n containerStyle: {},\n columnnHeaderProps: [],\n columns: [],\n transpose: false,\n showRowHeader: true,\n showColumnHeader: true,\n orientation: 'column',\n answer: {},\n inputType: '',\n showAll: true,\n direction: 'column'\n};\n\nexport default withMatrixProps(Matrix);\n","import { safeJSONParse } from '@jotforminc/utils';\nimport {\n parseSeparatedValues, replacePriceComma, decodeObject, getFormattedPriceWithCurrency\n} from '../../../utils';\n\nexport const parseOptionsFromString = product => {\n // Each option consists of a key-value pair separated by a colon (':').\n return parseSeparatedValues(product);\n};\n\nexport const extractProductProperties = (product, type, products, currency, decimalMark) => {\n const paymentTypeList = ['donation', 'subscription'];\n if (paymentTypeList.indexOf(type) !== -1) return { name: product };\n\n // product string looks like \"Black T-Shirt (Amount: 21.00 USD, Quantity: 2)\"\n const amountIndex = product.indexOf(' (Amount: ');\n const productName = product.substr(0, amountIndex);\n const productOptions = parseOptionsFromString(product.slice(amountIndex + 2, product.length - 1));\n const detailedProduct = products.find(e => e.name.trim() === productName.trim()) || {};\n const { options: detailedProductOptions = [] } = detailedProduct || {};\n const parsedDetailedProductOptions = safeJSONParse(detailedProductOptions);\n\n const options = productOptions.reduce((acc, opt) => {\n const [name, value] = opt.split(': ');\n\n // if current option is named 'Amount' while there is already an Amount in the options, search for a quantity selector named 'Amount'\n if (name === 'Amount' && acc.Amount) {\n const amountOptionIndex = parsedDetailedProductOptions.findIndex(e => e.type === 'quantity' && e.name === 'Amount');\n if (amountOptionIndex !== -1) {\n // if one such option is found, change names so the calculations do not break\n parsedDetailedProductOptions[amountOptionIndex].name = 'quantityOption';\n return {\n ...acc,\n quantityOption: value\n };\n }\n }\n return {\n ...acc,\n [name]: value\n };\n }, {});\n\n // if quantity option cannot be redeemed from product info, check products array.\n if (options.Quantity === undefined && Array.isArray(parsedDetailedProductOptions)) {\n // no need to get quantity if special pricing is enabled.\n const { name: quantityName } = parsedDetailedProductOptions.find(({ type: elementType = '', specialPricing } = {}) => (elementType === 'quantity') && !specialPricing) || {};\n if (quantityName) {\n options.Quantity = options[quantityName];\n }\n }\n\n // if still no quantity found, set it to 1.\n if (options.Quantity === undefined) {\n options.Quantity = 1;\n }\n const {\n Quantity, Amount, icon, images, ...otherOptions\n } = options;\n\n const price = replacePriceComma(Amount);\n const count = parseInt(Quantity, 10);\n const amountPrice = Number.isNaN(count) ? price : (price * count).toFixed(2);\n const decodedOptions = decodeObject(otherOptions);\n return {\n name: productName,\n quantity: Quantity,\n price,\n amountPrice,\n amount: getFormattedPriceWithCurrency(amountPrice, currency, decimalMark),\n options: decodedOptions\n };\n};\n\nexport const getPayerInformation = paymentData => {\n const {\n fullname,\n firstname,\n lastname,\n email,\n company\n } = paymentData;\n\n // Payer related data\n let payerName = null;\n if (fullname) {\n payerName = fullname;\n } else if (firstname || lastname) {\n payerName = `${firstname} ${lastname}`;\n }\n\n return {\n name: payerName,\n email,\n company\n };\n};\n\nexport const hasPayerInfo = paymentData => {\n const { name, email, company } = getPayerInformation(paymentData);\n return !!(name || email || company);\n};\n\nexport const hasTransactionInfo = paymentData => {\n return !!paymentData.transactionid;\n};\n\nexport const hasShippingInfo = paymentData => {\n const {\n shiptoname: name,\n addr: street,\n city = '',\n state = '',\n postal: postalCode = '',\n country\n } = paymentData;\n\n return (name && street && city && state && postalCode && country);\n};\n","import { useEffect, useState } from 'react';\n\nconst useSecondEffect = (fn, deps) => {\n const [second, setSecond] = useState();\n\n useEffect(() => {\n if (!second) {\n return setSecond(true);\n }\n\n fn();\n }, deps);\n};\n\nexport default useSecondEffect;\n","/* eslint-disable complexity */\n/* eslint-disable react/jsx-props-no-spreading */\n/* eslint-disable react/jsx-one-expression-per-line */\n\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport { Baseline } from '@jotforminc/answer-fields';\nimport { safeJSONParse } from '@jotforminc/utils';\nimport { t } from '@jotforminc/translation';\nimport { useSelector } from 'react-redux';\nimport isEqual from 'lodash/isEqual';\nimport { CanvasClass } from '../../Canvas/Canvas';\nimport ResizableTable from '../Matrix/ResizableTable';\nimport { PAYMENT_TABLE_WIDTHS } from '../../../constants';\nimport {\n getFormattedPriceWithCurrency, tryToGet\n} from '../../../utils';\nimport {\n extractProductProperties, getPayerInformation, hasPayerInfo, hasTransactionInfo, hasShippingInfo\n} from './utils';\nimport useSecondEffect from '../../../hooks/useSecondEffect';\nimport { selectProducts } from '../../../store/selectors';\n\nconst PaymentTable = styled(ResizableTable)`\n margin: 0 0 15px;\n\n table {\n tbody, thead {\n > tr {\n > td, th {\n border-width: 0px;\n text-align: left;\n padding: 10px;\n padding-left: 8px !important;\n padding-right: 8px !important;\n }\n }\n }\n @media print {\n tfoot { display: table-row-group; }\n }\n }\n`;\n\nconst themeDark = '#F2F3FE';\nconst themeLight = '#fff';\nconst themeBorder = '#E5E6EF';\nconst themeHeaderColor = '#2A2F54';\n\nconst TableHeader = styled.th`\n font-size: 14px;\n border: none;\n font-weight: bold;\n padding: 6px;\n color: ${({ isDeleted }) => { return isDeleted ? '#FFF' : themeHeaderColor; }};\n background: ${({ isDeleted }) => { return isDeleted ? '#FF3737' : themeDark; }};\n`;\n\nconst TableData = styled.td`\n font-size: 14px;\n border:none;\n padding: 6px;\n background: ${themeLight};\n color: ${themeHeaderColor};\n`;\n\nconst Row = styled.tr`\n &:not(:first-of-type) {\n td, th {\n border-top: 1px solid ${themeBorder};\n }\n }\n`;\n\nconst SubViewsBase = ({ className, ...props }) => ();\n\nconst SubViews = styled(SubViewsBase)`\n display: flex;\n flex-wrap: wrap;\n\n > div {\n flex: 1;\n margin: 0 8px 8px 0;\n max-width: 40%;\n }\n\n .priceText {\n font-size: 14px !important;\n color: #4c5163 !important;\n font-weight: normal !important;\n }\n\n .total {\n border-top: 1px solid #e9ecf9;\n padding-top: 10px;\n margin-top: 10px;\n .isLabel, .priceText {\n font-weight: bold !important;\n }\n\n .priceText {\n font-size: 1.6em !important;\n color: #060a33 !important;\n }\n }\n`;\n\nconst Payment = ({\n text,\n answer: { paymentArray, ...restAnswer },\n containerStyle,\n paymentType,\n popoverProps,\n prettyFormat,\n decimalMark,\n labelProps,\n answerProps,\n answerWrapperProps,\n baselineProps,\n paymentStrings,\n direction,\n showSubtotal,\n showDiscount,\n showPayerInfo,\n showTransactionID,\n showShippingAddress,\n showProductOptions,\n showQuantity,\n showAmount,\n paymentView,\n showPricing,\n showProductImage,\n paymentHeaderProps,\n tableWidths,\n onResize,\n i\n}) => {\n const products = useSelector(selectProducts, isEqual);\n const paymentData = safeJSONParse(paymentArray, paymentArray);\n const { total } = paymentData;\n\n const PaymentHeader = props => \n {name} }\n {email && {email} }\n {company && {company} }\n
\n );\n };\n\n const getTransactionView = () => {\n if (!hasTransactionInfo(paymentData)) { return null; }\n\n const { transactionid: id } = paymentData;\n return (\n {t('Payer Information')}
\n {name && \n \n {id}\n \n
\n );\n };\n\n const getShippingView = () => {\n if (!hasShippingInfo(paymentData)) { return null; }\n\n const {\n shiptoname: name,\n addr: street,\n city = '',\n state = '',\n postal: postalCode = '',\n country\n } = paymentData;\n\n return (\n \n {t('Transaction ID')}\n
\n \n {name} }\n {street && {street} }\n {city} {state} {postalCode} \n {country && {country} }\n
\n );\n };\n\n const withImage = (product, currentIndex) => {\n const { images, icon } = product;\n const { shortView } = paymentData;\n const isImage = shortView && shortView.products && shortView.products[currentIndex];\n const pImages = typeof images === 'string' ? safeJSONParse(images) : images;\n\n const image = isImage\n ? shortView.products[currentIndex].image\n : (pImages && pImages[0]) || icon;\n\n return {\n ...product,\n image\n };\n };\n\n const getBoughtProducts = () => {\n // Product related data\n const type = paymentType;\n const allProducts = products;\n const boughtProducts = paymentData;\n const { currency } = paymentData;\n\n return boughtProducts.product.reduce((accumulator, product) => {\n const productOptions = extractProductProperties(product, type, allProducts, currency, decimalMark);\n\n if (type === 'donation') {\n return [...accumulator, productOptions];\n }\n\n if (!allProducts) {\n return accumulator;\n }\n\n const productSpecs = allProducts.find(productSpec => productSpec.name === productOptions.name);\n\n if (!productSpecs) {\n return [...accumulator, productOptions];\n }\n\n if (type === 'subscription') {\n productSpecs.amount = getPrice(total);\n if (productSpecs.customPrice === '1') {\n productSpecs.price = total;\n }\n }\n\n return [\n ...accumulator,\n {\n ...productSpecs,\n ...productOptions\n }\n ];\n }, []).map(withImage);\n };\n\n const getPricingView = (topic, cost, currency = paymentData.currency) => {\n if (!cost) return;\n\n return (\n {t('Shipping Address')}
\n {name && \n {topic} \n {getPrice(cost, currency)} \n
\n );\n };\n\n const boughtProducts = getBoughtProducts();\n // const discount = tryToGet(() => prettyFormat.split('Discount: ')[1].split('')[0])\n // || boughtProducts.reduce((accum, product) => (accum + (parseFloat(product.price) - parseFloat(product.amountPrice))), 0).toFixed(2);\n const discount = tryToGet(() => prettyFormat.split('Discount: ')[1].split('
')[0].split(' ')[0]) || Object.values(restAnswer).reduce((acc, curr) => {\n const parsedValue = safeJSONParse(curr, {}, true);\n const { discountedPrice } = parsedValue;\n if (discountedPrice) {\n const positiveDiscountValue = Math.abs(discountedPrice);\n return acc + positiveDiscountValue;\n }\n return acc;\n }, 0);\n\n const showImage = showProductImage && boughtProducts.findIndex(p => !!p.image) > -1;\n const showOptions = showProductOptions && boughtProducts.findIndex(p => p.options && Object.keys(p.options).length) > -1;\n\n const getDiscountView = () => {\n const { coupon } = paymentData;\n const { style: { background } } = paymentHeaderProps;\n\n if (!coupon) return;\n\n return (\n
\n
\n );\n };\n\n const getColumns = () => {\n const cols = [];\n\n if (showImage) {\n cols.push(\n
\n \n {`${t('Discount Applied')}:`}\n
\n {`${t('Coupon code')} - ${coupon}`}
\n {discount ? getPrice(discount, paymentData.currency) : ''}
\n {opt}: {options[opt]}
: ''));\n };\n\n const getOptionsView = options => {\n if (Object.keys(options).length === 0) return \n
\n );\n }\n\n let subtotal = 0;\n let isMainProductFinished = false;\n const defaultProductMode = isDefault && paymentType === 'product';\n return (\n \n {showPayerInfo && getPayerView()}\n {showTransactionID && getTransactionView()}\n
\n \n {showShippingAddress && getShippingView()}\n
\n \n \n 
\n
\n )}\n {name}
\n {!showOptions && getOptionsTexts(options)}\n {(quantity && quantity !== '1') && showAmount && isDefault && (\n <>\n {!showPricing && {getPrice(price)} }\n {!showQuantity && {quantity ? `x ${quantity}` : ''} }\n \n )}\n {!showAmount && {amount} }\n \n {showDiscount && getDiscountView()}\n
\n \n {showSubtotal && getPricingView((paymentStrings.length < 0 ? t('Subtotal') : paymentStrings[0].totalSubtotal), paymentData.subtotal)}\n {showDiscount && paymentData.coupon && getPricingView(t('Discount'), discount)}\n {paymentData.shipping && getPricingView((paymentStrings.length < 0 ? t('Shipping') : paymentStrings[0].shippingShipping), paymentData.shipping)}\n {getPricingView((paymentStrings.length < 0 ? t('Tax') : paymentStrings[0].taxTax), paymentData.tax)}\n
\n \n {getPricingView((paymentStrings.length < 0 ? t('Total') : paymentStrings[0].totalTotal), total)}\n
\n {text}
\n {customerInfo.filter(({ infoName }) => !hiddenCustomerInfoFields.includes(infoName)).map(({\n answer = {}, text: infoText = '', Component = React.Fragment\n }) => \n {addrLine1}\n
\n ),\n addr_line2: (\n \n {addrLine2}\n
\n ),\n city: (\n \n {addrCity}\n \n ),\n state: (\n \n {addrState}\n \n ),\n postal: (\n \n {addrZip}\n \n ),\n country: (\n \n {addrCountry}\n \n )\n };\n\n /* eslint-disable-next-line no-unused-vars */\n const orderedSubfields = Object.entries(subFields).sort(([k1, v1], [k2, v2]) => subfieldOrder.indexOf(k1) - subfieldOrder.indexOf(k2)).map(([k, v]) => v);\n\n return (\n \n {orderedSubfields}\n
\n );\n }\n\n return (\n \n \n {addrLine1}\n \n
\n \n \n {addrLine2}\n \n
\n \n \n {addrCity}\n \n \n {addrState}\n \n
\n \n \n {addrZip}\n \n {!sfStyle.country ? (\n \n {addrCountry}\n \n ) : null}\n
\n \n );\n }\n}\n\nAddress.getState = () => {\n return {};\n};\n\nAddress.getScript = () => {\n return '';\n};\n\nAddress.propTypes = {\n id: PropTypes.shape({\n value: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.number\n ])\n }).isRequired,\n compoundHint: PropTypes.shape({\n value: PropTypes.string\n }).isRequired,\n qid: PropTypes.shape({\n value: PropTypes.string\n }).isRequired,\n type: PropTypes.shape({\n value: PropTypes.string\n }).isRequired,\n qname: PropTypes.shape({\n value: PropTypes.string\n }).isRequired,\n subfields: PropTypes.shape({\n value: PropTypes.string\n }).isRequired,\n states: PropTypes.shape({\n value: PropTypes.string\n }).isRequired,\n selectedCountry: PropTypes.shape({\n value: PropTypes.string\n }).isRequired,\n countryDropdownDefaultText: PropTypes.shape({\n value: PropTypes.string\n }).isRequired,\n inlineEditClass: PropTypes.elementType.isRequired,\n required: PropTypes.shape({\n value: PropTypes.string\n }).isRequired,\n themeVersion: PropTypes.string.isRequired\n};\n","import type { SUPPORTED_CURRENCIES } from './types';\n\n/**\n * Array of unsupported decimal currencies.\n * These currencies do not support decimal places.\n *\n * The unsupportedDecimalCurrencies variable represents a\n * list of currency codes that do not support decimal places.\n * These currencies, such as the Japanese Yen (JPY), Korean Won (KRW),\n * and others, typically use 1 as their smallest unit. This is an important\n * consideration during financial calculations and currency conversion operations,\n * as these currencies do not divide into smaller, fractional units like many\n * others do (e.g., the US Dollar divides into cents). Therefore, any operation\n * that might assume the presence of decimal places could potentially lead to\n * inaccuracies when applied to these currencies.\n * @type {SUPPORTED_CURRENCIES[]}\n */\nexport const unsupportedDecimalCurrencies: SUPPORTED_CURRENCIES[] = [\n 'BIF',\n 'CLP',\n 'DJF',\n 'GNF',\n 'JPY',\n 'KMF',\n 'KRW',\n 'MGA',\n 'PYG',\n 'RWF',\n 'VUV',\n 'XAF',\n 'XOF',\n 'XPF'\n];\n","/* eslint-disable react/require-default-props */\n/* eslint-disable react/destructuring-assignment */\n/* eslint-disable complexity */\nimport PropTypes, { oneOfType } from 'prop-types';\nimport React, { Component } from 'react';\nimport { numberFormat } from '@jotforminc/form-common';\nimport { unsupportedDecimalCurrencies } from '@jotforminc/payment-constants';\n\nexport default class FormatPrice extends Component {\n render() {\n const curr = !this.props.currency ? 'USD' : this.props.currency;\n const id = this.props.priceID || '';\n let amount = this.props.priceAmount;\n // decimal places\n let dec = unsupportedDecimalCurrencies.indexOf(curr) > -1 ? 0 : 2;\n\n if (this.props.useDecimal === false) {\n dec = 0;\n }\n\n if (parseFloat(amount) === 0 && this.props.nofree !== true) {\n amount = 'Free'.locale();\n } else {\n const { decimalMark } = this.props;\n let useComma;\n\n if (decimalMark) {\n const val = typeof decimalMark === 'object' ? decimalMark.value : decimalMark;\n switch (val) {\n case 'comma':\n useComma = true;\n break;\n case 'point':\n default:\n useComma = false;\n break;\n }\n } else {\n useComma = false;\n }\n\n amount = numberFormat(amount, dec, (useComma ? ',' : '.'), (useComma ? '.' : ',')); // Format the number for money currency\n }\n let symbol;\n switch (curr) {\n case 'EUR': symbol = ['€', '']; break;\n case 'GBP': symbol = ['£', '']; break;\n case 'BRL': symbol = ['R$', '']; break;\n case 'JPY': symbol = ['¥', '']; break;\n case 'USD': symbol = ['$', '']; break;\n case 'AUD':\n case 'CAD':\n case 'NZD':\n case 'SGD':\n case 'CLP':\n symbol = ['$', curr]; break;\n case 'TRY':\n symbol = ['', 'TL']; break;\n default:\n symbol = ['', curr]; break;\n }\n\n let inlineAmount = amount;\n\n if (this.props.inlineEditClass) {\n inlineAmount = React.createElement(this.props.inlineEditClass, {\n id: 'Form',\n // eslint-disable-next-line react/prop-types\n pid: this.props.pid,\n propPath: `products[${this.props.itemId}].price`,\n text: amount || '',\n placeholder: 'Enter price',\n sanitizeText: true,\n format: 'currency'\n });\n }\n\n // the word 'free' can be in other languages\n // parse and check if it's a number to determine if it's free or not\n // eslint-disable-next-line no-restricted-globals\n if (isNaN(parseInt(amount, 10))) {\n return (\n \n \n {symbol[0]}\n \n \n \n {inlineAmount || amount}\n \n \n {symbol[1]}\n \n \n );\n }\n return (\n \n {symbol[0]}\n \n {inlineAmount || amount}\n \n {(symbol[1] && symbol[1] !== '') && {symbol[1]}}\n \n );\n }\n}\n\nFormatPrice.propTypes = {\n priceAmount: oneOfType([PropTypes.number, PropTypes.string]),\n currency: PropTypes.string,\n priceID: PropTypes.string,\n nofree: PropTypes.bool,\n useDecimal: PropTypes.bool,\n decimalMark: oneOfType([PropTypes.string, PropTypes.shape()]),\n inlineEditClass: PropTypes.elementType,\n itemId: PropTypes.string\n};\n","import PropTypes from 'prop-types';\nimport React, { Component } from 'react';\nimport FormatPrice from './FormatPrice';\n\nexport default class MakeProductText extends Component {\n createFormatPrice(currencyDisplay, priceAmount, priceID) {\n const { useDecimal, inlineEditClass, itemId, decimalMark, pid } = this.props;\n\n return (\n \n \n {renderSlider()}\n {renderImageProductContainer(products)}\n
\n );\n}\n\nImageOverLay.propTypes = {\n products: PropTypes.oneOfType([\n PropTypes.arrayOf(PropTypes.object),\n PropTypes.string\n ])\n};\n\nexport default ImageOverLay;\n","import PropTypes from 'prop-types';\nimport React, { Component } from 'react';\n\nexport default class MultiSelectDropdown extends Component {\n // Note for developers: I develop the component to use into Payment Category System.\n // I tried to make a dynamic component and added some functionalities for future usage.\n // But we don't use some of these functionalities. So please tested it before you can use.\n\n render() {\n const { hint, additionalClass, selectFirstOption, uid, addSelectAll, selectAllText } = this.props;\n let { options } = this.props;\n\n if (!options || Array.isArray(options) === false) {\n options = [];\n }\n\n if (addSelectAll) {\n options = [{ label: selectAllText.locale(), value: 'All' }, ...options];\n }\n\n return (\n \n
\n \n );\n }\n}\n\nMultiSelectDropdown.propTypes = {\n hint: PropTypes.string,\n additionalClass: PropTypes.string,\n uid: PropTypes.string,\n addSelectAll: PropTypes.bool,\n selectAllText: PropTypes.string,\n selectFirstOption: PropTypes.bool,\n options: PropTypes.shape({}),\n};\n","import PropTypes from 'prop-types';\nimport React, { Component } from 'react';\n\nexport default class PaymentDropdown extends Component {\n render() {\n const { hint, additionalClass, selectFirstOption, uid, clearText } = this.props;\n let { options } = this.props;\n\n if (!options || Array.isArray(options) === false) {\n options = [];\n }\n\n return (\n \n
\n \n {hint && {hint}}\n {options[0] && options[0].label}\n \n
\n \n
\n \n {options && options.length > 0 && (\n options.map((option, index) => (\n \n
\n ))\n )}\n \n
\n \n );\n }\n}\n\nPaymentDropdown.propTypes = {\n hint: PropTypes.string,\n additionalClass: PropTypes.string,\n uid: PropTypes.string,\n selectFirstOption: PropTypes.bool,\n options: PropTypes.shape({}),\n clearText: PropTypes.string.isRequired\n};\n\nPaymentDropdown.defaultProps = {\n additionalClass: '',\n};\n","import React, { useEffect, useMemo, useState } from 'react';\nimport { bool, func, oneOf } from 'prop-types';\nimport {\n IconListCheck,\n IconCheckCircleFilled,\n IconCircleLg\n} from '@jotforminc/svg-icons';\n\nconst WarningMessageIconContainer = () => (\n \n
\n \n {hint && {hint}}\n \n \n
\n \n
\n \n {options && options.length > 0 && (\n options.map((option, index) => (\n \n {option.label}\n
\n ))\n )}\n\n \n {clearText}\n
\n \n
\n);\n\nexport default function WarningMessage({\n hasProduct,\n hasGateway,\n hasConnection,\n paymentType,\n openPaymentConnectionModal,\n openPaymentPropertiesPanel,\n isPaymentGatewayConfigured\n}) {\n const [preload, setPreload] = useState(true);\n const _messages = [\n {\n id: '1',\n text: (\n <>\n \n to collect online payments\n \n ),\n checkedCondition: () => hasConnection,\n renderCondition: () => !hasConnection\n },\n {\n id: '4',\n text: (\n <>\n \n to complete your payment setup\n \n ),\n checkedCondition: () => isPaymentGatewayConfigured, // if required settings are completed\n renderCondition: () => hasGateway && hasConnection\n },\n {\n id: '5',\n text: `Add ${paymentType}s to make this field visible`,\n checkedCondition: () => hasProduct,\n renderCondition: () => ['product', 'subscription'].includes(paymentType)\n }\n ];\n\n const allChecked = useMemo(() => {\n return _messages.filter(message => message.renderCondition()).every(message => message.checkedCondition());\n }, [\n hasGateway,\n hasConnection,\n hasProduct,\n paymentType,\n isPaymentGatewayConfigured\n ]);\n\n // For preventing animation on mount\n useEffect(() => {\n setTimeout(() => {\n setPreload(false);\n }, 2000);\n }, []);\n\n return (\n \n
\n );\n}\n\nWarningMessage.propTypes = {\n hasProduct: bool.isRequired,\n hasConnection: bool.isRequired,\n hasGateway: bool.isRequired,\n openPaymentConnectionModal: func.isRequired,\n paymentType: oneOf(['product', 'subscription']).isRequired,\n isPaymentGatewayConfigured: bool.isRequired,\n openPaymentPropertiesPanel: func.isRequired\n};\n","/* eslint-disable eqeqeq */\n/* eslint-disable react/jsx-one-expression-per-line */\n/* eslint-disable max-statements */\n/* eslint-disable prefer-destructuring */\n/* eslint-disable react/prop-types */\n/* eslint-disable react/destructuring-assignment */\n/* eslint-disable import/no-useless-path-segments */\n/* eslint-disable max-lines */\n\nimport PropTypes from 'prop-types';\nimport React, { Component } from 'react';\nimport md5 from 'blueimp-md5';\nimport { safeJSONParse } from '@jotforminc/utils';\nimport {\n loadScript, parseJSON, paymentTypeWithTax, paymentTypeWithShipping\n} from '@jotforminc/form-common';\nimport { IconChevronDown } from '@jotforminc/svg-icons';\nimport FormatPrice from '../helpers/FormatPrice';\nimport MakeProductText from '../helpers/MakeProductText';\nimport SubLabel from '../helpers/SubLabel';\nimport {\n addValidation,\n classNames,\n getProductMinQuantity,\n JSONUnicodeEncode\n} from '../helpers/Utils';\nimport { getBiggestProductId, convertSubscriptionPeriod } from './PaymentUtils';\nimport ImageOverlay from './ImageOverlay';\nimport MultiSelectDropdown from './MultiSelectDropdown';\nimport PaymentDropdown from './PaymentDropdown';\nimport WarningMessage from './Payment/WarningMessage';\n\nexport default class ProductContainer extends Component {\n constructor(props) {\n super(props);\n this.openToPaymentWizard = this.openToPaymentWizard.bind(this);\n this.openToProductEditor = this.openToProductEditor.bind(this);\n this.closeProductEditor = this.closeProductEditor.bind(this);\n this.handlePaymentSettingsText = this.handlePaymentSettingsText.bind(this);\n this.sortProductsByCategories = this.sortProductsByCategories.bind(this);\n this.getFilteredProducts = this.getFilteredProducts.bind(this);\n this.handleCollapsible = this.handleCollapsible.bind(this);\n this.isPaymentNewUi = this.isPaymentNewUi.bind(this);\n this.isProductActive = this.isProductActive.bind(this);\n this.isStockAvailable = this.isStockAvailable.bind(this);\n this.getStocks = this.getStocks.bind(this);\n this.getActiveProductIndex = this.getActiveProductIndex.bind(this);\n this.renderAddButton = this.renderAddButton.bind(this);\n this.renderDeleteButton = this.renderDeleteButton.bind(this);\n this.showCategoryModalOnDelete = this.showCategoryModalOnDelete.bind(this);\n this.isGatewayOriginatedSubscription = this.isGatewayOriginatedSubscription.bind(this);\n this.setFocusedProductId = this.setFocusedProductId.bind(this);\n\n this.reorderedProducts = [];\n this.state = { focusedProductId: false };\n\n const { isOpenedInPortal, isPaymentForm, isPortalProductListElement } = props;\n this.useAppUI = (isOpenedInPortal && isPaymentForm) || isPortalProductListElement;\n }\n\n // eslint-disable-next-line react/no-deprecated\n componentWillReceiveProps(nextProps) {\n // reset active product on field blur\n if (!this.props.isSelectedQuestion && this.state.focusedProductId !== false) {\n this.setFocusedProductId(false);\n }\n\n // set active product after adding new one\n const oldProdArray = this.props.formProperties.products || [];\n const newProdArray = nextProps.formProperties.products || [];\n if (newProdArray && oldProdArray && newProdArray.length > 0 && newProdArray.length > oldProdArray.length) {\n const lastProdId = newProdArray[newProdArray.length - 1].pid;\n this.setFocusedProductId(lastProdId);\n }\n }\n\n componentDidUpdate(prevProps) {\n if (this.isGatewayOriginatedSubscription() && this.state.focusedProductId) {\n this.setFocusedProductId(false);\n }\n // focus to active product name after adding product to DOM\n const oldProdArray = prevProps.formProperties.products || [];\n const newProdArray = this.props.formProperties.products || [];\n if (newProdArray && oldProdArray && newProdArray.length > 0 && newProdArray.length > oldProdArray.length) {\n const lastProdId = newProdArray[newProdArray.length - 1].pid;\n const nameEl = document.querySelector(`#product-name-${this.props.qid.value}_${lastProdId} .inlineEditor`);\n this.focusToText(nameEl);\n }\n\n const focusedProductEl = document.querySelector('.focusedProduct .form-product-item-detail');\n\n if (focusedProductEl) {\n const focusedBtnContainer = focusedProductEl.querySelector('.focus_action_button_container');\n const { paymentListSettings } = this.props.formProperties;\n if ((paymentListSettings && paymentListSettings[0].productListLayout === 'HR') || !paymentListSettings) {\n const btnContainerHeight = focusedProductEl.style.height || null;\n focusedBtnContainer.style.height = `${btnContainerHeight}px`;\n } else {\n focusedBtnContainer.style.height = '';\n }\n }\n }\n\n // eslint-disable-next-line react/sort-comp\n openToPaymentWizard(e) {\n const { type, formProperties: { updateRightPanelMode, rightPanelToggle } } = this.props;\n const prettifyGatewayName = (type && type.value) ? type.value.replace('control_', '') : '';\n const isForceToGatewaySettings = e.target.getAttribute('isForce') === 'true';\n const isAPM = this.props.nameAPM && this.props.nameAPM.value;\n\n updateRightPanelMode('paymentsettings', true, e);\n\n // eslint-disable-next-line no-undef\n const rightPanelMode = (JotForm.gatewayConfirmed !== true || isForceToGatewaySettings) ? `gateway_${prettifyGatewayName}` : 'launcher';\n\n setTimeout(() => {\n if (window.paymentStore) {\n if (isAPM && type && type.value === 'control_payment') {\n window.paymentStore.changeMode('gatewayselectioneditor');\n } else {\n window.paymentStore.changeMode(rightPanelMode);\n }\n }\n }, 0);\n\n rightPanelToggle(true);\n }\n\n openToProductEditor(pid, e) {\n const { formProperties: { updateRightPanelMode, rightPanelToggle }, paymentType } = this.props;\n updateRightPanelMode('paymentsettings', true, e);\n\n setTimeout(() => {\n if (window.paymentStore && Array.isArray(window.paymentStore.products)) {\n const activeProductIndex = window.paymentStore.products.findIndex(p => `${p.pid}` === `${pid}`);\n if (activeProductIndex > -1 && window.paymentStore.mode !== 'gatewayselectioneditor') {\n // eslint-disable-next-line no-unused-expressions\n paymentType.value === 'subscription' ? window.paymentStore.setActiveSubscription(activeProductIndex) : window.paymentStore.setActiveProduct(activeProductIndex);\n window.paymentStore.changeMode(`${paymentType.value}editor`);\n }\n }\n }, 0);\n\n rightPanelToggle(true);\n }\n\n closeProductEditor() {\n const { formProperties: { rightPanelToggle } } = this.props;\n rightPanelToggle(false);\n }\n\n isGatewayOriginatedSubscription() {\n const isSubscription = this.props.paymentType && this.props.paymentType.value === 'subscription';\n const useStripeSubscriptions = this.props.useStripeSubscriptions && this.props.useStripeSubscriptions.value === '1';\n const usePaypalSubscriptions = this.props.usePaypalSubscriptions && this.props.usePaypalSubscriptions.value === 'Yes';\n return isSubscription && (useStripeSubscriptions || usePaypalSubscriptions);\n }\n\n setFocusedProductId(focusedProductId) {\n if (this.isGatewayOriginatedSubscription()) {\n this.setState({ focusedProductId: false });\n }\n this.setState({ focusedProductId });\n }\n\n handlePaymentSettingsText(text, forceToGatewaySettings = false) {\n // Dear Developer: I need to add click event to a part of the text without breaking translation.\n\n let dom = null;\n const matches = text.split(/(.*)<\\/a>/);\n const aIndex = matches.findIndex(el => el === '');\n const {\n formProperties: { id },\n logJotFormEvents,\n accountType,\n username\n } = this.props;\n\n const onTextClick = e => {\n this.openToPaymentWizard(e);\n const logPaymentSettingsClick = matches && matches[1] === 'Payment Settings';\n if (logPaymentSettingsClick) {\n logJotFormEvents('productPanelEvents', {\n actor: username,\n action: 'click-paymentsettings-text',\n target: id\n }, accountType);\n }\n };\n\n switch (aIndex) {\n case 0:\n dom = (\n \n {matches[1]}\n {matches[2]}\n \n );\n break;\n case -1:\n dom = (\n \n {matches[0]}\n {matches[1]}\n {matches[2]}\n \n );\n break;\n case 2:\n dom = (\n \n {matches[0]}\n {matches[1]}\n \n );\n break;\n default:\n dom = text;\n break;\n }\n\n return dom;\n }\n\n getStocks() {\n const { stocks } = this.props;\n if (!Array.isArray(stocks) || (Array.isArray(stocks) && stocks.length === 0)) { return {}; }\n const groupedStocks = {};\n\n stocks.forEach(s => {\n if (groupedStocks[s.pid]) {\n groupedStocks[s.pid].push({\n available_stock: parseInt(s.available_stock, 10),\n options: s.options\n });\n } else {\n groupedStocks[s.pid] = [{\n available_stock: parseInt(s.available_stock, 10),\n options: s.options\n }];\n }\n });\n\n return groupedStocks;\n }\n\n getActiveProductIndex(pid) {\n return this.props.formProperties.products.findIndex(p => `${p.pid}` === `${pid}`);\n }\n\n // eslint-disable-next-line complexity\n renderDonationPart() {\n const additionalClass = addValidation(classNames.textbox, this.props, 'Numeric');\n const donationAmountFilled = this.props.donationAmountField && this.props.donationAmountField.value > 0;\n const minValueFilled = this.props.requireMinimum && this.props.requireMinimum.value === 'Yes' && this.props.suggestedDonation.value > 0;\n\n return (\n \n
\n - \n {\n _messages.map(message => {\n if (!message.renderCondition()) { return null; }\n const isChecked = message.checkedCondition();\n return (\n
- \n {\n isChecked ? (\n \n {message.text}\n\n \n );\n })\n }\n
;\n let tempTaxSurcharge = '{}';\n if (this.props.formProperties.taxes && this.props.formProperties.taxes[0] && this.props.formProperties.taxes[0].surcharge && typeof this.props.formProperties.taxes[0].surcharge !== 'string') {\n tempTaxSurcharge = JSON.stringify(this.props.formProperties.taxes[0].surcharge);\n } else if (this.props.formProperties.taxes && this.props.formProperties.taxes[0] && this.props.formProperties.taxes[0].surcharge) {\n tempTaxSurcharge = this.props.formProperties.taxes[0].surcharge;\n }\n const hasTax = (\n this.props.formProperties.taxes\n && this.props.formProperties.taxes[0]\n && (\n this.props.formProperties.taxes[0].rate > 0\n || parseInt(safeJSONParse(tempTaxSurcharge).field, 10) > 0\n )\n && paymentTypeWithTax.indexOf(type) > -1\n && (\n this.props.paymentType.value === 'product'\n || (this.props.paymentType.value === 'subscription' && ['control_square', 'control_payfast'].includes(this.props.type.value))\n )\n );\n let tax = {};\n if (hasTax) {\n tax = this.props.formProperties.taxes && this.props.formProperties.taxes[0] ? this.props.formProperties.taxes[0] : {};\n }\n const taxExemptUnexist = tax.exemptions === null || typeof tax.exemptions === 'undefined';\n\n if (paymentListSettings && paymentListSettings[0] !== undefined) {\n // eslint-disable-next-line prefer-destructuring\n paymentListSettings = paymentListSettings[0];\n }\n\n const opts = this.getFilteredProducts(this.props.formProperties.products, paymentListSettings);\n\n const ptype = this.props.multiple.value === 'Yes' && this.props.paymentType.value !== 'subscription' ? 'checkbox' : 'radio';\n const requiredProducts = opts.filter(item => item.required === '1' && item.disabled !== 'hide');\n const allInputsDisabled = ptype === 'radio' && requiredProducts.length > 0;\n const productsWithBr = [];\n const lengthOfCategories = opts.reduce((acc, currentValue) => (currentValue.isCategory ? acc + 1 : acc), 0);\n let lineCounter = 0;\n let categoryIndex = 0;\n let productCounter = 0;\n try {\n // eslint-disable-next-line complexity\n const products = opts ? opts.map((p, pc) => {\n // skip disabled products\n if (p.disabled && p.disabled === 'hide') { return null; }\n let hasSpecialPricing = false;\n const highlight = (this.props.formProperties.highlightLine !== 'Disabled') ? 'hover-product-item' : '';\n let formProductImage = null;\n let formProductImageUrl = null;\n let imageClassName = '';\n let isStockAvailable = false;\n let sliderImage;\n const categoryIds = [];\n const isCategoriesLastProduct = typeof opts[pc].isCategory === 'undefined' && typeof opts[pc + 1] !== 'undefined' && typeof opts[pc + 1].isCategory !== 'undefined';\n const isProductFocused = String(this.state.focusedProductId) === String(p.pid);\n productCounter++;\n if (p.isCategory) {\n productCounter = 0;\n lineCounter = 0;\n categoryIndex++;\n activeProductCategory = p.cid;\n if (paymentListSettings && paymentListSettings.showCategoryTitle === 'Yes') {\n const isLastCategory = categoryIndex === lengthOfCategories;\n return (\n
\n \n { productName }\n \n \n { productDesc }\n \n
\n );\n } else {\n productNameHTML = (\n \n { subsBrainTreeaddOnsArray }\n
\n );\n }\n\n subscriptionText = (\n \n { productNameHTML }\n \n (\n { subsBrainTreeHasTrialPeriod }\n \n\n \n
\n \n );\n\n const recurringTimesSublabel = (\n \n {\n const firstChildElement = e.currentTarget.children[0];\n const isImageNull = firstChildElement.classList.contains('upload_image');\n if (!isImageNull) this.openToProductEditor(p.pid, e);\n }}\n >\n {\n const { formProperties: { uploadProductImageInline } } = this.props;\n uploadProductImageInline(e.target.files[0], e.target.id.split('input_pImage_')[1]);\n }}\n aria-label={`Upload Image: ${p.name}`}\n />\n )\n }\n {(this.props.enableLightBox && this.props.enableLightBox.value === '1' && imageClassName) ? : null}\n
\n \n \n
\n \n { this.props.passive && isProductFocused && this.props.isSelectedQuestion\n && ((!!Number(p.selected) && {productCounter})\n || (!Number(p.selected) && {productCounter}))}\n
\n \n {\n formProductImageUrl && (\n \n
\n )\n }\n {\n this.props.passive && formProductImage === null && (\n \n {this.renderDeleteButton(p.pid)}\n {this.renderSettingsButton(p.pid)}\n
\n \n \n {pc !== (opts.length - 1) && (\n \n )}\n \n );\n } else {\n let descriptionField;\n if (typeof p.description !== 'undefined') {\n descriptionField = (\n \n \n { subscriptionText }\n {descriptionField}\n \n {optionsArray}\n
\n \n );\n }\n return renderProduct;\n }) : null;\n if (products) {\n // eslint-disable-next-line no-restricted-syntax\n for (const el of products) {\n if (el) {\n productsWithBr.push(el);\n\n if (!isPaymentNewUi) {\n productsWithBr.push(brTag);\n }\n }\n }\n }\n } catch (e) {\n console.log(e);\n }\n return { products: productsWithBr, hasShipping };\n }\n\n isStockAvailable(productStocks, p) {\n if (!productStocks) { return false; }\n let answer = false;\n const productOptions = parseJSON(p.options);\n\n let hasUnlimitedProduct = false;\n if (Array.isArray(productOptions) && productOptions.length > 0) {\n let optionCount = 1;\n productOptions.forEach(po => {\n if (po.type === 'custom') {\n optionCount *= parseInt(po.properties.split('\\n').length, 10);\n }\n });\n\n hasUnlimitedProduct = optionCount !== productStocks.length;\n }\n\n const hasQuantityExist = p.hasQuantity === '1';\n if (p.hasExpandedOption === '1') { // SubProducts\n const minQuantity = hasQuantityExist ? getProductMinQuantity(productOptions) : 1;\n answer = productStocks.findIndex(ps => ps.available_stock >= minQuantity) !== -1;\n } else if (productOptions.length >= 2 || (productOptions.length > 1 && !hasQuantityExist)) { // Options\n const minQuantity = hasQuantityExist ? getProductMinQuantity(productOptions) : 1;\n answer = productStocks.findIndex(ps => ps.available_stock >= minQuantity) !== -1;\n } else if (hasQuantityExist && productOptions) { // Basic Product with Quantity\n const minQuantity = getProductMinQuantity(productOptions);\n answer = productStocks[0].available_stock >= minQuantity && productStocks[0].available_stock !== 0;\n } else { // Basic Product\n answer = productStocks[0].available_stock > 0;\n }\n\n return hasUnlimitedProduct ? true : answer;\n }\n\n handleCollapsible(product) {\n const { formProperties } = this.props;\n formProperties.toggleCategoryWrapper(product.cid);\n }\n\n renderAddButton() {\n if (this.isGatewayOriginatedSubscription()) { return null; }\n const { formProperties: { products, addProduct }, paymentType } = this.props;\n const addButtonText = paymentType.value === 'subscription' ? '+ Add Subscription' : '+ Add Product';\n // eslint-disable-next-line max-len\n const optionsDefaultVal = '[{\"type\":\"quantity\",\"properties\":\"1\\\\n2\\\\n3\\\\n4\\\\n5\\\\n6\\\\n7\\\\n8\\\\n9\\\\n10\",\"name\":\"Quantity\",\"defaultQuantity\":\"\",\"specialPricing\":false,\"specialPrices\":\"\",\"expanded\":false}]';\n return (\n this.props.passive\n && (\n \n
\n `,\n backdrop: true,\n deleteButtonText: 'Confirm',\n uid: 'multiple-category-remove-modal',\n additionalClasses: 'payment-category-modal',\n actions: [\n (\n ${product.name} belongs to the categories ${categoryText}
\nRemove this product:
\n \n\n
\n );\n } else {\n warningMessage = (\n \n {'You haven’t finished configuring this payment integration.'.locale() + ' '}\n {this.handlePaymentSettingsText(\"Go to Payment Settings to configure your payment details.\".locale())}\n
\n \n
\n );\n }\n\n return [this.props.isReusableConnectionEnabled ? null : warningMessage, isPaymentNewUi && this.renderAddButton()];\n }\n\n if (!this.props.isPaymentForm) {\n ProductContainer.staticVars.hidden = true;\n }\n\n return null;\n }\n\n const paymentListSettings = this.props.formProperties.paymentListSettings && typeof this.props.formProperties.paymentListSettings !== 'undefined' ?\n this.props.formProperties.paymentListSettings[0] : false;\n\n const showMinTotalOrderAmount = paymentListSettings !== 'false' && paymentListSettings.minTotalOrderAmount > 0 && paymentListSettings.showMinTotalOrderAmount === 'Yes';\n const minTotalOrderAmount = showMinTotalOrderAmount === true ? paymentListSettings.minTotalOrderAmount : 0;\n let minTotalOrderAmountField;\n if (minTotalOrderAmount) {\n minTotalOrderAmountField = (\n - \n {type !== 'control_payment' && (\n
- {'You haven’t finished configuring this payment integration.'.locale()} \n )}\n
- {'You haven\\'t added any products.'.locale()} \n
\n {this.handlePaymentSettingsText(\"Go to Payment Settings to configure your payment details and products.\".locale())}\n
\n \n {'This payment field will be seen on the form. '.locale()}\n
\n
\n {'This payment field will NOT be seen on the form.'.locale()}\n
\n
\n \n
\n
\n );\n const brTag = | \n \n | \n|
|---|---|
| \n {couponInput}\n | \n\n | \n
| \n \n | \n
;\n const couponContainerHiddenInput = ;\n couponContainerArray.push(couponContainer);\n\n if (!isPaymentNewUi) {\n couponContainerArray.push(brTag);\n }\n couponContainerArray.push(couponContainerHiddenInput);\n }\n const currencyVal = (this.props.currency && this.props.currency.value === 'EUR') ? 'comma' : 'point';\n const decimalMark = this.props.decimalMark ? this.props.decimalMark.value : currencyVal;\n\n const recurringPaymentsArray = [];\n if (this.props.paymentType && this.props.paymentType.value === 'subscription') {\n let recurringPayments;\n if (isPaymentNewUi) {\n recurringPayments = (\n
\n
\n );\n } else {\n recurringPayments = (\n \n \n {paymentStrings.recurringPayments.locale()}\n \n \n \n \n {paymentStrings.recurringPayments.locale()}\n
\n \n
\n \n
\n );\n } else {\n subTotalLabel2 = (\n \n \n {inlineSubTotal || paymentStrings.totalSubtotal.locale()}\n \n \n \n \n {inlineSubTotal || paymentStrings.totalSubtotal.locale()}\n
\n \n
\n \n
\n );\n } else {\n taxLabel1 = (\n \n \n {inlineTax || paymentStrings.taxTax.locale()}\n \n \n \n \n {inlineTax || paymentStrings.taxTax.locale()}\n
\n \n
\n \n
\n );\n } else {\n shippingLabel1 = (\n \n \n {inlineShipping || paymentStrings.shippingShipping.locale()}\n \n \n \n \n {inlineShipping || paymentStrings.shippingShipping.locale()}\n
\n \n
\n ;\n ProductContainer.staticVars.paymentLabels.push('totalTotal');\n let totalLabel;\n if (isPaymentNewUi) {\n totalLabel = (\n
\n
\n );\n } else {\n totalLabel = (\n \n \n \n {inlineTotal || paymentStrings.totalTotal.locale()}\n \n \n \n \n {inlineTotal || paymentStrings.totalTotal.locale()}\n
\n \n
\n \n
\n );\n }\n\n let returnFinalProductUI;\n if (isPaymentNewUi) {\n const renderFooter = () => {\n if (this.useAppUI) return null;\n\n return (\n - \n
- {'You haven’t finished configuring this payment integration.'.locale()} \n
\n {this.handlePaymentSettingsText('Go to Payment Settings to configure your payment details and products.'.locale())}\n
\n \n {couponContainerArray}\n
\n );\n };\n\n returnFinalProductUI = (\n \n {recurringPaymentsArray}\n {subTotalLabelArray}\n {taxLabelArray}\n {shippingLabelArray}\n {totalLabelArray}\n {minTotalOrderAmountField}\n
\n \n {passiveShowSingleInfo}\n {!this.props.isReusableConnectionEnabled && paypalWarningMessage}\n {products.products}\n {this.renderAddButton()}\n {renderFooter()}\n
\n );\n } else {\n returnFinalProductUI = (\n \n {passiveShowSingleInfo}\n {!this.props.isReusableConnectionEnabled && paypalWarningMessage}\n {products.products}\n {couponContainerArray}\n {recurringPaymentsArray}\n {subTotalLabelArray}\n {taxLabelArray}\n {shippingLabelArray}\n {totalLabelArray}\n {minTotalOrderAmountField}\n
\n );\n }\n // return [enableLightBox, products, couponContainerArray, subTotalLabelArray, shippingLabelArray, totalLabelArray];\n\n return returnFinalProductUI;\n }\n\n render() {\n const { formProperties, paymentType } = this.props;\n const isPaymentNewUi = this.isPaymentNewUi();\n const donationPart = this.props.paymentType && this.props.paymentType.value === 'donation' ? this.renderDonationPart() : null;\n const otherParts = donationPart === null ? this.renderOtherParts(isPaymentNewUi) : null;\n let sandboxMsg = null;\n const type = this.props.controlPaymentType;\n const gateway = this.props.controlPaymentType.replace('control_', '');\n\n let showProductSearch;\n let showProductSorting;\n let showCategory = null;\n let showCategoryTitle = null;\n let categories = null;\n const productCategories = [];\n // let showProductCatalog;\n const paymentListSettings = this.props.formProperties.paymentListSettings && typeof this.props.formProperties.paymentListSettings !== 'undefined' ?\n this.props.formProperties.paymentListSettings[0] : false;\n\n if (paymentListSettings) {\n showProductSearch = paymentListSettings && paymentListSettings.showSearch ? paymentListSettings.showSearch : 'No';\n showProductSorting = paymentListSettings && paymentListSettings.showSorting ? paymentListSettings.showSorting : 'No';\n showCategory = paymentListSettings.showCategory;\n showCategoryTitle = paymentListSettings.showCategoryTitle;\n categories = parseJSON(paymentListSettings.productCategories);\n\n // This code pieces will be refactored later.\n if (this.reorderedProducts.length > 0) {\n this.reorderedProducts.forEach((p) => {\n if (p.categoryName) { productCategories.push({ label: p.categoryName, value: p.cid }); }\n });\n } else if (categories && categories.length > 0 && formProperties.products) {\n const categoryIdsOfProducts = formProperties.products.map((p) => { return p.cid ? `${p.cid}` : undefined; });\n\n categories.forEach((category) => {\n if (category.id && categoryIdsOfProducts.includes(`${category.id}`)) {\n productCategories.push({ label: category.name, value: category.id });\n }\n });\n }\n }\n\n let productSearchInput;\n let productSortingDropdown;\n let isCustomAmountType = false;\n if (this.props.paymentType?.value === 'donation' || this.props.paymentType?.value === 'custom') {\n isCustomAmountType = true;\n }\n if (showProductSearch === 'Yes' && isCustomAmountType === false) {\n productSearchInput = (\n \n {'Sandbox mode is enabled for this payment. '.locale()}\n
\n );\n }\n\n let billingMessage = null;\n\n if (gateway === 'cybersource' && this.props.showBillingError && !this.props.isReusableConnectionEnabled) {\n billingMessage = (\n \n {this.handlePaymentSettingsText(`Address and email fields are required for CyberSource. Please make sure to map these fields from the Payment Settings menu. You can’t collect payments if you don’t include these fields.`.locale(), true)}\n
\n );\n }\n\n let usePaypalButton = null;\n if (this.props.paypalButton && this.props.paypalButton.value === 'Yes') {\n usePaypalButton = ;\n }\n let paypalExpressHiddenInput = null;\n if (type === 'control_paypalexpress') {\n paypalExpressHiddenInput = ;\n }\n let hr = null;\n if (['authnet', 'paypalpro', 'stripe', 'paymill', 'braintree', 'square', 'eway', 'bluepay', 'stripeACH', 'stripeACHManual', 'paysafe', 'iyzico'].indexOf(gateway) > -1) {\n hr = ;\n if (this.props.passive && typeof jotFormxds === 'undefined') {\n loadScript('/js/libraries/xds-server/jotFormxds.js');\n loadScript('/js/wizards/stripeWizard.js');\n }\n }\n\n return (\n
\n {\n ProductContainer.staticVars.hidden !== true &&\n 0 ? this.reorderedProducts : this.props.formProperties.products} />\n {this.props.isReusableConnectionEnabled && this.props.passive && (\n 0}\n hasGateway={type !== 'control_payment'}\n hasConnection={type !== 'control_payment' && this.props.paymentConnectionID && this.props.paymentConnectionID !== '0'}\n openPaymentConnectionModal={async () => {\n const { openPaymentConnectionModal, formProperties: { updateRightPanelMode, rightPanelToggle } } = this.props;\n updateRightPanelMode('paymentproperties', true);\n rightPanelToggle(true);\n await openPaymentConnectionModal();\n }}\n openPaymentPropertiesPanel={() => {\n const { formProperties: { updateRightPanelMode, rightPanelToggle } } = this.props;\n updateRightPanelMode('paymentproperties', true);\n rightPanelToggle(true);\n }}\n isPaymentGatewayConfigured={this.props.isPaymentGatewayConfigured}\n paymentType={paymentType.value}\n />\n )}\n { donationPart }\n { otherParts }\n { paypalExpressHiddenInput }\n { hr }\n
\n );\n }\n\n isPaymentNewUi() {\n const { formProperties, themeVersion } = this.props;\n const isNewPaymentUi = formProperties && formProperties.newPaymentUIForNewCreatedForms === 'Yes';\n const isComparePaymentForm = formProperties && formProperties.comparePaymentForm === 'v1';\n const isUpcomingTheme = themeVersion === 'v2';\n\n return isNewPaymentUi || isComparePaymentForm || isUpcomingTheme;\n }\n\n isProductActive(categoryID) {\n const { formProperties } = this.props;\n const { paymentListSettings } = formProperties;\n\n if (paymentListSettings && paymentListSettings[0] && paymentListSettings[0].productCategories && paymentListSettings[0].productCategories.length > 0) {\n let productCategories = paymentListSettings[0].productCategories;\n if (typeof productCategories === 'string') productCategories = JSON.parse(productCategories);\n\n const productCategory = productCategories.find(element => element.id === categoryID);\n\n if (productCategory && productCategory.isWrapped === 'Yes') return false;\n }\n\n return true;\n }\n}\n\nProductContainer.getState = () => {\n return ProductContainer.staticVars.paymentLabels;\n};\n\nProductContainer.getHidden = () => {\n return ProductContainer.staticVars.hidden;\n};\n\nProductContainer.getScript = (prop) => {\n const opts = prop.formProperties.products || [];\n\n let script = '';\n if (prop.paymentType?.value !== 'donation') {\n const decimalMark = prop.decimalMark && prop.decimalMark.value === 'comma' ? 'comma' : 'point';\n const paymentListSettings = prop.formProperties.paymentListSettings && prop.formProperties.paymentListSettings[0];\n const showCategory = paymentListSettings ? paymentListSettings.showCategory === 'Yes' : false;\n const showCategoryTitle = paymentListSettings ? paymentListSettings.showCategoryTitle === 'Yes' : false;\n const connectedProducts = {};\n const connectedProductsMultiple = {};\n let productIDS = null;\n\n if (showCategory) {\n productIDS = {};\n\n opts.forEach((p) => {\n if (!Object.values(ProductContainer.staticVars.productID).includes(`${prop.qid.value}_${p.pid}`)) { return false; }\n const productConnectedProducts = parseJSON(p.connectedProducts);\n if (Array.isArray(productConnectedProducts) && productConnectedProducts.length > 0) {\n connectedProductsMultiple[p.pid] = productConnectedProducts;\n\n productConnectedProducts.forEach((c) => {\n if (\n Object.values(connectedProducts).indexOf(c) === -1 &&\n Object.keys(connectedProducts).indexOf(c) === -1 &&\n Object.values(ProductContainer.staticVars.productID).includes(`${prop.qid.value}_${c}`)\n ) {\n connectedProducts[c] = p.pid;\n }\n });\n }\n });\n\n Object.values(ProductContainer.staticVars.productID).forEach((p, index) => {\n const regExp = new RegExp('input_[0-9]*_');\n const pid = p.replace(regExp, '');\n\n if (!Object.keys(connectedProducts).includes(pid)) {\n productIDS[index] = p;\n }\n });\n\n Object.keys(ProductContainer.staticVars.totalCounter).forEach((t) => {\n const regExp = new RegExp('input_[0-9]*_');\n const regExp2 = new RegExp('_.+');\n const underscoreLength = t.split('_').length;\n let pid = t.replace(regExp, '');\n\n // If the product has subproducts.\n if (underscoreLength > 2) {\n pid = pid.replace(regExp2, '');\n }\n\n if (Object.keys(connectedProducts).includes(pid)) {\n delete ProductContainer.staticVars.totalCounter[t];\n }\n });\n }\n\n script += ` productID = ${JSON.stringify(productIDS || ProductContainer.staticVars.productID)};\\n`; // see productID\n script += ` paymentType = \"${prop.paymentType?.value}\";\\n`;\n script += ` JotForm.setCurrencyFormat('${prop.currency.value}',${prop.useDecimal ? prop.useDecimal.value === 'Yes' : 'false'}, '${decimalMark}');\\n`;\n script += ` JotForm.totalCounter(${JSONUnicodeEncode(JSON.stringify(ProductContainer.staticVars.totalCounter))});\\n`;\n script += \" $$('.form-product-custom_quantity').each(function(el, i){el.observe('blur', function(){isNaN(this.value) || this.value < 1 ? this.value = '0' : this.value = parseInt(this.value)})});\\n\"; // eslint-disable-line max-len\n script += \" $$('.form-product-custom_quantity').each(function(el, i){el.observe('focus', function(){this.value == 0 ? this.value = '' : this.value})});\\n\";\n\n if (showCategory) {\n script += `JotForm.paymentCategoryHandler(${showCategory}, ${showCategoryTitle}, ${JSON.stringify(connectedProducts)}, ${JSON.stringify(connectedProductsMultiple)});\\n`;\n }\n\n if (Object.keys(ProductContainer.staticVars.orderedSubproductOptionNames).length > 0) {\n script += `if(typeof PaymentStock !== \"undefined\") { PaymentStock.orderedSubproductOptionNames = ${JSONUnicodeEncode(JSON.stringify(ProductContainer.staticVars.orderedSubproductOptionNames))} } \\n`;\n }\n }\n\n if (prop.type.value === 'control_stripe') {\n const publishableKey = (prop.apiKey.value.length > 0 || !prop.connect.value.stripeConnectLoaded) ? prop.publishableKey.value : prop.connect.value.publishableKey;\n const cleanPublishableKey = publishableKey.replace(/\\s+/g, '');\n const addressQid = (typeof prop.billingAdd !== 'undefined') ? prop.billingAdd.value : 'none';\n const shippingQid = (typeof prop.shippingAdd !== 'undefined') ? prop.shippingAdd.value : 'none';\n const emailQid = (typeof prop.emailField !== 'undefined') ? prop.emailField.value : 'none';\n const phoneQid = (typeof prop.phoneField !== 'undefined') ? prop.phoneField.value : 'none';\n const customFieldQid = (typeof prop.customDataField !== 'undefined') ? prop.customDataField.value : 'none';\n\n script += ` JotForm.setStripeSettings('${cleanPublishableKey}', '${addressQid}', '${shippingQid}', '${emailQid}', '${phoneQid}', '${customFieldQid}');\\n`;\n }\n\n if (prop.type.value === 'control_eway') {\n script += ` JotForm.ewayEncryptKey = '${prop.encryptionKey.value}';\\n`;\n }\n\n if (prop.type.value === 'control_bluepay') {\n script += ` JotForm.bluepayAccountId = '${prop.accountId.value}';\\n`;\n script += ` JotForm.bluepayApiSecret = '${md5(prop.apiSecret.value + prop.accountId.value)}';\\n`;\n }\n\n const showSingle = prop.showSingle && (prop.showSingle.value === true || prop.showSingle.value === 'true' || prop.showSingle.value === '1');\n\n if (opts && (opts.length > 0 || showSingle) && ((prop.enableLightBox && prop.enableLightBox.value === '1') || (!prop.enableLightBox))) {\n script += ` JotForm.handleProductLightbox();\\n`;\n }\n\n // Set initial values\n let initialProps = [];\n const initialPropValues = {};\n\n if (prop.type.value === 'control_bluesnap') {\n initialProps = ['sca', 'sandbox', 'currency', 'emailField', 'phoneField', 'billingAddress'];\n } else if (prop.type.value === 'control_paypalcomplete') {\n initialProps = [\n 'styleColor', 'styleShape', 'styleSize', 'styleLabel', 'styleLayout', 'payLaterEnabled'\n ];\n } else if (prop.type.value === 'control_paypalSPB') {\n initialProps = [\n 'payLaterEnabled', 'payLaterLayout', 'payLaterTextColor', 'payLaterTextSize', 'payLaterLogoType', 'payLaterLogoPosition', 'payLaterRatio', 'payLaterBackgroundColor'\n ];\n } else if (prop.type.value === 'control_mollie') {\n initialProps = ['sandbox', 'currency'];\n }\n\n if (initialProps.length > 0) {\n Object.keys(prop).forEach((propKey) => {\n if (initialProps.includes(propKey) && prop[propKey] && prop[propKey].value) {\n initialPropValues[propKey] = prop[propKey].value;\n }\n });\n\n // Note for Developers: If we need to add coupon in paymentFormProperties, please be careful. The json parse error occurred at jotForm.js\n initialPropValues.paymentFormProperties = {\n products: prop.formProperties.products\n };\n }\n\n if (Object.keys(initialPropValues).length > 0) {\n script += ` JotForm.paymentProperties = ${JSONUnicodeEncode(JSON.stringify(initialPropValues))}\\n`;\n }\n\n return script;\n};\n\nProductContainer.checkRenderStatus = (prop) => {\n const opts = prop.formProperties.products || false;\n if (!prop.inlineEditClass && prop.paymentType.value !== 'donation' && (opts === false || opts.length === 0) && !prop.isPaymentForm) {\n return false;\n }\n return true;\n};\n\nProductContainer.staticVars = {\n totalCounter: {},\n productID: {},\n hidden: false,\n paymentLabels: [],\n orderedSubproductOptionNames: {},\n};\n\nProductContainer.propTypes = {\n id: PropTypes.shape({\n value: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.number\n ])\n }),\n compoundHint: PropTypes.shape({\n value: PropTypes.string\n }),\n qid: PropTypes.shape({\n value: PropTypes.string\n }),\n qname: PropTypes.shape({\n value: PropTypes.string\n }),\n paymentType: PropTypes.shape({\n value: PropTypes.string\n }),\n donationAmountField: PropTypes.shape({\n value: PropTypes.string\n }),\n donationText: PropTypes.shape({\n value: PropTypes.string\n }),\n currency: PropTypes.shape({\n value: PropTypes.string\n }),\n useDecimal: PropTypes.shape({\n value: PropTypes.string\n }),\n suggestedDonation: PropTypes.shape({\n value: PropTypes.string\n }),\n requireMinimum: PropTypes.shape({\n value: PropTypes.string\n }),\n multiple: PropTypes.shape({\n value: PropTypes.string\n }),\n paypalButton: PropTypes.shape({\n value: PropTypes.string\n }),\n controlPaymentType: PropTypes.string,\n passive: PropTypes.bool,\n isSelectedQuestion: PropTypes.bool,\n inlineEditClass: PropTypes.elementType,\n digitalGoods: PropTypes.shape({\n value: PropTypes.string\n }),\n decimalMark: PropTypes.shape({\n value: PropTypes.string\n }),\n sandbox: PropTypes.shape({\n value: PropTypes.string\n }),\n testmodeAuth: PropTypes.shape({\n value: PropTypes.string\n }),\n allowTest: PropTypes.shape({\n value: PropTypes.bool\n }),\n showSingle: PropTypes.shape({\n value: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.bool\n ])\n }),\n enableLightBox: PropTypes.shape({\n value: PropTypes.string\n }),\n showTotal: PropTypes.shape({\n value: PropTypes.string\n }),\n showStripeCoupons: PropTypes.shape({\n value: PropTypes.string\n }),\n showBillingError: PropTypes.shape({\n value: PropTypes.bool\n }),\n type: PropTypes.shape({\n value: PropTypes.string\n }),\n themeVersion: PropTypes.string,\n formProperties: PropTypes.shape({\n useStripeCoupons: PropTypes.string,\n showStripeCoupons: PropTypes.string,\n updateQuestionProperties: PropTypes.func,\n coupons: PropTypes.array,\n paymentListSettings: PropTypes.string,\n taxes: PropTypes.array,\n products: PropTypes.array,\n highlightLine: PropTypes.string,\n paymentStrings: PropTypes.array\n }),\n cdnconfig: PropTypes.shape({\n CDN: PropTypes.string\n }),\n merchantId: PropTypes.shape({\n value: PropTypes.string\n }),\n stocks: PropTypes.arrayOf(PropTypes.shape()),\n accountType: PropTypes.string,\n nameAPM: PropTypes.shape({\n value: PropTypes.string\n }),\n isOpenedInPortal: PropTypes.bool, // Rendered in App context as a ProductList element or a question in standalone form\n isPaymentForm: PropTypes.bool, // Rendered as PL element in App context\n isPortalProductListElement: PropTypes.bool // Rendered as PL element in App Builder context\n // isCheckoutForm: PropTypes.bool // Check if checkout form from App\n};\n\nProductContainer.defaultProps = {\n isOpenedInPortal: false,\n isPaymentForm: false,\n isPortalProductListElement: false\n // isCheckoutForm: false\n};\n","import PropTypes from 'prop-types';\nimport React, { Component } from 'react';\n\nexport default class PaymentAPMList extends Component {\n render() {\n const { gateway, label, id, image, field, tableExist, singlePM, handleWarnings } = this.props;\n let { customClass } = this.props;\n customClass = customClass ? customClass : '';\n\n if (singlePM === false) {\n customClass += ' multiple-pm';\n }\n\n let content = field;\n if (tableExist) {\n content = (\n \n { (showCategory === 'Yes' && paymentType && paymentType.value === 'product') &&
\n }\n { !this.props.isReusableConnectionEnabled && sandboxMsg }\n { billingMessage }\n { usePaypalButton }\n \n {apmImage}\n
\n );\n }\n}\n\nPaymentAPMList.propTypes = {\n gateway: PropTypes.string,\n label: PropTypes.string,\n image: PropTypes.string,\n customClass: PropTypes.string,\n handleWarnings: PropTypes.string,\n singlePM: PropTypes.bool,\n tableExist: PropTypes.bool,\n id: PropTypes.string,\n field: PropTypes.node\n};\n\n","/* global document window */\nimport PropTypes from 'prop-types';\nimport React, { Component } from 'react';\nimport { subLabel } from '@jotforminc/form-common';\nimport { STATES } from '@jotforminc/constants';\nimport { addValidation, classNames, specialOptions, customPaymentSpecialOptions } from '../helpers/Utils';\nimport BaseInput from '../helpers/BaseInput';\nimport SubLabel from '../helpers/SubLabel';\nimport QuestionProps from '../helpers/QuestionProps';\nimport PaymentAPMList from './PaymentAPMList';\nimport { LogoCashappLogomarkColor, LogoApplepayLogomarkColor, LogoGooglepayLogomarkColor, LogoSquareAchLogomarkDark, LogoAfterpayLogomarkColor, LogoAfterpayLogomarkDark\n} from '@jotforminc/svg-icons';\nexport default class PaymentCreditCardAndAddress extends Component {\n\n ccAllowTest() {\n return ();\n }\n\n hideAddressFieldInAppUI() {\n const { type } = this.props;\n const paymentsWithJoinedAddressField = [\n 'control_authnet',\n 'control_cardconnect',\n 'control_eway',\n 'control_payjunction',\n 'control_paypalpro',\n 'control_paysafe',\n 'control_iyzico',\n 'control_braintree'\n ];\n return this.isAppUI() && paymentsWithJoinedAddressField.includes(type.value);\n }\n\n isAppUI() {\n const { isOpenedInPortal, isPaymentForm, type } = this.props;\n\n // Stripe CC Fields get their own sublabels.\n // For design decision for cc fields is applied to Stripe forms to fix sublabel consistency issues on Stripe payment forms.\n if (type.value === 'control_stripe') {\n return true;\n }\n return isOpenedInPortal && isPaymentForm;\n }\n\n renderCCZipcode() {\n const className = addValidation(classNames.textbox, this.props);\n return (\n \n \n
\n );\n }\n\n renderSquareClearpay() {\n return (\n \n {'After submitting the form, you will be redirected to Afterpay to complete the payment.'.locale()}\n
\n \n \n
\n );\n }\n\n renderSquareACH() {\n const achAccountHolderNameField = this.renderEcNameOnAccount('square');\n\n return (\n \n {'After submitting the form, you will be redirected to Clearpay to complete the payment.'.locale()}\n
\n \n \n
\n );\n }\n\n renderApplePay() {\n return (\n \n { finalDescription }\n
\n \n \n
\n );\n }\n\n renderGooglePay() {\n return (\n \n {'After submitting the form, you will be redirected to Apple Pay to complete the payment.'.locale()}\n
\n \n \n
\n );\n }\n\n renderAltDiv(gateway, type, style, labelValue) {\n return (\n \n {'After submitting the form, you will be redirected to Google Pay to complete the payment.'.locale()}\n
\n {'Email'.locale()}
\n{'Email'.locale()}
\n{'Email'.locale()}
\n{'Email'.locale()}
\n\n {'Germany: '}\n \n {' Finland and Australia: '}\n \n
\n\n \n\n {/* Klarna: Slice It */}\n \n {'Email'.locale()}
\n{'Email'.locale()}
\n{'Email'.locale()}
\n{title}
\n {paymentMethodsDOM}\n\n
\n );\n }\n\n return body;\n }\n\n renderBraintree() {\n const gateway = this.props.controlPaymentType.replace('control_', '');\n const ccTitle = this.props.ccTitle && this.props.ccTitle.value ? this.props.ccTitle.value : 'Credit Card';\n const ccFirstName = this.renderCCFirstName();\n const ccLastName = this.renderCCLastName();\n const reqBillingAddr = this.props.requireBillingAddr;\n const altCcNumber = this.renderAltDiv(gateway, 'cc_number', { width: '147px' }, 'cc_number');\n const altCcCcv = this.renderAltDiv(gateway, 'cc_ccv', { width: '120px' }, 'cc_ccv');\n const altCcExp = this.renderAltDiv(gateway, 'exp_month', { width: '147px' }, 'exp_month');\n const altCcLastField = this.renderAltDiv(gateway, 'exp_year', { width: '120px' }, 'exp_year');\n const billingAddressHeader = reqBillingAddr && reqBillingAddr.value === 'Yes' ? this.renderBillingAddressHeader() : null;\n const addressPart = reqBillingAddr && reqBillingAddr.value === 'Yes' ? this.renderAddressPart() : null;\n let inlineCCTitle;\n if (this.props.inlineEditClass) {\n inlineCCTitle = React.createElement(this.props.inlineEditClass, {\n id: this.props.id.value,\n propPath: 'ccTitle',\n text: ccTitle,\n });\n }\n\n return (\n \n
\n {title}
\n {paymentMethodsDOM}\n\n
\n );\n }\n\n renderWepayTemplate() {\n const ccAllowTest = this.ccAllowTest();\n const ccEmail = this.renderCCEmail();\n const ccZipcode = this.renderCCZipcode();\n const ccTitle = this.props.ccTitle && this.props.ccTitle.value ? this.props.ccTitle.value : 'Credit Card';\n\n const ccFirstName = this.renderCCFirstName();\n const ccLastName = this.renderCCLastName();\n\n const ccNumber = this.renderCCNumber();\n const ccCcv = this.renderCCCCV();\n const ccExpMonth = this.renderCcExpMonth();\n const ccExpYear = this.renderCcExpYear();\n\n let inlineCCTitle;\n if (this.props.inlineEditClass) {\n inlineCCTitle = React.createElement(this.props.inlineEditClass, {\n id: this.props.id.value,\n propPath: 'ccTitle',\n text: ccTitle,\n });\n }\n return (\n \n \n \n { hostedFields }\n { paypal3dAuthModal }\n \n \n
\n \n { ccAllowTest }\n \n \n \n \n { ccEmail }\n \n \n { ccZipcode }\n \n \n \n \n\n \n \n \n \n { inlineCCTitle || ccTitle }\n \n \n \n \n { ccFirstName }\n \n \n { ccLastName }\n \n \n \n \n { ccNumber }\n \n \n { ccCcv }\n \n \n \n \n { ccExpMonth }\n \n \n { ccExpYear }\n \n \n \n \n
\n );\n }\n\n renderEcheckTemplate() {\n const ecTitle = this.props.ecTitle && this.props.ecTitle.value ? this.props.ecTitle.value : 'eCheck.Net';\n\n const ecRoutingNumber = this.renderEcRoutingNumber();\n const ecAccountNumber = this.renderEcAccountNumber();\n const ecNameOnAccount = this.renderEcNameOnAccount();\n const ecBankName = this.renderEcBankName();\n const ecBankAccountType = this.renderEcBankAccountType();\n\n let inlineECTitle;\n if (this.props.inlineEditClass) {\n inlineECTitle = React.createElement(this.props.inlineEditClass, {\n id: this.props.id.value,\n propPath: 'ecTitle',\n text: ecTitle,\n });\n }\n return (\n \n \n \n \n \n { inlineECTitle || ecTitle }\n \n \n \n \n { ecBankAccountType }\n \n \n \n \n { ecRoutingNumber }\n \n \n { ecAccountNumber }\n \n \n \n \n { ecNameOnAccount }\n \n \n { ecBankName }\n \n \n \n \n
\n );\n }\n\n renderStripeACHManualTemplate() {\n const ecTitle = this.props.ecTitle && this.props.ecTitle.value ? this.props.ecTitle.value : 'Bank Account';\n const ecEmail = this.renderCCEmail();\n const ecRoutingNumber = this.renderEcRoutingNumber();\n const ecAccountNumber = this.renderEcAccountNumber();\n const ecNameOnAccount = this.renderEcNameOnAccount();\n const ecBankAccountType = this.renderEcBankAccountType();\n\n const depositA = this.renderDepositA();\n const depositB = this.renderDepositB();\n\n let inlineECTitle;\n if (this.props.inlineEditClass) {\n inlineECTitle = React.createElement(this.props.inlineEditClass, {\n id: this.props.id.value,\n propPath: 'ecTitle',\n text: ecTitle,\n });\n }\n return (\n \n \n \n \n \n Verify Your Account\n \n \n \n \n Stripe verifies your account by depositing two small amounts into your bank account.\n Enter these two deposits into the text boxes below, and click on the Verify button.\n \n \n \n \n {'First Deposit:'.locale()}\n \n \n {depositA}\n \n \n \n \n {'Second Deposit:'.locale()}\n \n \n {depositB}\n \n \n \n \n \n \n \n \n \n \n \n \n \n {ecEmail}\n \n \n \n \n { inlineECTitle || ecTitle }\n \n \n \n \n { ecRoutingNumber }\n \n \n { ecAccountNumber }\n \n \n \n \n { ecNameOnAccount }\n \n \n { ecBankAccountType }\n \n \n \n \n
\n );\n }\n\n renderTemplateWithEmail() {\n const ccEmail = this.renderCCEmail();\n const ccTitle = this.props.ccTitle && this.props.ccTitle.value ? this.props.ccTitle.value : 'Credit Card';\n\n const ccFirstName = this.renderCCFirstName();\n const ccLastName = this.renderCCLastName();\n\n const ccNumber = this.renderCCNumber();\n const ccCcv = this.renderCCCCV();\n const ccExpMonth = this.renderCcExpMonth();\n const ccExpYear = this.renderCcExpYear();\n\n let inlineCCTitle;\n if (this.props.inlineEditClass) {\n inlineCCTitle = React.createElement(this.props.inlineEditClass, {\n id: this.props.id.value,\n propPath: 'ccTitle',\n text: ccTitle,\n });\n }\n return (\n \n \n \n \n \n { ccEmail }\n \n \n \n \n\n \n \n \n \n { inlineCCTitle || ccTitle }\n \n \n \n \n { ccFirstName }\n \n \n { ccLastName }\n \n \n \n \n { ccNumber }\n \n \n { ccCcv }\n \n \n \n \n { ccExpMonth }\n \n \n { ccExpYear }\n \n \n \n \n
\n );\n }\n\n renderStripeSCATemplate() {\n const { paymentType, emailField, isBillingInformation } = this.props;\n const isBuilder = typeof window !== 'undefined';\n\n let isEnablePaymentLink; // toggle check for Payment Link\n let additionalStyle; // some styling for @builder/credit card fields\n\n if(this.props.stripeLink) {\n isEnablePaymentLink = typeof this.props.stripeLink.value === 'undefined' ? 'No' : this.props.stripeLink.value;\n additionalStyle = isBuilder && isEnablePaymentLink === 'Yes' ? { display: 'flex', width: '100%' } : null;\n }\n\n let ccEmail = null;\n if (paymentType.value === 'subscription') {\n const placeholder = subLabel(this.props, 'cc_email').text ? subLabel(this.props, 'cc_email').text : 'Email'.locale();\n ccEmail = this.renderCCEmail(placeholder);\n if (isBillingInformation && isBillingInformation.value === 'Yes' && !(typeof emailField.value === 'undefined' || emailField.value === '' || emailField.value === 'none')) {\n ccEmail = null;\n }\n }\n const ccTitle = this.props.ccTitle && this.props.ccTitle.value && isEnablePaymentLink === 'Yes' ? 'Payment Details' : this.props.ccTitle.value;\n\n const ccFirstName = this.renderCCFirstName();\n const ccLastName = this.renderCCLastName();\n\n const ccNumber = this.renderCCNumber(true);\n const ccCcv = this.renderCCCCV(true);\n\n const ccExpMonthWithYear = this.renderCardExpiry();\n\n let inlineCCTitle;\n if (this.props.inlineEditClass) {\n inlineCCTitle = React.createElement(this.props.inlineEditClass, {\n id: this.props.id.value,\n propPath: 'ccTitle',\n text: isEnablePaymentLink === 'Yes' ? 'Payment Details' : ccTitle,\n });\n }\n\n const stripeDummy = (\n \n \n \n \n \n { ccEmail !== null && (\n ccEmail\n )}\n \n \n \n \n\n \n \n \n \n { inlineCCTitle || ccTitle }\n \n \n \n \n { ccFirstName }\n \n \n { ccLastName }\n \n \n { isBuilder && isEnablePaymentLink === 'Yes' && // toggle & builder check & condition will be removed\n \n \n ![\"Lock](\"https://cdn.jotfor.ms/assets/img/payments/secure.svg\")
\n {'Secure, 1-click checkout with Link'.locale()}\n \n \n }\n \n \n { ccNumber }\n \n \n { isBuilder && isEnablePaymentLink === 'Yes' ? ccExpMonthWithYear : ''}\n { ccCcv }\n \n \n \n { isEnablePaymentLink !== 'Yes' || !isBuilder ? // condition will be removed when we give access to all users\n \n { ccExpMonthWithYear }\n :\n ''\n }\n \n { stripeDummy }\n \n \n { isBuilder && isEnablePaymentLink === 'Yes' && // condition will be removed when we give access to all users\n \n \n { this.renderCountry() }\n \n \n }\n \n \n
\n );\n }\n\n // dummy field for APMs\n renderApm() {\n const { controlPaymentType, nameAPM } = this.props;\n const gateway = controlPaymentType.replace('control_', '');\n\n let apmList = [\n {\n id: 'creditcard',\n name: 'Credit Card'.locale(),\n image: 'https://cdn.jotfor.ms/assets/img/payments/CC_icon.png'\n }\n ];\n\n if (nameAPM.value === 'appleAndGooglePay') {\n apmList = [\n ...apmList,\n {\n id: 'applePay',\n name: 'Apple Pay'.locale(),\n image: 'https://cdn.jotfor.ms/assets/img/payments/apple_icon_black.png'\n },\n {\n id: 'googlePay',\n name: 'Google Pay'.locale(),\n image: 'https://cdn.jotfor.ms/assets/img/payments/googlePay.png'\n }\n ];\n }\n\n const apmArr = apmList.map((item) => {\n return (\n \n {'Secure, 1-click checkout with Link'.locale()}\n \n
\n );\n }\n\n render() {\n let renderFinal;\n const { nameAPM } = this.props;\n\n switch (this.props.controlPaymentType) {\n case 'control_braintree':\n renderFinal = this.renderBraintree();\n break;\n case 'control_square':\n renderFinal = this.renderSquare();\n break;\n case 'control_sensepass':\n renderFinal = this.renderSensepass();\n break;\n case 'control_mollie':\n renderFinal = this.renderMollieCardFields();\n break;\n case 'control_stripe':\n renderFinal = (\n \n
\n {'Payment Methods'.locale()}
\n {apmArr}\n\n
\n );\n break;\n case 'control_authnet':\n case 'control_cardconnect':\n case 'control_eway':\n case 'control_bluepay':\n case 'control_payjunction':\n case 'control_iyzico':\n case 'control_paysafe':\n renderFinal = this.renderTemplate1();\n break;\n case 'control_pagseguro':\n renderFinal = this.renderPagseguroTemplate();\n break;\n\n case 'control_paypalpro':\n renderFinal = this.renderTemplatePayPalPro();\n break;\n case 'control_paypalcomplete':\n renderFinal = this.renderPPCPcardFields();\n break;\n case 'control_chargify':\n renderFinal = this.renderTemplateWithEmail();\n break;\n\n case 'control_firstdata':\n case 'control_bluesnap':\n case 'control_worldpayus':\n case 'control_moneris':\n case 'control_cybersource':\n renderFinal = this.renderRegularTemplate();\n break;\n\n case 'control_wepay':\n renderFinal = this.renderWepayTemplate();\n break;\n\n case 'control_echeck':\n renderFinal = this.renderEcheckTemplate();\n break;\n case 'control_stripeACHManual':\n renderFinal = this.renderStripeACHManualTemplate();\n break;\n case 'control_stripeCheckout':\n case 'control_payment':\n renderFinal = this.props.passive && nameAPM ? this.renderApm(nameAPM) : null;\n break;\n default:\n }\n\n return renderFinal;\n }\n}\n\nPaymentCreditCardAndAddress.propTypes = {\n qid: PropTypes.shape({\n value: PropTypes.string\n }),\n id: PropTypes.shape({\n value: PropTypes.string\n }),\n type: PropTypes.shape({\n value: PropTypes.string\n }),\n qname: PropTypes.shape({\n value: PropTypes.string\n }),\n ccTitle: PropTypes.shape({\n value: PropTypes.string\n }),\n showCard: PropTypes.shape({\n value: PropTypes.string\n }),\n showCashApp: PropTypes.shape({\n value: PropTypes.string\n }),\n showAfterpay: PropTypes.shape({\n value: PropTypes.string\n }),\n showClearpay: PropTypes.shape({\n value: PropTypes.string\n }),\n showGooglePay: PropTypes.shape({\n value: PropTypes.string\n }),\n showApplePay: PropTypes.shape({\n value: PropTypes.string\n }),\n nameAPM: PropTypes.shape({\n value: PropTypes.string\n }),\n isOpenedInPortal: PropTypes.shape({\n value: PropTypes.bool\n }),\n isPaymentForm: PropTypes.shape({\n value: PropTypes.bool\n }),\n ecTitle: PropTypes.shape({\n value: PropTypes.string\n }),\n addressTitle: PropTypes.shape({\n value: PropTypes.string\n }),\n allowTest: PropTypes.shape({\n value: PropTypes.bool\n }),\n paypalLink: PropTypes.shape({\n value: PropTypes.string\n }),\n paymentMethod: PropTypes.shape({\n value: PropTypes.string\n }),\n subfields: PropTypes.shape({\n value: PropTypes.string\n }),\n states: PropTypes.shape({\n value: PropTypes.string\n }),\n selectedCountry: PropTypes.shape({\n value: PropTypes.string\n }),\n compoundHint: PropTypes.shape({\n value: PropTypes.string\n }),\n requireBillingAddr: PropTypes.shape({\n value: PropTypes.string\n }),\n paymentType: PropTypes.shape({\n value: PropTypes.string\n }),\n mollieAPM: PropTypes.shape({\n value: PropTypes.string\n }),\n emailField: PropTypes.shape({\n value: PropTypes.string\n }),\n showFastlane: PropTypes.shape({\n value: PropTypes.string\n }),\n formID: PropTypes.number,\n controlPaymentType: PropTypes.string,\n passive: PropTypes.bool,\n inlineEditClass: PropTypes.elementType,\n isBillingInformation: PropTypes.shape({\n value: PropTypes.string\n })\n};\n","import React, { Component } from 'react';\nimport ProductContainer from '../helpers/ProductContainer';\nimport PaymentCreditCardAndAddress from '../helpers/PaymentCreditCardAndAddress';\n\nexport default class Authnet extends Component {\n render() {\n if (!ProductContainer.checkRenderStatus(this.props)) {\n ProductContainer.staticVars.hidden = true;\n return '';\n }\n const paymentCreditCardAndAddress = \n {this.renderStripeSCATemplate()}\n
\n \n
\n );\n }\n}\n\nAuthnet.getState = (prop) => {\n return ProductContainer.getState(prop);\n};\n\nAuthnet.getScript = (prop) => {\n return ProductContainer.getScript(prop);\n};\n\nAuthnet.getHidden = (prop) => {\n return ProductContainer.getHidden(prop);\n};\n","import PropTypes from 'prop-types';\nimport React, { Component } from 'react';\nimport BaseInput from '../helpers/BaseInput';\nimport { addValidation, classNames, subLabelSingle } from '../helpers/Utils';\nimport SubLabel from '../helpers/SubLabel';\nimport QuestionProps from '../helpers/QuestionProps';\n\nexport default class Autocomp extends Component {\n\n render() {\n const className = `${addValidation(classNames.textbox, this.props)} form-autocomplete`;\n const fuzzySearch = this.props.fuzzySearch && this.props.fuzzySearch.value ? this.props.fuzzySearch.value : null;\n const maxMatches = this.props.maxMatches && this.props.maxMatches.value ? this.props.maxMatches.value : null;\n // autocomplete not added -> off added by Base Input\n const { value: qidValue } = this.props.qid;\n const subLabelObj = subLabelSingle(this.props, qidValue);\n return (\n \n \n \n \n \n \n
\n );\n }\n}\n\nexport default Appointment;\n\nAppointment.getState = () => {\n return {};\n};\n\nAppointment.getScript = (props) => {\n return `\n JotForm.calendarMonths = ${JSON.stringify(props.months.value)};\n JotForm.appointmentCalendarMonths = ${JSON.stringify(props.months.value)};\n JotForm.appointmentCalendarDays = ${JSON.stringify(props.days.value)};\n JotForm.calendarOther = ${JSON.stringify('Today')};\n window.initializeAppointment(${JSONUnicodeEncode(JSON.stringify(props))});\n `;\n};\n\nconst ValueType = oneOfType([bool, string, number]);\n\n/* eslint-disable react/no-unused-prop-types */\nAppointment.propTypes = {\n id: shape({\n id: ValueType\n }),\n qid: shape({\n qid: ValueType\n }),\n qname: shape({\n qname: ValueType\n }),\n slotDuration: shape({\n slotDuration: ValueType\n }),\n timezone: shape({\n timezone: ValueType\n }),\n required: shape({\n required: ValueType\n }),\n dateFormat: shape({\n dateFormat: ValueType\n }),\n cdnconfig: shape({\n CDN: string\n })\n};\n","/* eslint-disable react/destructuring-assignment */\n/* eslint-disable no-nested-ternary */\n/* eslint-disable react/prop-types */\nimport React from 'react';\nimport { subLabel } from '@jotforminc/form-common';\nimport { specialOptions, classNames, addValidation } from '../helpers/Utils';\nimport SubLabel from '../helpers/SubLabel';\nimport QuestionsProps from '../helpers/QuestionProps';\n\nconst Birthdate = props => {\n const prop = JSON.parse(JSON.stringify(props));\n const qid = prop.qid.value;\n const id = prop.id.value;\n const qname = prop.qname.value;\n const passive = prop.inlineEditClass;\n let bmonth;\n let bday;\n let byear;\n const bdate = new Date();\n\n prop.months.value = passive ? specialOptions.Months.value\n : (Array.isArray(prop.months.value) ? prop.months.value : specialOptions.Months.value);\n\n const cyear = ((bdate.getYear() < 1000) ? bdate.getYear() + 1900 : bdate.getYear());\n\n bmonth = (\n {markup}
;\n};\n\nexport default Birthdate;\n","import React, { Component } from 'react';\nimport ProductContainer from '../helpers/ProductContainer';\nimport PaymentCreditCardAndAddress from '../helpers/PaymentCreditCardAndAddress';\n\nexport default class Bluepay extends Component {\n render() {\n if (!ProductContainer.checkRenderStatus(this.props)) {\n ProductContainer.staticVars.hidden = true;\n return '';\n }\n const paymentCreditCardAndAddress = \n
\n );\n }\n}\n\nBluepay.getState = (prop) => {\n return ProductContainer.getState(prop);\n};\n\nBluepay.getScript = (prop) => {\n return ProductContainer.getScript(prop);\n};\n\nBluepay.getHidden = (prop) => {\n return ProductContainer.getHidden(prop);\n};\n","import React, { Component } from 'react';\nimport ProductContainer from '../helpers/ProductContainer';\nimport PaymentCreditCardAndAddress from '../helpers/PaymentCreditCardAndAddress';\n\nexport default class Bluesnap extends Component {\n render() {\n if (!ProductContainer.checkRenderStatus(this.props)) {\n ProductContainer.staticVars.hidden = true;\n return '';\n }\n const paymentCreditCardAndAddress = \n
\n );\n }\n}\n\nBluesnap.getState = (prop) => {\n return ProductContainer.getState(prop);\n};\n\nBluesnap.getScript = (prop) => {\n return ProductContainer.getScript(prop);\n};\n\nBluesnap.getHidden = (prop) => {\n return ProductContainer.getHidden(prop);\n};\n","import React, { Component } from 'react';\nimport ProductContainer from '../helpers/ProductContainer';\nimport PaymentCreditCardAndAddress from '../helpers/PaymentCreditCardAndAddress';\n\nexport default class Braintree extends Component {\n render() {\n if (!ProductContainer.checkRenderStatus(this.props)) {\n ProductContainer.staticVars.hidden = true;\n return '';\n }\n const paymentCreditCardAndAddress = \n
\n );\n }\n}\n\nBraintree.getState = (prop) => {\n return ProductContainer.getState(prop);\n};\n\nBraintree.getScript = (prop) => {\n return ProductContainer.getScript(prop);\n};\n\nBraintree.getHidden = (prop) => {\n return ProductContainer.getHidden(prop);\n};\n","import PropTypes from 'prop-types';\nimport React, { Component } from 'react';\nimport { htmlDecode } from '@jotforminc/form-common';\n\nexport default class BaseButton extends Component {\n\n render() {\n let content;\n let element;\n\n if (!(this.props.inlineEditClass && !this.props.addImage && !this.props.useImage)) {\n content = this.props.children || htmlDecode(this.props.buttonText);\n }\n element = (\n \n
\n );\n }\n}\n\nPagebreak.getState = (prop) => {\n return {\n pageInfo: prop.pageInfo,\n backVisi: prop.backVisi,\n nextVisi: prop.nextVisi\n };\n};\n\nPagebreak.getScript = (prop) => {\n // const state = Pagebreak.getState(prop);\n let script = '';\n\n if (!prop.inlineEditClass && prop.autoNext && prop.autoNext.value === 'Yes') {\n script += ` JotForm.autoNext(${prop.id.value});\\n`;\n }\n return script;\n};\n\nPagebreak.propTypes = {\n type: PropTypes.shape({\n value: PropTypes.string\n }),\n buttonStyle: PropTypes.shape({\n value: PropTypes.string\n }),\n pageInfo: PropTypes.shape({\n value: PropTypes.string\n }),\n backText: PropTypes.shape({\n value: PropTypes.string\n }),\n nextText: PropTypes.shape({\n value: PropTypes.string\n }),\n backVisi: PropTypes.shape({\n value: PropTypes.string\n }),\n nextVisi: PropTypes.shape({\n value: PropTypes.string\n }),\n autoNext: PropTypes.shape({\n value: PropTypes.string\n }),\n inlineEditClass: PropTypes.elementType,\n // Both props below are used, but...\n // eslint-disable-next-line react/no-unused-prop-types\n isFirstPage: PropTypes.bool,\n // eslint-disable-next-line react/no-unused-prop-types\n isLastPage: PropTypes.bool,\n id: PropTypes.shape({\n value: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.number\n ])\n }),\n continueLaterButtonText: PropTypes.shape({\n value: PropTypes.string\n }),\n useNewContinueLater: PropTypes.shape({\n value: PropTypes.string\n }),\n themeVersion: PropTypes.string,\n};\n","/* eslint-disable */\n/* global document */\nimport PropTypes from 'prop-types';\nimport React, { Component } from 'react';\nimport QuestionProps from '../helpers/QuestionProps';\nimport BaseButton from '../helpers/BaseButton';\nimport { getPagebreakProps } from './Pagebreak';\n\nexport default class Button extends Component {\n constructor(props) {\n super(props);\n\n this.renderButton = this.renderButton.bind(this);\n }\n\n getButtonClassNames() {\n const styleName = this.props.buttonStyle.value;\n\n const className = styleName !== 'None' ? ` form-submit-button-${styleName}` : '';\n\n return className;\n }\n\n renderClearButton(inline = false) {\n const btn = (\n \n { firstPage ? null :\n
\n \n { !lastPage ?\n
\n { (!lastPage && useNewContinueLater) ?\n \n
: null\n }\n \n {btn}\n
\n );\n }\n\n return (\n \n
\n );\n }\n\n renderNextButton() {\n if (!this.props.pageBreak) {\n return null;\n }\n\n const { pageBreak } = this.props;\n const { className, hiddenNext, nextStyle, lastPage } = getPagebreakProps(Object.assign({ inlineEditClass: this.props.inlineEditClass }, pageBreak));\n\n if (lastPage) {\n return null;\n }\n\n return (\n \n
\n );\n }\n\n renderPreviewButton() {\n const {\n cdnconfig, inlineEditClass, previewText, id, type\n } = this.props;\n const cdnUrl = cdnconfig?.CDN.endsWith('/') ? cdnconfig.CDN : `${cdnconfig.CDN}/`;\n let content;\n\n if (inlineEditClass) {\n content = React.createElement(inlineEditClass, {\n id: id.value,\n propPath: 'previewText',\n text: (previewText && previewText.value) || 'Preview',\n defaultValue: QuestionProps[type.value].previewText.value,\n placeholder: ''\n });\n } else {\n content = (previewText && previewText.value) || 'Preview';\n }\n return (\n \n
\n );\n }\n\n renderSubmit() {\n // yes, string undefined :/\n const useImage = this.props.useImage?.value && this.props.useImage?.value !== 'undefined' ? true : null;\n const imageClass = useImage ? ' form-submit-button-img' : '';\n const { hasReviewBeforeSubmit } = this.props;\n const useJotformSign = this.props.useJotformSign === 'Yes' && !hasReviewBeforeSubmit;\n // 'useJotformSign' is a selector to mobile app which helps to bypass the click event and brings native pdf viewer in webview\n const useJotformSignClass = useJotformSign ? ' useJotformSign-button useJotformSign ' : '';\n const isBuilder = typeof window !== 'undefined';\n\n return (\n Paypal Smart Buttons
\n \n { this.renderPaypalPreviewButton() }\n
\n 
;\n\n if (this.props.passive) {\n captchaImage = ![\"Captcha](\"../cimg/38.png\")
;\n }\n\n const required = this.props.required && this.props.required.value === 'Yes' ? true : null;\n\n return (\n \n \n
\n );\n }\n}\n\nJotCaptcha.propTypes = {\n qid: PropTypes.shape({\n value: PropTypes.string\n }),\n qname: PropTypes.shape({\n value: PropTypes.string\n }),\n cdnconfig: PropTypes.shape({\n CDN: PropTypes.string\n }),\n passive: PropTypes.bool,\n required: PropTypes.shape({\n value: PropTypes.string\n })\n};\n\nJotCaptcha.getScript = (prop) => {\n let script = `JotForm.initCaptcha('${prop.qid.value}');\\n`;\n script += `$('${prop.qid.value}_reload').observe('click',function(){ JotForm.reloadCaptcha('${prop.qid.value}') })\\n`;\n return script;\n};\n","import PropTypes from 'prop-types';\nimport React, { Component } from 'react';\n\nexport default class ReCaptcha extends Component {\n\n render() {\n const isInvisibleReCaptcha = (this.props.captchaType && this.props.captchaType.value === 'reCaptcha' && this.props.isInvisibleReCaptcha && this.props.isInvisibleReCaptcha.value === 'Yes')\n ? true : false;\n if (this.props.passive) {\n return (\n \n \n {reloadButton}\n \n
\n \n
\n );\n }\n}\n\nCardconnect.getState = (prop) => {\n return ProductContainer.getState(prop);\n};\n\nCardconnect.getScript = (prop) => {\n return ProductContainer.getScript(prop);\n};\n\nCardconnect.getHidden = (prop) => {\n return ProductContainer.getHidden(prop);\n};\n","import React, { Component } from 'react';\nimport ProductContainer from '../helpers/ProductContainer';\nimport PaymentCreditCardAndAddress from '../helpers/PaymentCreditCardAndAddress';\n\nexport default class Chargify extends Component {\n render() {\n if (!ProductContainer.checkRenderStatus(this.props)) {\n ProductContainer.staticVars.hidden = true;\n return '';\n }\n const paymentCreditCardAndAddress = \n
\n );\n }\n}\n\nChargify.getState = (prop) => {\n return ProductContainer.getState(prop);\n};\n\nChargify.getScript = (prop) => {\n return ProductContainer.getScript(prop);\n};\n\nChargify.getHidden = (prop) => {\n return ProductContainer.getHidden(prop);\n};\n","/* eslint-disable */\nimport React, { Component } from 'react';\nimport { safeJSONParse } from '@jotforminc/utils';\nimport { ariaLabelledBy, htmlDecode, parseJSON, subLabel } from '@jotforminc/form-common';\nimport { addValidation, classNames, specialOptions, sanitize, strip, applyLocale, sanitizeForSingleMultipleChoices } from '../helpers/Utils';\nimport QuestionProps from '../helpers/QuestionProps';\n\nclass OptionsBase extends Component {\n render() {\n const prop = this.props;\n let qname = prop.qname.value;\n const qid = prop.qid.value;\n const id = prop.id.value;\n const type = prop.type;\n const isWorkflowOutcomes = !!prop.workflow_outcomes;\n\n let opts = [];\n let isPredefinedOptionsInUse = false;\n\n if (type === 'control_imagechoice' && (prop.options && {}.hasOwnProperty.call(prop.options, 'value') && prop.options.value !== null)) {\n opts = prop.options.value;\n } else if (prop.options && {}.hasOwnProperty.call(prop.options, 'value') && prop.options.value !== null) {\n const values = typeof prop.options.value !== 'string' ? prop.options.value.toString() : prop.options.value;\n opts = values.split('|');\n } else {\n opts = [];\n prop.options.value = '';\n }\n\n if (prop.special && prop.special.value && prop.special.value !== 'None') {\n opts = safeJSONParse(JSON.stringify(specialOptions[prop.special.value]?.value), []);\n isPredefinedOptionsInUse = true;\n }\n\n const fieldType = type.replace('control_', '');\n const getInputType = (t) => { return t === 'No' ? 'radio' : 'checkbox'; };\n const inputType = fieldType === 'imagechoice' ? getInputType(prop.multipleSelection.value) : fieldType;\n // const inputType = type.replace('control_', '');\n const allowOther = prop.allowOther && prop.allowOther.value === 'Yes';\n\n let selectionValidation = '';\n\n const maxMinSelectionProps = {};\n\n const qnameOther = qname;\n if (inputType === 'checkbox' || fieldType === 'imagechoice') {\n qname += '[]';\n }\n\n if (inputType === 'checkbox') {\n if (prop.maxSelection && parseInt(prop.maxSelection.value, 10) > 0) {\n maxMinSelectionProps['data-maxselection'] = parseInt(prop.maxSelection.value, 10);\n selectionValidation = 'maxselection';\n }\n\n if (prop.minSelection && parseInt(prop.minSelection.value, 10) > 0) {\n maxMinSelectionProps['data-minselection'] = parseInt(prop.minSelection.value, 10);\n selectionValidation += selectionValidation.length > 0 ? ',minselection' : 'minselection';\n }\n }\n\n const col = (prop.spreadCols && prop.spreadCols.value > 1) ? prop.spreadCols.value : 0;\n let colCount = 0;\n\n const wrapperProps = {};\n\n let calcValues = prop.calcValues && prop.calcValues.value && prop.calcValues.value.length > 0 && prop.calcValues.value !== 'Click to edit' ? prop.calcValues.value.split('|') : false;\n if (prop.useCalculations && prop.useCalculations.value && prop.useCalculations.value === 'No') {\n calcValues = false;\n }\n\n const disabled = (prop.readonly && prop.readonly.value === 'Yes') ? 1 : 0;\n\n if (col < 2) {\n wrapperProps.className = 'form-single-column';\n } else {\n wrapperProps.className = 'form-multiple-column';\n wrapperProps['data-columncount'] = col;\n }\n\n const focusedRowIndex = prop.focusedPosition ? prop.focusedPosition.options : null;\n if (type === 'control_imagechoice' && typeof opts === 'string') { // a workaround for fixing image choice in revisions\n opts = parseJSON(opts);\n }\n const options = opts.map((opt, index) => {\n const strippedVal = type === 'control_imagechoice' ? strip(opt.text).replace(/&/g, '&') : strip(opt).replace(/&/g, '&');\n const selectedVals = strip(prop.selected.value);\n const selectedValues = typeof selectedVals !== 'string' ? selectedVals.toString() : selectedVals;\n const selectedOptions = selectedValues.replace(/�*39;/g, \"'\").replace(/&/g, '&').replace(/"/g, '\"').replace(/"/g, '\"')\n .split('|')\n .filter(p => p);\n const selectedOptionsWithoutTags = selectedOptions.map(item => item.replace(/<(?!img\\s+).*?>/g, ''));\n const checkedValue = type !== 'control_radio' ? `${strippedVal.replace(/<(?!img\\s+).*?>/g, '')} ${index}` : strippedVal.replace(/<(?!img\\s+).*?>/g, '');\n const checked = selectedOptionsWithoutTags.indexOf(checkedValue) !== -1 ? true : false;\n const defaultOptions = QuestionProps[prop.type].options.value.split('|');\n const defValIndex = defaultOptions.indexOf(strippedVal);\n const defaultValue = defValIndex > 0 ? defaultOptions[defValIndex] : defaultOptions[index];\n\n const className = addValidation(classNames[inputType], prop, selectionValidation);\n const isRadioOrCheckbox = ['radio', 'checkbox'].includes(inputType);\n const inputProps = {\n disabled: disabled,\n type: inputType,\n tabIndex: prop.inlineEditClass ? -1 : null,\n className,\n id: `${qid}_${index}`,\n name: qname,\n checked: checked,\n value: strippedVal,\n // value: strippedVal.replace(/&/g, '&'),\n 'data-calcvalue': calcValues && calcValues[index] ? calcValues[index] : null,\n required: prop.required && prop.required.value === 'Yes' ? true : null\n };\n\n const rdra = ;\n const rinp = ;\n let rlab;\n\n if (prop.inlineEditClass && !isPredefinedOptionsInUse) {\n const labelComponent = ();\n const inlineEditComp = React.createElement(prop.inlineEditClass, {\n id,\n propPath: `options|${index}`,\n text: strippedVal,\n defaultValue: defaultValue,\n placeholder: 'Type an option',\n focusToElement: focusedRowIndex === index,\n sanitizeText: true,\n renderHtmlTags: prop.addOptionClass ? false : true,\n isArrayModeEnabled: true\n }, labelComponent);\n let removeOptionPart = null;\n if (prop.removeOptionClass) {\n removeOptionPart = React.createElement(prop.removeOptionClass, {\n qid: id,\n optionIndex: index,\n label: '×'\n });\n }\n\n let dragHandle = null;\n if (prop.sortableOptions) {\n dragHandle = (\n \n );\n }\n\n rlab = (\n \n {inlineEditComp}\n {dragHandle}\n {removeOptionPart}\n \n );\n } else {\n const sanitizedContent = sanitizeForSingleMultipleChoices(htmlDecode(strippedVal));\n rlab = ;\n }\n\n const style = {};\n colCount += 1;\n if (colCount > col) {\n style.clear = 'left';\n colCount = 1;\n }\n\n const typeClass = (() => {\n switch (inputType) {\n case 'radio':\n return 'Radio';\n case 'checkbox':\n return 'Checkbox';\n default:\n return '';\n }\n })();\n\n if (type === 'control_imagechoice') {\n const dColCount = (() => {\n let cCount = opts.length + (prop.isSelectedQuestion ? 1 : 0);\n if (cCount > 4) {\n cCount = 4;\n }\n if (cCount < 2) {\n cCount = 1;\n }\n return cCount;\n })();\n\n const hasIcon = opt.link.indexOf('placeholder') !== -1;\n const altText = opt.text ? opt.text : `Image ${index + 1}`;\n let imageWrapper = (\n \n 
\n
\n );\n\n if (prop.editOptionImageClass) {\n imageWrapper = React.createElement(prop.editOptionImageClass, {\n qid: id,\n imageIndex: index\n }, imageWrapper);\n }\n const withoutText = strippedVal ? '' : 'withoutText';\n\n wrapperProps['data-columncount'] = dColCount;\n\n const totalOptionCount = opts.length + (allowOther ? 1 : 0);\n let lastRowCount = totalOptionCount % dColCount;\n if (lastRowCount === 0) {\n lastRowCount = dColCount;\n }\n\n const leftOverClass = (index >= (totalOptionCount - lastRowCount)) ? ' jfField-lastRowItem' : '';\n\n return (\n \n \n {false && rinp /* temporary*/}\n
\n );\n }\n\n return (\n \n {rdra}\n {rinp}\n {rlab}\n \n );\n });\n\n let otherPart = null;\n\n if (prop.allowOther && prop.allowOther.value === 'Yes') {\n const otherType = type === 'control_radio' ? 'radio' : 'checkbox';\n const otherText = prop.otherText && prop.otherText.value ? prop.otherText.value : 'Other'.locale();\n const selectedOptions = strip(prop.selected.value).replace(/&/g, '&').split('|').filter(p => p);\n const capitalizedOtherType = otherType.charAt(0).toUpperCase() + otherType.substring(1).toLowerCase() || '';\n\n const firstInputProps = {\n type: otherType,\n 'data-calcvalue': calcValues && calcValues.length > opts.length ? calcValues[calcValues.length - 1] : null,\n className: `form-${otherType}-other ${addValidation(classNames[otherType], prop, selectionValidation)}`,\n 'data-maxselection': maxMinSelectionProps['data-maxselection'],\n 'data-minselection': maxMinSelectionProps['data-minselection'],\n name: type === 'control_radio' ? qname : `${qnameOther}[other]`,\n id: `other_${id}`,\n value: 'other',\n // checked: selectedOptions && selectedOptions[0] === 'Other option' ? 'checked' : null\n checked: (selectedOptions || []).indexOf('Other option') > -1 ? true : false,\n disabled: disabled,\n tabindex: 0,\n 'aria-label': otherText.trim()\n };\n\n const secondInputProps = {\n type: 'text',\n className: `form-${otherType}-other-input form-textbox`,\n name: type === 'control_radio' ? `${qname}[other]` : `${qname.slice(0, -2)}[other]`,\n 'data-otherhint': otherText,\n size: '15',\n id: qid,\n disabled: disabled,\n };\n\n if (prop.themeVersion === 'v2') {\n secondInputProps['data-placeholder'] = applyLocale('Please type another option here');\n secondInputProps.placeholder = applyLocale('Please type another option here');\n } else {\n secondInputProps.placeholder = otherText;\n }\n\n let removeOtherOptionPart = null;\n if (prop.removeOtherOptionClass && prop.inlineEditClass && !isPredefinedOptionsInUse) {\n removeOtherOptionPart = React.createElement(prop.removeOtherOptionClass, {\n qid: id,\n label: '×'\n });\n }\n\n const style = {};\n if (colCount > col) {\n style.clear = 'left';\n colCount = 1;\n }\n\n if (prop.themeVersion === 'v2') {\n const sanitizedContent = sanitizeForSingleMultipleChoices(htmlDecode(otherText));\n otherPart = (\n \n \n );\n }\n }\n\n if (isWorkflowOutcomes) {\n const isFormRender = prop?.workflow_outcomes?.formRender;\n const workflowOutcomes = isFormRender\n ? (prop?.workflow_outcomes?.value || []).filter(outcome => outcome.linkID)\n : prop?.workflow_outcomes?.value;\n const currentSelectedOutcome = isFormRender && prop?.workflow_outcomes?.currentOutcome;\n\n if (Array.isArray(workflowOutcomes) && workflowOutcomes.length >= 1) {\n const outcomeProperties = currentSelectedOutcome ? workflowOutcomes?.find(outcome => outcome?.outcomeID.toString() === currentSelectedOutcome) : null;\n const { text, textColor, buttonColor } = outcomeProperties ? outcomeProperties : workflowOutcomes[0];\n\n wrapperProps.className = 'form-single-column wfOutcomes'; // humbling x-men since 2016...\n\n return (\n
\n
\n \n );\n }\n\n // This should never render but... here we are.\n return (\n \n
\n \n \n
\n \n \n
\n \n {text}\n
\n \n \n
\n \n {workflowOutcomes.map((outcomeItem, index) => {\n const { text, textColor, buttonColor, outcomeID } = outcomeItem;\n const isSelected = currentSelectedOutcome ? currentSelectedOutcome === outcomeID.toString() : index === 0;\n const inputProps = {\n type: 'radio',\n className: 'wfOutcomes-list-item-input',\n id: `${qid}_${index}`,\n name: qname,\n value: outcomeID.toString(),\n 'data-calcvalue': outcomeID.toString(),\n required: 'Yes',\n checked: isSelected ? 'checked' : null\n };\n\n return (\n \n \n {text}\n \n )\n })}\n
\n ¯\\_(ツ)_/¯ - there seems to be an error! We are working on it.
\n );\n }\n\n let addOptionPart = null;\n if (prop.addOptionClass && !isPredefinedOptionsInUse) {\n addOptionPart = React.createElement(prop.addOptionClass, {\n qid: id,\n label: 'Add Option',\n value: global.isPDFImporter ? `Type option ${opts.length + 1}` : ''\n });\n }\n\n let addOtherPart = null;\n if ((!prop.allowOther || prop.allowOther.value !== 'Yes') && prop.addOtherOptionClass) {\n addOtherPart = React.createElement(prop.addOtherOptionClass, {\n qid: id,\n label: 'Add \"Other\" Option'\n });\n }\n\n let addOptionGroup = null;\n if (prop.addOtherOptionClass || prop.addOptionClass) {\n addOptionGroup = ({addOptionPart}{addOtherPart}
);\n }\n\n let sortable = null;\n\n if (prop.sortableOptions && !isPredefinedOptionsInUse) {\n sortable = React.createElement(prop.sortableOptions, {\n qid: id\n }, options);\n }\n\n if (sortable) {\n return (\n \n {sortable}\n {otherPart}\n {addOptionGroup}\n
\n );\n }\n\n return (\n \n {options}\n {otherPart}\n {addOptionGroup}\n
\n );\n }\n}\n\nexport default OptionsBase;\n","import React from 'react';\nimport OptionsBase from '../helpers/OptionsBase';\n\nconst Checkbox = props => \n {this.renderTimebox()}\n {this.renderAmPm()}\n {isRange && this.renderRangeSeparator()}\n {isRange && this.renderTimebox(isRange)}\n {isRange && this.renderAmPm(isRange)}\n {isRange && showTimeDiff && this.renderDifference()}\n
\n );\n }\n}\n\nTime.getScript = (props) => {\n let script = '';\n const id = props.id.value;\n if (props.range && props.range.value === 'Yes' && props.timeDiff && props.timeDiff.value === 'Yes') {\n script += ` JotForm.displayTimeRangeDuration(${id});\\n`;\n }\n const fixAmPm = props.timeFormat && props.timeFormat.value === 'AM/PM'\n && props.showDayPeriods && props.showDayPeriods.value === 'both'\n && props.defaultTime && props.defaultTime.value === 'none';\n if (!props.inlineEditClass && props.defaultTime && (props.defaultTime.value === 'current' || fixAmPm)) {\n script += ` JotForm.displayLocalTime(\"input_${id}_hourSelect\", \"input_${id}_minuteSelect\",\"input_${id}_ampm\", \"input_${id}_timeInput\", ${fixAmPm});\\n`;\n }\n return script;\n};\n\nTime.getState = () => {};\n\nTime.propTypes = {\n qid: PropTypes.shape({\n value: PropTypes.string\n }),\n id: PropTypes.shape({\n value: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.number\n ])\n }),\n qname: PropTypes.shape({\n value: PropTypes.string\n }),\n text: PropTypes.shape({\n value: PropTypes.string\n }),\n type: PropTypes.shape({\n value: PropTypes.string\n }),\n required: PropTypes.shape({\n value: PropTypes.string\n }),\n range: PropTypes.shape({\n value: PropTypes.string\n }),\n timeFormat: PropTypes.shape({\n value: PropTypes.string\n }),\n showDayPeriods: PropTypes.shape({\n value: PropTypes.string\n }),\n defaultTime: PropTypes.shape({\n value: PropTypes.string\n }),\n step: PropTypes.shape({\n value: PropTypes.string\n }),\n description: PropTypes.shape({\n value: PropTypes.string\n }),\n timeDiff: PropTypes.shape({\n value: PropTypes.string\n }),\n until: PropTypes.shape({\n value: PropTypes.string\n }),\n subLabels: PropTypes.shape({\n value: PropTypes.string\n }),\n readonly: PropTypes.shape({\n value: PropTypes.string\n }),\n isDatetime: PropTypes.bool,\n inlineEditClass: PropTypes.elementType\n};\n\nexport default Time;\n","/* eslint-disable */\nimport React from 'react';\nimport SubLabel from '../helpers/SubLabel';\nimport { ariaLabelledBy, getCurrentTime, addZeros, subLabel } from '@jotforminc/form-common';\nimport {\n addValidation, classNames, JSONUnicodeEncode, subLabelSingle\n} from '../helpers/Utils';\nimport QuestionProps from '../helpers/QuestionProps';\nimport Time2 from './Timev2';\n\nconst Datetime = (props) => {\n const dateTimeDefaultSublabels = QuestionProps.control_datetime.sublabels.value;\n const prop = props;\n const qid = prop.qid.value;\n const qname = prop.qname.value;\n const id = prop.id.value;\n const CDN = prop.cdnconfig.CDN;\n const readonly = prop.readonly && prop.readonly.value === 'Yes' ? '1' : null;\n const required = prop.required && prop.required.value === 'Yes' ? '1' : null;\n const autoCalendarClass = (prop.autoCalendar.value === 'Yes') ? 'showAutoCalendar' : null;\n const ampmFormat = prop.timeFormat && prop.timeFormat.value === 'AM/PM';\n const iconLiteClass = prop.liteMode.value === 'Yes' ? 'icon-liteMode' : 'icon-seperatedMode';\n const isNewTheme = prop.themeVersion && prop.themeVersion === 'v2';\n const isFillablePDF = prop.isFillablePDF;\n const icon = !isFillablePDF ? (\n \n {markup}\n
\n ), tmp];\n } else {\n markup.push(iconMarkup);\n }\n\n if (prop.allowTime.value === 'Yes' && prop.themeVersion === 'v2') {\n let classNameSpn = 'allowTime-container';\n classNameSpn += ampmFormat ? ' timeAMPM' : '';\n markup.push(\n \n \n {markup}\n
\n );\n};\n\nDatetime.getScript = (prop) => {\n const id = prop.id.value;\n let limitDate = false;\n let result = '\\n';\n if (prop.limitDate && prop.limitDate.value && prop.limitDate.value !== false) {\n limitDate = JSON.stringify(prop.limitDate.value).split('\"true\"').join(true);\n limitDate = limitDate.split('\"false\"').join(false);\n }\n\n if (!(prop.readonly && prop.readonly.value === 'Yes')) {\n const startOnMonday = prop.startWeekOn && prop.startWeekOn.value === 'Monday';\n\n if (prop.months && prop.months.value) {\n const other = { today: prop.today ? prop.today.value : 'Today' };\n result = `${result} JotForm.calendarMonths = ${JSON.stringify(prop.months.value)};\\n`;\n\n result = `${result} if (!JotForm.calenderViewMonths) JotForm.calenderViewMonths = {}; JotForm.calenderViewMonths[${id}] = ${JSON.stringify(prop.months.value)};\\n`;\n result = `${result} if (!JotForm.calenderViewDays) JotForm.calenderViewDays = {}; JotForm.calenderViewDays[${id}] = ${JSON.stringify(prop.days.value)};\\n`;\n\n result = `${result} JotForm.calendarDays = ${JSON.stringify(prop.days.value)};\\n`;\n result = `${result} JotForm.calendarOther = ${JSON.stringify(other)};\\n`;\n }\n result = `${result} var languageOptions = document.querySelectorAll('#langList li'); \\n`;\n result = `${result} for(var langIndex = 0; langIndex < languageOptions.length; langIndex++) { \\n`;\n result = `${result} languageOptions[langIndex].on('click', function(e) { setTimeout(function(){ JotForm.setCalendar(\"${id}\", ${startOnMonday}, ${JSONUnicodeEncode(limitDate)}); }, 0); });\\n`;\n result = `${result} } \\n`;\n\n result = `${result} JotForm.onTranslationsFetch(function() { JotForm.setCalendar(\"${id}\", ${startOnMonday}, ${JSONUnicodeEncode(limitDate)}); });\\n`;\n }\n\n if (prop.defaultDate.value === 'current') {\n result = `${result} JotForm.formatDate({date:(new Date()), dateField:$(\"id_\"+${id})});\\n`;\n }\n\n const fixAmPm = prop.allowTime && prop.allowTime.value === 'Yes'\n && prop.timeFormat && prop.timeFormat.value === 'AM/PM'\n && prop.defaultTime && prop.defaultTime.value === 'none';\n if (prop.defaultTime.value === 'current' || fixAmPm) {\n if (prop.themeVersion === 'v2') {\n result = `${result} JotForm.displayLocalTime(\"input_${id}_hourSelect\", \"input_${id}_minuteSelect\",\"input_${id}_ampm\", \"input_${id}_timeInput\", ${fixAmPm});\\n`;\n } else {\n result = `${result} JotForm.displayLocalTime(\"hour_${id}\", \"min_${id}\", \"ampm_${id}\", null, ${fixAmPm});\\n`;\n }\n }\n\n if (typeof prop.defaultDate.value === 'string' && prop.defaultDate.value.indexOf('custom') > -1 && prop.defaultDate.value.indexOf('today') > -1) {\n const dynamicDate = prop.defaultDate.value.replace(/custom_/gi, '');\n result = `${result} JotForm.displayDynamicDate(${id},\"${dynamicDate}\");\\n`;\n }\n\n return result;\n};\n\nexport default Datetime;\n","import PropTypes from 'prop-types';\nimport React, { Component } from 'react';\nimport { safeJSONParse } from '@jotforminc/utils';\nimport { htmlDecode } from '@jotforminc/form-common';\n\nimport SubLabel from '../helpers/SubLabel';\nimport {\n addValidation, applyLocale, classNames, escapeValue, sanitize, specialOptions, strip, subLabelSingle, replaceSelectedValues\n} from '../helpers/Utils';\nimport QuestionProps from '../helpers/QuestionProps';\n\nclass Dropdown extends Component {\n shouldComponentUpdate(nextProps) {\n const props = ['visibleOptions', 'width', 'options', 'subLabel', 'special'];\n for (let i = 0; i < props.length; i++) {\n const prop = props[i];\n if (this.props[prop] && nextProps[prop] && JSON.stringify(this.props[prop].value) !== JSON.stringify(nextProps[prop].value)) {\n return true;\n }\n }\n if ((nextProps.selected.value !== this.props.selected.value) || (nextProps.manageDropdownOptions !== this.props.manageDropdownOptions)) {\n return true;\n }\n\n return false;\n }\n\n render() {\n const prop = this.props;\n const qid = prop.qid.value;\n const qname = prop.qname.value;\n const subLabelObj = subLabelSingle(prop, qid);\n const qText = prop.text && prop.text.value;\n\n let emptyText = '';\n let opts = [];\n\n let cl = classNames.dropdown;\n if (prop.size.value > 1) {\n cl = classNames.list;\n }\n\n // configure select props //////////////////////////\n const selectProps = {\n className: addValidation(cl, prop),\n id: qid,\n name: qname\n };\n\n if (prop.width && (prop.width.value !== 'auto' || !prop.width.value)) {\n selectProps.style = {\n width: `${parseInt(prop.width.value, 10)}px`\n };\n }\n\n if (prop.size.value > 1) {\n selectProps.name = `${selectProps.name}[]`;\n selectProps.size = prop.size.value;\n selectProps.multiple = 'multiple';\n } else {\n // new height/multiple values\n if (prop.multipleSelections.value === 'Yes') {\n selectProps.name = `${selectProps.name}[]`;\n selectProps.multiple = 'multiple';\n }\n if (prop.visibleOptions.value > 1) {\n if (this.props.themeVersion === 'v2') {\n selectProps.size = (Number(prop.visibleOptions.value) + 1).toString();\n } else {\n selectProps.size = prop.visibleOptions.value;\n }\n }\n }\n\n // //////////////////////////////////////////////////////\n\n if (prop.options && {}.hasOwnProperty.call(prop.options, 'value') && prop.options.value !== null && typeof prop.options.value === 'string') {\n opts = prop.options.value.split('|');\n } else {\n opts = '';\n prop.options.value = '';\n }\n\n // Allow \"empty option\" text, i.e., \"Please select\"\n if (prop.emptyText) {\n emptyText = htmlDecode(sanitize(prop.emptyText.value));\n }\n\n let calcValues = prop.calcValues && prop.calcValues.value && prop.calcValues.value.length > 0 && prop.calcValues.value !== 'Click to edit' ? prop.calcValues.value.split('|') : false;\n if (prop.useCalculations && prop.useCalculations.value && prop.useCalculations.value === 'No') {\n calcValues = false;\n }\n\n if (this.props.themeVersion === 'v2' && prop.emptyText.value === '' && prop.visibleOptions.value < 2) {\n emptyText = 'Please Select'.locale();\n }\n\n let calcOptionProps = {};\n let hasNonLocale = false;\n if (typeof prop.special !== 'undefined' && prop.special.value !== 'None') {\n prop.options.disabled = true;\n opts = safeJSONParse(JSON.stringify(specialOptions[prop.special.value]?.value), []);\n opts = opts.map(applyLocale)\n hasNonLocale = !!specialOptions[prop.special.value]?.nonLocale;\n } else {\n prop.options.disabled = false;\n calcOptionProps = {\n 'data-calcvalue': calcValues && calcValues[0] ? calcValues[0] : null\n };\n if (calcValues && calcValues.length > 0) {\n calcValues.splice(0, 1);\n }\n }\n\n const calcOption = ;\n\n let strippedSelectedVal = strip(prop.selected.value);\n strippedSelectedVal = typeof strippedSelectedVal === 'string' ? strippedSelectedVal : strippedSelectedVal.toString();\n const strippedSelectedValue = strippedSelectedVal.replace(/&/g, '&');\n const options = [];\n let currentGroup = null;\n if (this.props.themeVersion === 'v2' || !this.props.passive) {\n for (let i = 0; i < opts.length; i += 1) {\n const strippedOpt = replaceSelectedValues(strip(opts[i]));\n const selectedOptions = replaceSelectedValues(strippedSelectedVal).split('|').filter(p => p);\n let selected = selectedOptions.indexOf(strippedOpt) !== -1 ? 'selected' : null;\n if (!selected && hasNonLocale) {\n const translatedSelectedOptions = selectedOptions.map(sOption => replaceSelectedValues(strip(sOption.locale())));\n selected = translatedSelectedOptions.indexOf(strippedOpt) !== -1 ? 'selected' : null;\n }\n\n const calcValue = calcValues && calcValues[i] ? calcValues[i] : null;\n const optionValue = opts[i];\n const optionGroup = optionValue.match(/^\\[\\[(.*?)]]$/);\n\n if (optionGroup) {\n const groupOption = {\n type: 'group',\n groupProps: {\n label: escapeValue(optionGroup[1])\n },\n children: []\n };\n options.push(groupOption);\n currentGroup = groupOption;\n } else {\n const optProps = {\n selected,\n 'data-calcvalue': calcValue,\n value: htmlDecode(sanitize(optionValue)),\n key: i\n };\n\n const option = ;\n\n if (currentGroup) {\n currentGroup.children.push(option);\n } else {\n options.push({\n type: 'option',\n option\n });\n }\n }\n }\n } else if (this.props.passive && strippedSelectedValue && this.props.themeVersion !== 'v2') {\n strippedSelectedValue.split('|').forEach((optionText) => {\n const option = ();\n options.push({\n type: 'option',\n option\n });\n });\n }\n\n const optionElements = options.map((optionDef) => {\n if (optionDef.type === 'group') {\n return ;\n }\n return optionDef.option;\n });\n\n let optionsButton = null;\n\n if (this.props.manageDropdownOptions) {\n optionsButton = React.createElement(this.props.manageDropdownOptions, {\n options: this.props.options.value,\n qid: this.props.id.value,\n update: this.props.updateMethod,\n ref: (ref) => { this.optionsEditComponent = ref; }\n });\n\n optionsButton = {optionsButton}
;\n }\n\n let select = (\n
\n
\n );\n }\n}\n\nEcheck.getState = (prop) => {\n return ProductContainer.getState(prop);\n};\n\nEcheck.getScript = (prop) => {\n return ProductContainer.getScript(prop);\n};\n\nEcheck.getHidden = (prop) => {\n return ProductContainer.getHidden(prop);\n};\n","import React, { Component } from 'react';\nimport ProductContainer from '../helpers/ProductContainer';\nimport PaymentCreditCardAndAddress from '../helpers/PaymentCreditCardAndAddress';\n\nexport default class Eway extends Component {\n render() {\n if (!ProductContainer.checkRenderStatus(this.props)) {\n ProductContainer.staticVars.hidden = true;\n return '';\n }\n\n const paymentCreditCardAndAddress = \n
\n );\n }\n}\n\nEway.getState = (prop) => {\n return ProductContainer.getState(prop);\n};\n\nEway.getScript = (prop) => {\n return ProductContainer.getScript(prop);\n};\n\nEway.getHidden = (prop) => {\n return ProductContainer.getHidden(prop);\n};\n\n","import React, { Component } from 'react';\nimport ProductContainer from '../helpers/ProductContainer';\nimport PaymentCreditCardAndAddress from '../helpers/PaymentCreditCardAndAddress';\n\nexport default class Firstdata extends Component {\n render() {\n if (!ProductContainer.checkRenderStatus(this.props)) {\n ProductContainer.staticVars.hidden = true;\n return '';\n }\n const paymentCreditCardAndAddress = \n
\n );\n }\n}\n\nFirstdata.getState = (prop) => {\n return ProductContainer.getState(prop);\n};\n\nFirstdata.getScript = (prop) => {\n return ProductContainer.getScript(prop);\n};\n\nFirstdata.getHidden = (prop) => {\n return ProductContainer.getHidden(prop);\n};\n","import React, { Component } from 'react';\nimport ProductContainer from '../helpers/ProductContainer';\n\nexport default class PaypalInvoicing extends Component {\n render() {\n return (\n \n
\n );\n }\n}\n\nPagseguro.getState = (prop) => {\n return ProductContainer.getState(prop);\n};\n\nPagseguro.getScript = (prop) => {\n return ProductContainer.getScript(prop);\n};\n\nPagseguro.getHidden = (prop) => {\n return ProductContainer.getHidden(prop);\n};\n","import React, { Component } from 'react';\nimport ProductContainer from '../helpers/ProductContainer';\nimport PaymentCreditCardAndAddress from '../helpers/PaymentCreditCardAndAddress';\n\nexport default class Moneris extends Component {\n render() {\n if (!ProductContainer.checkRenderStatus(this.props)) {\n ProductContainer.staticVars.hidden = true;\n return '';\n }\n const paymentCreditCardAndAddress = \n
\n );\n }\n}\n\nMoneris.getState = (prop) => {\n return ProductContainer.getState(prop);\n};\n\nMoneris.getScript = (prop) => {\n return ProductContainer.getScript(prop);\n};\n\nMoneris.getHidden = (prop) => {\n return ProductContainer.getHidden(prop);\n};\n","/* eslint-disable react/require-default-props */\n// global document window\nimport React, { Component } from 'react';\nimport PropTypes from 'prop-types';\n\nexport default class MollieAPMLists extends Component {\n constructor(props) {\n super(props);\n this.renderAPMLists = this.renderAPMLists.bind(this);\n }\n\n checkProps(checkArr, nextProps) {\n const isChanged = [];\n\n checkArr.forEach(prop => {\n if (\n // eslint-disable-next-line react/destructuring-assignment\n (!this.props[prop] && nextProps[prop])\n // eslint-disable-next-line react/destructuring-assignment\n || (this.props[prop] && nextProps[prop].value !== this.props[prop].value)) {\n isChanged.push(true);\n } else {\n isChanged.push(false);\n }\n });\n\n return isChanged.find(p => p === true);\n }\n\n renderAPMLists() {\n const { mollieAPMList } = this.props;\n if (!Array.isArray(mollieAPMList) || mollieAPMList.length === 0) return null;\n const apmDOM = [];\n\n mollieAPMList.forEach(m => {\n let apmName = m.id;\n let { image } = m;\n switch (apmName) {\n case 'ideal':\n apmName = 'iDEAL';\n break;\n case 'applepay':\n apmName = 'Apple Pay';\n image = 'https://cdn.jotfor.ms/assets/img/payments/apple_icon_black.png';\n break;\n case 'banktransfer':\n apmName = 'Bank Transfer'.locale();\n break;\n case 'paypal':\n apmName = 'PayPal';\n break;\n case 'klarnapaylater':\n apmName = 'Klarna: Pay Later';\n break;\n case 'klarnapaynow':\n apmName = 'Klarna: Pay Now';\n break;\n case 'klarnasliceit':\n apmName = 'Klarna: Slice It';\n break;\n case 'klarna':\n apmName = 'Klarna';\n break;\n case 'in3':\n apmName = 'In3';\n break;\n case 'creditcard':\n apmName = 'Credit Card'.locale();\n image = 'https://cdn.jotfor.ms/assets/img/payments/CC_icon.png';\n break;\n case 'belfius':\n apmName = 'Belfius Direct Net'.locale();\n break;\n case 'kbc':\n apmName = 'KBC/CBC Payment Button'.locale();\n break;\n case 'giftcard':\n apmName = 'Gift Cards'.locale();\n break;\n case 'eps':\n apmName = 'EPS';\n break;\n default:\n apmName = apmName && apmName[0].toUpperCase() + apmName.slice(1);\n break;\n }\n\n apmDOM.push((\n \n {\n 'No payment method matches the selected Mode, Profile, Currency, and Payment Type. Please check the Mollie Dashboard and/or the API documentation for available payment methods and '.locale()\n }\n \n {'currencies'.locale()}\n \n .\n
\n );\n }\n\n render() {\n const { apmFetchStatus } = this.props;\n const isBuilder = typeof window !== 'undefined';\n // console.log(this.props);\n return (\n \n
\n );\n }\n}\n\nMollieAPMLists.propTypes = {\n currency: PropTypes.shape({\n value: PropTypes.string\n }),\n sandbox: PropTypes.shape({\n value: PropTypes.string\n }),\n profileId: PropTypes.shape({\n value: PropTypes.string\n }),\n apmFetchStatus: PropTypes.string,\n mollieAPMList: PropTypes.oneOfType([\n PropTypes.object\n ])\n};\n","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport ProductContainer from '../helpers/ProductContainer';\nimport PaymentCreditCardAndAddress from '../helpers/PaymentCreditCardAndAddress';\nimport MollieApmLists from '../helpers/MollieApmLists';\n\nexport default class Mollie extends Component {\n constructor(props) {\n super(props);\n this.state = {\n apmFetchStatus: 'not_fetched',\n mollieAPM: [],\n mollieAPMList: [],\n isCreditCardFieldExist: false\n };\n }\n\n componentDidMount() {\n const { apmFetchStatus } = this.state;\n if (apmFetchStatus === 'not_fetched') {\n this.fetchApmLists();\n }\n }\n\n componentDidUpdate(preProps) {\n const {\n currency,\n sandbox,\n profileId,\n paymentType\n } = this.props;\n\n if (\n preProps.currency.value !== currency.value\n || preProps.sandbox.value !== sandbox.value\n || preProps.profileId.value !== profileId.value\n || preProps.paymentType.value !== paymentType.value\n ) {\n this.fetchApmLists();\n }\n }\n\n // Utils\n getAPMList(response) {\n let apmList = this.parseJSON(response.content);\n\n let creditCard = apmList.find(element => element.id === 'creditcard');\n if (typeof creditCard !== 'undefined') {\n creditCard = { ...creditCard };\n apmList = apmList.filter(element => element.id !== 'creditcard');\n apmList.unshift(creditCard);\n }\n\n return apmList;\n }\n\n isCreditCardExistsOnMollieAPMList(mollieAPMList) {\n const creditCardField = mollieAPMList.find(element => element.id === 'creditcard');\n return (typeof creditCardField === 'undefined') ? false : true;\n }\n\n parseJSON(content) {\n return typeof content === 'string' ? JSON.parse(content) : content;\n }\n\n fetchApmLists() {\n const {\n currency, sandbox, profileId, paymentType\n } = this.props;\n\n if (!profileId || (profileId && !profileId.value)) { return; }\n\n this.setState({\n apmFetchStatus: 'fetching'\n }, () => {\n // eslint-disable-next-line\n const formdata = new FormData();\n formdata.append('currency', currency.value);\n formdata.append('sandbox', sandbox.value);\n formdata.append('profileId', profileId.value);\n formdata.append('paymentType', paymentType.value);\n\n // this request should be moved\n setTimeout(() => {\n const { teamID: TEAM_ID, isTeamMember } = window;\n global.fetch(`/API/payment/mollie/getapm/${global.__formInfo.id}`, {\n method: 'post',\n body: formdata,\n headers: {\n ...(isTeamMember && TEAM_ID && { 'jf-team-id': TEAM_ID })\n }\n })\n .then(resp => resp.json())\n .then(response => {\n if (response.responseCode === 200) {\n this.setState({\n mollieAPMList: this.getAPMList(response),\n apmFetchStatus: 'fetched',\n isCreditCardFieldExist: this.isCreditCardExistsOnMollieAPMList(this.parseJSON(response.content))\n });\n } else {\n this.setState({\n apmFetchStatus: 'failed'\n });\n }\n })\n .catch(() => {\n this.setState({\n apmFetchStatus: 'failed'\n });\n });\n }, 300);\n });\n }\n\n render() {\n const {\n apmFetchStatus, mollieAPM, mollieAPMList, isCreditCardFieldExist\n } = this.state;\n const {\n sandbox,\n currency\n } = this.props;\n\n if (!ProductContainer.checkRenderStatus(this.props)) {\n ProductContainer.staticVars.hidden = true;\n return '';\n }\n\n return (\n \n { (isBuilder && apmFetchStatus === 'failed') && this.renderFetchStatusError() }\n { (isBuilder && apmFetchStatus === 'fetched') && this.renderAPMLists()}\n
\n {'Payment Methods'.locale()}
)}\n\n
\n : null }\n \n );\n }\n}\n\nFilepickerIO.getState = () => {\n return this.props;\n};\n\nFilepickerIO.propTypes = {\n qid: PropTypes.shape({\n value: PropTypes.string\n }),\n qname: PropTypes.shape({\n value: PropTypes.string\n }),\n inlineEditClass: PropTypes.elementType\n};\n\nFilepickerIO.getScript = (prop) => {\n // const state = FilepickerIO.getState(prop);\n\n if (!prop.inlineEditClass) {\n const filepickerIOOptions = {\n // title: this.getProperty('title'),\n qid: prop.qid.value,\n apiKey: prop.apiKey.value,\n multiple: prop.allowMultiple && prop.allowMultiple.value === 'Yes',\n maxsize: Number(prop.maxFileSize.value) * 1024,\n mimetypes: prop.mimetypes.value,\n modal: prop.fpModal.value,\n services: prop.services.value,\n openTo: prop.openToService.value,\n crop: ('cropImage' in prop && prop.cropImage.value === 'enabled') ? {\n ratio: prop.cropImageRatio.value\n } : false,\n compress: ('compressImage' in prop && prop.compressImage.value === 'enabled') ? {\n quality: prop.compressImageLvl.value\n } : false,\n resize: ('imageDim' in prop && 'imageMax' in prop && 'imageMin' in prop &&\n (prop.imageDim.value || prop.imageMax.value || prop.imageMin.value)) ? {\n imageDim: prop.imageDim.value,\n imageMax: prop.imageMax.value,\n imageMin: prop.imageMin.value\n } : false\n };\n\n if (prop.allowUploadToS3 && prop.allowUploadToS3.value === 'enabled') {\n filepickerIOOptions.allowUploadToS3 = prop.allowUploadToS3.value;\n filepickerIOOptions.s3UploadPath = prop.s3UploadingPath.value;\n filepickerIOOptions.s3UploadAccess = prop.s3UploadAccess.value;\n }\n\n return `' JotForm.setFilePickerIOUpload(' ${JSON.stringify(filepickerIOOptions)} ');\\n'`;\n }\n};\n\nFilepickerIO.propTypes = {\n allowMultiple: PropTypes.shape({\n value: PropTypes.string\n }),\n buttonStyle: PropTypes.shape({\n value: PropTypes.string\n }),\n subLabel: PropTypes.shape({\n value: PropTypes.string\n }),\n buttonText: PropTypes.shape({\n value: PropTypes.string\n }),\n type: PropTypes.shape({\n value: PropTypes.string\n })\n};\n","/* eslint-disable */\nimport React, { Component } from 'react';\nimport PropTypes from 'prop-types';\n\nclass IconSVG extends Component {\n constructor(props) {\n super(props);\n\n // ICON-SETS-V2 CHECK\n this.iconRegex = /(jfc_icon_(.*?)-.*)/;\n this.isJfIconV2 = this.iconRegex.test(props.name);\n\n if (this.isJfIconV2) {\n this.svgName = props.name.match(this.iconRegex)[1];\n this.svgType = props.name.match(this.iconRegex)[2];\n } else {\n // OLD SET NEEDS TO BE NORMALIZED\n this.sanitizeSVG = this.sanitizeSVG.bind(this);\n }\n this.setSVG = this.setSVG.bind(this);\n\n this.setSVG(props);\n }\n\n componentWillReceiveProps(nextProps) {\n this.setSVG(nextProps);\n }\n\n setSVG(givenProps) {\n try {\n /* eslint-disable import/no-dynamic-require, global-require */\n // if (givenProps.isJotFormIconSVG === true) {\n // // DYNAMIC SVGS => WELCOME & THANKYOU\n // if (this.isJfIconV2) {\n // // ICON-SET-V2\n // const path = givenProps.name.match(/assets\\/icons\\/icon-sets-v2\\/(.*)/)[1];\n // this.SVG = require(`../assets/icons/icon-sets-v2/${path}`);\n // } else {\n // // LEGACY ICONS\n // const typeRegex = /assets\\/icons\\/icon-sets\\/(.*)/;\n //\n // this.svgType = givenProps.name.match(typeRegex)[1].split('/')[0];\n // const path = givenProps.name.match(typeRegex)[1];\n //\n // const requiredSVG = require(`../assets/icons/icon-sets/${path}`);\n // this.SVG = this.sanitizeSVG(requiredSVG, this.svgType);\n // }\n // } else {\n // STATIC SVGS => FIELDS & PROGRESS\n this.SVG = GLYPHS[givenProps.name];\n // }\n /* eslint-enable import/no-require, global-require */\n } catch (e) {\n console.log('Error in SVG', e);\n }\n }\n\n getAdditionalClass(type) {\n return type !== undefined && type !== 'color' ? 'iconSvgFill' : '';\n }\n\n sanitizeSVG(svg, type) {\n if (type !== 'default') {\n const viewBoxFinder = new RegExp('(viewBox|enable-background)');\n const isThereAnyViewBox = viewBoxFinder.test(svg);\n if (isThereAnyViewBox === false) {\n const viewBoxString = 'viewBox=\"0 0 32 32\" preserveAspectRatio=\"xMinYMin meet\"';\n const fixerString = `