\n {type && (\n \n {icon()}\n \n )}\n \n {message}\n \n
\n );\n};\n\nAlert.propTypes = {\n message: PropTypes.string.isRequired,\n type: PropTypes.string\n};\n\nAlert.defaultProps = {\n type: ''\n};\n\nexport default Alert;\n","import React from 'react';\nimport { string } from 'prop-types';\n\nimport './ErrorInfoIcon.scss';\n\nconst ErrorInfoIcon = ({ className }) => (\n \n);\n\nErrorInfoIcon.propTypes = {\n className: string\n};\n\nErrorInfoIcon.defaultProps = {\n className: ''\n};\n\nexport default ErrorInfoIcon;\n","import React from 'react';\n\nconst LoadingSpinner = () => {\n return (\n \n
\n {session?.ID === currentSessionId ? (\n \n \n {prettyBrowserDetails}\n |\n {prettyBrowserVersion}\n
\n {session?.location && (\n\n {prettyLocation}\n
\n )}\n\n {translationRenderer(CREATED_AT)({\n renderer1: () => prettyTimestamp.day,\n renderer2: () => t(prettyTimestamp.month),\n renderer3: () => prettyTimestamp.year,\n renderer4: () => prettyTimestamp.time,\n renderer5: () => t(prettyTimestamp.dayTime)\n })}\n
\n{session?.IP}
\n\n
\n );\n};\n\nSessionInfoCard.propTypes = {\n handleLogoutOpen: PropTypes.func,\n sessions: PropTypes.array,\n sessionOs: PropTypes.string,\n currentSessionId: PropTypes.string\n};\n\nSessionInfoCard.defaultProps = {\n handleLogoutOpen: f => f,\n sessions: [],\n sessionOs: '',\n currentSessionId: ''\n};\n\nexport default SessionInfoCard;\n","import { IconExclamationCircleFilled } from '@jotforminc/svg-icons';\nimport React from 'react';\nimport { t, translationRenderer } from '@jotforminc/translation';\nimport PropTypes from 'prop-types';\nimport { AVAILABLE_UPLOAD_SPACE_UPDATED, SINCE_RECENTLY_DELETED } from '../../constants/texts';\n\nconst UploadSpaceTime = ({ remainingTime }) => {\n return (\n \n {osIcon}\n
\n \n
\n \n {sessionOs}\n
\n\n {sessions?.length > 1 ? translationRenderer(TOTAL_SESSIONS)({\n renderer1: () => {sessions?.length}\n }) : t(ONE_SESSION)}\n
\n- \n {renderList()}\n {sortedSessions.length > 3 && (\n
\n {expanded ? (\n handleSessionExpand('shrink')}\n >\n {t(SEE_LESS_SESSIONS)}\n \n ) : (\n handleSessionExpand('expand')}\n >\n {t(SEE_ALL_SESSIONS)}\n \n )}\n
\n )}\n \n
\n );\n};\n\nUploadSpaceTime.propTypes = {\n remainingTime: PropTypes.object\n};\n\nUploadSpaceTime.defaultProps = {\n remainingTime: {}\n};\n\nexport default UploadSpaceTime;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { IconLockFilled } from '@jotforminc/svg-icons';\nimport { t, translationRenderer } from '@jotforminc/translation';\nimport { Button } from '@jotforminc/magnet';\nimport '../../styles/otp.scss';\n\nimport { OTP_TITLE, SEND_CODE } from '../../constants/texts';\n\nconst OTPOverlay = ({ show, onClick, page }) => {\n if (!show) return <>;\n\n return (\n <>\n \n \n
\n \n
\n \n {t(AVAILABLE_UPLOAD_SPACE_UPDATED)}\n
\n\n {translationRenderer(SINCE_RECENTLY_DELETED)({\n renderer1: () => (\n \n {remainingTime?.hour !== 0 && `${remainingTime?.hour} ${remainingTime?.hour > 1 ? t('hours') : t('hour')} `}\n {remainingTime?.minutes >= 1 && remainingTime?.minutes}\n {' '}\n {remainingTime?.minutes > 1 ? t('minutes') : t('minute')}\n {remainingTime?.minutes < 1 && ` ${t('a few seconds')}`}\n \n )\n })}\n
\n\n
\n \n );\n};\n\nOTPOverlay.propTypes = {\n show: PropTypes.bool.isRequired,\n page: PropTypes.string.isRequired,\n onClick: PropTypes.func.isRequired\n};\n\nexport default OTPOverlay;\n","import { IconChevronDown, IconChevronUp } from '@jotforminc/svg-icons';\nimport PropTypes from 'prop-types';\nimport cx from 'classnames';\nimport React, { useState } from 'react';\n\nconst CollapsibleDropdownRow = ({\n rowItem, onClick, selectedOptionValues, setSelectedTitle\n}) => {\n const [isCollapsed, setIsCollapsed] = useState(true);\n\n const handleRowClick = (isGroup, val, title) => {\n if (isGroup) {\n setIsCollapsed(!isCollapsed);\n } else {\n onClick(val);\n setSelectedTitle(title);\n }\n };\n\n return (\n <>\n \n
\n \n {translationRenderer(OTP_TITLE)({\n renderer1: () => page.charAt(0).toUpperCase() + page.slice(1)\n })}\n
\n \n\n {rowItem?.group?.map(item => (\n handleRowClick(false, item?.value, item?.text)}\n className={cx('flex justify-between items-center color-navy-700 text-sm line-height-sm w-full py-3 pr-3 pl-8 rtl:pr-8 rtl:pl-3 hover:bg-navy-10 duration-300 text-left rtl:text-right',\n { 'bg-blue-100': selectedOptionValues === item?.value })}\n type='button'\n >\n {item?.text}\n \n ))}\n
\n )}\n \n );\n};\n\nCollapsibleDropdownRow.propTypes = {\n rowItem: PropTypes.object,\n onClick: PropTypes.func,\n selectedOptionValues: PropTypes.string,\n setSelectedTitle: PropTypes.func\n};\n\nCollapsibleDropdownRow.defaultProps = {\n rowItem: {},\n onClick: f => f,\n selectedOptionValues: '',\n setSelectedTitle: f => f\n};\n\nexport default CollapsibleDropdownRow;\n","import React, { useRef, useState } from 'react';\nimport cx from 'classnames';\nimport { useOnClickOutside } from '@jotforminc/hooks';\nimport { IconChevronDown, IconChevronUp } from '@jotforminc/svg-icons';\nimport PropTypes from 'prop-types';\nimport { t } from '@jotforminc/translation';\nimport CollapsibleDropdownRow from './CollapsibleDropdownRow';\n\nconst NestedDropdown = ({\n placeholder,\n data,\n selectedOptionValues,\n onOptionClick\n}) => {\n const [dropdownOpen, setDropdownOpen] = useState(false);\n const [selectedTitle, setSelectedTitle] = useState('All Actions');\n const dropdownRef = useRef(null);\n\n useOnClickOutside(dropdownRef, () => setDropdownOpen(false));\n\n return (\n \n {dropdownOpen ? (\n
\n \n {dropdownOpen && (\n \n {data?.map(item => (\n
\n )}\n \n );\n};\n\nNestedDropdown.propTypes = {\n placeholder: PropTypes.string,\n data: PropTypes.array,\n selectedOptionValues: PropTypes.array,\n onOptionClick: PropTypes.func\n};\n\nNestedDropdown.defaultProps = {\n placeholder: '',\n data: [],\n selectedOptionValues: [],\n onOptionClick: f => f\n};\n\nexport default NestedDropdown;\n","import {\n LINK_IS_ALREADY_TAKEN, WARNING_SLUG_IS_NOT_VALID,\n CEO, VICE_PRESIDENT, CFO, DIRECTOR, MANAGER, PROFESSIONAL, TECHNICAL, SMALL_BUSINESS_OWNER, DOCTOR, DEVELOPER, LAWYER,\n SALES_REPRESENTATIVE, MARKETING_COMMUNICATION, CUSTOMER_SERVICE, HUMAN_RESOURCES, EDUCATOR, CLERICAL, DONT_WORK, OTHER,\n MARKETING_RESEARCH, HEALTHCARE, NONPROFIT, EDUCATION, FINANCE, RETAIL, CONSTRUCTION, IT_TECHNOLOGY, INSURANCE,\n REAL_ESTATE_LEASING, SPORTS_ACTIVITIES, ANIMAL_CARE, BEAUTY_PERSONAL_CARE, TRANSPORTATION, RESTAURANTS, EVENT_ORGANIZATION,\n PUBLIC_ADMINISTRATION, VIDEO_PHOTOGRAPHY, ARTS_DESIGN\n} from './texts';\n\nexport const jobs = [\n {\n text: CEO,\n value: CEO\n },\n {\n text: VICE_PRESIDENT,\n value: VICE_PRESIDENT\n },\n {\n text: CFO,\n value: CFO\n },\n {\n text: DIRECTOR,\n value: DIRECTOR\n },\n {\n text: MANAGER,\n value: MANAGER\n },\n {\n text: PROFESSIONAL,\n value: PROFESSIONAL\n },\n {\n text: TECHNICAL,\n value: TECHNICAL\n },\n {\n text: SMALL_BUSINESS_OWNER,\n value: SMALL_BUSINESS_OWNER\n },\n {\n text: DOCTOR,\n value: DOCTOR\n },\n {\n text: DEVELOPER,\n value: DEVELOPER\n },\n {\n text: LAWYER,\n value: LAWYER\n },\n {\n text: SALES_REPRESENTATIVE,\n value: SALES_REPRESENTATIVE\n },\n {\n text: MARKETING_COMMUNICATION,\n value: MARKETING_COMMUNICATION\n },\n {\n text: CUSTOMER_SERVICE,\n value: CUSTOMER_SERVICE\n },\n {\n text: HUMAN_RESOURCES,\n value: HUMAN_RESOURCES\n },\n {\n text: EDUCATOR,\n value: EDUCATOR\n },\n {\n text: CLERICAL,\n value: CLERICAL\n },\n {\n text: DONT_WORK,\n value: DONT_WORK\n },\n {\n text: OTHER,\n value: OTHER\n }\n];\n\nexport const industries = [\n {\n text: MARKETING_RESEARCH,\n value: MARKETING_RESEARCH\n },\n {\n text: HEALTHCARE,\n value: HEALTHCARE\n },\n {\n text: NONPROFIT,\n value: NONPROFIT\n },\n {\n text: EDUCATION,\n value: EDUCATION\n },\n {\n text: FINANCE,\n value: FINANCE\n },\n {\n text: RETAIL,\n value: RETAIL\n },\n {\n text: HUMAN_RESOURCES,\n value: HUMAN_RESOURCES\n },\n {\n text: IT_TECHNOLOGY,\n value: IT_TECHNOLOGY\n },\n {\n text: INSURANCE,\n value: INSURANCE\n },\n {\n text: REAL_ESTATE_LEASING,\n value: REAL_ESTATE_LEASING\n },\n {\n text: SPORTS_ACTIVITIES,\n value: SPORTS_ACTIVITIES\n },\n {\n text: ANIMAL_CARE,\n value: ANIMAL_CARE\n },\n {\n text: CONSTRUCTION,\n value: CONSTRUCTION\n },\n {\n text: BEAUTY_PERSONAL_CARE,\n value: BEAUTY_PERSONAL_CARE\n },\n {\n text: TRANSPORTATION,\n value: TRANSPORTATION\n },\n {\n text: RESTAURANTS,\n value: RESTAURANTS\n },\n {\n text: EVENT_ORGANIZATION,\n value: EVENT_ORGANIZATION\n },\n {\n text: PUBLIC_ADMINISTRATION,\n value: PUBLIC_ADMINISTRATION\n },\n {\n text: VIDEO_PHOTOGRAPHY,\n value: VIDEO_PHOTOGRAPHY\n },\n {\n text: ARTS_DESIGN,\n value: ARTS_DESIGN\n },\n {\n text: OTHER,\n value: OTHER\n }\n];\n\nexport const slugErrorMessages = {\n DEFAULT: LINK_IS_ALREADY_TAKEN,\n reserved: LINK_IS_ALREADY_TAKEN,\n notvalid: WARNING_SLUG_IS_NOT_VALID,\n alphanumeric: WARNING_SLUG_IS_NOT_VALID,\n notunique: LINK_IS_ALREADY_TAKEN\n};\n","export const PERIODS = {\n BIYEARLY: 'biyearly',\n YEARLY: 'yearly',\n MONTHLY: 'monthly'\n};\n\nexport const EXPIRATION_TYPES = {\n // scheduled for downgrade\n DOWNGRADE: 'downgrade',\n // reached the limits\n DISABLE: 'disable',\n // end of the subscription\n EXPIRE: 'expire',\n // overdue payment attempt\n OVERDUE: 'overdue'\n};\n","export const PAGES = {\n ACCOUNT: 'account',\n SETTINGS: 'settings',\n SECURITY: 'security',\n SHARING: 'sharing',\n USERS: 'users',\n BILLING: 'billing',\n DATA: 'data',\n HISTORY: 'history',\n API: 'api',\n USAGE: 'usage',\n INCREASE_LIMITS: 'increaseLimits',\n MOBILE_APP: 'mobileApp',\n PARTNERSHIP: 'partnership',\n CONNECTIONS: 'connections'\n};\n\nexport const TEAMS = {\n GENERAL_SETTINGS: 'settings',\n MEMBERS: 'members',\n CONNECTIONS: 'connections',\n SECURITY: 'teamSecurity',\n ACTIVITY_LOG: 'activityLog',\n SYSTEM_LOG: 'systemLog',\n PRIVACY_SETTINGS: 'teamPrivacySettings'\n};\n\nexport const ACCOUNT_TYPES = {\n SUBUSER: 'Sub User',\n FORMUSER: 'FORM USER',\n FREE: 'FREE',\n OLDPREMIUM: 'OLDPREMIUM',\n PREMIUM: 'PREMIUM',\n PROFESSIONAL: 'PROFESSIONAL',\n ADMIN: 'ADMIN',\n GUEST: 'GUEST',\n SUPPORT: 'SUPPORT',\n ECONOMY: 'ECONOMY',\n ENTERPRISE: 'ENTERPRISE',\n GOLD: 'GOLD',\n SILVER: 'SILVER',\n BRONZE: 'BRONZE',\n PLATINUM: 'PLATINUM',\n STORAGE: 'STORAGE',\n PARTNER: 'PARTNER',\n ADVISOR: 'ADVISOR',\n INTERN: 'INTERN',\n HELPDESK: 'HELPDESK'\n};\n\nexport const OPERATION_STATUSES = {\n REQUEST: 'REQUEST',\n SUCCESS: 'SUCCESS',\n ERROR: 'ERROR'\n};\n\nexport const OPERATION_TYPES = {\n CONNECT: 'connect',\n DISCONNECT: 'disconnect'\n};\n\nexport const navigationItems = [\n {\n text: 'Account',\n path: '/profile',\n page: PAGES.ACCOUNT\n },\n {\n text: 'Settings',\n path: '/settings',\n page: PAGES.SETTINGS\n },\n {\n text: 'Security',\n path: '/security',\n page: PAGES.SECURITY\n },\n {\n text: 'Sharing',\n path: '/sharing',\n page: PAGES.SHARING\n },\n {\n text: 'Users',\n path: '/users',\n page: PAGES.USERS\n },\n {\n text: 'Mobile App',\n path: '/enterprise-mobile',\n page: PAGES.MOBILE_APP\n },\n {\n text: 'Billing',\n path: '/billing',\n page: PAGES.BILLING\n },\n {\n text: 'Connections',\n path: '/connections',\n page: PAGES.CONNECTIONS\n },\n {\n text: 'Data',\n path: '/data',\n page: PAGES.DATA\n },\n {\n text: 'History',\n path: '/history',\n page: PAGES.HISTORY\n },\n {\n text: 'API',\n path: '/api',\n page: PAGES.API\n },\n {\n text: 'Usage',\n path: '/usage',\n page: PAGES.USAGE\n },\n {\n text: 'Increase Limits',\n path: '/increase-limits',\n page: PAGES.INCREASE_LIMITS\n },\n {\n text: 'Partnership',\n path: '/partnership',\n page: PAGES.PARTNERSHIP\n }\n];\n\nexport const navigationItemsforTeams = [\n {\n text: 'General Settings',\n path: 'team-settings',\n page: TEAMS.GENERAL_SETTINGS\n },\n {\n text: 'Team Members',\n path: 'team-members',\n page: TEAMS.MEMBERS\n },\n {\n text: 'Connections',\n path: 'connections',\n page: TEAMS.CONNECTIONS\n },\n {\n text: 'Security',\n path: 'team-security',\n page: TEAMS.SECURITY\n },\n {\n text: 'Team Activity Log',\n path: 'team-activity-log',\n page: TEAMS.ACTIVITY_LOG\n },\n {\n text: 'System Logs',\n path: 'team-system-logs',\n page: TEAMS.SYSTEM_LOG\n },\n {\n text: 'Team Visibility',\n path: 'team-visibility',\n page: TEAMS.PRIVACY_SETTINGS\n }\n];\n\nexport const sharedItems = [\n { id: 'shd1', text: 'Contact Form' },\n { id: 'shd2', text: 'Worktable' },\n { id: 'shd3', text: 'Registeration Form' },\n { id: 'shd4', text: 'Team Members' }\n];\n\nexport const apiKeys = [{\n id: 'api1',\n name: 'New API Key',\n key: 'TESTKEY',\n permission: 'Full Access'\n},\n{\n id: 'api2',\n name: 'Widgets API Key-Do not delete',\n key: 'TESTKEY',\n permission: 'Full Access'\n},\n{\n id: 'api3',\n name: 'Widgets API Key-Do not delete',\n key: 'TESTKEY',\n permission: 'Read Access'\n}];\n\nexport const authorizedApps = [{\n id: 'auth1',\n name: 'Collaboration Key',\n key: 'TESTKEY',\n permission: 'Full Access'\n},\n{\n id: 'auth2',\n name: 'Formula Operations',\n key: 'TESTKEY',\n permission: 'Full Access'\n},\n{\n id: 'auth3',\n name: 'Android',\n key: 'TESTKEY',\n permission: 'Read Access'\n},\n{\n id: 'auth4',\n name: 'JotPoll',\n key: 'TESTKEY',\n permission: 'Read Access'\n},\n{\n id: 'auth5',\n name: 'Booking',\n key: 'TESTKEY',\n permission: 'Read Access'\n},\n{\n id: 'auth6',\n name: 'Socket Key',\n key: 'TESTKEY',\n permission: 'Full Access'\n}];\n\nexport const BAA_PRODUCTION_FORMS = {\n US_FORM: '81353099423963',\n EU_FORM: '210523039474956'\n};\n\nexport const defaultReviewPlatformSites = [\n {\n url: 'https://www.g2.com/products/jotform/reviews',\n name: 'G2',\n example: 'https://www.g2.com/products/jotform/reviews/jotform-review-xxxxx'\n },\n {\n url: 'https://www.trustpilot.com/review/jotform.com',\n name: 'Trustpilot',\n example: 'https://www.trustpilot.com/reviews/xxxxx'\n },\n {\n url: 'https://www.capterra.com/p/158456/JotForm-4-0/reviews/',\n name: 'Capterra',\n example: 'https://www.capterra.com/p/158456/JotForm-4-0/reviews/xxxxx'\n },\n {\n url: 'https://www.trustradius.com/welcome/jotform?utm_source=VendorSourced&utm_campaign=VPCRC',\n name: 'TrustRadius',\n example: 'https://trustradi.us/xxxxx',\n alternateLink: 'https://www.trustradius.com/reviews/xxxxx'\n },\n {\n url: 'https://www.reddit.com/r/jotform',\n name: 'Reddit',\n example: 'https://www.reddit.com/r/jotform/comments/xxxxx'\n }\n];\n\nexport const g2CrowdWorkflows = {\n url: 'https://www.g2.com/products/jotform-workflows/take_survey',\n name: 'G2',\n example: 'https://www.g2.com/products/jotform-workflows/reviews'\n};\n\nexport const SIGNUP_TYPES = {\n GOOGLE: 'google',\n MICROSOFT: 'microsoft',\n FACEBOOK: 'facebook',\n APPLE: 'apple',\n SALESFORCE: 'salesforce',\n EMAIL: 'email'\n};\n\nexport const EMAIL_CHANGE_FLOW_STEPS = {\n CHANGE: 'change',\n VERIFY: 'verify'\n};\n\nexport const PASSWORD_CHANGE_FLOW_STEPS = {\n CHANGE: 'change',\n VERIFY: 'verify'\n};\n\nexport const SOCIAL_LOGIN_DISCONNECT_STEPS = {\n CHANGE: 'change',\n VERIFY: 'verify'\n};\n\nexport const SET_PASSWORD_SOURCE = {\n EMAIL: 'email-change',\n PASSWORD: 'password-change',\n FORCE_UPDATE_PASSWORD: 'force-update-password',\n SOCIAL: 'social-login-disconnect'\n};\n\nexport const FEATURE_LIST = {\n AUTO_DELETE_SUBMISSIONS: 'AUTO_DELETE_SUBMISSIONS'\n};\n\nexport const FULLSTORY_ENABLED_PAGES = ['billing', 'increase-limits', 'data', 'security'];\n\nexport const LOCKED_PAGES = {\n security: 'security-tab-my-account'\n};\n\nexport const OTP_TEXTS = {\n security: {\n title: 'Verify it’s you to make changes on security tab'\n },\n email: {\n title: 'Verify it’s you to change your email'\n }\n};\n","var _rect, _g, _defs;\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nimport * as React from \"react\";\nconst SvgSolutionsPartner = props => /*#__PURE__*/React.createElement(\"svg\", _extends({\n xmlns: \"http://www.w3.org/2000/svg\",\n width: 57,\n height: 56,\n fill: \"none\"\n}, props), _rect || (_rect = /*#__PURE__*/React.createElement(\"rect\", {\n width: 56,\n height: 56,\n x: 0.093,\n fill: \"#E7F0EE\",\n rx: 8\n})), _g || (_g = /*#__PURE__*/React.createElement(\"g\", {\n fill: \"#0098A2\",\n clipPath: \"url(#solutions_partner_svg__a)\"\n}, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M25.75 16.649a.4.4 0 0 1 .29.675l-4.576 4.815a4.204 4.204 0 0 0 5.876 6.005l1.879-1.71a.4.4 0 0 1 .525-.011l8.834 7.361c.248.222.224 1.247.028 1.516l-.572.787c-.424.584-1.2.79-1.858.495a1.526 1.526 0 0 0-1.797.415L33.15 38.47a2.45 2.45 0 0 1-1.882.881h-.343c-.43 0-.842-.17-1.146-.475a1.62 1.62 0 0 0-2.294 0 1.62 1.62 0 0 1-1.146.475h-.756a3.45 3.45 0 0 1-2.243-.83l-6.373-5.462a.65.65 0 0 1-.227-.492V20.7a.65.65 0 0 1 .19-.459l3.404-3.403a.65.65 0 0 1 .459-.19z\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M29.775 16.649a.4.4 0 0 0-.29.124l-6.486 6.825a2.086 2.086 0 0 0 2.916 2.98l2.826-2.572 2.057-1.801a1.059 1.059 0 0 1 1.395 1.593l-.765.67a.4.4 0 0 0 .008.608l7.39 6.158c.417.374 1.158-.727 1.158-1.287V20.7a.65.65 0 0 0-.19-.459l-3.403-3.403a.65.65 0 0 0-.459-.19h-6.158\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n fillRule: \"evenodd\",\n d: \"M42.687 19.892c-.597 0-1.08.484-1.08 1.081v12.973c0 .597.483 1.081 1.08 1.081h4.325c.597 0 1.08-.484 1.08-1.081V20.973c0-.597-.483-1.081-1.08-1.081zm2.162 14.054a1.081 1.081 0 1 0 0-2.162 1.081 1.081 0 0 0 0 2.162M9.174 19.892c-.597 0-1.081.484-1.081 1.081v12.973c0 .597.484 1.081 1.08 1.081h4.325c.597 0 1.081-.484 1.081-1.081V20.973c0-.597-.484-1.081-1.08-1.081zm2.162 14.054a1.081 1.081 0 1 0 0-2.162 1.081 1.081 0 0 0 0 2.162\",\n clipRule: \"evenodd\"\n}))), _defs || (_defs = /*#__PURE__*/React.createElement(\"defs\", null, /*#__PURE__*/React.createElement(\"clipPath\", {\n id: \"solutions_partner_svg__a\"\n}, /*#__PURE__*/React.createElement(\"path\", {\n fill: \"#fff\",\n d: \"M8.093 8h40v40h-40z\"\n})))));\nexport default SvgSolutionsPartner;","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 SvgJotformAffiliate = props => /*#__PURE__*/React.createElement(\"svg\", _extends({\n xmlns: \"http://www.w3.org/2000/svg\",\n width: 57,\n height: 56,\n fill: \"none\"\n}, props), _rect || (_rect = /*#__PURE__*/React.createElement(\"rect\", {\n width: 56,\n height: 56,\n x: 0.093,\n fill: \"#FFECDB\",\n rx: 8\n})), _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n fill: \"#FF6101\",\n fillRule: \"evenodd\",\n d: \"M13.593 26.277v-3.2c0-.91.739-1.65 1.65-1.65a1.65 1.65 0 0 0 1.344-.691l1.407-1.971a2 2 0 0 1 1.628-.838h12.674a2 2 0 0 0 1.375-.548l5.546-5.254c1.275-1.208 3.376-.304 3.376 1.452v22.2c0 1.756-2.101 2.66-3.376 1.452l-5.546-5.254a2 2 0 0 0-1.375-.548H19.622a2 2 0 0 1-1.628-.837l-1.407-1.972a1.65 1.65 0 0 0-1.344-.69 1.65 1.65 0 0 1-1.65-1.652m8.25 6.65h8.896a1.854 1.854 0 0 1 .829 3.513l-.475.237c-.92.46-1.5 1.4-1.5 2.427v2.665a2.658 2.658 0 0 1-5.147.933l-2.066-5.508a1.18 1.18 0 0 0-1.106-.767 1.18 1.18 0 0 1-1.181-1.181v-.569c0-.966.783-1.75 1.75-1.75m-2.83-11.16a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5m0 2.858a.5.5 0 0 1 .5-.5h5a.5.5 0 1 1 0 1h-5a.5.5 0 0 1-.5-.5m.5 2.358a.5.5 0 1 0 0 1h5a.5.5 0 0 0 0-1z\",\n clipRule: \"evenodd\"\n})));\nexport default SvgJotformAffiliate;","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 SvgReseller = props => /*#__PURE__*/React.createElement(\"svg\", _extends({\n xmlns: \"http://www.w3.org/2000/svg\",\n width: 56,\n height: 56,\n fill: \"none\"\n}, props), _rect || (_rect = /*#__PURE__*/React.createElement(\"rect\", {\n width: 56,\n height: 56,\n fill: \"#EDF8FF\",\n rx: 8\n})), _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n fill: \"#0075E3\",\n fillRule: \"evenodd\",\n d: \"M18.09 13.833a4.25 4.25 0 1 0 0 8.5 4.25 4.25 0 0 0 0-8.5M27.5 19.5a5.667 5.667 0 1 0 0 11.333 5.667 5.667 0 0 0 0-11.333m0 12.75c-5.224 0-9.917 3.575-9.917 8.5 0 .782.635 1.417 1.417 1.417h17c.782 0 1.417-.635 1.417-1.417 0-4.925-4.693-8.5-9.917-8.5m9.006-18.417a4.25 4.25 0 1 0 0 8.5 4.25 4.25 0 0 0 0-8.5m-17.502 11.61a1.417 1.417 0 0 0-1.84-1.307c-2.96.927-5.247 3.502-5.247 6.697 0 .783.634 1.417 1.416 1.417h6.028a1.417 1.417 0 0 0 1.162-2.227 8.45 8.45 0 0 1-1.519-4.58m18.831-1.307a1.417 1.417 0 0 0-1.84 1.306 8.45 8.45 0 0 1-1.518 4.58 1.417 1.417 0 0 0 1.162 2.228h6.028c.782 0 1.416-.634 1.416-1.417 0-3.195-2.287-5.77-5.248-6.697\",\n clipRule: \"evenodd\"\n})));\nexport default SvgReseller;","/* eslint-disable max-len */\nimport React from 'react';\nimport SolutionsIcon from '../assets/svg/partnership/solutions_partner.svg';\nimport AffiliateIcon from '../assets/svg/partnership/jotform_affiliate.svg';\nimport ResellerIcon from '../assets/svg/partnership/reseller.svg';\nimport {\n JOTFORM_AFFILIATE, PARTNER_VIEW, RESELLER_PARTNER, SOLUTIONS_PARTNER\n} from './texts';\n\nconst generateUTM = content => `?utm_source=myaccount&utm_medium=cta&utm_content=${content}&utm_campaign=myaccount-partnership-page`;\n\nexport const infoBoxesData = [\n {\n title: RESELLER_PARTNER.title,\n description: RESELLER_PARTNER.description,\n url: `https://www.jotform.com/partnership/reseller/${generateUTM('reseller-partner-learn-more')}`,\n color: 'color-white',\n bg: 'bg-blue-500 hover:bg-blue-600 duration-300',\n svgClass: '-right-5 top-14',\n icon: \n
\n {t(errorTexts.h1)}
\n{t(errorTexts.p)}
\n\n {!showTeamNotFoundView && (\n window.location.reload()}\n className=\"btn primary\"\n >\n {t('Try Again').toUpperCase()}\n \n )}\n {\n e.preventDefault();\n handleCustomNavigation('/myforms', '_self', true);\n }}\n className=\"btn secondary\"\n >\n {t('Go Back to My Forms').toUpperCase()}\n \n
\n \n
\n );\n};\nDefaultZoomSlider.propTypes = {\n value: number.isRequired,\n min: number.isRequired,\n max: number.isRequired,\n step: number,\n onChange: func\n};\n\nDefaultZoomSlider.defaultProps = {\n step: 0.4,\n onChange: f => f\n};\n","import {\n elementType, func, number, shape, string, bool\n} from 'prop-types';\nimport React, {\n useCallback, useEffect, useMemo, useRef, useState, forwardRef, useImperativeHandle\n} from 'react';\n\nimport Cropper from 'react-easy-crop';\nimport { Hooks } from '@jotforminc/uikit';\nimport { useDebounce } from '@jotforminc/hooks';\nimport {\n DefaultActionButtonWrapper, DefaultCloseButton, DefaultCropperWrapper, DefaultSaveButton, DefaultZoomSlider\n} from './defaults';\n\nconst ImageCropper = forwardRef(({\n Wrapper,\n CropperWrapper,\n ActionButtonsWrapper,\n SaveButtonRenderer,\n CloseButtonRenderer,\n ZoomSliderRenderer,\n cropHeight,\n cropWidth,\n initialCropInfo,\n onClose,\n onSave,\n image,\n disableZoom,\n useFullWidthImage\n}, ref) => {\n const cropperRef = useRef();\n\n const hasInitialCropInfo = !!Object.keys(initialCropInfo).length;\n\n const [cropperReady, setCropperReady] = useState(false);\n const [mediaLoaded, setMediaLoaded] = useState(false);\n const [cropInfo, setCropInfo] = useState(hasInitialCropInfo ? initialCropInfo : { x: 0, y: 0, zoom: 1 });\n const [minZoom, setMinZoom] = useState(1);\n const [cropSize, setCropSize] = useState({ width: cropWidth, height: cropHeight });\n const [fullWidthYPerc, setFullWidthYPerc] = useState(hasInitialCropInfo ? initialCropInfo.fullWidthYPercentage : 0);\n\n const { rawCrop, rawZoom } = useMemo(() => ({\n rawCrop: { x: cropInfo.x, y: cropInfo.y },\n rawZoom: cropInfo.zoom\n }), [cropInfo]);\n\n useImperativeHandle(ref, () => ({\n cropSize,\n cropperRef\n }));\n\n const handleMediaLoaded = useCallback(mediaSize => {\n const { current } = cropperRef;\n if (current) {\n setMediaLoaded(true);\n }\n const initialCropAreaWidth = cropWidth || cropSize.width;\n const initialCropAreaHeight = cropHeight || cropSize.height;\n const cropAreaWidth = initialCropAreaWidth || current?.clientWidth;\n const cropAreaHeight = initialCropAreaHeight || current?.clientHeight;\n const {\n width: mediaWidth, height: mediaHeight, naturalWidth, naturalHeight\n } = mediaSize;\n const useNaturalSizes = useFullWidthImage && !hasInitialCropInfo && cropAreaWidth > naturalWidth && cropAreaHeight > naturalHeight;\n const mWidth = useNaturalSizes ? naturalWidth : mediaWidth;\n const mHeight = useNaturalSizes ? naturalHeight : mediaHeight;\n\n const zoomToFitRatio = mediaHeight < cropHeight ? cropAreaHeight / mHeight : cropAreaWidth / mWidth;\n\n setMinZoom(zoomToFitRatio);\n if (!hasInitialCropInfo) {\n setCropInfo({ ...cropInfo, zoom: zoomToFitRatio });\n }\n }, [cropWidth, cropHeight, hasInitialCropInfo, cropInfo, cropperRef]);\n\n const maxZoom = useMemo(() => { return minZoom * 12; }, [minZoom]);\n\n const isExist = val => typeof val !== 'undefined' && !Number.isNaN(val);\n\n const handleCropChange = cropData => {\n if (isExist(cropData.x) && isExist(cropData.y)) {\n setCropInfo({ ...cropInfo, ...cropData });\n }\n };\n\n const handleZoomChange = zoomData => {\n if (zoomData) {\n setCropInfo({ ...cropInfo, zoom: zoomData });\n }\n };\n\n const handleSliderValueChange = zoomVal => {\n setCropInfo(currCropInfo => ({ ...currCropInfo, zoom: zoomVal }));\n };\n\n const handleOnClose = () => onClose();\n\n const handleOnSave = () => {\n onSave(cropInfo, fullWidthYPerc);\n handleOnClose();\n };\n\n const updateSize = useDebounce(() => {\n const { current } = cropperRef;\n if (current && ((current.clientWidth !== cropSize.width) || (current.clientHeight !== cropSize.height))) {\n setCropSize({\n width: current.clientWidth,\n height: current.clientHeight\n });\n }\n }, 150);\n\n const handleCropComplete = () => {\n if (!cropWidth && !cropHeight) {\n updateSize();\n }\n };\n\n const handleCropAreaChange = croppedArea => {\n if (croppedArea && isExist(croppedArea.y)) {\n setFullWidthYPerc(croppedArea.y);\n }\n };\n\n useEffect(() => {\n if (!cropperReady) { // large media may take a little time\n setCropperReady(true);\n }\n }, [minZoom]);\n\n Hooks.useEffectIgnoreFirst(() => {\n setCropInfo(initialCropInfo);\n }, [initialCropInfo]);\n\n useEffect(() => {\n handleCropComplete();\n }, []);\n\n const isFullWidth = useFullWidthImage && isExist(fullWidthYPerc);\n\n return (\n \n
\n \n
\n \n
\n )}\n \n );\n};\n\nAvatar.defaultProps = {\n teamAvatarURL: '',\n teamAvatarIcon: '',\n teamAvatarEmojiId: '',\n teamAvatarIconColor: '',\n teamAvatarIconBgColor: '',\n teamAvatarIconSvgRef: '',\n teamAvatarSize: 36,\n canEdit: false\n};\n\nexport default Avatar;\n","import React, {\n FunctionComponent, useCallback, MouseEvent\n} from 'react';\nimport { Tooltip } from '@jotforminc/tooltip';\nimport { t } from '@jotforminc/translation';\nimport { SDR_SOURCES, saveCustomerAsHubspotFormByUsername } from '@jotforminc/ep-utils';\nimport { openManageMembersModal } from '../ManageMembersModal';\nimport { RolesType, ServerTeamSettingsType } from '../../types';\nimport actionRecorder from '../../utils/actionRecorder';\nimport { LetterAvatar } from '../LetterAvatar';\n\ntype Props = {\n teamId: string\n members?: { [key: string]: any }[],\n isAdmin?: boolean,\n teamRoles: RolesType[],\n hideInviteButton?: boolean,\n isButtonsDisabled?: boolean,\n rootSelector?: string,\n manageMembersCbFunc?: (resp?: any) => void,\n user?: { username: string, accountType: string },\n onCurrentUserUpdate?: (error: string) => void,\n returnLastTeamMembers?: boolean,\n globalTeamSettings?: ServerTeamSettingsType,\n showTooltip?: boolean,\n teamName?: string,\n hasManageTeamPermission?: () => Promise\n
\n );\n};\n\nTeamMembers.defaultProps = {\n members: [],\n isAdmin: false,\n hideInviteButton: false,\n isButtonsDisabled: false,\n rootSelector: '',\n manageMembersCbFunc: f => f,\n user: { username: '', accountType: '' },\n onCurrentUserUpdate: f => f,\n returnLastTeamMembers: false,\n globalTeamSettings: {},\n showTooltip: false,\n teamName: '',\n hasManageTeamPermission: () => Promise.resolve(false),\n isHIPAA: false,\n tooltipAlign: 'End'\n};\n","import React, { FunctionComponent, useState } from 'react';\nimport { Loading } from '@jotforminc/loading';\nimport { CoverImgWrapper } from './StyledElements';\n\ntype Props = {\n coverBgColor: string,\n coverBgImageURL: string,\n parsedCropInfo: { [key: string]: any; }\n};\n\nexport const CoverImg: FunctionComponent- \n {members.slice(0, 3).map(({\n avatar, name, username, email, role = {}\n }) => (\n
- \n \n {showTooltip && (\n
- \n \n \n )}\n
\n {coverBgImageURL && (\n \n {isLoading ? setIsLoading(false)}\n />\n \n )}\n
\n );\n};\n","import { apiCall } from '../../utils/api';\n\nexport const requestToJoin = (id: string): Promise\n setImageCropState(false)}\n onSave={(cropInfo: { [key: string]: any }, fullWidthYPerc: number | string) => {\n update({ coverBgImageCropInfo: JSON.stringify({ ...cropInfo, fullWidthYPercentage: fullWidthYPerc }) });\n }}\n useFullWidthImage={true}\n />\n
\n ) : (\n <>\n {t('Drag image to reposition')}
\n \n
\n \n )}\n \n )}\n \n
\n {!canEdit ? (\n \n {name}\n
\n\n {\n if (canOpenInviteSection) {\n fetchTeam();\n }\n }}\n user={user}\n onCurrentUserUpdate={onCurrentUserUpdate}\n globalTeamSettings={globalTeamSettings}\n showTooltip={true}\n teamName={name}\n isHIPAA={isHIPAA}\n tooltipAlign={isRequestShowButtonVisible ? 'Start' : 'End'}\n />\n {isRequestShowButtonVisible && (\n
\n ) : (\n \n
\n )}\n \n {coverBgImageURL && (\n setImageCropState(true)}\n data-testid='reposition-button'\n >\n \n {t('Change Cover')}\n \n
\n \n
\n )}\n {page === PAGES.BILLING && (campaignType === 'NEWUSER' || campaignType === 'OVERQUOTAUSER' || campaignType === 'BACKTOPAID') && getQuery('gamEnabled') === '1' && (\n {translationRenderer(SAVE50PER)({\n renderer1: saveText => {saveText}\n })}\n
\n \n
\n )}\n {page === PAGES.BILLING && campaignType === 'BLACKFRIDAY' && (\n \n
\n \n {t(SAVE50)}\n
\n \n ![\"\"](\"https://cdn.jotfor.ms/assets/img/campaigns/2023/blackfriday/account-box/label-2-3x.png\")
\n
\n )}\n {page === PAGES.BILLING && expirationType === EXPIRATION_TYPES.OVERDUE && campaignType !== 'NEWUSER' && \n \n
\n )}\n \n );\n};\n\nNavigationItemContent.propTypes = {\n page: PropTypes.string.isRequired,\n text: PropTypes.string.isRequired,\n path: PropTypes.string.isRequired,\n hasNewBadge: PropTypes.bool,\n isSelectedSection: PropTypes.bool\n};\n\nNavigationItemContent.defaultProps = {\n hasNewBadge: false,\n isSelectedSection: false\n};\n\nexport default NavigationItemContent;\n","/* eslint-disable max-len */\nimport React, { useState, useMemo, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport cx from 'classnames';\nimport { NavLink, useLocation, useRouteMatch } from 'react-router-dom';\nimport { useSelector } from 'react-redux';\nimport { IconChevronDown } from '@jotforminc/svg-icons';\n\nimport {\n directionSelector,\n isTeamActive\n} from '../../../store/selectors';\n\nimport useWindowDimensions from '../../../utils';\n\nimport NavigationItemContent from './NavigationItemContent';\n\nimport {\n navigationItems\n} from '../../../constants';\n\nconst NavigationItem = ({\n page, text, path, hasNewBadge, handleClick\n}) => {\n const location = useLocation();\n const isTeam = useSelector(isTeamActive);\n\n const pathname = useMemo(() => {\n if (isTeam) {\n const teamSettingsPathname = location.pathname ? location.pathname.replace(/\\/team\\/(.+)\\//, '') : '';\n\n if (teamSettingsPathname) return teamSettingsPathname;\n }\n return location.pathname === '/' ? '/profile' : location.pathname;\n }, [location.pathname, isTeam]);\n const direction = useSelector(directionSelector);\n const routePath = isTeam ? `/team/:teamID/${path}` : path;\n const match = path === navigationItems[0].path && location.pathname === '/' ? true : useRouteMatch({ path: routePath, exact: true });\n const { width, height } = useWindowDimensions();\n const [isNavOpen, setNavOpen] = useState(false);\n\n const isMobile = width <= 1023 || (window.matchMedia('(orientation: landscape)').matches && width <= 1024);\n const [navVisibility, setNavVisibility] = useState(false);\n\n const toggleNavOpen = () => {\n setNavOpen(!isNavOpen);\n handleClick(!isNavOpen);\n };\n\n useEffect(() => {\n setNavVisibility(!isMobile ? true : isMobile && isNavOpen && (path === pathname));\n }, [height, width, pathname]);\n\n const navLinkClasses = active => {\n return cx('relative flex gap-3 w-full items-center xl:px-3.5 lg:px-2.5 px-3.5 py-4 sm:py-5 lg:radius-md hover:bg-navy-100 color-navy-500 transition', {\n 'bg-navy-100 font-bold': active,\n 'color-opacity-90': !active,\n hidden: !navVisibility\n });\n };\n\n const mobileButtonClasses = cx('relative flex justify-between items-center w-full px-4 py-5 border-green-300 order-first', {\n 'border-l-4 flex-row': direction === 'ltr',\n 'border-r-4 flex-row-reverse': direction === 'rtl'\n });\n\n return (\n <>\n {\n isMobile && path === pathname && (\n \n SAVE 50%\n
\n \n {\n e.preventDefault();\n handleCustomNavigation(`/myteams/${team.slug || team.id}`, '_self', true);\n }\n }\n >\n
\n );\n};\n\nexport default TeamWorkspaceButton;\n","import React, { useEffect, useState } from 'react';\nimport cx from 'classnames';\nimport { useSelector, useDispatch } from 'react-redux';\nimport { useLocation } from 'react-router-dom';\nimport NavigationItem from './NavigationItem';\nimport {\n navigationItems,\n navigationItemsforTeams,\n FULLSTORY_ENABLED_PAGES,\n PAGES,\n ACCOUNT_TYPES\n} from '../../../constants';\nimport { filterNavigationItemByPermissions } from '../../../utils';\nimport useFilteredRedirect from '../../../hooks/useFilteredRedirect';\nimport {\n directionSelector,\n userCredentialsSelector,\n userPermissionsSelector,\n isTeamActive,\n userSubuserModeSelector,\n userFormuserSelector,\n userPlanSelector,\n reusablePaymentConnectionsSelector\n} from '../../../store/selectors';\nimport { ACTION_CREATORS } from '../../../store/actionCreators';\nimport TeamWorkspaceButton from '../../UI/TeamWorkspaceButton';\n\nconst Navigation = () => {\n const dispatch = useDispatch();\n const location = useLocation();\n const direction = useSelector(directionSelector);\n const { mfaBetaUser } = useSelector(userCredentialsSelector);\n const {\n createForm: createFormPermission,\n manageAuthorizedApps: manageAuthorizedAppsPermission,\n createApiKey: createApiKeyPermission\n } = useSelector(userPermissionsSelector);\n const isTeam = useSelector(isTeamActive);\n const isSubuser = useSelector(userSubuserModeSelector);\n const isFormuser = useSelector(userFormuserSelector);\n const isPaymentReusableConnections = useSelector(reusablePaymentConnectionsSelector);\n const userPlan = useSelector(userPlanSelector);\n\n const [menuShow, setMenuShow] = useState(false);\n\n const sidebarClasses = cx('relative lg:static w-full lg:w-1/5 bg-navy-75 pt-14 lg:pt-0 md:radius-t-none radius-t-md', {\n 'md:radius-l-md': direction === 'ltr',\n 'md:radius-r-md': direction === 'rtl'\n });\n\n const navigationClasses = cx('absolute lg:static top-0 flex flex-col w-full xl:p-3 lg:p-2 lg:space-y-2 z-7 bg-navy-75 lg:bg-transparent radius-t-md overflow-hidden', { isMenuActive: menuShow });\n\n if (isFormuser) {\n useFilteredRedirect({\n filter: 'profile',\n target: '/profile'\n });\n }\n\n useEffect(() => {\n const { pathname } = location;\n const tab = pathname.substring(pathname.lastIndexOf('/') + 1);\n dispatch(ACTION_CREATORS.watchmanRecorder({\n project: 'MYACCOUNT_TRACKING',\n action: 'accountTabChange',\n target: tab\n }));\n\n if (tab === PAGES.BILLING && userPlan !== ACCOUNT_TYPES.ADMIN) {\n dispatch(ACTION_CREATORS.watchmanRecorder({\n project: 'discoverabilityTracking',\n action: 'visited',\n target: 'billing-page'\n }));\n }\n\n if (FULLSTORY_ENABLED_PAGES.includes(tab)) {\n dispatch(ACTION_CREATORS.enableFullStory());\n } else {\n dispatch(ACTION_CREATORS.disableFullStory());\n }\n }, [location]);\n\n const handleMenu = e => {\n setMenuShow(e);\n };\n\n const navigationList = isTeam ? navigationItemsforTeams : navigationItems;\n\n return (\n \n );\n};\n\nexport default Navigation;\n","import React from 'react';\nimport loadable from '@loadable/component';\n\nimport Loading from '../UI/Loading';\n\nexport const Account = loadable(() => import('./Account'), { fallback: \n {isTeam && (\n
\n \n \n \n {isTeam && (\n navigationItemsforTeams\n .filter(({ page }) => filterNavigationItemByPermissions({ page, isPaymentReusableConnections }))\n .map(({ page, path }) => (\n \n \n
\n \n
\n \n \n
\n);\n\nToastContent.defaultProps = {\n message: '',\n mode: 'success'\n};\n\nToastContent.propTypes = {\n message: string,\n mode: string\n};\n\nexport const showToast = ({ message, mode = 'success', toastProps = {} }) => {\n toast(\n
\n {t(message)}
\n\n {items}\n
\n )}\n {appendChildren && {appendChildren}}\n \n );\n }\n}\n\nButtonField.propTypes = {\n children: oneOfType([elementType, node]),\n appendChildren: oneOfType([elementType, node]),\n icon: oneOfType([elementType, node]),\n items: oneOfType([\n oneOfType([elementType, node]),\n bool\n ]),\n options: shape({\n hideItemsArrow: bool,\n forceDropdown: bool,\n isDropdownOpenInitially: bool,\n preventBubblingFromChildren: bool\n }),\n title: string,\n className: string,\n onClick: func,\n useMouseUp: bool,\n onKeyUp: func,\n onMouseEnter: func,\n onMouseLeave: func,\n innerRef: shape({ current: shape({}) }),\n tabIndex: number,\n listenerElementClass: string\n};\n\nButtonField.defaultProps = {\n children: null,\n appendChildren: null,\n icon: null,\n items: null,\n className: '',\n title: '',\n options: {\n hideItemsArrow: false,\n forceDropdown: false\n },\n onClick: null,\n useMouseUp: null,\n onKeyUp: f => f,\n onMouseEnter: f => f,\n onMouseLeave: f => f,\n innerRef: { current: {} },\n tabIndex: -1,\n listenerElementClass: ''\n};\n","import React, { Component } from 'react';\nimport {\n string,\n bool,\n func,\n node,\n elementType,\n oneOfType\n} from 'prop-types';\n\nimport '../styles/style.scss';\n\nexport class Checkbox extends Component {\n get classNames() {\n const {\n className,\n checked,\n size,\n backgroundColor\n } = this.props;\n\n return [\n 'jfCheckbox-wrapper',\n className,\n checked ? 'isChecked' : null,\n size ? 'hasSize' : null,\n backgroundColor === 'transparent' ? 'isTransparent' : null\n ].filter(a => a).join(' ');\n }\n\n render() {\n const {\n tabIndex,\n name,\n icon,\n checked,\n indeterminate,\n onChange,\n onClick,\n backgroundColor,\n borderColor,\n disabled,\n dataId,\n size,\n ariaLabel\n } = this.props;\n\n return (\n {icon}
\n ) : (\n \n \n
\n )}\n \n );\n }\n}\n\nCheckbox.propTypes = {\n name: string,\n className: string,\n icon: oneOfType([elementType, node]),\n indeterminate: bool,\n checked: bool,\n onChange: func,\n onClick: func,\n backgroundColor: string,\n borderColor: string,\n disabled: bool,\n dataId: string,\n tabIndex: string,\n size: string,\n ariaLabel: string\n};\n\nCheckbox.defaultProps = {\n name: '',\n className: '',\n icon: null,\n indeterminate: false,\n checked: false,\n onChange: f => f,\n onClick: f => f,\n backgroundColor: null,\n borderColor: null,\n disabled: false,\n dataId: null,\n tabIndex: '-1',\n size: null,\n ariaLabel: ''\n};\n","import React, { Component } from 'react';\nimport {\n string,\n bool,\n func,\n node,\n oneOfType,\n elementType,\n shape\n} from 'prop-types';\n\nimport { Checkbox } from './Checkbox';\n\nclass CheckboxItem extends Component {\n constructor(props) {\n super(props);\n this.name = props.name || `checkbox-${Math.random().toString(36).substr(2, 8)}`;\n }\n\n get classNames() {\n const {\n className,\n checked,\n isReverse,\n backgroundColor\n } = this.props;\n\n return [\n 'jfCheckbox-item',\n className,\n checked ? 'isChecked' : null,\n isReverse ? 'isReverse' : null,\n backgroundColor === 'transparent' ? 'isTransparent' : null\n ].filter(a => a).join(' ');\n }\n\n render() {\n const {\n children,\n indeterminate,\n checked,\n onChange,\n onClick,\n backgroundColor,\n borderColor,\n icon,\n disabled,\n dataId,\n tabIndex,\n size,\n forwardedRef, // eslint-disable-line react/prop-types\n ariaLabel,\n labelProps = {}\n } = this.props;\n\n return (\n {children}
\n \n );\n }\n}\n\nCheckboxItem.propTypes = {\n children: oneOfType([node, elementType]),\n icon: oneOfType([node, elementType]),\n name: string,\n indeterminate: bool,\n checked: bool,\n onChange: func,\n onClick: func,\n className: string,\n isReverse: bool,\n backgroundColor: string,\n borderColor: string,\n disabled: bool,\n dataId: string,\n tabIndex: string,\n size: string,\n ariaLabel: string,\n labelProps: shape({})\n};\n\nCheckboxItem.defaultProps = {\n children: null,\n icon: null,\n name: null,\n indeterminate: false,\n checked: false,\n onChange: f => f,\n onClick: f => f,\n className: null,\n isReverse: false,\n backgroundColor: null,\n borderColor: null,\n disabled: false,\n dataId: null,\n tabIndex: null,\n size: null,\n ariaLabel: '',\n labelProps: {}\n};\n\nexport default React.forwardRef((props, ref) => \n \n \n {disabled && tooltipMessage && (\n \n {tooltipMessage}\n \n )}\n
\n \n);\n\nOptionRenderer.propTypes = {\n option: shape({\n text: string,\n value: oneOfType([string, number]),\n subText: string,\n tooltipMessage: string,\n isFirstOption: bool\n }).isRequired,\n isSelected: bool.isRequired\n};\n\nexport default OptionRenderer;\n","import { arrayOf, node } from 'prop-types';\nimport React, { forwardRef } from 'react';\nimport styled from 'styled-components';\nimport { t } from '@jotforminc/translation';\n\nconst Wrapper = styled.ul`\n margin: 0;\n padding: 0;\n max-width: 460px;\n width: 100%;\n background-color: #FFF;\n border-radius: 4px;\n box-shadow: 0 1px 10px rgba(40, 51, 95, 0.3);\n display: flex;\n flex-direction: column;\n overflow: auto;\n\n @media screen and (max-height: 1000px) {\n max-height: 30vh; \n }\n\n li {\n width: 100%;\n border-bottom: 1px solid #eaebf1;\n display: flex;\n flex-direction: column;\n\n &[aria-disabled=\"true\"] .dropdown-option-content {\n pointer-events: none;\n label {\n opacity: .25;\n }\n }\n }\n`;\n\nconst ContainerRenderer = forwardRef(({ children, extraElements }, ref) => {\n return (\n \n {children}\n
\n )}\n \n );\n};\nGroupOptionRenderer.propTypes = {\n defaultOptionGroupTextClass: PropTypes.string,\n optionGroupWrapperClass: PropTypes.string,\n optionGroupTextClass: PropTypes.string,\n optionGroupClass: PropTypes.string,\n text: PropTypes.string,\n color: PropTypes.string,\n children: PropTypes.node,\n defaultExpandValue: PropTypes.bool\n\n};\n\nGroupOptionRenderer.defaultProps = {\n defaultOptionGroupTextClass: 'jfSelect-optionGroup',\n optionGroupWrapperClass: '',\n optionGroupTextClass: '',\n optionGroupClass: '',\n text: '',\n color: null,\n children: null,\n defaultExpandValue: false\n};\n\nexport default GroupOptionRenderer;\n","/* eslint-disable complexity */\nimport PropTypes from 'prop-types';\nimport { createPortal } from 'react-dom';\nimport React, { Component } from 'react';\nimport clsx from 'clsx';\nimport { Portal } from '@jotforminc/magnet';\nimport GroupOptionRenderer from './GroupOptionRenderer';\n\nimport './style.scss';\n\nclass Dropdown extends Component {\n constructor(props) {\n super(props);\n\n this.handleRemoveTag = this.handleRemoveTag.bind(this);\n this.handleInputClick = this.handleInputClick.bind(this);\n this.handleKey = this.handleKey.bind(this);\n this.stopKeyEvent = this.stopKeyEvent.bind(this);\n this.handleMouseEnter = this.handleMouseEnter.bind(this);\n this.handleMouseLeave = this.handleMouseLeave.bind(this);\n this.handleSearch = this.handleSearch.bind(this);\n this.handleSearchClear = this.handleSearchClear.bind(this);\n this.handleClickOutside = this.handleClickOutside.bind(this);\n this.handleResize = this.handleResize.bind(this);\n this.handleScroll = this.handleScroll.bind(this);\n this.createTags = this.createTags.bind(this);\n\n this.inputRef = React.createRef();\n this.listRef = React.createRef();\n this.searchRef = React.createRef();\n this.optionListRef = React.createRef();\n this.areAllOptionsDisabled = this.flattenOptions(props.data).every(({ isDisabled }) => isDisabled);\n\n this.state = {\n isOpen: false,\n currentOptionIndex: 0,\n searchTerm: '',\n filteredOptions: props.data || []\n };\n }\n\n componentDidMount() {\n const { searchable } = this.props;\n document.addEventListener('scroll', this.handleScroll, true);\n document.addEventListener('click', this.handleClickOutside, true);\n window.addEventListener('resize', this.handleResize);\n\n if (this.inputRef.current) {\n this.inputRef.current.addEventListener('keyup', this.handleKey);\n this.inputRef.current.addEventListener('keydown', this.stopKeyEvent);\n this.inputRef.current.addEventListener('keypress', this.handleKey);\n }\n\n if (this.listRef.current) this.listRef.current.addEventListener('keyup', this.stopKeyEvent);\n\n if (this.searchRef.current && searchable) {\n this.searchRef.current.addEventListener('keydown', this.handleKey);\n }\n }\n\n componentDidUpdate(prevProps, prevState) {\n const { data, searchable } = this.props;\n const { data: prevData } = prevProps;\n const { isOpen: prevIsOpen } = prevState;\n const { searchTerm, isOpen } = this.state;\n if (prevData !== data) {\n // eslint-disable-next-line react/no-did-update-set-state\n this.setState({ filteredOptions: this.filterOptions(data, searchTerm) });\n }\n if (isOpen && !prevIsOpen && searchable) {\n this.searchRef.current.focus();\n } else if (!isOpen && prevIsOpen && searchable) {\n this.searchRef.current.value = '';\n // eslint-disable-next-line react/no-did-update-set-state\n this.setState({ searchTerm: '', filteredOptions: data });\n }\n }\n\n componentWillUnmount() {\n const { searchable } = this.props;\n document.removeEventListener('click', this.handleClickOutside, true);\n window.removeEventListener('resize', this.handleResize);\n document.removeEventListener('scroll', this.handleScroll);\n\n this.inputRef.current.removeEventListener('keyup', this.handleKey);\n\n this.listRef.current.removeEventListener('keyup', this.stopKeyEvent);\n this.inputRef.current.removeEventListener('keydown', this.stopKeyEvent);\n this.inputRef.current.removeEventListener('keypress', this.handleKey);\n if (searchable) {\n this.searchRef.current.removeEventListener('keydown', this.handleKey);\n }\n }\n\n handleClickOutside(e) {\n const { isOpen } = this.state;\n const isClickedInput = this.inputRef.current && this.inputRef.current.contains(e.target);\n const isClickedWrapper = this.listRef.current && this.listRef.current.contains(e.target);\n\n if (isClickedInput || isClickedWrapper) return;\n if (isOpen) this.hideDropdown(true);\n }\n\n handleResize() {\n const { isOpen } = this.state;\n\n const minKeyboardHeight = 300;\n const visualViewportHeight = window?.visualViewport?.height || window.screen.height;\n const isKeyboardOpen = window.screen.height - minKeyboardHeight > visualViewportHeight;\n\n if (isOpen && !isKeyboardOpen) this.hideDropdown();\n }\n\n handleScroll(e) {\n const { isOpen } = this.state;\n const { isMobile } = this.props;\n const isDisabledScrollHandler = isMobile ? this.searchRef.current !== document.activeElement : true;\n if (e.target !== this.optionListRef.current && isDisabledScrollHandler && isOpen) this.hideDropdown();\n }\n\n handleKey(event) {\n const { isKeyboardHandlingActive, disabled, defaultOptionClass } = this.props;\n const { isOpen, currentOptionIndex, filteredOptions } = this.state;\n\n if (isKeyboardHandlingActive && !disabled) {\n if (event.key === 'Enter') {\n event.stopPropagation();\n\n if (isOpen) {\n const currentOption = this.flattenOptions(filteredOptions)[currentOptionIndex];\n const searchRegExp = /\\s/g; // replacing all ' ' with '.'\n const replaceWith = '.';\n if (currentOption) {\n const currentOptionEl = this.listRef?.current?.querySelector(`.${defaultOptionClass.replace(searchRegExp, replaceWith)}[value=\"${currentOption.value}\"]`);\n currentOptionEl?.focus();\n currentOptionEl?.click();\n } else {\n this.hideDropdown();\n }\n }\n } else if (event.key === 'ArrowDown') {\n if (isOpen) {\n event.preventDefault();\n this.handleArrowKey(1);\n } else {\n this.openDropdown();\n }\n } else if (event.key === 'ArrowUp') {\n if (isOpen) {\n event.preventDefault();\n this.handleArrowKey(-1);\n }\n }\n }\n }\n\n handleArrowKey(indicator) {\n if (this.areAllOptionsDisabled) return;\n const { defaultOptionClass } = this.props;\n this.setState(state => {\n const flattenedOptions = this.flattenOptions(state.filteredOptions);\n const newIndex = (state.currentOptionIndex + indicator + flattenedOptions.length) % flattenedOptions.length;\n return { currentOptionIndex: newIndex };\n }, () => {\n const { currentOptionIndex, filteredOptions } = this.state;\n const { value, isDisabled } = this.flattenOptions(filteredOptions)[currentOptionIndex];\n if (isDisabled) {\n this.handleArrowKey(indicator);\n return;\n }\n const searchRegExp = /\\s/g; // replacing all ' ' with '.'\n const replaceWith = '.';\n const currentOptionEl = this.listRef?.current?.querySelector(`.${defaultOptionClass.replace(searchRegExp, replaceWith)}[value=\"${value}\"]`);\n currentOptionEl?.scrollIntoView({ block: 'nearest' });\n });\n }\n\n handleInputClick() {\n const { isOpen } = this.state;\n const {\n disabled,\n onInputClick,\n autoFocus,\n listAutoFocus\n } = this.props;\n\n if (!disabled) {\n if (!isOpen) {\n this.openDropdown();\n onInputClick();\n if (this.listRef.current && (autoFocus || listAutoFocus)) {\n this.listRef.current.focus();\n }\n }\n this.hideDropdown();\n }\n }\n\n handleSearch(e) {\n const { data, onSearch } = this.props;\n const { value } = e.target;\n\n this.setState({ filteredOptions: this.filterOptions(data, value), searchTerm: value });\n setTimeout(() => { this.handleDropdownPosition(); }, 0);\n onSearch(value);\n }\n\n handleSearchClear() {\n const value = '';\n this.searchRef.current.value = value;\n this.handleSearch({ target: { value } });\n }\n\n handleDropdownPosition() {\n const {\n dropdownLeft,\n dropdownTop,\n dropdownWidth,\n getDropdownPosition,\n isLite,\n dropdownPositionResolver\n } = this.props;\n const listRefStyle = this.listRef?.current?.style || {};\n\n listRefStyle.opacity = 1;\n listRefStyle.visibility = 'visible';\n listRefStyle.width = `${this.inputRef?.current?.offsetWidth}px`;\n\n if (isLite) { return; }\n\n const {\n left = 0,\n top = 0,\n width = 0,\n height = 0,\n right = 0\n } = this.inputRef?.current?.getBoundingClientRect() || {};\n\n const {\n offsetHeight: listRefHeight = 0\n } = this.listRef.current || {};\n\n let positions = {};\n const topOffset = height + top;\n const totalHeight = topOffset + listRefHeight;\n\n positions.left = left;\n positions.width = width;\n\n if (totalHeight > window.innerHeight) {\n positions.top = top - listRefHeight;\n this.listRef?.current?.setAttribute('data-position', 'top');\n this.inputRef?.current?.setAttribute('data-position', 'top');\n getDropdownPosition('top');\n } else {\n positions.top = topOffset;\n this.listRef?.current?.setAttribute('data-position', 'bottom');\n this.inputRef?.current?.setAttribute('data-position', 'bottom');\n getDropdownPosition('bottom');\n }\n\n if (dropdownPositionResolver && typeof dropdownPositionResolver === 'function') {\n positions = {\n ...positions,\n ...dropdownPositionResolver({\n left, top, width, height, right\n })\n };\n }\n\n listRefStyle.top = dropdownTop\n ? `${dropdownTop}px`\n : `${positions.top}px`;\n listRefStyle.left = dropdownLeft\n ? `${dropdownLeft}px`\n : `${positions.left}px`;\n listRefStyle.width = dropdownWidth\n ? `${dropdownWidth}px`\n : `${positions.width}px`;\n }\n\n handleOptionClick = option => e => {\n const { value } = e.currentTarget;\n const {\n multiple, isKeyboardHandlingActive, onOptionClick, autoFocus,\n sendFullOption, listAutoFocus\n } = this.props;\n\n if (isKeyboardHandlingActive) {\n e.stopPropagation();\n e.nativeEvent.stopImmediatePropagation();\n }\n\n if (multiple) {\n setTimeout(() => {\n this.handleDropdownPosition();\n }, 0);\n } else {\n setTimeout(() => {\n this.hideDropdown();\n }, 0);\n }\n onOptionClick(sendFullOption ? option : value, e);\n if (this.inputRef.current && (autoFocus || listAutoFocus)) {\n this.inputRef.current.focus();\n }\n };\n\n handleRemoveTag(e) {\n const { onRemoveTag } = this.props;\n const { value } = e.target;\n onRemoveTag(value, e);\n e.stopPropagation();\n }\n\n handleMouseEnter(e) {\n const { target } = e;\n const { filteredOptions } = this.state;\n const newIndex = this.flattenOptions(filteredOptions).findIndex(opt => opt.value === target.value);\n this.setState({ currentOptionIndex: newIndex });\n }\n\n handleMouseLeave() {\n this.setState({ currentOptionIndex: -1 });\n }\n\n isValueInOption(option, value) {\n if (option?.searchTerm) {\n return option.searchTerm.toLowerCase().indexOf(value?.toLowerCase()) !== -1;\n }\n return typeof option.text === 'string' ? option.text?.toLowerCase().indexOf(value?.toLowerCase()) > -1 : false;\n }\n\n isLastElement(options, index) {\n return options?.length > 0 && options?.length > index + 1;\n }\n\n filterOptions(options, value) {\n return options.reduce((acc, currentOption) => {\n if (currentOption.type === 'group') {\n const groupOptions = this.filterOptions(currentOption.options, value);\n return groupOptions.length > 0 ? [...acc, { ...currentOption, options: groupOptions }] : acc;\n }\n\n return this.isValueInOption(currentOption, value) ? [...acc, currentOption] : acc;\n }, []);\n }\n\n flattenOptions(options) {\n return options.flatMap(option => {\n return option.type === 'group' ? (this.flattenOptions(option?.options) || []) : option;\n });\n }\n\n openDropdown() {\n const { isDropdownOpen, selectedOptionValues, multiple } = this.props;\n\n this.setState(state => {\n const flattenedOptions = this.flattenOptions(state.filteredOptions);\n const currentOptionIndex = multiple ? 0 : flattenedOptions.findIndex(opt => opt.value === selectedOptionValues[0]);\n return {\n isOpen: true,\n currentOptionIndex\n };\n });\n this.handleDropdownPosition();\n isDropdownOpen(true);\n }\n\n stopKeyEvent(event) {\n const { isKeyboardHandlingActive } = this.props;\n const { isOpen } = this.state;\n if (isKeyboardHandlingActive && isOpen) {\n event.stopPropagation();\n }\n }\n\n hideDropdown(noFocus = true) {\n const { isOpen } = this.state;\n const { isDropdownOpen } = this.props;\n\n if (!noFocus && this.inputRef.current) {\n this.inputRef.current.focus();\n }\n\n if (isOpen && this.listRef.current) {\n this.listRef.current.style.opacity = 0;\n this.listRef.current.style.visibility = 'hidden';\n\n this.setState({\n isOpen: false,\n currentOptionIndex: 0\n });\n isDropdownOpen(false);\n }\n }\n\n createTags() {\n const {\n data, defaultTagClass, defaultRemoveButtonClass, tagClass, removeButtonClass, removeButtonIcon, selectedOptionStyles\n } = this.props;\n const { selectedOptionValues } = this.props;\n\n const removeButtonClasses = clsx(defaultRemoveButtonClass, removeButtonClass);\n\n return this.flattenOptions(data).map(option => {\n const {\n value, text, dataAttributes, key, additionalTagClass\n } = option;\n if (selectedOptionValues.indexOf(value) > -1) {\n return (\n \n {text}\n \n { groupOption.options.map((option, index) => (option.type === 'group'\n ? this.renderOptionItemGroup(option, groupIndex + index, this.isLastElement(groupOption.options, index))\n : this.renderOptionItem(option, groupIndex + index))) }\n
\n { divider && }\n \n );\n }\n\n renderMultipleGroupItem(option, index, isLastElement) {\n const {\n defaultOptionGroupTextClass, optionGroupWrapperClass,\n optionGroupTextClass, optionGroupClass\n } = this.props;\n\n const {\n text, color, options, collapsible, defaultExpandValue\n } = option;\n\n const { filteredOptions, searchTerm } = this.state;\n const isOptionFiltered = searchTerm && filteredOptions?.findIndex(filteredOption => filteredOption === option) > -1;\n\n if (collapsible) {\n return (\n {notResultFoundText}
;\n }\n\n if (dropdownOpenInEmail && data?.length === 0) {\n return {notResultFoundText}
;\n }\n\n const filteredValue = dropdownOpenInEmail ? data : filteredOptions;\n\n const { items } = filteredValue.reduce((result, current) => {\n switch (true) {\n case current?.showOutsideButton:\n return {\n itemIndex: result.itemIndex + 1,\n items: [\n ...result.items,\n (\n \n {this.renderOptionComponent(current)}\n
\n )\n ]\n };\n case current.type === 'group':\n return {\n itemIndex: result.itemIndex + current.options.length,\n items: [...result.items, this.renderMultipleGroupItem(current, result.itemIndex, this.isLastElement(current.options, result.itemIndex))]\n };\n default:\n return { itemIndex: result.itemIndex + 1, items: [...result.items, this.renderOptionItem(current, result.itemIndex)] };\n }\n }, { itemIndex: 0, items: [] });\n\n return items;\n }\n\n renderInput() {\n const { isOpen } = this.state;\n const {\n inputAfter,\n inputBefore,\n inputClass,\n inputTextClass,\n tagWrapperClass,\n defaultInputClass,\n defaultInputTextClass,\n defaultOptionText,\n defaultOptionTitle,\n defaultTagWrapperClass,\n activeInputClass,\n selectedOptionValues,\n searchableClass,\n isDarkClass,\n disabledClass,\n multipleClass,\n multiple,\n searchable,\n disabled,\n data,\n inputTabIndex,\n isDark,\n autoFocus,\n defaultInnerInput,\n pdfOptions\n } = this.props;\n\n const inputClasses = clsx(defaultInputClass, inputClass, {\n [activeInputClass]: activeInputClass && isOpen,\n [multipleClass]: multiple,\n [searchableClass]: searchable,\n [disabledClass]: disabled,\n [isDarkClass]: isDark\n });\n\n const inputTextClasses = clsx(defaultInputTextClass, inputTextClass);\n const tagWrapperClasses = clsx(defaultTagWrapperClass, tagWrapperClass);\n\n if (multiple) {\n return (\n \n {hasNoOptions ? 'Select Document' : `${pdfOptions.length} document${pdfOptions.length > 1 ? 's' : ''} selected`}\n
\n )}\n {inputAfter && inputAfter}\n \n );\n }\n\n render() {\n const { isOpen, searchTerm } = this.state;\n const {\n defaultWrapperClass,\n wrapperClass,\n activeWrapperClass,\n defaultListClass,\n listClass,\n liteClass,\n searchable,\n multiple,\n searchableClass,\n isDarkClass,\n isDark,\n multipleClass,\n defaultSearchBoxClass,\n searchBoxClass,\n defaultSearchInputClass,\n searchInputClass,\n searchInputPlaceholder,\n zIndex,\n isLite,\n listAriaLabel,\n searchIcon,\n useMagnetPortal,\n clearSearchButtonText\n } = this.props;\n\n const listClasses = clsx(defaultListClass, listClass);\n const wrapperClasses = clsx(defaultWrapperClass, wrapperClass, {\n [activeWrapperClass]: activeWrapperClass && isOpen,\n [multipleClass]: multiple,\n [searchableClass]: searchable,\n [isDarkClass]: isDark,\n [liteClass]: isLite\n });\n const searchBoxClasses = clsx(defaultSearchBoxClass, searchBoxClass);\n const searchInputClasses = clsx(defaultSearchInputClass, searchInputClass);\n\n const renderWrapper = () => {\n return (\n \n {this.renderInput()}\n {renderWrapper()}\n
\n ) : (\n <>\n {this.renderInput()}\n {!useMagnetPortal ? createPortal(renderWrapper(), document.body) : \n \n setIsFeedbackFormOpen(false)}\n >\n setIsIframeLoaded(true)}\n />\n
\n \n );\n};\n\nFeedbackForm.propTypes = {\n user: userPropType.isRequired,\n formUiModifier: string.isRequired\n};\n\nexport default FeedbackForm;\n","import React, {\n useEffect, useMemo, useRef, useState\n} from 'react';\nimport { bool, func, string } from 'prop-types';\nimport { t } from '@jotforminc/translation';\nimport { getDomainURL } from '@jotforminc/request-layer';\nimport { Loading } from '@jotforminc/loading';\nimport {\n ALL_TEXTS, SHORT_LEAD_FORM_IFRAME_ID,\n gaAttributesPropType, gaFormTrackingItemsPropType, userPropType, LEAD_FORM_MAP, SHOULD_SHOW_AD_FORM\n} from '../constants';\nimport {\n getMandatoryPrefillValues,\n getUserPrefillValues, isDevelopment, prepareFormParams\n} from '../utils';\nimport { useHubspotTracker } from '../hooks';\nimport FeedbackForm from './FeedbackForm';\n\nconst PrefilledLeadFormAside = ({\n user,\n title,\n formID: formIdProp,\n devFormID,\n classNames,\n formUiModifier,\n isIframeEmbed,\n gaAttributes,\n gaFormTrackingItems,\n customFormParamsPreparer,\n onFormSubmit,\n pageUrl,\n automatedNurturingSource,\n fullFormPath,\n isPrefillEnabled,\n isAdForm,\n isDynamicHeightEnabled,\n ...props\n}) => {\n const [isFrameLoaded, setIsIframeLoaded] = useState(false);\n const isSubmissionLoggedRef = useRef(false);\n const isFormFillingLoggedRef = useRef(false);\n const isHubspotLoggedRef = useRef(false);\n const formRef = useRef(null);\n const userMandatoryData = useMemo(() => getMandatoryPrefillValues(user), [user]);\n const userData = useMemo(() => getUserPrefillValues(user), [user]);\n const formParamPreparer = customFormParamsPreparer || prepareFormParams;\n let formParams = '';\n if (isPrefillEnabled) {\n formParams = formParamPreparer({\n ...userData, formUiModifier, isIframeEmbed, pageUrl, automatedNurturingSource, ...props\n });\n } else {\n formParams = formParamPreparer({\n ...userMandatoryData, formUiModifier, isIframeEmbed, pageUrl, automatedNurturingSource, ...props\n });\n }\n\n const inferDevFormIdBasedOnAdwordsMode = () => {\n if (!SHOULD_SHOW_AD_FORM) {\n return devFormID;\n }\n\n return !isAdForm ? devFormID : LEAD_FORM_MAP.COMMON.AD_FORM_DEV;\n };\n\n const inferFormIdBasedOnAdwordsMode = () => {\n if (!SHOULD_SHOW_AD_FORM) {\n return formIdProp;\n }\n\n return !isAdForm ? formIdProp : LEAD_FORM_MAP.COMMON.AD_FORM_LIVE;\n };\n\n const formId = isDevelopment() ? inferDevFormIdBasedOnAdwordsMode() : inferFormIdBasedOnAdwordsMode();\n const iframeSrc = fullFormPath ? `${fullFormPath}${formParams}` : `${getDomainURL()}/${formId}${formParams}`;\n\n // hubspot tracking\n const _hsq = window._hsq || [];\n const [isHubspotTrackerLoaded] = useHubspotTracker({ isEnabled: true, user });\n const [iframeHeight, setIframeHeight] = useState('');\n\n // identify user in hubspot\n useEffect(() => {\n if (!isHubspotTrackerLoaded || isHubspotLoggedRef.current) return;\n _hsq.push(['identify', {\n email: user?.email\n }]);\n _hsq.push(['setPath', window.location.href]);\n _hsq.push(['trackPageView']);\n isHubspotLoggedRef.current = true;\n }, [isHubspotTrackerLoaded]);\n\n // listen submission events\n useEffect(() => {\n const handleMessage = event => {\n if (isDynamicHeightEnabled) {\n const [name, height] = event.data?.split(':');\n if (name.includes('setHeight')) {\n setIframeHeight(`${height}px`);\n }\n }\n if (\n // event.origin !== 'https://submit.jotform.com'\n event.data.action !== 'submission-completed'\n || isSubmissionLoggedRef.current) {\n return;\n }\n\n const jobTitle = formRef.current?.querySelector('input[name*=\"jobTitle\"]')?.value || '';\n const country = formRef.current?.querySelector('select[name*=\"country\"]')?.value || '';\n\n window.dataLayer?.push({\n event: 'form_submit_enterprise',\n 'data-id': gaAttributes['data-id'],\n jobTitle,\n country,\n formId\n });\n onFormSubmit();\n isSubmissionLoggedRef.current = true;\n };\n window.addEventListener('message', handleMessage);\n return () => {\n window.removeEventListener('message', handleMessage);\n };\n }, [isFrameLoaded]);\n\n // listen form interactions\n const handleLoad = ({ target }) => {\n try {\n const iframeWindow = target?.contentWindow;\n const iframeDocument = iframeWindow?.document;\n const formElement = iframeDocument?.querySelector('.jotform-form');\n formRef.current = formElement;\n\n // form input\n formElement?.addEventListener('input', () => {\n if (isFormFillingLoggedRef.current) return;\n window.dataLayer?.push({\n event: 'form_start_filling_enterprise',\n 'data-id': gaAttributes['data-id'],\n formId\n });\n isFormFillingLoggedRef.current = true;\n });\n\n // button clicks\n gaFormTrackingItems?.forEach((trackingItem = {}) => {\n const { selector = '', payload = '' } = trackingItem;\n if (!selector || !payload) return;\n const element = iframeDocument?.querySelector(selector);\n\n element?.addEventListener('click', () => {\n window.dataLayer?.push(payload); // ga log\n if (typeof trackingItem.callback === 'function') {\n trackingItem.callback(); // jotform actions log\n }\n });\n });\n } finally {\n setIsIframeLoaded(true);\n }\n };\n\n return (\n <>\n \n Admin Actions\n setIsFeedbackFormOpen(o => !o)}\n hover-tooltip=\"Give feedback to the enterprise asset\"\n >\n
\n\n \n \n {t('Protected Health Information: This field includes sensitive information. This data can’t be added.')}\n \n
\n \n);\n\nexport default ProtectedTag;\n","import React from 'react';\nimport { Tooltip } from '@jotforminc/tooltip';\nimport { t } from '@jotforminc/translation';\nimport { IconLockFilled } from '@jotforminc/svg-icons';\n\nconst EncryptedTag = () => (\n <>\n \n \n {t('Encrypted Form: This field includes encrypted information. This data can’t be added.')}\n \n
\n \n);\n\nexport default EncryptedTag;\n","/* eslint-disable react/prop-types */\nimport React from 'react';\nimport { Checkbox } from '@jotforminc/magnet';\nimport ProtectedTag from './ProtectedTag';\nimport EncryptedTag from './EncryptedTag';\n\nconst WithOptionRenderer = (isSingle, showOptionValue) => {\n return ({\n option: {\n text, value, isProtected, isEncrypted\n }, isSelected\n }) => {\n return (\n \n {text}\n {showOptionValue && (\n \n {' '}\n { ` - ${value}` }\n {' '}\n \n )}\n
\n {(isProtected || isEncrypted) && (\n \n {isProtected ?
\n )}\n \n );\n };\n};\n\nexport default WithOptionRenderer;\n","import classNames from 'classnames';\nimport {\n arrayOf, bool, func, objectOf, oneOfType, shape, string\n} from 'prop-types';\nimport React, { useState } from 'react';\nimport { t } from '@jotforminc/translation';\nimport { useFuse } from '@jotforminc/hooks';\nimport SearchInput from '@jotforminc/search-input';\n\nimport { IconMagnifyingGlass, IconAngleUp } from '@jotforminc/svg-icons';\nimport SelectionGroup from './SelectionGroup';\nimport Option from './Option';\n\nconst questionsPropType = arrayOf(\n shape({\n formTitle: string,\n questions: oneOfType([\n arrayOf(shape({ text: string, qid: string })),\n objectOf(shape({ text: string, qid: string }))\n ])\n })\n);\n\nfunction ColoredFieldsRenderer({\n formTitle,\n questions,\n color,\n optionParser,\n suggestions,\n setMenuVisibility,\n isSingle,\n defaultValue,\n hasForm,\n onChange,\n formID,\n staticFields,\n isMain,\n isExpanded,\n setExpanded\n}) {\n const options = optionParser(questions, { staticFields: staticFields.map(f => ({ ...f, placeholder: isMain ? f.placeholder : f.placeholder.replace('{', `{f${formID}_`) })) });\n const suggestedOptions = options.filter(({ text }) => suggestions?.find(({ text: suggestionText }) => text === suggestionText));\n const wrapperClasses = classNames('formFields-wrapper', { isCollapsed: !isExpanded });\n const suggestionText = suggestions?.[0]?.text?.toLowerCase();\n\n return (\n \n {\n if (!isSingle) {\n setMenuVisibility(false);\n }\n onChange(isSingle ? val : [val]);\n }}\n OptionRenderer={Option(isSingle)}\n />\n )}\n {options.length === 0 && hasForm && isExpanded && (\n
\n \n );\n}\n\nColoredFieldsRenderer.propTypes = {\n formTitle: string.isRequired,\n color: string.isRequired,\n suggestions: arrayOf(shape({})).isRequired,\n questions: arrayOf(questionsPropType).isRequired,\n hasForm: bool.isRequired,\n isSingle: bool.isRequired,\n setMenuVisibility: func.isRequired,\n defaultValue: arrayOf(string).isRequired,\n onChange: func.isRequired,\n optionParser: func.isRequired,\n formID: string.isRequired,\n staticFields: arrayOf(shape({})).isRequired,\n isMain: bool.isRequired,\n isExpanded: bool,\n setExpanded: func\n};\n\nColoredFieldsRenderer.defaultProps = {\n isExpanded: true,\n setExpanded: x => x\n};\n\nexport default function MultipleForms({\n hasForm,\n isSingle,\n setMenuVisibility,\n defaultValue,\n onChange,\n optionParser,\n formArray,\n staticFields,\n isDark\n}) {\n const [searchTerm, setSearchTerm] = useState('');\n const [expandedIndex, setExpandedIndex] = useState(0);\n const allQuestions = formArray.flatMap(q => optionParser(q.questions));\n const suggestions = useFuse(allQuestions, searchTerm, ['name', 'text']);\n const noResultFound = suggestions.length === 0 && optionParser(formArray.flatMap(q => q.questions)).length !== 0;\n\n const setExpanded = index => setExpandedIndex(expandedIndex === index ? -1 : index);\n\n return (\n \n {formTitle && (\n \n
\n )}\n {suggestedOptions.length !== 0 && hasForm && isExpanded && (\n \n {formTitle}\n
\n \n
\n \n {t(`This form doesn't have any ${suggestionText || 'appropriate'} fields to add.`)}\n
\n )}\n \n
\n );\n}\n\nMultipleForms.propTypes = {\n formArray: questionsPropType.isRequired,\n hasForm: bool.isRequired,\n isSingle: bool.isRequired,\n setMenuVisibility: func.isRequired,\n defaultValue: arrayOf(string).isRequired,\n onChange: func.isRequired,\n optionParser: func.isRequired,\n staticFields: arrayOf(shape({})).isRequired,\n isDark: string\n};\n\nMultipleForms.defaultProps = {\n isDark: false\n};\n","import {\n arrayOf, bool, func, objectOf, oneOfType, shape, string\n} from 'prop-types';\nimport React from 'react';\nimport { t } from '@jotforminc/translation';\n\nimport SelectionGroup from './SelectionGroup';\nimport Option from './Option';\n\nexport default function SingleForm({\n formTitle,\n questions,\n hasForm,\n isSingle,\n setMenuVisibility,\n defaultValue,\n onChange,\n showOptionValue,\n isEncrypted\n}) {\n const checkIsEncrypted = value => (isEncrypted && !['{form_title}', '{id}'].includes(value));\n\n const refactoredQuestions = questions.map(question => ({\n ...question,\n isEncrypted: checkIsEncrypted(question.value)\n }));\n return (\n \n
\n \n
\n \n {formArray.map(({\n formTitle, questions, color, id, isMain, staticFields: formSpecificStaticFields = undefined\n }, index) => {\n const toggleExpand = () => setExpanded(index);\n return (\n 2}\n setExpanded={toggleExpand}\n />\n );\n })}\n
\n {noResultFound ? (\n \n {t('No result found. We couldn’t find any matching items.')}\n
\n ) : null}\n {!hasForm && (\n \n {t(\"You don't have a form to select a field.\")}\n
\n )}\n \n
\n );\n}\n\nconst questionsPropType = oneOfType([\n arrayOf(shape({ text: string, qid: string })),\n objectOf(shape({ text: string, qid: string }))\n]);\n\nSingleForm.defaultProps = {\n formTitle: '',\n showOptionValue: false,\n isEncrypted: false\n};\n\nSingleForm.propTypes = {\n formTitle: string,\n questions: questionsPropType.isRequired,\n hasForm: bool.isRequired,\n isSingle: bool.isRequired,\n setMenuVisibility: func.isRequired,\n defaultValue: arrayOf(string).isRequired,\n onChange: func.isRequired,\n showOptionValue: bool,\n isEncrypted: bool\n};\n","import React, {\n useRef, useImperativeHandle, forwardRef, useEffect\n} from 'react';\nimport {\n arrayOf, shape, string, func, bool, oneOfType, objectOf\n} from 'prop-types';\nimport classNames from 'classnames';\nimport { Popover, Hooks } from '@jotforminc/uikit';\nimport { t } from '@jotforminc/translation';\nimport { getPlaceholderListWithStaticFields, preparePlaceholderDynamicList } from '@jotforminc/utils';\nimport { STATIC_FIELDS_WITH_PLACEHOLDER } from '@jotforminc/constants';\n\nimport { IconLinkDiagonal } from '@jotforminc/svg-icons';\nimport {\n SingleForm, MultipleForms\n} from './components';\n\nimport './styles/FormFields.scss';\n\nconst FormFields = forwardRef(({\n usedFromWorkflow,\n anotherFieldDropdown,\n defaultValue,\n questions,\n onChange,\n addStaticFields,\n staticFields,\n hasForm,\n formTitle,\n isSingle,\n menuTargetRef,\n isButtonVisible,\n fieldsLabelText,\n useMultipleForms,\n formArray,\n isDark,\n usePortal,\n popoverClassName,\n showOptionValue,\n showProtectedTag,\n onVisibilityChange,\n duplicatedEmails,\n isEncrypted\n}, ref) => {\n const menuRef = useRef();\n const buttonRef = useRef();\n const onButtonClickCallbackRef = useRef(null);\n const [isMenuVisible, setMenuVisibility] = Hooks.useClickOutsideState(false, [menuRef, buttonRef]);\n const isFormFieldsDisabledForWorkflow = value => duplicatedEmails && value && duplicatedEmails?.length > 0 && duplicatedEmails.includes(value);\n const getOptions = (formQuestions, opts = {}) => {\n const { staticFields: staticFieldsOptions = staticFields } = opts;\n const questionsArray = Object.values(formQuestions);\n const placeholderList = addStaticFields\n ? getPlaceholderListWithStaticFields({\n questions: questionsArray, includeSeparator: false, staticFields: staticFieldsOptions, anotherFieldDropdown, usedFromWorkflow\n })\n : preparePlaceholderDynamicList(questionsArray, anotherFieldDropdown, usedFromWorkflow);\n // 'protected' is a reserved word in strict mode. so mapeed it to isProtected field\n return placeholderList.map(({\n text, placeholder: value, disabled, isProtected\n }) => ({\n text, value, disabled: isFormFieldsDisabledForWorkflow(value) || disabled, isProtected: isProtected && showProtectedTag\n }));\n };\n\n const handleButtonClick = () => {\n onButtonClickCallbackRef.current?.();\n setMenuVisibility(!isMenuVisible);\n };\n\n useImperativeHandle(ref, () => ({\n setMenuVisibility,\n getIsMenuVisible: () => isMenuVisible,\n setOnButtonClickCallback: callback => {\n onButtonClickCallbackRef.current = callback;\n }\n }));\n\n useEffect(() => {\n onVisibilityChange(isMenuVisible);\n }, [isMenuVisible]);\n\n return (\n \n {formTitle && (\n {\n if (!isSingle) {\n setMenuVisibility(false);\n }\n onChange(isSingle ? val : [val]);\n }}\n OptionRenderer={Option(isSingle, showOptionValue)}\n />\n )}\n {questions.length === 0 && hasForm && (\n
\n \n {formTitle}\n
\n )}\n {questions.length !== 0 && hasForm && (\n \n {t(\"Your form doesn't have any appropriate fields to add.\")}\n
\n )}\n {!hasForm && (\n \n {t(\"You don't have a form to select a field.\")}\n
\n )}\n \n {isButtonVisible && (\n \n \n {useMultipleForms ? (\n
\n );\n});\n\nconst questionsPropType = oneOfType([\n arrayOf(shape({ text: string, qid: string })),\n objectOf(shape({ text: string, qid: string }))\n]);\n\nFormFields.propTypes = {\n usedFromWorkflow: bool,\n anotherFieldDropdown: bool,\n defaultValue: arrayOf(string),\n questions: questionsPropType,\n addStaticFields: bool,\n staticFields: arrayOf(shape({})),\n isSingle: bool,\n onChange: func,\n hasForm: bool,\n formTitle: string,\n menuTargetRef: shape({}),\n isButtonVisible: bool,\n fieldsLabelText: string,\n useMultipleForms: bool,\n formArray: arrayOf(shape({})),\n isDark: bool,\n usePortal: bool,\n popoverClassName: string,\n showOptionValue: bool,\n showProtectedTag: bool,\n onVisibilityChange: func,\n duplicatedEmails: shape(),\n isEncrypted: bool\n};\n\nFormFields.defaultProps = {\n usedFromWorkflow: false,\n anotherFieldDropdown: false,\n defaultValue: [],\n questions: [],\n addStaticFields: false,\n staticFields: STATIC_FIELDS_WITH_PLACEHOLDER,\n isSingle: false,\n onChange: f => f,\n hasForm: true,\n formTitle: '',\n menuTargetRef: null,\n isButtonVisible: true,\n fieldsLabelText: 'Form Fields',\n useMultipleForms: false,\n formArray: [],\n isDark: false,\n usePortal: false,\n popoverClassName: null,\n showOptionValue: false,\n showProtectedTag: false,\n onVisibilityChange: () => null,\n duplicatedEmails: [],\n isEncrypted: false\n};\n\nexport default FormFields;\n","import React, { Fragment } from 'react';\nimport {\n oneOfType, shape, string, node, elementType, bool\n} from 'prop-types';\n\nimport GrowthAssetRenderer from './GrowthAssetRenderer';\n\nconst GrowthAssetManager = ({\n campaignInfo = global.window?.campaignInfo,\n assetProps,\n assetType,\n Fallback\n}) => {\n return (\n \n
\n \n {t(fieldsLabelText)}\n
\n \n )}\n {isMenuVisible && (\n {errorMessage}
: null}\n \n {icon}\n
\n {title}
\n {subtitle}
\n {children && (\n \n {children}\n
\n )}\n {description && {description}
}\n {showDontShowAgain ? (\n \n ) : null}\n\n
\n );\n};\n\nModalHeader.propTypes = {\n t: func.isRequired,\n onClose: func.isRequired,\n isEnterprise: bool.isRequired,\n activeSection: string.isRequired\n};\n\nexport default ModalHeader;\n","import React from 'react';\nimport { func, bool, string } from 'prop-types';\nimport { Button } from '@jotforminc/magnet';\n\nconst ModalFooter = ({\n t,\n isSaveDisabled,\n isSaving,\n saveText,\n onSave,\n cancelText,\n savingText,\n onCancel\n}) => (\n \n
\n \n {t(title)}\n
\n\n {t(desc)}\n
\n\n
\n \n \n {t(cancelText)}\n \n \n {t(isSaving ? savingText : saveText)}\n \n
\n);\n\nModalFooter.propTypes = {\n t: func.isRequired,\n onSave: func.isRequired,\n onCancel: func.isRequired,\n isSaveDisabled: bool.isRequired,\n isSaving: bool,\n saveText: string,\n cancelText: string,\n savingText: string\n};\n\nModalFooter.defaultProps = {\n isSaving: false,\n saveText: 'Save',\n cancelText: 'Cancel',\n savingText: 'Saving...'\n};\n\nexport default ModalFooter;\n","import React from 'react';\nimport { node } from 'prop-types';\n\nconst ModalDialog = ({ children }) => (\n \n {children}\n
\n);\n\nModalDialog.propTypes = {\n children: node.isRequired\n};\n\nexport default ModalDialog;\n","import React from 'react';\nimport { node } from 'prop-types';\n\nconst ModalContent = ({ children }) => (\n \n
\n);\n\nModalContent.propTypes = {\n children: node.isRequired\n};\n\nexport default ModalContent;\n","import { Modal } from '@jotforminc/uikit';\nimport { func, string, bool } from 'prop-types';\nimport React, { useState, useRef, useEffect } from 'react';\nimport classNames from 'classnames';\nimport { RequestLayer, Interceptors } from '@jotforminc/request-layer';\n\nimport ModalHeader from './ModalHeader';\nimport ModalFooter from './ModalFooter';\nimport ModalDialog from './ModalDialog';\nimport ModalContent from './ModalContent';\n\nconst layer = new RequestLayer('/API', {\n interceptorConfig: {\n teamID: global.teamID,\n customResponseInterceptors: [Interceptors.requestManagerResponseNormalizer]\n }\n});\n\nconst generateSlug = async organizationName => {\n try {\n if (!organizationName) {\n return [];\n }\n\n const result = await layer.post('slug/generate', { slug: organizationName });\n return result;\n } catch (e) {\n console.log('error', e);\n return [];\n }\n};\n\nconst ERROR_MESSAGES = {\n DEFAULT: 'Link is already taken.',\n reserved: 'Link is already taken.',\n notvalid: 'URL Slug may only contain letters or combination of letters, numbers, dash and underscores (\"_-”).',\n alphanumeric: 'URL Slug may only contain letters or combination of letters, numbers, dash and underscores (\"_-”).',\n notunique: 'Link is already taken.'\n};\n\nconst FormModal = ({\n t, username, onSave, onClose, company, isEnterprise\n}) => {\n const modalRef = useRef(false);\n const timeoutRef = useRef(false);\n const [isSaving, setSaving] = useState(false);\n const [suggestions, setSuggestions] = useState([]);\n const [errorMessage, setErrorMessage] = useState('');\n const [customSlugURL, setCustomSlugURL] = useState('');\n const [organizationName, setOrganizationName] = useState(company);\n const [isSlugInputFocused, setSlugInputFocused] = useState(false);\n const [isSuggestionsLoading, setSuggestionsLoading] = useState(false);\n const [isCustomSlugURLDirty, setIsCustomSlugURLDirty] = useState(false);\n\n const isCustomSlugURLDisabled = !organizationName && !isEnterprise;\n const isSaveDisabled = isCustomSlugURLDisabled || !customSlugURL || isSaving || isSuggestionsLoading;\n\n const handleCustomSlugURLBlur = () => setSlugInputFocused(false);\n const handleCustomSlugURLFocus = () => setSlugInputFocused(true);\n const handleOrganizationNameChange = ({ target: { value } }) => setOrganizationName(value);\n const handleCustomSlugURLChange = ({ target: { value } }) => {\n setCustomSlugURL(value);\n setIsCustomSlugURLDirty(true);\n };\n const generateHandleSuggestionClick = suggestion => () => {\n setCustomSlugURL(suggestion);\n setIsCustomSlugURLDirty(true);\n };\n const handleSave = async () => {\n setSaving(true);\n try {\n setCustomSlugURL(customSlugURL?.trim?.());\n const [slugResult, settingsResult] = await Promise.all([\n layer.post('slug/users', { username, slug: customSlugURL?.trim?.() }),\n isEnterprise ? new Promise(resolve => resolve(true)) : layer.post(`user/${username}/settings?company=${organizationName}`)\n ]);\n\n setSaving(false);\n if (!slugResult || !settingsResult) {\n return;\n }\n\n onSave({ customSlugURL, organizationName });\n } catch (e) {\n const errorType = e.data?.message;\n const errorMessageFromAPI = ERROR_MESSAGES[errorType] || ERROR_MESSAGES.DEFAULT;\n setSaving(false);\n setErrorMessage(errorMessageFromAPI);\n console.log('error', e);\n }\n };\n\n useEffect(() => {\n setErrorMessage('');\n }, [customSlugURL]);\n\n useEffect(() => {\n if (company === organizationName && company && suggestions.length) {\n generateSlug(organizationName).then(result => {\n if (result.length > 0) {\n if (!isCustomSlugURLDirty) {\n const [firstSuggestion, ...remainingSuggestions] = result;\n setCustomSlugURL(firstSuggestion);\n setSuggestions(remainingSuggestions);\n } else {\n setSuggestions(result);\n }\n }\n setSuggestionsLoading(false);\n });\n }\n }, [company, organizationName]);\n\n useEffect(() => {\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n }\n\n if (organizationName) {\n timeoutRef.current = setTimeout(async () => {\n setSuggestionsLoading(true);\n try {\n const result = await generateSlug(organizationName);\n if (result.length > 0) {\n if (!isCustomSlugURLDirty) {\n const [firstSuggestion, ...remainingSuggestions] = result;\n setCustomSlugURL(firstSuggestion);\n setSuggestions(remainingSuggestions);\n } else {\n setSuggestions(result);\n }\n }\n\n setSuggestionsLoading(false);\n } catch (e) {\n console.log('error', e);\n setSuggestionsLoading(false);\n }\n }, 1000);\n }\n }, [organizationName]);\n\n const slugPrefix = window.JOTFORM_ENV === 'PRODUCTION' ? 'app.jotform.com/' : `${window.location.host}/app/`;\n\n return (\n \n {children}\n
\n \n {!isEnterprise && (\n
\n \n \n
\n )}\n \n
\n {t('Custom URL Slug')}
\n \n
\n {suggestions.length > 0 ? (\n \n {slugPrefix}\n
\n \n Suggestions: \n \n {suggestions.reduce((prev, suggestion, index) => [\n ...prev,\n index !== 0 ? ', ' : '',\n (\n \n {suggestion}\n \n )\n ], [])}\n \n
\n ) : null}\n {errorMessage\n && (\n \n {t(errorMessage)}\n
\n )}\n \n {t('This slug will be used for all custom links on Jotform Apps.')}\n
\n \n
\n \n );\n};\n\nThankYouModal.propTypes = {\n t: func.isRequired,\n onClose: func.isRequired\n};\n\nexport default ThankYouModal;\n","import { func } from 'prop-types';\nimport React, { useRef } from 'react';\n\nimport { IconExclamationCircle } from '@jotforminc/svg-icons';\nimport {\n Button,\n Dialog,\n DialogBody,\n DialogIcon,\n DialogTitle,\n DialogDescription,\n DialogActions,\n DialogCloseButton\n} from '@jotforminc/magnet';\nimport { t } from '@jotforminc/translation';\n\nconst UpdateModal = ({\n onClose, onComplete\n}) => {\n const modalRef = useRef(false);\n const handleContinue = () => {\n onComplete();\n modalRef.current?.hide?.();\n };\n\n const handleClose = () => {\n onClose();\n modalRef.current?.hide?.();\n };\n\n return (\n \n
\n \n
\n \n {t(title)}\n
\n \n {translationRenderer(desc)({\n renderer1: text => {text}\n })}\n
\n \n {t('This action is irreversible.')}\n
\n
\n {icon && {text}
\n {description || desc}
\n {children}\n \n
\n );\n }\n}\n\nexport default ErrorPage;\n","import React, { lazy } from 'react';\nimport { render } from 'react-dom';\nimport Tracking from '@jotforminc/tracking';\nimport { ErrorPage } from '../components';\n\n// For future needs\n// const getChunkName = name => {\n// const startIndex = name.indexOf('|') + 2;\n// const endIndex = name.indexOf('*/') - 1;\n// return (startIndex && endIndex)\n// ? name.substr(startIndex, endIndex - startIndex)\n// : 'generic';\n// };\n\nconst safeLazy = componentImport => lazy(async () => {\n try {\n const component = await componentImport();\n return component;\n } catch (error) {\n Tracking.configureScope(scope => {\n scope.addBreadcrumb({\n message: 'Failed to load lazy script',\n category: 'editor',\n level: 'error'\n });\n });\n Tracking.captureException(error);\n let root = [...document.body.children].find(elem => elem._reactRootContainer);\n if (!root) { // as a fallback\n root = document.createElement('div');\n root.className = 'safe-lazy-root';\n document.body.appendChild(root);\n }\n render(\n
\n \n
\n \n window.location.reload()}\n className=\"jfErrorPage-action\"\n >\n {t('Refresh')}\n \n
\n \n
\n \n {t('Something went wrong')}\n
\n \n {t('Please refresh the page to try again.')}\n
\n {header}
\n {headerHasCloseButton && (\n \n {children}\n
\n );\n};\n\nTab.propTypes = {\n id: string.isRequired,\n children: node.isRequired\n};\n\nexport default Tab;\n","import React, {\n Children,\n forwardRef,\n useImperativeHandle,\n useEffect,\n useState,\n useMemo\n} from 'react';\nimport {\n objectOf, shape, node, string, elementType, arrayOf, func\n} from 'prop-types';\n\nconst TabList = forwardRef(({\n list, children, defaultActiveTab, erroredTabs, onTabChange,\n Wrapper, TabButton, TabButtonContainer, TabListContainer, TabContainer, activeTabClassName, tabButtonClassName\n}, tabListRef) => {\n const tabs = Object.entries(list);\n const [activeTabID, setActiveTabID] = useState(defaultActiveTab || tabs[0][0]);\n useImperativeHandle(tabListRef, () => ({ setActiveTabID, activeTabID }));\n\n useEffect(() => {\n onTabChange(activeTabID);\n }, [activeTabID]);\n\n const generateTabClickHandler = id => () => setActiveTabID(id);\n const tabIdPrefix = useMemo(() => Math.random().toString(36).slice(2), []);\n const tabButtonPrefix = useMemo(() => Math.random().toString(36).slice(2), []);\n\n return (\n \n {text &&
\n )}\n {text}
}\n {desc && {desc}
}\n {icon}
: null;\n }\n\n renderV1() {\n const {\n text,\n onClick,\n backgroundColor,\n color,\n children,\n customProps\n } = this.props;\n\n return (text || children) ? (\n \n
\n \n \n ) : null;\n }\n\n renderV2() {\n const {\n v2,\n animated,\n className,\n backgroundColor,\n wrapperClassName,\n isVisible,\n children,\n align,\n attach,\n customProps,\n style,\n allowHover,\n hideArrow,\n tooltipDistance,\n tooltipArrowDistance,\n noWrap,\n ...props\n } = this.props;\n\n const isVertical = VerticalAttachments.indexOf(attach) >= 0;\n\n return children ? (\n \n {this.renderIcon()}\n
\n {children || text}
\n \n \n
\n \n {children}\n
\n \n ) : null;\n }\n\n render() {\n const { v2 } = this.props;\n return !v2 ? this.renderV1() : this.renderV2();\n }\n}\n\nTooltip.propTypes = {\n v2: bool,\n className: string,\n children: node,\n icon: oneOfType([\n elementType,\n node\n ]),\n text: string,\n align: oneOf(['Left', 'Center', 'Right', 'Start', 'End']),\n attach: oneOf([...VerticalAttachments, ...HorizontalAttachments]),\n animated: bool,\n onClick: func,\n wrapperClassName: string,\n backgroundColor: string,\n color: string,\n isVisible: bool,\n allowHover: bool,\n hideArrow: bool,\n noWrap: bool,\n renderInContainer: bool,\n tooltipDistance: string,\n tooltipArrowDistance: string,\n style: shape({}),\n customProps: shape({})\n};\n\nTooltip.defaultProps = {\n v2: false,\n className: null,\n children: null,\n icon: null,\n text: null,\n align: 'Center',\n attach: 'Top',\n animated: false,\n onClick: f => f,\n wrapperClassName: null,\n backgroundColor: null,\n color: null,\n isVisible: false,\n allowHover: false,\n hideArrow: false,\n noWrap: false,\n renderInContainer: false,\n tooltipDistance: null,\n tooltipArrowDistance: null,\n style: {},\n customProps: {}\n};\n","// Clear translation visibility classes\nexport const clearTranslationMarkup = () => {\n // Get elements with the class\n const elements = global.document.body.querySelectorAll('.js-translationBlocker');\n\n // Get direct parents of translation texts\n const textParents = global.document.body.querySelectorAll('.js-translationText');\n\n // Get select parents of translation texts\n const selectParents = global.document.body.querySelectorAll('.js-translationSelect');\n\n // Convert node list to array and remove class from each element\n Object.values(elements).forEach(el => el && el.classList && el.classList.remove('js-translationBlocker'));\n // Object.values(textParents).forEach(el => el && el.classList && el.classList.remove('js-translationText'));\n Object.values(textParents).forEach(el => {\n // eslint-disable-next-line no-unused-expressions\n if (el && el.classList) {\n const elc = el;\n elc.style.outline = 'none';\n elc.style.position = 'initial';\n elc.style.zIndex = 'initial';\n el.classList.remove('js-translationText');\n }\n });\n Object.values(selectParents).forEach(el => {\n // Return if not a valid dom element\n if (!el || !el.classList) {\n return false;\n }\n\n // Get original size and multiple values of element if there were exist\n const originalSize = el.getAttribute('data-tempsize');\n const originalMultiple = el.getAttribute('data-tempmultiple');\n\n // Remove temporary attributes\n el.removeAttribute('data-tempsize');\n el.removeAttribute('data-tempmultiple');\n\n // If any one of them was setted then add them again; otherwise remove them\n if (originalSize !== 'null') {\n el.setAttribute('size', originalSize);\n } else {\n el.removeAttribute('size');\n }\n\n if (originalMultiple !== 'null') {\n el.setAttribute('multiple', originalMultiple);\n } else {\n el.removeAttribute('multiple');\n }\n\n // Lastly remove translation class\n el.classList.remove('js-translationSelect');\n });\n};\n\nexport const addTranslationMarkup = (el, initial = true) => {\n // If element is body or global then no need to process further\n if (el === global || el === global.document || el === global.document.body) return true;\n\n // If element or style belongs to it is undefined then terminate the process\n if (!el) return false;\n\n // Put text class at initial call\n if (initial) {\n el.parentElement.classList.add('js-translationText');\n\n const parent = el.parentElement;\n parent.style.outline = '3px solid #F00';\n parent.style.position = 'relative';\n parent.style.zIndex = '1000';\n }\n\n // Process if style is defined\n if (el.style) {\n // Get current style values of the element\n const currentStyle = global.getComputedStyle(el);\n\n // Check if one of the invisibility requirements it satisfied\n if (currentStyle.display === 'none' || currentStyle.opacity === '0' || currentStyle.visibility === 'hidden' || currentStyle.maxHeight === '0px') {\n // Add visibility class of translation\n el.classList.add('js-translationBlocker');\n }\n }\n\n if (el.tagName === 'SELECT') { // Handle select to show all options\n // Keep size and multiple attributes temporarily\n el.setAttribute('data-tempsize', el.getAttribute('size'));\n el.setAttribute('data-tempmultiple', el.getAttribute('multiple'));\n\n // Add size attribute temporarly to show all options\n el.setAttribute('size', el.length);\n el.setAttribute('multiple', 'multiple');\n\n // Add translation class to set height and mark select as dirty to clear later\n el.classList.add('js-translationSelect');\n }\n\n return addTranslationMarkup(el.parentElement, false);\n};\n\n// Finds elements that contains one of the texts passed\nexport const searchTextInDOM = (el, texts) => {\n // No need to parse the dom if it belongs to one of the given tags\n if (['SCRIPT', 'SVG', 'IMG', 'STYLE', 'INPUT', 'PATH'].indexOf(el.tagName) !== -1) {\n return null;\n }\n\n // If classList is defined for given element\n if (el.classList && el.classList.value) {\n // Define classes that we do not want to search\n // const classesToBeFiltered = [/hideOnDesktop/, /hide-on-builder/, /tabMenu/, /toggleText-mobile/, /hide-on-crawler/];\n const classesToBeFiltered = [/hideOnDesktop/, /toggleText-mobile/, /hide-on-crawler/];\n\n // Check if classList contains one of the unwanted classes\n if (classesToBeFiltered.some(rgx => rgx.test(el.classList.value))) {\n return null;\n }\n }\n\n // If still a child exist then parse tree deeper\n if (el.childNodes && el.childNodes.length !== 0) {\n return Object.values(el.childNodes) // Convert nodeList to array\n .filter(child => typeof child === 'object') // Remove numbers and functions to take only nodes(objects)\n .map(child => searchTextInDOM(child, texts)) // Call every node element with parseTree (recursive)\n .reduce((prev, curr) => (curr !== null ? prev.concat(curr) : prev), []); // Reduce results to one array\n }\n\n // Check if text content is one of the strings we are searching\n if (el.textContent && texts.indexOf(el.textContent.trim()) > -1) {\n return el;\n }\n\n return null;\n};\n\n// Checks if element is in viewport\nexport const isInViewport = el => {\n if (el === null) {\n return false;\n }\n if (typeof el.offsetTop === 'undefined') {\n return isInViewport(el.parentNode);\n }\n\n // Get recteangle information of element\n const elementRect = el.getBoundingClientRect();\n\n // Get window height and width\n const windowHeight = global.window.innerHeight;\n const windowWidth = global.window.innerWidth;\n\n // Get scrolling x and y\n const scrollX = global.window.pageXOffset;\n const scrollY = global.window.pageYOffset;\n\n // eslint-disable-next-line max-len\n if (elementRect.top + elementRect.height < windowHeight + scrollY && elementRect.left + elementRect.width < windowWidth + scrollX && elementRect.top + elementRect.height > 0 && elementRect.left + elementRect.width > 0) {\n return true;\n // eslint-disable-next-line no-else-return\n } else {\n // eslint-disable-next-line no-lonely-if\n if (global.window.casperJsTest) {\n el.scrollIntoView({ behavior: 'auto', block: 'center' });\n return true;\n // eslint-disable-next-line no-else-return\n } else {\n return false;\n }\n }\n};\n\n// Get text contents of dom elements\nexport const getTextContents = elements => elements.map(el => el.textContent.trim());\n","import qs from 'qs';\nimport Axios from 'axios';\nimport Polyglot from 'node-polyglot';\nimport domtoimage from 'dom-to-image-more';\nimport isUndefined from 'lodash/isUndefined';\n\nimport {\n isInViewport,\n getTextContents,\n searchTextInDOM,\n addTranslationMarkup,\n clearTranslationMarkup\n} from './domHelper';\n\nclass Translation {\n constructor() {\n // Default value settings\n this.defaultLang = 'en-US';\n this.processedStrings = {};\n this.usedTranslations = [];\n this.untranslatedStrings = {};\n this.currentLocale = this.defaultLang;\n this.filterClasses = [\n 'ace_editor',\n 'ace-solarized-dark',\n 'ace_dark',\n 'input-group',\n 'isAvatar',\n 'jfHeader-userAvatar',\n 'themesListItem-img',\n 'themesListItem-imgAspect',\n 'prevUploads-list',\n 'card-leftSide',\n 'jfQuestion-fields-contentVisible',\n 'appBox-image'\n ];\n this.filterTags = [\n 'IFRAME',\n 'IMG'\n ];\n this.dictionaries = {\n [this.defaultLang]: new Polyglot({\n phrases: {},\n locale: this.defaultLang.split('-')[0],\n allowMissing: true\n })\n };\n\n this.interpolation = { templateSyntax: /\\{.\\}*\\w+\\}/g, eraseTemplate: /\\{|\\}/g };\n // Variables related to delayed submitNotTranslated function\n this.callTimer = null;\n\n // Number of elements to be processed and send to server at once\n this.processLimit = 1;\n\n // Debounce time for process function\n this.debounceTime = 1000;\n\n // Function binds\n this.setLocale = this.setLocale.bind(this);\n this.resetProcess = this.resetProcess.bind(this);\n this.limitElements = this.limitElements.bind(this);\n this.orderElements = this.orderElements.bind(this);\n this.takeScreenShot = this.takeScreenShot.bind(this);\n this.debounceProcess = this.debounceProcess.bind(this);\n this.handleMissingKey = this.handleMissingKey.bind(this);\n this.submitNotTranslated = this.submitNotTranslated.bind(this);\n this.processNotTranslated = this.processNotTranslated.bind(this);\n this.updateProcessedStrings = this.updateProcessedStrings.bind(this);\n this.rotateUntranslatedStrings = this.rotateUntranslatedStrings.bind(this);\n this.filterUntranslatedStrings = this.filterUntranslatedStrings.bind(this);\n this.translate = this.translate.bind(this);\n this.initServerSideDictionary = this.initServerSideDictionary.bind(this);\n }\n\n // Getter for getting untranslated string list of current language\n get currentLocaleUntranslated() {\n return Array.isArray(this.untranslatedStrings[this.currentLocale]) ? this.untranslatedStrings[this.currentLocale] : [];\n }\n\n // Get processed elements in this session\n get currentProcessed() {\n return Array.isArray(this.processedStrings[this.currentLocale]) ? this.processedStrings[this.currentLocale] : [];\n }\n\n // Get single array that contains all untranslated strings\n get allUntranslatedStrings() {\n return Object.keys(this.untranslatedStrings).reduce(\n (prev, curr) => prev.concat(this.untranslatedStrings[curr]),\n []\n );\n }\n\n initServerSideDictionary(langCode, dictionary) {\n this.add(langCode, dictionary);\n }\n\n // Sets current locale and fetch untranslated list if it still does not exist\n setLocale(code) {\n // Set locale of objectcurrentLocale\n this.currentLocale = code;\n }\n\n // Update untranslatedStrings array by removing sended strings\n filterUntranslatedStrings(langCode, strings) {\n this.untranslatedStrings = {\n\n ...this.untranslatedStrings,\n [langCode]: this.untranslatedStrings[langCode].filter(str => strings.indexOf(str) === -1)\n };\n }\n\n // Update unprocessedStrings by adding sended strings\n updateProcessedStrings(langCode, strings) {\n // Add processed words to processed list\n this.processedStrings = {\n\n ...this.processedStrings,\n [langCode]: this.processedStrings[langCode] ? this.processedStrings[langCode].concat(strings) : strings\n };\n }\n\n // Add sended str to the untranslatedStrIngs array of current locale\n addUntranslatedString(str) {\n this.untranslatedStrings = {\n\n ...this.untranslatedStrings,\n [this.currentLocale]: this.currentLocaleUntranslated.concat([str])\n };\n }\n\n // Move given strings to the end of their respective array\n rotateUntranslatedStrings(strings) {\n // For each key filter given strings and append found ones to the end\n this.untranslatedStrings = Object.keys(this.untranslatedStrings).reduce((prev, curr) => {\n // Get matched strings array of given locale\n const foundStrings = this.untranslatedStrings[curr].filter(str => strings.indexOf(str) > -1);\n\n // First filter given strings and then append them afterward\n return {\n\n ...prev,\n [curr]: this.untranslatedStrings[curr].filter(str => foundStrings.indexOf(str) < 0).concat(foundStrings)\n };\n }, {});\n }\n\n // Order given dom elements respect to their position as strings in untranslated array\n orderElements(elements) {\n // No need to order if only one is found\n if (elements.length <= 1) {\n return elements;\n }\n\n // Get strings of elements\n const textContents = getTextContents(elements);\n\n // Order elements by looking their string positions\n return this.allUntranslatedStrings.filter(str => textContents.indexOf(str) > -1).map(str => elements[textContents.indexOf(str)]);\n }\n\n // Initializes locale and the dictionary belongs to it\n add(code = '', dictionary = {}) {\n // Initialize locale\n this.setLocale(code);\n\n if (isUndefined(this.dictionaries[code])) {\n // Add sended dictionary to the current list\n this.dictionaries = {\n\n ...this.dictionaries,\n [code]: new Polyglot({\n phrases: dictionary,\n locale: code.split('-')[0],\n onMissingKey: this.handleMissingKey // This function will be triggered if the text does not exist in translation list\n })\n };\n }\n }\n\n // Translate string using Polyglot api\n translate(str, params) {\n let translated = str;\n if (typeof params === 'object' && Object.keys(params).length) {\n const variables = str.match(this.interpolation.templateSyntax);\n variables?.forEach(strVar => {\n // Remove template string characters and get variable name.\n const variableName = strVar.replace(this.interpolation.eraseTemplate, '');\n // If there is a value for given key, replace the key with given value\n if (params[variableName]) {\n translated = translated.replace(strVar, params[variableName]);\n }\n });\n }\n\n if (!this.usedTranslations.includes(str)) {\n this.usedTranslations.push(str);\n }\n\n return this.dictionaries[this.currentLocale].t(translated, params);\n }\n\n // Handler for texts that does not have translation\n handleMissingKey(str, options) {\n // Further process is limited to certain users\n if (!(global.window.useTranslationScreenshots === true)) {\n return Polyglot.transformPhrase(str, options);\n }\n\n // If it is already in processed list then skip processing it\n if (this.currentProcessed.indexOf(str) > -1) {\n return Polyglot.transformPhrase(str, options);\n }\n\n // Do not try to process if string is empty or only contains space\n if (/^\\s+$/.test(str)) {\n return '';\n }\n\n // Add founded word to untranslated texts if it does not exist\n if (this.currentLocaleUntranslated.indexOf(str) === -1) {\n this.addUntranslatedString(str);\n }\n\n // Call debounced process (works every n seconds where n is this.processLimit)\n this.debounceProcess();\n }\n\n // Delays the call of submitNotTranslated\n debounceProcess() {\n // If a timer is already started\n if (this.callTimer !== null) {\n // Do not process any further\n return;\n }\n\n // Restart timer\n this.callTimer = setTimeout(this.processNotTranslated, this.debounceTime);\n }\n\n // Limits sended dom elements according to the constants set in class\n limitElements(elements) {\n // Limit the elements based on the processLimit variable\n return elements.slice(0, this.processLimit);\n }\n\n // Filters false positive translations by looking their screenshot values\n filterFalseTranslations(strings, screenshots) {\n // Indexes of false screenshots\n const emptyIndexes = screenshots.reduce((prev, curr, index) => { return curr === false ? prev.concat([index]) : prev; }, []);\n\n // Filter strings that matched with false screenshot results\n const filteredStrings = {\n\n ...strings,\n [this.currentLocale]: strings[this.currentLocale].filter((str, index) => emptyIndexes.indexOf(index) < 0)\n };\n\n // Filter false screenshots\n const filteredScreenshots = screenshots.filter((ss, index) => emptyIndexes.indexOf(index) < 0);\n\n // Return filtered strings and screenshots\n return {\n filteredStrings,\n filteredScreenshots\n };\n }\n\n // Prepares object for next translation process\n resetProcess(strings = []) {\n // Clear timer as the submit promises are resolved\n clearTimeout(this.callTimer);\n this.callTimer = null;\n\n // If there is still an untranslated string in the list\n if (this.currentLocaleUntranslated.length !== 0) {\n if (strings.length !== 0) {\n // Rotate strings that tried to be translated before if they still exist\n this.rotateUntranslatedStrings(strings);\n }\n\n // Try to call process again\n this.debounceProcess();\n }\n }\n\n // Filter and screenshot process\n processNotTranslated() {\n // Get body for dom earch\n let node = '';\n if (global.window.casperjsTestDomParam) {\n node = global.document.querySelector(decodeURI(global.window.casperjsTestDomParam));\n /* eslint-disable no-console */\n console.log('global.window.casperjsTestDomParam', global.window.casperjsTestDomParam);\n /* eslint-enable no-console */\n } else {\n node = global.document.body;\n }\n\n // Search all texts accross dom elements to find their containers\n const foundElements = searchTextInDOM(node, this.allUntranslatedStrings);\n\n /* eslint-disable no-console */\n console.log('this.allUntranslatedStrings', this.allUntranslatedStrings);\n console.log('foundElements', foundElements);\n /* eslint-enable no-console */\n\n // If could not found any element then reset the process\n if (!foundElements || foundElements.length === 0) {\n if (global.window.casperJsTest) {\n global.window.captureInProcess = false;\n /* eslint-disable no-console */\n console.log('capture process finished!');\n /* eslint-enable no-console */\n }\n // Clear timer\n return this.resetProcess();\n }\n\n // Order these elements to match with their respected string positions in untranslated strings array\n const orderedFoundElements = this.orderElements(foundElements);\n\n // Limit the number of elements to be processed\n const elementsToProcess = this.limitElements(orderedFoundElements);\n\n // Get strings of found elements\n const foundStrings = getTextContents(elementsToProcess);\n\n // Get only matched strings from unstranslated list\n const untranslatedToPost = Object.keys(this.untranslatedStrings).reduce((prev, curr) => ({\n\n ...prev,\n [curr]: this.untranslatedStrings[curr].filter(str => foundStrings.indexOf(str) > -1)\n }), {});\n\n // Create promise for each screenshot\n const ssPromises = Object.values(elementsToProcess).reduce((prev, curr) => { return typeof curr === 'object' ? prev.concat([this.takeScreenShot(node, curr)]) : prev; }, []);\n\n Promise.all(ssPromises) // After all screenshots taken\n .then(ssDataAll => this.filterFalseTranslations(untranslatedToPost, ssDataAll)) // Filter false positive translations\n // After resolving all of the promises just pass them to the not transalted submission\n .then(({ filteredStrings, filteredScreenshots }) => this.submitNotTranslated(filteredStrings, filteredScreenshots))\n // Reset required variables and do post process jobs to prepare object for next translation after submissions\n .then(submitPromises => Promise.all(submitPromises).then(() => this.resetProcess(foundStrings)));\n }\n\n // Submit not translated strings\n submitNotTranslated(untranslatedToPost, ssDataAll) {\n // Send translation request for each key separately\n return Object.keys(untranslatedToPost).map(langCode => {\n // Get strings to send\n const strings = untranslatedToPost[langCode];\n\n let depthCount = 0;\n let depthLabel = '';\n if (global.window.casperJsTest) {\n if (global.window.depthCount) {\n depthCount = global.window.depthCount;\n }\n if (global.window.depthLabel) {\n depthLabel = global.window.depthLabel;\n }\n }\n\n // No need to send data if one of them is empty or their lengths are not equal to each other\n if (strings.length === 0 || ssDataAll.length === 0 || strings.length !== ssDataAll.length) {\n if (global.window.casperJsTest) {\n global.window.captureInProcess = false;\n /* eslint-disable no-console */\n console.log('capture process finished!');\n /* eslint-enable no-console */\n }\n return false;\n }\n\n Axios.post('/server.php', qs.stringify({\n action: 'submitNotTranslated',\n lang_code: langCode,\n raw: untranslatedToPost[langCode].join('__NOT_TRANSLATED__'),\n autoSuggestion: false,\n depthCount,\n depthLabel,\n screenshot: ssDataAll.join('|||')\n }), {\n 'Content-Type': 'application/x-www-form-urlencoded'\n })\n .then(() => {\n // Move processed strings to processed list\n this.updateProcessedStrings(langCode, untranslatedToPost[langCode]);\n\n // Filter them from untranslated list\n this.filterUntranslatedStrings(langCode, untranslatedToPost[langCode]);\n });\n\n return true;\n });\n }\n\n // Take screenshot of given node if foundElement is visible in that dom\n takeScreenShot(node, foundElement) {\n // Try to make every element visible on found elements\n const visibilityResult = addTranslationMarkup(foundElement);\n if (global.window.casperJsTest) {\n /* eslint-disable no-console */\n console.log('foundElement', foundElement.wholeText);\n /* eslint-enable no-console */\n }\n // Do not need to take ss if element is invisible or not in viewport\n if (!visibilityResult || !isInViewport(foundElement)) {\n /* eslint-disable no-console */\n console.log('the element is invisible or not in viewport');\n /* eslint-enable no-console */\n // Clear visibility\n clearTranslationMarkup();\n\n // Return false due to it does not exist on screen\n return false;\n }\n\n // If the page is loaded by casperjs\n if (global.window.casperJsTest) {\n // Send capture command to casperjs as error\n /* eslint-disable no-console */\n console.log('capture');\n /* eslint-enable no-console */\n\n // Resolve with base64 encoded ss data\n return new Promise(resolve => {\n setTimeout(() => {\n // Take ss data\n const capturedData = global.window.tempCaptureData;\n\n // Clear temporary data\n global.window.tempCaptureData = null;\n\n // Clear visibility classes\n clearTranslationMarkup();\n\n // Return screenshot\n resolve(capturedData);\n }, 2000);\n });\n }\n\n // Take screenshot and return base64 encoded form using visibility css\n return new Promise(resolve => domtoimage.toPng(\n node,\n {\n filter: el => {\n // Return if element is not valid to check\n if (!el || !el.className || !el.tagName || typeof el.className !== 'string') {\n return true;\n }\n\n // If element is one of the tags to be filtered from screenshot\n if (this.filterTags.indexOf(el.tagName) > -1) {\n return false;\n }\n\n const filteredNodeClass = el.className.split(' ').filter(classStr => this.filterClasses.indexOf(classStr) !== -1);\n\n return filteredNodeClass.length === 0;\n }\n }\n )\n .then(dataUrl => {\n // Clear visibility classes\n clearTranslationMarkup();\n\n // Return screenshot\n resolve(dataUrl);\n }));\n }\n}\n\nexport const translation = global.Translations || new Translation();\n\nexport default Translation;\n","export const langCodes = {\n tr: 'tr-TR',\n en: 'en-US',\n es: 'es-ES',\n pt: 'pt-PT',\n fr: 'fr-FR',\n de: 'de-DE',\n it: 'it-IT',\n bg: 'bg-BG',\n sr: 'sr-BA',\n hu: 'hu-HU',\n fi: 'fi-FI',\n ka: 'ka-GE',\n nl: 'nl-NL',\n uk: 'uk-UA',\n ua: 'uk-UA',\n id: 'id-ID',\n ko: 'ko-KR',\n ar: 'ar-AR',\n ja: 'ja-JP',\n pl: 'pl-PL',\n ca: 'ca-ES',\n sv: 'sv-SE',\n no: 'no-NO',\n da: 'da-DA',\n ro: 'ro-RO',\n ru: 'ru-RU',\n zh: 'zh-CN',\n 'zh-CN': 'zh-CN',\n 'zh-HK': 'zh-HK',\n af: 'af-ZA',\n he: 'he-IL'\n};\n\nexport const partialTranslations = {\n 'animal-shelter': path => /(jotform.com|jform.co.kr|jotform.pro)(\\/){1}(animal-shelter){1}/g.test(path)\n};\n\n/**\n * Returns Jotform translation files suffix (locale/locale_SUFFIX.js)\n * @param {string} localeCode - lang-[country] (en-US, pt-BR, en)\n * @return {string} A value from langCodes object.\n */\nexport const getLangFileSuffix = localeCode => {\n const lang = localeCode.split('-')[0];\n return langCodes[localeCode] || langCodes[lang];\n};\n\nexport const DEFAULT_LANGUAGE = 'en-US';\n","import axios from 'axios';\nimport isNil from 'lodash/isNil';\n\nimport { encodeUsedTranslations, unlocalizeOriginHref } from './utils';\nimport { partialTranslations, DEFAULT_LANGUAGE } from './constants';\n\nexport const prepareT = translation => function t(str, params = {}) {\n if (!str) {\n return str;\n }\n if (typeof str !== 'string') {\n return str;\n }\n\n if ((global?.window?.location?.href || '')?.includes('rawTranslationTextMode=true')) {\n return str;\n }\n\n let translated = str;\n try {\n if (typeof translation.translate === 'function') {\n translated = translation.translate(str, params);\n } else if (typeof translation.t === 'function') {\n translated = translation.t(str, params);\n }\n if (typeof global?.window?.useTranslationScreenshots !== 'undefined') {\n return str;\n }\n if (translation.currentLocale !== DEFAULT_LANGUAGE && str !== translated && translation.controlMode) {\n return '1';\n }\n } catch (e) {\n console.error('Error on common/translate falling back with original str', e);\n }\n\n const resp = (params.branding21) ? translated.replace(/JotForm/g, 'Jotform') : translated;\n\n return resp;\n};\n\nexport const preapreTtime = translation => function ttime(str, options = {}) {\n const { hour = 'numeric', minute = 'numeric' } = options;\n const formatOptions = { hour, minute };\n let [hourVal, minuteVal] = str.replace('/am|pm/', '').split(':').map(i1 => parseInt(i1, 10)); //eslint-disable-line\n\n if (str.indexOf('pm') > 0) {\n hourVal = hourVal !== 12 ? hourVal + 12 : hourVal;\n } else if (str.indexOf('am') > 0) {\n hourVal = hourVal === 12 ? 0 : hourVal;\n }\n\n const tempDate = new Date();\n tempDate.setHours(hourVal, minuteVal);\n // eslint-disable-next-line no-restricted-globals\n if (isNaN(tempDate.getTime())) {\n return str;\n }\n return tempDate.toLocaleTimeString(translation.currentLocale, formatOptions);\n};\n\nexport const prepareTDate = translation => function tdate(str, options = {}) {\n try {\n const ttime = preapreTtime(translation);\n if (options.timeOnly) {\n return ttime(str, options);\n }\n const dateObj = new Date(str);\n // eslint-disable-next-line no-restricted-globals\n if (isNaN(dateObj.getTime())) {\n return str;\n }\n // Add undesired fields with null values to options object. Ex:{weekday : null}\n const formatOptions = {\n weekday: 'short', year: 'numeric', month: 'short', day: 'numeric'\n };\n if (options && typeof options === 'object') {\n Object.keys(options).forEach(optionName => {\n if (options[optionName] == null) {\n delete formatOptions[optionName];\n } else {\n formatOptions[optionName] = options[optionName];\n }\n });\n }\n return dateObj.toLocaleDateString(translation.currentLocale, formatOptions);\n } catch (err) {\n return str;\n }\n};\n\n// Example usage:\n/*\n translationRenderer('This is an [1[example]] string [2[for]] translation')({\n renderer1: (str) => {str}; // str is \"example\"\n fallback: (str) => \n {text}\n
\n ),\n ContainerRenderer: forwardRef(({ children, id }, ref) => (\n {children}
\n {text}
,\n OptionContainerRenderer: props => ,\n TextInputRenderer: forwardRef(({ ...props }, ref) => \n {children}\n
\n ),\n ContentRenderer: ({ children }) => (\n {children}
,\n FooterRenderer: ({ children }) => {children}
,\n reffedDivProps: {},\n onModalClose: () => {},\n closeOnEscPress: true,\n exceptionalSelectorList: [],\n autoFocus: true,\n currentActiveElementRef: null,\n initialPortalSelector: '',\n ariaLabel: ''\n};\n\nexport default Modal;\n","import React from 'react';\nimport {\n shape, func, elementType, bool, oneOfType, string, number\n} from 'prop-types';\n\nimport { isPressedKeyEnter } from '../../utils';\n\nconst Option = ({\n option, setSelected, ContainerRenderer, Renderer, isSelected, disabled, OptionContainerRendererProps\n}) => {\n const handleSelection = opt => {\n if (disabled) return;\n setSelected(opt);\n };\n\n const onOptionClick = opt => () => handleSelection(opt);\n const onOptionKeyPress = opt => event => isPressedKeyEnter(event) && handleSelection(opt);\n const ContainerRendererProps = typeof OptionContainerRendererProps === 'function' ? OptionContainerRendererProps(option) : OptionContainerRendererProps;\n return (\n {text}
\n};\n\nexport default Option;\n","import React, { forwardRef } from 'react';\nimport {\n arrayOf, oneOfType, string, number, shape, elementType, bool, func\n} from 'prop-types';\n\nimport Option from '../Option';\n\nconst OptionGroup = forwardRef(({\n options, setSelected, checkOptionSelectionState, ContainerRenderer, OptionContainerRenderer, OptionRenderer, disabled, GroupRenderer, text, OptionContainerRendererProps, groupIcon,\n NoResultsRenderer, onClearFilter, inputValue, containerID\n}, ref) => {\n if (inputValue && !options.length && NoResultsRenderer) {\n return \n {text}\n
\n ),\n ContainerRenderer: forwardRef(({ children }, ref) => {children}
\n - {children}
{text}
,\n NoResultsRenderer: null,\n inputValue: ''\n};\n\nexport default OptionGroup;\n","import React, {\n forwardRef, useRef, useEffect, useState, useMemo\n} from 'react';\nimport {\n node, shape, bool, string, func\n} from 'prop-types';\nimport { createPopper } from '@popperjs/core';\n\nimport Portal from '../Portal';\n\nimport { useCombinedRefs } from '../../utils/hooks';\n\nconst Popover = forwardRef(({\n style,\n children,\n usePortal,\n popoverOptions,\n targetRef: { current },\n portalContainerSelector,\n onPlacementChange,\n useMemoizedPopper,\n dontUpdate = false,\n ...props\n}, ref) => {\n if (!current) {\n return null;\n }\n\n // States\n const [popperInstance, setPopperInstance] = useState(false);\n\n // detect placement changings\n useEffect(() => {\n onPlacementChange(popperInstance?.state?.placement);\n }, [popperInstance?.state, popperInstance?.state?.placement]);\n\n // Refs\n const innerRef = useRef();\n const rootRef = useCombinedRefs(ref, innerRef);\n\n const memoizedPopperInstance = useMemo(() => (\n useMemoizedPopper && current && rootRef.current ? createPopper(current, rootRef.current, popoverOptions) : null\n ), [rootRef.current, current, useMemoizedPopper]);\n\n useEffect(() => {\n if (rootRef.current && current) {\n setPopperInstance((useMemoizedPopper && memoizedPopperInstance) ? memoizedPopperInstance : createPopper(current, rootRef.current, popoverOptions));\n }\n\n function handleOrientation() {\n popperInstance.update();\n }\n\n if (window.screen.orientation) {\n window.screen.orientation.addEventListener('change', handleOrientation);\n }\n\n if (popperInstance && !dontUpdate) {\n popperInstance.update();\n }\n\n return () => {\n if (window.screen.orientation) {\n window.screen.orientation.removeEventListener('change', handleOrientation);\n }\n if (popperInstance) popperInstance.destroy();\n };\n }, [rootRef.current, current]);\n\n useEffect(() => {\n if (popperInstance) {\n popperInstance.setOptions(popoverOptions);\n }\n }, [popoverOptions]);\n\n return (\n \n {popperInstance && children}\n
\n \n {text}\n
\n ),\n ContainerRenderer: forwardRef(({ children }, ref) => {children}
\n - {children}
{`${text}${isSelected ? '- SELECTED' : ''}`}
,\n OptionContainerRenderer: props => ,\n OptionContainerRendererProps: {},\n onSelectionChange: f => f,\n autoFocusToFirstChild: false\n};\n\nexport default SelectionGroup;\n","import React, {\n useState, useEffect, useMemo, forwardRef\n} from 'react';\nimport {\n bool, string, func, oneOfType, number\n} from 'prop-types';\nimport { useEffectIgnoreFirst } from '../../utils/hooks';\n\nconst TextInput = forwardRef(({\n id,\n label,\n value,\n defaultValue,\n onChange,\n onBlur,\n isErrored,\n errorMessage: baseErrorMessage,\n multiline,\n showInitialError,\n errorClassName,\n ...props\n}, ref) => {\n // States\n const [isDirty, setDirty] = useState(false);\n const [inputValue, setInputValue] = useState('');\n const [errorMessage, setErrorMessage] = useState(baseErrorMessage);\n\n // Event handler\n const onInputValueChange = e => {\n setInputValue(e.target.value);\n onChange(e, inputValue, setInputValue);\n };\n\n const onInputBlur = e => {\n onBlur(e, inputValue, setInputValue);\n setDirty(isErrored(inputValue));\n };\n\n // Effect\n useEffect(() => {\n setInputValue(value || defaultValue);\n setDirty(false);\n }, [value, defaultValue]);\n\n useEffect(() => {\n setErrorMessage('');\n }, [isDirty]);\n\n useEffectIgnoreFirst(() => {\n setErrorMessage(baseErrorMessage);\n }, [baseErrorMessage]);\n\n useEffect(() => {\n if (isDirty || showInitialError) {\n setErrorMessage(isErrored(inputValue));\n }\n }, [isDirty, inputValue, showInitialError]);\n\n // Memoized values\n const eventHandlerProps = useMemo(() => Object.keys(props)\n .filter(propKey => /^on[A-Z]/.test(propKey) && typeof props[propKey] === 'function')\n .reduce((prev, propKey) => ({ ...prev, [propKey]: e => props[propKey](e, inputValue, setInputValue) }), {}),\n [props]);\n\n const InputElement = multiline ? 'textarea' : 'input';\n return (\n <>\n {label && }\n {errorMessage}
}\n \n );\n});\n\nTextInput.propTypes = {\n id: string,\n label: string,\n value: oneOfType([string, number]),\n defaultValue: oneOfType([string, number]),\n onChange: func,\n onBlur: func,\n isErrored: func,\n errorMessage: string,\n errorClassName: string,\n multiline: bool,\n showInitialError: bool\n};\n\nTextInput.defaultProps = {\n id: '',\n label: '',\n value: '',\n defaultValue: '',\n onChange: f => f,\n onBlur: f => f,\n isErrored: () => false,\n errorMessage: '',\n multiline: false,\n errorClassName: null,\n showInitialError: false\n};\n\nexport default TextInput;\n","export const KEY_KEYCODE_LIST = {\n Enter: 13,\n Backspace: 8,\n Comma: 188,\n Tab: 9,\n Space: 32,\n Escape: 27\n};\n\nexport const SERVER_ERROR = 'Server error';\nexport const FILE_TYPE_ERROR = 'Unsupported file type';\n","import {\n useCallback, useEffect, useState, useRef, useMemo, useLayoutEffect\n} from 'react';\nimport Fuse from 'fuse.js';\nimport { nodeContains } from '@jotforminc/utils';\n\nimport { generateShortID } from '.';\n\nexport const useClickOutsideState = (initialState, refs = [], eventTypes = ['mouseup']) => {\n const [isVisible, setVisibility] = useState(initialState);\n\n useEffect(() => {\n const hideMenu = ({ target }) => !refs.find(ref => nodeContains(ref.current, target)) && setVisibility(false);\n\n eventTypes.forEach(eventType => {\n global.addEventListener(eventType, hideMenu);\n });\n\n return () => eventTypes.forEach(eventType => global.removeEventListener(eventType, hideMenu));\n }, [refs]);\n\n return [isVisible, setVisibility];\n};\n\nexport const useClickOutsideStateWithCallback = ({ refs = [], callback = null, eventType = 'mouseup' }) => {\n const _callback = typeof callback === 'function' ? callback : f => f;\n useEffect(() => {\n const hideMenu = ({ target }) => !refs.find(ref => nodeContains(ref.current, target)) && _callback(target);\n\n global.addEventListener(eventType, hideMenu);\n return () => global.removeEventListener(eventType, hideMenu);\n }, [refs]);\n};\n\nexport const useClickOutsideStateMouseDown = (initialState, refs = []) => {\n const [isVisible, setVisibility] = useState(initialState);\n\n useEffect(() => {\n const hideMenu = ({ target }) => !refs.find(ref => nodeContains(ref.current, target)) && setVisibility(false);\n\n global.addEventListener('mousedown', hideMenu);\n return () => global.removeEventListener('mousedown', hideMenu);\n }, [refs]);\n\n return [isVisible, setVisibility];\n};\n\nexport const useClickOutsideStateWithSelector = (initialState, selector) => {\n const [isVisible, setVisibility] = useState(initialState);\n const hideMenu = event => {\n const containerList = global.document.querySelectorAll(selector);\n const isContained = [...containerList].find(container => nodeContains(container, event.target));\n if (!isContained) {\n setVisibility(false);\n }\n };\n\n useEffect(() => {\n global.addEventListener('mouseup', hideMenu);\n return () => global.removeEventListener('mouseup', hideMenu);\n }, [selector]);\n\n return [isVisible, setVisibility];\n};\n\nexport const useSelectionState = (initialState, isMultiSelect = false) => {\n // Instance methods\n const sanitizeInitialState = !Array.isArray(initialState) ? [initialState] : initialState;\n\n // States\n const [selectedOptions, setSelectedOptions] = useState(sanitizeInitialState);\n\n // State methods\n const toggleOptionSelection = selectedValue => {\n const isOptionExist = selectedOptions.indexOf(selectedValue) > -1;\n const newSelectionArray = isOptionExist ? selectedOptions.filter(value => selectedValue !== value) : [...selectedOptions, selectedValue];\n setSelectedOptions(newSelectionArray);\n };\n\n const singleToggleOptionSelection = selectedValue => {\n const isOptionExist = selectedOptions.indexOf(selectedValue) > -1;\n if (isOptionExist) {\n return;\n }\n\n setSelectedOptions([selectedValue]);\n };\n\n if (isMultiSelect) {\n return [selectedOptions, toggleOptionSelection, setSelectedOptions];\n }\n\n return [selectedOptions, singleToggleOptionSelection, setSelectedOptions];\n};\n\nexport const useEffectIgnoreFirst = (effectHandler, effectDependedValues) => {\n const isFirstRun = useRef(true);\n\n useEffect(() => {\n if (isFirstRun.current) {\n isFirstRun.current = false;\n return;\n }\n\n return effectHandler();\n }, effectDependedValues);\n};\n\nexport const useCombinedRefs = (...refs) => {\n const targetRef = useRef();\n\n useEffect(() => {\n refs.forEach(ref => {\n if (!ref) {\n return;\n }\n\n if (typeof ref === 'function') {\n ref(targetRef.current);\n } else {\n // eslint-disable-next-line no-param-reassign\n ref.current = targetRef.current;\n }\n });\n }, [refs]);\n\n return targetRef;\n};\n\nexport const usePortalRef = (\n containerSelector = 'body',\n usePortal = false,\n portalAttribute = 'data-uikitGeneratedPortalContainer',\n initialPortalSelector = ''\n) => {\n // Returns a ref to pass to React.createPortal, either a reference to an existing element or it creates a new element.\n const getPortalRefElement = useCallback(() => {\n if (!usePortal) return;\n\n const portalContainer = global.document.querySelector(containerSelector);\n if (portalContainer) {\n // Portal Container element already exists -> return that element\n const currentPortalDiv = portalAttribute ? portalContainer.querySelector(`[${portalAttribute}=true]`) : false;\n if (currentPortalDiv) return currentPortalDiv;\n\n // Otherwise create a new Portal Container element\n const id = generateShortID();\n const div = global.document.createElement('div');\n div.setAttribute(portalAttribute, 'true');\n div.setAttribute('id', id);\n portalContainer.appendChild(div);\n return div;\n }\n }, [containerSelector, usePortal, portalAttribute]);\n\n // if the parent component won't rerender, it won't be able to detect the ref.current change so initial selector may be needed for components like those\n const portalRef = useRef(initialPortalSelector ? document.querySelector(initialPortalSelector) : getPortalRefElement());\n\n useEffect(() => {\n portalRef.current = getPortalRefElement() || portalRef.current;\n }, [getPortalRefElement]);\n\n return portalRef;\n};\n\nexport const useDragState = (initialState, {\n onDrop: onDropCallBack,\n onDragOver: onDragOverCallBack,\n onDragEnter: onDragEnterCallBack,\n onDragLeave: onDragLeaveCallBack\n} = {}) => {\n const [isDragging, setDragState] = useState(initialState);\n\n const generateDragEventHandler = (state, callback) => event => {\n setDragState(state);\n event.stopPropagation();\n event.preventDefault();\n\n if (typeof callback === 'function') {\n callback(event);\n }\n\n return false;\n };\n\n const onDragEnter = generateDragEventHandler(true, onDragEnterCallBack);\n const onDragOver = generateDragEventHandler(true, onDragOverCallBack);\n const onDragLeave = generateDragEventHandler(false, onDragLeaveCallBack);\n const onDrop = generateDragEventHandler(false, onDropCallBack);\n\n return [isDragging, {\n onDragEnter, onDragOver, onDragLeave, onDrop\n }];\n};\n\nconst cachedScripts = [];\nexport const useScript = src => {\n const [scriptState, setLoadState] = useState({ loaded: false, error: false });\n\n useEffect(() => {\n if (cachedScripts.indexOf(src) > -1) {\n setLoadState({ loaded: true, error: false });\n return f => f;\n }\n\n cachedScripts.push(src);\n\n const scriptTag = document.createElement('script');\n scriptTag.src = src;\n scriptTag.async = true;\n\n const onScriptLoad = () => setLoadState({ loaded: true, error: false });\n const onScriptError = () => {\n setLoadState({ loaded: true, error: true });\n scriptTag.remove();\n };\n\n scriptTag.addEventListener('load', onScriptLoad);\n scriptTag.addEventListener('error', onScriptError);\n document.body.appendChild(scriptTag);\n\n return () => {\n scriptTag.removeEventListener('load', onScriptLoad);\n scriptTag.removeEventListener('error', onScriptError);\n };\n }, [src]);\n\n return scriptState;\n};\n\nexport const useFuse = (list, searchTerm, keys = ['text'], fuseOptions = {\n shouldSort: true,\n threshold: 0.4,\n location: 0,\n distance: 100,\n maxPatternLength: 32,\n minMatchCharLength: 1\n}) => {\n const fuse = useMemo(() => new Fuse(list, { ...fuseOptions, keys }), [list, fuseOptions, keys]);\n const results = useMemo(() => (!searchTerm ? list : fuse.search(searchTerm)), [fuse, searchTerm]);\n return results;\n};\n\nexport const usePrev = value => {\n const ref = useRef();\n useEffect(() => {\n ref.current = value;\n });\n return ref.current;\n};\n\nexport const useInView = onInView => {\n const ref = useRef();\n\n useEffect(() => {\n let observer;\n\n global.requestAnimationFrame(() => {\n if (!ref.current) return;\n\n if (global.IntersectionObserver) {\n observer = new global.IntersectionObserver(([entry]) => {\n if (entry.intersectionRatio === 0) {\n return;\n }\n\n onInView(true);\n\n observer.unobserve(ref.current);\n }, { threshold: 1 });\n\n observer.observe(ref.current);\n } else {\n onInView(true);\n }\n });\n\n return () => {\n if (observer) {\n observer.disconnect();\n }\n };\n }, [ref.current]);\n\n return [ref];\n};\n\nexport const useContinueFocus = (isOpen, currentActiveElementRef) => {\n const panelRef = useRef();\n const activeElementRef = currentActiveElementRef || useRef();\n const isFirstRun = useRef(true);\n\n useLayoutEffect(() => {\n if (isFirstRun.current && !isOpen) {\n isFirstRun.current = false;\n return;\n }\n panelRef.current?.setAttribute('tabindex', isOpen ? 0 : -1);\n if (isOpen) {\n if (!currentActiveElementRef) { // if current element ref is not given, focus last active element\n activeElementRef.current = document.activeElement;\n }\n panelRef.current?.focus();\n } else {\n activeElementRef.current?.focus();\n }\n return () => activeElementRef.current?.focus();\n }, [isOpen]);\n\n return panelRef;\n};\n","import React from 'react';\nimport { nanoid } from 'nanoid';\n\nimport { KEY_KEYCODE_LIST } from './constants';\n\nexport const wrapWithComp = (child, type, Comp = 'span') => {\n if (typeof child === 'string') {\n return \n {avatar}\n
\n \n
\n {isListExpanded && (\n {name}
\n \n setIsListExpanded(true)}\n onMouseLeave={() => setIsListExpanded(false)}\n ref={targetRef}\n >\n {`+ ${subMemberList.length} More`}\n
\n \n {subMemberList.map(member => (member.email)).toString()}\n
\n \n
\n \n {subMemberList.map(member => {\n return (\n
\n \n
\n );\n })}\n \n \n
\n \n
\n {member.username}
\n {member.email}
\n {identifier[0]}
;\n\n const handler = {\n [useMouseDown ? 'onMouseDown' : 'onClick']: handleClick,\n onBlur: onBlurEventHandler\n };\n if (subMembers) {\n return (\n \n {avatar}\n
\n \n
\n \n );\n })}\n {name}
\n {email}
\n \n
\n \n
\n \n );\n};\n\nFilePreview.propTypes = {\n file: shape({\n name: string,\n type: string,\n url: string\n }),\n translate: func,\n changeModeToUpload: func,\n Thumbnail: elementType,\n removeButtonText: string\n};\n\nFilePreview.defaultProps = {\n file: {},\n translate: f => f,\n changeModeToUpload: f => f,\n Thumbnail: props => \n {shortName}\n \n {translate(removeButtonText)}\n \n
\n ![\"file-upload-thumbnail\"](\"cdn.jotfor.ms/assets/img/builder/other_file_icon.png\"){kind=icon}
,\n removeButtonText: 'Remove File'\n};\n\nexport default FilePreview;\n","import React from 'react';\nimport { string } from 'prop-types';\n\nconst TextWrapper = ({ className, ...props }) => ;\n\nTextWrapper.propTypes = {\n className: string\n};\n\nTextWrapper.defaultProps = {\n className: ''\n};\n\nexport default TextWrapper;\n","import React, { useMemo } from 'react';\nimport { shape, string } from 'prop-types';\n\nconst Thumbnail = ({ file: { type, url } }) => {\n const [imageURL, style = { height: '64px' }] = useMemo(() => {\n switch (true) {\n case type.indexOf('image') !== -1: {\n return [url, {\n width: '120px', minHeight: '64px', maxHeight: '120px', objectFit: 'contain'\n }];\n }\n case type.indexOf('application/pdf') !== -1: {\n return ['//cdn.jotfor.ms/assets/img/builder/pdf_icon.png'];\n }\n case type.indexOf('msword') !== -1 || type.indexOf('officedocument') !== -1: {\n return ['//cdn.jotfor.ms/assets/img/builder/doc_icon.png'];\n }\n default: {\n return ['//cdn.jotfor.ms/assets/img/builder/other_file_icon.png'];\n }\n }\n }, [type, url]);\n\n return (\n {children}
{children}
\n by \n {imgUserInfo}\n
\n )}\n \n );\n });\n };\n\n const renderNoImageScreen = () => {\n return (\n\n {noUploadedImageText}\n
\n );\n };\n\n return (\n <>\n {uploadedImageList.length ? renderUploadedImages() : renderNoImageScreen()}\n \n );\n};\n\nUploadedImagesPanel.propTypes = {\n onImageSelect: func,\n selectedImage: oneOfType([string, arrayOf(string)]),\n allowMultipleSelection: bool,\n onImageDeselect: func,\n uploadedImageList: oneOfType([arrayOf(string), arrayOf(shape({}))]),\n noUploadedImageText: string\n};\n\nUploadedImagesPanel.defaultProps = {\n onImageSelect: f => f,\n selectedImage: '',\n allowMultipleSelection: false,\n onImageDeselect: f => f,\n uploadedImageList: [],\n noUploadedImageText: t('There is no image to show!')\n};\n\nexport default UploadedImagesPanel;\n","import React from 'react';\nimport {\n elementType,\n func, number, oneOfType, shape, string\n} from 'prop-types';\n\nimport { Utils } from '@jotforminc/uikit';\nimport { Button } from '@jotforminc/magnet';\nimport { t } from '@jotforminc/translation';\nimport { formatBytes } from '@jotforminc/utils';\n\nconst ImagePreview = ({\n file, changeModeToUpload, Thumbnail, removeButtonText\n}) => {\n const { name, size } = file;\n const sizeText = formatBytes(size);\n\n const handleKeyDown = event => Utils.isPressedKeyEnterOrSpace(event) && changeModeToUpload();\n return (\n \n \n {t(removeButtonText)}\n \n
\n \n );\n};\n\nImagePreview.propTypes = {\n file: shape({\n name: string,\n url: string,\n size: oneOfType([string, number])\n }),\n changeModeToUpload: func,\n Thumbnail: elementType,\n removeButtonText: string\n};\n\nImagePreview.defaultProps = {\n file: {},\n changeModeToUpload: f => f,\n Thumbnail: ({ url }) => \n {name}\n {sizeText}\n
\n \n
\n )\n }\n};\n\nexport const THEME_MAP = {\n isDark: 'isDark',\n isLight: 'isLight',\n isTransparent: 'isTransparent'\n};\n\n/* eslint-disable */\nexport const DefaultDeleteButton = ({ onClick, disabled }) => {\n return (\n \n )\n};\n\nexport const DefaultSelectButton = ({ onClick }) => (\n \n)\n/* eslint-enable */\n\nexport const modesRequireUploadedImages = ['imageUpload'];\n","/* eslint-disable max-statements */\nimport React, {\n useEffect, useState, useRef, useCallback, forwardRef, useImperativeHandle\n} from 'react';\nimport {\n array, arrayOf, bool, elementType, func, shape, string\n} from 'prop-types';\nimport InfiniteScroll from 'react-infinite-scroll-component';\nimport { FileUpload } from '@jotforminc/uikit';\nimport { t } from '@jotforminc/translation';\nimport { TabListWithStyles, Tab } from '@jotforminc/tabs';\nimport { useDebounce } from '@jotforminc/hooks';\nimport {\n Button, InputText, Textarea, FormLabel, FormControl, FormHelperText\n} from '@jotforminc/magnet';\nimport { IconMagnifyingGlass } from '@jotforminc/svg-icons';\nimport IconSelector from './IconSelector';\n\nimport UploadedImagesPanel from './UploadedImagesPanel';\nimport ImagePreview from './ImagePreview';\nimport LoadingScreen from './LoadingScreen';\n\nimport '../styles/ImageUpload.scss';\n\nimport {\n deleteSelectedImage, getUploadedUserImage, searchUnsplash, getRandomImagesFromUnsplash\n} from '../actions';\nimport {\n DEFAULT_TAB_LIST, THEME_MAP, DefaultDeleteButton, DefaultSelectButton, modesRequireUploadedImages\n} from '../constants';\nimport { filterImages } from '../utils';\n\nconst ImageUpload = forwardRef(({\n onImageUpload,\n onImageSelect,\n onImageChange,\n onImageRemove,\n isAltTextActive,\n onAltTextChange,\n renderTabs,\n allowMultipleSelection,\n forceSelect,\n optimize,\n addNotification,\n limitType,\n multipleFileUpload,\n targetURL,\n onlyColoredIcons,\n linkTextInputDefaultValue,\n onLinkTextInputSubmit,\n linkTextInputPlaceholder,\n imgDescInputPlaceholder,\n imageList: originalImageList,\n galleryImageList,\n useAPI,\n theme,\n showLabel,\n showActionButtons,\n SelectButtonRenderer,\n DeleteButtonRenderer,\n ActionButtonsWrapper,\n onLinkInputChange,\n ImageUploadPreviewRenderer,\n ImageLoadingScreenRenderer,\n allowedTypes,\n allowImageUpload,\n onFileUploading,\n onFileRemove,\n isFileUploading,\n value: uploadedFile,\n removeButtonText,\n PreviewThumbnail,\n FileInputRenderer,\n showOnlyImages,\n mode,\n TextWrapperRenderer,\n onFileUploadError,\n noUploadedImageText,\n galleryMode,\n inputButtonText,\n initialSelectedImage,\n groupedGalleryClass,\n groupedGalleryImageList,\n isDeleteSelectedDisabled\n}, ref) => {\n const [imageList, setImageList] = useState(showOnlyImages ? filterImages(originalImageList) : originalImageList);\n const [altText, setAltText] = useState('');\n const [fileUploadDisplayMode, setFileUploadDisplayMode] = useState(uploadedFile.url ? 'display' : 'upload');\n const defaultSelectedImg = initialSelectedImage || '';\n const [selectedImage, setSelectedImage] = useState(allowMultipleSelection ? [] : defaultSelectedImg);\n const [isActionButtonsVisible, setActionButtonsVisible] = useState(false);\n const [unsplashImageList, setUnsplashImageList] = useState([]);\n const [randomUnsplashImageList, setRandomUnsplashImageList] = useState([]);\n const [unsplashPageNumber, setUnsplashPageNumber] = useState(1);\n const [stopLoadMore, setStopLoadMore] = useState(false);\n const allowGettingUploadedImages = modesRequireUploadedImages.includes(mode);\n const textInputRef = useRef();\n const unsplashSearchInputRef = useRef();\n const isBranding21 = true;\n\n useImperativeHandle(ref, () => ({\n setSelectedImage\n }));\n\n const prepareTabTitleList = () => {\n return renderTabs.reduce((prev, tabKey) => {\n return {\n ...prev,\n [tabKey]: {\n ...DEFAULT_TAB_LIST[tabKey],\n label: t(DEFAULT_TAB_LIST[tabKey]?.label)\n }\n };\n }, {});\n };\n const [tabTitleList, setTabTitleList] = useState(prepareTabTitleList());\n\n const handleGetUploadedImages = () => {\n getUploadedUserImage(showOnlyImages)\n .then((images = []) => setImageList(images));\n };\n\n const handleAltTextChange = ({ target: { value } }) => {\n setAltText(value);\n };\n\n const handleImageSelect = url => () => {\n onImageChange(url, selectedImage);\n\n if (allowMultipleSelection) {\n setSelectedImage([\n ...selectedImage,\n url\n ]);\n } else {\n if (forceSelect || !showActionButtons) {\n onImageSelect(url);\n }\n setSelectedImage(url);\n }\n };\n\n const handleImageDeselect = url => () => {\n if (allowMultipleSelection) {\n setSelectedImage(selectedImage.filter(image => image !== url));\n }\n };\n\n const handleUseSelectedImage = url => {\n onImageSelect(url);\n };\n\n const handleImageUpload = fileData => {\n onImageUpload(fileData);\n };\n\n const handleLinkTextClick = () => {\n const { current: { value } } = textInputRef;\n onLinkTextInputSubmit(value);\n };\n\n const handleFileUploadDisplayModeChange = displayMode => {\n setFileUploadDisplayMode(displayMode);\n };\n\n const renderAltTextInput = () => (\n \n \n {t('Image Description')} \n \n {t('Add alt text for accessibility and SEO purposes. This text will be shown if the image can\\'t be loaded.')}\n \n \n
\n );\n\n const handleDeleteSelectedImage = () => {\n setSelectedImage('');\n setImageList(imageList.filter(image => !selectedImage.includes(image)));\n if (useAPI) {\n deleteSelectedImage(selectedImage)\n .then(() => handleGetUploadedImages());\n }\n onImageRemove(selectedImage);\n };\n\n const renderActionButtons = () => (\n \n \n {showLabel && (\n {t('Enter URL')} \n )}\n {renderLinkTabInput()}\n \n {/* eslint-disable */}\n {showActionButtons &&
\n );\n\n const renderUploadImage = () => {\n return (\n <>\n \n \n
}\n {/* eslint-enable */}\n \n handleImageUpload(fileData)}\n allowedTypes={allowedTypes}\n targetURL={targetURL}\n multipleFileUpload={multipleFileUpload}\n optimize={optimize}\n addNotification={addNotification}\n limitType={limitType}\n displayUpload={true}\n translate={t}\n FilePreviewRenderer={ImageUploadPreviewRenderer}\n LoadingScreenRenderer={ImageLoadingScreenRenderer}\n onFileRemove={onFileRemove}\n removeButtonText={removeButtonText}\n Thumbnail={PreviewThumbnail}\n FileInputRenderer={FileInputRenderer}\n TextWrapperRenderer={TextWrapperRenderer}\n onError={onFileUploadError}\n onDisplayModeChange={handleFileUploadDisplayModeChange}\n buttonText={inputButtonText}\n />\n
\n {fileUploadDisplayMode === 'display' && isAltTextActive && renderAltTextInput()}\n {fileUploadDisplayMode === 'upload' && isAltTextActive && renderEnterUrl()}\n \n );\n };\n\n const renderChooseImage = () => (\n <>\n \n
\n {isAltTextActive && renderAltTextInput()}\n {isActionButtonsVisible && showActionButtons && renderActionButtons()}\n \n );\n\n const renderGallery = () => (\n <>\n \n
\n {isAltTextActive && renderAltTextInput()}\n {isActionButtonsVisible && showActionButtons && renderActionButtons()}\n \n );\n\n const renderGroupedGallery = () => {\n return (\n \n {groupedGalleryImageList.map(list => (\n
\n );\n };\n\n const createUnsplashImageList = (list = []) => list.map(image => {\n const {\n id = '',\n urls: { full = '', thumb = '' } = {},\n user: { name = '' } = {}\n } = image;\n\n return {\n urlFull: full,\n urlThumb: thumb,\n userInfo: name,\n id\n };\n });\n\n const getRandomUnsplashImages = () => {\n getRandomImagesFromUnsplash().then(response => {\n const list = createUnsplashImageList(response);\n const newList = [...randomUnsplashImageList, ...list];\n setRandomUnsplashImageList(newList);\n setUnsplashImageList(newList);\n }).catch(() => {});\n };\n\n const getUnsplashImages = loadMore => {\n const keyword = unsplashSearchInputRef && unsplashSearchInputRef.current && unsplashSearchInputRef.current.value;\n\n if (keyword) {\n if (loadMore && stopLoadMore) return;\n const count = 16;\n const page = loadMore ? unsplashPageNumber + 1 : 1;\n\n searchUnsplash(keyword, count, page).then(response => {\n const newImageList = createUnsplashImageList(response);\n setUnsplashImageList(currList => (loadMore ? [...currList, ...newImageList] : newImageList));\n setUnsplashPageNumber(page);\n setStopLoadMore(response.length < count);\n }).catch(() => {\n setUnsplashImageList([]);\n setStopLoadMore(true);\n });\n } else if (loadMore) {\n getRandomUnsplashImages();\n } else {\n setUnsplashImageList(randomUnsplashImageList);\n }\n };\n\n const renderUnsplash = () => {\n return (\n \n {t(list.text)}\n
\n ))}\n \n () => {\n setSelectedImage(url);\n onImageSelect(url);\n }}\n onImageDeselect={url => () => {\n setSelectedImage('');\n onImageRemove(url);\n }}\n selectedImage={selectedImage}\n />\n
\n \n {\n setUnsplashPageNumber(1);\n setStopLoadMore(false);\n getUnsplashImages();\n }, 600)}\n prefix={{ icon: IconMagnifyingGlass }}\n />\n getUnsplashImages(true)}\n className=\"prevUploads-list\"\n height=\"190px\"\n >\n () => {\n setSelectedImage(urlFull);\n onImageSelect(urlFull);\n }}\n onImageDeselect={urlFull => () => {\n setSelectedImage('');\n onImageRemove(urlFull);\n }}\n selectedImage={selectedImage}\n />\n \n
\n );\n };\n\n const renderLinkTab = () => (\n <>\n \n \n {t('Add Alt Text')} \n \n
\n )}\n {/* eslint-disable */}\n {showActionButtons && \n \n
}\n {/* eslint-enable */}\n \n );\n\n const renderIconSelector = () => (\n {t('Uploading...')}
\n \n );\n};\n\nexport default LoadingScreen;\n","import React, { Suspense } from 'react';\n\nimport 'emoji-mart/css/emoji-mart.css';\nimport { safeLazy } from '@jotforminc/safe-lazy-import';\n\nconst PickerComponent = safeLazy(() => import(/* webpackChunkName: \"emoji_mart_picker\" */'emoji-mart/dist/components/picker/picker'));\n\nconst Picker = props => (\n \n {t('TEAM AVATAR')}\n
\n \n \n \n \n \n \n \n
\n \n
\n \n {\n selectImage(file?.url);\n handleResetSelectedImage();\n }}\n onLinkTextInputSubmit={onLinkTextInputSubmit}\n onFileRemove={removeImage}\n onImageSelect={selectImage}\n onImageRemove={removeImage}\n />\n
\n \n
\n \n
\n \n {t('Icon Color')}\n
\n \n update({ teamAvatarIconColor: val }), 400)}\n onInputRemove={() => update({ teamAvatarIconColor: '' })}\n ariaLabel={t('Icon Color')}\n />\n
\n \n
\n \n {t('Background Color')}\n
\n \n update({ teamAvatarIconBgColor: val }), 400)}\n onInputRemove={() => update({ teamAvatarIconBgColor: '' })}\n ariaLabel={t('Background Color')}\n />\n
\n \n
\n \n
\n \n {t('CUSTOMIZE COVER')}\n
\n \n
\n \n
\n \n
\n \n {t('Background Color')}\n
\n \n update({ coverBgImageURL: '', coverBgColor: val }), 400)}\n onInputRemove={() => update({ coverBgColor: '' })}\n />\n
\n \n
\n \n {t('Title Color')}\n
\n \n update({ coverTitleColor: val }), 400)}\n onInputRemove={() => update({ coverTitleColor: '' })}\n />\n
\n \n
\n \n {\n selectImage(file?.url);\n handleResetSelectedImage();\n }}\n onLinkTextInputSubmit={onLinkTextInputSubmit}\n onFileRemove={removeImage}\n onImageSelect={selectImage}\n onImageRemove={removeImage}\n />\n
\n ![\"error-placeholer\"](\"https://www.jotform.com/images/image_placeholder.png\")
;\n\nexport const SVGIcon = ({\n url, iconColor, ...props\n}) => {\n return (\n \n \n \n \n
\n \n \n \n \n \n
\n );\n }\n return (\n <>\n {withAnimation ? (\n \n {teamAnimation ? (\n
\n ) : (\n
\n ) : \n \n
\n \n \n \n {t(text)}
\n{t(text)}
)}\n \n );\n};\n\nLoader.defaultProps = {\n withAnimation: false,\n text: '',\n teamAnimation: false,\n mobileAnimation: false\n};\n\nexport default Loader;\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 SvgIconPendingUsers = props => /*#__PURE__*/React.createElement(\"svg\", _extends({\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n viewBox: \"0 0 18 22\"\n}, props), _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n d: \"M9.92607 8.71386C7.5079 8.71386 5.55639 6.76805 5.55639 4.35693C5.55639 1.94581 7.52911 0 9.92607 0C12.3442 0 14.2958 1.94581 14.2958 4.35693C14.2958 6.76805 12.3442 8.71386 9.92607 8.71386ZM10.9969 17.3008H16.5445C16.9688 17.3008 17.3082 16.9624 17.3082 16.5394C17.3082 12.2671 14.0627 8.92535 9.92638 8.92535C7.92441 8.92535 6.13113 9.70816 4.8135 11.0004C4.83854 11.0001 4.86361 10.9999 4.88872 10.9999C8.26376 10.9999 10.9998 13.736 10.9998 17.111C10.9998 17.1745 10.9988 17.2378 10.9969 17.3008Z\",\n fill: \"#0A1551\"\n})), _path2 || (_path2 = /*#__PURE__*/React.createElement(\"path\", {\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n d: \"M4.88884 21.9999C7.58887 21.9999 9.77767 19.8111 9.77767 17.1111C9.77767 14.4111 7.58887 12.2222 4.88884 12.2222C2.18881 12.2222 0 14.4111 0 17.1111C0 19.8111 2.18881 21.9999 4.88884 21.9999ZM5.80632 14.6667C5.80632 14.3292 5.53272 14.0556 5.19522 14.0556C4.85771 14.0556 4.58411 14.3292 4.58411 14.6667V17.4974L2.78306 18.3979C2.48119 18.5488 2.35883 18.9159 2.50976 19.2178C2.6607 19.5196 3.02777 19.642 3.32965 19.4911L5.80632 18.2527V14.6667Z\",\n fill: \"#0A1551\"\n})));\nexport default SvgIconPendingUsers;","import React, {\n FunctionComponent, useRef, ReactNode, RefObject, useEffect\n} from 'react';\nimport { t } from '@jotforminc/translation';\nimport { Hooks, Popover } from '@jotforminc/uikit';\nimport IconPendingUsers from '../../assets/svg/iconPendingUsers.svg';\nimport { PendingRequestType } from './types';\nimport PendingUsers from './PendingUsers';\nimport { RolesType, TeamRoleSlugs } from '../../types';\nimport { DEFAULT_PENDING_ROLE_SLUG } from '../../utils/constants';\n\nimport '../../styles/PendingRequest.scss';\n\ntype Props = {\n id: string,\n handleClick: () => void,\n usePopover: boolean,\n pendingRequests: PendingRequestType [],\n teamRoles?: RolesType [],\n updateTeamMembers?: () => void,\n defaultMemberRole?: TeamRoleSlugs,\n onClose?: () => void\n};\n\nexport const PendingRequestsButton: FunctionComponent\n \n
\n
\n \n )}\n \n );\n};\n\nPendingRequestsButton.defaultProps = {\n teamRoles: [],\n updateTeamMembers: () => {},\n onClose: () => {},\n defaultMemberRole: DEFAULT_PENDING_ROLE_SLUG\n};\n","var _circle, _rect, _path, _path2, _path3, _path4, _rect2, _path5, _path6, _path7, _path8, _path9;\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 SvgIconNoData = props => /*#__PURE__*/React.createElement(\"svg\", _extends({\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n viewBox: \"0 0 62 80\"\n}, props), _circle || (_circle = /*#__PURE__*/React.createElement(\"circle\", {\n cx: 30.8197,\n cy: 49.1803,\n r: 30.8197,\n fill: \"#E3E5F5\"\n})), _rect || (_rect = /*#__PURE__*/React.createElement(\"rect\", {\n x: 17.0469,\n y: 31.4753,\n width: 28.6698,\n height: 35.2859,\n rx: 3,\n fill: \"white\"\n})), _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M41.5964 55.8223C41.5964 58.3104 39.5794 60.3275 37.0912 60.3275C34.6029 60.3275 32.5859 58.3105 32.5859 55.8223C32.5859 53.334 34.603 51.317 37.0912 51.317C39.5793 51.317 41.5964 53.3341 41.5964 55.8223Z\",\n fill: \"#6F76A7\"\n})), _path2 || (_path2 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M35.1672 48.3549H39.0393C40.4517 48.3549 41.5964 47.2103 41.5964 45.7736V41.9258C41.5964 40.4891 40.4518 39.3445 39.015 39.3445H35.1673C33.7305 39.3445 32.5859 40.4891 32.5859 41.9258V45.7979C32.5859 47.2103 33.7305 48.3549 35.1673 48.3549L35.1672 48.3549Z\",\n fill: \"#6F76A7\"\n})), _path3 || (_path3 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M27.4134 51.317H23.5657C22.129 51.317 20.9844 52.4616 20.9844 53.8984V57.7704C20.9844 59.1829 22.129 60.3275 23.5657 60.3275H27.4378C28.8502 60.3275 29.9948 59.1829 29.9948 57.7461V53.8984C29.9948 52.4616 28.8503 51.3171 27.4135 51.3171L27.4134 51.317Z\",\n fill: \"#6F76A7\"\n})), _path4 || (_path4 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M25.0032 39.6412C25.201 39.2456 25.7654 39.2456 25.9632 39.6412L29.9247 47.5654C30.1031 47.9222 29.8436 48.3421 29.4447 48.3421H21.5217C21.1228 48.3421 20.8633 47.9222 21.0417 47.5654L25.0032 39.6412Z\",\n fill: \"#6F76A7\"\n})), _rect2 || (_rect2 = /*#__PURE__*/React.createElement(\"rect\", {\n x: 11.8008,\n y: 0.644043,\n width: 38.9519,\n height: 21.1695,\n rx: 4,\n fill: \"#343C6A\"\n})), _path5 || (_path5 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M31.9059 18.1702C31.5173 17.7906 30.8967 17.7906 30.5082 18.1702L27.9463 20.6735C27.5798 21.0315 27.5433 21.6086 27.8615 22.01L30.4234 25.2413C30.8238 25.7463 31.5903 25.7463 31.9906 25.2413L34.5525 22.01C34.8708 21.6086 34.8342 21.0315 34.4678 20.6735L31.9059 18.1702Z\",\n fill: \"#343C6A\"\n})), _path6 || (_path6 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M41.0282 11.464C41.0282 10.316 40.8322 9.434 40.3842 8.874C40.0762 8.468 39.6422 8.202 38.9842 8.202C38.3262 8.202 37.9062 8.468 37.5842 8.874C37.1502 9.434 36.9542 10.316 36.9542 11.464C36.9542 12.612 37.1502 13.494 37.5842 14.054C37.9062 14.46 38.3262 14.726 38.9842 14.726C39.6422 14.726 40.0762 14.46 40.3842 14.054C40.8182 13.494 41.0282 12.612 41.0282 11.464ZM42.6942 11.464C42.6942 12.668 42.4982 13.802 41.8822 14.726C41.2942 15.608 40.3422 16.21 38.9842 16.21C37.6262 16.21 36.6882 15.608 36.1002 14.726C35.4842 13.802 35.2882 12.668 35.2882 11.464C35.2882 10.26 35.4842 9.126 36.1002 8.202C36.6882 7.32 37.6262 6.718 38.9842 6.718C40.3422 6.718 41.2942 7.32 41.8822 8.202C42.4982 9.126 42.6942 10.26 42.6942 11.464Z\",\n fill: \"white\"\n})), _path7 || (_path7 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M21.1526 7.3818C21.1526 5.96438 22.3126 4.80859 23.747 4.80009C25.1517 4.7916 26.3281 5.96135 26.3348 7.37391C26.3406 7.71749 26.2779 8.05879 26.1506 8.37794C26.0232 8.69709 25.8336 8.98772 25.5928 9.23291C25.3521 9.47811 25.065 9.67297 24.7482 9.80616C24.4314 9.93935 24.0913 10.0082 23.7477 10.0087C23.4041 10.0093 23.0638 9.94144 22.7466 9.80921C22.4294 9.67698 22.1417 9.483 21.9002 9.23854C21.6587 8.99408 21.4683 8.70403 21.3399 8.38527C21.2116 8.06651 21.1479 7.7254 21.1526 7.3818Z\",\n fill: \"white\"\n})), _path8 || (_path8 = /*#__PURE__*/React.createElement(\"path\", {\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n d: \"M29.2801 19.2C31.3484 19.2 33.0251 17.5234 33.0251 15.4551C33.0251 13.3868 31.3484 11.7101 29.2801 11.7101C27.2118 11.7101 25.5352 13.3868 25.5352 15.4551C25.5352 17.5234 27.2118 19.2 29.2801 19.2ZM32.0423 15.2631C32.129 15.3424 32.129 15.479 32.0423 15.5583L30.0515 17.3785C29.9231 17.4959 29.7165 17.4048 29.7165 17.2309V16.5203C29.7165 16.4099 29.627 16.3203 29.5165 16.3203H27.0977C26.9872 16.3203 26.8977 16.2308 26.8977 16.1203V14.7011C26.8977 14.5907 26.9872 14.5011 27.0977 14.5011H29.5165C29.627 14.5011 29.7165 14.4116 29.7165 14.3011V13.5905C29.7165 13.4166 29.9231 13.3256 30.0515 13.4429L32.0423 15.2631Z\",\n fill: \"white\"\n})), _path9 || (_path9 = /*#__PURE__*/React.createElement(\"path\", {\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n d: \"M19.967 15.1673H23.7306H24.3906C24.3918 13.5163 25.3851 12.0974 26.8066 11.4745C26.3709 11.1252 25.8588 10.87 25.3004 10.7463C24.3741 10.5393 23.4247 10.5703 22.4923 10.6856C20.6748 10.9108 19.2367 12.5589 19.2034 14.3928C19.1943 14.9112 19.4462 15.1673 19.967 15.1673Z\",\n fill: \"white\"\n})));\nexport default SvgIconNoData;","import React, { FunctionComponent } from 'react';\nimport { t } from '@jotforminc/translation';\n\nimport '../../styles/PendingRequest.scss';\n\nimport IconNoData from '../../assets/svg/iconNoData.svg';\n\nconst EmptyPendingRequests: FunctionComponent = () => {\n return (\n \n
\n \n
\n );\n};\n\nexport default EmptyPendingRequests;\n","import React, {\n FunctionComponent, useCallback, useState\n} from 'react';\nimport { t } from '@jotforminc/translation';\nimport { IconXmark } from '@jotforminc/svg-icons';\nimport RoleButton from './RoleButton';\nimport { RolesType, AccountType, TeamRoleSlugs } from '../../types';\nimport { LetterAvatar } from '../LetterAvatar';\nimport { PendingRequestType } from './types';\nimport { getRoleObjBySlug, getRoleChangeDisableReason } from './utils';\nimport { approvePendingRequest, denyPendingRequest } from './api';\nimport { DEFAULT_PENDING_ROLE_SLUG } from '../../utils/constants';\nimport EmptyPendingRequests from './EmptyPendingRequests';\n\nimport '../../styles/PendingRequest.scss';\n\ntype UserProps = {\n id: string,\n avatar?: string,\n email?: string,\n name?: string,\n username?: string,\n accountType?: AccountType,\n isDataOnlyUser?: string,\n teamRoles: RolesType [],\n requestId: string | number\n updateTeamMembers?: () => void,\n defaultMemberRole?: TeamRoleSlugs,\n onUpdate?: (mail: string) => void\n};\n\nconst User: FunctionComponent{t('THERE ARE NO PENDING REQUESTS')}
\n\n
\n {name || username}
\n{email}
\n\n {!isAccepted ? (\n <>\n
\n \n {isEmpty &&
\n );\n};\n\nPendingUsers.defaultProps = {\n updateTeamMembers: () => {},\n defaultMemberRole: DEFAULT_PENDING_ROLE_SLUG\n};\n\nexport default PendingUsers;\n","/* eslint-disable jsx-a11y/click-events-have-key-events */\nimport React, {\n forwardRef, FunctionComponent, KeyboardEventHandler, MouseEventHandler\n} from 'react';\nimport DropdownWithExtraElements from '@jotforminc/dropdown-with-extra-elements';\nimport { t } from '@jotforminc/translation';\nimport { Tooltip } from '@jotforminc/tooltip';\nimport { IconTrashFilled } from '@jotforminc/svg-icons';\n\nimport { TooltipContainer, ExtraElement } from './StyledElements';\n\nimport { RolesType, TeamRoleSlugs } from '../../types';\nimport { RoleChangeDisableReason, ROLE_CHANGE_DISABLE_TEXTS } from './constants';\nimport { createTeamRolesWithDescriptions } from '../../utils';\n\ntype Props = {\n activeRole: RolesType,\n roles: RolesType [],\n readOnly: boolean,\n onRoleChange: (newRole: { value: string }) => void,\n onRemoveFromTeam?: MouseEventHandler\n
\n - \n {\n pendingUsers.map(({\n avatar, email, name, username = '', accountType, isDataOnlyUser, requestId\n }) => (\n
\n {t(activeRole?.role_name)}\n \n {t('Only team admins can change roles of members.')}\n \n
\n {children}
);\n\nDialogRenderer.propTypes = { children: node };\nDialogRenderer.defaultProps = { children: null };\n\nexport const ContentRenderer = ({ children, ...props }) => (\n \n
\n);\n\nContentRenderer.propTypes = { children: node };\nContentRenderer.defaultProps = { children: null };\n\nexport const HeaderRenderer = ({ onCloseClick, ...props }) => (\n \n {children}\n
\n \n
\n );\n};\n\nAside.propTypes = {\n onContactSalesClick: func.isRequired,\n onLearnMoreClick: func.isRequired\n};\n\nexport default Aside;\n","import React, { useEffect, useRef, useState } from 'react';\nimport { Modal } from '@jotforminc/uikit';\nimport {\n func, bool, object\n} from 'prop-types';\nimport { handleCustomNavigation } from '@jotforminc/utils';\nimport { t } from '@jotforminc/translation';\nimport {\n PrefilledLeadFormAside, ASSET_IDENTIFIER, ALL_TEXTS, CTA_URLS, userPropType, LEAD_FORM_MAP, GA_FORM_TRACKING_ITEMS, SDR_SOURCES, GA_AD_FORM_TRACKING_ITEMS,\n GA_SUFFIXES, createGaAttributes, gaDataLayerPushClose, setEPActions, mapCallbacksToGaTrackingItems, saveCustomerAsHubspotFormByUsername, hasAdwordsModeOn\n} from '@jotforminc/ep-utils';\nimport { ContentRenderer, DialogRenderer, HeaderRenderer } from './Renderers';\nimport Aside from './Aside';\nimport './teamsModal.scss';\n\nconst TeamsModal = ({\n user,\n modalProps,\n onClose\n}) => {\n const uikitModalRef = useRef(null);\n const [isFormVisible, setIsFormVisible] = useState(false);\n const { PRODUCT: { TEAMS_MODAL: target } } = ASSET_IDENTIFIER;\n const { TEAMS_MODAL: { LEARN_MORE_URL } } = CTA_URLS;\n const gaAttributes = createGaAttributes(target);\n const gaAttributesClose = createGaAttributes(target, GA_SUFFIXES.CLOSE);\n\n const isAdForm = hasAdwordsModeOn();\n let { [target]: gaFormTrackingItems } = isAdForm ? GA_AD_FORM_TRACKING_ITEMS : GA_FORM_TRACKING_ITEMS;\n\n useEffect(() => {\n setEPActions({ asset: target, target, action: 'seen' });\n saveCustomerAsHubspotFormByUsername({ lastProductAssetInteraction: SDR_SOURCES.TEAMS_ADD_NEW_USER });\n }, []);\n\n const handleCloseButton = () => {\n uikitModalRef.current?.hide();\n setEPActions({ asset: target, target, action: 'close' });\n };\n\n const handleClose = () => {\n gaDataLayerPushClose(gaAttributes);\n onClose();\n };\n\n const handleApplyNowClick = () => {\n setEPActions({ asset: target, target: 'applyNowButton', action: 'click' });\n setIsFormVisible(true);\n };\n\n const handleLearnMoreClick = () => {\n setEPActions({ asset: target, target: 'learnMoreButton', action: 'click' });\n handleCustomNavigation(`${window.location.origin}${LEARN_MORE_URL}`);\n };\n\n const handleSubmitApplicationClick = () => {\n setEPActions({ asset: target, target: 'submitApplicationButton', action: 'click' });\n };\n\n const handleFormSubmit = () => {\n setEPActions({ asset: target, target, action: 'formSubmit' });\n };\n\n gaFormTrackingItems = mapCallbacksToGaTrackingItems(gaFormTrackingItems, [handleSubmitApplicationClick]);\n\n return (\n \n
\n {t(ALL_TEXTS.JOTFORM_ENTERPRISE)}
\n\n {translationRenderer(ALL_TEXTS.JOTFORM_TEAMS_MODAL_CONTENT)({\n renderer1: str => {str}\n })}\n
\n\n {/* contact sales */}\n \n {t(ALL_TEXTS.CONTACT_SALES)}\n \n {/* learn more */}\n \n {t(ALL_TEXTS.LEARN_MORE)}\n \n
\n \n
\n );\n};\n\nTeamsModal.propTypes = {\n user: userPropType.isRequired,\n modalProps: object,\n defaultVisible: bool,\n onClose: func,\n logAbTestAction: func\n};\n\nTeamsModal.defaultProps = {\n modalProps: {},\n defaultVisible: true,\n onClose: f => f,\n logAbTestAction: f => f\n};\n\nexport default TeamsModal;\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { getRootElement, ENTERPRSE_PROMOTIONS_ROOT_EL_ID } from '@jotforminc/ep-utils';\nimport { TeamsModal } from '../components';\n\nconst renderEnterpriseTeamsPropertyModal = (\n rootId,\n clickTarget,\n user\n) => {\n const rootElId = rootId || ENTERPRSE_PROMOTIONS_ROOT_EL_ID;\n const rootEl = getRootElement(rootElId);\n\n const target = clickTarget ? `_${clickTarget}` : '';\n\n const handleClose = () => {\n ReactDOM.unmountComponentAtNode(rootEl);\n };\n\n ReactDOM.render(\n \n {isFormVisible ? (\n
\n \n \n {t(ALL_TEXTS.CONTACT_SALES_REPRESENTATIVE)}\n
\n ) : (\n <>\n \n {/* aside */}\n
\n \n 
\n 
\n
\n \n )}\n\n 
\n 
\n \n
\n {isAdmin && invitationSent && (\n {name || username}
\n{email}
\n\n
\n )}\n \n -1}\n enabledRoles={enabledRoles}\n ref={roleButtonRef as RefObject}\n skipSetSelectedOption={true}\n />\n
\n \n {isMemberRoleInvalid ? ({t('Please select a role to this team member.')}) : ''}\n {error ? ({t(error)}) : ''}\n
\n )}\n \n \n + \n {t('Invite more members')}\n \n )}\n
\n \n \n {isAdmin && (\n setPage(PAGE.PENDING)}\n usePopover={false}\n id={id}\n defaultMemberRole={defaultMemberRole}\n />\n )}\n
\n - \n {isMembersFetched && teamMembers.map((member, index) => {\n const {\n username = '', isOwner, account_type: accountType, isDataOnlyUser\n } = member;\n const { disableReason, enabledRoles } = getRoleChangeDisableReason({\n members: teamMembers, isOwner, username, accountType, isDataOnlyUser\n });\n\n return (\n
\n
\n);\n\nSection.propTypes = {\n title: string,\n children: oneOfType([element, arrayOf(element)])\n};\n\nSection.defaultProps = {\n title: '',\n children: null\n};\n\nexport default Section;\n","import momentTimeZone from 'moment-timezone';\n\nconst SERVER_TIMEZONE = 'America/New_York';\nconst DEFAULT_DATE_FORMAT = 'MMMM D, YYYY HH:mm';\nconst SUBMISSION_DATE_FORMATS = [\n 'M/D/YYYY',\n 'D/M/YYYY',\n 'MMM D, YYYY',\n 'MMMM D, YYYY',\n 'ddd, MMM D, YYYY',\n 'dddd, MMMM D, YYYY',\n 'MMM D, YYYY HH:mm',\n DEFAULT_DATE_FORMAT,\n 'ddd, MMM D, YYYY HH:mm',\n 'dddd, MMMM D, YYYY HH:mm'\n];\n\nconst localeSymbol = Symbol('locale');\nconst timezoneSymbol = Symbol('timezone');\nconst callbackSymbol = Symbol('callback');\n\nclass Moment {\n constructor() {\n this[localeSymbol] = 'en';\n this[timezoneSymbol] = null;\n this[callbackSymbol] = {\n setLocale: {},\n setTimezone: {}\n };\n }\n\n get locale() {\n return this[localeSymbol];\n }\n\n get timezone() {\n return this[timezoneSymbol];\n }\n\n get callback() {\n return this[callbackSymbol];\n }\n\n get formatList() {\n const formatListObject = momentTimeZone.localeData(this.locale)._longDateFormat;\n return formatListObject && Object.keys(formatListObject).length > 0 ? [\n formatListObject.LLLL,\n formatListObject.LLL,\n formatListObject.LL,\n formatListObject.L\n ] : SUBMISSION_DATE_FORMATS;\n }\n\n setLocale(locale = 'en') {\n this[localeSymbol] = locale;\n Object.values(this.callback.setLocale).forEach(callback => callback());\n }\n\n setTimezone(timezone) {\n this[timezoneSymbol] = timezone;\n\n Object.values(this.callback.setTimezone).forEach(callback => callback());\n }\n\n dateToMoment(date, dateFormat) {\n const dateObject = momentTimeZone(date, dateFormat);\n\n const dateObjectWithTimezone = this.timezone\n ? dateObject.clone().tz(this.timezone)\n : dateObject.clone().utcOffset(this.serverTimezoneOffset(date));\n\n return dateObjectWithTimezone.locale(this.locale);\n }\n\n /**\n * Format date with given parameters\n * @param {Date} date\n * @param {Date} dateFormat ex: 'YYYY-MM-DD HH:mm ZZ'\n * @param {Date} intendedFormat ex: 'MMM D, YYYY h:mm A'\n * @returns Formatted date.\n */\n formatDate(date, dateFormat, intendedFormat) {\n return this.dateToMoment(date, dateFormat).format(intendedFormat);\n }\n\n /**\n * Format date with given parameters and timezone\n * @param {Date} date\n * @param {Date} format ex: 'YYYY-MM-DD HH:mm ZZ'\n * @param {Date} intendedFormat ex: 'MMM D, YYYY h:mm A'\n * @returns Formatted date according to timezone.\n */\n formatDateWithTimezone(date, format, intendedFormat) {\n const serverTimezoneOffset = this.serverTimezoneOffset(date);\n const timezoneDate = `${date} ${serverTimezoneOffset}`;\n\n return this.formatDate(timezoneDate, format, intendedFormat);\n }\n\n serverTimezoneOffset(date) {\n return momentTimeZone(date).tz(SERVER_TIMEZONE).format('Z');\n }\n\n addListener(methodName, identifier, callback) {\n this.callback[methodName][identifier] = callback;\n }\n\n removeListener(methodName, identifier) {\n delete this.callback[methodName][identifier];\n }\n\n getTimeZoneOffsetWithDate(date, timeZone) {\n return momentTimeZone.tz(date, timeZone).format('Z');\n }\n\n getDateWithTimezone(date = undefined, timeZone, dateFormat) {\n return momentTimeZone(date).tz(timeZone).format(dateFormat);\n }\n\n convertServerDateToUserTimezone(date, timeZone, dateFormat) {\n return momentTimeZone.tz(date, SERVER_TIMEZONE).tz(timeZone).format(dateFormat);\n }\n\n /**\n * Create a date from a timestamp of a given\n * source timezone converted to a date of the\n * destination timezone.\n *\n * @param {number} timestamp\n * @param {string} srcTimezone\n * @param {string} destTimezone\n * @returns Date with the destination timezone.\n */\n getDateFromTimeStamp(timestamp, srcTimezone, destTimezone) {\n return new Date(\n momentTimeZone.tz(timestamp, srcTimezone)\n .tz(destTimezone)\n .format('YYYY/MM/DD HH:mm:ss')\n );\n }\n\n /**\n * Return the timezone adjusted moment object.\n */\n tz(date, timeZone) {\n return momentTimeZone.tz(date, timeZone);\n }\n\n now() {\n return momentTimeZone();\n }\n\n /**\n * Returns if the given date string is a valid date.in expected format\n * @param {string} date\n * @param {string} dateFormat\n * @returns {boolean} true if the date is valid, false otherwise\n */\n isValid(date, dateFormat) {\n return momentTimeZone(date, dateFormat).isValid();\n }\n}\n\nexport const moment = new Moment();\n","import React from 'react';\nimport { t, translationRenderer } from '@jotforminc/translation';\n\nexport const DYNAMIC_TEXT_REGEX = /{{(.*?)}}/;\n\nexport const SERVER_DATETIME_FORMAT = 'YYYY-MM-DD HH:mm:ss'; // 2020-02-05 16:44:22\nexport const SHORT_DATE_FORMAT = 'll'; // Feb 5, 2020\nexport const LONG_DATE_FORMAT = 'lll'; // February 5rd, 2020 16:44:22\n\nexport const generateSubmissionPermissionOptions = (userType, { useJotformSign = false } = {}) => {\n const defaultPermissions = [\n {\n showWhenSelected: t('Submit Only'),\n text: t('Submit Only'),\n desc: translationRenderer(`${userType} can [1[view]] and [2[submit]] the form only.`)({\n fallback: str => {str}\n }),\n value: 'submitOnly'\n }, {\n showWhenSelected: t('Submit & View'),\n text: t('Submit & View Later'),\n desc: translationRenderer(`${userType} can [1[submit]] the form and [2[view]] their submissions later.`)({\n fallback: str => {str}\n }),\n value: 'submitAndView'\n },\n {\n showWhenSelected: t('Submit & Edit'),\n text: t('Submit & Edit Later'),\n desc: translationRenderer(`${userType} can [1[submit]] the form and [2[view and edit]] their submissions later.`)({\n fallback: str => {str}\n }),\n value: 'submitAndEdit'\n }\n ].map(permission => {\n const disableEdit = permission.value === 'submitAndEdit' && useJotformSign;\n if (disableEdit) {\n return { ...permission, hideFromOptions: true };\n }\n return permission;\n });\n\n return defaultPermissions;\n};\n\nexport const USER_PERMISSION_OPTIONS = generateSubmissionPermissionOptions('Users');\nexport const ASSIGNEE_PERMISSION_OPTIONS = generateSubmissionPermissionOptions('Assignee');\n\nexport const DEFAULT_LINK_SETTINGS = [\n {\n key: 'SHOW_VIEW_SUBMISSION_LINK_THANKYOU',\n dynamicKey: 'THANK_YOU',\n defaultValue: 'No',\n propName: 'showSubmissionLinkOnThankyou'\n },\n {\n key: 'SHOW_VIEW_SUBMISSION_LINK_EMAIL',\n dynamicKey: 'AUTORESPONDER_EMAIL',\n defaultValue: 'No',\n propName: 'showSubmissionLinkOnAutoresponder'\n },\n {\n key: 'ALLOW_FORM_FILLER_TO_CONTACT',\n dynamicKey: 'CONTACT_SENTBOX',\n defaultValue: 'Yes',\n propName: 'allowFormFillerToContact'\n }\n];\n\nexport const ACCESS_TYPE_COLORS = {\n PUBLIC_ACCESS: {\n fillColor: '#529300',\n backgroundColor: '#EDFED1',\n borderColor: '#64B200'\n },\n PRIVATE_ACCESS: {\n fillColor: '#4277FF',\n backgroundColor: '#EDF2FF',\n borderColor: 'rgba(66, 119, 255, 0.53)'\n },\n COMPANY_ACCESS: {\n fillColor: '#F17F15',\n backgroundColor: '#FFEDD1',\n borderColor: '#F38F32'\n }\n};\n\n// List of available permissions when inviting a user via teams, forms, sheets etc\nexport const PERMISSION_LIST = [\n // Form related permissions\n 'viewOnly',\n 'submitOnly',\n 'submitAndView',\n 'submitAndEdit',\n // Sheet related permissions\n 'readOnly',\n 'commenter',\n 'collaborator',\n // Team related permissions\n 'team_admin',\n 'data_collaborator',\n 'data_read_only',\n 'form_collaborator'\n];\n","import { RequestLayer, Interceptors } from '@jotforminc/request-layer';\n\nconst layer = new RequestLayer('/API', {\n interceptorConfig: {\n teamID: global.teamID,\n customResponseInterceptors: [Interceptors.requestManagerResponseNormalizer]\n }\n});\n\nexport default layer;\n","import moment from 'moment-timezone';\nimport { isEmail, moment as CommonMoment } from '@jotforminc/utils';\nimport { SERVER_DATETIME_FORMAT, SHORT_DATE_FORMAT, LONG_DATE_FORMAT } from './constants';\nimport layer from './layer';\n\nCommonMoment.setLocale(window.Translations.currentLocale);\n\nexport const withEnterPress = fn => event => {\n const { target: { key, keyCode } } = event;\n return (key === 'Enter' || keyCode === 13) && fn(event);\n};\n\nexport const defaultRecordEvent = () => {\n console.warn('No record event fn supplied! Actions are not being recorded!');\n};\n\nexport const getMomentDate = date => moment(date, SERVER_DATETIME_FORMAT);\nexport const getShortDate = date => CommonMoment.formatDate(date, SERVER_DATETIME_FORMAT, SHORT_DATE_FORMAT);\nexport const getLongDate = date => CommonMoment.formatDate(date, SERVER_DATETIME_FORMAT, LONG_DATE_FORMAT);\nexport const isDatePassed = (then, timezone) => {\n let expireTime = then;\n // If then is moment object get expire time as string\n if (typeof expireTime !== 'string') {\n expireTime = moment(then).format('YYYY-MM-DD HH:mm');\n }\n const momentNow = moment().clone().tz(timezone);\n const momentThen = moment.tz(expireTime, timezone);\n return momentNow.isAfter(momentThen, 'seconds');\n};\n\nexport const isValidAssignEmail = (email, allowPlus = false) => {\n const isAllowed = allowPlus || !/\\+\\d+@(?!jotform\\.com)/.test(email);\n return isEmail(email) && isAllowed;\n};\n\nexport const fetchEnterpriseUsers = () => {\n return layer.get('enterprise/extended-users');\n};\n","const ALL_TEXTS = {\n NEW_LINK_GENERATION_ERROR: 'New link cannot be generated. Please try again later.',\n NEW_LINK_GENERATION_SUCCESS: 'New link generated.',\n COPY_LINK_SUCCESS: 'Copied to Clipboard!',\n CSV_UPLOAD_ERROR: 'CSV file failed to upload. Please check the format of the CSV file and try again',\n CSV_FILE_ERROR: 'Invalid File Type',\n SHARE_LINK_HEADER: 'Assign With Link',\n SHARE_LINK_HEADER_DESC: 'Anyone with this link can become an assignee.',\n ASSIGNED_TO: 'Assigned to',\n ASSIGNED_TO_NUMBER: 'Shared with {numberOfUsers} {formNoun}',\n ASSIGNED_TO_NO_ONE: 'Assigned to no one',\n SETTINGS: 'Settings',\n CREATE_LINK: 'Create Link',\n GENERATE_NEW: 'Generate New Link',\n COPY_LINK: 'Copy Link',\n INVITE_PEOPLE: 'Invite By Email',\n UPLOAD_CSV_FILE: 'Upload CSV File',\n DOWNLOAD_SAMPLE_CSV: 'Download Sample CSV',\n ADD_MORE: 'Add more...',\n ADD_MULTIPLE_EMAIL_ADDRESSES: 'Enter email addresses to send invitation with permissions.',\n ADD_MULTIPLE_EMAIL_OR_NAME: 'Enter name or email',\n ADD_YOUR_MESSAGE_HERE: 'Add an invitation message (optional)',\n DISCARD_MESSAGE: 'Discard Message',\n ADD_MESSAGE: 'Add Message',\n EMAIL_SENT: 'Email Sent',\n SENDING: 'Sending...',\n SEND_INVITATION: 'Send Invitation',\n ASSIGNEE_LIMIT: 'You’ve reached your invitation limit. You can only invite {{ASSIGNEE_LIMIT}} people. To add more, {{PLEASE_UPGRADE_YOUR_ACCOUNT}}.',\n ASSIGNEE_LIMIT_WITHOUT_ADD_MORE: 'You’ve reached your invitation limit. You can only invite {{ASSIGNEE_LIMIT}} people.',\n PLEASE_UPGRADE_YOUR_ACCOUNT: 'please upgrade your account',\n LINK_WILL_BE_EXPIRED: 'This link will expire on [1[{EXPIRATION_DATE}]]',\n LINK_EXPIRED: 'Your link expired.',\n GENERATE_NEW_LINK: 'Generate new link',\n EXPIRATION_DATE: 'expiration date',\n LINK_EXPIRED_GENERATE_NEW: 'Your link expired. [1[Generate new link]] or change the [2[expiration date]].',\n EMAIL_ADDRESSES_FOUND: '{{NUMBER_OF_EMAILS}} email address(es) found.',\n EMAIL_ADDRESSES_ERRORED_SINGLE: '[1[{NUMBER_OF_ERRORED_EMAILS}]] invalid email address.',\n EMAIL_ADDRESSES_ERRORED_ENTERPRISE_SINGLE: '[1[{NUMBER_OF_ERRORED_EMAILS}]] email address is not found in your Enterprise User List.',\n EMAIL_ADDRESSES_ERRORED: '[1[{NUMBER_OF_ERRORED_EMAILS}]] invalid email addresses.',\n EMAIL_ADDRESSES_ERRORED_ENTERPRISE: '[1[{NUMBER_OF_ERRORED_EMAILS}]] email addresses are not found in your Enterprise User List.',\n ACCESS_SETTINGS: 'Access Settings',\n COMPANY_ACCESS_PERMISSION: 'Company Access Permission',\n PERMISSIONS: 'Permissions',\n LINK_SETTINGS: 'Options',\n LINK_EXPIRATION_DATE: 'Link Expiration Date',\n SET_CUSTOM_EXPIRATION_DATE: 'Set custom expiration date for Share Link',\n ALLOW_REQUEST_ACCESS: 'Allow users to request access to this resource',\n THANK_YOU: 'Thank you',\n AUTORESPONDER_EMAIL: 'Autoresponder Email',\n SHOW_VIEW_SUBMISSION_LINK_THANKYOU: 'Show view submission link on {{THANK_YOU}} page.',\n SHOW_VIEW_SUBMISSION_LINK_EMAIL: 'Show view submission link in {{AUTORESPONDER_EMAIL}}.',\n ALLOW_FORM_FILLER_TO_CONTACT: 'Allow form fillers to contact through inbox.',\n PUBLIC_ACCESS: 'Public Access',\n PRIVATE_ACCESS: 'Private Access',\n AVAILABLE_TO_ANYONE: 'Available to anyone.',\n ONLY_AVAILABLE_TO_ASSIGNEES: 'Only available to invited people.',\n COMPANY_ACCESS: 'Company Access',\n ONLY_AVAILABLE_TO_ORGANIZATION: 'Only available to people in your organization.',\n JOTFORM_ENTERPRISE_ORGANIZATION_ASSIGN_FEATURE: 'If you would like to use this feature please check out Jotform Enterprise.',\n REQUIRE_EMAIL_DOMAIN: 'Require organization email domain',\n REQUIRE_SSO: 'Require SSO',\n OPEN_IN_NEW_TAB: 'Open in new tab',\n EDIT_LINK: 'EDIT',\n RESET_LINK: 'RESET',\n LINK_EDIT_FAIL: 'Link edit failed.',\n LINK_EDIT_SUCCESS: 'Successfully changed.',\n LINK_RESET_SUCCESS: 'Link reset success.',\n ASSIGN_TO_EVERYONE_IN_ORGANIZATION: 'Assign to everyone in the organization',\n ASSIGN_TO_EVERYONE_IN_ORGANIZATION_DESC: 'Make this form available to everyone in your organization, even newcomers.',\n SEND_NOTIFICATION_EMAIL: 'Send assignment email to everyone',\n SEND_EMAIL: 'Send email',\n SEND_EMAIL_TO_ENTIRE_ORGANIZATION: 'Are you sure you want to assign this form to everyone in your organization?',\n SEND_EMAIL_TO_ENTIRE_LIST: 'Are you sure you want to assign this form to everyone in the list?',\n SEND_EMAIL_TO_ENTIRE_ORGANIZATION_DESC: 'We found {{NUMBER_OF_EMAILS}} email addresses registered for your organization including you.'\n + ' If you send this email, it will automatically be added to their Assigned Forms folder',\n SEND_EMAIL_TO_ENTIRE_LIST_DESC: 'We found {{NUMBER_OF_EMAILS}} email addresses in your invitee list.',\n EMAIL_WILL_AUTOMATICALLY_ASSIGNED: 'If you send this email, it will automatically be added to their Assigned Forms folder.',\n YES_ASSIGN_TO_ALL: 'Yes, Assign to All',\n REVOKE_FROM_ORGANIZATION: 'Revoke Access for All Existing Users in Your Organization',\n REVOKE_FROM_ORGANIZATION_DESC: 'We found {{NUMBER_OF_EMAILS}} email addresses registered for your organization'\n + ' If you revoke access for them all, they will no longer be able to access this form through the Assigned Forms folder.'\n + ' Except you. You can always access your forms as the owner of the form.',\n REVOKE_FROM_ORGANIZATION_CONFIRM: 'Are you sure you want to revoke access for all existing users in the organization?',\n YES_REVOKE_FROM_ORGANIZATION: 'Revoke all existing users',\n NO_KEEP_ORGANIZATION_ASSIGN: 'Keep all existing users',\n CANCEL: 'Cancel',\n REMOVE_USER_CONFIRM: 'Are you sure you want to revoke selected assignee?',\n REMOVE_USER_DESCRIPTION: 'If you revoke the assignee, they will no longer have access to this form. You will have still access to their previous submissions.',\n YES_DELETE: 'Yes, delete',\n NO_KEEP: 'No, keep',\n REVOKE_USER: 'Revoke {name}',\n REVOKE_ALL: 'Revoke All Assignees',\n REVOKE_SELECTED_USERS: 'Revoke Selected {length} Assignees',\n NO_ONE_ASSIGNED: 'No one assigned to this form',\n LIST_WILL_APPEAR_HERE: 'Assignee list will appear here.',\n COMPANY_DOMAIN_ERROR: 'Please check email domain',\n TO: 'To:',\n APPLY: 'Apply',\n SAVING: 'Saving',\n SET_PREFILL: 'Set Prefill',\n EDIT_PREFILL: 'Edit Prefill',\n USERS: 'Users',\n INVITATION_STATUS: 'Status',\n INVITED: 'Invited',\n INVITE_SELECTED_BUTTON: 'Invite Selected',\n INVITE_BUTTON: 'Invite',\n SELECT_ALL: 'Select All',\n EDIT_SHARE_LINK_BUTTON: 'Edit Share Link Button',\n REQUIRE_SPECIFIC_IP: 'Require specific IP addresses '\n};\nclass ModuleTexts {\n constructor(allTexts) {\n this._texts = allTexts;\n }\n\n get Texts() {\n return this._texts;\n }\n\n setTexts(allTexts) {\n this._texts = allTexts;\n }\n}\n\nexport const SharingTextsModule = new ModuleTexts(ALL_TEXTS);\nexport default ALL_TEXTS;\n","import React, { useMemo } from 'react';\nimport { renderToStaticMarkup } from 'react-dom/server';\nimport { getShortDate, getLongDate, getMomentDate } from './utils';\nimport { DYNAMIC_TEXT_REGEX } from './constants';\nimport { SharingTextsModule } from './texts';\n\nexport const translateTextGenerator = t => text => t(text);\nexport const dynamicTextRenderGenerator = (text, t) => {\n const textParts = text.split(DYNAMIC_TEXT_REGEX);\n const memoizedTranslationFN = dynamicTextReplacements => {\n const allText = textParts.map(textPart => renderToStaticMarkup(dynamicTextReplacements[textPart]) || textPart);\n return ;\n };\n return memoizedTranslationFN;\n};\nexport const useTranslatedTexts = t => useMemo(() => {\n const translateText = translateTextGenerator(t);\n return Object.keys(SharingTextsModule.Texts).reduce((prev, curr) => {\n const { [curr]: untranslatedText } = SharingTextsModule.Texts;\n\n const translatedText = translateText(untranslatedText);\n const isDynamicParameterExist = Boolean(untranslatedText.match(DYNAMIC_TEXT_REGEX));\n const textToReplace = isDynamicParameterExist ? dynamicTextRenderGenerator(untranslatedText, t) : translatedText;\n return ({ ...prev, [curr]: textToReplace });\n }, {});\n}, [t, SharingTextsModule.Texts]);\n\nexport const useMemoizedFormattedDate = date => useMemo(() => (date ? [getShortDate(date), getLongDate(date)] : ['', '']), [date]);\n\nexport const useMemoizedRemainingTime = diffInSec => useMemo(() => {\n if (!diffInSec) return [];\n\n if (diffInSec > (30 * 86400)) { // Longer than a month\n return getMomentDate(new Date()).add(diffInSec, 'seconds').format('dddd, MMMM D, YYYY');\n }\n\n const units = {\n seconds: 60, minutes: 60, hours: 24, days: 31\n };\n let secondsLeft = diffInSec;\n return Object.keys(units)\n .reduce((readableTimeUnits, label) => {\n const modulus = units[label];\n const durationValue = secondsLeft % modulus;\n secondsLeft = (secondsLeft - durationValue) / modulus;\n if (durationValue !== 0 && label !== 'seconds') {\n return [{ [label]: durationValue }, ...readableTimeUnits];\n }\n return readableTimeUnits;\n }, []);\n});\n","import React from 'react';\nimport {\n string, func, oneOfType, node, arrayOf, shape, oneOf\n} from 'prop-types';\nimport { OptionGroup } from '@jotforminc/option-group';\n\nimport Section from '../../components/Section';\n\nimport { useTranslatedTexts } from '../../helpers/hooks';\nimport { PERMISSION_LIST, USER_PERMISSION_OPTIONS } from '../../helpers/constants';\n\nconst PermissionSection = ({\n t,\n defaultValue,\n onChange,\n recordEvent,\n permissionOptions: _permissionOptions\n}) => {\n const { PERMISSIONS } = useTranslatedTexts(t);\n\n const permissionOptions = typeof _permissionOptions === 'function'\n ? _permissionOptions('permission-section')\n : _permissionOptions;\n\n const onSelectionChange = value => {\n recordEvent('assigneeSubmissionPermissionChanged', value);\n return onChange({ assigneeSubmissionPermission: value });\n };\n\n return (\n \n {title}\n
\n {children}\n {text}
}\n OptionContainerRenderer={pr => }\n GroupRenderer={({ text, children, ...p }) => (\n {text}
\n - {children}
\n onLinkExpireDateChange(date)}\n onChangeRaw={({ target: { value } }) => onLinkExpireDateChange(value, true)}\n minDate={moment(new Date())}\n />\n onLinkExpireTimeChange(date)}\n onChangeRaw={({ target: { value } }) => onLinkExpireTimeChange(value, true)}\n className=\"withArrow\"\n showTimeSelect\n showTimeSelectOnly\n timeIntervals={30}\n dateFormat=\"h:mm a\"\n />\n
\n ) : null}\n {(isAssignLinkExpired && isLinkExpirationVisible) ? (\n \n {LINK_EXPIRED}\n
\n ) : null}\n \n );\n};\n\nLinkExpireSection.propTypes = {\n assignLinkExpireDate: string,\n assignLinkExpireTimezone: string,\n userTimezone: string,\n recordEvent: func,\n t: func,\n onChange: func\n};\n\nLinkExpireSection.defaultProps = {\n assignLinkExpireDate: '',\n assignLinkExpireTimezone: '',\n userTimezone: '',\n recordEvent: defaultRecordEvent,\n t: text => text,\n onChange: f => f\n};\n\nexport default LinkExpireSection;\n","import React, { useCallback, useMemo } from 'react';\nimport {\n arrayOf,\n func,\n oneOf,\n shape,\n string\n} from 'prop-types';\n\nimport { Feature } from '@jotforminc/feature-toggle';\nimport { OptionGroup } from '@jotforminc/option-group';\n\nimport Section from '../../components/Section';\nimport { useTranslatedTexts } from '../../helpers/hooks';\nimport LinkExpireSection from './LinkExpire';\nimport { PERMISSION_LIST } from '../../helpers/constants';\nimport { SharingTextsModule } from '../../helpers/texts';\n\nconst LinkSettingsSection = ({\n t,\n onChange,\n recordEvent,\n linkSettingsAvailable,\n linkSettingsValues,\n assigneeSubmissionPermission,\n assignLinkExpireDate,\n assignLinkExpireTimezone,\n userTimezone,\n allowRequestAccess\n}) => {\n const translationFactory = useTranslatedTexts(t);\n\n const disabled = useMemo(() => assigneeSubmissionPermission === 'submitOnly', [assigneeSubmissionPermission]);\n\n const allowRequestAccessDefaultValue = useMemo(() => (allowRequestAccess === 'Yes' ? 'allowRequestAccess' : ''), [allowRequestAccess]);\n\n const onAllowRequestAccessChange = useCallback(value => {\n return onChange({ allowRequestAccess: value.includes('allowRequestAccess') ? 'Yes' : 'No' });\n }, [onChange]);\n\n const defaultValue = useMemo(() => {\n const settingValues = linkSettingsAvailable.map(setting => ({\n ...setting,\n value: linkSettingsValues[setting.propName] || setting.defaultValue\n }));\n\n return settingValues\n .filter(setting => setting.value === 'Yes')\n .map(setting => setting.propName);\n }, [linkSettingsAvailable, linkSettingsValues]);\n\n const options = useMemo(() => linkSettingsAvailable.map(setting => {\n return {\n text: typeof translationFactory[setting.key] === 'function' ? translationFactory[setting.key]({\n [setting.dynamicKey]: {SharingTextsModule.Texts[setting.dynamicKey]}\n }) : translationFactory[setting.key],\n value: setting.propName,\n disabled: setting.disabled || false,\n isSelected: setting.isSelected || false\n };\n }), [linkSettingsAvailable, translationFactory]);\n\n const onSelectionChange = valueList => !disabled && onChange(\n linkSettingsAvailable.reduce((final, setting) => {\n const _final = { ...final };\n const prevValue = linkSettingsAvailable.find(s => s.propName === setting.propName).value;\n const newValue = valueList.indexOf(setting.propName) > -1 ? 'Yes' : 'No';\n if (prevValue !== newValue) {\n recordEvent(`${setting.propName}Changed`, newValue);\n }\n _final[setting.propName] = newValue;\n return _final;\n }, {})\n );\n\n return (\n \n
\n );\n};\n\nSsoAccessLegacyBanner.propTypes = {\n isTestVariant: bool,\n logAbTestAction: func,\n onJotformEnterpriseClick: func\n};\n\nSsoAccessLegacyBanner.defaultProps = {\n isTestVariant: false,\n logAbTestAction: f => f,\n onJotformEnterpriseClick: f => f\n};\n\nexport default SsoAccessLegacyBanner;\n","import React from 'react';\nimport { func, shape, bool } from 'prop-types';\nimport { Option } from '@jotforminc/option-group';\nimport { SDR_SOURCES, saveCustomerAsHubspotFormByUsername } from '@jotforminc/ep-utils';\nimport { SsoAccessLegacyBanner } from '@jotforminc/ep-share-panel';\n\nconst SSOAccess = props => {\n const {\n option: {\n isEnterprise, isSSOSupported, onEnterpriseLinkClick,\n isEnterpriseAdVisible, setEnterpriseAdVisibility\n }\n } = props;\n\n const onSSOClick = e => {\n if (!isEnterprise && !isSSOSupported) {\n e.stopPropagation();\n setEnterpriseAdVisibility(true);\n saveCustomerAsHubspotFormByUsername({ lastProductAssetInteraction: SDR_SOURCES.SHARE_PANEL_SETTINGS_SSO_BANNER });\n }\n };\n\n return (\n <>\n \n \n {t(ALL_TEXTS.EXPLORE_JOTFORM_ENTERPRISE)}\n \n
\n {t(ALL_TEXTS.MORE_POWER_MORE_SUPPORT)}
\n {t(ALL_TEXTS.JOTFORM_ENTERPRISE)}
\n {t(ALL_TEXTS.JOTFORM_ENTERPRISE_SSO_FEATURE)}
\n \n
\n \n onChange(textInputRef.current.value))}\n {...inputProps}\n />\n {domainError ?
\n );\n};\n\nCompanyTextBox.propTypes = {\n defaultValue: string,\n onBlur: func\n};\n\nCompanyTextBox.defaultProps = {\n defaultValue: '',\n onBlur: f => f\n};\n\nexport default CompanyTextBox;\n","import React from 'react';\nimport {\n bool, func, shape, string\n} from 'prop-types';\nimport { Option } from '@jotforminc/option-group';\n\nimport CompanyTextBox from './CompanyTextBox';\n\nconst OrganizationAccess = props => {\n const { option: { organizationAccess, onAccessSettingsChange } } = props;\n\n return (\n \n );\n};\n\nOrganizationAccess.propTypes = {\n option: shape({\n isSelected: bool,\n organizationAccess: string,\n onAccessSettingsChange: func\n })\n};\n\nOrganizationAccess.defaultProps = {\n option: {\n isSelected: false,\n organizationAccess: '',\n onAccessSettingsChange: f => f\n }\n};\n\nexport default OrganizationAccess;\n","import React, { useMemo, useState } from 'react';\nimport {\n func, bool, string\n} from 'prop-types';\nimport { OptionGroup } from '@jotforminc/option-group';\n\nimport SSOAccess from './SSOAccess';\nimport OrganizationAccess from './OrganizationAccess';\nimport { useTranslatedTexts } from '../helpers/hooks';\n\nconst COMPANY_ACCESS_OPTIONS = {\n organizationAccess: 'organizationAccess',\n ssoProtected: 'ssoProtected'\n};\n\nconst CompanyAccess = ({\n t,\n isEnterprise,\n ssoProtected,\n isSSOSupported,\n organizationAccess,\n onEnterpriseLinkClick,\n onAccessSettingsChange\n}) => {\n const {\n REQUIRE_EMAIL_DOMAIN, REQUIRE_SSO, COMPANY_ACCESS_PERMISSION\n } = useTranslatedTexts(t);\n const [companyAccessDefaultValue, setCompanyAccessDefaultValue] = useState(ssoProtected === 'Yes'\n ? COMPANY_ACCESS_OPTIONS.ssoProtected : COMPANY_ACCESS_OPTIONS.organizationAccess);\n const [isEnterpriseAdVisible, setEnterpriseAdVisibility] = useState(false);\n\n const handleChange = val => {\n onAccessSettingsChange(val);\n setCompanyAccessDefaultValue(val);\n };\n\n const companyAccessOptions = useMemo(() => [\n {\n text: REQUIRE_EMAIL_DOMAIN,\n value: COMPANY_ACCESS_OPTIONS.organizationAccess,\n Renderer: OrganizationAccess,\n onAccessSettingsChange,\n isSelected: (companyAccessDefaultValue === COMPANY_ACCESS_OPTIONS.organizationAccess),\n organizationAccess\n },\n (!isEnterprise || isSSOSupported) && {\n t,\n isEnterprise,\n isSSOSupported,\n text: REQUIRE_SSO,\n Renderer: SSOAccess,\n value: COMPANY_ACCESS_OPTIONS.ssoProtected,\n isEnterpriseAdVisible,\n setEnterpriseAdVisibility,\n disabled: !isSSOSupported,\n formAccess: (companyAccessDefaultValue === COMPANY_ACCESS_OPTIONS.organizationAccess) ? COMPANY_ACCESS_OPTIONS.organizationAccess : '',\n onEnterpriseLinkClick,\n isSelected: (companyAccessDefaultValue === COMPANY_ACCESS_OPTIONS.ssoProtected)\n }\n ].filter(val => val), [isEnterprise, isSSOSupported, organizationAccess, companyAccessDefaultValue, isEnterpriseAdVisible]);\n\n return (\n {COMPANY_DOMAIN_ERROR}
: null}\n \n onChange({ selectedResources: val })}\n />\n )}\n />\n {\n showLinkSettings && (\n
\n \n
\n );\n};\n\nHeaderSection.propTypes = {\n title: string\n};\n\nHeaderSection.defaultProps = {\n title: null\n};\n\nexport default HeaderSection;\n","import React, {\n useState, useEffect, forwardRef, useImperativeHandle, useMemo\n} from 'react';\nimport {\n func,\n bool,\n shape,\n elementType,\n arrayOf,\n string,\n number,\n oneOfType\n} from 'prop-types';\n\nimport TextInput from '../TextInput';\n\nimport {\n generateShortID, isPressedKeyTab, isPressedKeyPillboxAddKey, isPressedKeyBackspace\n} from '../../utils';\nimport { useEffectIgnoreFirst } from '../../utils/hooks';\n\nconst Pillbox = forwardRef(({\n inputProps,\n isUniqueList,\n pillValidation,\n PillRenderer,\n PillContainerRenderer,\n RemainingCountRenderer,\n onPillAdd,\n onPillRemove,\n onPillUpdate,\n onPillListChange,\n pills,\n maxCount,\n showRemainingCount,\n showPillIcon,\n readOnly,\n fixedValue,\n setTextInputValue,\n getValidatedList\n}, ref) => {\n // States\n const [items, setItems] = useState(pills);\n const remainingCount = maxCount - items.length;\n\n // State based methods\n const findItemByText = item => Boolean(items.find(({ text }) => text.toLowerCase() === item.toLowerCase()));\n const findItemById = item => Boolean(items.find(({ id }) => id === item.id));\n const generateItem = item => ({\n id: item.id || generateShortID(), text: item.email || item, isValid: pillValidation(item), showPillIcon\n });\n const isValidToAdd = item => {\n if (!isUniqueList) {\n return Boolean(item.email || item);\n }\n\n if (item.id) {\n return Boolean(item.email) && (isUniqueList && !findItemById(item));\n }\n return Boolean(item) && (isUniqueList && !findItemByText(item));\n };\n\n const addTeamItem = ({ teamName, value, teamAvatarURL }) => {\n if (!isValidToAdd(value)) {\n return;\n }\n\n const newItem = {\n id: generateShortID(), text: value, displayedText: teamName, pillIconURL: teamAvatarURL, isValid: pillValidation(value), showPillIcon: true\n };\n const newItems = [...items, newItem];\n setItems(newItems);\n onPillAdd(newItem);\n };\n\n const addItem = item => {\n if (!isValidToAdd(item)) {\n setTextInputValue('');\n return;\n }\n\n const newItem = generateItem(item);\n const newItems = getValidatedList ? getValidatedList([...items, newItem]) : [...items, newItem];\n setItems(newItems);\n onPillAdd(newItem);\n };\n\n const removeItem = item => {\n if (fixedValue.indexOf(item.value) > -1) return;\n\n const newItems = items.filter(({ id }) => (id !== item.id));\n setItems(newItems);\n onPillRemove(item);\n };\n\n const updateItem = newItem => {\n const validatedNewItem = { ...newItem, isValid: pillValidation(newItem.text) };\n const newItems = items.map(item => (item.id === newItem.id ? { ...item, ...validatedNewItem } : item));\n setItems(newItems);\n onPillUpdate(validatedNewItem);\n };\n\n // Effects\n useEffect(() => {\n if (items !== pills) {\n setItems(pills);\n }\n }, [pills]);\n\n useEffectIgnoreFirst(() => {\n onPillListChange(items);\n }, [items]);\n\n useImperativeHandle(ref, () => ({\n addItem,\n addTeamItem,\n removeItem,\n updateItem,\n setItems,\n items\n }));\n\n // Event handlers\n const onBlur = (...parameters) => {\n const { onBlur: onBlurInput, suggestionSelected } = inputProps;\n const [e, inputValue, setInputValue] = parameters;\n\n const preventOnBlur = e.relatedTarget && e.relatedTarget.classList.contains('prevent-onblur-input');\n if (preventOnBlur) {\n return;\n }\n\n const isFocusSuggestion = e.relatedTarget && e.relatedTarget.classList.contains('suggestion');\n\n if (inputValue && !isFocusSuggestion && !suggestionSelected) { // if suggestion Selected is true prevent adding item from input value\n addItem(inputValue);\n setInputValue('');\n setTextInputValue('');\n }\n\n if (onBlurInput) {\n onBlurInput(...parameters);\n }\n };\n\n const onKeyDown = (...parameters) => {\n const { onKeyDown: onKeyDownInput } = inputProps;\n const [e, inputValue, setInputValue] = parameters;\n switch (true) {\n case isPressedKeyPillboxAddKey(e): {\n if (!isPressedKeyTab(e)) {\n e.preventDefault();\n }\n\n if (inputValue) {\n addItem(inputValue);\n setInputValue('');\n }\n break;\n }\n case isPressedKeyBackspace(e) && !inputValue: {\n const [item] = items.slice(-1);\n if (item) {\n removeItem(item);\n }\n break;\n }\n default:\n break;\n }\n\n if (onKeyDownInput) {\n onKeyDownInput(...parameters);\n }\n };\n\n // KeyDown fallback for android chrome\n const onInput = (...parameters) => {\n const { onInput: onTextInput } = inputProps;\n const [e, inputValue, setInputValue] = parameters;\n const lastCharacter = e.nativeEvent.data && e.nativeEvent.data.slice(-1);\n if (lastCharacter && [' ', ','].indexOf(lastCharacter) > -1) {\n e.preventDefault();\n addItem(inputValue);\n setInputValue('');\n e.target.value = '';\n }\n\n if (onTextInput) {\n onTextInput(...parameters);\n }\n };\n\n const onPaste = (...parameters) => {\n const [e] = parameters;\n e.preventDefault();\n const pastedValue = e.clipboardData.getData('Text');\n const pillsToAdd = pastedValue.split(/\\s|,/).filter(isValidToAdd).map(generateItem);\n setItems([...items, ...pillsToAdd]);\n };\n\n const renderedPills = useMemo(() => items.map(item => (\n \n {title && (\n
\n \n {title}\n
\n )}\n {text}
,\n PillContainerRenderer: ({ children }) => {children}
,\n RemainingCountRenderer: ({ children }) => {children}
,\n onPillAdd: f => f,\n onPillRemove: f => f,\n onPillUpdate: f => f,\n onKeyDown: f => f,\n onPillListChange: f => f,\n pillValidation: () => true,\n maxCount: Infinity,\n showRemainingCount: false,\n showPillIcon: false,\n readOnly: false,\n fixedValue: [],\n setTextInputValue: f => f,\n getValidatedList: false,\n suggestionSelected: false\n};\n\nexport default Pillbox;\n","import React, {\n useRef, useState, useEffect, forwardRef, useImperativeHandle\n} from 'react';\nimport {\n arrayOf, string, bool, func, shape, elementType\n} from 'prop-types';\nimport classNames from 'classnames';\nimport { Utils } from '@jotforminc/uikit';\nimport { useLongPress } from '@jotforminc/hooks';\n\nimport IconCross from './assets/svg/icon_cross.svg';\nimport IconPill from './assets/svg/icon_pill.svg';\n\nconst EditablePill = forwardRef(({\n id, text, displayedText, pillIconURL, isValid, removePill, pillIcon: PillIcon, showPillIcon,\n allowEmpty, allowedKeys, updatePill, hideRemoveIcon,\n initialEditable, inputProps, preventEditable, onEditableChange, isBright,\n ...props\n}, ref) => {\n const pillTextRef = useRef();\n const [inputValue, setInputValue] = useState(text);\n const [isEditable, setEditable] = useState(initialEditable);\n const setEditableState = tmpIsEditable => setEditable(!preventEditable && tmpIsEditable);\n\n const handleEditableStateChange = tmpIsEditable => {\n setEditableState(tmpIsEditable);\n onEditableChange(tmpIsEditable);\n };\n const longPressMouseEvents = useLongPress(() => handleEditableStateChange(true));\n\n useImperativeHandle(ref, () => ({\n setEditableState\n }));\n\n const onPillKeyDown = event => {\n const { key, keyCode } = event;\n event.nativeEvent.stopPropagation();\n event.nativeEvent.stopImmediatePropagation();\n if (!isEditable) {\n return;\n }\n\n const abortTyping = key === 'Escape' || keyCode === 27;\n const finalizeTyping = Utils.isPressedKeyPillboxAddKey(event) && !Utils.isPressedKeyOneOf(allowedKeys)(event);\n switch (true) {\n case finalizeTyping:\n if (!allowEmpty && inputValue === '') {\n removePill({ id });\n break;\n }\n updatePill({ id, text: inputValue });\n handleEditableStateChange(false);\n break;\n case abortTyping:\n handleEditableStateChange(false);\n setInputValue(text);\n break;\n default:\n break;\n }\n };\n\n const onPillDoubleClick = () => handleEditableStateChange(true);\n const onPillTextChange = ({ target: { value } }) => setInputValue(value);\n const onRemovePillKeyPress = event => Utils.isPressedKeyEnter(event) && removePill();\n const onPillBlur = () => {\n if (!allowEmpty && inputValue === '') {\n removePill({ id });\n return;\n }\n\n updatePill({ id, text: inputValue });\n handleEditableStateChange(false);\n };\n\n useEffect(() => {\n if (isEditable) {\n pillTextRef.current.focus();\n pillTextRef.current.setSelectionRange(0, inputValue.length);\n }\n }, [isEditable]);\n\n const handleRemovePill = event => {\n event.stopPropagation();\n removePill(event);\n event.preventDefault();\n };\n\n const handleMouseDown = event => {\n event.preventDefault();\n };\n\n const pillSpanClasses = classNames({ isBright }, 'pill-icon');\n const pillClasses = classNames({ isBright, hasBackgroundColor: props?.style?.backgroundColor }, 'pill'); // eslint-disable-line\n\n return (\n \n {addFormFields && questions && (\n \n {\n setFocused(true);\n if (inputProps.onFocus) inputProps.onFocus();\n },\n onBlur: () => {\n setFocused(false);\n if (inputProps.onBlur) inputProps.onBlur();\n },\n suggestionSelected: suggestionSelected\n }}\n setTextInputValue={setTextInputValue}\n {...pillboxProps}\n />\n {shouldShowSuggestions && (\n \n
\n );\n});\n\nEmailInput.propTypes = {\n value: arrayOf(string),\n defaultValue: arrayOf(string),\n userList: arrayOf(shape({\n name: string,\n email: string,\n avatarUrl: string\n })),\n questions: oneOfType([arrayOf(shape({})), shape({})]),\n addFormFields: bool,\n inputProps: shape({\n onFocus: func,\n onBlur: func\n }),\n popoverProps: shape({}),\n PillRenderer: elementType,\n SuggestionRenderer: elementType,\n onChange: func,\n onType: func,\n formTitle: string,\n containerClassName: string,\n pillValidation: oneOfType([func, bool]),\n showPillIcon: bool,\n pillIcon: elementType,\n fuseOptions: object,\n showSuggestionsOnFocus: bool,\n suggestionProps: shape({}),\n onClick: func,\n fieldsLabelText: string,\n useMultipleForms: bool,\n formArray: arrayOf(shape({})),\n showProtectedTag: bool,\n dontFilterListByEmails: bool,\n dontFilterListByTextInput: bool,\n preventEditablePill: bool,\n stickToBottom: bool\n};\n\nEmailInput.defaultProps = {\n value: undefined,\n defaultValue: [],\n userList: [],\n questions: undefined,\n addFormFields: false,\n inputProps: {\n onFocus: f => f,\n onBlur: f => f\n },\n popoverProps: {},\n PillRenderer: DefaultPillRenderer,\n SuggestionRenderer: UserList,\n onChange: f => f,\n onType: f => f,\n formTitle: undefined,\n containerClassName: '',\n pillValidation: false,\n showPillIcon: false,\n pillIcon: undefined,\n fuseOptions: {},\n showSuggestionsOnFocus: false,\n suggestionProps: {},\n onClick: f => f,\n fieldsLabelText: 'Form Fields',\n useMultipleForms: false,\n formArray: [],\n showProtectedTag: false,\n dontFilterListByEmails: false,\n dontFilterListByTextInput: false,\n preventEditablePill: false,\n stickToBottom: false\n};\n\nexport default EmailInput;\n","import React from 'react';\nimport classNames from 'classnames';\nimport { IconExclamationCircleFilled } from '@jotforminc/svg-icons';\nimport {\n bool,\n func,\n node,\n string\n} from 'prop-types';\nimport './styles/style.scss';\n\nconst WarningBox = ({\n colorStyle,\n size,\n Icon,\n fullWidth,\n isLongText,\n children,\n className,\n wrapperClassName,\n showAnimate\n}) => {\n return (\n \n
\n );\n};\n\nWarningBox.propTypes = {\n colorStyle: string,\n size: string,\n Icon: func,\n fullWidth: bool,\n isLongText: bool,\n children: node,\n className: string,\n wrapperClassName: string,\n showAnimate: bool\n};\n\nWarningBox.defaultProps = {\n colorStyle: 'warning',\n size: 'small',\n Icon: IconExclamationCircleFilled,\n fullWidth: true,\n isLongText: false,\n children: null,\n className: '',\n wrapperClassName: '',\n showAnimate: true\n};\n\nexport default WarningBox;\n","import React from 'react';\nimport { string } from 'prop-types';\nimport Styled, { css } from 'styled-components';\n\nconst ScAvatar = Styled.div`\n width: 32px;\n height: 32px;\n border-radius: 50%;\n ${p => ((p.img === null)\n ? css`\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n \n text-transform: capitalize;\n ` : css`\n background-repeat: no-repeat;\n background-size: cover;\n background-position: 50% 50%;\n background-image: url(${p.img});\n\n flex: 0 0 32px;\n background-color: #b9bbd2;\n font-size: 1em;\n line-height: 32px;\n color: #fff;\n `)\n}\n`;\n\nexport const AvatarHolder = ({\n name, avatarUrl, email\n}) => {\n return (\n \n
\n \n
\n {children}
\n \n {children} \n
\n);\n\nDdList.propTypes = {\n children: node.isRequired,\n noMarginTop: bool\n};\n\nDdList.defaultProps = {\n noMarginTop: false\n};\n\nconst DropdownWithDetails = props => {\n return props.useNewStyledPermissionDropdown ? (\n \n
\n )}\n // OptionContainerRenderer={props => }\n {...props}\n />\n );\n};\n\nDropdownWithDetails.propTypes = {\n actionRequired: bool,\n onClick: func,\n className: string,\n noMarginTop: bool,\n onActionRequiredClick: func,\n useNewStyledPermissionDropdown: bool,\n options: arrayOf(shape({\n showWhenSelected: string,\n text: string,\n desc: oneOfType([string, node]),\n value: string\n })),\n recordEvent: func\n};\n\nDropdownWithDetails.defaultProps = {\n actionRequired: false,\n onClick: f => f,\n className: '',\n noMarginTop: false,\n onActionRequiredClick: f => f,\n useNewStyledPermissionDropdown: false,\n options: [],\n recordEvent: f => f\n};\n\nexport default DropdownWithDetails;\n","import Styled from 'styled-components';\n\nexport const ScRF = Styled.div`\n display: flex;\n justify-content: space-between;\n`;\n\nexport const ScRB = Styled.div`\n display: flex;\n flex-direction: column;\n align-items: center;\n overflow-y: auto;\n\n .content {\n width: 90%;\n max-width: 500px;\n padding-bottom: 40px;\n text-align: center;\n font-size: 1em;\n color: #0A1551;\n font-weight: 700;\n margin: auto;\n\n &.isRedWarn {\n svg {\n fill: #FF4947;\n width: 80px;\n height: 80px;\n }\n }\n\n > svg {\n display: unset;\n margin-bottom: 8px;\n }\n }\n\n .content.wider { max-width: 540px; }\n\n .assignToOrgSvg {\n width: 54vw;\n height: 36vh;\n max-width: 192px;\n max-height: 136px;\n }\n\n .title {\n font-size: 18px;\n line-height: 20px;\n color: #141E46;\n font-weight: 500;\n }\n\n .subtitle {\n font-size: 15px;\n line-height: 16px;\n color: #252F58;\n font-weight: 500;\n }\n\n p {\n font-size: 14px;\n line-height: 24px;\n color: #60658C;\n }\n\n p, .custom-content { font-weight: 300; margin: 12px 0; }\n\n .sec { color: #2c3345; margin: 1em 0 0; line-height: 1.5; }\n\n [data-value=\"sendNotificationEmail\"] { display: inline-flex; }\n\n .assigneeMsg {\n max-width: 426px;\n width: 100%;\n display: block;\n height: 90px;\n border-radius: 4px;\n border: solid 1px #d8dae9;\n margin: 1em auto 0;\n font-size: .875rem;\n padding: .375rem .5rem;\n transition: border-color .15s ease;\n\n ::placeholder { color: #8d8fa8; }\n :focus { outline: 0; border-color: #4c7af7; }\n }\n\n .dontshow {\n display: inline-flex;\n background-color: #ecf4ff;\n align-items: center;\n padding: 10px;\n margin-top: 38px;\n margin-bottom: 20px;\n \n &-input {\n opacity: 0;\n pointer-events: none;\n position: absolute;\n \n &:checked + .dontshow-checkbox:before {\n background-color: #54b45c;\n border-color: #54b45c;\n }\n \n &:checked + .dontshow-checkbox:after {\n opacity: 1;\n }\n \n &:focus {\n outline: 0;\n }\n }\n \n &-checkbox {\n width: 14px;\n height: 14px;\n background-color: #fff;\n border-radius: 2px;\n position: relative;\n \n &:before {\n content: \"\";\n position: absolute;\n width: 100%;\n height: 100%;\n border: 1px solid #CCD0DA;\n background-color: #fff;\n border-radius: 2px;\n top: 0;\n left: 0;\n transition: .3s;\n transform: translate(-1px, -1px);\n }\n \n &:after {\n content: \"\";\n display: block;\n width: 4px;\n height: 8px;\n border: solid #fff;\n border-width: 0 2px 2px 0;\n transform: rotate(45deg);\n position: absolute;\n top: 1px;\n left: 4px;\n opacity: 1;\n transition: .3s;\n z-index: 2;\n }\n }\n \n &-text {\n font-weight: 400;\n font-size: 16px;\n margin-left: 8px;\n line-height: 1;\n color: #52587e;\n }\n }\n\n @media screen and (max-width: 480px) {\n font-size: 0.875em;\n\n p { margin: 1em 0 .75em; }\n } \n`;\n","import React, { forwardRef, useState } from 'react';\nimport {\n func, arrayOf, shape, number, string, array\n} from 'prop-types';\nimport { Hooks } from '@jotforminc/uikit';\n\nimport { Button } from '@jotforminc/common-button';\nimport { StyledModal as Modal } from '@jotforminc/styled-modal';\nimport { OptionGroup } from '@jotforminc/option-group';\n\nimport { ScRF, ScRB } from '../../sc/scRevokeAccess';\nimport IconAssignToEveryone from '../../assets/svg/assign_to_organization.svg';\n\nimport { defaultRecordEvent } from '../../helpers/utils';\nimport { useTranslatedTexts } from '../../helpers/hooks';\n\nconst AssignToOrganizationModal = forwardRef((\n {\n formID,\n users,\n onAssign,\n onFormPropChange,\n onCancel,\n recordEvent,\n t,\n explanationText,\n emails,\n defaultMessage,\n modalBodyHeaderText\n }, ref\n) => {\n const {\n SEND_EMAIL_TO_ENTIRE_ORGANIZATION, SEND_EMAIL_TO_ENTIRE_ORGANIZATION_DESC,\n SEND_NOTIFICATION_EMAIL,\n ADD_YOUR_MESSAGE_HERE,\n YES_ASSIGN_TO_ALL, CANCEL\n } = useTranslatedTexts(t);\n\n const initialValues = {\n shouldSendNotificationEmail: false,\n message: '',\n isOperationDone: false,\n isOperationInProgress: false,\n isOperationAllowed: true\n };\n\n const [shouldSendNotificationEmail, setShouldSendNotification] = useState(initialValues.shouldSendNotificationEmail);\n const [message, setMessage] = useState(initialValues.message);\n const [isOperationDone, setIsOperationDone] = useState(initialValues.isOperationDone);\n const [isOperationInProgress, setIsOperationInProgress] = useState(initialValues.isOperationInProgress);\n const [isOperationAllowed, setIsOperationAllowed] = useState(initialValues.isOperationAllowed);\n\n const reset = () => {\n setIsOperationInProgress(initialValues.isOperationInProgress);\n setIsOperationAllowed(initialValues.isOperationAllowed);\n setIsOperationDone(initialValues.isOperationDone);\n setMessage(initialValues.message);\n setShouldSendNotification(initialValues.shouldSendNotificationEmail);\n };\n\n const onShouldSendNotificationEmailSelectionChange = values => {\n const isChecked = values.includes('sendNotificationEmail');\n setShouldSendNotification(isChecked);\n };\n\n const onMessageChange = e => {\n const { value = '' } = e.target;\n setMessage(value);\n };\n\n const handleClose = () => {\n reset();\n if (!isOperationDone) {\n return onCancel();\n }\n };\n\n const handleAssign = async () => {\n if (!isOperationAllowed) return;\n setIsOperationInProgress(true);\n setIsOperationAllowed(false);\n\n const userEmails = emails || users.map(u => u.email);\n const messageToSend = message || defaultMessage;\n const result = await onAssign({ emails: userEmails, message: messageToSend }, true, shouldSendNotificationEmail);\n if (!result) {\n setIsOperationInProgress(false);\n setIsOperationAllowed(true);\n // TODO Handle errors in UI too\n return;\n }\n setIsOperationInProgress(false);\n setIsOperationDone(true);\n onFormPropChange({ assignedToOrganization: 'Yes' });\n recordEvent('formAssignedToOrganization', formID);\n };\n\n Hooks.useEffectIgnoreFirst(() => { // TODO extract a common useDelayedEffect fn.\n if (isOperationDone) {\n setTimeout(() => {\n ref.current.hide();\n }, 300); // wait just a little to show operation done\n }\n }, [isOperationDone]);\n\n return (\n {text}
\n {desc}
\n \n
\n {modalBodyHeaderText || SEND_EMAIL_TO_ENTIRE_ORGANIZATION}
\n {explanationText || SEND_EMAIL_TO_ENTIRE_ORGANIZATION_DESC({ NUMBER_OF_EMAILS: users.length })}
\n{children}
;\n\n// eslint-disable-next-line max-statements, complexity\nconst InviteSection = forwardRef(({\n t,\n assignees,\n assigneeLimit,\n assigneeSubmissionPermission,\n useInviteSettingsPermission,\n onAvatarsClick,\n recordEvent,\n onInvitationSend,\n permissionOptions: _permissionOptions,\n assignPermissionOnInvite,\n formID,\n isEnterprise,\n selectEmailsFromList,\n emailSendModalOpenCount,\n defaultPermissionOption,\n renderedFrom,\n resources,\n isExpanded,\n setIsExpanded,\n useOnlyInvite,\n onCloseModal,\n defaultInvitations,\n hideInviteMessageSection,\n onEmailsChange,\n renderAssignPrefillModal,\n showAssignPrefill,\n isAvatarListEnabled,\n useNewStyledPermissionDropdown,\n customErrorMessage,\n forcePublicDataSharing,\n allowPlusInEmail,\n skipAssignToOrganizationModal,\n overridePublicDataSharing,\n assigneeLimitWithoutUpgrade,\n handleEmailErrorText,\n onPillListChange,\n excludeDataOnlyUsers\n}, ref) => {\n const csvButtonRef = useRef();\n const csvPopoverRef = useRef();\n const assignToOrganizationalModalRef = useRef();\n const permissionOptions = typeof _permissionOptions === 'function'\n ? _permissionOptions('invite-section')\n : _permissionOptions.filter(option => !option.hideFromOptions);\n\n // In most cases we want updates to permissions in Invite Settings to be reflected here, an exception to this is when\n // inviting members to a team, we want to use the defaultMemberRole\n let defaultRole = (useInviteSettingsPermission && assigneeSubmissionPermission) || defaultPermissionOption;\n\n if (!permissionOptions.find(option => option.value === defaultRole)) defaultRole = permissionOptions[0].value;\n\n const [emails, setEmails] = useState([]);\n const [message, setMessage] = useState('');\n const [role, setRole] = useState(defaultRole);\n const [isCSVUploading, setCSVUploading] = useState(false);\n const [hasText, setHasChange] = useState('');\n const [enterpriseUsers, setEnterpriseUsers] = useState([]);\n const [isInvitationSending, setInvitationSending] = useState(false);\n const [csvErrorMessage, setCSVErrorMessage] = useStateWithAutoReset('');\n const [csvImportedEmailCount, setCSSVImportedEmailCount] = useStateWithAutoReset(0);\n const [isInvitationSentIndicatorVisible, setInvitationSentIndicatorVisible] = useStateWithAutoReset(false);\n const [csvPmVisibility, setCsvPmVisibility] = Hooks.useClickOutsideState(false, [csvButtonRef, csvPopoverRef]);\n const [selectedResources, setSelectedResources] = useState([]);\n const [bottomRef, height] = useMeasure();\n const [isPrefillModalOpen, setPrefillModalOpen] = useState(false);\n const [prefillID, setPrefillID] = useState('');\n const {\n INVITE_PEOPLE, UPLOAD_CSV_FILE, DOWNLOAD_SAMPLE_CSV, ASSIGNED_TO, ADD_MULTIPLE_EMAIL_ADDRESSES,\n ADD_MORE, EMAIL_ADDRESSES_FOUND, EMAIL_ADDRESSES_ERRORED, EMAIL_ADDRESSES_ERRORED_ENTERPRISE, EMAIL_ADDRESSES_ERRORED_ENTERPRISE_SINGLE,\n EMAIL_ADDRESSES_ERRORED_SINGLE, ADD_YOUR_MESSAGE_HERE,\n CANCEL, EMAIL_SENT, SENDING, SEND_INVITATION, ASSIGNEE_LIMIT, PLEASE_UPGRADE_YOUR_ACCOUNT, ASSIGNEE_LIMIT_WITHOUT_ADD_MORE,\n CSV_UPLOAD_ERROR, CSV_FILE_ERROR, SEND_EMAIL_TO_ENTIRE_LIST, SEND_EMAIL_TO_ENTIRE_LIST_DESC, TO, SET_PREFILL, EDIT_PREFILL\n } = useTranslatedTexts(t);\n useImperativeHandle(ref, () => ({ emails, role }));\n\n const downloadAnchorTarget = isSafari() ? '_self' : '_blank';\n\n useEffect(() => {\n setRole(defaultRole);\n }, [permissionOptions.length, assigneeSubmissionPermission]);\n\n useEffect(() => {\n if (isEnterprise) {\n layer.get('users', null, {\n params: {\n ...(isEnterprise && selectEmailsFromList && {\n bypass: 1,\n sharePanel: 1,\n includePodo: 1,\n excludeDataOnlyUsers: excludeDataOnlyUsers ? '1' : '0'\n })\n }\n }).then(users => {\n setEnterpriseUsers(users);\n });\n }\n }, []);\n\n const handleValidateEmail = email => isValidAssignEmail(email, allowPlusInEmail);\n\n const isAssigneeExist = assignees.length > 0;\n const invitationInputPlaceholder = emails.length > 0 ? ADD_MORE : ADD_MULTIPLE_EMAIL_ADDRESSES;\n const numberOfErroredEmails = useMemo(() => emails.filter(({ isValid }) => !isValid).length, [emails]);\n const numberOfErroredAssignEmails = useMemo(() => emails.filter(({ text }) => !handleValidateEmail(text)).length, [emails]);\n const invitationButtonText = useSwitch(true, [\n [isInvitationSentIndicatorVisible, EMAIL_SENT],\n [isInvitationSending, SENDING],\n [true, SEND_INVITATION]\n ]);\n const isAssigneeLimitExceed = useMemo(() => (assignees.length + emails.length) > assigneeLimit, [assigneeLimit, emails, assignees]);\n\n const errorText = numberOfErroredEmails > 1 ? EMAIL_ADDRESSES_ERRORED_ENTERPRISE : EMAIL_ADDRESSES_ERRORED_ENTERPRISE_SINGLE;\n const EMAIL_ERROR_TEXT_ENTERPRISE = typeof handleEmailErrorText === 'function'\n ? handleEmailErrorText({ errorText, isMultiple: numberOfErroredEmails > 1 })\n : errorText;\n const EMAIL_ERROR_TEXT = numberOfErroredEmails > 1 ? EMAIL_ADDRESSES_ERRORED : EMAIL_ADDRESSES_ERRORED_SINGLE;\n const emailErrorText = (isEnterprise && numberOfErroredAssignEmails === 0) ? EMAIL_ERROR_TEXT_ENTERPRISE : EMAIL_ERROR_TEXT;\n\n const validateEnterprisePill = email => {\n const isPublicSharing = !overridePublicDataSharing && (forcePublicDataSharing || global.PUBLIC_DATA_SHARING_ENABLED);\n return handleValidateEmail(email) && (isPublicSharing || !!enterpriseUsers.find(enterpriseUser => enterpriseUser.email === email));\n };\n\n const isValidEmail = (isEnterprise && selectEmailsFromList) ? validateEnterprisePill : handleValidateEmail;\n\n const updateEmails = value => {\n const pillList = typeof onPillListChange === 'function' ? onPillListChange({ emails: value, enterpriseUsers, isValidEmail }) : value;\n setEmails(pillList);\n onEmailsChange(pillList);\n };\n\n useEffect(() => { // for passing defaultInvitations when initial state\n if (defaultInvitations.length > 0) {\n updateEmails(\n uniqBy(defaultInvitations\n .filter(email => isValidEmail(email))\n .map(email => ({\n id: email, text: email, isValid: true, showPillIcon: true\n })), 'text')\n );\n }\n }, []);\n\n const onCancelClick = () => {\n if (!useOnlyInvite) {\n setIsExpanded(false);\n updateEmails([]);\n setMessage('');\n setPrefillID('');\n } else {\n onCloseModal();\n }\n };\n const onMessageChange = ({ target: { value } }) => setMessage(value);\n const onFileUpload = ({ target: { files: [file] } }) => {\n setCsvPmVisibility(false);\n\n if (!file) {\n return;\n }\n\n setCSVUploading(true);\n PapaCSVParser.parse(file, {\n complete: ({ data }) => {\n const { name, type } = file;\n const fileExtension = name.split('.').pop();\n const isCSV = fileExtension === 'csv' || type.indexOf('csv') > -1;\n const emailsFromFile = data.reduce((prev, next) => [...prev, ...next], []);\n const cleanEmailsFromFile = emailsFromFile.filter(email => email.length > 0);\n const trimmedEmailsFromFile = cleanEmailsFromFile.map(email => email.trim());\n const assignedEmails = assignees.map(assignee => assignee.email);\n const newEmails = uniqBy([...emails, ...difference(trimmedEmailsFromFile, assignedEmails).map(email => ({\n id: email, text: email, isValid: isValidEmail(email), showPillIcon: true\n }))], 'text');\n if (!newEmails.length) {\n setCSVErrorMessage(CSV_UPLOAD_ERROR);\n } else if (!isCSV) {\n setCSVErrorMessage(CSV_FILE_ERROR);\n } else {\n setCSSVImportedEmailCount(newEmails.length);\n updateEmails(newEmails);\n }\n recordEvent('csvUpload', newEmails.length);\n setCSVUploading(false);\n setIsExpanded(true);\n }\n });\n };\n\n const isOverOrEqualXEmail = x => (\n emails.length >= x\n );\n\n const handleOverXEmailAssign = async (emailObj, status, shouldSendNotificationEmail) => {\n const result = await onInvitationSend(emailObj, false, shouldSendNotificationEmail, shouldSendNotificationEmail);\n if (result) updateEmails([]);\n setIsExpanded(false);\n setMessage('');\n return result;\n };\n\n const handleModalCancelAssign = () => {\n assignToOrganizationalModalRef.current.hide();\n };\n\n const onSendClick = async () => {\n if (isInvitationSending) {\n return;\n }\n\n setInvitationSending(true);\n const invitationMessage = isExpanded ? message : '';\n const rawEmailList = emails.map(e => e.text);\n\n const result = await onInvitationSend({\n emails: rawEmailList, message: invitationMessage, role, selectedResources, prefillID\n });\n setInvitationSending(false);\n\n if (!result) {\n return;\n }\n setInvitationSentIndicatorVisible(true);\n if (!useOnlyInvite) {\n setIsExpanded(false);\n updateEmails([]);\n setMessage('');\n setPrefillID('');\n } else {\n onCloseModal();\n }\n };\n\n const onOpenModalClick = () => {\n if (isEnterprise && !skipAssignToOrganizationModal && isOverOrEqualXEmail(emailSendModalOpenCount)) {\n assignToOrganizationalModalRef.current.show();\n return;\n }\n\n onSendClick();\n };\n\n const onPrefillModalClose = () => {\n setPrefillModalOpen(false);\n };\n\n const onEmailsFocus = () => {\n setIsExpanded(true);\n };\n\n const onEmailsTextChange = value => {\n setHasChange(!!value);\n };\n\n const randomId = useMemo(() => `invitePeople_${Math.random().toString(36).substring(2)}`, []);\n\n useEffect(() => {\n const wBox = document.querySelector('.wBox');\n if (!wBox) return;\n\n if (isAssigneeLimitExceed) {\n document.querySelector('.wBox').classList.add('wBox-isError');\n } else document.querySelector('.wBox').classList.remove('wBox-isError');\n }, [isAssigneeLimitExceed]);\n\n const renderPillboxInput = useCallback(() => (\n \n
\n {csvPmVisibility && (\n \n \n {INVITE_PEOPLE}\n \n setCsvPmVisibility(!csvPmVisibility)}\n aria-label={UPLOAD_CSV_FILE}\n />\n
\n {isAssigneeExist && isAvatarListEnabled && (\n \n
\n )}\n {ASSIGNED_TO}
\n {assignees.slice(0, 3).map(assignee => {`+${assignees.length - 3}`}
}\n \n
\n \n
\n \n {UPLOAD_CSV_FILE}\n
\n \n
\n \n {DOWNLOAD_SAMPLE_CSV}\n
\n \n \n \n {translationRenderer(emailErrorText)({\n renderer1: () => numberOfErroredEmails\n })}\n \n )}\n {csvErrorMessage && (\n \n {csvErrorMessage}\n \n )}\n
\n {!hideInviteMessageSection && (\n \n \n 0 ? '-no-pill' : ''}`}\n onChange={updateEmails}\n onType={onEmailsTextChange}\n pillValidation={isValidEmail}\n value={emails}\n PillContainerRenderer={PillContainerRenderer}\n fuseOptions={{\n threshold: 0.1\n }}\n popoverProps={{\n className: 'user-list-popover'\n }}\n inputProps={{\n id: randomId,\n className: 'section-ln-content-input',\n placeholder: invitationInputPlaceholder,\n onFocus: onEmailsFocus\n }}\n suggestionProps={{\n preventClickDefault: true,\n useKeyboardEvents: true\n }}\n showPillIcon\n />\n )}\n inactiveComponent={renderPillboxInput()}\n />\n ) : (renderPillboxInput())}\n setPrefillModalOpen(true)}\n className={`invite-prefill-btn ${prefillID ? 'isEdit' : ''}`}\n >\n {prefillID ?
\n {csvImportedEmailCount !== 0 && (\n \n {EMAIL_ADDRESSES_FOUND({ NUMBER_OF_EMAILS: csvImportedEmailCount })}\n
\n )}\n {numberOfErroredEmails > 0 && (\n \n
\n \n )}\n {isAssigneeLimitExceed && (\n \n \n
\n )}\n />\n \n 0 || isAssigneeLimitExceed || isInvitationSending}\n loader={isInvitationSending}\n loaderText={invitationButtonText}\n startIcon={isInvitationSentIndicatorVisible && IconCheckCircleFilled}\n >\n 0 || isAssigneeLimitExceed}\n loader={isInvitationSending}\n loaderText={invitationButtonText}\n startIcon={isInvitationSentIndicatorVisible && IconCheckCircleFilled}\n >\n {invitationButtonText}\n \n )}\n />\n \n
\n \n {invitationButtonText}\n {isInvitationSending &&
\n \n )}\n inactiveComponent={(\n }\n
\n
\n )}\n \n {/* */}\n \n );\n});\n\nInviteSection.propTypes = {\n formID: number,\n assignees: arrayOf(shape({ email: string.isRequired })),\n assigneeLimit: oneOfType([string, number]),\n assigneeSubmissionPermission: oneOf(PERMISSION_LIST),\n useInviteSettingsPermission: bool,\n t: func,\n onAvatarsClick: func,\n recordEvent: func,\n onInvitationSend: func,\n permissionOptions: oneOfType([\n func,\n arrayOf(\n shape({\n showWhenSelected: string,\n text: string,\n desc: oneOfType([string, node]),\n value: string\n })\n )\n ]),\n assignPermissionOnInvite: bool,\n isEnterprise: bool,\n selectEmailsFromList: bool,\n emailSendModalOpenCount: number,\n defaultPermissionOption: oneOf(PERMISSION_LIST),\n renderedFrom: string,\n resources: arrayOf(shape({})),\n setIsExpanded: func,\n isExpanded: bool,\n useOnlyInvite: bool,\n onCloseModal: func,\n defaultInvitations: arrayOf(string),\n hideInviteMessageSection: bool,\n onEmailsChange: func,\n renderAssignPrefillModal: func,\n showAssignPrefill: bool,\n isAvatarListEnabled: bool,\n useNewStyledPermissionDropdown: bool,\n customErrorMessage: string,\n forcePublicDataSharing: bool,\n allowPlusInEmail: bool,\n skipAssignToOrganizationModal: bool,\n overridePublicDataSharing: bool,\n assigneeLimitWithoutUpgrade: bool,\n renderAppPrefillSection: func,\n handleEmailErrorText: func,\n onPillListChange: func,\n excludeDataOnlyUsers: bool\n};\n\nInviteSection.defaultProps = {\n formID: 0,\n assignees: [],\n assigneeLimit: 100,\n assigneeSubmissionPermission: undefined,\n useInviteSettingsPermission: true,\n t: text => text,\n onAvatarsClick: f => f,\n recordEvent: f => f,\n onInvitationSend: f => f,\n permissionOptions: USER_PERMISSION_OPTIONS,\n assignPermissionOnInvite: false,\n isEnterprise: false,\n selectEmailsFromList: false,\n emailSendModalOpenCount: 50,\n defaultPermissionOption: undefined,\n renderedFrom: '',\n resources: [],\n setIsExpanded: f => f,\n isExpanded: false,\n useOnlyInvite: false,\n onCloseModal: f => f,\n defaultInvitations: [],\n hideInviteMessageSection: false,\n onEmailsChange: f => f,\n renderAssignPrefillModal: f => f,\n showAssignPrefill: false,\n isAvatarListEnabled: true,\n useNewStyledPermissionDropdown: false,\n customErrorMessage: '',\n forcePublicDataSharing: false,\n allowPlusInEmail: false,\n skipAssignToOrganizationModal: false,\n overridePublicDataSharing: false,\n assigneeLimitWithoutUpgrade: false,\n renderAppPrefillSection: f => f,\n handleEmailErrorText: null,\n onPillListChange: null,\n excludeDataOnlyUsers: false\n};\n\nexport default InviteSection;\n","import Styled from 'styled-components';\n\nconst COLORS = [\n { backgroundColor: '#EDF8FF', color: '#0066C3' },\n { backgroundColor: '#EDFED1', color: '#529300' },\n { backgroundColor: '#FFF5D2', color: '#F49200' },\n { backgroundColor: '#FFE4CC', color: '#E55300' },\n { backgroundColor: '#F3E2FF', color: '#6915A4' },\n { backgroundColor: '#DADEF3', color: '#343C6A' }\n];\n\nexport const ScUserList = Styled.div`\n display: flex;\n position: relative;\n flex-direction: column;\n padding: 8px 0;\n flex-flow: row wrap;\n width: 100%;\n\n .ReactVirtualized__Grid {\n overflow: hidden auto !important;\n }\n\n .user-wrapper {\n display: flex;\n flex-direction: row;\n gap: 12px;\n flex-grow: 1;\n width: 100%;\n padding: 10px 12px;\n align-items: center;\n height: 52px !important;\n\n &:hover {\n cursor: pointer;\n background-color: #F3F3FE;\n }\n\n .user-information {\n display: flex;\n flex-direction: column;\n font-weight: 400;\n font-size: 14px;\n line-height: 16px;\n\n .user-name {\n color: #0A1551;\n }\n\n .user-email {\n color: #6C73A8;\n }\n }\n } \n`;\n\nexport const ScAvatar = Styled.div`\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: 32px;\n height: 32px;\n background: ${props => (COLORS[Number(props.index) % 6].backgroundColor)};\n color: ${props => (COLORS[Number(props.index) % 6].color)};\n border-radius: 16px;\n\n font-weight: 400;\n font-size: 14px;\n line-height: 24px;\n`;\n","import React from 'react';\n\nimport { Checkbox } from '@jotforminc/magnet';\n\nimport { ScAvatar } from '../sc/scUserList';\n\nconst ITEM_LIMIT = 100;\n\nconst ItemRenderer = ({\n list, onClick, preventClickDefault, unselectEmail, selectedAppUsers, setSelectedAppUsers, setWarningMessage\n}) => {\n // eslint-disable-next-line react/prop-types\n return ({ index, key, style }) => {\n const user = list[index];\n\n if (!user) {\n return null;\n }\n\n const isChecked = selectedAppUsers.find(userObject => userObject.id === user.id);\n\n let avatar = user.email[0].toUpperCase();\n if (user.name) {\n const nameArray = user.name.split(' ');\n if (nameArray.length > 1) {\n const firstName = user.name.split(' ').slice(0, -1).join(' ');\n const lastName = user.name.split(' ').slice(-1).join(' ');\n avatar = firstName.charAt(0).toUpperCase() + lastName.charAt(0).toUpperCase();\n } else {\n avatar = user.name.charAt(0).toUpperCase();\n }\n }\n\n const handleClick = e => {\n // to prevent looping behavior with input onBlur\n if (preventClickDefault) {\n e.preventDefault();\n }\n\n if (setWarningMessage && selectedAppUsers && selectedAppUsers.length === ITEM_LIMIT) {\n if (!isChecked) {\n setWarningMessage(`You can select up to ${ITEM_LIMIT} people.`);\n return;\n }\n if (isChecked) {\n setWarningMessage('');\n }\n }\n\n if (!isChecked) {\n setSelectedAppUsers([...selectedAppUsers, user]);\n return onClick(user);\n }\n\n unselectEmail(user);\n };\n\n return (\n \n {customErrorMessage || (\n <>\n {!assigneeLimitWithoutUpgrade ? (\n ASSIGNEE_LIMIT({\n PLEASE_UPGRADE_YOUR_ACCOUNT:\n \n {PLEASE_UPGRADE_YOUR_ACCOUNT}\n ,\n ASSIGNEE_LIMIT: assigneeLimit\n })\n )\n : ASSIGNEE_LIMIT_WITHOUT_ADD_MORE({\n ASSIGNEE_LIMIT: assigneeLimit\n })}\n \n )}\n
\n \n
\n \n );\n };\n};\n\nexport default ItemRenderer;\n","import React from 'react';\nimport {\n arrayOf,\n element,\n oneOfType,\n bool,\n string,\n func\n} from 'prop-types';\n\nimport { IconExclamationTriangle, IconXmark } from '@jotforminc/svg-icons';\n\nconst WarningMessage = ({\n children,\n show,\n message,\n onCloseClick\n}) => {\n return show ? (\n {user.name}
\n {user.email}
\n \n
\n ) : null;\n};\n\nWarningMessage.propTypes = {\n children: oneOfType([element, arrayOf(element)]),\n message: string,\n show: bool,\n onCloseClick: func\n};\n\nWarningMessage.defaultProps = {\n children: null,\n message: null,\n show: false,\n onCloseClick: () => {}\n};\n\nexport default WarningMessage;\n","import React, { useState } from 'react';\nimport {\n func, shape, string, element, bool\n} from 'prop-types';\nimport { AutoSizer, InfiniteLoader, List } from 'react-virtualized';\nimport isString from 'lodash/isString';\n\nimport EmailInput from '@jotforminc/email-input';\nimport { useDebounce } from '@jotforminc/hooks';\nimport { Hooks } from '@jotforminc/uikit';\nimport { t } from '@jotforminc/translation';\n\nimport ItemRenderer from '../../components/UserListItemRenderer';\nimport { ScUserList } from '../../sc/scUserList';\nimport WarningMessage from '../../components/WarningMessage';\n\nlet loading = false;\n\nconst UserList = ({\n list, selectedEmails, onClick, preventClickDefault, unselectEmail, hasMore, fetchListOfUsers, selectedAppUsers, setSelectedAppUsers, offset\n}) => {\n const [warningMessage, setWarningMessage] = useState('');\n\n const validatedList = list.filter(user => user.email);\n\n const isRowLoaded = index => !loading && index < validatedList.length && !!validatedList[index];\n const handleLoadMoreRows = async ({ stopIndex }) => {\n if (hasMore && !loading && stopIndex + 200 > validatedList.length) {\n loading = true;\n return fetchListOfUsers(null, offset).then(() => {\n loading = false;\n });\n }\n return null;\n };\n\n const handleClick = e => {\n e.preventDefault();\n };\n\n return (\n {message || children}
\n \n
\n {isAppPrefillChecked ? (\n \n \n {text}\n
\n));\n\nDropdownButton.defaultProps = {\n isOptionsVisible: false\n};\n\nDropdownButton.propTypes = {\n option: shape({\n text: string,\n value: string\n }).isRequired,\n isOptionsVisible: bool\n};\n\nexport default DropdownButton;\n","import layer from './layer';\n\nexport default class FetchAppUsersWithCache {\n cache = {};\n\n requestList = {};\n\n constructor(url) {\n this.url = url;\n }\n\n cacheResponse(key, value) {\n this.cache[key] = value;\n }\n\n getFromCache(key) {\n return this.cache[key];\n }\n\n request(params) {\n Object.values(this.requestList).forEach(f => {\n // eslint-disable-next-line no-param-reassign\n f.response = f.reject;\n });\n\n const requestId = Math.random();\n const key = params.offset || params.query ? `${params.object}-${params.offset || params.query}` : `${params.object}-initialState`;\n const responseFromCache = this.getFromCache(key);\n\n return (new Promise((resolve, reject) => {\n this.requestList[requestId] = { resolve, reject, response: resolve };\n if (responseFromCache) {\n this.requestList[requestId].response(responseFromCache);\n return;\n }\n\n let modifiedUrl = this.url;\n if (typeof modifiedUrl === 'string' && modifiedUrl.startsWith('/')) {\n modifiedUrl = this.url.slice(1);\n }\n\n layer.get(modifiedUrl, null, { params }).then(res => {\n this.cacheResponse(key, res);\n this.requestList[requestId].response(res);\n });\n })).finally(() => {\n delete this.requestList[requestId];\n });\n }\n}\n","import React, {\n useState, useRef, useCallback, useMemo, useEffect, forwardRef, useImperativeHandle\n} from 'react';\nimport {\n func, arrayOf, shape, string, number, oneOfType, node, bool, oneOf\n} from 'prop-types';\nimport { Pillbox } from '@jotforminc/uikit';\nimport {\n IconCheckCircleFilled\n} from '@jotforminc/svg-icons';\n\nimport classNames from 'classnames';\nimport { Button, Textarea } from '@jotforminc/magnet';\nimport EditablePill from '@jotforminc/editable-pill';\nimport { useSwitch, useStateWithAutoReset } from '@jotforminc/hooks';\nimport { translationRenderer } from '@jotforminc/translation';\nimport InviteByAppUserList from './InviteByAppUserList';\nimport InviteByAppPrefillSection from './InviteByAppPrefill';\nimport { AvatarHolder } from '../../components/AvatarHolder';\nimport Dropdown from '../../components/Dropdown';\nimport DropdownButton from '../../components/DropdownButton';\n\nimport { isValidAssignEmail } from '../../helpers/utils';\nimport FetchAppUsersWithCache from '../../helpers/FetchAppUsersWithCache';\nimport { useTranslatedTexts } from '../../helpers/hooks';\nimport DropdownWithDetails from '../../components/DropdownWithDetails';\nimport { PERMISSION_LIST, USER_PERMISSION_OPTIONS } from '../../helpers/constants';\n\nlet isPrefillSet = null;\nconst onPrefillStateChange = mapper => {\n isPrefillSet = mapper.length > 0;\n};\n\n// eslint-disable-next-line react/prop-types\nconst PillContainerRenderer = ({ children }) => {children}
;\n\n/* eslint-disable max-statements */\nconst InviteByAppSection = forwardRef(({\n t,\n appName,\n appIcon: AppIcon,\n defaultObjectOption,\n objectOptionsList,\n fetchUrl,\n defaultParams,\n normalizeMethod,\n appInvitationUrl,\n prefillComponentProvider,\n assignees,\n assigneeLimit,\n assigneeSubmissionPermission,\n useInviteSettingsPermission,\n onAvatarsClick,\n recordEvent,\n onInvitationSend,\n permissionOptions: _permissionOptions,\n defaultPermissionOption,\n renderedFrom,\n isExpanded,\n setIsExpanded,\n hideInviteMessageSection,\n onEmailsChange,\n isAvatarListEnabled,\n useNewStyledPermissionDropdown,\n allowPlusInEmail,\n renderAppPrefillSection\n}, ref) => {\n const pillContainerRef = useRef(null);\n const emailListRef = useRef([]);\n const permissionOptions = typeof _permissionOptions === 'function'\n ? _permissionOptions('invite-section')\n : _permissionOptions.filter(option => !option.hideFromOptions);\n\n // In most cases we want updates to permissions in Invite Settings to be reflected here, an exception to this is when\n // inviting members to a team, we want to use the defaultMemberRole\n let defaultRole = (useInviteSettingsPermission && assigneeSubmissionPermission) || defaultPermissionOption;\n\n if (!permissionOptions.find(option => option.value === defaultRole)) defaultRole = permissionOptions[0].value;\n\n const [selectedAppObject, setSelectedAppObject] = useState(defaultObjectOption);\n const [appUsers, setAppUsers] = useState({});\n const [selectedAppUsers, setSelectedAppUsers] = useState([]);\n const [emails, setEmails] = useState([]);\n const [role, setRole] = useState(defaultRole);\n const [isAppPrefillChecked, setIsAppPrefillChecked] = useState(true);\n const [message, setMessage] = useState('');\n const [hasText, setHasChange] = useState('');\n const [isInvitationSending, setInvitationSending] = useState(false);\n const [isInputFocused, setIsInputFocused] = useState(false);\n const [isInvitationSentIndicatorVisible, setInvitationSentIndicatorVisible] = useStateWithAutoReset(false);\n\n const fetchAppUsersWithCache = useMemo(() => new FetchAppUsersWithCache(fetchUrl), [fetchUrl]);\n\n const getFetchUserList = (query, offset) => {\n const params = {\n ...defaultParams,\n object: selectedAppObject,\n ...(!query && offset ? { offset } : { ...(query ? { query } : {}) })\n };\n\n return fetchAppUsersWithCache.request(params).then(response => {\n setAppUsers({\n userList: [...((appUsers.userList && params.offset) ? appUsers.userList : []), ...(normalizeMethod(response.rows))],\n offset: response.offset,\n hasMore: response.hasMore\n });\n }).catch(() => {});\n };\n\n useEffect(() => {\n getFetchUserList();\n }, [selectedAppObject]);\n\n useImperativeHandle(ref, () => ({ emails, role }));\n\n useEffect(() => {\n setRole(defaultRole);\n }, [permissionOptions.length, assigneeSubmissionPermission]);\n\n const handleValidateEmail = email => isValidAssignEmail(email, allowPlusInEmail);\n\n const isAssigneeExist = assignees.length > 0;\n const {\n ASSIGNED_TO, ADD_MULTIPLE_EMAIL_OR_NAME, ADD_MORE, EMAIL_ADDRESSES_ERRORED,\n EMAIL_ADDRESSES_ERRORED_SINGLE, ADD_YOUR_MESSAGE_HERE, CANCEL, EMAIL_SENT, SENDING, SEND_INVITATION\n } = useTranslatedTexts(t);\n const invitationInputPlaceholder = emails.length > 0 ? ADD_MORE : ADD_MULTIPLE_EMAIL_OR_NAME;\n const numberOfErroredEmails = useMemo(() => emails.filter(({ isValid }) => !isValid).length, [emails]);\n const invitationButtonText = useSwitch(true, [\n [isInvitationSentIndicatorVisible, EMAIL_SENT],\n [isInvitationSending, SENDING],\n [true, SEND_INVITATION]\n ]);\n const isAssigneeLimitExceed = useMemo(() => (assignees.length + emails.length) > assigneeLimit, [assigneeLimit, emails, assignees]);\n const EMAIL_ERROR_TEXT = numberOfErroredEmails > 1 ? EMAIL_ADDRESSES_ERRORED : EMAIL_ADDRESSES_ERRORED_SINGLE;\n\n const getValidatedEmailList = emailList => {\n const item = emailList[emailList.length - 1];\n if (item && item.id !== 'default' && item.isValid && !selectedAppUsers.find(selectedUser => selectedUser.id === item.id)) {\n const user = (appUsers.userList?.filter(appUser => (appUser.email === item.text && !selectedAppUsers.find(selectedUser => selectedUser.id === appUser.id))))[0];\n if (user && user.id !== item.id) {\n setSelectedAppUsers([...selectedAppUsers, user]);\n return [...(emailList.filter(emailItem => emailItem.id !== item.id)), { ...item, id: user.id }];\n }\n\n if (!user) {\n return emails;\n }\n }\n\n return emailList;\n };\n\n const updateEmails = value => {\n setEmails(value);\n onEmailsChange(value);\n };\n\n const resetState = () => {\n setMessage('');\n setSelectedAppUsers([]);\n emailListRef.current = [];\n updateEmails([]);\n };\n\n const onCancelClick = () => {\n setIsExpanded(false);\n recordEvent(`${appName}Assign-cancelled.`, 'cancelButton');\n resetState();\n };\n\n const onMessageChange = ({ target: { value } }) => setMessage(value);\n\n const onSendClick = async () => {\n if (isInvitationSending) {\n return;\n }\n setInvitationSending(true);\n const invitationMessage = isExpanded ? message : '';\n\n const emailList = isInputFocused ? emails : emailListRef.current;\n\n const rawEmailList = emailList.map(e => e.text);\n\n const assigneeList = emailList.map(value => {\n const { name, email, id } = selectedAppUsers.find(userObject => userObject.id === value.id);\n return ({\n id: id,\n metadata: {\n name: name,\n email: email\n },\n settings: {\n fieldBehaviour: 'edit'\n }\n });\n });\n\n const result = await onInvitationSend({\n emails: rawEmailList,\n message: invitationMessage,\n role,\n appInvitationParams: {\n isAppAssignInvitation: true,\n assignees: assigneeList,\n isAppAssignPrefillChecked: (isPrefillSet && isAppPrefillChecked) ? '1' : '0',\n appObject: selectedAppObject || '',\n appInvitationUrl: appInvitationUrl\n }\n });\n\n setInvitationSending(false);\n\n if (!result) {\n return;\n }\n setInvitationSentIndicatorVisible(true);\n setIsExpanded(false);\n recordEvent(\n `${appName}Assign-${assigneeList.length}${selectedAppObject}s-${isPrefillSet && isAppPrefillChecked ? 'withPrefill' : 'withoutPrefill'}`,\n 'sendInvitation'\n );\n resetState();\n };\n\n const expandSection = () => {\n setIsInputFocused(true);\n setIsExpanded(true);\n };\n\n const onEmailsTextChange = value => {\n setHasChange(!!value);\n };\n\n const randomId = `invitePeople_${Math.random().toString(36).substring(2)}`;\n\n useEffect(() => {\n const wBox = document.querySelector('.wBox');\n if (!wBox) return;\n\n if (isAssigneeLimitExceed) {\n document.querySelector('.wBox').classList.add('wBox-isError');\n } else {\n document.querySelector('.wBox').classList.remove('wBox-isError');\n }\n }, [isAssigneeLimitExceed]);\n\n const renderPillboxInput = () => (\n \n
\n ), []);\n\n const handleOnOptionsChange = ({ value }) => {\n recordEvent('permissionChangedViaDropdown', value);\n setRole(value);\n };\n\n const handlePrefillCheck = value => {\n setIsAppPrefillChecked(value);\n recordEvent(`${appName}Assign-${value ? 'prefillActivated' : 'prefillDeactivated'}`, 'prefillCheckbox');\n };\n\n const handleDropdownSelect = ({ value }) => {\n const isChanged = selectedAppObject !== value;\n if (isChanged) {\n setSelectedAppObject(value);\n resetState();\n }\n };\n\n const dropdownOptions = objectOptionsList.map(option => ({ value: option, text: `${option}s` }));\n\n const handleScrollPosition = () => {\n const pillList = document.querySelectorAll('.pill');\n const pill = pillList[pillList.length - 1];\n if (pill && pillContainerRef.current && pill.positionedOffset) {\n const { top } = pill.positionedOffset();\n pillContainerRef.current.scroll(0, top);\n }\n };\n\n const handleInputFocus = () => {\n if (!isExpanded) {\n expandSection();\n }\n updateEmails(emailListRef.current);\n setIsInputFocused(true);\n };\n\n const handleInputBlur = () => {\n emailListRef.current = emails;\n if (emails.length > 1) {\n const emailLength = emails.length - 1;\n updateEmails([emails[emailLength], {\n id: 'default', text: `+${emailLength}`, isValid: true, showPillIcon: false\n }]);\n }\n setIsInputFocused(false);\n };\n\n return (\n \n {children}\n
\n \n
\n \n \n {`ASSIGN TO ${appName.toUpperCase()} CONTACTS`}\n \n
\n {isAssigneeExist && isAvatarListEnabled && (\n \n
\n )}\n {ASSIGNED_TO}
\n {assignees.slice(0, 3).map(assignee => {`+${assignees.length - 3}`}
}\n \n
\n {(!hideInviteMessageSection && isExpanded) && (\n \n {dropdownOptions.length > 0 && (\n \n
\n {numberOfErroredEmails > 0 && (\n \n {translationRenderer(EMAIL_ERROR_TEXT)({\n renderer1: () => numberOfErroredEmails\n })}\n
\n )}\n \n
\n )}\n \n );\n});\n\nInviteByAppSection.propTypes = {\n appName: string,\n appIcon: node,\n defaultObjectOption: string,\n objectOptionsList: arrayOf(string),\n fetchUrl: string,\n defaultParams: shape({}),\n normalizeMethod: func,\n appInvitationUrl: func,\n prefillComponentProvider: string,\n assignees: arrayOf(shape({ email: string.isRequired })),\n assigneeLimit: oneOfType([string, number]),\n assigneeSubmissionPermission: oneOf(PERMISSION_LIST),\n useInviteSettingsPermission: bool,\n t: func,\n onAvatarsClick: func,\n recordEvent: func,\n onInvitationSend: func,\n permissionOptions: oneOfType([\n func,\n arrayOf(\n shape({\n showWhenSelected: string,\n text: string,\n desc: oneOfType([string, node]),\n value: string\n })\n )\n ]),\n defaultPermissionOption: oneOf(PERMISSION_LIST),\n renderedFrom: string,\n setIsExpanded: func,\n isExpanded: bool,\n hideInviteMessageSection: bool,\n onEmailsChange: func,\n renderAssignPrefillModal: func,\n isAvatarListEnabled: bool,\n useNewStyledPermissionDropdown: bool,\n allowPlusInEmail: bool,\n renderAppPrefillSection: func\n};\n\nInviteByAppSection.defaultProps = {\n appName: '',\n defaultObjectOption: null,\n objectOptionsList: [],\n fetchUrl: '',\n defaultParams: {},\n appIcon: null,\n normalizeMethod: f => f,\n appInvitationUrl: f => f,\n prefillComponentProvider: '',\n assignees: [],\n assigneeLimit: 100,\n assigneeSubmissionPermission: undefined,\n useInviteSettingsPermission: true,\n t: text => text,\n onAvatarsClick: f => f,\n recordEvent: f => f,\n onInvitationSend: f => f,\n permissionOptions: USER_PERMISSION_OPTIONS,\n defaultPermissionOption: undefined,\n renderedFrom: '',\n setIsExpanded: f => f,\n isExpanded: false,\n hideInviteMessageSection: false,\n onEmailsChange: f => f,\n renderAssignPrefillModal: f => f,\n isAvatarListEnabled: true,\n useNewStyledPermissionDropdown: false,\n allowPlusInEmail: false,\n renderAppPrefillSection: f => f\n};\n\nexport default InviteByAppSection;\n","import React, { forwardRef } from 'react';\nimport {\n string, func, arrayOf, shape, bool\n} from 'prop-types';\n\nimport { Button } from '@jotforminc/magnet';\nimport { StyledModal as Modal } from '@jotforminc/styled-modal';\n\nimport { IconExclamationTriangleFilled } from '@jotforminc/svg-icons';\nimport { ScRF, ScRB } from '../../sc/scRevokeAccess';\n\nimport { defaultRecordEvent } from '../../helpers/utils';\nimport { useTranslatedTexts } from '../../helpers/hooks';\n\nconst multiRevokeUserList = assignees => {\n const asses = [];\n let message = '';\n if (assignees.length > 5) {\n assignees.slice(0, 2).map(ass => asses.push(ass.name || ass.email));\n message = `${asses.join(', ')} and ${assignees.length - 2} more`;\n } else {\n assignees.map(ass => asses.push(ass.name || ass.email));\n message = asses.join(', ');\n }\n return message;\n};\n\nconst RevokeAccessModal = forwardRef((\n {\n t,\n assignees,\n onRevokeUser,\n onRevokeAllUsers,\n onRevokeMultipleUser,\n recordEvent,\n from,\n titleFormatter,\n isAllSelected\n }, ref\n) => {\n // Event handlers\n const onBackClick = () => ref.current.hide();\n const onRemoveClick = async () => {\n if (assignees.length === 1) {\n // one email selected\n const result = await onRevokeUser({ email: assignees[0].email });\n if (!result) {\n return;\n }\n } else if (isAllSelected && typeof onRevokeAllUsers === 'function') {\n // all email selected\n const result = await onRevokeAllUsers(assignees.map(a => a.email));\n if (!result) {\n return;\n }\n } else {\n // multiple emails selected but not all\n const result = await onRevokeMultipleUser(assignees.map(a => a.email));\n if (!result) {\n return;\n }\n }\n recordEvent('assigneeRevokeClicked', from);\n assignees.forEach(p => recordEvent('assigneeRevoked', p.email));\n if (ref.current && ref.current.hide) {\n ref.current.hide();\n }\n };\n\n const {\n REMOVE_USER_CONFIRM, REMOVE_USER_DESCRIPTION, YES_DELETE, NO_KEEP,\n REVOKE_SELECTED_USERS, REVOKE_ALL, REVOKE_USER, REMOVE_USER_DESCRIPTION_MULTIPLE\n } = useTranslatedTexts(t);\n\n return (\n \n
\n \n 0 || isAssigneeLimitExceed}\n loader={isInvitationSending}\n loaderText={invitationButtonText}\n startIcon={isInvitationSentIndicatorVisible && IconCheckCircleFilled}\n >\n {invitationButtonText}\n \n \n
\n \n
\n {titleFormatter(assignees, isAllSelected, { REVOKE_SELECTED_USERS, REVOKE_ALL, REVOKE_USER })}
\n {assignees.length > 1 && {multiRevokeUserList(assignees)}
}\n {(assignees.length > 1 && REMOVE_USER_DESCRIPTION_MULTIPLE) ? REMOVE_USER_DESCRIPTION_MULTIPLE : REMOVE_USER_DESCRIPTION}
\n\n{assignees.length > 1 ? REMOVE_USER_CONFIRM.replace('?', 's?') : REMOVE_USER_CONFIRM}
\n {text}
}\n OptionContainerRenderer={pr => }\n GroupRenderer={({ text, children, ...p }) => (\n {text}
\n - {children}
\n
\n );\n }\n\n renderSendTime() {\n const { sendTime, timeZone } = this.state;\n const {\n timeZoneProps: {\n extendOnGroupSearch = false,\n filterable = false,\n NoResultsRenderer = null,\n textInputPlaceholder = ''\n }\n } = this.props;\n\n return (\n \n {\n this.setState({ interval: option, activeEnd: false, endDate: 'noEndDate' });\n changeInterval(option);\n }}\n />\n
\n {t('Repeats')}
\n \n
\n );\n }\n\n renderSendDate() {\n const { sendDate, interval, selectedDay } = this.state;\n return (\n \n
\n {t('Send Time')}
\n \n this.setState({ sendTime: option.value })}\n />\n
\n \n
\n {t('Time Zone')}
\n \n this.setState({ timeZone: option.value })}\n extendOnGroupSearch={extendOnGroupSearch}\n filterable={filterable}\n textInputPlaceholder={textInputPlaceholder}\n NoResultsRenderer={NoResultsRenderer}\n />\n
\n \n
\n );\n }\n\n renderStartDate() {\n const { startDate, endDate, activeEnd } = this.state;\n const startDateMoment = moment(startDate, ['LL', 'ddd MMM DD YYYY'], 'en'); // ['February 28, 2020' , 'Tue Feb 25 2020']\n const definedEndDate = endDate || moment(this.scheduleDuration).format('LL');\n const endDateMoment = activeEnd ? moment(definedEndDate, ['LL', 'ddd MMM DD YYYY']) : null;\n\n const picker = (\n \n
\n {sendDate[interval] === 'selectedDay' && (\n {t('Send Date')}
\n \n this.setState(\n { sendDate: { ...sendDate, ...{ [interval]: option.value } } }\n )}\n />\n
\n \n
\n )}\n {t('Select a Day')}
\n \n this.setState({ selectedDay: option.value })}\n />\n
\n \n
\n );\n }\n\n renderMessage() {\n const { message } = this.props;\n const { type, text } = message;\n if (!type || !text) {\n return;\n }\n let style = {};\n\n if (type === 'error') {\n style = {\n color: '#f90321',\n fontSize: '14px'\n };\n }\n\n return \n {\n this.handleDatePickerChange(date, 'startDate');\n }}\n />\n
\n {t('Start Date')}
\n \n {\n if (newVal === 'activeEnd') {\n if (endDate === '' || endDate === 'noEndDate') {\n if (this.endDatePickerRef.current && global.document.activeElement === this.endDatePickerRef.current.input) {\n return;\n }\n\n this.setState({ endDate: moment(this.scheduleDuration).format('LL') });\n }\n this.setState({ activeEnd: true });\n } else { // noEndDate\n this.setState({ activeEnd: false, endDate: '' });\n }\n }}\n />\n
\n {t('End Date')}
\n {text}
;\n }\n\n render() {\n const { hideStartDate } = this.props;\n return (\n \n { this.renderIntervalRadio() }\n { this.renderSendDate() }\n
\n \n { this.renderSendTime() }\n
\n {\n !hideStartDate && (\n \n { this.renderStartDate() }\n
\n )\n }\n { this.renderMessage() }\n \n
\n {`Delete scheduled reminder emails to ${name || email}`}
\n Are you sure you want to delete the email forever?
\n\n Schedule Reminder Emails to\n {` ${name || email}`}\n
\n )}\n footer={!isListMode || isEditMode\n ? (\n \n
\n )\n : null\n }\n\n {(!isListMode || isEditMode)\n ? (\n \n
\n \n Send once a\n {' '}\n {periodMap[currentEmailProps.interval]}\n
\n \n Next email:\n {' '}\n {remainingToNext}\n
\n \n {!isEditMode\n ? (\n setEditMode(true)}\n >\n {t('Edit')}\n \n )\n : null}\n <>\n {\n removeScheduledReminderModalRef.current.show();\n }}\n >\n {t('Delete')}\n \n
\n \n
\n {t('Action Required')}
\n {requestedUserEmail}
\n\n{t('User requested access to the following Jotform Inbox.')}
\n \n
\n \n );\n};\nAssigneeModalControlBar.propTypes = {\n name: string,\n isAllSelected: bool,\n onRevokeSelected: func,\n searchTerm: string,\n selectedCount: number,\n onSearch: func,\n handleSelectAllChange: func,\n clearSelection: func\n};\n\nAssigneeModalControlBar.defaultProps = {\n name: null,\n isAllSelected: false,\n onRevokeSelected: f => f,\n searchTerm: '',\n selectedCount: 0,\n onSearch: f => f,\n handleSelectAllChange: f => f,\n clearSelection: f => f\n};\n\nexport default AssigneeModalControlBar;\n","import { arrayOf, func, shape } from 'prop-types';\nimport React, {\n forwardRef, useMemo, useRef, useState\n} from 'react';\nimport { t } from '@jotforminc/translation';\nimport { StyledModal as Modal } from '@jotforminc/styled-modal';\nimport { useFuse } from '@jotforminc/hooks';\n\nimport { Checkbox } from '@jotforminc/magnet';\nimport DropdownWithDetails from '../../components/DropdownWithDetails';\nimport AssigneeModalControlBar from '../../components/AssigneeModalControlBar';\nimport { ScAssignee } from '../../sc/scAssigneeList';\nimport { Picker } from '../../components/ResourcePicker';\nimport RevokeAccessModal from './RevokeAccess';\nimport { AvatarHolder } from '../../components/AvatarHolder';\n\nconst AssigneeResources = forwardRef((props, ref) => {\n const {\n resources, assignee, onAssigneePermissionChange, onRevokeUser, onRevokeMultipleUser, permissionOptions\n } = props;\n\n const revokeModalRef = useRef();\n const [isLoading, setLoading] = useState(false);\n\n const { avatarUrl, name, email } = assignee;\n const title = name || email;\n\n const [search, setSearch] = useState();\n\n const selectedResources = useMemo(() => {\n return assignee.selectedResources.map(selRes => {\n const resource = resources.find(r => r.id === selRes.resource_id);\n return resource ? { ...selRes, text: resource.title, resource } : null;\n }).filter(res => res);\n }, [assignee.selectedResources, resources]);\n\n const options = useFuse(selectedResources, search, ['text']);\n\n const [selectedOptions, setSelectedOptions] = useState([]);\n\n const clearSelection = () => setSelectedOptions([]);\n\n const handleSelection = (id, isSelected) => {\n if (isSelected) {\n return setSelectedOptions([...selectedOptions, id]);\n }\n\n setSelectedOptions(selectedOptions.filter(f => f !== id));\n };\n\n const isAllSelected = selectedOptions.length === selectedResources.length;\n\n const handleSelectAll = e => {\n const { checked } = e.target;\n setSelectedOptions(checked ? selectedResources.map(o => o.id) : []);\n };\n\n const handleOptionSelect = async (value, selectedResource) => {\n setLoading(true);\n try {\n await onAssigneePermissionChange(value, selectedResource);\n } catch (err) {\n console.log(err);\n } finally {\n setLoading(false);\n }\n };\n\n const ddLoader = () => {\n return (\n \n \n \n {t('Revoke')}\n \n \n )}\n \n )}\n />\n
\n\n 0 && !isAllSelected) ? ' isPartial' : ''}${isAllSelected ? ' isAll' : ''}`}>\n 0 && !isAllSelected}\n onChange={handleSelectAllChange}\n disabled={!!searchTerm}\n className=\"mr-2\"\n />\n
\n {name ? {name}
: null}\n {selectedCount > 0 && (\n <>\n \n \n {t('{count} selected').replace('{count}', selectedCount)}\n \n
\n \n {t('Please wait...')}\n
\n );\n };\n\n return (\n \n ({\n email: id,\n id,\n name: (selectedResources.find(f => f.id === id) || {}).name\n }))}\n ref={revokeModalRef}\n onRevokeUser={id => {\n onRevokeUser(id);\n clearSelection();\n revokeModalRef.current.hide();\n }}\n onRevokeMultipleUser={ids => {\n onRevokeMultipleUser(ids, true);\n clearSelection();\n revokeModalRef.current.hide();\n }}\n // onRevokeAllUsers={onRevokeAllUsers}\n // recordEvent={recordEvent}\n // t={t}\n from=\"multiple\"\n />\n\n revokeModalRef.current.show()}\n searchTerm={search}\n selectedCount={selectedOptions.length}\n />\n
\n \n {options.map(selectedResource => {\n const isSelected = selectedOptions.indexOf(selectedResource.id) > -1;\n\n const { resource } = selectedResource;\n\n return (\n
\n \n \n
\n );\n })}\n \n
\n \n
\n \n {resource.title} \n
\n \n
\n \n {/* Pending\n
\n f}\n >\n Resend Invitation\n */}\n
\n \n
\n {\n isLoading\n ? ddLoader()\n : (\n handleOptionSelect(value, selectedResource)}\n popoverProps={{\n usePortal: true,\n portalContainerSelector: '[data-sc=\"overlay\"]:last-child > div',\n style: { zIndex: '2', maxWidth: '480px' },\n popoverOptions: { placement: 'bottom-end' }\n }}\n />\n )\n }\n
\n \n ,\n lastSubmissionCreatedAt && (\n
{USER_REQUEST_EDIT_TOOLTIP || t('This user is requesting edit access to this table.')}
\n \n )}\n ,\n \n ,\n
\n
\n );\n };\n\n return (\n \n {name && (\n
\n {\n emailSentResultVisible ? (\n \n
\n )}\n {name}
\n {(provider && ProviderSettings[provider]) && (\n \n {ProviderSettings[provider].iconSettings.icon}\n
\n )}\n \n
\n \n {email}\n
\n {(!name && provider && ProviderSettings[provider]) && (\n \n {ProviderSettings[provider].iconSettings.icon}\n
\n )}\n \n {emailSentResultIcon}\n {emailSentResult.message}\n
\n ) : (\n \n \n
\n )\n }\n \n {firstLine}\n {secondLine}\n
\n \n \n \n {selectedResources.length}\n {' '}\n Documents\n \n )}\n inactiveComponent={(\n
\n \n {customChildElement && customChildElement}\n \n onAssigneeSelectionChange(email)}\n className=\"mr-3\"\n />\n \n )}\n />\n \n setPmVisibility(!pmVisibility)}\n >\n
\n )}\n />\n )}\n \n\n {pmVisibility && (\n \n
\n \n )}\n />\n {activatedAt ? (\n <>\n {t('Manage Documents')}
\n {t('View Submissions')}
\n \n )}\n />\n {t('Send Reminder Email')}
\n \n )}\n />\n {t('Schedule Reminder Emails')}
\n \n )}\n />\n \n ) : (\n {t('Resend Invitation')}
\n \n )}\n \n {t('Revoke User')}\n
\n \n {isAccessRequested && (\n \n \n {t('Dismiss Request')}\n
\n \n )}\n \n
\n {title.toUpperCase()}
\n {message}
\n\n ({\n email: e,\n name: (allAssignees.find(f => f.email === e) || {}).name\n }))}\n ref={revokeModalRef}\n onRevokeUser={id => {\n onRevokeUser(id);\n clearSelection();\n revokeModalRef.current.hide();\n }}\n onRevokeMultipleUser={ids => {\n onRevokeMultipleUser(ids);\n clearSelection();\n revokeModalRef.current.hide();\n }}\n onRevokeAllUsers={typeof onRevokeAllUsers === 'undefined' ? null : emails => {\n onRevokeAllUsers(emails);\n clearSelection();\n revokeModalRef.current.hide();\n }}\n recordEvent={recordEvent}\n t={t}\n from=\"multiple\"\n />\n revokeModalRef.current.show()}\n searchTerm={searchTerm}\n selectedCount={selectedAssignees.length}\n />\n {!assignees.length && searchTerm !== ''\n ? (\n onAssigneePermissionChange({ ...assignee, submissionPermission, selectedResource }),\n onRemoveAccessRequest,\n onApproveAccessRequest,\n onReminderEmailChange: (assignee, scheduledReminderEmail) => onReminderEmailChange({ ...assignee, scheduledReminderEmail }),\n onScheduledEmailRemainingTimeChange: (assignee, newRemaining) => onScheduledEmailRemainingTimeChange(assignee, newRemaining),\n userTimezone,\n permissionOptions,\n resources,\n setSelectedResources: (assignee, selectedResources) => setSelectedResources({ ...assignee, selectedResources }),\n onDismissAccessRequest\n }}\n height={height}\n itemCount={assignees.length}\n width=\"100%\"\n itemSize={80}\n style={{\n flex: '1 1 auto',\n maxHeight: '100%'\n }}\n >\n {AssigneeRow}\n \n )}\n
\n )}\n \n
\n )\n : (\n \n \n
\n );\n};\n\nCustomDomainTooltipAlt.propTypes = {\n user: userPropType,\n gaAttributes: gaAttributesPropType.isRequired,\n logAbTestAction: func,\n Modal: elementType.isRequired,\n onClick: func,\n target: string.isRequired\n};\n\nCustomDomainTooltipAlt.defaultProps = {\n user: {},\n logAbTestAction: f => f,\n onClick: f => f\n};\n\nexport default CustomDomainTooltipAlt;\n","import React from 'react';\nimport { func, node } from 'prop-types';\nimport { t } from '@jotforminc/translation';\nimport { IconXmark } from '@jotforminc/svg-icons';\nimport { ALL_TEXTS } from '@jotforminc/ep-utils';\n\nexport const DialogRenderer = ({ children }) => (\n
\n \n {t(ALL_TEXTS.WANT_TO_USE_YOUR_OWN_DOMAIN)}\n {t(ALL_TEXTS.UPGRADE_TO_JOTFORM_ENTERPRISE)}\n
\n \n{children}
);\n\nDialogRenderer.propTypes = { children: node };\nDialogRenderer.defaultProps = { children: null };\n\nexport const ContentRenderer = ({ children, ...props }) => (\n \n
\n);\n\nContentRenderer.propTypes = { children: node };\nContentRenderer.defaultProps = { children: null };\n\nexport const HeaderRenderer = ({ onCloseClick, ...props }) => (\n \n {children}\n
\n \n \n
\n {backgroundImageUrl && (\n \n \n
\n {!!preDescription && (\n \n {t(preDescription)}\n
\n )}\n\n {descriptionWithoutStrong ? t(description) : (\n {t(description)}\n )}\n
\n\n
\n )}\n \n {/* image */}\n \n
\n\n \n\n \n \n );\n};\n\nCollaborationModal.propTypes = {\n user: userPropType.isRequired,\n opener: string,\n modalProps: object,\n formID: string,\n devFormID: string,\n isNoLabelMode: bool,\n formUiModifier: string,\n description: string.isRequired,\n badgeText: string,\n preDescription: string,\n gaAttributes: gaAttributesPropType.isRequired,\n gaAttributesClose: gaAttributesPropType.isRequired,\n gaFormTrackingItems: gaFormTrackingItemsPropType.isRequired,\n textColorClass: string,\n preDescColorClass: string,\n backgroundColor: string,\n backgroundImageUrl: string,\n supTitleTextColor: string,\n supTitleBackground: string,\n onClose: func,\n onCloseClick: func,\n logAbTestAction: func,\n onFormSubmit: func,\n hasEducationDiscountBadge: bool,\n descriptionClasses: string,\n preDescriptionClasses: string,\n descriptionWithoutStrong: bool,\n isAdForm: bool\n};\n\nCollaborationModal.defaultProps = {\n opener: '',\n modalProps: {},\n formID: LEAD_FORM_MAP.COMMON.LIVE,\n devFormID: LEAD_FORM_MAP.COMMON.DEV,\n isNoLabelMode: false,\n formUiModifier: '',\n textColorClass: 'color-white',\n preDescColorClass: 'color-white',\n backgroundColor: 'radial-gradient(150% 100% at 100% 100%, #273CA5 0%, #050C34 100%)',\n backgroundImageUrl: '',\n supTitleTextColor: '#A2ABF6',\n supTitleBackground: 'rgba(61, 83, 194, 0.2)',\n descriptionClasses: 'font-normal text-lg md:text-2xl line-height-xl md:line-height-3xl mt-0 mb-4 md:mb-12 font-circular md:min-h-24',\n preDescriptionClasses: 'font-normal text-lg md:text-xl line-height-xl md:line-height-3xl mt-0 mb-4 md:mb-5 font-circular',\n badgeText: ALL_TEXTS.JOTFORM_ENTERPRISE_TITLE,\n preDescription: '',\n onClose: f => f,\n onCloseClick: f => f,\n logAbTestAction: f => f,\n onFormSubmit: f => f,\n hasEducationDiscountBadge: false,\n descriptionWithoutStrong: false,\n isAdForm: false\n};\n\nexport default CollaborationModal;\n","import React from 'react';\nimport { CollaborationModal, ALL_TEXTS } from '@jotforminc/ep-utils';\n\nconst WhiteLabelingModal = props => {\n return (\n \n \n \n
\n {t(title)}
\n \n {t(description)}\n {t(confirmMessage)}\n
\n\n \n {\n const isChanged = getURLDomain(link) !== value;\n if (isChanged) {\n onAlternativeDomainChange(value);\n }\n }}\n popoverProps={{\n popoverOptions: { placement: 'bottom-start' },\n style: { zIndex: 2, width: '100%' }\n }}\n />\n
\n \n )}\n />\n\n \n {!isLoading ? \n {link}\n
\n \n \n \n
\n )}\n {!isEditModeOpen && (\n \n \n {isSaving ? `${SAVING}..` : APPLY}\n \n
\n \n \n \n \n )}\n
\n )}\n {!isEditModeOpen && isUsingCustomLink && (\n \n \n
\n )}\n {isUserSlugModalVisible && (\n \n \n generateModalRef.current.hide()}\n />\n
\n );\n});\n\nLinkSection.propTypes = {\n link: string,\n linkExpireDate: string,\n linkExpireTimezone: string,\n t: func,\n recordEvent: func,\n onExpireClick: func,\n onGenerateNewLink: func,\n onExpireDateClick: func,\n userTimezone: string,\n isEditable: bool,\n onLinkChange: func,\n editableLinkFormat: string,\n isUsingCustomLink: bool,\n onResetCustomLink: func,\n editableLinkDefaultValue: string,\n alternativeDomains: arrayOf(string),\n onAlternativeDomainChange: func,\n onCopyClick: func,\n onOpenInNewTabClick: func,\n features: objectOf(bool),\n onSettingsClick: func,\n isPrivate: bool,\n isCompanyProtected: bool,\n generateNewLinkModalDescription: string,\n hasNewTab: bool,\n isBuilderQRShare: bool,\n resources: arrayOf(shape({})),\n selectedResources: arrayOf(string),\n onPropertyChange: func,\n isEditDisabled: bool,\n forceUserSlugModal: bool,\n username: string,\n onUserSlugSet: func,\n EditDisabledMessageRenderer: node,\n company: string,\n hasTeamSlug: bool,\n onEnterpriseLinkClick: func,\n user: shape({}),\n isLoading: bool\n};\n\nLinkSection.defaultProps = {\n link: '',\n linkExpireDate: '',\n linkExpireTimezone: '',\n t: text => text,\n recordEvent: f => f,\n onExpireClick: f => f,\n onGenerateNewLink: f => f,\n onExpireDateClick: f => f,\n onLinkChange: f => f,\n userTimezone: '',\n isEditable: false,\n editableLinkFormat: 'https://www.jotform.com/{}/',\n alternativeDomains: [],\n onResetCustomLink: f => f,\n isUsingCustomLink: false,\n editableLinkDefaultValue: '',\n onAlternativeDomainChange: f => f,\n onCopyClick: f => f, // Required for muse team\n onOpenInNewTabClick: f => f, // Required for muse team\n features: {},\n onSettingsClick: () => { },\n isPrivate: false,\n isCompanyProtected: false,\n generateNewLinkModalDescription: undefined,\n hasNewTab: false,\n isBuilderQRShare: false,\n resources: [],\n selectedResources: [],\n onPropertyChange: f => f,\n isEditDisabled: false,\n forceUserSlugModal: false,\n username: '',\n onUserSlugSet: f => f,\n EditDisabledMessageRenderer: React.Fragment,\n company: '',\n hasTeamSlug: false,\n onEnterpriseLinkClick: f => f,\n user: {},\n isLoading: false\n};\n\nexport default LinkSection;\n","import React, { useEffect } from 'react';\nimport { func, object } from 'prop-types';\nimport {\n CollaborationModal, ASSET_IDENTIFIER, ALL_TEXTS, GA_FORM_TRACKING_ITEMS, userPropType, GA_AD_FORM_TRACKING_ITEMS,\n GA_SUFFIXES, createGaAttributes, gaDataLayerPushClose, hasAdwordsModeOn, mapCallbacksToGaTrackingItems, setEPActions\n} from '@jotforminc/ep-utils';\n\nconst AssignToOrganizationModal = ({\n user,\n modalProps,\n onClose,\n logAbTestAction\n}) => {\n const { PRODUCT: { ASSIGN_TO_ORGANIZATON_MODAL } } = ASSET_IDENTIFIER;\n const target = ASSIGN_TO_ORGANIZATON_MODAL;\n\n const isAdForm = hasAdwordsModeOn();\n let { [target]: gaFormTrackingItems } = isAdForm ? GA_AD_FORM_TRACKING_ITEMS : GA_FORM_TRACKING_ITEMS;\n\n const gaAttributes = createGaAttributes(target);\n const gaAttributesClose = createGaAttributes(target, GA_SUFFIXES.CLOSE);\n\n useEffect(() => {\n const actionData = { target, action: 'seen' };\n\n logAbTestAction(actionData);\n setEPActions({ asset: target, ...actionData });\n }, [logAbTestAction]);\n\n const handleCloseClick = () => {\n gaDataLayerPushClose(gaAttributes);\n\n logAbTestAction({ target: `closeButton-${target}`, action: 'click' });\n setEPActions({ asset: target, target: 'closeButton', action: 'click' });\n };\n\n const handleClose = () => {\n logAbTestAction({ target: `onClose-${target}`, action: 'close' });\n setEPActions({ asset: target, target, action: 'onClose' });\n\n onClose();\n };\n\n const handleContactSales = () => {\n logAbTestAction({ action: 'click', target: `contactSalesButton-${target}` });\n setEPActions({ asset: target, target: 'contactSalesButton', action: 'click' });\n };\n\n const handleLearnMore = () => {\n logAbTestAction({ action: 'click', target: `learnMoreButton-${target}` });\n setEPActions({ asset: target, target: 'learnMoreButton', action: 'click' });\n };\n\n const handleFormSubmit = () => {\n logAbTestAction({ target: `formSubmit-${target}`, action: 'formSubmit' });\n setEPActions({ asset: target, target, action: 'formSubmit' });\n };\n\n gaFormTrackingItems = mapCallbacksToGaTrackingItems(gaFormTrackingItems, [handleContactSales, handleLearnMore]);\n\n return (\n \n onPropertyChange({ selectedResources: val })}\n />\n )}\n />\n
\n \n \n \n
\n \n
\n \n {SHARE_LINK_HEADER}\n \n
\n {SHARE_LINK_HEADER_DESC ? \n
\n \n )}\n />\n {SHARE_LINK_HEADER_DESC}
: null}\n\n \n {OPEN_IN_NEW_TAB}\n \n )}\n />\n
\n \n onEnterpriseLinkClick('text-edit_form_url')}\n />\n
\n )}\n \n
\n \n {/* */}\n {/* \n {!isLinkExpired && formattedLinkExpireDate && (\n
\n \n {translationRenderer(LINK_WILL_BE_EXPIRED)({\n renderer1: () => (\n \n {formattedLinkExpireDate}\n \n )\n })}\n
\n )}\n {isLinkExpired && (\n \n {translationRenderer(LINK_EXPIRED_GENERATE_NEW)({\n renderer1: text => (\n \n {text}\n \n ),\n renderer2: text => (\n \n {text}\n \n )\n })}\n
\n )}\n \n )}\n />\n {errorMessage && {errorMessage}
}\n \n \n
\n {REVOKE_FROM_ORGANIZATION}
\n {REVOKE_FROM_ORGANIZATION_DESC({ NUMBER_OF_EMAILS: users.length })}
\n{REVOKE_FROM_ORGANIZATION_CONFIRM}
\n\n onEnterpriseLinkClick('button-enterprise-contact')}\n onLearnMoreClick={() => onEnterpriseLinkClick('button-enterprise-learn-more')}\n />\n )\n : null}\n
\n );\n};\n\nAssignToOrganizationSection.propTypes = {\n user: shape({}),\n formID: number,\n t: func,\n isEnterprise: bool,\n recordEvent: func,\n onAssign: func,\n onRevoke: func,\n onFormPropChange: func,\n assignedToOrganization: bool,\n onEnterpriseLinkClick: func\n};\n\nAssignToOrganizationSection.defaultProps = {\n user: {},\n formID: 0,\n t: f => f,\n isEnterprise: false,\n recordEvent: defaultRecordEvent,\n onAssign: f => f,\n onRevoke: f => f,\n onFormPropChange: f => f,\n assignedToOrganization: false,\n onEnterpriseLinkClick: f => f\n};\n\nexport default AssignToOrganizationSection;\n","/* eslint-disable max-len */\nimport styled from 'styled-components';\n\n// TODO :: initial styles\nexport const ScPredefinedUsersSection = styled.div`\n .searchAndInvite {\n margin: -24px 0 18px 0;\n\n &-title {\n font-size: 15px;\n line-height: 18px;\n font-weight: 700;\n }\n\n &-subheader {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-top: 30px;\n\n .jfCheckbox-item {\n padding: 6px;\n }\n }\n\n .searchInUsers {\n position: relative;\n\n &:before {\n content: '';\n background-image: url(\"data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m15.2 13.73-3.17-3.17a6.36 6.36 0 1 0-1.47 1.46l3.17 3.18a1.04 1.04 0 0 0 1.47-1.47ZM3.83 9.89a4.28 4.28 0 1 1 6.06-6.06 4.28 4.28 0 0 1-6.06 6.06Z' fill='%236F76A7'/%3E%3C/svg%3E\");\n background-size: 15px;\n background-position: center;\n position: absolute;\n display: inline-block;\n width: 15px;\n height: 15px;\n margin: 15px 12px;\n }\n \n input {\n background: #FFFFFF;\n border: 1px solid #D0D4EC;\n border-radius: 4px;\n padding: 12px 12px 12px 32px;\n\n input {\n border: none;\n }\n }\n }\n\n .inviteMultiple {\n background: #78BB07;\n border-radius: 4px;\n color: #FFFFFF;\n border: none;\n cursor: pointer;\n padding: 12px 40px;\n \n &:hover {\n background: #4EB100;\n }\n }\n }\n\n .jfTable-wrapper {\n height: 400px;\n overflow: auto;\n }\n\n table {\n border-collapse: collapse;\n width: 100%;\n\n tbody {\n .jfTable-row {\n border-top: 1px solid rgba(94,105,137,0.33);\n }\n }\n\n .forCheckbox,\n .forUser {\n text-align: left;\n }\n\n .forStatus {\n text-align: right;\n }\n\n .jfTable-row {\n position: relative;\n\n .jfCheckbox-wrapper.isChecked {\n background: #0099FF;\n }\n }\n\n .jfTable-column {\n &.forCheckbox {\n margin: 0;\n padding: 0;\n width: 24px;\n\n .jfCheckbox-item {\n padding: 0;\n width: 22px;\n height: 22px;\n\n .jfCheckbox-wrapper {\n left: 0;\n }\n }\n }\n\n &.forUser {\n display: flex;\n\n .user-avatar {\n width: 30px;\n height: 30px;\n border-radius: 50%;\n background-position: center;\n background-repeat: no-repeat;\n background-size: cover;\n }\n\n .user-content {\n display: flex;\n margin-left: 8px;\n flex-direction: column;\n\n .name {\n font-weight: 600;\n font-size: 14px;\n line-height: 18px;\n }\n\n .email {\n font-weight: 400;\n font-size: 12px;\n line-height: 16px;\n }\n }\n }\n }\n\n .inviteSingle {\n background-color: #E3E5F5;\n border-radius: 4px;\n color: #545B88;\n border: none;\n cursor: pointer;\n padding: 10px 24px;\n \n &:hover {\n background: #bebfcf;\n }\n\n &.invited {\n pointer-events: none;\n background-color: transparent;\n }\n }\n }\n`;\n","import React, {\n useState, useRef, useEffect\n} from 'react';\nimport { func, arrayOf, shape } from 'prop-types';\nimport { v4 as uuid } from 'uuid';\nimport { CheckboxItem } from '@jotforminc/checkbox';\nimport { useDebounce } from '@jotforminc/hooks';\n\nimport { useTranslatedTexts } from '../../helpers/hooks';\nimport { ScPredefinedUsersSection } from '../../sc/scInvitePredefinedUsersSection';\n\nconst InvitePredefinedUsersSection = ({\n t, allUsers, onInvite\n}) => {\n const {\n USERS, INVITATION_STATUS, INVITED, INVITE_BUTTON, INVITE_PEOPLE, SELECT_ALL, INVITE_SELECTED_BUTTON\n } = useTranslatedTexts(t);\n const [userList, setUserList] = useState(allUsers);\n const [selectedUsers, setSelectedUsers] = useState([]);\n const searchInputRef = useRef();\n const isAllSelected = userList.length > 0 && selectedUsers.length >= userList.length;\n\n const onSearch = val => {\n if (val) {\n setUserList(allUsers.filter(user => `${user.email || ''}${user.name || ''}`.toLowerCase().includes(val.toLowerCase())));\n } else {\n setUserList(allUsers);\n }\n };\n\n useEffect(() => {\n onSearch(searchInputRef.current.value);\n }, [allUsers]);\n\n const selectUser = email => {\n setSelectedUsers(currSelectedUsers => {\n const isSelected = currSelectedUsers.find(userEmail => userEmail === email);\n\n if (isSelected) {\n return currSelectedUsers.filter(userEmail => userEmail !== email);\n }\n\n return [...currSelectedUsers, email];\n });\n };\n\n const selectAll = () => {\n const newList = isAllSelected ? [] : userList.map(user => user.email);\n setSelectedUsers(newList);\n };\n\n return (\n \n
\n {isAdShowing\n ? (\n \n
\n {INVITE_PEOPLE}
\n\n onSearch(searchInputRef.current.value))}\n onKeyDown={e => e.stopPropagation()}\n defaultValue=''\n />\n
\n \n
\n \n
\n {selectedUsers.length > 0 && (\n \n )}\n \n \n \n
\n
\n | \n | {USERS} | \n{INVITATION_STATUS} | \n
|---|---|---|
| \n | \n \n \n \n \n {name} \n {email} \n | \n \n {invitationSent === true ? INVITED : (\n \n )}\n | \n
\n \n
\n )}\n />\n \n {t('Invite Settings')}\n
\n{t(errorMessage)}
}\n \n
\n