\n
\n \n\n);\n\nWFCategoryLoadingName.propTypes = {};\n\nconst EditSubmisisonCategoryName = ({ actionDetails: { type } }) => (\n \n \n { showButton ? (\n \n ) : null }\n
\n \n );\n};\n\nReplyEntry.Name = EmailCategoryName;\n\nReplyEntry.propTypes = {\n ...entryPropTypes\n};\n\nReplyEntry.Status = ({ actionDetails: { subject, to } }) => {\n return (\n <>\n \n {t('to: {to}').replace(/{to}/g, to)}\n
\n \n );\n};\n\nReplyEntry.Status.propTypes = {\n actionDetails: shape({}).isRequired\n};\n\nReplyEntry.Attachment = ({ actionDetails: { attachments } }) => {\n const [fileIndex, setFileIndex] = useState(0);\n const [previewVisibility, setPreviewVisibility] = useState(false);\n let uploadUrls = attachments && JSON.parse(attachments);\n\n if (Array.isArray(uploadUrls)) {\n uploadUrls = uploadUrls.map(uploadUrl => {\n const hiddenExtensions = ['JPEG', 'PNG', 'GIF', 'JPG', 'DOCX'];\n const fullName = /[^/]*$/.exec(uploadUrl)[0];\n const extension = fullName?.split('.')?.pop()?.toUpperCase();\n\n return {\n description: '',\n fileName: fullName,\n fileThumbnailUrl: uploadUrl,\n fileUrl: uploadUrl,\n previewUrl: uploadUrl,\n size: '',\n extension,\n isHidden: hiddenExtensions.indexOf(extension) > -1\n };\n });\n return (\n \n
\n \n {fileName}\n \n \n );\n })}\n {previewVisibility && (\n \n {translationRenderer('[1[{assignerID}]] [2[assigned]] this submission to [3[{assigneeID}]]')({\n renderer1: () => <>{assignerID},\n renderer2: text => {text},\n renderer3: () => {assigneeID}\n })}\n
\n );\n};\n\nAssignEntry.propTypes = {\n ...entryPropTypes\n};\n\nconst ReAssignEntry = ({ actionDetails }) => {\n const { comment } = actionDetails;\n return comment ? {comment}
: null;\n};\n\nReAssignEntry.propTypes = {\n ...entryPropTypes\n};\n\nReAssignEntry.Name = WFCategoryName;\n\nReAssignEntry.Status = ({ /* user, */ actionDetails }) => {\n // const { name, email } = user;\n // const assignerID = name || email;\n\n const {\n // newAssigneeName,\n newAssigneeEmail,\n newAssigneeUser: { name: assigneeName }\n } = actionDetails;\n\n // const assigneeID = email === newAssigneeEmail ? (\n // assignerID\n // ) : (newAssigneeName || newAssigneeEmail);\n\n return (\n <>\n \n {translationRenderer('[1[Reassigned]] to [2[{user}]]')({\n renderer1: text => {text},\n renderer2: () => {assigneeName || newAssigneeEmail}\n })}\n
\n \n );\n};\n\nReAssignEntry.Status.propTypes = {\n ...entryPropTypes\n};\n\nReAssignEntry.PopoverDescription = ({ /* user, */ actionDetails }) => {\n const {\n newAssigneeEmail,\n newAssigneeUser: { name: assigneeName }\n } = actionDetails;\n\n return t('to: {user}.').replace(/{user}/g, assigneeName || newAssigneeEmail);\n};\n\nReAssignEntry.PopoverDescription.propTypes = {\n ...entryPropTypes\n};\n\nconst requestMoreInfoEntry = {};\n\nrequestMoreInfoEntry.propTypes = {\n ...entryPropTypes\n};\nrequestMoreInfoEntry.Name = WFCategoryName;\n\nrequestMoreInfoEntry.Status = ({ actionDetails }) => {\n const { assigneeUser = {}, assigneeEmail = '' } = actionDetails;\n const { name, email } = assigneeUser;\n return (\n <>\n \n {translationRenderer('[1[Requested more info]] from [2[{userDetails}]]')({\n renderer1: text => {text},\n renderer2: () => {name || email || assigneeEmail}\n })}\n
\n \n );\n};\n\nrequestMoreInfoEntry.Status.propTypes = {\n ...entryPropTypes\n};\n\nrequestMoreInfoEntry.Attachment = ({ actionDetails }) => {\n const { attachments } = actionDetails;\n\n const [fileIndex, setFileIndex] = useState(0);\n const [previewVisibility, setPreviewVisibility] = useState(false);\n let uploadUrls = attachments && JSON.parse(attachments);\n if (!attachments || !uploadUrls || uploadUrls?.length === 0) {\n return null;\n }\n\n if (Array.isArray(uploadUrls)) {\n uploadUrls = uploadUrls.map(uploadUrl => {\n const hiddenExtensions = ['JPEG', 'PNG', 'GIF', 'JPG', 'DOCX'];\n const fullName = /[^/]*$/.exec(uploadUrl)[0];\n const extension = fullName?.split('.')?.pop()?.toUpperCase();\n\n return {\n description: '',\n fileName: fullName,\n fileThumbnailUrl: uploadUrl,\n fileUrl: uploadUrl,\n previewUrl: uploadUrl,\n size: '',\n extension,\n isHidden: hiddenExtensions.indexOf(extension) > -1\n };\n });\n return (\n \n
\n \n {fileName}\n \n \n );\n })}\n {previewVisibility && (\n \n
\n );\n};\n\nundoLoadingEntry.Status.propTypes = {\n ...entryPropTypes\n};\n\nconst mockApproveDenyEntry = ({ actionDetails, user }) => {\n const { comment, signature } = actionDetails;\n return (\n <>\n {/* eslint-disable-next-line no-nested-ternary */}\n {user?.username === '!workflow_system'\n ? null // {comment}
: null}\n {signature ? \n {translationRenderer(contentText)({\n renderer1: usernameText => {usernameText.replace('{user}', displayName)},\n renderer2: () => {t(badgeText)},\n renderer3: usernameText => {usernameText.replace('{user}', displayName)}\n })}\n
\n {isSystem\n ? (\n \n {'{user} didn\\'t take any action in the time allowed.'.replace(/{user}/, name || assigneeEmail)}\n
\n )\n : null}\n \n );\n};\n\nmockApproveDenyEntry.Status.propTypes = {\n ...entryPropTypes\n};\n\nconst editSubmissionEntry = {};\n\neditSubmissionEntry.propTypes = {\n ...entryPropTypes\n};\n\neditSubmissionEntry.Name = EditSubmisisonCategoryName;\n\neditSubmissionEntry.Status = ({ actionDetails }) => {\n const { assigneeUser: { name, email } = {}, assigneeEmail } = actionDetails;\n const actionOwner = name || email || assigneeEmail || 'Form User';\n\n return (\n <>\n \n \n {' '}\n {actionOwner}\n \n {' '}\n edited the submission.\n
\n \n );\n};\n\neditSubmissionEntry.Status.propTypes = {\n ...entryPropTypes\n};\n\nconst UserNoAction = ({ user }) => (\n \n {user.avatarUrl ? (\n
\n);\n\nUserNoAction.propTypes = {\n user: shape({}).isRequired\n};\n\nconst EscalateEntry = {};\n\nEscalateEntry.propTypes = {\n ...entryPropTypes\n};\n\nEscalateEntry.user = getSystemUser;\n\nEscalateEntry.Name = WFCategoryName;\n\n// Please dont use dangerouslySetInnerHTML for translations, its dangerous >_<\nEscalateEntry.Status = ({ actionDetails }) => {\n const { prev, next } = getUsers(actionDetails);\n const { fromMultipleApproval } = actionDetails;\n const displayName = fromMultipleApproval ? 'Group Approval' : (prev.name || prev.email);\n return (\n <>\n \n {translationRenderer(\"[1[{prevName}'s]] task has been [2[Escalated]] to [3[{nextName}]]\")({\n renderer1: text => {text.replace(/{prevName}/g, displayName)},\n renderer2: text => {text},\n renderer3: () => {next.name || next.email}\n })}\n
\n \n {t('{prevName} didn\\'t take any action in the time allowed.').replace(/{prevName}/g, displayName)}\n
\n \n );\n};\n\nEscalateEntry.Status.propTypes = {\n ...entryPropTypes\n};\n\nEscalateEntry.PopoverDescription = ({ actionDetails }) => {\n const { next } = getUsers(actionDetails);\n return t('to: {nextName}').replace(/{nextName}/g, next.name || next.email);\n};\n\nEscalateEntry.PopoverDescription.propTypes = {\n ...entryPropTypes\n};\n\nconst ExpiredEntry = {};\n\nExpiredEntry.propTypes = {\n ...entryPropTypes\n};\n\nExpiredEntry.user = getSystemUser;\n\nExpiredEntry.Name = WFCategoryName;\n\nExpiredEntry.Status = ({ actionDetails }) => {\n const user = getAssignee(actionDetails);\n const { fromMultipleApproval } = actionDetails;\n const displayName = fromMultipleApproval ? 'Group Approval' : user?.name || user?.email;\n return (\n \n
\n );\n};\n\nExpiredEntry.Status.propTypes = {\n ...entryPropTypes\n};\n\nconst CompleteEntry = ({ actionDetails }) => {\n const { type } = actionDetails;\n const { prev } = getUsers(actionDetails);\n const typeText = t(statusTexts[type]);\n return (\n \n {translationRenderer('[1[{user}]] task was [2[Expired]]')({\n renderer1: text => {text.replace('{user}', displayName)},\n renderer2: text => {text}\n })}\n
\n \n {t(\"{user} didn't take any action in the time allowed.\").replace('{user}', displayName)}\n
\n \n
\n );\n};\n\nCompleteEntry.propTypes = {\n ...entryPropTypes\n};\n\nconst ApproveRejectEntry = ({ actionDetails, user }) => {\n const { comment, signature } = actionDetails;\n return (\n <>\n {/* eslint-disable-next-line no-nested-ternary */}\n {user?.username === '!workflow_system'\n ? null // \n {translationRenderer('This submission has [1[Automatically Finished]] as [2[{typeText}]]')({\n renderer1: text => {text},\n renderer2: () => {typeText}\n })}\n
\n {comment}
: null}\n {signature ? \n {translationRenderer(contentText)({\n renderer1: usernameText => {usernameText.replace('{user}', displayName)},\n renderer2: () => {t(badgeText)},\n renderer3: usernameText => {usernameText.replace('{user}', displayName)}\n })}\n
\n {isSystem\n ? (\n \n {'{user} didn\\'t take any action in the time allowed.'.replace(/{user}/, displayName)}\n
\n )\n : null}\n \n );\n};\n\nApproveRejectEntry.Attachment = ({ actionDetails: { attachment } }) => {\n const [fileIndex, setFileIndex] = useState(0);\n const [previewVisibility, setPreviewVisibility] = useState(false);\n let uploadUrls = [];\n if (attachment && attachment?.url) {\n uploadUrls.push(attachment?.url);\n }\n\n if (uploadUrls && Array.isArray(uploadUrls) && uploadUrls?.length > 0) {\n uploadUrls = uploadUrls?.map(uploadUrl => {\n const hiddenExtensions = ['JPEG', 'PNG', 'GIF', 'JPG', 'DOCX'];\n const fullName = /[^/]*$/.exec(uploadUrl)[0];\n const extension = fullName?.split('.')?.pop()?.toUpperCase();\n\n return {\n description: '',\n fileName: fullName,\n fileThumbnailUrl: uploadUrl,\n fileUrl: uploadUrl,\n previewUrl: uploadUrl,\n size: '',\n extension,\n isHidden: hiddenExtensions?.indexOf(extension) > -1\n };\n });\n return (\n \n
\n \n {fileName}\n \n \n );\n })}\n {previewVisibility && (\n {comment}
: null}\n {signature ? \n {t(badgeText)}\n
\n )}\n \n
\n \n );\n};\n\nMultipleApproveReject.Attachment = ({ actionDetails: { attachment } }) => {\n const [fileIndex, setFileIndex] = useState(0);\n const [previewVisibility, setPreviewVisibility] = useState(false);\n let uploadUrls = [];\n if (attachment && attachment?.url) {\n uploadUrls.push(attachment?.url);\n }\n\n if (uploadUrls && Array.isArray(uploadUrls) && uploadUrls?.length > 0) {\n uploadUrls = uploadUrls?.map(uploadUrl => {\n const hiddenExtensions = ['JPEG', 'PNG', 'GIF', 'JPG', 'DOCX'];\n const fullName = /[^/]*$/.exec(uploadUrl)[0];\n const extension = fullName?.split('.')?.pop()?.toUpperCase();\n\n return {\n description: '',\n fileName: fullName,\n fileThumbnailUrl: uploadUrl,\n fileUrl: uploadUrl,\n previewUrl: uploadUrl,\n size: '',\n extension,\n isHidden: hiddenExtensions?.indexOf(extension) > -1\n };\n });\n return (\n \n
\n \n {fileName}\n \n \n );\n })}\n {previewVisibility && (\n \n {translationRenderer(isWorkflowReleased ? '[1[Canceled]] flow.' : '[1[Canceled]] approval flow.')({\n renderer1: text => {text}\n })}\n
\n);\n\nconst RestartEntry = {};\nRestartEntry.Name = WFCategoryName;\n\nRestartEntry.Status = () => {\n return (\n \n {translationRenderer(isWorkflowReleased ? '[1[Restarted]] flow.' : '[1[Restarted]] approval flow.')({\n renderer1: text => {text}\n })}\n
\n );\n};\n\nconst AssignFormNotificationEntry = {};\n\nAssignFormNotificationEntry.user = getSystemUser;\nAssignFormNotificationEntry.Status = ({ actionDetails }) => {\n const {\n to, subject, formTitle, assigneeUser\n } = actionDetails;\n const userName = assigneeUser?.name || assigneeUser?.username || to;\n return (\n <>\n \n {translationRenderer('[1[{form}]] [2[{sent}]] to [3[{to}]] [4[{subject}]]')({\n renderer1: formText => {formText.replace('{form}', formTitle)},\n renderer2: sentText => {sentText.replace('{sent}', ' sent')},\n renderer3: toText => {toText.replace('{to}', userName)},\n renderer4: subjectText =>
\n \n );\n};\nAssignFormNotificationEntry.Status.propTypes = {\n ...entryPropTypes\n};\n\nAssignFormNotificationEntry.Name = WFCategoryName;\n\nconst SignDocumentNotification = {};\n\nconst ViewSignInboxButton = ({ documentFormID, submissionID }) => {\n const redirectToBuild = () => handleCustomNavigation(`/inbox/${documentFormID}/signAllDocuments/${submissionID}`);\n return (\n <>\n {stripHTML(decodeHTML(subjectText.replace('{subject}', subject)))}
\n })}\n \n {translationRenderer('[1[{element}]] Step - Email sent to [2[{to}]] [3[{subject}]]')({\n renderer1: elementName => {elementName.replace('{element}', getElementName(elementType, elementSubType))},\n renderer2: toText => {toText.replace('{to}', to)},\n renderer3: subjectText => (\n
\n \n );\n};\n\nReminderEntry.Status.propTypes = {\n ...entryPropTypes\n};\n\nReminderEntry.Name = WFCategoryName;\n\nSignDocumentNotification.user = getSystemUser;\nSignDocumentNotification.Status = ({ actionDetails }) => {\n const {\n documentTitle\n } = actionDetails;\n return (\n <>\n \n \n {' '}\n { subjectText.replace('{subject}', subject)}\n \n
\n )\n })}\n \n {translationRenderer('[1[{title}]] sent for signature. [2[{viewSignInbox}]]')({\n renderer1: subjectText => {stripHTML(decodeHTML(subjectText.replace('{title}', documentTitle)))},\n renderer2: () =>
\n \n );\n};\nSignDocumentNotification.Status.propTypes = {\n ...entryPropTypes\n};\n\nSignDocumentNotification.Name = WFCategoryName;\n\nconst SignEntry = {};\n\nSignEntry.user = getSystemUser;\nSignEntry.Status = ({\n actionDetails\n}) => {\n const {\n text, buttonColor: color, type, documentTitle\n } = actionDetails;\n const badgeText = statusTexts[text?.toUpperCase()] || text;\n const badgeClass = type?.toLowerCase();\n return (\n <>\n \n
\n \n );\n};\n\nSignEntry.Status.propTypes = {\n ...entryPropTypes\n};\nSignEntry.Name = WFCategoryName;\n\nconst MailEntry = {};\n\nMailEntry.user = getSystemUser;\nMailEntry.Status = ({ actionDetails }) => {\n const {\n to, subject, subType, reason\n } = actionDetails;\n switch (reason) {\n case 'ASSIGN_FORM_NOTIFICATION_MAIL':\n return AssignFormNotificationEntry.Status({ actionDetails });\n case 'SEND_SIGN_NOTIFICATION':\n return SignDocumentNotification.Status({ actionDetails });\n case 'SIGN_DOCUMENT':\n return SignEntry.Status({ actionDetails });\n case 'SEND_REMINDER':\n return ReminderEntry.Status({ actionDetails });\n default:\n const emailList = to?.split(',')?.filter(Boolean)?.join(',') || '';\n return (\n <>\n \n {\n translationRenderer('[1[{status}]]')({\n renderer1: subjectText => (\n <>\n \n {stripHTML(decodeHTML(subjectText.replace('{status}', badgeText)))}\n \n {' '}\n \n )\n })\n }\n {stripHTML(decodeHTML(documentTitle))}\n
\n {translationRenderer('[1[{viewSignInbox}]]')({\n renderer1: () => \n {translationRenderer(['workflow_send_approval_report', 'workflow_send_default_report'].includes(subType) ? 'Approval Report Email sent to [1[{to}]] [2[{subject}]]'\n : 'Email sent to [1[{to}]] [2[{subject}]]')({\n renderer1: toText => {toText.replace('{to}', emailList.replace(/,/g, ', '))},\n renderer2: subjectText =>
\n \n );\n }\n};\nMailEntry.Status.propTypes = {\n ...entryPropTypes\n};\n\nMailEntry.Name = WFCategoryName;\n\nconst MultipleApprovalMail = {};\n\nMultipleApprovalMail.user = getSystemUser;\nMultipleApprovalMail.Status = ({ actionDetails }) => {\n const {\n title, reason, approvalOptions, subType, team = null\n } = actionDetails;\n const { option, value = null } = (approvalOptions && safeJSONParse(approvalOptions, approvalOptions)) || {};\n switch (reason) {\n case 'TEAM_START':\n return (\n <>\n {stripHTML(decodeHTML(subjectText.replace('{subject}', subject)))}
\n })}\n \n {translationRenderer('[1[{title}]] [2[{sent}]] to [3[group approval]] [4[{approverOptions}]]')({\n renderer1: titleText => {titleText.replace('{title}', title)},\n renderer2: sentText => {sentText.replace('{sent}', ' request sent')},\n renderer3: () => {team?.teamName},\n renderer4: () => (\n
\n \n );\n case 'SEND_REMINDER':\n const overriddenActionDetails = { ...actionDetails, to: actionDetails?.mergeTo || actionDetails?.to };\n return ReminderEntry.Status({ actionDetails: overriddenActionDetails });\n default:\n return (\n <>\n \n
\n )\n })}\n \n {translationRenderer('[1[{title}]] [2[{sent}]] to [3[group approval]] [4[{approverOptions}]]')({\n renderer1: titleText => {titleText.replace('{title}', title)},\n renderer2: sentText => {sentText.replace('{sent}', ' sent')},\n renderer3: text => {text},\n renderer4: () => (\n
\n \n );\n }\n};\nMultipleApprovalMail.Status.propTypes = {\n ...entryPropTypes\n};\n\nMultipleApprovalMail.Name = WFCategoryName;\n\nconst AssignFormSubmissionEntry = {};\n\nAssignFormSubmissionEntry.user = getAssignee;\nAssignFormSubmissionEntry.Status = ({ actionDetails, timestamp, name }) => {\n const formID = actionDetails?.formID;\n const submissionID = actionDetails?.submissionID;\n\n const { formTitle } = actionDetails;\n const [question, setQuestion] = useState({});\n const [submission, setSubmission] = useState({});\n const [singleSubmission, setSingleSubmission] = useState(false);\n const [isPanelOpen, setPanelOpen] = useState(false);\n\n const containers = ['.jSheetSingleSub', '.jfInbox-submission-wrapper'];\n let portalContainer = 'body';\n let insideContainer = false;\n\n containers.forEach(container => {\n if (global.document.querySelector(container)) {\n portalContainer = container;\n insideContainer = true;\n }\n });\n\n const getSubmissionInfo = async () => {\n try {\n if (Object.keys(question).length === 0 || Object.keys(submission).length === 0) {\n const questionRes = await fetchQuestions(formID, 'inbox');\n const submissionRes = await fetchSubmission(submissionID, 'inbox');\n setQuestion(questionRes);\n setSubmission(submissionRes);\n }\n setSingleSubmission(true);\n // JS Callstack - animation needs\n // This component/file needs to be refactored.\n setTimeout(() => {\n document.body.classList.add('jfSingleSubmissionView-standalone-isVisible');\n });\n } catch (e) {\n Tracking.captureException(e);\n setQuestion({});\n setSubmission({});\n setSingleSubmission(true);\n if (e?.response?.status === 401) {\n handleCustomNavigation(`/inbox/${formID}/${submissionID}`, '_blank');\n setPanelOpen(false);\n }\n }\n };\n\n useEffect(() => {\n return () => document.body.classList.remove('jfSingleSubmissionView-standalone-isVisible');\n }, []);\n\n useEffect(() => {\n if (isPanelOpen === submissionID) {\n getSubmissionInfo();\n } else {\n document.body.classList.remove('jfSingleSubmissionView-standalone-isVisible');\n }\n }, [isPanelOpen, submissionID]);\n\n return (\n \n
\n )\n })}\n \n {translationRenderer('[1[{newSubmission}]] [2[{formName}]] [3[{viewSubmission}]] ')({\n renderer1: newSubmission => {newSubmission.replace('{newSubmission}', 'New submission on ')},\n renderer2: formNameText => {formNameText.replace('{formName}', formTitle)},\n renderer3: () => (\n <>\n
\n\n \n setPanelOpen(submissionID)}\n style={{ display: 'flex', alignItems: 'center' }}\n >\n View Submission\n \n
\n \n )\n })}\n \n
\n ) : null}\n \n {singleSubmission && (\n
\n \n {translationRenderer('[1[{formName}]] [2[{viewSubmission}]] ')({\n renderer1: () => {t(badgeText)},\n renderer2: () => (\n <>\n
\n\n \n setPanelOpen(submissionID)}\n style={{ display: 'flex', alignItems: 'center' }}\n >\n View Task\n \n
\n \n )\n })}\n \n
\n ) : null}\n \n {singleSubmission && (\n
\n \n {translationRenderer('Due to submission edit, the approval flow automatically [1[restarted]].')({\n renderer1: text => {text}\n })}\n
\n );\n};\n\nconst ViewIntegrationDetails = ({ links }) => {\n if (!Array.isArray(links)) {\n return null;\n }\n\n return links.map(l => (\n \n \n {t(integrationErrorText)}\n
\n \n );\n }\n\n return (\n <>\n \n \n
\n {showError && getErrorDetails() && (\n \n {getErrorDetails()}\n
\n )}\n \n \n {translationRenderer('[1[actionTypeName]]')({\n renderer1: () => {details?.actions?.find(e => e.value === action)?.text}\n })}\n
\n \n
\n \n );\n};\n\nIntegrationTriggerEntry.Status.propTypes = {\n ...entryPropTypes\n};\n\nconst TerminatedEntry = {};\nTerminatedEntry.user = () => getTerminate();\nTerminatedEntry.Name = WFCategoryName;\nTerminatedEntry.Status = ({ actionDetails }) => {\n const {\n reasonOfTerminate\n } = actionDetails;\n\n return (\n <>\n \n
\n 1 && 'multiple'].filter(Boolean).join(' ')}>\n
\n \n {t('Flow Terminated.')}\n
\n \n \n {reasonOfTerminate}\n \n
\n \n );\n};\n\nTerminatedEntry.Status.propTypes = {\n ...entryPropTypes\n};\n\nconst TaskEntry = {};\nTaskEntry.propTypes = {\n ...entryPropTypes\n};\n\nconst EmailEntryTypes = {\n reply: ReplyEntry,\n forward: ForwardEntry\n};\n\nconst WorkFlowEntryTypes = {\n task: TaskEntry,\n // assign: AssignEntry,\n reassign: ReAssignEntry,\n escalate: EscalateEntry,\n approve_reject: ApproveRejectEntry,\n sign_document: SignEntry,\n expire: ExpiredEntry,\n cancel: ErrorEntry,\n restart: RestartEntry,\n // complete: CompleteEntry\n mail: MailEntry,\n multiple_approval_mail: MultipleApprovalMail,\n multiple_approve_reject: MultipleApproveReject,\n request_more_info: requestMoreInfoEntry,\n edit_submission: editSubmissionEntry,\n undo_loading: undoLoadingEntry,\n mock_approve_deny: mockApproveDenyEntry,\n restart_edit: restartEditEntry,\n assign_form_notification_mail: AssignFormNotificationEntry,\n sign_document_notification: SignDocumentNotification,\n assign_form_submission: AssignFormSubmissionEntry,\n reminder: ReminderEntry,\n integration_trigger: IntegrationTriggerEntry,\n terminated: TerminatedEntry,\n assign_task_complete: AssignTaskCompleteEntry\n};\n\nconst EntryTypes = {\n ...WorkFlowEntryTypes,\n ...EmailEntryTypes\n};\n\nexport const EntryCategories = {\n workflow: Object.keys(WorkFlowEntryTypes).map(e => e.toUpperCase()),\n email: Object.keys(EmailEntryTypes).map(e => e.toUpperCase()),\n all: Object.keys(EntryTypes).map(e => e.toUpperCase())\n};\n\n// eslint-disable-next-line max-len\nexport const entryFiltererGenerator = (category = 'all') => ({ actionType, actionDetails }) => {\n if (!EntryCategories[category].includes(actionType) || !actionDetails) return false;\n if (actionType === 'MAIL') {\n if (actionDetails?.reason === 'ASSIGN_FORM_NOTIFICATION_MAIL') {\n return true;\n }\n return (actionDetails?.type === 'custom_email' && actionDetails?.to !== '');\n }\n if (actionType === 'MULTIPLE_APPROVE_REJECT' && (actionDetails?.cancelReason === 'TAKEN_OVER' || actionDetails?.cancelReason === 'EXPIRED')) {\n return false;\n }\n return true;\n};\nexport const convertTasks = ({\n properties: { assigneeEmail, assigneeUser: user },\n status,\n id\n}) => {\n const el = {\n id,\n status,\n user,\n actionType: 'TASK',\n actionDetails: {}\n };\n\n el.user = el.user || { email: assigneeEmail };\n\n return el;\n};\nexport default EntryTypes;\n","import { FETCH_SUBMISSIONS_SUCCESS } from '../constants/actions';\nimport type { ActionType, ResultSet } from '../types';\n\nconst defaultResultSet = {\n count: 0,\n limit: 0,\n offset: 0,\n};\n\ntype AppState = {\n embedMode: string,\n fetchingSubmissions: boolean,\n isFormOwner: boolean,\n isReady: boolean,\n printMode: boolean,\n resultSet: ResultSet,\n}\n\nconst INITIAL_STATE = {\n embedMode: window._embedMode,\n fetchingSubmissions: false,\n isFormOwner: window?._presentation?.isFormOwner,\n isReady: window?._presentation?.viewStatus === 'COMPLETED',\n printMode: window._printMode,\n resultSet: (window._tableData && window._tableData.resultSet)\n ? window._tableData.resultSet : defaultResultSet,\n};\n\nexport default (state: AppState = INITIAL_STATE, action: ActionType): AppState => {\n switch (action.type) {\n case FETCH_SUBMISSIONS_SUCCESS: {\n return {\n ...state,\n resultSet: action.payload.resultSet,\n };\n }\n default: {\n return state;\n }\n }\n};\n","import type { Form, Question } from '@jotforminc/types';\nimport type {\n ActionType, ChartData, LinkSettings, Page, PageItem, ReportSettings,\n} from '../types';\nimport sanitizeChartData from '../utils/sanitizeChartData';\n\ntype PresentationState = {\n formID: string,\n title: string,\n chartData: ChartData,\n viewStatus: string,\n isFormOwner: boolean,\n workflowQuestions: Record\n {t('Remove Jotform Branding?')}\n {content}\n
\n );\n};\n\nRemoveBrandingFooter.propTypes = {\n isPaidUser: PropTypes.bool,\n isOwner: PropTypes.bool,\n referrerUrl: PropTypes.string,\n removeBranding: PropTypes.func\n};\n\nRemoveBrandingFooter.defaultProps = {\n isPaidUser: false,\n isOwner: false,\n referrerUrl: '',\n removeBranding: () => { }\n};\n\nexport default withClickOutside(RemoveBrandingFooter);\n","import React, { useEffect, useRef } from 'react';\nimport PropTypes from 'prop-types';\n\nfunction getDisplayName(WrappedComponent) {\n return WrappedComponent.displayName || WrappedComponent.name || 'Component';\n}\n\nfunction withClickOutside(WrappedComponent) {\n function WithClickOutside(props) {\n const {\n exceptionalClasses,\n onClickOutside,\n withClickOutsideWrapperClass,\n ...otherProps\n } = props;\n\n const wrapper = useRef(null);\n\n const handleClickOutside = event => {\n const { classList } = event.target;\n if (\n exceptionalClasses\n && (\n classList.contains(exceptionalClasses)\n || [...classList].some(xClass => exceptionalClasses.includes(xClass))\n || exceptionalClasses.some(item => event.target.closest(`.${item}`))\n )\n ) {\n return;\n }\n\n if (wrapper.current && !wrapper.current.contains(event.target)) {\n onClickOutside(event);\n }\n };\n\n useEffect(() => {\n window.addEventListener('mousedown', handleClickOutside, true);\n return () => {\n window.removeEventListener('mousedown', handleClickOutside, true);\n };\n }, []);\n\n return (\n \n
\n \n {brandingIcon}\n
\n {showAppName && (\n \n {t(appName)}\n
\n )}\n \n
\n \n {!isPassive && showRemove && (\n \n {t(bannerTagLine)}\n
\n \n {t(buttonText)}\n
\n \n \n
\n {headerLineShow === 'on' && (\n \n
\n );\n }\n };\n\n const renderAssigneeInfo = () => {\n if (isAssignee) {\n const link = getPipedLink(selectedPayload.name);\n const assigneeText = getPipedName(selectedPayload.name);\n return (\n \n \n
\n );\n }\n };\n\n return (\n \n
\n );\n};\n\nPieChartTooltip.propTypes = {\n active: PropTypes.bool.isRequired,\n payload: PropTypes.arrayOf(PropTypes.shape({\n dataKey: 'value',\n payload: PropTypes.shape({\n color: PropTypes.string,\n name: PropTypes.string,\n percentage: PropTypes.string,\n value: PropTypes.number,\n checked: PropTypes.bool\n })\n })).isRequired\n};\n\nexport default React.memo(PieChartTooltip);\n","/* eslint-disable complexity */\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { IconHeartFilled, IconStarFilled } from '@jotforminc/svg-icons';\nimport classNames from 'classnames';\nimport {\n getLabelImage,\n getLabelText,\n getColorLight,\n getLabelIsDeleted\n} from '../../chartFunctions';\n\nconst RADIAN = Math.PI / 180;\n\nconst PieLabel = ({\n chartType = 'pie',\n cx = 0,\n cy = 0,\n innerRadius = 0,\n customQuestions = {},\n item: {\n chartFontFamily,\n chartFontSize,\n labelNameShow,\n labelPercentageTotalShow,\n labelResponseValueShow,\n primaryLabelColor,\n secondaryLabelColor\n } = {},\n midAngle = 0,\n name = '',\n outerRadius = 0,\n payload: { color } = {},\n percentage = '0%',\n value = 0\n}) => {\n const { isAssignee, isEmojiSlider, isStarRating } = customQuestions;\n const notExistsLabel = labelNameShow === 'off'\n && labelResponseValueShow === 'off'\n && labelPercentageTotalShow === 'off';\n\n if (notExistsLabel) return null;\n\n const radius = 25 + innerRadius + (outerRadius - innerRadius);\n const x = cx + radius * Math.cos(-midAngle * RADIAN);\n const y = cy + radius * Math.sin(-midAngle * RADIAN);\n\n const multiplier = chartType === 'pie' ? 0.75 : 0.5;\n const insideRadius = innerRadius + (outerRadius - innerRadius) * multiplier;\n const insideX = cx + insideRadius * Math.cos(-midAngle * RADIAN);\n const insideY = cy + insideRadius * Math.sin(-midAngle * RADIAN);\n\n const { starStyle } = isStarRating;\n const IconRating = starStyle === 'Hearts' ? IconHeartFilled : IconStarFilled;\n\n const text = getLabelText(customQuestions, name);\n const image = getLabelImage(customQuestions, name);\n const isDeleted = getLabelIsDeleted(customQuestions, name);\n const isDark = color && getColorLight(color) < 50;\n\n return (\n <>\n {labelNameShow === 'on' && image && (\n \n \n {(isImageChoice || isEmojiSlider) && (\n
\n \n
\n )}\n \n
\n \n {isShowName !== 'off' && !isEmojiSlider && (\n <>\n {getPipedName(selectedPayload.name) && (\n <>\n {isAssignee && renderAssigneeInfo()}\n {isStarRating && (\n
\n \n {renderStars()}\n
\n )}\n {isShowTitle !== 'off' && !isAssignee && !isStarRating && (\n \n {t('Data')}\n
\n )}\n {(!isStarRating && !isSheetbox && !isAssignee && getPipedName(selectedPayload.name)) && (\n \n {getPipedName(selectedPayload.name)}\n
\n )}\n {isSheetbox && renderPieInfo()}\n \n )}\n \n )}\n {isShowResponse !== 'off' && (\n <>\n {isShowTitle !== 'off' && (\n \n {t('Response')}\n
\n )}\n \n {selectedPayload[dataKey]}\n
\n \n )}\n {isShowPercentage !== 'off' && (\n <>\n {isShowTitle !== 'off' && (\n \n {t('Percentage')}\n
\n )}\n \n {percentage}\n
\n \n )}\n \n
\n );\n }\n };\n\n const renderAssigneeInfo = () => {\n if (isAssignee) {\n const link = getPipedLink(selectedPayload.name);\n const assigneeText = getPipedName(selectedPayload.name);\n return (\n \n \n
\n );\n }\n };\n\n return (\n \n
\n );\n};\n\nChartTooltip.propTypes = {\n customPayload: PropTypes.shape({}),\n dataKey: PropTypes.string,\n customQuestions: PropTypes.shape({\n isEmojiSlider: PropTypes.oneOfType([\n PropTypes.arrayOf(PropTypes.string),\n PropTypes.bool\n ]),\n isImageChoice: PropTypes.bool,\n isAssignee: PropTypes.bool,\n isStarRating: PropTypes.oneOfType([\n PropTypes.shape({}),\n PropTypes.bool\n ]),\n isSheetbox: PropTypes.oneOfType([\n PropTypes.shape({}),\n PropTypes.bool\n ])\n }),\n tooltipConfig: PropTypes.shape({\n name: PropTypes.string,\n percentageTotal: PropTypes.string,\n response: PropTypes.string,\n light: PropTypes.string,\n title: PropTypes.string\n })\n};\n\nexport default React.memo(ChartTooltip);\n","import React, { memo } from 'react';\nimport PropTypes from 'prop-types';\nimport { IconHeartFilled, IconStarFilled } from '@jotforminc/svg-icons';\nimport { getLabelImage, getLabelText, getLabelIsDeleted } from '../../chartFunctions';\nimport sheetboxUnselected from '../../../../assets/svg/sheetbox_unselect.svg';\nimport sheetboxSelected from '../../../../assets/svg/sheetbox_select.svg';\n\nconst CustomizedAxisTick = ({\n height = 0,\n customQuestions = {},\n layout = 'horizontal',\n payload = {},\n visibleTicksCount = 0,\n width = 0,\n x = 0,\n y = 0,\n tickStyle = {},\n data = []\n}) => {\n const {\n isAssignee,\n isEmojiSlider,\n isStarRating,\n isSheetbox\n } = customQuestions;\n const isHorizontal = layout === 'horizontal';\n const text = getLabelText(customQuestions, payload.value);\n const image = getLabelImage(customQuestions, payload.value);\n const isDeleted = getLabelIsDeleted(customQuestions, payload.value);\n\n const { starStyle } = isStarRating;\n const IconRating = starStyle === 'Hearts' ? IconHeartFilled : IconStarFilled;\n const IconSheetbox = isSheetbox && data.find(d => d.name === payload.value)?.checked ? sheetboxSelected : sheetboxUnselected;\n\n return (\n \n \n {(isImageChoice || isEmojiSlider) && (\n
\n \n
\n )}\n \n
\n \n {isShowName !== 'off' && !isEmojiSlider && (\n <>\n {getPipedName(selectedPayload.name) && (\n <>\n {isAssignee && renderAssigneeInfo()}\n {isStarRating && (\n
\n \n {renderStars()}\n
\n )}\n {isShowTitle !== 'off' && !isAssignee && !isStarRating && (\n \n {t('Data')}\n
\n )}\n {(!isStarRating && !isSheetbox && !isAssignee && getPipedName(selectedPayload.name)) && (\n \n {getPipedName(selectedPayload.name)}\n
\n )}\n {isSheetbox && renderPieInfo()}\n \n )}\n \n )}\n {isShowResponse !== 'off' && (\n <>\n {isShowTitle !== 'off' && (\n \n {t('Response')}\n
\n )}\n \n {selectedPayload[dataKey]}\n
\n \n )}\n {isShowPercentage !== 'off' && (\n <>\n {isShowTitle !== 'off' && (\n \n {t('Percentage')}\n
\n )}\n \n {percentage}\n
\n \n )}\n \n
\n );\n};\n\nChartTooltipList.propTypes = {\n customPayload: PropTypes.shape({}),\n dataKeys: PropTypes.arrayOf(PropTypes.string),\n customQuestions: PropTypes.shape({\n isEmojiSlider: PropTypes.oneOfType([\n PropTypes.arrayOf(PropTypes.string),\n PropTypes.bool\n ])\n }),\n tooltipConfig: PropTypes.shape({\n name: PropTypes.string,\n percentageTotal: PropTypes.string,\n response: PropTypes.string,\n light: PropTypes.string,\n title: PropTypes.string\n })\n};\n\nexport default ChartTooltipList;\n","import { memo } from 'react';\n\nconst ResponsiveContent = ({ children, width, height }) => {\n return children(width, height);\n};\n\nexport default memo(ResponsiveContent);\n","import React, {\n memo,\n useState,\n useCallback,\n useMemo\n} from 'react';\nimport PropTypes from 'prop-types';\nimport {\n BarChart,\n Bar,\n Cell,\n XAxis,\n YAxis,\n LabelList,\n CartesianGrid,\n ResponsiveContainer,\n Tooltip\n} from 'recharts';\nimport { Resizable } from 're-resizable';\nimport { safeJSONParse } from '@jotforminc/utils';\n\nimport ChartTooltip from '../../ChartTooltip/ChartTooltip';\nimport CustomizedAxisTick from './CustomizedAxisTick';\nimport CustomizedLabel from './CustomizedLabel';\nimport ChartTooltipList from '../../ChartTooltip/ChartTooltipList';\nimport ResponsiveContent from './ResponsiveContent';\nimport { getCustomQuestions } from '../../chartFunctions';\n\nconst barChartMargin = {\n bottom: 10,\n left: 0,\n right: 30,\n top: 20\n};\nconst columnChartMargin = { ...barChartMargin, left: -20 };\n\nconst initialCategoryAxisWidth = 104;\nconst axisDomain = [0, dataMax => Math.max(Math.round(dataMax * 1.2), dataMax + 1)];\nconst radius = {\n horizontal: [4, 4, 0, 0],\n vertical: [0, 4, 4, 0]\n};\n\nconst ChartBar = ({\n chartData: { data, dataKeys } = {},\n customProps = {\n layout: 'vertical'\n },\n isSelected = false,\n item = {},\n onAnEventTrigger = () => {},\n onItemChange = () => {},\n resources: { question, reportTooltip } = {},\n selectedMetric = 'value'\n}) => {\n const {\n chartFontFamily,\n chartFontSize,\n labelPercentageTotalShow,\n labelResponseValueShow,\n primaryLabelColor,\n secondaryLabelColor,\n axisWidth,\n width\n } = item;\n const parsedReportTooltip = useMemo(() => safeJSONParse(reportTooltip), [reportTooltip]);\n const { show: isShowTooltip } = parsedReportTooltip;\n const { layout } = customProps;\n const categoryAxisWidth = parseInt(axisWidth, 10) || initialCategoryAxisWidth;\n const [allowDragging, setAllowDragging] = useState(false);\n const [scale, setScale] = useState(1);\n\n const initialStateTooltip = { index: -1, payload: null };\n const [tooltip, setTooltip] = useState(initialStateTooltip);\n const handleOnMouseEnter = useCallback((payload, index) => {\n setTooltip({ index, payload });\n }, [tooltip]);\n\n const handleOnMouseLeave = useCallback(() => {\n setTooltip(initialStateTooltip);\n }, [tooltip]);\n\n const wrapperStyle = useMemo(() => ({\n visibility: tooltip.index >= 0 ? 'visible' : 'hidden'\n }), [tooltip]);\n\n const customQuestions = getCustomQuestions(question);\n const exactCustomQuestions = {\n ...customQuestions,\n isEmojiSlider: dataKeys.length === 0 && customQuestions.isEmojiSlider\n };\n const CustomTooltip = dataKeys.length > 0 ? ChartTooltipList : ChartTooltip;\n const cartesianProps = {\n stroke: '#DEE0EA',\n [layout === 'horizontal' ? 'vertical' : 'horizontal']: false\n };\n\n const commonBarProps = {\n isAnimationActive: false,\n minPointSize: 3,\n onMouseEnter: handleOnMouseEnter,\n onMouseLeave: handleOnMouseLeave,\n radius: radius[layout]\n };\n\n const commonLabelListProps = {\n content: CustomizedLabel,\n label: {\n labelPercentageTotalShow,\n labelResponseValueShow\n },\n labelStyle: { fill: secondaryLabelColor, fontSize: parseInt(chartFontSize, 10), fontFamily: chartFontFamily },\n layout\n };\n\n const dataKeyForAxis = ({ name }) => ((customQuestions.isImageChoice || customQuestions.isAssignee) ? JSON.stringify(name) : name);\n const tickStyle = useMemo(() => ({\n color: primaryLabelColor,\n fontFamily: chartFontFamily,\n fontSize: parseInt(chartFontSize, 10),\n lineHeight: '20px'\n }), [primaryLabelColor, chartFontFamily, chartFontSize]);\n const customizedAxisTick = (\n \n {getPipedName(name)}\n
\n {dataKeys.map(dataKey => (\n \n \n
\n ))}\n \n
\n \n {isShowName !== 'off' && (\n
\n \n {isShowTitle !== 'off' && (\n
\n )}\n {isShowResponse !== 'off' && (\n \n {t('Data')}\n
\n )}\n \n {isEmojiSlider ? (\n
\n \n {isShowTitle !== 'off' && (\n
\n )}\n {isShowPercentage !== 'off' && (\n \n {t('Response')}\n
\n )}\n \n {`${selectedPayload[dataKey].value}`}\n
\n \n {isShowTitle !== 'off' && (\n
\n )}\n \n {t('Percentage')}\n
\n )}\n \n {selectedPayload[dataKey].percentage}\n
\n \n \n \n {productOptions[dataKey].image && (\n
\n ))}\n \n
\n {Object.keys(productOptions).map(dataKey => (\n \n
\n )}\n \n
\n \n
\n \n {isShowName !== 'off' && (\n <>\n {isShowTitle !== 'off' && (\n
\n \n {t('Data')}\n
\n )}\n \n {dataKey}\n
\n \n )}\n {isShowPercentage !== 'off' && (\n <>\n {isShowTitle !== 'off' && (\n \n {t('Percentage')}\n
\n )}\n \n {getPercentValue((productOptions[dataKey].quantity || 0), totalQuantity)}\n
\n \n )}\n \n {isShowResponse !== 'off' && (\n <>\n {isShowTitle !== 'off' && (\n
\n \n {t('Quantity')}\n
\n )}\n \n {productOptions[dataKey].quantity || 0}\n
\n \n )}\n {isShowAmount !== 'off' && (\n <>\n {isShowTitle !== 'off' && (\n \n {t('Amount')}\n
\n )}\n \n {formatter.format(productOptions[dataKey].amount || 0)}\n
\n \n )}\n \n {`Total ${selectedMetric}:`}\n \n {selectedMetric === 'Quantity' ? totalQuantity : formatter.format(totalAmount)}\n \n
\n \n );\n};\n\nLineChartTooltip.propTypes = {\n payload: PropTypes.arrayOf(PropTypes.shape({\n dataKey: PropTypes.string,\n payload: PropTypes.shape({\n name: PropTypes.string,\n productOptions: PropTypes.shape({})\n })\n })).isRequired,\n active: PropTypes.bool.isRequired\n};\n\nexport default memo(LineChartTooltip);\n","import React, { memo, useMemo } from 'react';\nimport PropTypes from 'prop-types';\nimport { safeJSONParse } from '@jotforminc/utils';\n\nimport {\n CartesianGrid,\n Line,\n LineChart,\n ResponsiveContainer,\n XAxis,\n YAxis,\n Tooltip\n} from 'recharts';\nimport isEmpty from 'lodash/isEmpty';\nimport { getCurrencyFormatter } from '../chartFunctions';\nimport LineChartTooltip from '../ChartTooltip/LineChartTooltip';\n\nconst axisDomain = [0, 'dataMax + 1'];\n\nconst ChartLine = ({\n chartData = {},\n resources: { reportTooltip } = {},\n selectedMetric = 'Quantity'\n}) => {\n const parsedReportTooltip = useMemo(() => safeJSONParse(reportTooltip), [reportTooltip]);\n const { show: isShowTooltip } = parsedReportTooltip;\n const { data } = chartData;\n const { productOptions, ...dataLine } = data[0];\n let currency = '';\n if (!isEmpty(productOptions)) {\n currency = productOptions[Object.keys(productOptions)[0]].currency;\n }\n\n const dataKeys = Object.keys(dataLine).filter(k => k !== 'name' && k !== 'color' && k !== 'isVisible' && k !== 'percentage');\n const yAxisFormatter = useMemo(() => value => {\n return selectedMetric === 'Quantity'\n ? value : getCurrencyFormatter(currency).format(value);\n }, [currency, selectedMetric]);\n\n const commonLineProps = useMemo(() => ({\n activeDot: { r: 8 },\n isAnimationActive: false,\n legendType: 'circle',\n type: 'monotone'\n }), []);\n\n return (\n \n \n {renderImage()}\n
\n \n
\n \n \n );\n};\n\nChartBasic.propTypes = {\n chartData: PropTypes.shape({\n data: PropTypes.arrayOf(PropTypes.shape({\n average: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.number\n ]),\n name: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.number\n ])\n })),\n totalChoice: PropTypes.oneOfType([PropTypes.string, PropTypes.number])\n }),\n item: PropTypes.shape({\n secondaryLabelColor: PropTypes.string,\n primaryLabelColor: PropTypes.string,\n chartFontFamily: PropTypes.string,\n chartFontSize: PropTypes.oneOfType([\n PropTypes.number,\n PropTypes.string\n ])\n }),\n resources: PropTypes.shape({\n form: PropTypes.object,\n question: PropTypes.object\n }),\n selectedMetric: PropTypes.string,\n wrapperMaxWidth: PropTypes.string\n};\n\nexport default memo(ChartBasic);\n","import React, { memo } from 'react';\nimport ChartPie from './Pie';\n\nconst customProps = {\n innerRadius: '50%',\n outerRadius: '80%'\n};\n\nconst ChartDonut = props => {\n return (\n \n
\n \n \n {showAverage ? average : mostWantedPercentage}\n \n
\n \n {t(showAverage ? 'Avg. Response' : 'Percentage')}\n
\n \n
\n \n \n {metricTotal}\n \n
\n \n {responses(total, true)}\n
\n \n \n {t('Data')}\n \n {showResponseColumn && (\n \n {t('Responses')}\n \n )}\n
\n );\n };\n\n if (!data[0]) return null;\n return (\n \n {!isThumbnail ? (\n (\n
\n );\n};\n\nTextGrid.propTypes = {\n chartData: PropTypes.shape({\n data: PropTypes.arrayOf(PropTypes.shape({}))\n }),\n item: PropTypes.shape({\n chartFontFamily: PropTypes.string,\n chartFontSize: PropTypes.oneOfType([\n PropTypes.string, PropTypes.number\n ]),\n height: PropTypes.number,\n responseColumnShow: PropTypes.string,\n secondaryLabelColor: PropTypes.string\n }),\n isThumbnail: PropTypes.bool\n};\n\nexport default React.memo(TextGrid);\n","import TextGrid from './TextGrid';\n\nexport default TextGrid;\n","import React, { memo } from 'react';\nimport ChartBar from './Bar/Bar';\n\nconst customProps = {\n layout: 'horizontal'\n};\n\nconst ChartColumnBar = props => {\n return (\n \n onItemChange({ id: itemID }, { text: newValue })}\n placeholder={isSelected ? 'Click to edit header' : ''}\n onKeyDown={onKeyDown}\n style={customHeaderStyle}\n />\n
\n {responseSummaryShow === 'on' && (\n \n
\n )}\n \n \n
\n \n \n
\n \n
\n \n );\n};\n\nexport default memo(ChartPlaceholder);\n\nChartPlaceholder.propTypes = {\n chartType: PropTypes.string,\n deletedQuestion: PropTypes.bool,\n height: PropTypes.oneOfType([\n PropTypes.number,\n PropTypes.string\n ]),\n isPlaceholder: PropTypes.bool,\n width: PropTypes.oneOfType([\n PropTypes.number,\n PropTypes.string\n ]),\n customHeaderStyle: PropTypes.shape({}),\n isSelected: PropTypes.bool,\n itemID: PropTypes.string,\n text: PropTypes.string,\n onItemChange: PropTypes.func,\n responseCount: PropTypes.string,\n responseSummaryShow: PropTypes.string\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport ChartPlaceholder from './ChartPlaceholder';\n\nconst EmptyChart = ({\n item = {},\n hideSettings = false,\n customHeaderStyle = {},\n isSelected = false,\n text = '',\n onItemChange = f => f\n}) => (\n \n
\n \n \n \n Loading...\n \n \n
\n ) : (\n \n \n {deletedQuestion\n ? 'Question for this chart was deleted'\n : 'No chart data to show'}\n \n \n )}\n \n {exactData.map((dataKey, index) => {\n if (dataKey.average) return null;\n let legendData = dataKeys.length > 0 ? { ...data[0][dataKey], name: dataKey } : dataKey;\n\n if (chartData.productData) {\n const values = chartData.data[0].productOptions[legendData.name];\n legendData = { ...values, name: legendData.name };\n }\n return (\n
\n );\n};\n\nChartLegend.propTypes = {\n chartData: PropTypes.shape({\n data: PropTypes.arrayOf(PropTypes.shape({\n productOptions: PropTypes.shape({})\n })),\n dataKeys: PropTypes.arrayOf(PropTypes.string),\n total: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n productData: PropTypes.shape({})\n }),\n chartType: PropTypes.string,\n contentStyle: PropTypes.shape({\n primaryLabelColor: PropTypes.string\n }),\n item: PropTypes.shape({\n roundValues: PropTypes.string\n }),\n question: PropTypes.shape({\n emojiCount: PropTypes.string,\n inputType: PropTypes.string,\n type: PropTypes.string,\n stars: PropTypes.string,\n starStyle: PropTypes.string\n })\n};\n\nexport default memo(ChartLegend);\n","import React, { memo } from 'react';\nimport PropTypes from 'prop-types';\nimport { t } from '@jotforminc/translation';\nimport { IconHeartFilled, IconStarFilled } from '@jotforminc/svg-icons';\n\nimport {\n getPipedLink,\n getPipedName,\n getPipedIsDeleted,\n getCurrencyFormatter,\n getCustomQuestions\n} from './chartFunctions';\nimport { emoBase } from './chartConstants';\nimport sheetboxUnselected from '../../assets/svg/sheetbox_unselect.svg';\nimport sheetboxSelected from '../../assets/svg/sheetbox_select.svg';\n\nconst ChartDataList = ({\n chartData = {},\n question = {},\n // contentStyle,\n selectedMetric = 'value',\n customLabels = {}\n}) => {\n const isProductList = chartData.productData;\n const { data: productData } = isProductList ? chartData.productData : chartData;\n const data = productData.map(pData => ({ ...pData, name: customLabels[pData.name] || pData.name }));\n const { productOptions } = (chartData.data && chartData.data[0]) || {};\n const customQuestions = getCustomQuestions(question);\n // const titleStyle = { color: contentStyle.secondaryLabelColor };\n // const listItemStyle = { color: contentStyle.primaryLabelColor };\n const getEmoji = value => (\n \n
\n \n );\n};\n\nChartDataList.propTypes = {\n chartData: PropTypes.shape({\n data: PropTypes.arrayOf(PropTypes.shape({\n productOptions: PropTypes.shape({})\n })),\n productData: PropTypes.PropTypes.shape({})\n }),\n contentStyle: PropTypes.shape({\n primaryLabelColor: PropTypes.string,\n secondaryLabelColor: PropTypes.string\n }),\n question: PropTypes.shape({\n starStyle: PropTypes.string,\n type: PropTypes.string,\n currency: PropTypes.string\n }),\n selectedMetric: PropTypes.string,\n customLabels: PropTypes.shape({})\n};\n\nexport default memo(ChartDataList);\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport ChartLegend from './ChartLegend/ChartLegend';\nimport ChartDataList from './ChartDataList';\n\nconst InfoComponentContainer = ({ type = 'noGrid', necessaryProps }) => {\n switch (type) {\n case 'legend': return (\n \n \n
\n {t(isProductList ? 'Product' : 'Data')}
\n \n {isProductList ? (\n <>\n %\n \n {`${t('Quantity')}${selectedMetric === 'Quantity' ? ' *' : ''}`}\n \n \n {`${t('Amount')}${selectedMetric === 'Amount' ? ' *' : ''}`}\n \n \n ) : (\n <>\n {selectedMetric === 'value' ? t('Response') : selectedMetric}\n %\n \n )}\n \n {data.map((d, index) => {\n if (d.average || (isProductList && !productOptions[d.name])) return null;\n const key = `${d.name}_${index}`;\n return (\n \n \n {renderBullet(d, customQuestions)}\n \n {isProductList && (\n \n {productOptions[d.name].percentage}\n \n )}\n \n {isProductList ? d.Quantity : d[selectedMetric]}\n \n \n {isProductList ? formatter.format(d.Amount) : d.percentage}\n \n
\n );\n })}\n Chart component not found
;\n }\n\n if (isProbablyLoading) {\n return (\n {`${columnIndex}. Column`}
;\n\nDefaultHeaderRenderer.propTypes = {\n columnIndex: PropTypes.number\n};\n\nexport default DefaultHeaderRenderer;\n","/* global Element */\nimport React, { memo, forwardRef, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport DefaultHeaderRenderer from './DefaultHeaderRenderer';\n\nconst GridHeader = ({\n columns = [],\n HeaderItemRenderer = null,\n innerRef = { current: null },\n onScroll = undefined,\n onResizeColumnWidth = f => f,\n isSelected = false,\n frozenQuestions = []\n}) => {\n useEffect(() => {\n if (onScroll) { // refactor it\n const element = innerRef.current;\n element.addEventListener('scroll', onScroll, { passive: true });\n return () => {\n element.removeEventListener('scroll', onScroll, { passive: true });\n };\n }\n }, [innerRef, onScroll]);\n\n const HeaderItem = HeaderItemRenderer || DefaultHeaderRenderer;\n\n return (\n \n {columns.map((column, columnIndex) => (\n
\n );\n};\n\nconst MemoizedGridHeader = memo(GridHeader);\n\nexport default forwardRef((props, ref) => (\n \n
\n );\n};\n\nDefaultFixedCellRenderer.propTypes = {\n rowIndex: PropTypes.number,\n style: PropTypes.shape({})\n};\n\nexport default DefaultFixedCellRenderer;\n","import React from 'react';\n\nconst DefaultCellRenderer = () => ;\n\nexport default DefaultCellRenderer;\n","import React, {\n memo, useRef, useMemo, useEffect, useCallback\n} from 'react';\nimport PropTypes from 'prop-types';\nimport Scrollbar from 'react-smooth-scrollbar';\nimport { VariableSizeGrid as Grid } from 'react-window';\nimport GridHeader from './GridHeader';\nimport DefaultFixedCellRenderer from './DefaultFixedCellRenderer';\nimport DefaultCellRenderer from './DefaultCellRenderer';\nimport '../../styles/_jfTableGrid.scss';\n\nconst rowHeight = () => 41; // Grid cell content height => 40px\n\nconst gridHeaderHeight = () => 38; // Grid header item height => 37px\n\nconst TableGrid = ({\n CellRenderer = null,\n columns = [],\n fixedItemData = {},\n FixedCellRenderer = null,\n fixedColumns = [],\n gridHeight = 0,\n gridWidth = 0,\n HeaderItemRenderer = null,\n itemData = {},\n rowCount = 0,\n onResizeColumnWidth = f => f,\n columnHash,\n resizedColumn = {},\n isSelected = false,\n frozenQuestions = []\n}) => {\n const scrollbar = useRef();\n const gridRef = useRef();\n const gridHeaderRef = useRef();\n\n const scrollbarLeft = useRef();\n const gridLeftRef = useRef();\n\n const FixedCell = FixedCellRenderer || DefaultFixedCellRenderer;\n const Cell = (columns.length > 0 ? CellRenderer : DefaultCellRenderer) || DefaultCellRenderer;\n\n // On Grid Scroll -> sync scroll position with grid header\n const onScroll = useCallback(e => {\n const { x, y } = e.offset;\n if (gridRef.current) {\n gridRef.current.scrollTo({\n scrollLeft: x,\n scrollTop: y\n });\n }\n if (gridLeftRef.current) {\n gridLeftRef.current.scrollTo({\n scrollTop: y\n });\n }\n scrollbar.current.scrollbar.setPosition(x, y, {\n withoutCallbacks: true\n });\n scrollbarLeft.current.scrollbar.setPosition(0, y, {\n withoutCallbacks: true\n });\n if (gridHeaderRef.current && e.source !== 'header') {\n gridHeaderRef.current.scrollTo(x, y);\n }\n }, []);\n\n useEffect(() => {\n const index = resizedColumn.qid ? resizedColumn.index : 0;\n gridRef.current.resetAfterColumnIndex(index);\n gridLeftRef.current.resetAfterColumnIndex(index);\n }, [resizedColumn, columnHash]);\n\n // On Grid Header Scroll -> sync scroll position with grid\n const onGridHeaderScroll = useCallback(e => {\n const { scrollLeft } = e.target;\n onScroll({\n offset: {\n x: scrollLeft\n },\n source: 'header'\n });\n }, [onScroll]);\n\n // On Left Grid Scroll\n const onScrollLeft = useCallback(e => {\n const { y } = e.offset;\n scrollbarLeft.current.scrollbar.setPosition(0, y);\n scrollbar.current.scrollbar.setPosition(scrollbar.current.scrollbar.scrollLeft, y);\n }, []);\n\n const columnWidth = useCallback(columnIndex => (columns.length === 0 ? 200 : parseInt(columns[columnIndex].width, 10) || 200), [columns]);\n const fixedColumnWidth = useCallback(columnIndex => fixedColumns[columnIndex].width || 200, [fixedColumns]);\n\n const gridColumnHeight = ((rowCount * rowHeight()) + gridHeaderHeight());\n\n const leftPaneWidth = useMemo(\n () => fixedColumns.reduce((width, _, columnIndex) => width + fixedColumnWidth(columnIndex), 0),\n [fixedColumns, fixedColumnWidth]\n );\n\n const gridStyle = useMemo(() => ({\n left: leftPaneWidth,\n height: '100%',\n width: `calc(100% - ${leftPaneWidth}px)`\n }), [leftPaneWidth]);\n\n const freezeLineStyle = useMemo(() => ({ left: leftPaneWidth, height: gridColumnHeight }), [leftPaneWidth, gridColumnHeight]);\n\n return (\n <>\n \n {rowIndex + 1}\n
\n \n
\n \n \n \n {FixedCell}\n \n \n \n {\n e.preventDefault();\n e.stopPropagation();\n }}\n >\n \n {Cell}\n \n \n
\n {fixedColumns.length > 1 && (\n \n
\n {\n isFreezePin && (\n \n {qid && (\n \n {svg}\n \n )}\n
\n \n \n {text}\n
\n \n
\n )\n }\n \n );\n\n if (!isSelected) {\n return (\n }\n