\n {TopBarResponsive ? (\n
\n ) : (\n <>\n \n {\n onCloseModal();\n forceClose();\n }}\n />\n ) : (\n {\n onCloseModal();\n forceClose();\n }}\n className={cx(\"mobile_quit-button\")}\n title=\"Quit Survey\"\n >\n QUIT SURVEY
\n )}\n \n
\n {isTablet ? (\n \n
\n \n {step !== 0 && step !== endSurveySlideNumber && (\n \n {step}\n
\n )}\n \n {surveyInstructions}\n
\n )}\n\n You can start the survey by clicking the NEXT Button.\n
\n \n )}\n {step !== 0 && step !== endSurveySlideNumber && questions[index] && (\n\n \n \n \n
\n {getQuestionText()}
\n {questions[index].hasLink ? (\n \n {/*
*/}\n Please click on End Survey to store your results.{\" \"}\n
\n
\n\n End Survey\n \n
\n )}\n \n \n {/* OPTIONS */}\n {shouldRenderOptions() && (\n */}\n Please click on End Survey to store your results.{\" \"}\n
\n
\n
\n {questions[index] && getComponentByQuestionType()}\n
\n )}\n \n {/* \n\n {surveyType && (\n \n Read the Question aloud\n \n )}\n \n
\n {questions[index] &&\n questions[index].clientLink &&\n questions[index].clientLink.length > 0 ? (\n \n {questions[index] && questions[index].description ? (\n \n {questions[index].description}\n \n ) : null}\n {surveyType &&\n questions[index - 1] &&\n questions[index - 1].clientLink &&\n questions[index - 1].clientLink.length > 0 ? (\n
\n (The previous link was{\" \"}\n
\n \n
\n \n \n {step !== 0 && (\n \n
\n )}\n {step !== endSurveySlideNumber && (\n \n \n {label}\n
\n )}\n {play && \n \n
\n {label && (\n \n \n {label}\n
\n )}\n {play && \n \n
\n {label && (\n \n setZoom(true)}\n />\n {label && setZoom(false)}\n allowRotate={false}\n showTitle={false}\n doubleClickZoom={2}\n />\n )\n /* setZoom(false)} /> */\n }\n
\n );\n};\n\nexport default Thumbnail;\n","import React, { useState } from \"react\";\nimport { Modal } from \"antd\";\nimport \"./image-thumbnail.css\";\nimport { CloseCircleOutlined } from \"@ant-design/icons\";\nimport Lightbox from \"react-awesome-lightbox\";\nimport \"react-awesome-lightbox/build/style.css\";\n\nexport const ImageModal = ({ onCancel, imgUrl }) => {\n return (\n {label}
}\n {\n zoom && (\n \n setZoom(true)}\n />\n {label && setZoom(false)}\n allowRotate={false}\n showTitle={false}\n doubleClickZoom={2}\n />\n )\n /* setZoom(false)} /> */\n }\n
\n );\n};\n\nexport default Thumbnail;\n","import {\n questionTypes,\n specialTypes,\n typeRequired,\n} from \"../constants/questions\";\n\nexport const isTypeRequired = (type) => {\n return typeRequired.includes(type);\n};\n\nexport const isAnswerEmpty = (type, answer) => {\n if (answer && !specialTypes.includes(type)) {\n return answer.length === 0;\n }\n let isEmpty = false;\n switch (type) {\n case questionTypes.TEXT:\n return answer.length === 0 || answer[0] === \"\";\n case questionTypes.IMAGE_COMMENT:\n return answer.length === 0 || answer[0] === \"\";\n case questionTypes.VIDEO_COMMENT:\n return answer.length === 0 || answer[0] === \"\";\n case questionTypes.IMAGE_STARRATINGCHOICE:\n Object.keys(answer[0]).forEach((el) => {\n if (answer[0][el] === 0) {\n isEmpty = true;\n return;\n }\n });\n return isEmpty;\n case questionTypes.VIDEO_STARRATINGCHOICE:\n Object.keys(answer[0]).forEach((el) => {\n if (answer[0][el] === 0) {\n isEmpty = true;\n return;\n }\n });\n return isEmpty;\n default:\n return false;\n }\n};\n\nexport const getQuestionText = ({ type, text, options }) => {\n switch (type) {\n case questionTypes.NPS:\n const { npsOption } = options;\n return `How likely is it that you would recommend ${npsOption} to a friend or collegue?`;\n default:\n return text;\n }\n};\n\nexport const reorder = (list, startIndex, endIndex) => {\n const result = Array.from(list);\n const [removed] = result.splice(startIndex, 1);\n result.splice(endIndex, 0, removed);\n\n return result;\n};\n","import { createStore, applyMiddleware, compose } from \"redux\";\nimport { generateReducers } from \"automate-redux\";\nimport thunk from \"redux-thunk\";\n\n// Initial state of redux\nconst initialState = {\n pendingRequests: 0,\n user: {\n profileQuestions: [],\n },\n admin: {},\n client: {\n surveys: [],\n openModToken: ''\n },\n};\n\n// Generate reducers with the initial state and pass it to the redux store\nconst composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;\nexport default createStore(\n generateReducers(initialState),\n composeEnhancers(applyMiddleware(thunk))\n);\n","// extracted by mini-css-extract-plugin\nmodule.exports = {\"survey-container\":\"survey_survey-container__mHARr\",\"user-video-screen\":\"survey_user-video-screen__3m9XQ\",\"linkCard\":\"survey_linkCard__xYp8S\",\"linkButton\":\"survey_linkButton__36IjN\",\"title\":\"survey_title__1TinF\",\"flex-end\":\"survey_flex-end__3pMUT\",\"nav-button\":\"survey_nav-button__3cUnA\",\"center\":\"survey_center__14bQ-\",\"end_center\":\"survey_end_center__1iIlV\",\"numberCircle\":\"survey_numberCircle__2Bp_h\",\"answerBox\":\"survey_answerBox__10gbg\",\"quit-button\":\"survey_quit-button__3oA2u\",\"logo\":\"survey_logo__1EJNA\",\"mobile_topbar\":\"survey_mobile_topbar__3Hveq\",\"mobile_quit-button\":\"survey_mobile_quit-button__1HDar\",\"bottom-buttons\":\"survey_bottom-buttons__1bZM4\",\"bottom-bar\":\"survey_bottom-bar__3zayl\",\"bottom-wrapper\":\"survey_bottom-wrapper__2ULDB\",\"question-box\":\"survey_question-box__3bobq\",\"question-box-1\":\"survey_question-box-1__2gWKZ\",\"options-box\":\"survey_options-box__1oFpT\",\"mobile_logo\":\"survey_mobile_logo__1Pcat\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"survey-container\":\"survey_survey-container__2vovA\",\"user-video-screen\":\"survey_user-video-screen__3vgIv\",\"linkCard\":\"survey_linkCard__2Ymws\",\"linkButton\":\"survey_linkButton__2dO6W\",\"title\":\"survey_title__37Kpg\",\"flex-end\":\"survey_flex-end__31k9h\",\"nav-button\":\"survey_nav-button__1AeNl\",\"center\":\"survey_center__3FBiY\",\"end_center\":\"survey_end_center__1DS5d\",\"numberCircle\":\"survey_numberCircle__LLqB5\",\"answerBox\":\"survey_answerBox__1WskY\",\"quit-button\":\"survey_quit-button__2V8s9\",\"logo\":\"survey_logo__fjwbj\",\"mobile_topbar\":\"survey_mobile_topbar__1QP-8\",\"mobile_quit-button\":\"survey_mobile_quit-button__jwHjB\",\"bottom-buttons\":\"survey_bottom-buttons__14sIy\",\"bottom-bar\":\"survey_bottom-bar__3zwv0\",\"bottom-wrapper\":\"survey_bottom-wrapper__3qDHL\",\"question-box\":\"survey_question-box__2VBht\",\"question-box-1\":\"survey_question-box-1__2UVqk\",\"options-box\":\"survey_options-box__3TNBs\",\"mobile_logo\":\"survey_mobile_logo__aPS5H\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"button\":\"criteria_button__2_SHv\",\"selected\":\"criteria_selected__27HmW\",\"option-button\":\"criteria_option-button__3ubW8\",\"button-icon\":\"criteria_button-icon__SoZE3\",\"option-button-icon\":\"criteria_option-button-icon__2oMeG\",\"container\":\"criteria_container__3MUfd\",\"question-box\":\"criteria_question-box__552ah\",\"lb-container\":\"criteria_lb-container__3V5Rb\",\"db-text\":\"criteria_db-text__VkXyz\",\"grid-container\":\"criteria_grid-container__3Ne7L\",\"email-tag\":\"criteria_email-tag__2oCxW\",\"bold-text\":\"criteria_bold-text__nQwqD\",\"add-question-button\":\"criteria_add-question-button__1p-51\",\"emails\":\"criteria_emails__3AcFN\",\"add-question-icon\":\"criteria_add-question-icon__25t3q\",\"grey-question-button\":\"criteria_grey-question-button__2eVm7\",\"modal-container\":\"criteria_modal-container__cOC8k\",\"customModal\":\"criteria_customModal__2sQGh\",\"typography\":\"criteria_typography__1ozjv\",\"additional-screening-question-button\":\"criteria_additional-screening-question-button__3ut9X\",\"import-type-button\":\"criteria_import-type-button__3Pl1G\",\"user-email-input\":\"criteria_user-email-input__-oLWB\"};","module.exports = __webpack_public_path__ + \"static/media/robot-large.3164977a.png\";","module.exports = __webpack_public_path__ + \"static/media/footer_wave.365d9ebc.png\";","// extracted by mini-css-extract-plugin\nmodule.exports = {\"h5\":\"new-survey-styles_h5__28sDF\",\"next-button\":\"new-survey-styles_next-button__1kxDt\"};","module.exports = __webpack_public_path__ + \"static/media/user-login-bg.6080ee9a.png\";","module.exports = \"data:image/png;base64,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\"","module.exports = \"data:image/png;base64,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\"","module.exports = \"data:image/png;base64,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\"","module.exports = \"data:image/png;base64,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\"","module.exports = \"data:image/png;base64,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\"","module.exports = \"data:image/png;base64,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\"","module.exports = \"data:image/png;base64,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\"","import React, { useEffect, useState } from \"react\";\nimport styles from \"./survey.module.css\";\nimport c from \"classnames/bind\";\nimport {\n LeftOutlined,\n LogoutOutlined,\n RightOutlined,\n LinkOutlined,\n} from \"@ant-design/icons\";\nimport { RemoveScrollBar } from \"react-remove-scroll-bar\";\nimport logo from \"../../../../assets/logo.png\";\nimport { Button, message, Card, Modal as AntdModal } from \"antd\";\nimport Modal from \"react-modal\";\nimport { useMediaQuery } from \"react-responsive\";\nimport {\n isTypeRequired,\n isAnswerEmpty,\n getQuestionText,\n} from \"../../utils/questionUtils\";\nimport { useVideoRef } from \"../../hooks/qualSurvey/useVideoRef\";\nimport { surveyTypes } from \"../../constants/constants\";\nimport { notify } from \"../../../../utils\";\nimport { getComponentByQuestionType } from \"./questions/Index\";\nimport { getRange } from \"../../utils/utils\";\nimport {\n branchingActions,\n branchingConditions,\n} from \"../../constants/branching\";\nimport { getRoleByToken } from \"../../../../utils\";\n\nconst modalStyles = {\n content: {\n top: \"0\",\n left: \"0\",\n width: \"100vw\",\n height: \"100vh\",\n border: 0,\n padding: 0,\n borderRadius: 0,\n },\n};\n\nconst cx = c.bind(styles);\n\nlet answers = [];\nlet hiddenQuestions = [];\n\nconst Survey = ({\n surveyType,\n surveyAccess,\n questions = [],\n rules = [],\n isOpen,\n onClose,\n onEndSurvey = () => {},\n onDisqualification = () => {},\n tryOwnForm = false,\n brandName = \"\",\n brandLogo = \"\",\n surveyInstructions = \"\",\n showPermDeniedPage = false\n}) => {\n // Hooks\n const TopBarResponsive = useMediaQuery({ query: \"(max-width: 960px)\" });\n const isTablet = useMediaQuery({ query: \"(max-width: 800px)\" });\n const [step, setStep] = useState(0);\n const [isDisqualified, setIsDisqualified] = useState(false);\n const [videoRef, getVideo, stopVideo] = useVideoRef();\n const [tempAnswers, setTempAnswers] = useState([]);\n const [showThanksPage, setShowThanksPage] = useState(false);\n const [role, setRole] = useState(\n getRoleByToken(localStorage.getItem(\"token\"))\n );\n // eslint-disable-next-line\n useEffect(() => {\n if (role !== getRoleByToken(localStorage.getItem(\"token\"))) {\n setRole(getRoleByToken(localStorage.getItem(\"token\")));\n }\n });\n\n useEffect(() => {\n setTempAnswers(answers);\n console.log(\"updatedAnswerS\", answers);\n }, [answers]);\n\n useEffect(() => {\n if (!(surveyType === surveyTypes.QUANTITATIVE) && !tryOwnForm && isOpen) {\n getVideo();\n }\n }, [videoRef]);\n\n useEffect(() => {\n // Populate answers with empty array\n [...Array(questions.length).keys()].map((i) => (answers[i] = []));\n }, []);\n\n // Derived state\n const index = step - 1;\n const totalQuestions = questions.length;\n const endSurveySlideNumber = questions.length + 1;\n const isQuestionHidden = hiddenQuestions.includes(index);\n const verifyRuleConditions = (conditions) => {\n let result = \"true&&\";\n\n for (const [key, item] of Object.entries(conditions)) {\n const lastElement = key == conditions.length - 1;\n const op = lastElement ? \"\" : item.logicalOr ? \"||\" : \"&&\";\n\n switch (item.condition) {\n case branchingConditions.CONTAINS: {\n const cond = answers[item.index].includes(item.choices[0]);\n result += cond.toString();\n result = eval(result).toString() + op;\n break;\n }\n\n case branchingConditions.DOES_NOT_CONTAIN: {\n const cond = !answers[item.index].includes(item.choices[0]);\n result += cond.toString();\n result = eval(result).toString() + op;\n break;\n }\n\n case branchingConditions.CONTAINS_ONE_OF: {\n const cond = answers[item.index].some((x) =>\n item.choices.includes(x)\n );\n result += cond.toString();\n result = eval(result).toString() + op;\n break;\n }\n\n case branchingConditions.DOES_NOT_CONTAIN_ANY_OF: {\n const cond = !item.choices.every((x) =>\n answers[item.index].includes(x)\n );\n result += cond.toString();\n result = eval(result).toString() + op;\n break;\n }\n\n case branchingConditions.CONTAINS_ALL_OF: {\n const cond = item.choices.every((x) =>\n answers[item.index].includes(x)\n );\n result += cond.toString();\n result = eval(result).toString() + op;\n break;\n }\n\n case branchingConditions.DOES_NOT_CONTAIN_ALL_OF: {\n const cond = !item.choices.some((x) =>\n answers[item.index].includes(x)\n );\n result += cond.toString();\n result = eval(result).toString() + op;\n break;\n }\n\n case branchingConditions.IS_EXACTLY: {\n const cond =\n JSON.stringify(item.choices) ===\n JSON.stringify(answers[item.index]);\n result += cond.toString();\n result = eval(result).toString() + op;\n break;\n }\n\n case branchingConditions.IS_NOT: {\n const cond =\n JSON.stringify(item.choices) !==\n JSON.stringify(answers[item.index]);\n result += cond.toString();\n result = eval(result).toString() + op;\n break;\n }\n\n case branchingConditions.IS_FROM_TO: {\n const cond =\n item.from <= answers[item.index][0] &&\n answers[item.index][0] <= item.to;\n result += cond.toString();\n result = eval(result).toString() + op;\n break;\n }\n\n case branchingConditions.RANKING: {\n const { type } = questions[item.index];\n let cond = false;\n if (answers[item.index].length !== 0) {\n if (type === \"ranking\") {\n cond = answers[item.index][item.rank - 1].label === item.label;\n } else if (type === \"imageRanking\") {\n cond =\n answers[item.index][item.rank - 1].imageLabel === item.label;\n } else if (type === \"videoRanking\") {\n cond =\n answers[item.index][item.rank - 1].videoLabel === item.label;\n }\n }\n result += cond.toString();\n result = eval(result).toString() + op;\n break;\n }\n\n case branchingConditions.ASSOCIATION: {\n const { type } = questions[item.index];\n let cond = false;\n answers[item.index].length !== 0 &&\n answers[item.index].forEach((x, idx) => {\n if (\n type === \"association\" &&\n x.label === item.label &&\n x.association === item.association\n ) {\n cond = true;\n return;\n }\n\n if (type === \"imageAssociation\" || type === \"videoAssociation\") {\n const num = parseInt(item.label.substring(6)) - 1;\n if (num == idx && x.association === item.association) {\n cond = true;\n return;\n }\n }\n });\n result += cond.toString();\n result = eval(result).toString() + op;\n break;\n }\n\n case branchingConditions.IMAGE_VIDEO_RATINGS: {\n const ans =\n answers[item.index].length !== 0 &&\n answers[item.index][0][item.label];\n const cond = item.from <= ans && ans <= item.to;\n result += cond.toString();\n result = eval(result).toString() + op;\n break;\n }\n\n default:\n break;\n }\n }\n\n return result === \"true\";\n };\n\n const executeRuleActions = (actions) => {\n // Set step always one less than the expected step.\n for (const item of actions) {\n switch (item.name) {\n // skip -> 9\n // current -> 2\n // hide -> 3, 4, 5, 6, 7, 8\n case branchingActions.SKIP_TO_QUESTION: {\n const range = getRange(index + 1, item.question - 1);\n hiddenQuestions = hiddenQuestions.concat(range);\n break;\n }\n\n case branchingActions.END_SURVEY: {\n setStep(questions.length);\n const range = getRange(index + 1, questions.length - 1);\n hiddenQuestions = hiddenQuestions.concat(range);\n break;\n }\n\n case branchingActions.DISQUALIFY_RESPONDENT: {\n setStep(questions.length);\n setIsDisqualified(true);\n const range = getRange(index + 1, questions.length - 1);\n hiddenQuestions = hiddenQuestions.concat(range);\n break;\n }\n\n case branchingActions.HIDE_QUESTION: {\n hiddenQuestions = hiddenQuestions.concat([item.question]);\n break;\n }\n\n case branchingActions.INVALIDATE_QUESTION: {\n answers[item.question] = [];\n if (item.question > index) {\n hiddenQuestions = hiddenQuestions.concat([item.question]);\n }\n break;\n }\n\n default:\n break;\n }\n }\n };\n\n const performBranchingLogic = () => {\n let results = [];\n for (const rl of rules) {\n const maxIndex = rl.questions.reduce(\n (prev, curr) => Math.max(prev, curr.index),\n 0\n );\n if (maxIndex === index) {\n results.push({\n verified: verifyRuleConditions(rl.questions),\n actions: rl.actions,\n });\n }\n }\n\n // false conditions must be executed first\n results.sort((a, b) => {\n if (Number(a.verified) < Number(b.verified)) {\n return -1;\n }\n if (Number(a.verified) > Number(b.verified)) {\n return 1;\n }\n return 0;\n });\n\n // execute actions\n for (let x of results) {\n if (x.verified) {\n executeRuleActions(x.actions);\n break;\n } else {\n x.actions.forEach((el) => {\n if (\n el.name === branchingActions.HIDE_QUESTION ||\n branchingActions.INVALIDATE_QUESTION\n ) {\n hiddenQuestions = hiddenQuestions.filter(\n (val) => el.question !== val\n );\n }\n\n if (el.name === branchingActions.SKIP_TO_QUESTION) {\n const range = getRange(index + 1, el.question - 1);\n hiddenQuestions = hiddenQuestions.filter(\n (val) => !range.includes(val)\n );\n }\n\n if (\n el.name === branchingActions.END_SURVEY ||\n el.name === branchingActions.DISQUALIFY_RESPONDENT\n ) {\n const range = getRange(index + 1, questions.length - 1);\n hiddenQuestions = hiddenQuestions.filter(\n (val) => !range.includes(val)\n );\n }\n });\n }\n }\n };\n\n // Handlers\n const incrementStep = () => {\n if (\n step !== 0 &&\n !isQuestionHidden &&\n isTypeRequired(questions[index].type) &&\n isAnswerEmpty(questions[index].type, answers[index])\n ) {\n message.error(\"Please answer this question first!\");\n return;\n }\n\n if (rules?.length !== 0) {\n performBranchingLogic();\n }\n\n setStep((prevStep) => {\n while (true) {\n if (hiddenQuestions.includes(prevStep++)) {\n continue;\n }\n return prevStep;\n }\n });\n };\n\n const decrementStep = () => {\n setStep((prevStep) => {\n while (true) {\n if (hiddenQuestions.includes(--prevStep - 1)) {\n continue;\n }\n return prevStep;\n }\n });\n };\n\n const onChangeAnswer = (values) => {\n answers[index] = Array.isArray(values) ? values : [values];\n console.log(\"newAnswers\", answers);\n };\n\n const updateAnswer = (answer) => {\n answers[index] = answer;\n console.log(\"updatedAnswer\", answer);\n };\n\n const endSurvey = async () => {\n if (!(surveyType === surveyTypes.QUANTITATIVE) && !tryOwnForm && isOpen) {\n stopVideo()\n }\n if (isDisqualified) {\n notify(\n \"info\",\n \"Info\",\n \"You have been disqualifed. Survey is now removed.\"\n );\n onDisqualification();\n } else {\n console.log(\"final answers array:\", answers);\n onEndSurvey([...answers]);\n }\n if (!surveyAccess) resetModal();\n else showThankYouPage();\n };\n\n const resetModal = () => {\n answers = [];\n hiddenQuestions = [];\n setStep(0);\n };\n\n const showThankYouPage = () => {\n setStep(endSurveySlideNumber);\n setShowThanksPage(true);\n };\n\n const onCloseModal = () => {\n resetModal();\n onClose();\n };\n\n const shouldRenderOptions = () => {\n if (step === 0 || step === endSurveySlideNumber) {\n return false;\n }\n\n if (\n step > 0 &&\n questions[index] &&\n questions[index].type === \"questionInstruction\"\n ) {\n return false;\n }\n\n return true;\n };\n\n console.log(\"questions12345\", answers);\n\n return (\n {label}
}\n {\n zoom && (\n \n {TopBarResponsive ? (\n
\n ) : (\n <>\n \n
\n )}\n \n
\n {(!surveyAccess || role === \"user\") &&\n window.location.pathname.includes(\"/user\") && (\n \n {isTablet ? (\n {\n onCloseModal();\n }}\n />\n ) : (\n {\n onCloseModal();\n }}\n className={cx(\"mobile_quit-button\")}\n title=\"Quit Survey\"\n >\n QUIT SURVEY
\n )}\n \n
\n {(!surveyAccess || role === \"user\") &&\n window.location.pathname.includes(\"/user\") && (\n \n {\n onCloseModal();\n }}\n className={cx(\"quit-button\")}\n title=\"Quit Survey\"\n >\n QUIT SURVEY
\n \n )}\n \n )}\n \n {step !== 0 && step !== endSurveySlideNumber && (\n \n {step}\n
\n )}\n \n {surveyInstructions}\n
\n )}\n\n You can start the survey by clicking the NEXT Button.\n
\n \n )}\n {step !== 0 && step !== endSurveySlideNumber && questions[index] && (\n\n \n \n \n
\n {getQuestionText(questions[index])}
\n {questions[index].hasLink ? (\n \n {(() => {\n switch (true) {\n case step === endSurveySlideNumber && !showThanksPage:\n {\n return (\n
\n \n \n {/* OPTIONS */}\n {shouldRenderOptions() && (\n \n {/*
*/}\n \n Please click on End Survey to store your results.\n {\" \"}\n
\n
\n\n End Survey\n \n
\n );\n }\n break;\n\n case step === endSurveySlideNumber && showThanksPage && window.location.pathname.includes('attemptSurvey'):\n {\n return (\n */}\n \n Please click on End Survey to store your results.\n {\" \"}\n
\n
\n
\n {/*
*/}\n Thank you for filling the survey
\n
\n
\n );\n }\n break;\n }\n })()}\n */}\n Thank you for filling the survey
\n
\n
\n {questions[index] &&\n getComponentByQuestionType(\n questions[index],\n answers[index],\n index,\n onChangeAnswer,\n updateAnswer\n )}\n
\n )}\n \n \n \n
\n \n \n {step !== 0 && !showThanksPage && (\n \n
\n )}\n {step !== endSurveySlideNumber && (\n \n onChange(val)}\n className=\"\"\n />\n
\n );\n};\n\nexport default StarRating;\n","import React, { useEffect } from \"react\";\nimport { Slider } from \"antd\";\nimport \"./slider.css\";\nimport { useMediaQuery } from \"react-responsive\";\n\nconst SliderType = ({ key, options, onChange = () => {}, value }) => {\n const isTabletOrMobile = useMediaQuery({ query: \"(max-width: 900px)\" });\n console.log(options.sliderEndLabel, value);\n const marks = {\n [options.sliderMin]: {\n style: {\n marginTop: 5,\n fontSize: isTabletOrMobile ? 14 : 18,\n },\n label:\n options.sliderType === \"percentage\"\n ? options.sliderMin + \"%\"\n : options.sliderMin,\n },\n [options.sliderMax]: {\n style: {\n marginTop: 5,\n fontSize: isTabletOrMobile ? 14 : 18,\n },\n label:\n options.sliderType === \"percentage\"\n ? options.sliderMax + \"%\"\n : options.sliderMax,\n },\n };\n return (\n \n \n options.sliderType === \"percentage\" ? value + \"%\" : value\n }\n max={options.sliderMax}\n defaultValue={value}\n onAfterChange={(val) => onChange(val)}\n />\n
\n );\n};\n\nexport default SliderType;\n","import { Rate } from \"antd\";\nimport React from \"react\";\nimport styles from \"./likert.module.css\";\nimport { useMediaQuery } from \"react-responsive\";\nimport c from \"classnames/bind\";\n\nconst cx = c.bind(styles);\n\nconst likertStyles = {\n width: \"100%\",\n display: \"flex\",\n justifyContent: \"space-evenly\",\n};\n\nconst Likert = ({ key, options, onChange = () => {}, value }) => {\n const isTabletOrMobile = useMediaQuery({ query: \"(max-width: 395px)\" });\n\n return (\n \n
\n {options.sliderStartLabel}
\n {options.sliderMiddleLabel}
\n {options.sliderEndLabel}
\n \n \n circle\n \n }\n count={options.likertRange}\n defaultValue={value}\n onChange={(val) => onChange(val)}\n style={likertStyles}\n />\n \n {options.likertEndLabel}\n
\n \n \n );\n};\n\nexport default Likert;\n","import { Radio } from \"antd\";\nimport React from \"react\";\nimport \"./nps.css\";\n\nconst NPS = ({ key, onChange, value }) => {\n const numbers = [...Array(11).keys()];\n\n return (\n \n \n {options.likertMiddleLabel}\n
\n \n {options.likertStartLabel}\n
\n \n
\n );\n};\n\nexport default NPS;\n","import { MenuOutlined } from \"@ant-design/icons\";\nimport React from \"react\";\nimport { useState } from \"react\";\nimport { DragDropContext, Droppable, Draggable } from \"react-beautiful-dnd\";\nimport \"./ranking.css\";\n\nconst reorder = (list, startIndex, endIndex) => {\n const result = Array.from(list);\n const [removed] = result.splice(startIndex, 1);\n result.splice(endIndex, 0, removed);\n\n return result;\n};\n\nconst ListItem = ({ dragHandleProps, title, number }) => {\n return (\n \n onChange(e.target.value)}\n >\n {numbers.map((val) => (\n {val} \n ))}\n \n
\n \n Extremely Unlikely\n Extremely Likely\n
\n \n {number}\n
\n {title}\n \n );\n};\n\nconst Ranking = ({ key, onChange = () => {}, value }) => {\n const [list, setList] = useState(value.map((val) => val.label));\n\n const onDragEnd = (result) => {\n if (!result.destination) {\n return;\n }\n\n const items = reorder(list, result.source.index, result.destination.index);\n\n setList(items);\n onChange(items.map((val) => ({ label: val })));\n };\n\n return (\n \n onChange(val)}\n >\n {numbers.map((val) => (\n {val} \n ))}\n \n
\n );\n};\n\nexport default Dropdown;\n","import { MenuOutlined } from \"@ant-design/icons\";\nimport React from \"react\";\nimport \"./association.css\";\nimport { useState } from \"react\";\nimport { DragDropContext, Droppable, Draggable } from \"react-beautiful-dnd\";\nimport { reorder } from \"../../../../utils/questionUtils\";\n\nconst ListItem = ({ dragHandleProps, title }) => {\n return (\n \n
\n \n \n \n {(provided) => (\n \n {value.map((val, index) => (\n
\n \n ))}\n {provided.placeholder}\n \n )}\n \n \n \n );\n};\n\nexport default Association;\n","import React, { useState } from \"react\";\nimport Lightbox from \"react-awesome-lightbox\";\nimport \"./image-instructions.css\";\n\nconst ImageInstructions = ({ key, options }) => {\n const [zoom, setZoom] = useState(false);\n\n return (\n \n \n {val.label}\n
\n \n \n {(provided, snapshot) => (\n \n
\n )}\n \n \n setZoom(true)}\n />\n
\n
\n {options.imageLabel}\n {zoom && (\n setZoom(false)}\n allowRotate={false}\n showTitle={false}\n doubleClickZoom={2}\n />\n )}\n
\n \n
\n {options.imageLabel}\n {zoom && (\n
\n setZoom(true)}\n />\n
\n
\n {options.imageLabel}\n {zoom && (\n setZoom(false)}\n allowRotate={false}\n showTitle={false}\n doubleClickZoom={2}\n />\n )}\n onChange(e.target.value)}\n />\n
\n );\n};\n\nexport default ImageComment;\n","import { Radio } from \"antd\";\nimport React from \"react\";\nimport Thumbnail from \"../image-thumbnail/ImageThumbnail\";\nimport \"./multiple-choice.css\";\n\nconst ImageMultipleChoice = ({ key, options, value, onChange = () => {} }) => {\n return (\n \n
\n {options.imageLabel}\n {zoom && (\n
\n
\n ))}\n \n );\n};\n\nexport default ImageMultipleChoice;\n","import React, { useState } from \"react\";\nimport { Checkbox } from \"antd\";\nimport { difference } from \"lodash\";\nimport \"./image-checkboxes.css\";\nimport Thumbnail from \"../image-thumbnail/ImageThumbnail\";\n\nconst ImageCheckboxes = ({ key, options, value, onChange = () => {} }) => {\n const [localValue, setLocalValue] = useState(value);\n\n const valueChanged = (checkedValue) => {\n let newValues = [...checkedValue];\n const addedValues = difference(checkedValue, localValue);\n if (addedValues.length === 1) {\n const addedValue = addedValues[0];\n if (options.imageMultiChoices[addedValue].isMcq) {\n newValues = [addedValue];\n } else {\n newValues = newValues.filter(\n (val) => !options.imageMultiChoices[val].isMcq\n );\n }\n }\n\n setLocalValue(newValues);\n onChange(newValues);\n };\n return (\n {val.imageLabel}
\n \n
\n ))}\n \n {val.imageLabel}
\n \n {options.imageStarRatingChoices.map((opt) => (\n
\n ))}\n \n );\n};\n\nexport default ImageRating;\n","import { MenuOutlined } from \"@ant-design/icons\";\nimport React from \"react\";\nimport { useState } from \"react\";\nimport { DragDropContext, Droppable, Draggable } from \"react-beautiful-dnd\";\nimport Thumbnail from \"../image-thumbnail/ImageThumbnail\";\nimport \"./image-ranking.css\";\n\nconst reorder = (list, startIndex, endIndex) => {\n const result = Array.from(list);\n const [removed] = result.splice(startIndex, 1);\n result.splice(endIndex, 0, removed);\n\n return result;\n};\n\nconst ListItem = ({ dragHandleProps, imgUrl, label, number }) => {\n return (\n \n \n
\n {opt.imageLabel}
\n \n onRatingsChange(rate, opt.imageLabel)}\n />\n
\n \n
\n );\n};\n\nconst ImageRanking = ({ key, onChange = () => {}, value }) => {\n const [list, setList] = useState(value);\n\n const onDragEnd = (result) => {\n if (!result.destination) {\n return;\n }\n\n const items = reorder(list, result.source.index, result.destination.index);\n\n setList(items);\n onChange(items);\n };\n\n return (\n \n
\n {number}
\n {label}
\n \n {list.map((field, index) => (\n \n {(provided) => (\n \n
\n )}\n \n ))}\n {provided.placeholder}\n \n )}\n \n
\n {title}
\n \n );\n};\n\nconst ImageAssociation = ({ key, onChange = () => {}, value }) => {\n const [list, setList] = useState(value.map((val) => val.association));\n\n const onDragEnd = (result) => {\n if (!result.destination) {\n return;\n }\n\n const items = reorder(list, result.source.index, result.destination.index);\n\n let arr = [];\n value.forEach((key, index) => {\n arr.push({\n imageData: key.imageData,\n association: items[index],\n });\n });\n\n setList(items);\n onChange(arr);\n };\n\n const getItemStyle = (isDragging, draggableStyle) => ({\n // some basic styles to make the items look a bit nicer\n height: \"100%\",\n // styles we need to apply on draggables\n ...draggableStyle,\n });\n\n return (\n \n \n \n {(provided) => (\n \n {value.map((val, index) => (\n
\n ))}\n {provided.placeholder}\n \n )}\n \n \n \n );\n};\n\nexport default ImageAssociation;\n","import React from \"react\";\nimport Thumbnail from \"../video-thumbnail/VideoThumbnail\";\n\nconst VideoInstruction = ({ key, options }) => {\n return (\n \n
\n \n \n {(provided, snapshot) => (\n \n
\n )}\n \n \n
\n );\n};\n\nexport default VideoInstruction;\n","import { Rate } from \"antd\";\nimport { HeartFilled, SmileFilled, StarFilled } from \"@ant-design/icons\";\nimport React, { useState } from \"react\";\nimport Thumbnail from \"../video-thumbnail/VideoThumbnail\";\n\nconst VideoRating = ({ key, options, value, onChange }) => {\n const [ratings, setRatings] = useState(value);\n\n const getCharacter = () => {\n switch (options.videoStarType) {\n case \"star\":\n return \n {options.videoStarRatingChoices.map((opt) => (\n
\n ))}\n \n );\n};\n\nexport default VideoRating;\n","import { MenuOutlined } from \"@ant-design/icons\";\nimport React from \"react\";\nimport { useState } from \"react\";\nimport { DragDropContext, Droppable, Draggable } from \"react-beautiful-dnd\";\nimport { reorder } from \"../../../../../utils/questionUtils\";\nimport Thumbnail from \"../video-thumbnail/VideoThumbnail\";\n\nconst ListItem = ({ dragHandleProps, title }) => {\n return (\n \n \n
\n \n
\n {opt.videoLabel}
\n \n onRatingsChange(rate, opt.videoLabel)}\n />\n
\n \n
\n {title}
\n \n );\n};\n\nconst VideoAssociation = ({ key, onChange = () => {}, value }) => {\n const [list, setList] = useState(value.map((val) => val.association));\n\n const onDragEnd = (result) => {\n if (!result.destination) {\n return;\n }\n\n const items = reorder(list, result.source.index, result.destination.index);\n\n let arr = [];\n value.forEach((key, index) => {\n arr.push({\n videoData: key.videoData,\n association: items[index],\n });\n });\n\n setList(items);\n onChange(arr);\n };\n\n const getItemStyle = (isDragging, draggableStyle) => ({\n // some basic styles to make the items look a bit nicer\n height: \"100%\",\n // styles we need to apply on draggables\n ...draggableStyle,\n });\n\n return (\n \n \n \n {(provided) => (\n \n {value.map((val, index) => (\n
\n ))}\n {provided.placeholder}\n \n )}\n \n \n \n );\n};\n\nexport default VideoAssociation;\n","import { MenuOutlined } from \"@ant-design/icons\";\nimport React from \"react\";\nimport { useState } from \"react\";\nimport { DragDropContext, Droppable, Draggable } from \"react-beautiful-dnd\";\nimport Thumbnail from \"../video-thumbnail/VideoThumbnail\";\n\nconst reorder = (list, startIndex, endIndex) => {\n const result = Array.from(list);\n const [removed] = result.splice(startIndex, 1);\n result.splice(endIndex, 0, removed);\n\n return result;\n};\n\nconst ListItem = ({ dragHandleProps, videoUrl, label, number }) => {\n return (\n \n
\n \n
\n \n \n {(provided, snapshot) => (\n \n
\n )}\n \n \n
\n );\n};\n\nconst VideoRanking = ({ key, onChange = () => {}, value }) => {\n const [list, setList] = useState(value);\n\n const onDragEnd = (result) => {\n if (!result.destination) {\n return;\n }\n\n const items = reorder(list, result.source.index, result.destination.index);\n\n setList(items);\n onChange(items);\n };\n\n return (\n \n
\n {number}
\n \n
\n {label}
\n \n {list.map((field, index) => (\n \n {(provided) => (\n \n
\n )}\n \n ))}\n {provided.placeholder}\n \n )}\n \n \n
\n {val.videoLabel}
\n \n ))}\n \n );\n};\n\nexport default VideoMultipleChoice;\n","import React, { useState } from \"react\";\nimport { Checkbox } from \"antd\";\nimport Thumbnail from \"../video-thumbnail/VideoThumbnail\";\nimport { difference } from \"lodash\";\nimport { useMediaQuery } from \"react-responsive\";\n\nconst VideoCheckboxes = ({ key, options, value, onChange = () => {} }) => {\n const [localValue, setLocalValue] = useState(value);\n const isTabletOrMobile = useMediaQuery({ query: \"(max-width: 768px)\" });\n\n const valueChanged = (checkedValue) => {\n let newValues = [...checkedValue];\n const addedValues = difference(checkedValue, localValue);\n if (addedValues.length === 1) {\n const addedValue = addedValues[0];\n if (options.videoMultiChoices[addedValue].isMcq) {\n newValues = [addedValue];\n } else {\n newValues = newValues.filter(\n (val) => !options.videoMultiChoices[val].isMcq\n );\n }\n }\n\n setLocalValue(newValues);\n onChange(newValues);\n };\n\n return (\n \n
\n ))}\n \n );\n};\n\nexport default VideoCheckboxes;\n","import React from \"react\";\nimport { Input } from \"antd\";\nimport Thumbnail from \"../video-thumbnail/VideoThumbnail\";\n\nconst VideoComment = ({ key, options, value, onChange = () => {} }) => {\n return (\n \n
\n {val.videoLabel}
\n \n onChange(e.target.value)}\n />\n
\n );\n};\n\nexport default VideoComment;\n","import React from \"react\";\nimport ReactPlayer from \"react-player/lazy\";\n\nconst AdAnalysis = ({ options }) => {\n return (\n \n
\n );\n }\n}\n\nexport default AgoraCanvas;\n","import { Input } from \"antd\";\nimport React from \"react\";\nimport { useMediaQuery } from \"react-responsive\";\n\nconst Text = ({ key, value, onChange = () => {} }) => {\n const isTabletOrMobile = useMediaQuery({ query: \"(max-width: 768px)\" });\n return (\n \n {exitBtn}\n {videoControlBtn}\n {audioControlBtn}\n {this.isClient && startRecordingBtn}\n {this.isClient && stopRecordingBtn}\n {switchDisplayBtn}\n {hideRemoteBtn}\n
\n \n onChange(val)}\n className=\"\"\n />\n
\n );\n};\n\nexport default StarRating;\n","import React, { useEffect } from \"react\";\nimport { Slider } from \"antd\";\nimport \"./slider.css\";\nimport { useMediaQuery } from \"react-responsive\";\n\nconst SliderType = ({ key, options, onChange = () => {}, value }) => {\n const isTabletOrMobile = useMediaQuery({ query: \"(max-width: 900px)\" });\n console.log(options.sliderEndLabel, value);\n const marks = {\n [options.sliderMin]: {\n style: {\n marginTop: 5,\n fontSize: isTabletOrMobile ? 14 : 18,\n },\n label:\n options.sliderType === \"percentage\"\n ? options.sliderMin + \"%\"\n : options.sliderMin,\n },\n [options.sliderMax]: {\n style: {\n marginTop: 5,\n fontSize: isTabletOrMobile ? 14 : 18,\n },\n label:\n options.sliderType === \"percentage\"\n ? options.sliderMax + \"%\"\n : options.sliderMax,\n },\n };\n return (\n \n \n options.sliderType === \"percentage\" ? value + \"%\" : value\n }\n max={options.sliderMax}\n defaultValue={value}\n onAfterChange={(val) => onChange(val)}\n />\n \n
\n \n );\n};\n\nexport default SliderType;\n","import { Rate } from \"antd\";\nimport React from \"react\";\nimport styles from \"./likert.module.css\";\nimport { useMediaQuery } from \"react-responsive\";\nimport c from \"classnames/bind\";\n\nconst cx = c.bind(styles);\n\nconst likertStyles = {\n width: \"100%\",\n display: \"flex\",\n justifyContent: \"space-evenly\",\n};\n\nconst Likert = ({ key, options, onChange = () => {}, value }) => {\n const isTabletOrMobile = useMediaQuery({ query: \"(max-width: 395px)\" });\n\n return (\n {options.sliderStartLabel}
\n {options.sliderMiddleLabel}
\n {options.sliderEndLabel}
\n \n \n circle\n \n }\n count={options.likertRange}\n defaultValue={value}\n onChange={(val) => onChange(val)}\n style={likertStyles}\n />\n \n {options.likertEndLabel}\n
\n \n \n );\n};\n\nexport default Likert;\n","import { Radio } from \"antd\";\nimport React from \"react\";\nimport \"./nps.css\";\n\nconst NPS = ({ key, onChange, value }) => {\n const numbers = [...Array(11).keys()];\n\n return (\n \n \n {options.likertMiddleLabel}\n
\n \n {options.likertStartLabel}\n
\n \n
\n );\n};\n\nexport default NPS;\n","import { MenuOutlined } from \"@ant-design/icons\";\nimport React from \"react\";\nimport { useState } from \"react\";\nimport { DragDropContext, Droppable, Draggable } from \"react-beautiful-dnd\";\nimport \"./ranking.css\";\n\nconst reorder = (list, startIndex, endIndex) => {\n const result = Array.from(list);\n const [removed] = result.splice(startIndex, 1);\n result.splice(endIndex, 0, removed);\n\n return result;\n};\n\nconst ListItem = ({ dragHandleProps, title, number }) => {\n return (\n \n onChange(e.target.value)}\n >\n {numbers.map((val) => (\n {val} \n ))}\n \n
\n \n Extremely Unlikely\n Extremely Likely\n
\n \n {number}\n
\n {title}\n \n );\n};\n\nconst Ranking = ({ key, onChange = () => {}, value }) => {\n const [list, setList] = useState(value.map((val) => val.label));\n\n const onDragEnd = (result) => {\n if (!result.destination) {\n return;\n }\n\n const items = reorder(list, result.source.index, result.destination.index);\n\n setList(items);\n onChange(items.map((val) => ({ label: val })));\n };\n\n return (\n \n onChange(val)}\n >\n {numbers.map((val) => (\n {val} \n ))}\n \n
\n );\n};\n\nexport default Dropdown;\n","import { MenuOutlined } from \"@ant-design/icons\";\nimport React from \"react\";\nimport \"./association.css\";\nimport { useState } from \"react\";\nimport { DragDropContext, Droppable, Draggable } from \"react-beautiful-dnd\";\nimport { reorder } from \"../../../../utils\";\n\nconst ListItem = ({ dragHandleProps, title }) => {\n return (\n \n
\n \n \n \n {(provided) => (\n \n {value.map((val, index) => (\n
\n \n ))}\n {provided.placeholder}\n \n )}\n \n \n \n );\n};\n\nexport default Association;\n","import React, { useState } from \"react\";\nimport Lightbox from \"react-awesome-lightbox\";\nimport \"./image-instructions.css\";\n\nconst ImageInstructions = ({ key, options }) => {\n const [zoom, setZoom] = useState(false);\n\n return (\n \n \n {val.label}\n
\n \n \n {(provided, snapshot) => (\n \n
\n )}\n \n \n setZoom(true)}\n />\n
\n
\n {options.imageLabel}\n {zoom && (\n setZoom(false)}\n allowRotate={false}\n showTitle={false}\n doubleClickZoom={2}\n />\n )}\n
\n \n
\n {options.imageLabel}\n {zoom && (\n
\n setZoom(true)}\n />\n
\n
\n {options.imageLabel}\n {zoom && (\n setZoom(false)}\n allowRotate={false}\n showTitle={false}\n doubleClickZoom={2}\n />\n )}\n onChange(e.target.value)}\n />\n
\n );\n};\n\nexport default ImageComment;\n","import { Radio } from \"antd\";\nimport React from \"react\";\nimport Thumbnail from \"../image-thumbnail/ImageThumbnail\";\nimport \"./multiple-choice.css\";\n\nconst ImageMultipleChoice = ({ key, options, value, onChange = () => {} }) => {\n return (\n \n
\n {options.imageLabel}\n {zoom && (\n
\n
\n ))}\n \n );\n};\n\nexport default ImageMultipleChoice;\n","import React, { useState } from \"react\";\nimport { Checkbox } from \"antd\";\nimport { difference } from \"lodash\";\nimport \"./image-checkboxes.css\";\nimport Thumbnail from \"../image-thumbnail/ImageThumbnail\";\n\nconst ImageCheckboxes = ({ key, options, value, onChange = () => {} }) => {\n const [localValue, setLocalValue] = useState(value);\n\n const valueChanged = (checkedValue) => {\n let newValues = [...checkedValue];\n const addedValues = difference(checkedValue, localValue);\n if (addedValues.length === 1) {\n const addedValue = addedValues[0];\n if (options.imageMultiChoices[addedValue].isMcq) {\n newValues = [addedValue];\n } else {\n newValues = newValues.filter(\n (val) => !options.imageMultiChoices[val].isMcq\n );\n }\n }\n\n setLocalValue(newValues);\n onChange(newValues);\n };\n return (\n {val.imageLabel}
\n \n
\n ))}\n \n {val.imageLabel}
\n \n {options.imageStarRatingChoices.map((opt) => (\n
\n ))}\n \n );\n};\n\nexport default ImageRating;\n","import { MenuOutlined } from \"@ant-design/icons\";\nimport React from \"react\";\nimport { useState } from \"react\";\nimport { DragDropContext, Droppable, Draggable } from \"react-beautiful-dnd\";\nimport Thumbnail from \"../image-thumbnail/ImageThumbnail\";\nimport \"./image-ranking.css\";\n\nconst reorder = (list, startIndex, endIndex) => {\n const result = Array.from(list);\n const [removed] = result.splice(startIndex, 1);\n result.splice(endIndex, 0, removed);\n\n return result;\n};\n\nconst ListItem = ({ dragHandleProps, imgUrl, label, number }) => {\n return (\n \n \n
\n {opt.imageLabel}
\n \n onRatingsChange(rate, opt.imageLabel)}\n />\n
\n \n
\n );\n};\n\nconst ImageRanking = ({ key, onChange = () => {}, value }) => {\n const [list, setList] = useState(value);\n\n const onDragEnd = (result) => {\n if (!result.destination) {\n return;\n }\n\n const items = reorder(list, result.source.index, result.destination.index);\n\n setList(items);\n onChange(items);\n };\n\n return (\n \n
\n {number}
\n {label}
\n \n {list.map((field, index) => (\n \n {(provided) => (\n \n
\n )}\n \n ))}\n {provided.placeholder}\n \n )}\n \n
\n {title}
\n \n );\n};\n\nconst ImageAssociation = ({ key, onChange = () => {}, value }) => {\n const [list, setList] = useState(value.map((val) => val.association));\n\n const onDragEnd = (result) => {\n if (!result.destination) {\n return;\n }\n\n const items = reorder(list, result.source.index, result.destination.index);\n\n let arr = [];\n value.forEach((key, index) => {\n arr.push({\n imageData: key.imageData,\n association: items[index],\n });\n });\n\n setList(items);\n onChange(arr);\n };\n\n const getItemStyle = (isDragging, draggableStyle) => ({\n // some basic styles to make the items look a bit nicer\n height: \"100%\",\n // styles we need to apply on draggables\n ...draggableStyle,\n });\n\n return (\n \n \n \n {(provided) => (\n \n {value.map((val, index) => (\n
\n ))}\n {provided.placeholder}\n \n )}\n \n \n \n );\n};\n\nexport default ImageAssociation;\n","import React from \"react\";\nimport Thumbnail from \"../video-thumbnail/VideoThumbnail\";\n\nconst VideoInstruction = ({ key, options }) => {\n return (\n \n
\n \n \n {(provided, snapshot) => (\n \n
\n )}\n \n \n
\n );\n};\n\nexport default VideoInstruction;\n","import { Rate } from \"antd\";\nimport { HeartFilled, SmileFilled, StarFilled } from \"@ant-design/icons\";\nimport React, { useState } from \"react\";\nimport Thumbnail from \"../video-thumbnail/VideoThumbnail\";\n\nconst VideoRating = ({ key, options, value, onChange }) => {\n const [ratings, setRatings] = useState(value);\n\n const getCharacter = () => {\n switch (options.videoStarType) {\n case \"star\":\n return \n {options.videoStarRatingChoices.map((opt) => (\n
\n ))}\n \n );\n};\n\nexport default VideoRating;\n","import { MenuOutlined } from \"@ant-design/icons\";\nimport React from \"react\";\nimport { useState } from \"react\";\nimport { DragDropContext, Droppable, Draggable } from \"react-beautiful-dnd\";\nimport Thumbnail from \"../video-thumbnail/VideoThumbnail\";\nimport { reorder } from \"../../../../../utils\";\n\nconst ListItem = ({ dragHandleProps, title }) => {\n return (\n \n \n
\n \n
\n {opt.videoLabel}
\n \n onRatingsChange(rate, opt.videoLabel)}\n />\n
\n \n
\n {title}
\n \n );\n};\n\nconst VideoAssociation = ({ key, onChange = () => {}, value }) => {\n const [list, setList] = useState(value.map((val) => val.association));\n\n const onDragEnd = (result) => {\n if (!result.destination) {\n return;\n }\n\n const items = reorder(list, result.source.index, result.destination.index);\n\n let arr = [];\n value.forEach((key, index) => {\n arr.push({\n videoData: key.videoData,\n association: items[index],\n });\n });\n\n setList(items);\n onChange(arr);\n };\n\n const getItemStyle = (isDragging, draggableStyle) => ({\n // some basic styles to make the items look a bit nicer\n height: \"100%\",\n // styles we need to apply on draggables\n ...draggableStyle,\n });\n\n return (\n \n \n \n {(provided) => (\n \n {value.map((val, index) => (\n
\n ))}\n {provided.placeholder}\n \n )}\n \n \n \n );\n};\n\nexport default VideoAssociation;\n","import { MenuOutlined } from \"@ant-design/icons\";\nimport React from \"react\";\nimport { useState } from \"react\";\nimport { DragDropContext, Droppable, Draggable } from \"react-beautiful-dnd\";\nimport Thumbnail from \"../video-thumbnail/VideoThumbnail\";\n\nconst reorder = (list, startIndex, endIndex) => {\n const result = Array.from(list);\n const [removed] = result.splice(startIndex, 1);\n result.splice(endIndex, 0, removed);\n\n return result;\n};\n\nconst ListItem = ({ dragHandleProps, videoUrl, label, number }) => {\n return (\n \n
\n \n
\n \n \n {(provided, snapshot) => (\n \n
\n )}\n \n \n
\n );\n};\n\nconst VideoRanking = ({ key, onChange = () => {}, value }) => {\n const [list, setList] = useState(value);\n\n const onDragEnd = (result) => {\n if (!result.destination) {\n return;\n }\n\n const items = reorder(list, result.source.index, result.destination.index);\n\n setList(items);\n onChange(items);\n };\n\n return (\n \n
\n {number}
\n \n
\n {label}
\n \n {list.map((field, index) => (\n \n {(provided) => (\n \n
\n )}\n \n ))}\n {provided.placeholder}\n \n )}\n \n \n
\n {val.videoLabel}
\n \n ))}\n \n );\n};\n\nexport default VideoMultipleChoice;\n","import React, { useState } from \"react\";\nimport { Checkbox } from \"antd\";\nimport Thumbnail from \"../video-thumbnail/VideoThumbnail\";\nimport { difference } from \"lodash\";\nimport { useMediaQuery } from \"react-responsive\";\n\nconst VideoCheckboxes = ({ key, options, value, onChange = () => {} }) => {\n const [localValue, setLocalValue] = useState(value);\n const isTabletOrMobile = useMediaQuery({ query: \"(max-width: 768px)\" });\n\n const valueChanged = (checkedValue) => {\n let newValues = [...checkedValue];\n const addedValues = difference(checkedValue, localValue);\n if (addedValues.length === 1) {\n const addedValue = addedValues[0];\n if (options.videoMultiChoices[addedValue].isMcq) {\n newValues = [addedValue];\n } else {\n newValues = newValues.filter(\n (val) => !options.videoMultiChoices[val].isMcq\n );\n }\n }\n\n setLocalValue(newValues);\n onChange(newValues);\n };\n\n return (\n \n
\n ))}\n \n );\n};\n\nexport default VideoCheckboxes;\n","import React from \"react\";\nimport { Input } from \"antd\";\nimport Thumbnail from \"../video-thumbnail/VideoThumbnail\";\n\nconst VideoComment = ({ key, options, value, onChange = () => {} }) => {\n return (\n \n
\n {val.videoLabel}
\n \n onChange(e.target.value)}\n />\n
\n );\n};\n\nexport default VideoComment;\n","import React from \"react\";\nimport ReactPlayer from \"react-player/lazy\";\n\nconst AdAnalysis = ({ options }) => {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n {\n localStorage.removeItem(\"token\");\n localStorage.removeItem(\"user\");\n history.push(\"/signin/user\");\n }}\n >\n
\n );\n};\n\nexport default Sidenav;\n","import React, { useState } from \"react\";\nimport \"./topbar.css\";\nimport { Drawer, Button } from \"antd\";\nimport { MenuOutlined } from \"@ant-design/icons\";\n\nconst Topbar = (props) => {\n // component states\n const [drawer, setDrawer] = useState(false);\n\n return (\n \n setDrawer(true)}\n >\n
\n {drawer && (\n \n {props.children}\n
\n \n )}\n \n \n {!survey.surveyType ? (\n \n \n {`${surveyHeader} ${surveyTimeSlot}`}\n
\n \n
\n \n \n onClose()}\n style={{\n fontSize: 32,\n display: \"flex\",\n alignItems: \"center\",\n cursor: \"pointer\",\n }}\n />\n
\n \n \n \n
*/}\n
\n \n Please select a time for Moderated Video Survey\n
\n\n
\n {/* \n
\n {date &&\n date.map((d, index) => (\n Date
\n Time
\n \n {d} \n
\n ))}\n \n {Object.keys(newSlots[d])\n .sort()\n .map(\n (val, i) => (\n console.log(newSlots[d], \"val\"),\n (\n \n {val}\n \n )\n )\n )}\n
\n Date
\n \n {date &&\n date.map((val) => {val} )}\n
\n \n Time
\n {date &&\n time &&\n date.map((d, index) => (\n \n {Object.keys(newSlots[d]).map((val, i) => (\n \n {val}\n \n ))}\n
\n ))}\n \n \n \n Confirm availability\n \n
\n \n \n Start Screening\n \n
\n )}\n\n {!hasScreeningTest && surveyType !== surveyTypes.QUALITATIVE_MODERATED && (\n \n \n Start Survey\n \n
\n )}\n\n {!hasScreeningTest && surveyType === surveyTypes.QUALITATIVE_MODERATED && (\n \n \n {!!scheduledCallTimeStamp\n ? \"Change availability\"\n : \"Share availability\"}\n \n
\n \n \n Cancel Call\n \n
\n {scheduledCallTimeStamp && (\n \n new Date() ||\n !survey.surveyScheduledTimeStamp\n ? \"#BAE7EA\"\n : \"#71cfd7\",\n color: \"white\",\n borderRadius: 10,\n }}\n onClick={handleStartSurveyClick}\n // disabled={\n // getSelectedSlotDateObject() >\n // new Date().setMinutes(new Date().getMinutes() + 5) ||\n // !survey.surveyScheduledTimeStamp\n // }\n >\n Start Survey\n {surveyDate &&\n surveyTime &&\n getDateAndTimeString(surveyDate, surveyTime)}\n \n
\n )}\n \n {showTimeSlot && (\n - \n
- You will be asked a set of questions on your background \n
- \n We will NOT share this information with clients\n \n
- \n Please be HONEST as this is used to qualify you for surveys\n \n
- On completion please click the End button to upload the results \n
- Click on Green button below to start \n
- \n
- \n This survey requires you to test a website/product and record\n video/audio from your device\n \n
- Please be candid and honest with your feedback \n
- There are NO wrong answers – we need your real feedback! \n
- \n Once the survey is complete, please click on the End Survey button to\n upload the results\n \n
- You will get paid as per the terms \n
- \n Important: We DO NOT SHARE your details with clients\n \n
- \n
- This survey requires you to test a website/product \n
- \n It will be conducted by a moderator and will happen via a video call\n \n
- \n In order to match the time/date with the moderator, please choose your\n availability from the calendar below\n \n
- \n After that, you will receive an email and text for the date/time for\n this survey\n \n
- Once you confirm, please come back and take the survey \n
- You will get paid once the survey is done \n\n
- \n Important: We DO NOT SHARE your details with clients\n \n
\n Survey Details\n
\n\n \n {renderPairs.map((pair, index) => (\n \n \n {pair[0]}\n
\n {pair[1]}
\n \n ))}\n \n\n \n
Instructions:
\n {survey && getInstructions(surveyType)}\n \n\n {!window.location.pathname.includes('/attemptSurvey') && {\n onClose();\n }}\n className={cx(\"quit-button\")}\n title=\"Quit Survey\"\n >\n QUIT SURVEY
\n }\n \n \n
\n \n \n \n : Sorry!
\n\n You failed the screening test.\n
\n\n
\n );\n }\n}\n\nexport default Meeting;\n","export const AGORA_APP_ID = \"797e898a27174461a2e6ba2034fb0c31\"; // set your app id here\n","import React, { useEffect, useState } from \"react\";\nimport styles from \"./QuestionPopup.module.css\";\nimport c from \"classnames/bind\";\nimport {\n CloseCircleOutlined,\n LeftCircleOutlined,\n RightCircleOutlined,\n} from \"@ant-design/icons\";\nimport { Button, message, Badge, InputNumber, Modal as AntdModal } from \"antd\";\nimport { useMediaQuery } from \"react-responsive\";\nimport { RemoveScrollBar } from \"react-remove-scroll-bar\";\nimport Text from \"../../questions/text/Text\";\nimport MultipleChoice from \"../../questions/multiple-choice/MultipleChoice\";\nimport Checkboxes from \"../../questions/checkboxes/Checkboxes\";\nimport StarRating from \"../../questions/star-rating/StarRating\";\nimport SliderType from \"../../questions/slider/Slider\";\nimport Likert from \"../../questions/likert/Likert\";\nimport NPS from \"../../questions/nps/NPS\";\nimport Ranking from \"../../questions/ranking/Ranking\";\nimport Dropdown from \"../../questions/dropdown/Dropdown\";\nimport Association from \"../../questions/association/Association\";\nimport ImageInstructions from \"../../questions/image/instructions/ImageInstructions\";\nimport ImageComment from \"../../questions/image/comment/ImageComment\";\nimport ImageMultipleChoice from \"../../questions/image/multiple-choice/ImageMultipleChoice\";\nimport ImageCheckboxes from \"../../questions/image/checkboxes/ImageCheckboxes\";\nimport ImageRating from \"../../questions/image/rating/ImageRating\";\nimport ImageRanking from \"../../questions/image/ranking/ImageRanking\";\nimport ImageAssociation from \"../../questions/image/association/ImageAssociation\";\nimport Modal from \"react-modal\";\nimport VideoInstruction from \"../../questions/video/instruction/VideoInstruction\";\nimport VideoRating from \"../../questions/video/rating/VideoRating\";\nimport VideoAssociation from \"../../questions/video/association/VideoAssociation\";\nimport VideoRanking from \"../../questions/video/ranking/VideoRanking\";\nimport VideoMultipleChoice from \"../../questions/video/multiple-choice/VideoMultipleChoice\";\nimport VideoCheckboxes from \"../../questions/video/checkboxes/VideoCheckboxes\";\nimport VideoComment from \"../../questions/video/comment/VideoComment\";\nimport CheckboxesSpecial from \"../../../../../../components/user/profile-questions/checkboxes-special/CheckboxesSpecial\";\nimport AdAnalysis from \"../../questions/ad-analysis/AdAnalysis\";\n// import { getWordCloudAnalysis } from \"../../constants/getWordCloudReport\";\nconst modalStyles = {\n content: {\n top: \"10%\",\n left: \"20%\",\n width: \"80vh\",\n height: \"80vh\",\n border: 0,\n padding: 0,\n borderRadius: 0,\n },\n};\n\nconst cx = c.bind(styles);\n\nconst isTypeRequired = (type) => {\n return [\n \"text\",\n \"multiChoices\",\n \"checkBoxes\",\n \"stars\",\n \"likert\",\n \"likert\",\n \"imageMultiChoices\",\n \"imageCheckBoxes\",\n \"netPromotorScore\",\n \"videoComment\",\n \"imageComment\",\n \"videoMultiChoices\",\n \"videoCheckBoxes\",\n \"imageStarRatingChoices\",\n \"videoStarRatingChoices\",\n ].includes(type);\n};\n\nconst emptyCheck = (type, answer) => {\n const specialTypes = [\n \"imageStarRatingChoices\",\n \"videoStarRatingChoices\",\n \"text\",\n \"imageComment\",\n \"videoComment\",\n ];\n if (answer && !specialTypes.includes(type)) {\n return answer.length === 0;\n }\n let isEmpty = false;\n switch (type) {\n case \"text\":\n return answer.length === 0 || answer[0] === \"\";\n case \"imageComment\":\n return answer.length === 0 || answer[0] === \"\";\n case \"videoComment\":\n return answer.length === 0 || answer[0] === \"\";\n case \"imageStarRatingChoices\":\n Object.keys(answer[0]).forEach((el) => {\n if (answer[0][el] === 0) {\n isEmpty = true;\n return;\n }\n });\n return isEmpty;\n case \"videoStarRatingChoices\":\n Object.keys(answer[0]).forEach((el) => {\n if (answer[0][el] === 0) {\n isEmpty = true;\n return;\n }\n });\n return isEmpty;\n default:\n return false;\n }\n};\n\nlet answers = [];\nlet hiddenQuestions = [];\nconst QuestionPopup = ({\n questions = [],\n isOpen,\n onClose,\n onEndQuestion = () => {},\n onDisqualification = () => {},\n surveyType,\n video,\n userId = null,\n onSubmitLiveQuestion,\n}) => {\n // Hooks\n const isTabletOrMobile = useMediaQuery({ query: \"(max-width: 768px)\" });\n const [isDisqualified, setIsDisqualified] = useState(false);\n\n useEffect(() => {\n // Populate answers with empty array\n [...Array(questions.length).keys()].map((i) => (answers[i] = []));\n console.log(\"population done\");\n }, []);\n\n console.log(\"question in popup\", questions);\n\n // Derived state\n const index = 0;\n const getQuestionText = () => {\n const { type, text, options } = questions[index];\n\n switch (type) {\n case \"netPromotorScore\":\n const { npsOption } = options;\n return `How likely is it that you would recommend ${npsOption} to a friend or collegue?`;\n default:\n return text;\n }\n };\n\n const getComponentByQuestionType = () => {\n const { type, options } = questions[index];\n\n const onChange = (values) => {\n answers[index] = Array.isArray(values) ? values : [values];\n };\n\n if (answers.length === 0) {\n [...Array(questions.length)].map(() => answers.push([]));\n }\n\n if (answers[index]) {\n switch (type) {\n case \"text\":\n return (\n \n
\n \n USERQUAL{\" \"}\n \n {this.isOneToOne ? \"ONE TO ONE\" : \"ONE TO MANY\"} Survey{\" \"}\n {this.channel}\n \n
\n \n
\n \n
\n \n \n Open link:{\" \"}\n \n {questions[index].clientLink}\n {\" \"}\n (Click here)\n
\n ) : null}\n \n \n
\n \n \n \n {surveyType && (\n \n Read the Question aloud\n \n )}\n \n {/*
\n {questions[index] &&\n questions[index].clientLink &&\n questions[index].clientLink.length > 0 ? (\n \n
*/}\n \n {questions[index] && getQuestionText()}\n
\n {questions[index] && questions[index].description ? (\n \n {questions[index].description}\n \n ) : null}\n {surveyType &&\n questions[index - 1] &&\n questions[index - 1].clientLink &&\n questions[index - 1].clientLink.length > 0 ? (\n
\n (The previous link was{\" \"}\n
\n {questions[index] && getComponentByQuestionType()}\n
\n {surveyType && (\n \n {!window.location.pathname.includes('/attemptSurvey') && {\n onClose();\n }}\n className={cx(\"quit-button\")}\n title=\"Quit Survey\"\n >\n QUIT SURVEY
\n }\n \n
\n \n \n }\n \n \n \n Sorry!\n \n
\n \n Please grant the necessary permissions to begin survey. To attempt again, please refresh.\n
\n\n
\n \n \n \n \n
\n \n \n Register for new upcoming surveys. The survey amount will be\n added to your wallet once the survey is completed.\n
\n \n \n Live Surveys\n
\n \n \n
\n \n \n All surveys\n
\n {!!refinedSurveyList && refinedSurveyList.length > 0 ? (\n \n {refinedSurveyList.map((survey, index) => {\n return (\n
\n ) : (\n No surveys left...
\n )}\n \n \n \n\n {children}\n
\n );\n}\n\nexport function Content({ children, style = {}, contentClass = \"\" }) {\n return (\n \n \n {title}\n
\n );\n}\n","import React from \"react\";\nimport styles from \"./form-item-label.module.css\";\nimport c from \"classnames/bind\";\n\nconst cx = c.bind(styles);\n\nexport default function FormItemLabel({ name, description, hint, extra }) {\n return (\n \n {name}{\" \"}\n {hint && {hint}} {extra}\n {description && (\n
\n
\n setEditable(!editable)}\n />\n )}\n
\n \n {question}\n {!editable ? (\n setEditable(!editable)}\n >\n Edit\n
\n ) : (\n \n {editable\n ? renderQuestion()\n : value\n ? questionObject.questionType !== \"age\"\n ? value.map((val) => questionObject.options[val]).join(\", \")\n : value[0]\n : \"\"}\n
\n \n );\n};\n\nexport default ProfileQuestionBox;\n","import { CheckOutlined, InfoCircleOutlined } from \"@ant-design/icons\";\nimport { Input, Tooltip } from \"antd\";\nimport React from \"react\";\nimport { useMediaQuery } from \"react-responsive\";\nimport { EMAIL_VALIDATION_REGEX } from \"../../../constants\";\n\nconst EmailInputBox = (props) => {\n const { value, onChange, options } = props;\n const isTabletOrMobile = useMediaQuery({ query: \"(max-width: 450px)\" });\n\n const isValidEmail = () => {\n return EMAIL_VALIDATION_REGEX.test(value);\n };\n\n return (\n \n {value && isRulePassed() ? (\n \n \n )}\n
\n \n \n \n Profile Details\n \n \n This information will only be shared with us.\n
\n \n \n \n Edit\n \n }\n />\n ) : (\n \n \n )}\n \n \n {() => (\n \n Send Verification Link\n \n )}\n \n )}\n {emailStatus === \"verified\" && (\n \n Verified\n \n )}\n \n
\n \n \n Edit\n \n }\n />\n ) : (\n \n \n )}\n \n \n {() => (\n \n Send OTP\n \n )}\n \n )}\n {otpStatus === \"verifying\" && (\n \n Verified\n \n )}\n \n
\n \n \n \n \n \n \n \n
\n\n {!usedForClient && (\n <>\n \n \n \n \n )}\n
\n
\n \n
\n )}\n {otpStatus === \"verified\" && (\n \n This will be shared with the companies you work for.\n
\n )}\n\n \n
\n {/* \n Terms of use and privacy policy\n
\n Thanks for using UserQual as per the terms and privacy policy\n you accepted on sign up.\n
\n */}\n
\n \n Profile Questions\n \n \n The more questions you answer, the more surveys you will\n get and get paid.\n
\n \n {profileQuestions && profileQuestions.length > 0\n ? profileQuestions\n .filter((val) => val.questionType === \"profile\")\n .map((val, index) => (\n ans.questionId === val._id\n )\n ? profileAnswers.find(\n (ans) => ans.questionId === val._id\n ).answer\n : undefined\n }\n onChange={(values) =>\n updateProfileAnswers(values, val._id)\n }\n />\n ))\n : null}\n
\n \n )}\n \n setEmail(e.target.value)}\n bordered={false}\n className={cx(\"input-box\")}\n placeholder=\"Enter user email here to invite\"\n style={{\n maxWidth: 380,\n }}\n />\n
\n \n setAccess(value)}\n className={cx(\"access-selector\")}\n style={{ marginRight: 8 }}\n >\n {accessOptions.map(({ value, text }) => (\n \n {text}\n \n ))}\n \n \n Invite\n \n
\n \n );\n};\n\nconst Settings = ({\n usedForClient,\n profile,\n handleEditProfile,\n updateAccountName,\n}) => {\n console.log(usedForClient, profile, handleEditProfile, updateAccountName);\n const [modal, setModal] = useState(false);\n const [form] = Form.useForm();\n const [localAccountName, setLocalAccountName] = useState(null);\n const [selectedOption, setSelectedOption] = useState(profile?.paymentMethod);\n const [localPaymentId, setLocalPaymentId] = useState(profile?.paymentId);\n const [clientToDelete, setClientToDelete] = useState(\"\");\n const [clientToDeleteIsTemp, setClientToDeleteIsTemp] = useState(false);\n const [clientNameToDelete, setClientNameToDelete] = useState(\"\");\n const [removeUserModal, setRemoveUserModal] = useState(false);\n const [users, setUsers] = useState([]);\n const accessLevel = profile?.accessLevel;\n const isTabletOrMobile = useMediaQuery({ query: \"(max-width: 450px)\" });\n\n useEffect(() => {\n document.body.setAttribute(\"data-new-theme\", true);\n\n return () => {\n document.body.removeAttribute(\"data-new-theme\");\n };\n }, []);\n\n useEffect(() => {\n form.setFieldsValue({\n localAccountName: profile?.account?.accountName,\n });\n setLocalAccountName(profile?.account?.accountName);\n }, [profile?.account?.accountName]);\n\n useEffect(() => {\n if (profile?.paymentId) {\n form.setFieldsValue({\n paymentId: profile.paymentId,\n });\n setLocalPaymentId(profile.paymentId);\n }\n }, [profile?.paymentId]);\n\n useEffect(() => {\n if (usedForClient && profile?.account?._id) {\n (async () => {\n const fetchedUsers = await fetchUsers(profile.account._id);\n setUsers(fetchedUsers);\n })();\n }\n }, [usedForClient, accessLevel, profile?.account?._id]);\n\n const onSettingsChange = (newValues) => {\n // onChange({\n // ...value,\n // ...newValues,\n // });\n };\n\n const onRadioChange = (e) => {\n setSelectedOption(e.target.value);\n setLocalPaymentId(\"\");\n form.setFieldsValue({\n paymentId: \"\",\n });\n onSettingsChange({ method: e.target.value });\n };\n\n const onInputChange = (e) => {\n setLocalPaymentId(e.target.value);\n onSettingsChange({ email: e.target.value });\n };\n\n const radioOptionStyle = {\n fontSize: isTabletOrMobile ? 12 : 16,\n color: \"#004479\",\n };\n\n const onFinish = async (values) => {\n if (profile?.account?.accountName !== localAccountName) {\n if (!localAccountName) {\n notify(\"error\", \"Error\", \"Account name cannot be empty\");\n return;\n }\n await updateAccountName(localAccountName);\n }\n const dupValues = { ...values };\n if (dupValues.localAccountName) {\n delete dupValues.localAccountName;\n }\n\n handleEditProfile(dupValues, profile.adminQuestionsAnswers);\n };\n\n const sendInvitation = async (email, accessLevel) => {\n let inviter = \"\";\n if (profile.firstName) {\n inviter += profile.firstName;\n if (profile.lastName) {\n inviter += \" \" + profile.lastName;\n }\n } else if (profile.email) {\n inviter += profile.email;\n }\n\n const accountId = profile.account._id;\n const clientId = localStorage.getItem(\"client\");\n const { data } = await axios({\n ...Routes.client.inviteClient(clientId),\n data: {\n data: {\n inviter,\n accountId,\n email,\n accessLevel,\n },\n },\n });\n if (data.success) {\n notify(\"success\", \"Success\", data.message);\n const fetchedUsers = await fetchUsers(profile.account._id);\n setUsers(fetchedUsers);\n } else {\n notify(\"error\", \"Error\", data.message);\n }\n };\n\n const editAccess = async (clientId, accessLevel, pending) => {\n const accountId = profile.account._id;\n const id = localStorage.getItem(\"client\");\n const { data } = await axios({\n ...Routes.client.editAccess(id),\n data: { data: { accountId, clientId, accessLevel, pending } },\n });\n const fetchedUsers = await fetchUsers(accountId);\n setUsers(fetchedUsers);\n notify(\"success\", \"Success\", data.message);\n };\n\n const closeDeleteModal = () => {\n setClientNameToDelete(\"\");\n setClientToDelete(\"\");\n setRemoveUserModal(false);\n };\n\n const removeUser = async () => {\n const id = localStorage.getItem(\"client\");\n const { data } = await axios({\n ...Routes.client.removeClient(id),\n data: {\n data: { clientId: clientToDelete, pending: clientToDeleteIsTemp },\n },\n });\n notify(\"success\", \"Success\", data.message);\n closeDeleteModal();\n const fetchedUsers = await fetchUsers(profile.account._id);\n setUsers(fetchedUsers);\n };\n\n return (\n \n \n {\n editAccess(user.clientId, value, user.pending);\n }}\n className={cx(\"access-selector\")}\n >\n {accessOptions.map(({ value, text }) => (\n \n {text}\n \n ))}\n \n\n {\n setClientToDeleteIsTemp(user.pending);\n setClientToDelete(user.clientId);\n setClientNameToDelete(name);\n setRemoveUserModal(true);\n }}\n >\n Remove\n \n
\n \n );\n })}\n \n \n Manage Team
\n\n Invite new user from your organization\n
\n \n \n \n \n {initial}\n \n {name}\n {user.pending && (\n \n Invited\n \n )}\n
\n \n Manage users\n
\n {users.map((user) => {\n let initial = \"\";\n let name = \"\";\n if (user.firstName) {\n initial += user.firstName[0].toUpperCase();\n name += user.firstName;\n if (user.lastName) {\n initial += user.lastName[0].toUpperCase();\n name += ` ${user.lastName}`;\n }\n } else if (user.email) {\n initial += user.email[0].toUpperCase();\n name += user.email;\n } else {\n initial = \"??\";\n name = user.mobileNumber;\n }\n return (\n \n \n {access}\n
\n \n );\n })}\n \n \n Team
\n\n {users.map((user) => {\n let initial = \"\";\n let name = \"\";\n let access = `${capitalizeFirstCharacter(\n user.accessLevel\n )} Access`;\n if (user.firstName) {\n initial += user.firstName[0].toUpperCase();\n name += user.firstName;\n if (user.lastName) {\n initial += user.lastName[0].toUpperCase();\n name += ` ${user.lastName}`;\n }\n } else if (user.email) {\n initial += user.email[0].toUpperCase();\n name += user.email;\n } else {\n initial = \"??\";\n name = user.mobileNumber;\n }\n return (\n \n \n \n {initial}\n \n {name}\n {user.pending && (\n \n Invited\n \n )}\n
\n Are you sure you want to remove {clientNameToDelete}?
\n\n {dataSource.map((data, index) => (\n
\n );\n};\n\nconst ResponsiveTable = (props) => {\n const { columns, dataSource, className = \"\" } = props;\n\n const isTabletOrMobile = useMediaQuery({ query: \"(max-width: 1000px)\" });\n\n return (\n \n {columns.map((col) => (\n
\n ))}\n \n
\n ))}\n \n {col.title}\n
\n \n {!!col.render\n ? col.render(data[col.dataIndex], data, index)\n : data[col.dataIndex]}\n
\n \n {isTabletOrMobile ? (\n
\n );\n};\n\nexport default ResponsiveTable;\n","import React from \"react\";\nimport \"./confused.css\";\nimport { Button } from \"antd\";\nimport { PlayCircleOutlined } from \"@ant-design/icons\";\n\nconst Confused = ({ style }) => {\n return (\n \n // \n );\n};\n\nexport const ExplainerVideo = () => {\n return ;\n};\n\nexport default Confused;\n","import React, { useEffect } from \"react\";\nimport ResponsiveTable from \"../../../components/responsive-table/ResponsiveTable\";\nimport ProjectPageLayout, {\n Content,\n InnerContainer,\n} from \"../../../components/page-layout/PageLayout\";\nimport Confused, {\n ExplainerVideo,\n} from \"../../../components/user/confused/Confused\";\nimport { userPages } from \"../../../constants\";\nimport Sidenav from \"../../../components/user/sidenav/Sidenav\";\nimport Topbar from \"../../../components/topbar/Topbar\";\nimport moment from \"moment\";\nimport \"./history.css\";\nimport { Button, Col, Row } from \"antd\";\n\nconst History = ({ usedForClient, profile }) => {\n const data = (profile && profile.transactions) || [];\n const columns = [\n {\n title: \"No.\",\n key: \"no\",\n align: \"center\",\n width: \"5%\",\n render: (text, record, index) => {index + 1},\n },\n {\n title: \"Survey Name\",\n key: \"survey_name\",\n align: \"left\",\n dataIndex: \"surveyName\",\n width: \"30%\",\n sorter: (a, b) => a.surveyName.localeCompare(b.surveyName),\n },\n {\n title: \"Date Completed\",\n key: \"date completed\",\n align: \"left\",\n dataIndex: \"timeStamp\",\n render: (text) => moment(text).format(\"DD/MM/YYYY\"),\n width: \"15%\",\n sorter: (a, b) =>\n moment(a[\"timeStamp\"]).unix() - moment(b[\"timeStamp\"]).unix(),\n },\n {\n title: \"Paid\",\n key: \"paid\",\n align: \"center\",\n dataIndex: \"paid\",\n width: \"10%\",\n },\n {\n title: \"Payment Date\",\n key: \"payment_date\",\n align: \"center\",\n dataIndex: \"payment_date\",\n width: \"15%\",\n },\n {\n title: \"Amount\",\n key: \"amount\",\n align: \"center\",\n dataIndex: \"amount\",\n width: \"10%\",\n sorter: (a, b) => a.amount - b.amount,\n },\n {\n title: \"Payment Method\",\n key: \"payment_method\",\n align: \"center\",\n dataIndex: \"payment_method\",\n width: \"15%\",\n },\n ];\n\n useEffect(() => {\n document.body.setAttribute(\"data-new-theme\", true);\n\n return () => {\n document.body.removeAttribute(\"data-new-theme\");\n };\n }, []);\n\n return (\n Survey history
\n\n {usedForClient\n ? \"Account of all the spends from the published survey\"\n : \"Account of all the earnings from the opted survey\"}\n
\n \n ₹ 0
\n \n Total amount credited\n
\n \n \n ₹ 0
\n Amount pending
\n \n \n 0
\n Survey completed
\n \n \n - \n
- You will be asked a set of questions on your background \n
- \n We will NOT share this information with clients\n \n
- \n Please be HONEST as this is used to qualify you for surveys\n \n {/*
- \n See Informational Video for this survey for more information\n */}\n
- On completion please click the End button to upload the results \n
- Click on Green button below to start \n
\n
Instructions:
\n {survey && getInstructions(surveyType)}\n \n {surveyType === \"quantitative\" && (\nNo surveys left...
\n )}\n\n
\n \n {endSurveySlideNumber === 0 && (\n \n onEndSurvey([])}\n >\n Survey Informational Video{\" \"}\n \n )}\n {step !== endSurveySlideNumber && (\n \n \n \n Next\n \n \n )}\n
\n \n Thanks for becoming part of the UserQual team!.
\n
Please see this short video to learn how surveys are\n conducted and how EASY it is to make money by giving your honest\n feedback!.\n
\n Thanks for becoming part of the UserQual team!.
\n
To qualify for surveys and get paid, we need to get\n some demographic information. This will NOT be shared with\n clients.\n
{questions[step] && questions[step].userField}
\n \n\n {questions[step] && getComponentByQuestionType()}\n
\n \n handleClick(\"/client\")}\n selected={selected === \"/client\"}\n >\n handleClick(\"/client/published\")}\n selected={selected === \"/client/published\"}\n >\n handleClick(\"/client/requests\")}\n selected={selected === \"/client/requests\"}\n >\n handleClick(\"/client/results\")}\n selected={selected === \"/client/results\"}\n >\n handleClick(\"/client/profile\")}\n selected={selected === \"/client/profile\"}\n >\n handleClick(\"/client/settings\")}\n selected={selected === \"/client/settings\"}\n >\n handleClick(\"/client/history\")}\n selected={selected === \"/client/history\"}\n >\n {\n localStorage.removeItem(\"token\");\n localStorage.removeItem(\"client\");\n localStorage.removeItem(\"survey\");\n handleClick(\"/signin/client\");\n }}\n >\n © 2021 UserQual \n
\n );\n};\n\nexport default Sidenav;\n","import React from \"react\";\nimport \"./form-box-style.css\";\nimport { PlusCircleFilled } from \"@ant-design/icons\";\n\nconst NewFormBox = () => {\n return (\n \n
\n \n
\n );\n};\n\nexport default NewFormBox;\n","import React from \"react\";\nimport { Modal, Button } from \"antd\";\nimport { CloseSquareFilled } from \"@ant-design/icons\";\n\nimport styles from \"./ConfirmationModal.module.css\";\nimport c from \"classnames/bind\";\n\nconst cx = c.bind(styles);\n\nconst ConfirmationModal = ({\n handleOk,\n handleCancel,\n isVisible,\n handleCreateNewSurvey,\n}) => {\n return (\n \n
\n CREATE NEW SURVEY
\n Would you like to copy a previously published survey?
\n \n );\n};\n\nexport default ConfirmationModal;\n","import React, { useState } from \"react\";\nimport { Fragment } from \"react\";\nimport {\n Table,\n Modal,\n Dropdown,\n Menu,\n Button,\n Checkbox,\n Radio,\n List,\n Card,\n} from \"antd\";\nimport { FilterFilled, CloseSquareFilled } from \"@ant-design/icons\";\nimport moment from \"moment\";\nimport { useMediaQuery } from \"react-responsive\";\n\nimport styles from \"./PublishedSurveyListModal.module.css\";\nimport \"./PublishedSurveyListModal.css\";\nimport c from \"classnames/bind\";\nconst RadioGroup = Radio.Group;\nconst months = [\n \"Jan\",\n \"Feb\",\n \"Mar\",\n \"Apr\",\n \"May\",\n \"Jun\",\n \"Jul\",\n \"Aug\",\n \"Sep\",\n \"Oct\",\n \"Nov\",\n \"Dec\",\n];\nconst cx = c.bind(styles);\n\nconst filters = [\n {\n text: \"Qualitative\",\n value: \"Qualitative\",\n },\n {\n text: \"Quantitative\",\n value: \"Quantitative\",\n },\n {\n text: \"Moderated\",\n value: \"Moderated\",\n },\n {\n text: \"UnModerated\",\n value: \"UnModerated\",\n },\n /* {\n text: \"Mobile\",\n value: \"Mobile\",\n },\n {\n text: \"Desktop\",\n value: \"Desktop\",\n }, */\n {\n text: \"Group\",\n value: \"Group\",\n },\n {\n text: \"Individual\",\n value: \"Individual\",\n },\n {\n text: \"15 min\",\n value: \"15 min\",\n },\n {\n text: \"30 min\",\n value: \"30 min\",\n },\n {\n text: \"45 min\",\n value: \"45 min\",\n },\n];\n\nconst PublishedSurveyListModal = ({\n surveyList,\n surveyListModal,\n handleOk,\n handleCancel,\n}) => {\n const isMobile = useMediaQuery({ query: \"(max-width: 500px)\" });\n const [selectedSurvey, setSelectedSurvey] = useState(null);\n const [filterVisible, setFilterVisible] = useState(false);\n const [appliedFilters, setAppliedFilters] = useState([]);\n\n const timing = {\n 1: \"15 min\",\n 2: \"30 min\",\n 3: \"45 min\",\n };\n\n const surveyListColumns = [\n {\n title: \"Name\",\n dataIndex: \"name\",\n width: \"150px\",\n },\n {\n title: \"Published Date\",\n dataIndex: \"date\",\n sorter: (a, b) => new Date(a.date) - new Date(b.date),\n render: (date) => moment(date).format(\"DD MMM YYYY\"),\n align: \"left\",\n width: \"100px\",\n },\n {\n title: \"Survey Type\",\n dataIndex: \"type\",\n width: \"150px\",\n className: \"survey-filter\",\n // onFilter: (value, record) => record.type.indexOf(value) > -1,\n },\n Table.SELECTION_COLUMN,\n ];\n\n const getSurveyType = (survey) => {\n let type = \"\";\n type += survey.surveyType ? \"Qualitative\" : \"Quantitative\";\n if (survey.surveyType) {\n type +=\n \"/\" +\n (isMobile ? \"\\n\" : \"\") +\n (survey.mode ? \"Moderated\" : \"UnModerated\");\n type += \"/\" + (survey.device ? \"Mobile\" : \"Desktop\");\n if (survey.mode) {\n type += \"/\" + (survey.setting ? \"Group\" : \"Individual\");\n }\n type += \"/\" + timing[survey.timingType];\n }\n return type;\n };\n\n const getSurveyTags = (survey) => {\n let tags = [];\n tags.push(survey.surveyType ? \"Qualitative\" : \"Quantitative\");\n if (survey.surveyType) {\n tags.push(survey.mode ? \"Moderated\" : \"UnModerated\");\n tags.push(survey.device ? \"Mobile\" : \"Desktop\");\n if (survey.mode) {\n tags.push(survey.setting ? \"Group\" : \"Individual\");\n }\n tags.push(timing[survey.timingType]);\n }\n return tags;\n };\n\n const surveyListData = surveyList\n .map((publishedSurvey, index) => {\n return {\n key: publishedSurvey._id,\n name: publishedSurvey.name,\n date: publishedSurvey.createdAt,\n type: getSurveyType(publishedSurvey),\n tags: getSurveyTags(publishedSurvey),\n survey: publishedSurvey,\n };\n })\n .filter(({ tags }) => {\n if (appliedFilters.length === 0) {\n return true;\n }\n return appliedFilters.some((f) => tags.includes(f));\n });\n\n const handleRadioSelection = (e) => {\n setSelectedSurvey(e.target.value.survey);\n };\n\n const rowSelection = {\n onChange: (selectedRowKeys, selectedRows) => {\n setSelectedSurvey({\n ...selectedRows[0].survey,\n isPublished: false,\n responses: [],\n });\n },\n };\n\n return (\nPlease Select Survey
\n \n \n \n {new Date(item.date).getUTCDate()}\n
\n \n {months[new Date(item.date).getUTCMonth()]}\n
\n \n \n {item.name}\n
\n {it}
\n ) : (\n {it}/
\n );\n })}\n \n \n \n \n
\n \n \n \n You do not have any team members!\n
\n ) : (\n \n sharedUser.client === user.clientId\n )}\n />\n );\n })}\n
\n )}\n \n );\n};\n\nconst TeamMemberShareControl = ({ user, sharedUserObj, updateSharedUser }) => {\n const [isUserSelected, setIsUserSelected] = useState(!!sharedUserObj);\n\n const switchHandler = async (checked) => {\n if (!checked) {\n await updateSharedUser(user.clientId, null);\n } else {\n await updateUserPermission(PERMISSION.VIEW);\n }\n setIsUserSelected(checked);\n };\n\n const updateUserPermission = async (permission) => {\n await updateSharedUser(user.clientId, {\n client: user.clientId,\n permission,\n });\n };\n\n useEffect(() => {\n setIsUserSelected(!!sharedUserObj);\n }, [sharedUserObj]);\n\n let initial = \"\";\n let name = \"\";\n if (user.firstName) {\n initial += user.firstName[0].toUpperCase();\n name += user.firstName;\n if (user.lastName) {\n initial += user.lastName[0].toUpperCase();\n name += ` ${user.lastName}`;\n }\n } else if (user.email) {\n initial += user.email[0].toUpperCase();\n name += user.email;\n } else {\n initial = \"??\";\n name = user.mobileNumber;\n }\n\n return (\n \n
\n {availableUsers.map((user) => {\n return (\n Project: {projectName}
\n {!!surveyName &&Survey: {surveyName}
}\n\n
\n \n \n
\n DRAFT
\n {hover && (\n \n
\n )}\n \n \n {surveyType ? (\n
\n \n \n {mode ? (\n
\n \n \n {mode ? (\n
\n {surveyType === true && timingType !== undefined && (\n \n {timingType === 1 && 15}\n {timingType === 2 && 30}\n {timingType === 3 && 45} mins\n \n )}\n \n \n {name}\n
\n \n {moment(updatedAt).format(\"DD MMMM YYYY\")}\n
\n \n
\n \n {hover && isOwner && (\n \n setShareModal(true)}\n >\n
\n \n )}\n \n setShowModal(true)}\n title=\"Delete Survey\"\n />\n
\n \n
\n \n EDIT\n
\n \n \n <>\n {surveys && (\n <>\n {isProjectOwner && (\n {\n if (publishedSurveysList.length > 0) {\n setCopySurveyPopup(true);\n } else {\n generateNewSurvey(projectId);\n }\n }}\n >\n
\n )}\n \n setTempProjectName(e.target.value)}\n className={cx(\"input-box\")}\n />\n
\n \n Are you sure you want to delete this project? All the surveys in the\n project will be deleted.\n
\n\n
\n );\n};\n\nexport const SharedFolderIcon = () => {\n return (\n Your projects
\n \n {selfProjects\n .sort((p1, p2) => {\n return (\n new Date(p2.createdAt).getTime() -\n new Date(p1.createdAt).getTime()\n );\n })\n .map((project) => (\n routeToProject(project._id)}\n >\n {project.shared.length > 0 ? (\n
\n ))}\n \n \n {project.surveyCount} Survey\n {project.surveyCount !== 1 && \"s\"} - Created by{\" \"}\n {getClientDisplayName(profile)}\n \n
\n {project.name}
\n \n \n {\n e.stopPropagation();\n }}\n />\n \n
\n Add New Project
\n \n \n \n {sharedProjects.length > 0 && (\n <>\n Projects shared with you
\n \n \n {sharedProjects\n .sort((p1, p2) => {\n return (\n new Date(p2.createdAt).getTime() -\n new Date(p1.createdAt).getTime()\n );\n })\n .map((project) => (\n routeToProject(project._id)}\n >\n {/*
\n ))}\n \n \n )}\n \n \n {project.surveyCount} Survey\n {project.surveyCount !== 1 && \"s\"} - Created by{\" \"}\n {getClientDisplayName(\n allUsers?.find(\n (user) => user.clientId === project.owner\n )\n )}\n \n
\n {project.name}
\n \n setProjectName(e.target.value)}\n className={cx(\"input-box\")}\n />\n
\n \n Are you sure you want to delete \"{projectToDelete.name}\" project?\n All the surveys in the project will be deleted.\n
\n\n \n \n \n \n \n \n \n \n \n\n \n setStep(1)}\n >\n Setup\n \n \n\n = 2 ? { backgroundColor: \"#8EDAD0\" } : {}}\n />\n\n \n setStep(2)}\n disabled={disableQuestionsPage}\n >\n Questions\n \n \n\n = 3 ? { backgroundColor: \"#8EDAD0\" } : {}}\n />\n\n \n setStep(3)}\n >\n Criteria\n \n \n\n = 4 ? { backgroundColor: \"#8EDAD0\" } : {}}\n />\n\n \n setStep(4)}\n >\n Participants\n \n \n\n = 2 ? { backgroundColor: \"#8EDAD0\" } : {}}\n />\n\n \n setStep(5)}\n >\n Publish\n \n \n
\n );\n};\n\nexport default HeaderButtons;\n","import React from \"react\";\nimport { InfoCircleOutlined } from \"@ant-design/icons\";\nimport { Typography } from \"antd\";\n\nconst Errors = ({ errors }) => {\n return (\n \n {/* \n {err.message}\n */}\n \n {err.description}\n \n
\n \n ))}\n \n );\n};\n\nexport default Errors;\n","import { useReducer, useCallback } from \"react\";\n\nconst reducer = (state, action) => {\n switch (action.type) {\n case \"ADD\": {\n const index = action.payload.index;\n const item = action.payload.item;\n return [\n ...state.slice(0, index),\n item,\n ...state.slice(index, state.length),\n ];\n }\n case \"MOVE\": {\n const result = Array.from(state);\n const startIndex = action.payload.source;\n const endIndex = action.payload.dest;\n const [removed] = result.splice(startIndex, 1);\n result.splice(endIndex, 0, removed);\n return result;\n }\n case \"REMOVE\": {\n const index = action.payload.index;\n return [\n ...state.slice(0, index),\n ...state.slice(index + 1, state.length),\n ];\n }\n case \"SET\": {\n const index = action.payload.index;\n const result = Array.from(state);\n result[index] = action.payload.item;\n return result;\n }\n case \"SETALL\":\n return action.payload.questions;\n default:\n throw Error(\"Invalid action\");\n }\n};\n\nconst useArray = (initialState = []) => {\n const [array, dispatch] = useReducer(reducer, initialState);\n\n const add = useCallback(\n (item = {}, index = array.length) => {\n dispatch({\n type: \"ADD\",\n payload: {\n index,\n item,\n },\n });\n },\n [dispatch, array.length]\n );\n\n const move = useCallback(\n (source, dest) => {\n dispatch({\n type: \"MOVE\",\n payload: {\n source,\n dest,\n },\n });\n },\n [dispatch]\n );\n\n const remove = useCallback(\n (index) => {\n dispatch({\n type: \"REMOVE\",\n payload: {\n index,\n },\n });\n },\n [dispatch]\n );\n\n const set = useCallback(\n (item, index) => {\n dispatch({\n type: \"SET\",\n payload: {\n item,\n index,\n },\n });\n },\n [dispatch]\n );\n\n return [array, { add, remove, move, set }];\n};\n\nexport default useArray;\n","import React, { useState, useEffect } from \"react\";\nimport {\n Row,\n Col,\n Input,\n Tooltip,\n Select,\n Button,\n Upload,\n message,\n Modal as Modal2,\n} from \"antd\";\nimport Modal from \"react-modal\";\nimport { ExplainerVideo } from \"../../../components/user/confused/Confused\";\nimport styles from \"./setup-style.module.css\";\nimport Errors from \"../new-survey/Errors\";\nimport useArray from \"../useArray\";\nimport {\n ExclamationCircleOutlined,\n CheckCircleOutlined,\n DownOutlined,\n UpOutlined,\n CloudUploadOutlined,\n LoadingOutlined,\n DeleteOutlined,\n PlusCircleOutlined,\n} from \"@ant-design/icons\";\nimport { InnerContainer } from \"../../../components/page-layout/PageLayout\";\nimport axios, { Routes } from \"../../../services/API\";\nimport Survey from \"../../user/survey/Survey\";\nimport { GetFilename } from \"../../../constants\";\n\nexport const RadioButton = ({ isMobile, label, onClick, selected, last }) => {\n let classes;\n if (selected) {\n classes = styles[\"selected-radio-button\"];\n } else {\n classes = styles[\"radio-button\"];\n }\n if (isMobile) {\n classes = styles[\"radio-button-mobile\"];\n }\n const lastMargin = last ? styles[\"last-button\"] : \"\";\n classes = `${classes} ${styles[\"span-col-2-3\"]}`;\n classes = `${classes} ${lastMargin}`;\n\n return (\n \n
\n (coming soon)\n
\n ) : (\n \"\"\n )}\n \n );\n};\n\nconst surveyTimingOptions = [\n {\n value: 1,\n label: \"15 mins\",\n },\n {\n value: 2,\n label: \"30 mins\",\n },\n {\n value: 3,\n label: \"45 mins\",\n },\n];\n\nconst Setup = ({\n formName,\n setFormName,\n surveyType,\n surveyAccess,\n formQuestions,\n branchingRules,\n setFormQuestions,\n setSurveyType,\n setSurveyAccess,\n device,\n setDevice,\n mode,\n setMode,\n setting,\n setSetting,\n timingType,\n setTimingType,\n errors,\n questionsErrors,\n surveyInstructions,\n setSurveyInstructions,\n brandName,\n setBrandName,\n brandLogo,\n setBrandLogo,\n guideFile,\n setGuideFile,\n hasQuestions,\n clearQuestions,\n viewOnly,\n}) => {\n const [advancedOptions, setAdvancedOptions] = useState(() => {\n return !!surveyInstructions || !!brandName || !!brandLogo || !!guideFile;\n });\n\n const [uploadingLogo, setUploadingLogo] = useState(false);\n const [uploadingGuide, setUploadingGuide] = useState(false);\n const [formModal, setFormModal] = useState(false);\n const [switchModeModal, setSwitchModeModal] = useState(false);\n const [questions, { add, remove, move, set }] = useArray(formQuestions);\n useEffect(() => {\n setFormQuestions(questions);\n }, [questions, setFormQuestions]);\n useEffect(() => {\n console.log(switchModeModal);\n }, [switchModeModal]);\n\n const modalStyles = {\n content: {\n top: \"0\",\n left: \"0\",\n width: \"100vw\",\n height: \"100vh\",\n border: 0,\n padding: 0,\n borderRadius: 0,\n },\n };\n\n const logoUploadProps = {\n accept: \".png,.PNG,.jpg,.JPG,.jpeg,.JPEG\",\n customRequest: async ({ file, onError }) => {\n const userId = localStorage.getItem(\"client\");\n const { name, type } = file;\n setUploadingLogo(true);\n const { data } = await axios({\n ...Routes.client.uploadFile(userId),\n data: { data: { name, type } },\n });\n const xhr = new XMLHttpRequest();\n xhr.open(\"PUT\", data.signedRequest);\n xhr.onreadystatechange = () => {\n if (xhr.readyState === 4) {\n if (xhr.status === 200) {\n setBrandLogo(data.url);\n message.success(`Logo uploaded successfully`);\n setUploadingLogo(false);\n } else {\n onError();\n message.error(`Logo upload failed`);\n setUploadingLogo(false);\n }\n }\n };\n xhr.send(file);\n },\n maxCount: 1,\n showUploadList: false,\n };\n\n const guideUploadProps = {\n // accept: \".png,.PNG,.jpg,.JPG,.jpeg,.JPEG,.pdf,.PDF,.doc,.DOC,.\",\n customRequest: async ({ file, onError }) => {\n const userId = localStorage.getItem(\"client\");\n const { name, type } = file;\n setUploadingGuide(true);\n const { data } = await axios({\n ...Routes.client.uploadFile(userId),\n data: { data: { name, type } },\n });\n const xhr = new XMLHttpRequest();\n xhr.open(\"PUT\", data.signedRequest);\n xhr.onreadystatechange = () => {\n if (xhr.readyState === 4) {\n if (xhr.status === 200) {\n setGuideFile(data.url);\n message.success(`Survey guide uploaded successfully`);\n setUploadingGuide(false);\n } else {\n onError();\n message.error(`Survey guide upload failed`);\n setUploadingGuide(false);\n }\n }\n };\n xhr.send(file);\n },\n maxCount: 1,\n showUploadList: false,\n };\n\n return (\n \n (coming soon)\n
Name your survey
\n\n (The name will be only visible to you)\n
\n\n Select survey options\n
\n\n (You can modify these settings later)\n
\n \n\n
\n \n \n Survey Accessibility
\n \n \n setSurveyAccess(true)}\n />\n {\n setSurveyAccess(false);\n }}\n />\n
\n \n
\n \n \n {surveyType === true && (\n Survey Type
\n \n \n setSurveyType(true)}\n />\n {\n setSurveyType(false);\n setMode(false);\n }}\n />\n
\n \n
\n \n \n )}\n {surveyType === true && mode !== undefined && (\n Survey Mode
\n \n \n setMode(false)}\n />\n {\n hasQuestions ? setSwitchModeModal(true) : setMode(true);\n }}\n />\n
\n \n
\n \n \n )}\n {surveyType === true && mode === true && device !== undefined && (\n Device
\n \n \n setDevice(false)}\n />\n {}}\n />\n
\n \n
\n \n \n )}\n {surveyType === true &&\n device !== undefined &&\n ((mode === true && setting !== undefined) || mode === false) && (\n Setting
\n \n \n setSetting(true)}\n />\n setSetting(false)}\n />\n
\n Survey Time
\n \n
\n \n \n )}\n \n \n setTimingType(value)}\n // className={styles[\"survey-time-select\"]}\n style={{ width: \"400px\" }}\n >\n {surveyTimingOptions.map(({ value, label }) => (\n \n {label}\n \n ))}\n \n
\n Survey Instructions
\nYou may add any specific instructions for the participants.
\nSurvey Branding
\nEnter company/brand name
\n{brandLogo ? \"Brand logo\" : \"Upload brand logo\"}
\n {brandLogo ? (\n\n
\n ) : (\n \n {\n setBrandLogo(\"\");\n }}\n />\n
\n \n {uploadingLogo ? (\n
\n Upload
\n Survey Discussion Guide
\nYou may upload a discussion guide for the moderator.
\n {guideFile ? (\n\n {GetFilename(guideFile, 10)}\n {\n setGuideFile(\"\");\n }}\n />\n
\n ) : (\n \n
\n Upload file
\n {uploadingGuide ? (\n \n {\n // if (questionsErrors.length !== 0) {\n // message.error(\n // \"You have errors in your form. Please fix them first.\"\n // );\n // return;\n // }\n setFormModal(true);\n }}\n >\n setFormModal(false)}\n style={modalStyles}\n >\n {formModal && (\n 0 ? [] : questions}\n rules={branchingRules}\n surveyType={surveyType}\n isOpen={formModal}\n onClose={() => setFormModal(false)}\n tryOwnForm={true}\n brandLogo={brandLogo}\n brandName={brandName}\n surveyInstructions={surveyInstructions}\n />\n )}\n \n
\n \n \n
\n \n {[...Array(options.stars)].map((_, i) => (\n \n {options.starType === \"star\" && (\n \n ))}\n
\n \n setOptions({ ...options, starType: e })}\n >\n \n \n \n \n setOptions({ ...options, stars: parseInt(e) })}\n >\n {[...Array(8)].map((_, i) => (\n \n ))}\n \n
\n \n );\n};\n\nexport default FormStar;\n","import React from \"react\";\nimport styles from \"./likert.module.css\";\nimport c from \"classnames/bind\";\nimport { CheckOutlined, InfoCircleOutlined } from \"@ant-design/icons\";\nimport { Select, Input, Tooltip } from \"antd\";\n\nconst { Option } = Select;\nconst cx = c.bind(styles);\n\nconst Cirle = () => {\n return ;\n};\n\nconst Likert = ({ options, setOptions }) => {\n return (\n \n \n {options.likertEndLabel}\n
\n \n \n\n \n {[...Array(options.likertRange)].map((e, i) => (\n
\n \n \n {options.likertStartLabel}\n
\n \n {options.likertMiddleLabel}\n
\n \n
\n \n );\n};\n\nexport default Likert;\n","import React, { useEffect, useState } from \"react\";\nimport styles from \"./slider.module.css\";\nimport c from \"classnames/bind\";\nimport { CheckOutlined, InfoCircleOutlined } from \"@ant-design/icons\";\nimport { Input, Select, Slider, Tooltip } from \"antd\";\nimport { useMediaQuery } from \"react-responsive\";\n\nconst cx = c.bind(styles);\nconst { Option } = Select;\n\nconst FormSlider = ({ options, setOptions }) => {\n const {\n sliderMin,\n sliderMax,\n sliderStartLabel,\n sliderMiddleLabel,\n sliderEndLabel,\n sliderType,\n } = options;\n\n const [sliderValue, setSliderValue] = useState(\n Math.floor((sliderMin + sliderMax) / 2)\n );\n\n const marks = {\n [sliderMin]: {\n style: {\n color: \"#004791\",\n top: -35,\n },\n label: sliderType === \"percentage\" ? sliderMin + \"%\" : sliderMin,\n },\n [sliderMax]: {\n style: {\n color: \"#004791\",\n top: -35,\n },\n label: sliderType === \"percentage\" ? sliderMax + \"%\" : sliderMax,\n },\n };\n\n // React.useEffect(() => {\n // // console.log(marks);\n // setSliderValue((sliderMin + sliderMax) / 2);\n // });\n useEffect(() => {\n setSliderValue(Math.floor((parseInt(sliderMax) + parseInt(sliderMin)) / 2));\n }, [sliderMin, sliderMax]);\n\n const isMobile = useMediaQuery({ query: \"(max-width: 400px)\" });\n\n console.log(\"slider type=\", sliderValue);\n\n return (\n \n
\n\n Range:
\n \n \n setOptions({ ...options, likertRange: value })\n }\n >\n {[...Array(8)].map((e, i) => (\n \n ))}\n \n
\n Range:
\n \n
\n\n Start Label:
\n \n \n setOptions({ ...options, likertStartLabel: e.target.value })\n }\n className=\"input-border\"\n suffix={\n options.likertStartLabel !== \"\" ? (\n \n \n )\n }\n />\n
\n \n
\n\n Middle Label:
\n \n \n setOptions({ ...options, likertMiddleLabel: e.target.value })\n }\n className=\"input-border\"\n suffix={\n
\n \n
\n End Label:
\n \n \n setOptions({ ...options, likertEndLabel: e.target.value })\n }\n className=\"input-border\"\n suffix={\n options.likertEndLabel !== \"\" ? (\n \n \n )\n }\n />\n
\n \n \n sliderType === \"percentage\" ? value + \"%\" : value\n }\n className=\"slider-type\"\n min={sliderMin}\n max={sliderMax}\n value={sliderValue}\n marks={marks}\n />\n \n {sliderEndLabel}\n
\n \n \n \n \n {sliderStartLabel}\n
\n \n {sliderMiddleLabel}\n
\n \n {\n if (value === \"percentage\") {\n setOptions({ ...options, sliderMax: 100, sliderType: value });\n } else {\n setOptions({ ...options, sliderType: value });\n }\n }}\n >\n \n \n \n
\n\n \n setOptions({ ...options, sliderMin: value })}\n >\n \n {/* */}\n \n
\n Start Value:
\n\n {\n console.log(value, typeof value);\n setOptions({ ...options, sliderMax: value });\n }}\n >\n {[...Array(98)].map((e, i) => (\n \n ))}\n \n
\n End Value:
\n\n
\n \n );\n};\n\nexport default FormSlider;\n","import React from \"react\";\nimport styles from \"./MultiChoiceOptions.module.css\";\nimport c from \"classnames/bind\";\nimport {\n CheckOutlined,\n InfoCircleOutlined,\n MenuOutlined,\n MinusCircleOutlined,\n PlusCircleOutlined,\n} from \"@ant-design/icons\";\nimport { Input, Tooltip, Checkbox } from \"antd\";\n\nconst cx = c.bind(styles);\n\nconst MultiChoiceOptions = (props) => {\n // Props\n const {\n dragHandleProps,\n choiceNumber,\n choice,\n isFilled,\n addChoice,\n removeChoice,\n totalChoices,\n setLabel,\n checkBox = false,\n setMcq,\n } = props;\n\n return (\n \n Start Label:\n
\n \n \n setOptions({ ...options, sliderStartLabel: e.target.value })\n }\n className=\"input-border\"\n suffix={\n sliderStartLabel !== \"\" ? (\n \n \n )\n }\n // placeholder={isMobile ? \"Start Label\" : \"\"}\n />\n
\n \n Middle Label:\n
\n \n \n setOptions({ ...options, sliderMiddleLabel: e.target.value })\n }\n className=\"input-border\"\n suffix={\n
\n \n End Label:\n
\n \n \n setOptions({ ...options, sliderEndLabel: e.target.value })\n }\n className=\"input-border\"\n suffix={\n sliderEndLabel !== \"\" ? (\n \n \n )\n }\n // placeholder={isMobile ? \"End Label\" : \"\"}\n />\n
\n \n
\n \n \n \n {choiceNumber}\n \n\n
\n \n setLabel(event.target.value)}\n suffix={\n isFilled ? (\n \n \n )\n }\n className=\"input-border\"\n />\n
\n \n \n );\n};\n\nexport default MultiChoiceOptions;\n","import React from \"react\";\nimport { DragDropContext, Droppable, Draggable } from \"react-beautiful-dnd\";\nimport MultiChoiceOptions from \"./MultiChoiceOptions/MultiChoiceOptions\";\n\nconst MultiChoices = ({ options, setOptions, checkBox }) => {\n // const [choiceOptions, setChoiceOptions] = useState(options.multiChoices);\n\n // const [multiChoices, { add, remove, move, set, refresh }] = useArray(options.multiChoices);\n\n const multiChoices = options.multiChoices;\n\n const add = (item, index) => {\n setOptions({\n ...options,\n multiChoices: [\n ...multiChoices.slice(0, index),\n item,\n ...multiChoices.slice(index, multiChoices.length),\n ],\n });\n };\n\n const move = (source, dest) => {\n const result = Array.from(multiChoices);\n const [removed] = result.splice(source, 1);\n result.splice(dest, 0, removed);\n setOptions({ ...options, multiChoices: result });\n };\n\n const remove = (index) => {\n setOptions({\n ...options,\n multiChoices: [\n ...multiChoices.slice(0, index),\n ...multiChoices.slice(index + 1, multiChoices.length),\n ],\n });\n };\n\n const set = (item, index) => {\n const result = Array.from(multiChoices);\n result[index] = item;\n setOptions({ ...options, multiChoices: result });\n };\n\n const setOptionValue = (value, key, index) => {\n const result = { ...multiChoices[index], [key]: value };\n set(result, index);\n };\n\n // useEffect(() => {\n // setOptions({ ...options, multiChoices: multiChoices });\n // // eslint-disable-next-line\n // }, [multiChoices]);\n\n // useEffect(() => {\n // // if(options.multiChoices !== multiChoices){\n // // options.multiChoices.map((c,ind)=>{\n // // set(c, ind);\n // // })\n // // }/ useEffect(() => {\n // // if(options.multiChoices !== multiChoices){\n // // options.multiChoices.map((c,ind)=>{\n // // set(c, ind);\n // // })\n // // }\n // refresh(options.multiChoices)\n // }, [opt\n // refresh(options.multiChoices)\n // }, [options]);\n\n return (\n \n {\n \n addChoice(choiceNumber)}\n className={\n checkBox ? \"action-icon action-icon-checkbox\" : \"action-icon\"\n }\n />\n {totalChoices > 2 && (\n removeChoice(choiceNumber)}\n />\n )}\n {checkBox && (\n \n setMcq(e.target.checked)}\n >\n \n )}\n
\n }\n {/* \n {checkBox &&
*/}\n \n
\n \n \n {choiceNumber}\n
\n \n
\n \n );\n};\n\nexport default ImageMultiChoiceOptions;\n","import React from \"react\";\nimport { DragDropContext, Droppable, Draggable } from \"react-beautiful-dnd\";\nimport ImageMultiChoicesOptions from \"./imageMultiChoicesOptions/imageMultiChoicesOptions\";\nimport useArray from \"../../useArray\";\n\nconst ImageMultiChoices = ({ options, setOptions, checkBox }) => {\n // const [multiChoices, { add, remove, move, set }] = useArray(\n // options.imageMultiChoices\n // );\n\n const imageMultiChoices = options.imageMultiChoices;\n\n const add = (item, index) => {\n setOptions({\n ...options,\n imageMultiChoices: [\n ...imageMultiChoices.slice(0, index),\n item,\n ...imageMultiChoices.slice(index, imageMultiChoices.length),\n ],\n });\n };\n\n const move = (source, dest) => {\n const result = Array.from(imageMultiChoices);\n const [removed] = result.splice(source, 1);\n result.splice(dest, 0, removed);\n setOptions({ ...options, imageMultiChoices: result });\n };\n\n const remove = (index) => {\n setOptions({\n ...options,\n imageMultiChoices: [\n ...imageMultiChoices.slice(0, index),\n ...imageMultiChoices.slice(index + 1, imageMultiChoices.length),\n ],\n });\n };\n\n const set = (item, index) => {\n const result = Array.from(imageMultiChoices);\n result[index] = item;\n setOptions({ ...options, imageMultiChoices: result });\n };\n\n const setOptionValue = (value, key, index) => {\n if (key == \"imageLabel\") {\n const result = {\n ...imageMultiChoices[index],\n imageLabel: value.imageLabel,\n imageData: value.imageData,\n };\n set(result, index);\n } else {\n const result = { ...imageMultiChoices[index], [key]: value };\n set(result, index);\n }\n console.log(options);\n };\n\n return (\n \n
\n {\n \n \n setLabel({\n imageLabel: event.target.value,\n imageData: choice.imageData,\n })\n }\n suffix={\n isFilled.imageLabel ? (\n \n \n )\n }\n className=\"input-border\"\n />\n
\n \n \n setLabel({\n imageLabel: choice.imageLabel,\n imageData: event.target.value,\n })\n }\n suffix={\n isFilled.imageData ? (\n \n \n )\n }\n className=\"input-border\"\n />\n \n \n \n
\n \n addChoice(choiceNumber)}\n className=\"action-icon\"\n />\n {totalChoices > 2 && (\n removeChoice(choiceNumber)}\n />\n )}\n {checkBox && (\n \n setMcq(e.target.checked)}\n >\n \n )}\n
\n }\n \n
\n \n \n {choiceNumber}\n
\n \n \n \n \n \n
\n \n \n );\n};\n\nexport default ImageMultiChoiceOptions;\n","import React, { Fragment, useEffect } from \"react\";\nimport { DragDropContext, Droppable, Draggable } from \"react-beautiful-dnd\";\nimport ImageMultiChoicesOptions from \"./imageMultiChoicesOptions/imageMultiChoicesOptions\";\nimport FormStar from \"../form-star/FormStar\";\n\nconst ImageStarRating = ({ options, setOptions }) => {\n // const [multiChoices, { add, remove, move, set }] = useArray(\n // options.imageStarRatingChoices\n // );\n\n const imageStarRatingChoices = options.imageStarRatingChoices;\n\n const add = (item, index) => {\n setOptions({\n ...options,\n imageStarRatingChoices: [\n ...imageStarRatingChoices.slice(0, index),\n item,\n ...imageStarRatingChoices.slice(index, imageStarRatingChoices.length),\n ],\n });\n };\n\n const move = (source, dest) => {\n const result = Array.from(imageStarRatingChoices);\n const [removed] = result.splice(source, 1);\n result.splice(dest, 0, removed);\n setOptions({ ...options, imageStarRatingChoices: result });\n };\n\n const remove = (index) => {\n setOptions({\n ...options,\n imageStarRatingChoices: [\n ...imageStarRatingChoices.slice(0, index),\n ...imageStarRatingChoices.slice(\n index + 1,\n imageStarRatingChoices.length\n ),\n ],\n });\n };\n\n const set = (item, index) => {\n const result = Array.from(imageStarRatingChoices);\n result[index] = item;\n setOptions({ ...options, imageStarRatingChoices: result });\n };\n\n const setOptionValue = (item, index) => {\n set(item, index);\n };\n\n const setStarValue = (item) => {\n console.log(\"star\", item);\n setOptions({\n ...options,\n imageStar: item.stars,\n imageStarType: item.starType,\n });\n };\n\n return (\n \n
\n \n \n setLabel({\n imageLabel: event.target.value,\n imageData: choice.imageData,\n })\n }\n suffix={\n isFilled.imageLabel ? (\n \n \n )\n }\n className=\"input-border\"\n />\n
\n \n \n setLabel({\n imageLabel: choice.imageLabel,\n imageData: event.target.value,\n })\n }\n suffix={\n isFilled.imageData ? (\n \n \n )\n }\n className=\"input-border\"\n />\n
\n \n addChoice(choiceNumber)}\n className=\"action-icon\"\n />\n {totalChoices > 1 && (\n removeChoice(choiceNumber)}\n />\n )}\n {/* {checkBox && (\n
\n \n
\n )} */}\n \n \n Range:\n
\n \n
\n );\n};\n\nexport default VideoInstruction;\n","import React, { useState } from \"react\";\nimport styles from \"./videoStarRatingChoices.module.css\";\nimport c from \"classnames/bind\";\nimport {\n CheckOutlined,\n InfoCircleOutlined,\n MenuOutlined,\n MinusCircleOutlined,\n PlusCircleOutlined,\n LoadingOutlined,\n} from \"@ant-design/icons\";\nimport { Input, Tooltip, Upload, message, Button } from \"antd\";\nimport { useMediaQuery } from \"react-responsive\";\nimport axios, { Routes } from \"../../../../../services/API\";\nimport { GetFilename } from \"../../../../../constants\";\n\nconst cx = c.bind(styles);\n\nconst VideoStarRatingChoices = (props) => {\n // Props\n const {\n dragHandleProps,\n choiceNumber,\n choice,\n isFilled,\n addChoice,\n removeChoice,\n totalChoices,\n setLabel,\n checkBox,\n } = props;\n\n const [uploading, setUploading] = useState(false);\n const isDesktop = useMediaQuery({ query: \"(min-width: 1000px)\" });\n const uploadProps = {\n accept: \".mp4,.webm,.ogg\",\n customRequest: async function ({ file, onError }) {\n const userId = localStorage.getItem(\"client\");\n const { name, type } = file;\n setUploading(true);\n const { data } = await axios({\n ...Routes.client.uploadFile(userId),\n data: { data: { name, type } },\n });\n const xhr = new XMLHttpRequest();\n xhr.open(\"PUT\", data.signedRequest);\n xhr.onreadystatechange = () => {\n if (xhr.readyState === 4) {\n if (xhr.status === 200) {\n choice.videoData = data.url;\n setLabel({\n videoLabel: choice.videoLabel,\n videoData: data.url,\n });\n message.success(`${file.name} file uploaded successfully`);\n setUploading(false);\n } else {\n onError();\n message.error(`${file.name} file upload failed.`);\n setUploading(false);\n }\n }\n };\n xhr.send(file);\n },\n };\n\n return (\n \n
\n \n \n \n \n \n setOptions({ ...options, videoData: event.target.value })\n }\n suffix={\n options.videoData !== \"\" ? (\n \n \n )\n }\n className=\"input-border\"\n />\n
\n \n \n setOptions({ ...options, videoLabel: event.target.value })\n }\n suffix={\n options.videoLabel !== \"\" ? (\n
\n \n \n
\n \n {choiceNumber}\n
\n \n
\n \n );\n};\n\nexport default VideoStarRatingChoices;\n","import React, { Fragment } from \"react\";\nimport { DragDropContext, Droppable, Draggable } from \"react-beautiful-dnd\";\nimport useArray from \"../../useArray\";\nimport FormStar from \"../form-star/FormStar\";\nimport VideoStarRatingChoices from \"./videoStarRatingChoices/videoStarRatingChoices\";\n\nconst VideoStarRating = ({ options, setOptions }) => {\n // const [multiChoices, { add, remove, move, set }] = useArray(\n // options.videoStarRatingChoices\n // );\n\n const videoStarRatingChoices = options.videoStarRatingChoices;\n\n const add = (item, index) => {\n setOptions({\n ...options,\n videoStarRatingChoices: [\n ...videoStarRatingChoices.slice(0, index),\n item,\n ...videoStarRatingChoices.slice(index, videoStarRatingChoices.length),\n ],\n });\n };\n\n const move = (source, dest) => {\n const result = Array.from(videoStarRatingChoices);\n const [removed] = result.splice(source, 1);\n result.splice(dest, 0, removed);\n setOptions({ ...options, videoStarRatingChoices: result });\n };\n\n const remove = (index) => {\n setOptions({\n ...options,\n videoStarRatingChoices: [\n ...videoStarRatingChoices.slice(0, index),\n ...videoStarRatingChoices.slice(\n index + 1,\n videoStarRatingChoices.length\n ),\n ],\n });\n };\n\n const set = (item, index) => {\n const result = Array.from(videoStarRatingChoices);\n result[index] = item;\n setOptions({ ...options, videoStarRatingChoices: result });\n };\n\n const setOptionValue = (item, index) => {\n set(item, index);\n };\n\n const setStarValue = (item) => {\n console.log(\"star\", item);\n setOptions({\n ...options,\n videoStar: item.stars,\n videoStarType: item.starType,\n });\n };\n\n return (\n \n
\n \n \n setLabel({\n videoLabel: event.target.value,\n videoData: choice.videoData,\n })\n }\n suffix={\n isFilled.videoLabel ? (\n \n \n )\n }\n className=\"input-border\"\n />\n
\n \n \n setLabel({\n videoLabel: choice.videoLabel,\n videoData: event.target.value,\n })\n }\n suffix={\n isFilled.videoData ? (\n \n \n )\n }\n className=\"input-border\"\n />\n
\n \n \n \n \n {\n
\n \n addChoice(choiceNumber)}\n className=\"action-icon\"\n />\n {totalChoices > 1 && (\n removeChoice(choiceNumber)}\n />\n )}\n
\n }\n \n
\n \n \n {choiceNumber}\n
\n \n
\n \n );\n};\n\nexport default TextABTestChoices;\n","import React from \"react\";\nimport { DragDropContext, Droppable, Draggable } from \"react-beautiful-dnd\";\nimport useArray from \"../../useArray\";\nimport TextABTestChoices from \"./textABTestChoices/TextABTestChoices\";\n\nconst TextABTest = ({ options, setOptions, checkBox }) => {\n // const [multiChoices, { add, remove, move, set }] = useArray(\n // options.textABTestChoices\n // );\n\n const textABTestChoices = options.textABTestChoices;\n\n const add = (item, index) => {\n setOptions({\n ...options,\n textABTestChoices: [\n ...textABTestChoices.slice(0, index),\n item,\n ...textABTestChoices.slice(index, textABTestChoices.length),\n ],\n });\n };\n\n const move = (source, dest) => {\n const result = Array.from(textABTestChoices);\n const [removed] = result.splice(source, 1);\n result.splice(dest, 0, removed);\n setOptions({ ...options, textABTestChoices: result });\n };\n\n const remove = (index) => {\n setOptions({\n ...options,\n textABTestChoices: [\n ...textABTestChoices.slice(0, index),\n ...textABTestChoices.slice(index + 1, textABTestChoices.length),\n ],\n });\n };\n\n const set = (item, index) => {\n const result = Array.from(textABTestChoices);\n result[index] = item;\n setOptions({ ...options, textABTestChoices: result });\n };\n\n const setOptionValue = (item, index) => {\n set(item, index);\n };\n\n return (\n \n
\n \n \n setValue({ ...choice, inputWord: event.target.value })\n }\n suffix={\n isFilled.inputWord ? (\n \n \n )\n }\n className=\"input-border\"\n />\n
\n \n
\n \n \n setValue({ ...choice, percentage: event.target.value })\n }\n suffix={\n \n \n %\n \n {isFilled.percentage ? (\n \n \n )}\n \n }\n className=\"input-border\"\n />\n
\n {\n \n addChoice(choiceNumber)}\n className=\"action-icon\"\n />\n {totalChoices > 2 && (\n removeChoice(choiceNumber)}\n />\n )}\n
\n }\n \n
\n \n \n {choiceNumber}\n
\n \n
\n \n );\n};\n\nexport default ImageABTestChoices;\n","import React from \"react\";\nimport { DragDropContext, Droppable, Draggable } from \"react-beautiful-dnd\";\nimport useArray from \"../../useArray\";\nimport ImageABTestChoices from \"./imageABTestChoices/ImageABTestChoices\";\n\nconst ImageABTest = ({ options, setOptions, checkBox }) => {\n // const [multiChoices, { add, remove, move, set }] = useArray(\n // options.imageABTestChoices\n // );\n\n const imageABTestChoices = options.imageABTestChoices;\n\n const add = (item, index) => {\n setOptions({\n ...options,\n imageABTestChoices: [\n ...imageABTestChoices.slice(0, index),\n item,\n ...imageABTestChoices.slice(index, imageABTestChoices.length),\n ],\n });\n };\n\n const move = (source, dest) => {\n const result = Array.from(imageABTestChoices);\n const [removed] = result.splice(source, 1);\n result.splice(dest, 0, removed);\n setOptions({ ...options, imageABTestChoices: result });\n };\n\n const remove = (index) => {\n setOptions({\n ...options,\n imageABTestChoices: [\n ...imageABTestChoices.slice(0, index),\n ...imageABTestChoices.slice(index + 1, imageABTestChoices.length),\n ],\n });\n };\n\n const set = (item, index) => {\n const result = Array.from(imageABTestChoices);\n result[index] = item;\n setOptions({ ...options, imageABTestChoices: result });\n };\n\n const setOptionValue = (item, index) => {\n set(item, index);\n };\n\n return (\n \n
\n \n \n setValue({ ...choice, imageLabel: event.target.value })\n }\n // suffix={\n // isFilled.imageLabel ? (\n // \n // \n // )\n // }\n className=\"input-border\"\n />\n
\n \n \n setValue({ ...choice, imageData: event.target.value })\n }\n suffix={\n isFilled.imageData ? (\n \n \n )\n }\n className=\"input-border\"\n />\n \n \n \n
\n \n
\n \n \n setValue({ ...choice, percentage: event.target.value })\n }\n suffix={\n \n \n %\n \n {isFilled.percentage ? (\n \n \n )}\n \n }\n className=\"input-border\"\n />\n
\n {\n \n addChoice(choiceNumber)}\n className=\"action-icon\"\n />\n {totalChoices > 2 && (\n removeChoice(choiceNumber)}\n />\n )}\n
\n }\n \n
\n \n \n {choiceNumber}\n
\n \n
\n \n );\n};\n\nexport default VideoABTestChoices;\n","import React from \"react\";\nimport { DragDropContext, Droppable, Draggable } from \"react-beautiful-dnd\";\nimport useArray from \"../../useArray\";\nimport VideoABTestChoices from \"./videoABTestChoices/VideoABTestChoices\";\n\nconst VideoABTest = ({ options, setOptions }) => {\n // const [multiChoices, { add, remove, move, set }] = useArray(\n // options.videoABTestChoices\n // );\n\n const videoABTestChoices = options.videoABTestChoices;\n\n const add = (item, index) => {\n setOptions({\n ...options,\n videoABTestChoices: [\n ...videoABTestChoices.slice(0, index),\n item,\n ...videoABTestChoices.slice(index, videoABTestChoices.length),\n ],\n });\n };\n\n const move = (source, dest) => {\n const result = Array.from(videoABTestChoices);\n const [removed] = result.splice(source, 1);\n result.splice(dest, 0, removed);\n setOptions({ ...options, videoABTestChoices: result });\n };\n\n const remove = (index) => {\n setOptions({\n ...options,\n videoABTestChoices: [\n ...videoABTestChoices.slice(0, index),\n ...videoABTestChoices.slice(index + 1, videoABTestChoices.length),\n ],\n });\n };\n\n const set = (item, index) => {\n const result = Array.from(videoABTestChoices);\n result[index] = item;\n setOptions({ ...options, videoABTestChoices: result });\n };\n\n const setOptionValue = (item, index) => {\n set(item, index);\n };\n\n return (\n \n
\n \n \n setValue({ ...choice, videoLabel: event.target.value })\n }\n // suffix={\n // isFilled.videoLabel ? (\n // \n // \n // )\n // }\n className=\"input-border\"\n />\n
\n \n \n setValue({ ...choice, videoData: event.target.value })\n }\n suffix={\n isFilled.videoData ? (\n \n \n )\n }\n className=\"input-border\"\n />\n \n \n \n
\n \n
\n \n \n setValue({ ...choice, percentage: event.target.value })\n }\n suffix={\n \n \n %\n \n {isFilled.percentage ? (\n \n \n )}\n \n }\n className=\"input-border\"\n />\n
\n {\n \n addChoice(choiceNumber)}\n className=\"action-icon\"\n />\n {totalChoices > 2 && (\n removeChoice(choiceNumber)}\n />\n )}\n
\n }\n \n
\n \n \n {choiceNumber}\n
\n \n
\n \n );\n};\n\nexport default AssociationChoices;\n","import React from \"react\";\nimport { DragDropContext, Droppable, Draggable } from \"react-beautiful-dnd\";\nimport useArray from \"../../useArray\";\nimport AssociationChoices from \"./associationChoices/AssociationChoices\";\n\nconst Association = ({ options, setOptions }) => {\n // const [multiChoices, { add, remove, move, set }] = useArray(\n // options.associationChoices\n // );\n\n const associationChoices = options.associationChoices;\n\n const add = (item, index) => {\n setOptions({\n ...options,\n associationChoices: [\n ...associationChoices.slice(0, index),\n item,\n ...associationChoices.slice(index, associationChoices.length),\n ],\n });\n };\n\n const move = (source, dest) => {\n const result = Array.from(associationChoices);\n const [removed] = result.splice(source, 1);\n result.splice(dest, 0, removed);\n setOptions({ ...options, associationChoices: result });\n };\n\n const remove = (index) => {\n setOptions({\n ...options,\n associationChoices: [\n ...associationChoices.slice(0, index),\n ...associationChoices.slice(index + 1, associationChoices.length),\n ],\n });\n };\n\n const set = (item, index) => {\n const result = Array.from(associationChoices);\n result[index] = item;\n setOptions({ ...options, associationChoices: result });\n };\n\n const setOptionValue = (item, index) => {\n set(item, index);\n };\n\n return (\n \n
\n \n \n setValue({ ...choice, label: event.target.value })\n }\n suffix={\n isFilled.label ? (\n \n \n )\n }\n className=\"input-border\"\n />\n
\n \n \n setValue({ ...choice, association: event.target.value })\n }\n suffix={\n isFilled.association ? (\n \n \n )\n }\n className=\"input-border\"\n />\n
\n \n {\n
\n \n addChoice(choiceNumber)}\n className=\"action-icon\"\n />\n {totalChoices > 2 && (\n removeChoice(choiceNumber)}\n />\n )}\n
\n }\n \n
\n \n \n {choiceNumber}\n
\n \n \n {\n
\n \n \n );\n};\n\nexport default ImageAssociationChoices;\n","import React from \"react\";\nimport { DragDropContext, Droppable, Draggable } from \"react-beautiful-dnd\";\nimport useArray from \"../../useArray\";\nimport ImageAssociationChoices from \"./ImageAssociationChoices/ImageAssociationChoices\";\n\nconst ImageAssociation = ({ options, setOptions }) => {\n // const [multiChoices, { add, remove, move, set }] = useArray(\n // options.imageAssociationChoices\n // );\n\n const imageAssociationChoices = options.imageAssociationChoices;\n\n const add = (item, index) => {\n setOptions({\n ...options,\n imageAssociationChoices: [\n ...imageAssociationChoices.slice(0, index),\n item,\n ...imageAssociationChoices.slice(index, imageAssociationChoices.length),\n ],\n });\n };\n\n const move = (source, dest) => {\n const result = Array.from(imageAssociationChoices);\n const [removed] = result.splice(source, 1);\n result.splice(dest, 0, removed);\n setOptions({ ...options, imageAssociationChoices: result });\n };\n\n const remove = (index) => {\n setOptions({\n ...options,\n imageAssociationChoices: [\n ...imageAssociationChoices.slice(0, index),\n ...imageAssociationChoices.slice(\n index + 1,\n imageAssociationChoices.length\n ),\n ],\n });\n };\n\n const set = (item, index) => {\n const result = Array.from(imageAssociationChoices);\n result[index] = item;\n setOptions({ ...options, imageAssociationChoices: result });\n };\n\n const setOptionValue = (item, index) => {\n set(item, index);\n };\n\n return (\n \n
\n \n \n setValue({ ...choice, imageData: event.target.value })\n }\n suffix={\n isFilled.imageData ? (\n \n \n )\n }\n className=\"input-border\"\n />\n \n \n \n
\n \n \n setValue({ ...choice, association: event.target.value })\n }\n suffix={\n isFilled.association ? (\n \n \n )\n }\n className=\"input-border\"\n />\n
\n \n addChoice(choiceNumber)}\n className=\"action-icon\"\n />\n {totalChoices > 2 && (\n removeChoice(choiceNumber)}\n />\n )}\n
\n }\n \n
\n \n \n {choiceNumber}\n
\n \n \n {\n
\n \n \n );\n};\n\nexport default VideoAssociationChoices;\n","import React from \"react\";\nimport { DragDropContext, Droppable, Draggable } from \"react-beautiful-dnd\";\nimport useArray from \"../../useArray\";\nimport VideoAssociationChoices from \"./VideoAssociationChoices/VideoAssociationChoices\";\n\nconst VideoAssociation = ({ options, setOptions }) => {\n // const [multiChoices, { add, remove, move, set }] = useArray(\n // options.videoAssociationChoices\n // );\n\n const videoAssociationChoices = options.videoAssociationChoices;\n\n const add = (item, index) => {\n setOptions({\n ...options,\n videoAssociationChoices: [\n ...videoAssociationChoices.slice(0, index),\n item,\n ...videoAssociationChoices.slice(index, videoAssociationChoices.length),\n ],\n });\n };\n\n const move = (source, dest) => {\n const result = Array.from(videoAssociationChoices);\n const [removed] = result.splice(source, 1);\n result.splice(dest, 0, removed);\n setOptions({ ...options, videoAssociationChoices: result });\n };\n\n const remove = (index) => {\n setOptions({\n ...options,\n videoAssociationChoices: [\n ...videoAssociationChoices.slice(0, index),\n ...videoAssociationChoices.slice(\n index + 1,\n videoAssociationChoices.length\n ),\n ],\n });\n };\n\n const set = (item, index) => {\n const result = Array.from(videoAssociationChoices);\n result[index] = item;\n setOptions({ ...options, videoAssociationChoices: result });\n };\n\n const setOptionValue = (item, index) => {\n set(item, index);\n };\n\n return (\n \n
\n \n \n setValue({ ...choice, videoData: event.target.value })\n }\n suffix={\n isFilled.videoData ? (\n \n \n )\n }\n className=\"input-border\"\n />\n \n \n \n
\n \n \n setValue({ ...choice, association: event.target.value })\n }\n suffix={\n isFilled.association ? (\n \n \n )\n }\n className=\"input-border\"\n />\n
\n \n addChoice(choiceNumber)}\n className=\"action-icon\"\n />\n {totalChoices > 2 && (\n removeChoice(choiceNumber)}\n />\n )}\n
\n }\n \n {/*
\n );\n};\n\nexport default QuestionInstruction;\n","import React from \"react\";\nimport styles from \"./AddLink.module.css\";\nimport c from \"classnames/bind\";\nimport { Input, Tooltip } from \"antd\";\nimport { CheckOutlined, InfoCircleOutlined } from \"@ant-design/icons\";\nimport { urlPattern } from \"../../../../constants\";\n\nconst cx = c.bind(styles);\n\nconst AddLink = ({ link, setLink }) => {\n return (\n \n \n
*/}\n \n Upload File{uploading ?
\n \n \n {options.questionInstruction ? (\n \n setOptions({\n ...options,\n questionInstruction: event.target.value,\n })\n }\n suffix={\n options.questionInstruction ? (\n \n \n )\n }\n className=\"input-border\"\n />\n ) : null}\n
\n \n setLink(event.target.value)}\n suffix={\n urlPattern.test(link) ? (\n \n \n )\n }\n className=\"input-border\"\n />\n
\n );\n};\n\nexport default AddLink;\n","import React, { useState } from \"react\";\nimport styles from \"./imageInstruction.module.css\";\nimport c from \"classnames/bind\";\nimport {\n CheckOutlined,\n InfoCircleOutlined,\n LoadingOutlined,\n} from \"@ant-design/icons\";\nimport { Input, Tooltip, message, Upload, Button, Spin } from \"antd\";\nimport axios, { Routes } from \"../../../../services/API\";\nimport { GetFilename } from \"../../../../constants\";\n\nconst cx = c.bind(styles);\n\nconst ImageInstruction = ({ options, setOptions }) => {\n const [uploading, setUploading] = useState(false);\n const uploadProps = {\n accept: \".png,.PNG,.jpg,.JPG,.jpeg,.JPEG,.jif,.JIF,.gif,.GIF\",\n customRequest: async function ({ file, onError }) {\n const userId = localStorage.getItem(\"client\");\n const { name, type } = file;\n setUploading(true);\n const { data } = await axios({\n ...Routes.client.uploadFile(userId),\n data: { data: { name, type } },\n });\n const xhr = new XMLHttpRequest();\n xhr.open(\"PUT\", data.signedRequest);\n xhr.onreadystatechange = () => {\n if (xhr.readyState === 4) {\n if (xhr.status === 200) {\n options.imageData = data.url;\n setOptions({\n ...options,\n imageData: data.url,\n });\n message.success(`${file.name} file uploaded successfully`);\n setUploading(false);\n } else {\n onError();\n message.error(`${file.name} file upload failed.`);\n setUploading(false);\n }\n }\n };\n xhr.send(file);\n },\n };\n\n return (\n \n
\n );\n};\n\nexport default ImageInstruction;\n","import React, { Fragment, useState } from \"react\";\nimport styles from \"./VideoMultiChoicesOptions.module.css\";\nimport c from \"classnames/bind\";\nimport {\n CheckOutlined,\n InfoCircleOutlined,\n MenuOutlined,\n MinusCircleOutlined,\n PlusCircleOutlined,\n LoadingOutlined,\n} from \"@ant-design/icons\";\nimport { Input, Tooltip, Upload, message, Button, Checkbox, Spin } from \"antd\";\nimport axios, { Routes } from \"../../../../../services/API\";\nimport { GetFilename } from \"../../../../../constants\";\n\nconst cx = c.bind(styles);\n\nconst VideoMultiChoiceOptions = (props) => {\n // Props\n const {\n dragHandleProps,\n choiceNumber,\n choice,\n isFilled,\n addChoice,\n removeChoice,\n totalChoices,\n setLabel,\n checkBox = false,\n setMcq,\n } = props;\n\n const [uploading, setUploading] = useState(false);\n const uploadProps = {\n accept: \".mp4,.webm,.ogg\",\n customRequest: async function ({ file, onError }) {\n const userId = localStorage.getItem(\"client\");\n const { name, type } = file;\n setUploading(true);\n const { data } = await axios({\n ...Routes.client.uploadFile(userId),\n data: { data: { name, type } },\n });\n const xhr = new XMLHttpRequest();\n xhr.open(\"PUT\", data.signedRequest);\n xhr.onreadystatechange = () => {\n if (xhr.readyState === 4) {\n if (xhr.status === 200) {\n choice.videoData = data.url;\n setLabel({\n videoLabel: choice.videoLabel,\n videoData: data.url,\n });\n message.success(`${file.name} file uploaded successfully`);\n setUploading(false);\n } else {\n onError();\n message.error(`${file.name} file upload failed.`);\n setUploading(false);\n }\n }\n };\n xhr.send(file);\n },\n };\n\n return (\n \n
\n \n \n \n \n \n setOptions({ ...options, imageData: event.target.value })\n }\n suffix={\n options.imageData !== \"\" ? (\n \n \n )\n }\n className=\"input-border\"\n />\n
\n \n \n setOptions({ ...options, imageLabel: event.target.value })\n }\n suffix={\n options.imageLabel !== \"\" ? (\n
\n \n
\n \n \n {choiceNumber}\n
\n \n
\n \n );\n};\n\nexport default VideoMultiChoiceOptions;\n","import React, { Fragment } from \"react\";\nimport { DragDropContext, Droppable, Draggable } from \"react-beautiful-dnd\";\nimport useArray from \"../../useArray\";\nimport VideoMultiChoiceOptions from \"./videoMultiChoicesOptions/VideoMultiChoicesOptions\";\n\nconst VideoMultiChoices = ({ options, setOptions, checkBox }) => {\n // const [multiChoices, { add, remove, move, set }] = useArray(\n // options.videoMultiChoices\n // );\n\n const videoMultiChoices = options.videoMultiChoices;\n\n const add = (item, index) => {\n setOptions({\n ...options,\n videoMultiChoices: [\n ...videoMultiChoices.slice(0, index),\n item,\n ...videoMultiChoices.slice(index, videoMultiChoices.length),\n ],\n });\n };\n\n const move = (source, dest) => {\n const result = Array.from(videoMultiChoices);\n const [removed] = result.splice(source, 1);\n result.splice(dest, 0, removed);\n setOptions({ ...options, videoMultiChoices: result });\n };\n\n const remove = (index) => {\n setOptions({\n ...options,\n videoMultiChoices: [\n ...videoMultiChoices.slice(0, index),\n ...videoMultiChoices.slice(index + 1, videoMultiChoices.length),\n ],\n });\n };\n\n const set = (item, index) => {\n const result = Array.from(videoMultiChoices);\n result[index] = item;\n setOptions({ ...options, videoMultiChoices: result });\n };\n\n const setOptionValue = (value, key, index) => {\n if (key == \"videoLabel\") {\n const result = {\n ...videoMultiChoices[index],\n videoLabel: value.videoLabel,\n videoData: value.videoData,\n };\n set(result, index);\n } else {\n const result = { ...videoMultiChoices[index], [key]: value };\n set(result, index);\n }\n console.log(options);\n };\n\n return (\n \n
\n {\n \n \n setLabel({\n videoLabel: event.target.value,\n videoData: choice.videoData,\n })\n }\n suffix={\n isFilled.videoLabel ? (\n \n \n )\n }\n className=\"input-border\"\n />\n
\n \n \n setLabel({\n videoLabel: choice.videoLabel,\n videoData: event.target.value,\n })\n }\n suffix={\n isFilled.videoData ? (\n \n \n )\n }\n className=\"input-border\"\n />\n \n \n \n
\n \n addChoice(choiceNumber)}\n className=\"action-icon\"\n />\n {totalChoices > 2 && (\n removeChoice(choiceNumber)}\n />\n )}\n {/* {checkBox && (\n \n setMcq(e.target.checked)}\n >\n \n )}\n
\n }\n \n
\n )} */}\n {checkBox && (\n \n {/* {console.log(menu)} */}\n {menu}\n
\n )}\n onChange={(value) => setOptions({ ...options, npsOption: value })}\n >\n {items.map((item, index) => (\n \n Specific company, brand, product or service:\n
\n \n setCompany(e.target.value)}\n />\n
\n \n \n Save\n \n toggleOpen(e, false)}\n >\n CANCEL\n \n
\n \n
\n \n );\n};\n\nexport default SurveyBrief;\n","import React, { Fragment, useState } from \"react\";\nimport styles from \"./ad-analysis-choices.module.css\";\nimport { useMediaQuery } from \"react-responsive\";\nimport c from \"classnames/bind\";\nimport {\n CheckOutlined,\n InfoCircleOutlined,\n MenuOutlined,\n MinusCircleOutlined,\n PlusCircleOutlined,\n LoadingOutlined,\n} from \"@ant-design/icons\";\nimport { Input, Checkbox, Tooltip, Upload, message, Select, Spin } from \"antd\";\nimport axios, { Routes } from \"../../../../services/API\";\nimport { GetFilename } from \"../../../../constants\";\n\nconst cx = c.bind(styles);\n\nconst AdAnalysisChoices = (props) => {\n // Props\n const {\n dragHandleProps,\n choiceNumber,\n choice,\n isFilled,\n addChoice,\n removeChoice,\n totalChoices,\n setLabel,\n checkBox,\n } = props;\n\n const [isChoiceNumberShown, setIsChoiceNumberShown] = useState(true);\n const [uploading, setUploading] = useState(false);\n const isDesktop = useMediaQuery({ query: \"(max-width: 1000px)\" });\n const uploadProps = {\n accept: \".mp4,.webm,.ogg\",\n customRequest: async function ({ file, onError }) {\n const userId = localStorage.getItem(\"client\");\n const { name, type } = file;\n setUploading(true);\n const { data } = await axios({\n ...Routes.client.uploadFile(userId),\n data: { data: { name, type } },\n });\n const xhr = new XMLHttpRequest();\n xhr.open(\"PUT\", data.signedRequest);\n xhr.onreadystatechange = () => {\n if (xhr.readyState === 4) {\n if (xhr.status === 200) {\n choice.videoData = data.url;\n setLabel({\n videoData: data.url,\n videoType: choice.videoType,\n });\n message.success(`${file.name} file uploaded successfully`);\n setUploading(false);\n } else {\n onError();\n message.error(`${file.name} file upload failed.`);\n setUploading(false);\n }\n }\n };\n xhr.send(file);\n },\n };\n\n return (\n \n
\n\n \n \n \n Upload File{uploading ?
\n \n \n {options.surveyBrief ? (\n \n setOptions({\n ...options,\n surveyBrief: event.target.value,\n })\n }\n suffix={\n options.surveyBrief ? (\n \n \n )\n }\n className=\"input-border\"\n />\n ) : null}\n
\n \n
\n \n {isChoiceNumberShown ? (\n {choiceNumber}\n ) : (\n
\n \n
\n \n );\n};\n\nexport default AdAnalysisChoices;\n","import React, { useState } from \"react\";\nimport { Fragment } from \"react\";\nimport ReactPlayer from \"react-player\";\nimport Modal from \"react-responsive-modal\";\n\nexport const Vmodal = ({ isOpen, onCancel, videoUrl }) => {\n console.log(\"video\", videoUrl);\n return (\n \n
\n \n \n setLabel({\n videoType: value,\n videoData: choice.videoData,\n })\n }\n >\n Filler \n Main Video \n \n
\n \n \n setLabel({\n videoLabel: choice.videoLabel,\n videoData: event.target.value,\n })\n }\n suffix={\n isFilled.videoData ? (\n \n \n )\n }\n className=\"input-border\"\n />\n
\n \n \n
\n \n \n Upload Video\n \n
\n \n {isDesktop || !isChoiceNumberShown ? (\n \n addChoice(choiceNumber)}\n className=\"action-icon\"\n />\n {totalChoices > 2 && (\n removeChoice(choiceNumber)}\n />\n )}\n {/* {checkBox && (\n
\n ) : null}\n \n
\n )} */}\n \n \n move(result.source.index, result.destination.index)\n }\n >\n \n {(provided) => (\n \n {adAnalysisChoices &&\n adAnalysisChoices.map((choice, index) => (\n \n {(provided) => (\n \n setOptionValue(item, index)}\n totalChoices={adAnalysisChoices.length}\n isFilled={{\n videoType: choice.Type !== \"\",\n videoData: choice.videoData !== \"\",\n }}\n addChoice={(newIndex) =>\n add({ videoData: \"\" }, newIndex)\n }\n removeChoice={(index) => remove(index - 1)}\n />\n
\n )}\n \n ))}\n {provided.placeholder}\n \n )}\n \n \n \n \n
\n \n );\n};\n\nexport default AdAnalysis;\n","import React, { useEffect, useState } from \"react\";\nimport styles from \"./survey.module.css\";\nimport c from \"classnames/bind\";\nimport { LogoutOutlined, RightOutlined, LinkOutlined } from \"@ant-design/icons\";\nimport { InputNumber, Modal as AntdModal, Card, Button } from \"antd\";\nimport { useMediaQuery } from \"react-responsive\";\nimport { RemoveScrollBar } from \"react-remove-scroll-bar\";\nimport RobotLarge from \"../../../assets/robot-large.png\";\nimport logo from \"../../../assets/logo.png\";\nimport Text from \"../../../components/user/survey-questions/text/Text\";\nimport MultipleChoice from \"../../../components/user/survey-questions/multiple-choice/MultipleChoice\";\nimport Checkboxes from \"../../../components/user/survey-questions/checkboxes/Checkboxes\";\nimport StarRating from \"../../../components/user/survey-questions/star-rating/StarRating\";\nimport SliderType from \"../../../components/user/survey-questions/slider/Slider\";\nimport Likert from \"../../../components/user/survey-questions/likert/Likert\";\nimport NPS from \"../../../components/user/survey-questions/nps/NPS\";\nimport Ranking from \"../../../components/user/survey-questions/ranking/Ranking\";\nimport Dropdown from \"../../../components/user/survey-questions/dropdown/Dropdown\";\nimport Association from \"../../../components/user/survey-questions/association/Association\";\nimport ImageInstructions from \"../../../components/user/survey-questions/image/instructions/ImageInstructions\";\nimport ImageComment from \"../../../components/user/survey-questions/image/comment/ImageComment\";\nimport ImageMultipleChoice from \"../../../components/user/survey-questions/image/multiple-choice/ImageMultipleChoice\";\nimport ImageCheckboxes from \"../../../components/user/survey-questions/image/checkboxes/ImageCheckboxes\";\nimport ImageRating from \"../../../components/user/survey-questions/image/rating/ImageRating\";\nimport ImageRanking from \"../../../components/user/survey-questions/image/ranking/ImageRanking\";\nimport ImageAssociation from \"../../../components/user/survey-questions/image/association/ImageAssociation\";\nimport Modal from \"react-modal\";\nimport VideoInstruction from \"../../../components/user/survey-questions/video/instruction/VideoInstruction\";\nimport VideoRating from \"../../../components/user/survey-questions/video/rating/VideoRating\";\nimport VideoAssociation from \"../../../components/user/survey-questions/video/association/VideoAssociation\";\nimport VideoRanking from \"../../../components/user/survey-questions/video/ranking/VideoRanking\";\nimport VideoMultipleChoice from \"../../../components/user/survey-questions/video/multiple-choice/VideoMultipleChoice\";\nimport VideoCheckboxes from \"../../../components/user/survey-questions/video/checkboxes/VideoCheckboxes\";\nimport VideoComment from \"../../../components/user/survey-questions/video/comment/VideoComment\";\nimport CheckboxesSpecial from \"../../../components/user/profile-questions/checkboxes-special/CheckboxesSpecial\";\nimport AdAnalysis from \"../../../components/user/survey-questions/ad-analysis/AdAnalysis\";\nimport { useRef } from \"react\";\n\nconst modalStyles = {\n content: {\n top: \"0\",\n left: \"0\",\n width: \"100vw\",\n height: \"100vh\",\n border: 0,\n padding: 0,\n borderRadius: 0,\n },\n};\n\nconst cx = c.bind(styles);\n\nlet answer = [];\n\nconst SurveyQuestion = ({\n question = [],\n isOpen,\n onClose,\n tryOwnForm = false,\n brandLogo = \"\",\n qNo,\n}) => {\n // Hooks\n const TopBarResponsive = useMediaQuery({ query: \"(max-width: 960px)\" });\n const isTablet = useMediaQuery({ query: \"(max-width: 800px)\" });\n const videoRef = useRef(null);\n console.log(\"Running\");\n useEffect(() => {\n // Populate answers with empty array\n answer = [];\n console.log(\"population done\");\n }, []);\n\n useEffect(() => {\n if (isOpen && !tryOwnForm) {\n getVideo();\n }\n }, [videoRef, isOpen, tryOwnForm]);\n\n const getVideo = () => {\n navigator.mediaDevices\n .getUserMedia({ video: { width: 300 } })\n .then((stream) => {\n let videoObject = videoRef.current;\n videoObject.srcObject = stream;\n videoObject.play();\n })\n .catch((err) => {\n console.error(\"error:\", err);\n });\n };\n\n // Derived state\n const getQuestionText = () => {\n const { type, text, options } = question;\n\n switch (type) {\n case \"netPromotorScore\":\n const { npsOption } = options;\n return `How likely is it that you would recommend ${npsOption} to a friend or collegue?`;\n default:\n return text;\n }\n };\n\n const getComponentByQuestionType = () => {\n const { type, options } = question;\n\n const onChange = (values) => {\n answer = Array.isArray(values) ? values : [values];\n };\n\n if (answer) {\n switch (type) {\n case \"text\":\n return \n \n 16:9 \n 1:1 \n 9:16 \n 5:4 \n \n \n Fit with border \n \n \n Combine{combining ? setView(true)}\n >\n View\n \n {view && (\n setView(false)}\n videoUrl={adAnalysisData.url}\n />\n )}\n
\n \n {TopBarResponsive ? (\n
\n ) : (\n <>\n \n \n QUIT SURVEY
\n )}\n \n
\n {isTablet ? (\n \n
\n \n {/* QUESTION */}\n
\n\n {question.hasLink ? (\n \n \n {question && getQuestionText()}\n
\n \n \n {qNo}\n
\n\n \n {question && getComponentByQuestionType()}\n
\n )}\n \n \n •
\n \n
\n \n \n
\n \n \n {index + 1}\n
\n \n {question.type === \"netPromotorScore\" ? (\n \n
\n ) : (\n \n tryQuestionHandler()}\n >\n Try Question\n \n\n {\n setQuestion({ ...question, hasLink: !hasLink });\n }}\n >\n Add Link\n \n
\n \n \n {typeof questionTypes[question.type] === \"function\" && (\n }\n {hasLink ? (\n
}\n
\n \n \n \n {isTabletOrMobile ?
\n Branching Logic
\n\n \n SAVE RULE\n \n removeRule(ruleIndex)}\n >\n Delete Rule\n \n
\n \n \n CONDITIONS (IF ANSWER TO)\n
\n {ruleObject.questions.map((_, questionIndex) => (\n <>\n \n ACTIONS (THEN)\n
\n {ruleObject.actions.map((_, actionIndex) => (\n \n \n Back to Survey\n \n \n SAVE BRANCHING LOGIC\n \n
*/}\n \n \n Select/De-select dates{\" \"}\n
\n {\n value.sort((a, b) => (utils().isBeforeDate(a, b) ? -1 : 1));\n setModeratedSlots(dateToObject(value));\n }}\n calendarClassName={cx(\"calendar\")}\n />\n
\n\n {moderatedSlots && Object.keys(moderatedSlots).length > 0 ? (\n \n Select/De-select dates{\" \"}\n \n \n
\n \n
\n ) : null}\n\n {selectedDate && Object.keys(moderatedSlots).length > 0 ? (\n \n {Object.keys(moderatedSlots).map((date, idx) => (\n {\n setSelectedDate(date);\n }}\n selected={{\n isSelectedDate: selectedDate === date,\n isTimeSlotSelected:\n Object.keys(moderatedSlots[date]).length > 0,\n }}\n />\n ))}\n
\n \n
\n ) : null}\n \n \n ) : null}\n \n {times.map((e, i) => (\n {\n if (selectedDate && moderatedSlots[selectedDate]) {\n let timeExists = false;\n const date = moderatedSlots[selectedDate];\n Object.keys(date).forEach((time) => {\n if (time === e.value) timeExists = true;\n });\n if (!timeExists)\n moderatedSlots[selectedDate][e.value] = [];\n else delete moderatedSlots[selectedDate][e.value];\n setModeratedSlots(moderatedSlots);\n }\n }}\n />\n ))}\n
\n \n \n Number of Participants\n {/*
\n
\n {!isGroupSurvey && (\n \n Number of Participants\n {/* \n */}\n
\n \n (We recommend atleast 5 users per survey)\n
\n\n setNumberOfParticipants(e.target.value)}\n className={cx(\"input-box\")}\n />\n \n setNumberOfParticipants((Number(numberOfParticipants) || 0) + 1)\n }\n />\n {\n e.stopPropagation();\n if (numberOfParticipants > 1)\n setNumberOfParticipants(\n (Number(numberOfParticipants) || 0) - 1\n );\n }}\n />\n
\n )}\n {isGroupSurvey && (\n \n
\n )}\n {/* {mode === true && setting === true ? (\n <>\n {totalGroupParticipants}
\n\n
\n Number of groups
\n\n
\n \n ) : null} */}\n \n
\n Price Per Participant
\n\n
\n\n Rs. {surveyPrice}
\n\n
\n Total
\n\n
\n \n \n Rs. {surveyPrice * numberOfParticipants}{\" \"}\n (Including GST)\n
\nFilter users
\n\n Use the below filters to create the perfect sample set of users for\n your survey.\n
\n \n {adminQuestions && (\n \n {adminQuestions\n .filter(\n (e, i) =>\n e.isActive === true &&\n e.criteriaType === false &&\n !!e.clientField &&\n (showAllFilters || i < 6)\n )\n .map((e, i) => (\n {\n if (!checkQuestionInCriteria(e[\"_id\"]))\n setCriteria([\n ...criteria,\n {\n questionId: e[\"_id\"],\n answer: [],\n ratios: [],\n selectedValues: [],\n },\n ]);\n else\n setCriteria(\n criteria.filter((cr) => cr.questionId !== e[\"_id\"])\n );\n }}\n key={i}\n >\n {capitalizeFirstCharacter(e.clientField)}\n \n ))}\n
\n \n \n {[\n \"multipleChoice\",\n \"checkboxes\",\n \"location\",\n \"checkboxesSpecial\",\n ].includes(\n getQuestion(e.questionId, adminQuestions).questionObject\n .questionType\n ) &&\n getQuestion(\n e.questionId,\n adminQuestions\n ).questionObject.options.map((opt, idx) => (\n \n {\n const res = [...criteria];\n const exists = e.answer.includes(idx);\n if (exists) {\n res[i].answer = e.answer.filter((it) => it !== idx);\n } else {\n res[i].answer.push(idx);\n }\n setCriteria(res);\n }}\n />\n {opt}\n \n ))}\n {getQuestion(e.questionId, adminQuestions).questionObject\n .questionType === \"age\" &&\n getAgeRange({\n start: getQuestion(e.questionId, adminQuestions)\n .questionObject.start,\n end: getQuestion(e.questionId, adminQuestions).questionObject\n .end,\n interval: getQuestion(e.questionId, adminQuestions)\n .questionObject.interval,\n }).map((el, index) => (\n \n e.answer.includes(r))}\n className={cx(\"option-button-icon\")}\n onChange={(event) => {\n const res = [...criteria];\n const exists = el.value.every((r) =>\n e.answer.includes(r)\n );\n if (exists) {\n res[i].answer = e.answer.filter(\n (it) => !el.value.includes(it)\n );\n } else {\n el.value.forEach((x) => res[i].answer.push(x));\n }\n setCriteria(res);\n }}\n />\n {el.label}\n \n ))}\n
\n \n ))}\n \n setQuestion({ ...question, text: e.target.value })}\n />\n
\n )}\n \n );\n};\n\nexport default AdditionalCriteria;\n","import React from \"react\";\nimport { capitalizeFirstCharacter } from \"../../../utils\";\nimport { Row, Radio, Checkbox, Col } from \"antd\";\nimport { DeleteOutlined } from \"@ant-design/icons\";\nimport c from \"classnames/bind\";\nimport styles from \"./criteria.module.css\";\nconst cx = c.bind(styles);\n\nconst ScreeningQuestion = ({\n screeningQuestions,\n i,\n setScreeningQuestions,\n question,\n remove,\n}) => {\n return (\n \n {\n setQuestion({ ...question, hasLink: !question.hasLink });\n }}\n >\n Add Link\n \n )}\n
\n \n {question.hasLink && (\n setQuestion({ ...question, link })}\n />\n )}\n {question.type !== \"default\" && (\n
\n \n \n setQuestion({ ...question, options })\n }\n />\n
\n )}\n \n \n \n {\n remove(i);\n }}\n />\n \n
\n
\n );\n};\n\nexport default ScreeningQuestion;\n","import React, { Fragment, useState, useEffect } from \"react\";\nimport { Button, Row, Col, notification } from \"antd\";\nimport { CloseCircleOutlined } from \"@ant-design/icons\";\nimport c from \"classnames/bind\";\nimport { CustomModal } from \"../Components\";\nimport useArray from \"../useArray\";\nimport styles from \"./criteria.module.css\";\nimport AdditionalCriteria from \"./AdditionalCriteria\";\nimport ScreeningQuestion from \"./ScreeningQuestion\";\n\nconst cx = c.bind(styles);\n\nconst questionTemplate = {\n questionObject: {\n text: \"\",\n hasLink: false,\n link: \"\",\n type: \"default\",\n options: {\n multiChoices: [\n {\n label: \"\",\n },\n {\n label: \"\",\n },\n ],\n },\n },\n answer: [],\n};\n\nconst AddScreeningQuestion = ({\n screeningQuestions,\n setScreeningQuestions,\n}) => {\n const [modal, setModal] = useState(false);\n const [incompleteQues, setIncompleteQues] = useState(questionTemplate);\n const [questions, { add, remove }] = useArray(screeningQuestions);\n\n useEffect(() => {\n setScreeningQuestions(questions);\n }, [questions, setScreeningQuestions]);\n\n const checkAdditionalQuestion = () => {\n const { questionObject } = incompleteQues;\n const text = questionObject.text === \"\" ? false : true;\n const type = questionObject.type === \"default\" ? false : true;\n const options =\n questionObject.options.multiChoices.filter((item) => item.label === \"\")\n .length > 0\n ? false\n : true;\n console.log(options);\n if (text && type && options) return true;\n else return false;\n };\n\n const handleOk = () => {\n if (checkAdditionalQuestion()) {\n add(incompleteQues);\n setModal(false);\n setIncompleteQues(questionTemplate);\n } else {\n notification.error({\n message: \"Please complete the question first\",\n });\n }\n };\n\n return (\n \n {question.questionObject.options.multiChoices.map((opt, idx) => (\n \n ))}\n
\n \n \n Add screening questions\n
\n\n Only participants who answer all the screening questions correctly\n will be able to take the survey.\n
\n \n \n {\n setIncompleteQues(questionTemplate);\n setModal(false);\n }}\n width={600}\n maskClosable={false}\n okText=\"Add Question\"\n onOk={handleOk}\n closeIcon={\n \n setIncompleteQues({ answer: [], questionObject })\n }\n />\n \n
\n \n
\n ) : null}\n {criteriaObject ? (\n Object.keys(criteriaObject).map((c, i) => {\n return (\n \n \n {[\n \"multipleChoice\",\n \"checkboxes\",\n \"location\",\n \"checkboxesSpecial\",\n ].includes(\n getQuestion(c, adminQuestions).questionObject.questionType\n )\n ? criteriaObject[c].selectedValues.map((x, i) => {\n return (\n \n handleOptionChange(e, c, i)}\n >\n {getQuestion(\n c,\n adminQuestions\n ).questionObject.options.map((opt, idx) => {\n return criteria\n .find((o) => o.questionId === c)\n ?.answer?.includes(idx) &&\n checkSelectedOption(c, idx, i) ? (\n \n ) : null;\n })}\n {i === 0 ? (\n \n ) : null}\n \n handleRatioChange(c, e, i)}\n disabled={\n criteriaObject[c].selectedValues.length ===\n 1 &&\n criteriaObject[c].selectedValues[0] === -1\n }\n defaultValue={100}\n value={\n criteriaObject[c].selectedValues.length ===\n 1 &&\n criteriaObject[c].selectedValues[0] === -1\n ? 100\n : criteriaObject[c].ratios[\n criteriaObject[c].selectedValues[i]\n ]\n }\n >\n {ratios.map((r) => {\n return (\n \n );\n })}\n \n {i ==\n criteriaObject[c].selectedValues.length - 1 &&\n criteria.find((o) => o.questionId === c)?.answer\n .length >\n i + 1 &&\n criteriaObject[c].selectedValues[0] != -1 ? (\n handleAdd(c, i)}\n style={{ margin: \"auto\", fontSize: \"1rem\" }}\n />\n ) : null}\n
\n );\n })\n : null}\n\n {getQuestion(c, adminQuestions).questionObject\n .questionType === \"age\"\n ? criteriaObject[c].selectedValues.map((x, i) => {\n return (\n \n
\n \n Create user groups\n
\n {`You can filter participants based on ${oxford(\n criteriaListClient\n )}`}
\n \n \n \n \n editHandler(group.index)}\n style={{ cursor: \"pointer\" }}\n >\n EDIT\n
\n \n {`${group.name}${\n group.numberOfParticipants\n ? ` - ${group.numberOfParticipants} participants`\n : \"\"\n }`}\n
\n \n {group.criteria.map((criterion) => (\n
\n \n \n );\n};\n\nexport default GroupContainer;\n","import React, { useEffect } from \"react\";\nimport { Button, Card } from \"antd\";\nimport RatioModal from \"./Modals/RatioModal/RatioModal\";\nimport { useState } from \"react\";\nimport { oxford, getQuestion } from \"./CriteriaUtils.js\";\nimport RatioDescription from \"./RatioDescription\";\n\nconst criteriaHasRatios = (criteria) => {\n if (!criteria) return false;\n return criteria.some((criterion) => {\n return (\n criterion?.selectedValues?.length &&\n criterion.selectedValues.some((selectedValue) => selectedValue !== -1)\n );\n });\n};\n\nconst RatioContainer = ({ criteria, adminQuestions, setCriteria }) => {\n const [isRatioModalVisible, setIsRatioModalVisible] = useState(false);\n const [criteriaListClient, setCriteriaListClient] = useState([]);\n const [hasRatios, setHasRatios] = useState(false);\n\n useEffect(() => {\n setHasRatios(criteriaHasRatios(criteria));\n }, [criteria]);\n\n //When criteria changes, update each group's criteria and criteria list diplayed on the UI\n useEffect(() => {\n //update Criteria list\n const newCriteriaListClient = criteria.map((criterion) => {\n return getQuestion(criterion.questionId, adminQuestions).clientField;\n });\n setCriteriaListClient(newCriteriaListClient);\n }, [criteria]);\n\n const showRatioModal = () => {\n setIsRatioModalVisible(true);\n };\n\n const hideRatioModal = () => {\n setIsRatioModalVisible(false);\n };\n\n return (\n <>\n \n
\n Add Ratios
\n {`You can add ratios for ${oxford(criteriaListClient)}`}
\n \n \n \n
\n Ratios:
\n \n {criteria.map((criterion) => (\n
\n \n \n )}\n \n );\n};\n\nexport default RatioContainer;\n","import React, { Fragment, useEffect } from \"react\";\nimport Errors from \"../new-survey/Errors\";\nimport FilterUsers from \"./FilterUsers\";\nimport AddScreeningQuestion from \"./AddScreeningQuestion\";\nimport { InnerContainer } from \"../../../components/page-layout/PageLayout\";\nimport GroupContainer from \"./GroupContainer\";\nimport RatioContainer from \"./RatioContainer\";\n\nconst Criteria = ({\n adminQuestions,\n criteria,\n setCriteria,\n groups,\n surveyAccess,\n setGroups,\n isGroupSurvey,\n screeningQuestions,\n setScreeningQuestions,\n errors,\n viewOnly,\n}) => {\n const innerContainerStyle = {\n padding: 40,\n marginTop: 32,\n pointerEvents: viewOnly ? \"none\" : \"auto\",\n };\n useEffect(() => {\n if(surveyAccess) setCriteria([])\n }, [surveyAccess])\n\n return (\n \n Userqual participants\n
\n \n \n \n \n Upload CSV\n \n \n
\n );\n};\n\nexport default UploadCSV;\n","import React, { Fragment, useState } from \"react\";\nimport { notify } from \"../../../utils\";\nimport { DeleteOutlined } from \"@ant-design/icons\";\nimport { Switch, Tag, Row, Col, Input } from \"antd\";\nimport UploadCSV from \"./UploadCSV\";\nimport { BASEURL, EMAIL_VALIDATION_REGEX } from \"../../../constants\";\nimport c from \"classnames/bind\";\nimport styles from \"./criteria.module.css\";\n\nconst cx = c.bind(styles);\n\nconst ImportParticipants = ({\n useImportedUsers,\n setUseImportedUsers,\n clientProvidedUsers,\n setClientProvidedUsers,\n}) => {\n const [userEmail, setUserEmail] = useState(\"\");\n\n return (\n \n Import your participants\n
\n \n Bulk upload from excel file
\n\n Upload .csv file with the list of users.{\" \"}\n \n Download sample\n \n
\n \n Add individual users
\nAre you sure you want to delete the panel ?
\n \n );\n};\n\nexport default DeletePanelUserConfirmModal;\n","import React, { useEffect, useState } from \"react\";\nimport { Fragment } from \"react\";\nimport {\n Table,\n Modal,\n Dropdown,\n Menu,\n Button,\n Checkbox,\n Card,\n List,\n Radio,\n} from \"antd\";\nimport { FilterFilled, CloseSquareFilled } from \"@ant-design/icons\";\nimport moment from \"moment\";\nimport \"./CopyPanelModal.css\";\nimport \"./CopyPanelModal.module.css\";\nimport styles from \"./CopyPanelModal.module.css\";\nimport c from \"classnames/bind\";\nimport axios, { Routes } from \"../../../../../services/API\";\nimport { getClientId } from \"../../../../../utils\";\nimport handleNetworkErrors from \"../../../handleNetworkErrors\";\nconst RadioGroup = Radio.Group;\nconst months = [\n \"Jan\",\n \"Feb\",\n \"Mar\",\n \"Apr\",\n \"May\",\n \"Jun\",\n \"Jul\",\n \"Aug\",\n \"Sep\",\n \"Oct\",\n \"Nov\",\n \"Dec\",\n];\nconst cx = c.bind(styles);\n\nconst filters = [\n {\n text: \"Qualitative\",\n value: \"Qualitative\",\n },\n {\n text: \"Quantitative\",\n value: \"Quantitative\",\n },\n {\n text: \"Moderated\",\n value: \"Moderated\",\n },\n {\n text: \"UnModerated\",\n value: \"UnModerated\",\n },\n /* {\n text: \"Mobile\",\n value: \"Mobile\",\n },\n {\n text: \"Desktop\",\n value: \"Desktop\",\n }, */\n {\n text: \"Group\",\n value: \"Group\",\n },\n {\n text: \"Individual\",\n value: \"Individual\",\n },\n {\n text: \"15 min\",\n value: \"15 min\",\n },\n {\n text: \"30 min\",\n value: \"30 min\",\n },\n {\n text: \"45 min\",\n value: \"45 min\",\n },\n {\n text: \"Custom Panels\",\n value: \"Custom Panels\",\n },\n];\n\nconst CopyPanelModal = ({ surveyList, isVisible, handleOk, handleCancel }) => {\n const [selectedSurvey, setSelectedSurvey] = useState(null);\n const [filterVisible, setFilterVisible] = useState(false);\n const [appliedFilters, setAppliedFilters] = useState([]);\n const [radioState, setRadioState] = useState(null);\n const [customPanels, setCustomPanels] = useState([]);\n const timing = {\n 1: \"15 min\",\n 2: \"30 min\",\n 3: \"45 min\",\n };\n\n useEffect(() => {\n (async () => {\n try {\n const { data } = await axios({\n ...Routes.client.getPanels(getClientId()),\n });\n setCustomPanels(data.panels);\n } catch (err) {\n handleNetworkErrors(err);\n }\n })();\n }, []);\n\n const surveyListColumns = [\n {\n title: \"Name\",\n dataIndex: \"name\",\n fixed: true,\n width: 100,\n },\n {\n title: \"Published Date\",\n dataIndex: \"date\",\n sorter: (a, b) => new Date(a.date) - new Date(b.date),\n render: (date) => moment(date).format(\"DD MMM YYYY\"),\n align: \"center\",\n },\n {\n title: \"Survey Type\",\n dataIndex: \"type\",\n },\n Table.SELECTION_COLUMN,\n ];\n\n const getSurveyType = (survey) => {\n let type = \"\";\n type += survey.surveyType ? \"Qual\" : \"Quant\";\n if (survey.surveyType) {\n type += \"/\" + (survey.mode ? \"Mod\" : \"unmod\");\n type += \"/\" + (survey.device ? \"Mobile\" : \"Desktop\");\n if (survey.mode) {\n type += \"/\" + (survey.setting ? \"Group\" : \"Individual\");\n }\n type += \"/\" + timing[survey.timingType];\n }\n return type;\n };\n\n const getSurveyTags = (survey) => {\n let tags = [];\n tags.push(survey.surveyType ? \"Qualitative\" : \"Quantitative\");\n if (survey.surveyType) {\n tags.push(survey.mode ? \"Moderated\" : \"UnModerated\");\n tags.push(survey.device ? \"Mobile\" : \"Desktop\");\n if (survey.mode) {\n tags.push(survey.setting ? \"Group\" : \"Individual\");\n }\n tags.push(timing[survey.timingType]);\n }\n return tags;\n };\n\n const handleRadioSelection = (e) => {\n const surveyObj = {\n ...e.target.value.survey,\n isSurvey: e.target.value.isSurvey,\n };\n setSelectedSurvey(surveyObj);\n };\n\n const getSurveyData = () => {\n return surveyList\n .filter((publishedSurvey) => publishedSurvey?.responses?.length)\n .map((publishedSurvey, index) => {\n return {\n key: publishedSurvey._id,\n name: publishedSurvey.name,\n date: publishedSurvey.createdAt,\n type: getSurveyType(publishedSurvey),\n tags: getSurveyTags(publishedSurvey),\n survey: publishedSurvey,\n isSurvey: true,\n };\n })\n .filter(({ tags }) => {\n if (appliedFilters.length === 0) {\n return true;\n }\n if (\n appliedFilters.length === 1 &&\n appliedFilters.includes(\"Custom Panels\")\n ) {\n return false;\n }\n return appliedFilters.some((f) => tags.includes(f));\n });\n };\n\n const includeCustomPanels = () => {\n if (\n appliedFilters.length === 0 ||\n appliedFilters.includes(\"Custom Panels\")\n ) {\n return true;\n }\n return false;\n };\n\n const getCustomPanelsData = () => {\n return includeCustomPanels()\n ? customPanels\n .filter((customPanel) => customPanel?.users?.length)\n .map((customPanel, index) => {\n return {\n key: customPanel._id,\n name: customPanel.name,\n date: \"\",\n type: \"\",\n tags: [\"Custom Panel\"],\n survey: customPanel,\n isSurvey: false,\n };\n })\n : [];\n };\n\n const surveyListData = [...getSurveyData(), ...getCustomPanelsData()];\n\n const rowSelection = {\n onChange: (selectedRowKeys, selectedRows) => {\n const surveyObj = {\n ...selectedRows[0].survey,\n isSurvey: selectedRows[0].isSurvey,\n };\n setSelectedSurvey(surveyObj);\n },\n };\n\n return (\nSelect any one past survey
\n \n \n \n {item.date && new Date(item.date).getUTCDate()}\n
\n {it}
\n ) : (\n {it}/
\n );\n })}\n \n \n \n \n
\n \n \n \n Past survey participants\n
\n \n Add users from previous survey
\n\n All the users from selected survey will be added to this\n survey.\n
\n \n \n Add participants\n
\n\n You can either import your own users or source users from Userqual.\n
\n \n Publish survey
\n\n \n Are you sure you want to publish this survey? All the users added\n will be notified about this survey. You can also copy the below link\n and share it with other users. You can later copy this link from\n published survey page.\n
\n ) : (\n \n Copy the below link to share this survey with other users. Users\n will need to login with mobile OTP or email to take the survey. You\n can also download the QR code to access the survey through a QR\n scan.\n
\n )}\n \n
\n \n \n {\n navigator.clipboard.writeText(surveyLink);\n }\n }\n >\n Copy Link\n \n
\n \n {\n downloadQRCode();\n }}\n >\n Download QR Code\n \n
\n {isOpenModerated && !isPublish && \n {\n generateOpenModLink()\n }\n }\n >\n Generate New Link\n \n
\n }\n \n {!!survey.name ? `${survey.name}` : \"Create Survey\"}\n
\n Created by {createdBy}
\n {moment(updatedAt).format(\"DD/MM/YYYY\")}
\n \n {surveyType === true ? \"Qualitative\" : \"Quantitative\"}\n
\n )}\n {surveyType === true && mode !== undefined && (\n {mode === true ? \"Moderated\" : \"Unmoderated\"}
\n )}\n {surveyType === true && device !== undefined && (\n \n {device === true ?
\n )}\n {surveyType === true &&\n mode === true &&\n setting !== undefined && (\n \n {setting === true ?
\n )}\n {surveyType === true && timingType !== undefined && (\n \n {timingType === 1 && \"15 mins\"}\n {timingType === 2 && \"30 mins\"}\n {timingType === 3 && \"45 mins\"}\n
\n )}\n {surveyType === false && (\n \n
\n )}\n \n {!hideTitle && (\n \n Select/De-select dates{\" \"}\n
\n )}\n {\n value.sort((a, b) => (utils().isBeforeDate(a, b) ? -1 : 1));\n const slots = dateToObject(value);\n setModeratedSlots({ ...slots, ...bookedSlots });\n }}\n calendarClassName={cx(\"calendar\")}\n />\n
\n {moderatedSlots && Object.keys(moderatedSlots).length > 0 ? (\n \n Select/De-select dates{\" \"}\n \n \n
\n )}\n \n
\n ) : null}\n {selectedDate && Object.keys(moderatedSlots).length > 0 ? (\n \n {Object.keys(moderatedSlots).map((date, idx) => (\n {\n if (selectedDate === date) setSelectedDate(null);\n else setSelectedDate(date);\n }}\n selected={{\n isSelectedDate: selectedDate === date,\n isTimeSlotSelected:\n Object.keys(moderatedSlots[date]).length > 0,\n }}\n />\n ))}\n
\n \n
\n ) : null}\n \n );\n};\n\nexport default CalendarComponent;\n","import React, { useState, Fragment, useEffect } from \"react\";\nimport { Modal, Button, InputNumber, notification, Divider } from \"antd\";\nimport {\n CloseSquareFilled,\n MinusOutlined,\n PlusOutlined,\n} from \"@ant-design/icons\";\nimport TagsInput from \"react-tagsinput\";\nimport { useMediaQuery } from \"react-responsive\";\n\nimport styles from \"./SurveyStateModal.module.css\";\nimport c from \"classnames/bind\";\nimport { surveyStates, EMAIL_VALIDATION_REGEX } from \"../../../../../constants\";\n// import UploadCSV from \"../../../criteria/UploadCSV\";\nimport { notify } from \"../../../../../utils\";\nimport CalendarComponent from \"../CalendarComponent\";\n\nconst cx = c.bind(styles);\n\nconst SurveyStateModal = ({\n handleOk,\n handleCancel,\n updateSurvey,\n isVisible,\n surveyState,\n survey,\n surveyCost,\n}) => {\n const preBookedSlots = survey.moderatedSlots\n ? JSON.parse(JSON.stringify(survey.moderatedSlots))\n : null;\n const [addParticipantBox, setAddParticipantBox] = useState(false);\n const [numberOfParticipants, setNumberOfParticipants] = useState(0);\n const [clientProvidedUsers, setClientProvidedUsers] = useState([]);\n const [moderatedSlots, setModeratedSlots] = useState(preBookedSlots);\n // const [calendarComponent, setCalendarComponent] = useState(false);\n const isTabletOrMobile = useMediaQuery({\n query: \"(max-width: 500px)\",\n });\n\n useEffect(() => {\n setNumberOfParticipants(clientProvidedUsers.length);\n }, [clientProvidedUsers]);\n\n useEffect(() => {\n setAddParticipantBox(false);\n }, []);\n\n // useEffect(() => {\n // setCalendarComponent(false);\n // }, [addParticipantBox]);\n\n const handleAddParticipants = () => {\n let newValues = {};\n if (survey.usersType) {\n if (clientProvidedUsers.length === numberOfParticipants) {\n newValues = {\n ...newValues,\n clientProvidedUsers: [\n ...survey.clientProvidedUsers,\n ...clientProvidedUsers,\n ],\n };\n } else {\n notification.error({\n message:\n \"Number of participants are not matching with number of emails\",\n });\n return;\n }\n }\n newValues = {\n ...newValues,\n numberOfParticipants: numberOfParticipants + survey.numberOfParticipants,\n };\n if (survey.mode) {\n newValues = {\n ...newValues,\n moderatedSlots: moderatedSlots,\n };\n }\n updateSurvey(newValues);\n };\n\n return (\n \n {times.map((e, i) => (\n {\n if (selectedDate && moderatedSlots[selectedDate]) {\n const slots = { ...moderatedSlots };\n let timeExists = false;\n const date = slots[selectedDate];\n Object.keys(date).forEach((time) => {\n if (time === e.value) timeExists = true;\n });\n if (!timeExists) slots[selectedDate][e.value] = [];\n else delete slots[selectedDate][e.value];\n setModeratedSlots(slots);\n }\n }}\n />\n ))}\n
\n \n You can add more participants to the existing survey, this will not\n affect your existing data.\n
\n \n )}\n {addParticipantBox ? (\n \n
\n \n \n \n {survey.numberOfParticipants}\n
\n \n Current participant count\n
\n \n Price per participant\n
\n \n
\n Total additional cost
\n Including 18% GST
\n \n
\n Enter user emails
\n\n setClientProvidedUsers(tags)}\n onlyUnique={true}\n inputProps={{\n className: \"react-tagsinput-input\",\n placeholder: \"Add email\",\n }}\n tagProps={{\n className: \"react-tagsinput-tag\",\n classNameRemove: \"react-tagsinput-remove\",\n style: {\n backgroundColor: \"#00233F\",\n border: 0,\n color: \"white\",\n },\n }}\n validationRegex={EMAIL_VALIDATION_REGEX}\n onValidationReject={() =>\n notify(\"error\", \"Error\", \"Invalid email\")\n }\n />\n
\n {/* \n Modify survey dates\n
\n \n
\n ) : (\n \n
\n Add more participants
\n \n setAddParticipantBox(true)}\n >\n Add Participants\n \n
\n \n You can add more participants to the existing survey, this will\n not affect your existing data.\n
\n \n
\n Pause survey
\n \n handleOk(surveyStates.PAUSE)}\n >\n Pause Survey\n \n
\n \n You can pause the survey temporarily, resume anytime from this\n menu.\n
\n \n
\n End survey
\n \n handleOk(surveyStates.END)}\n >\n End Survey\n \n
\n \n This will terminate the survey. You cannot undo this action, you\n can view survey data in result section.\n
\n \n
\n )}\n \n );\n};\n\nexport default SurveyStateModal;\n","import React, {useRef} from \"react\";\n\nimport \"./meeting.css\";\nimport AgoraVideoCall from \"../../../components/AgoraVideoCall\";\nimport { AGORA_APP_ID } from \"../../../agora.config\";\n\nclass Meeting extends React.Component {\n constructor(props) {\n super(props);\n this.videoProfile = \"480p_4\";\n this.channel =props.surveyAccess? `${props.token}` : `${props.surveyId}_${props.date}_${props.time}`;\n this.transcode = \"interop\";\n this.attendeeMode = \"video\";\n this.baseMode = \"avc\";\n this.appId = AGORA_APP_ID;\n this.uid = undefined;\n this.meeId = props.surveyId;\n this.date = props.date;\n this.time = props.time;\n this.isClient = props.isClient;\n this.isOneToOne = props.isOneToOne;\n }\n\n render() {\n return (\n \n
\n Restart survey
\n \n handleOk(surveyStates.IN_PROGRESS)}\n >\n Restart Survey\n \n
\n \n This will resume the survey and make it available to the users.\n
\n \n
\n End survey
\n \n handleOk(surveyStates.END)}\n >\n End Survey\n \n
\n \n This will terminate the survey. You cannot undo this action, you\n can view survey data in result section.\n
\n \n
\n );\n }\n}\n\nexport default Meeting;\n","import React, { useEffect, useState } from \"react\";\nimport { styled } from \"@linaria/react\";\n// import c from \"classnames/bind\";\nimport { Flex } from \"../draft/DraftFormBox\";\nimport {\n MobileOutlined,\n DesktopOutlined,\n EyeOutlined,\n TeamOutlined,\n UserOutlined,\n StopOutlined,\n} from \"@ant-design/icons\";\nimport Survey from \"../../user/survey/Survey\";\nimport moment from \"moment\";\nimport { notification, Row } from \"antd\";\nimport { useHistory } from \"react-router-dom\";\nimport SurveyStateModal from \"./Modals/SurveyStateModal/SurveyStateModal\";\nimport { surveyStates } from \"../../../constants\";\nimport { getRoleByToken, incrementPendingRequests } from \"../../../utils\";\nimport axios, { Routes } from \"../../../services/API\";\nimport styles from \"./PublishedFormBoxNew.module.css\";\nimport c from \"classnames/bind\";\nimport handleNetworkErrors from \"../handleNetworkErrors\";\n\nconst cx = c.bind(styles);\n\nconst ScheduledCallsBox = styled.div``;\n\nconst PublishedFormBoxRefactored = ({\n survey,\n surveyCost,\n surveyId,\n updateSurveys,\n name,\n surveyType,\n mode,\n device,\n questions,\n setting,\n timingType,\n createdBy,\n updatedAt,\n numberOfParticipants,\n numberOfResponses,\n isAdminVerified,\n onScheduledCallsClick,\n}) => {\n const [showModal, setShowModal] = useState(false);\n const [surveyState, setSurveyState] = useState(survey.status);\n const [surveyStateModal, setSurveyStateModal] = useState(false);\n\n const history = useHistory();\n\n const getStatus = () => {\n if (!isAdminVerified) return \"Pending\";\n if (numberOfResponses === numberOfParticipants) return \"Completed\";\n return \"In Progress\";\n };\n\n const updateSurvey = async (values) => {\n const id =\n getRoleByToken(localStorage.getItem(\"token\")) === \"client\"\n ? localStorage.getItem(\"client\")\n : \"\";\n try {\n const { data } = await axios({\n ...Routes.client.editSurvey(id, survey[\"_id\"]),\n data: {\n data: values,\n },\n });\n notification.success({\n message: \"Survey updated successfully\",\n });\n updateSurveys();\n } catch (err) {\n handleNetworkErrors(err);\n }\n };\n\n return (\n \n
\n \n USERQUAL{\" \"}\n \n {this.isOneToOne ? \"ONE TO ONE\" : \"ONE TO MANY\"} Survey{\" \"}\n {this.channel}\n \n
\n \n
\n \n
\n \n Published / {getStatus()}\n \n setShowModal(true)}\n />\n setSurveyStateModal(true)}\n style={{\n fontSize: 20,\n cursor: \"pointer\",\n color:\n surveyStates.IN_PROGRESS === surveyState\n ? \"#8693A1\"\n : surveyStates.PAUSE === surveyState\n ? \"#88CDD5\"\n : \"#B02418\",\n }}\n title={\n surveyStates.IN_PROGRESS === surveyState\n ? \"Survey Live\"\n : surveyStates.PAUSE === surveyState\n ? \"Survey Paused\"\n : \"Survey Ended\"\n }\n />\n \n
\n {isAdminVerified === true && surveyType === true && mode === true ? (\n \n
\n \n {showModal && (\n \n
\n {name && `${name}`}
\n {createdBy}
\n {moment(updatedAt).format(\"DD/MM/YYYY\")}
\n \n {surveyType !== undefined && (\n
\n \n {surveyType === true ? \"Qualitative\" : \"Quantitative\"}\n {surveyType === true &&\n mode !== undefined &&\n (mode === true ? \"/Moderated\" : \"/Unmoderated\")}\n
\n )}\n {surveyType === true && device !== undefined && (\n \n {device === true ?
\n )}\n {surveyType === true && mode === true && setting !== undefined && (\n \n {setting === true ?
\n )}\n {surveyType === true && timingType !== undefined && (\n \n {timingType === 1 && \"15 mins\"}\n {timingType === 2 && \"30 mins\"}\n {timingType === 3 && \"45 mins\"}\n
\n )}\n {surveyType === false && (\n \n
\n )}\n \n \n
\n \n {editMode ? (\n \n setStartMinutes(value)}\n />{\" \"}\n {\":\"}{\" \"}\n setStartSeconds(value)}\n />\n {isReel && (\n \n {\"-\"}\n setEndMinutes(value)}\n />{\" \"}\n {\":\"}{\" \"}\n setEndSeconds(value)}\n />\n \n )}\n \n ) : (\n \n {convertMinuteSecondsString(start)}\n {isReel && \"- \" + convertMinuteSecondsString(end)}\n \n )}\n
\n \n {editMode ? (\n setEditMode(true)}\n style={{ cursor: \"pointer\", textDecoration: \"underline\" }}\n >\n Edit\n
\n )}\n \n \n {editMode ? (\n \n {\n setEditMode(false);\n }}\n >\n Cancel\n \n {\n handleNoteChange(\n convertIntoSeconds(startMinutes, startSeconds),\n convertIntoSeconds(endMinutes, endSeconds),\n text\n );\n setEditMode(false);\n }}\n >\n Save\n \n
\n ) : (\n {noteText}
\n )}\n \n );\n};\n\nexport default NoteBox;\n","export const getQuestionErrors = (question) => {\n const err = [];\n\n if (question.text === \"\" && question.type !== \"netPromotorScore\") {\n err.push({\n message: `There is no text for question`,\n description: `Please provide some text for question`,\n });\n }\n\n if (question.type === \"likert\") {\n if (question.options.likertStartLabel === \"\") {\n err.push({\n message: `There is no start label for question`,\n description: `Please provide start label for question`,\n });\n }\n\n // if (question.options.likertMiddleLabel === \"\") {\n // err.push({\n // message: `There is no middle label for question`,\n // description: `Please provide middle label for question`,\n // });\n // }\n\n if (question.options.likertEndLabel === \"\") {\n err.push({\n message: `There is no end label for question`,\n description: `Please provide end label for question`,\n });\n }\n }\n\n if (question.type === \"slider\") {\n if (question.options.sliderStartLabel === \"\") {\n err.push({\n message: `There is no start label for question`,\n description: `Please provide start label for question`,\n });\n }\n\n // if (question.options.sliderMiddleLabel === \"\") {\n // err.push({\n // message: `There is no middle label for question`,\n // description: `Please provide middle label for question`,\n // });\n // }\n\n if (question.options.sliderEndLabel === \"\") {\n err.push({\n message: `There is no end label for question`,\n description: `Please provide end label for question`,\n });\n }\n }\n\n if (question.type === \"multiChoices\" || question.type === \"checkBoxes\") {\n question.options.multiChoices.forEach((opt) => {\n if (opt.label === \"\") {\n err.push({\n message: `There is no label for question`,\n description: `Please provide a label for question`,\n });\n }\n });\n }\n\n if (\n question.type === \"imageMultiChoices\" ||\n question.type === \"imageCheckBoxes\"\n ) {\n question.options.imageMultiChoices.forEach((opt) => {\n if (opt.imageLabel === \"\") {\n err.push({\n message: `There is no label for question`,\n description: `Please provide a label for question`,\n });\n }\n if (opt.imageData === \"\") {\n err.push({\n message: `There is no image for question`,\n description: `Please provide an image for question`,\n });\n }\n });\n }\n\n if (question.type === \"imageStarRatingChoices\") {\n question.options.imageStarRatingChoices.forEach((opt) => {\n if (opt.imageLabel === \"\") {\n err.push({\n message: `There is no label for question`,\n description: `Please provide a label for question`,\n });\n }\n if (opt.imageData === \"\") {\n err.push({\n message: `There is no image for question`,\n description: `Please provide an image for question`,\n });\n }\n });\n }\n\n if (question.type === \"videoStarRatingChoices\") {\n question.options.videoStarRatingChoices.forEach((opt) => {\n if (opt.videoLabel === \"\") {\n err.push({\n message: `There is no label for question`,\n description: `Please provide a label for question`,\n });\n }\n if (opt.videoData === \"\") {\n err.push({\n message: `There is no video for question`,\n description: `Please provide a video for question`,\n });\n }\n });\n }\n\n if (question.type === \"association\") {\n question.options.associationChoices.forEach((opt) => {\n if (opt.association === \"\") {\n err.push({\n message: `There is no association for question`,\n description: `Please provide association for label for question`,\n });\n }\n if (opt.label === \"\") {\n err.push({\n message: `There is no label for question`,\n description: `Please provide a label for question`,\n });\n }\n });\n }\n\n if (question.type === \"imageAssociation\") {\n question.options.imageAssociationChoices.forEach((opt) => {\n if (opt.association === \"\") {\n err.push({\n message: `There is no association for question`,\n description: `Please provide association for label for question`,\n });\n }\n if (opt.imageData === \"\") {\n err.push({\n message: `There is no image for question`,\n description: `Please provide an image for question`,\n });\n }\n });\n }\n\n if (question.type === \"videoAssociation\") {\n question.options.videoAssociationChoices.forEach((opt) => {\n if (opt.association === \"\") {\n err.push({\n message: `There is no association for question`,\n description: `Please provide association label for question`,\n });\n }\n if (opt.videoData === \"\") {\n err.push({\n message: `There is no video for question`,\n description: `Please provide a video for question`,\n });\n }\n });\n }\n\n if (question.type === \"adAnalysis\") {\n question.options.adAnalysisChoices.forEach((opt) => {\n if (!opt.videoType) {\n err.push({\n description: `Please provide video type for question`,\n });\n }\n if (opt.videoData === \"\") {\n err.push({\n description: `Please provide a video for question`,\n });\n }\n });\n\n if (!question.options.adAnalysisData.url) {\n err.push({\n description: `Please combine the video of question`,\n });\n }\n }\n return err;\n};\n","import React from \"react\";\nimport { InfoCircleOutlined } from \"@ant-design/icons\";\nimport { Typography } from \"antd\";\n\nconst Errors = ({ errors }) => {\n return (\n \n {/* \n {err.message}\n */}\n \n {err.description}\n \n
\n \n ))}\n \n );\n};\n\nexport default Errors;\n","import React, { Fragment, useEffect } from \"react\";\nimport styles from \"./QuestionBuilder.module.css\";\nimport { Button, Popconfirm, Select } from \"antd\";\nimport { useState } from \"react\";\nimport c from \"classnames/bind\";\nimport {\n DownOutlined,\n CheckSquareOutlined,\n UnorderedListOutlined,\n StarOutlined,\n PicCenterOutlined,\n MenuOutlined,\n CloseCircleOutlined,\n PlusCircleFilled,\n SmallDashOutlined,\n ControlOutlined,\n VideoCameraAddOutlined,\n PercentageOutlined,\n InfoCircleOutlined,\n} from \"@ant-design/icons\";\nimport FormStar from \"../../../questions/form-star/FormStar\";\nimport Likert from \"../../../questions/likert/Likert\";\nimport FormSlider from \"../../../questions/slider/FormSlider\";\nimport MultiChoices from \"../../../questions/multi-choices/MultiChoices\";\nimport ImageMultiChoices from \"../../../questions/image-multi-choices/imageMultiChoices\";\nimport ImageStarRating from \"../../../questions/image-star-rating/ImageStarRating\";\nimport RangeDropDown from \"../../../questions/rangeDropDown/RangeDropDown\";\nimport VideoInstruction from \"../../../questions/videoInstruction/VideoInstruction\";\nimport VideoStarRating from \"../../../questions/video-star-rating/videoStarRating\";\nimport TextABTest from \"../../../questions/textABTest/TextABTest\";\nimport ImageABTest from \"../../../questions/imageABTest/ImageABTest\";\nimport VideoABTest from \"../../../questions/videoABTest/VideoABTest\";\nimport Association from \"../../../questions/association/Association\";\nimport ImageAssociation from \"../../../questions/image-association/ImageAssociation\";\nimport VideoAssociation from \"../../../questions/video-association/VideoAssociation\";\nimport AddLink from \"../../../questions/add-link/AddLink\";\nimport ImageInstruction from \"../../../questions/imageInstruction/imageInstruction\";\nimport VideoMultiChoices from \"../../../questions/video-multi-choices/VideoMultiChoices\";\nimport NetPromotorScore from \"../../../questions/net-promotor-score/NetPromotorScore\";\nimport SurveyBrief from \"../../../questions/survey-brief/SurveyBrief\";\nimport AdAnalysis from \"../../../questions/ad-analysis/AdAnalysis\";\nimport { getQuestionErrors } from \"../QuestionBuilderError/questionErrors\";\nimport Errors from \"../QuestionBuilderError/Errors\";\n\nconst cx = c.bind(styles);\nconst { Option } = Select;\n\nconst extraSpace = [\n \"multiChoices\",\n \"checkBoxes\",\n \"imageMultiChoices\",\n \"videoMultiChoices\",\n \"imageCheckBoxes\",\n \"videoCheckBoxes\",\n \"ranking\",\n \"imageRanking\",\n \"videoRanking\",\n \"imageStarRatingChoices\",\n \"videoStarRatingChoices\",\n \"textABTest\",\n \"imageABTest\",\n \"videoABTest\",\n \"association\",\n \"imageAssociation\",\n \"videoAssociation\",\n \"adAnalysis\",\n];\n\n// let NPS = null;\n\nconst NPS = ({ options, setOptions }) => {\n return (\n \n
\n {typeof questionTypes[question.type] === \"function\" && (\n \n {/* \n setQuestion({ ...question, text: e.target.value })\n }\n />\n )}\n
\n \n {!mouseOver && (\n
*/}\n \n {index + 1}\n
\n )}\n {mouseOver && (\n \n
\n )}\n \n {question.type === \"netPromotorScore\" ? (\n \n
\n ) : (\n \n {\n setQuestion({ ...question, hasLink: !hasLink });\n }}\n >\n Add Link\n \n
\n }\n {hasLink ? (\n
}\n
\n {!drawerVisible && (\n setDrawerVisible(true)}\n >\n
\n )}\n \n \n
\n setDrawerVisible(false)}>\n
\n Ask in-video questions
\n {/* \n \n \n
*/}\n \n \n Notes\n
\n \n \n setInputText(e.target.value)}\n onPressEnter={(e) => handleEnterOnInput(e.target.value)}\n placeholder=\"Enter a note\"\n prefix={\n searchMode ? (\n handleEnterOnInput(e.target.value)}\n >\n Add\n \n
\n \n {/* \n setEditorTab(true)}\n >\n Transcript\n \n setEditorTab(false)}\n >\n Add Notes\n \n
*/}\n \n {/* {[...Array(5)].map((v, index) => {\n return (\n \n
\n \n \n {getStatus() + \" \" + numberOfResponses + \"/\" + numberOfParticipants}\n
\n \n
\n \n setShareSurveyModal(true)}\n disabled={surveyStates.IN_PROGRESS}\n title={\"Share Survey\"}\n />\n
\n {!(survey.surveyType && survey.mode) && (\n \n setShowModal(true)}\n />\n
\n )}\n \n setSurveyStateModal(true)}\n src={\n surveyStates.IN_PROGRESS === surveyState\n ? images.stop\n : images.play\n }\n title={\n surveyStates.IN_PROGRESS === surveyState\n ? \"Survey Live\"\n : surveyStates.PAUSE === surveyState\n ? \"Survey Paused\"\n : \"Survey Ended\"\n }\n />\n
\n \n \n {name}\n
\n \n {moment(updatedAt).format(\"DD MMMM YYYY\")}\n
\n Created by: {createdBy}
\n {hover && (\n \n
\n )}\n \n \n \n \n {surveyType ? (\n
\n \n \n {mode ? (\n
\n \n \n {mode ? (\n
\n {surveyType === true && timingType !== undefined && (\n \n {timingType === 1 && 15}\n {timingType === 2 && 30}\n {timingType === 3 && 45}{\" \"}\n mins
\n \n )}\n \n
\n \n {isAdminVerified === true && surveyType === true && mode === true && !survey.surveyAccess && (\n onScheduledCallsClick(surveyId)}\n className={\n hasScheduledCalls\n ? cx([\"schedule-call-button\", \"button\"])\n : cx([\"schedule-call-button\", \"button\", \"disabled-button\"])\n }\n title=\"Scheduled Calls\"\n >\n {hasScheduledCalls ? \"SCHEDULED CALLS\" : \"NO CALLS SCHEDULED\"}\n
\n )}\n \n {isAdminVerified === true && surveyType === true && mode === true && survey.surveyAccess && (\n onScheduledCallsClick(surveyId)}\n className={\n cx([\"schedule-call-button\", \"button\"])\n }\n title=\"Scheduled Calls\"\n >\n JOIN CALL\n
\n )}\n \n \n
\n \n ) : showOpenModal ? (\n \n
\n \n Scheduled Calls\n setAvailableSlots(undefined)}\n />{\" \"}\n
\n\n \n Participant #{index + 1}: {item.label}\n \n \n startModeratedSurvey(\n item.surveyId,\n item.date,\n item.time,\n item.setting\n )\n }\n >\n Join Call\n \n
\n ))}\n \n
\n You can call in 5 mins before the call time!\n
\n {availableSlots.map((item, index) => (\n \n
\n \n ) : (\n \n \n startOpenModeratedSurvey(\n selectedSurvey.surveyId,\n openLink\n )\n }\n >\n Join Call\n \n
\n \n Scheduled Calls\n setShowOpenModal(false)}\n />{\" \"}\n
\n\n \n {surveyLink}\n \n
\n }\n \n
\n You can call in 5 mins before the call time!\n
\n { \n <>\n {surveys && tierInfo && (\n <>\n {surveys\n .filter((s) => s.isPublished === true)\n .map((item, idx) => (\n \n \n ))}\n \n )}\n \n
\n )}\n \n
\n );\n});\n\nexport default WordCloud;\n","import React, { useRef, useEffect, useState } from \"react\";\nimport Chart from \"chart.js\";\nimport ChartDataLabels from \"chartjs-plugin-datalabels\";\nimport \"./chart.css\";\n\nconst CreateChart = ({ options, data, type, plugins, keyInfo }) => {\n const myChart = useRef();\n const [chartInstance, setChartInstance] = useState(null);\n useEffect(() => {\n if (chartInstance) {\n chartInstance.destroy();\n }\n console.log(\"Chart Initiate=\", keyInfo, data);\n Chart.plugins.unregister(ChartDataLabels);\n const chartInstanceTemp = new Chart(myChart.current.getContext(\"2d\"), {\n type: type,\n data: data,\n options: options,\n plugins: plugins ? [ChartDataLabels] : null,\n });\n setChartInstance(chartInstanceTemp);\n }, [options, data, type, plugins]);\n return ;\n};\n\nexport default CreateChart;\n\n//https://www.chartjs.org/docs/latest/getting-started/usage.html\n//Props to be passed can be viewed from the documentation link of chart.js given above\n","import React from \"react\";\nimport CreateChart from \"../CreateChart/CreateChart\";\nimport styles from \"./SentimentGraph.module.css\";\nimport c from \"classnames/bind\";\n\nconst cx = c.bind(styles);\n\nconst SentimentGraph = ({ sentimentAnalysis, participantIndex }) => {\n const sentimentCost = (value) => {\n switch (true) {\n case value >= 0.9:\n return \"Very Positive\";\n case value >= 0.75:\n return \"Positive\";\n case value >= 0:\n return \"Neutral\";\n case value >= -0.5:\n return \"Negative\";\n case value >= -1:\n return \"Very Negative\";\n }\n };\n\n const sentimentWeight = (value) => {\n switch (true) {\n case value >= -0.75 && value <= 0.75:\n return 5;\n case (value > 0.75 && value < 0.95) || (value < -0.75 && value > -0.95):\n return 7;\n case value >= 0.95 || value <= -0.95:\n return 10;\n }\n };\n\n let data = [];\n sentimentAnalysis.map((s, index) => {\n switch (s.Sentiment) {\n case \"POSITIVE\":\n data.push({\n x: s.SentimentScore.Positive,\n y: Math.random(),\n });\n break;\n case \"NEGATIVE\":\n data.push({\n x: 0 - s.SentimentScore.Negative,\n y: Math.random(),\n });\n break;\n case \"NEUTRAL\":\n data.push({\n x: s.SentimentScore.Neutral,\n y: Math.random(),\n });\n break;\n case \"MIXED\":\n data.push({\n x: s.SentimentScore.Mixed,\n y: Math.random(),\n });\n break;\n }\n });\n\n const total = data.reduce((sum, point) => sum + point.x, 0);\n const avgSentiment = total / data.length;\n\n const sentimentData = {\n datasets: [\n {\n label: \"Sentiment Values\",\n borderColor:\n participantIndex !== null\n ? data.map((d, i) =>\n i === participantIndex ? \"#FF9480\" : \"rgb(0, 193, 148)\"\n )\n : \"rgb(0, 193, 148)\",\n backgroundColor:\n participantIndex !== null\n ? data.map((d, i) =>\n i === participantIndex ? \"#FF9480\" : \"rgb(0, 193, 148)\"\n )\n : \"rgb(0, 193, 148)\",\n data: data,\n pointRadius: data.map((d, index) => sentimentWeight(d.x)),\n },\n ],\n };\n\n const options = {\n title: {\n display: true,\n text: [\n `Average Sentiment: ${avgSentiment.toFixed(2)}`,\n `Overall Sentiment: ${sentimentCost(avgSentiment)}`,\n ],\n },\n aspectRatio: 1,\n legend: {\n position: \"bottom\",\n },\n scales: {\n yAxes: [\n {\n display: true,\n ticks: {\n suggestedMin: 0, // minimum will be 0, unless there is a lower value.\n suggestedMax: 1,\n },\n },\n ],\n xAxes: [\n {\n display: true,\n ticks: {\n suggestedMin: -1, // minimum will be 0, unless there is a lower value.\n suggestedMax: 1,\n },\n },\n ],\n },\n };\n\n console.log(\"sentiment datasets\", sentimentData, participantIndex);\n\n return (\n \n \n
\n );\n};\n\nexport default React.memo(SentimentGraph);\n","import React, { useState } from \"react\";\nimport { Fragment } from \"react\";\nimport WordCloud from \"../../../../../../components/wordcloud/WordCloud\";\nimport SentimentGraph from \"../../../../../../components/sentiment-graph/SentimentGraph\";\nimport { dullGreenButtonStyle } from \"../../../constants/styles\";\nimport Button from \"../../../../../../components/button/Button\";\n\nconst WordCloudAndSentimentReport = ({\n sentimentReport,\n wordReport,\n participantIndex,\n}) => {\n const [wordCloud, setWordCloud] = useState(false);\n const [sentimentAnalysis, setSentimentAnalysis] = useState(false);\n console.log(\"wordReport\", wordReport);\n return (\n Transcript
\n\n \n );\n};\n\nexport default TranscriptModal;\n","import React, { useEffect, useRef } from \"react\";\nimport {\n Modal,\n Input,\n InputNumber,\n Button,\n Checkbox,\n notification,\n} from \"antd\";\nimport { cloneDeep, isEqual } from \"lodash\";\nimport { useSelector } from \"react-redux\";\nimport { RemoveScrollBar } from \"react-remove-scroll-bar\";\nimport styles from \"./TranscriptVideoModal.module.css\";\nimport c from \"classnames/bind\";\nimport { useState } from \"react\";\nimport {\n CloseCircleFilled,\n VideoCameraFilled,\n EditFilled,\n DeleteFilled,\n CheckCircleOutlined,\n CloseCircleOutlined,\n CaretRightOutlined,\n} from \"@ant-design/icons\";\nimport {\n dullGreenButtonStyle,\n greyButtonStyle,\n} from \"../../../constants/styles\";\nimport {\n convertReadableToSecond,\n convertSecondsToReadable,\n} from \"../../../../../../constants\";\n\nconst cx = c.bind(styles);\n\nconst Note = ({ note, updateNote }) => {\n const [editing, setEditing] = useState(false);\n const [tempNote, setTempNote] = useState(null);\n\n const updateNoteTime = (value, subKey) => {\n const splitIndex = subKey === \"min\" ? 0 : 1;\n const tempValue = convertSecondsToReadable(tempNote.start).split(\":\");\n tempValue[splitIndex] = (value || 0).toString();\n const newStart = convertReadableToSecond(tempValue.join(\":\"));\n setTempNote({ ...tempNote, start: newStart, end: newStart });\n };\n\n return (\n
\n {editing ? (\n <>\n \n {\n updateNoteTime(value, \"min\");\n }}\n />{\" \"}\n :{\" \"}\n {\n updateNoteTime(value, \"sec\");\n }}\n />\n {\n updateNote(tempNote);\n setEditing(false);\n }}\n />\n setEditing(false)}\n />\n
\n \n {\n setTempNote({ ...tempNote, text: e.target.value });\n }}\n className={cx(\"edit-text-input\")}\n />\n
\n \n ) : (\n <>\n {note.text}
\n \n )}\n \n );\n};\n\nconst TranscriptVideoModal = ({\n visible,\n subtitles,\n videoUrl,\n onCancel,\n transcript,\n notes,\n updateTranscript,\n updateNote,\n reels,\n createReel,\n removeReel,\n participantIndex,\n}) => {\n const [videoPlayerSourceUrl, setVideoPlayerSourceUrl] = useState(videoUrl);\n const [subtitlesUrl, setSubtitleUrl] = useState(null);\n const [notesVisible, setNotesVisible] = useState(false);\n const [transcriptVisible, setTranscriptVisible] = useState(false);\n const [recordingReel, setRecordingReel] = useState(false);\n const [reelStartTime, setReelStartTime] = useState(0);\n const [reelEndTime, setReelEndTime] = useState(0);\n const [timer, setTimer] = useState(null);\n const [draftTranscript, setDraftTranscript] = useState([]);\n const [editTranscript, setEditTranscript] = useState(false);\n const [newNote, setNewNote] = useState(\"\");\n const [addToTranscript, setAddToTranscript] = useState(false);\n const [deleteReelModal, setDeleteReelModal] = useState(false);\n const [reelToDelete, setReelToDelete] = useState(null);\n\n const [createReelModal, setCreateReelModal] = useState(false);\n const [reelToCreate, setReelToCreate] = useState(null);\n\n const [editReelModal, setEditReelModal] = useState(false);\n const [reelToEdit, setReelToEdit] = useState(null);\n const [editReelStartTime, setEditReelStartTime] = useState(0);\n const [editReelEndTime, setEditReelEndTime] = useState(0);\n const [recordingEditReel, setRecordingEditReel] = useState(0);\n const [reelTimeEdited, setReelTimeEdited] = useState(false);\n const [editTimer, setEditTimer] = useState(null);\n\n useEffect(() => {\n if (!editReelModal) {\n setEditReelStartTime(0);\n setEditReelEndTime(0);\n setReelTimeEdited(false);\n setRecordingEditReel(false);\n }\n }, [editReelModal]);\n\n const videoPlayer = useRef();\n const editVideoPlayer = useRef();\n\n const [userInitials, setUserInitials] = useState(\"\");\n const profile = useSelector((state) => state.client.profile);\n\n const [tempReels, setTempReels] = useState([]);\n\n const [unsavedReelsModal, setUnsavedReelsModal] = useState(false);\n const [reelName, setReelName] = useState(\"\");\n\n useEffect(() => {\n let initial = \"\";\n if (profile.firstName) {\n initial += profile.firstName[0].toUpperCase();\n if (profile.lastName) {\n initial += profile.lastName[0].toUpperCase();\n }\n } else if (profile.email) {\n initial += profile.email[0].toUpperCase();\n } else {\n initial = \"??\";\n }\n setUserInitials(initial);\n }, [profile]);\n\n const onCloseVideoModal = () => {\n if (tempReels.length > 0) {\n setUnsavedReelsModal(true);\n } else {\n onCancel();\n }\n };\n\n const playReel = (start, end) => {\n setVideoPlayerSourceUrl(`${videoUrl}#t=${start},${end}`);\n if (videoPlayer.current) {\n videoPlayer.current.load();\n videoPlayer.current.play();\n }\n };\n\n const deleteReel = async () => {\n if (reelToDelete.url) {\n await removeReel(reelToDelete.url, reelToDelete._id);\n } else {\n setTempReels(tempReels.filter((reel) => !isEqual(reel, reelToDelete)));\n }\n setReelToDelete(null);\n };\n\n const editReel = () => {\n const newTempReels = cloneDeep(tempReels);\n const reelIndex = newTempReels.findIndex((reel) =>\n isEqual(reel, reelToEdit)\n );\n const newReel = {\n ...newTempReels[reelIndex],\n start: editReelStartTime,\n end: editReelEndTime,\n };\n newTempReels.splice(reelIndex, 1, newReel);\n setTempReels(newTempReels);\n };\n\n const createNewReel = async () => {\n await createReel(reelToCreate.start, reelToCreate.end, reelName);\n setTempReels(tempReels.filter((reel) => !isEqual(reel, reelToCreate)));\n setReelToCreate(null);\n };\n\n const addNote = () => {\n if (!newNote) {\n notification.error({ message: \"Please Enter some text\" });\n return;\n }\n const tempNotes = cloneDeep(notes || []);\n const time = videoPlayer.current ? videoPlayer.current.currentTime : 0;\n const noteObj = {\n key: new Date().getSeconds(),\n identifier: Date.now(),\n start: time,\n text: newNote,\n end: time,\n isReel: false,\n reelUrl: \"\",\n isNote: true,\n userInitial: userInitials,\n };\n\n tempNotes.push(noteObj);\n updateNote(tempNotes.sort((n1, n2) => n1.start - n2.start));\n\n if (addToTranscript) {\n const tempTranscript = cloneDeep(transcript || []);\n tempTranscript.push(noteObj);\n updateTranscript(tempTranscript.sort((t1, t2) => t1.start - t2.start));\n }\n\n setNewNote(\"\");\n setAddToTranscript(false);\n };\n\n useEffect(() => {\n if (subtitles) {\n const file = new Blob([subtitles], { type: \"text/vtt\" });\n setSubtitleUrl(URL.createObjectURL(file));\n }\n }, [subtitles]);\n\n useEffect(() => {\n if (recordingReel && videoPlayer?.current && !timer) {\n setTimer(\n setInterval(() => {\n const videoTime = videoPlayer.current.currentTime;\n setReelEndTime(videoTime);\n }, 500)\n );\n } else if (!recordingReel && timer) {\n clearInterval(timer);\n setTimer(null);\n }\n }, [recordingReel, timer, videoPlayer.current]);\n\n useEffect(() => {\n if (reelEndTime < reelStartTime) {\n setReelStartTime(reelEndTime);\n }\n }, [reelStartTime, reelEndTime]);\n\n useEffect(() => {\n if (recordingEditReel && editVideoPlayer?.current && !editTimer) {\n setEditTimer(\n setInterval(() => {\n const videoTime = editVideoPlayer.current.currentTime;\n setEditReelEndTime(videoTime);\n }, 500)\n );\n } else if (!recordingEditReel && editTimer) {\n clearInterval(editTimer);\n setEditTimer(null);\n }\n }, [recordingEditReel, editTimer, editVideoPlayer.current]);\n\n useEffect(() => {\n if (editReelEndTime < editReelStartTime) {\n setEditReelStartTime(editReelEndTime);\n }\n }, [editReelStartTime, editReelEndTime]);\n\n const updateDraftTranscript = (index, key, value, subKey) => {\n const tempTranscript = cloneDeep(draftTranscript);\n if (key === \"start\" || key === \"end\") {\n const splitIndex = subKey === \"min\" ? 0 : 1;\n const tempValue = convertSecondsToReadable(\n tempTranscript[index][key]\n ).split(\":\");\n tempValue[splitIndex] = (value || 0).toString();\n tempTranscript[index][key] = convertReadableToSecond(tempValue.join(\":\"));\n } else {\n tempTranscript[index][key] = value;\n }\n setDraftTranscript(tempTranscript);\n };\n\n return (\n \n \n setNotesVisible(!notesVisible)}\n >\n setTranscriptVisible(!transcriptVisible)}\n >\n
\n \n \n Participant no. {participantIndex + 1}\n
\n \n {\n setReelToCreate(reel);\n setReelName(\"\");\n setCreateReelModal(true);\n }}\n >\n Add To reel\n
\n )}\n \n \n {[...tempReels, ...reels]\n .sort((r1, r2) => r1.start - r2.start)\n .map((reel, index) => (\n
\n ) : (\n \n \n
\n \n
\n \n {\n if (!recordingReel && videoPlayer.current) {\n const videoTime = videoPlayer.current.currentTime;\n setReelEndTime(videoTime);\n setReelStartTime(videoTime);\n } else {\n setTempReels([\n ...tempReels,\n {\n start: reelStartTime,\n end: reelEndTime,\n },\n ]);\n setReelStartTime(0);\n setReelEndTime(0);\n }\n setRecordingReel(!recordingReel);\n }}\n >\n \n {convertSecondsToReadable(reelStartTime)} -{\" \"}\n {convertSecondsToReadable(reelEndTime)}\n
\n \n {reel.url ? (\n \n \n {reel.name ?? \"\"}\n
\n \n \n
\n \n {\n playReel(reel.start, reel.end);\n }}\n />\n {!reel.url && (\n {\n setReelToEdit(reel);\n setEditReelModal(true);\n }}\n />\n )}\n {\n setReelToDelete(reel);\n setDeleteReelModal(true);\n }}\n />\n
\n \n {transcriptVisible && (\n
\n \n \n \n Video Transcript\n
\n \n {editTranscript ? (\n <>\n {\n setEditTranscript(false);\n }}\n style={{\n backgroundColor: \"#0c4674\",\n color: \"white\",\n border: \"none\",\n margin: \"0px 12px 0px 0px\",\n textTransform: \"uppercase\",\n transition: \"none\",\n }}\n >\n Cancel\n \n {\n const tempTranscript = cloneDeep(draftTranscript);\n\n updateTranscript(\n tempTranscript.sort(\n (t1, t2) => t1.start - t2.start\n )\n );\n setEditTranscript(false);\n }}\n style={{\n ...dullGreenButtonStyle,\n margin: 0,\n border: \"none\",\n textTransform: \"uppercase\",\n transition: \"none\",\n }}\n >\n Save\n \n \n ) : (\n {\n setDraftTranscript(cloneDeep(transcript || []));\n setEditTranscript(true);\n }}\n style={{\n ...dullGreenButtonStyle,\n margin: 0,\n border: \"none\",\n textTransform: \"uppercase\",\n transition: \"none\",\n }}\n >\n Edit transcript\n \n )}\n
\n \n {\n updateDraftTranscript(\n index,\n \"text\",\n e.target.value\n );\n }}\n className={cx(\"edit-text-input\")}\n autoSize={{ minRows: 1, maxRows: 3 }}\n />\n
\n \n ))\n : transcript.map((t, index) => (\n \n \n \n setNewNote(e.target.value)}\n className={cx(\"edit-text-input\")}\n style={{ margin: \"0px 10px 0px 0px\" }}\n onPressEnter={addNote}\n placeholder=\"Enter notes here\"\n />\n \n Add\n \n
\n \n {notes.map((note, index) => (\n {\n const tempNotes = cloneDeep(notes);\n tempNotes[index] = newNoteObject;\n updateNote(\n tempNotes.sort((n1, n2) => n1.start - n2.start)\n );\n }}\n />\n ))}\n
\n \n \n {convertSecondsToReadable(reelToCreate.start)} -{\" \"}\n {convertSecondsToReadable(reelToCreate.end)}\n
\n \n Reel duration
\n \n setReelName(e.target.value)}\n size=\"small\"\n placeholder=\"Enter reel name\"\n style={{\n width: 220,\n borderRadius: 6,\n border: \"1px solid #0a3157\",\n }}\n />\n
\n \n \n Reel name (optional)\n
\n \n {\n if (!recordingEditReel && editVideoPlayer.current) {\n const videoTime = editVideoPlayer.current.currentTime;\n setEditReelStartTime(videoTime);\n setEditReelEndTime(videoTime);\n setReelTimeEdited(true);\n editVideoPlayer.current.play();\n } else if (editVideoPlayer.current) {\n editVideoPlayer.current.pause();\n }\n setRecordingEditReel(!recordingEditReel);\n }}\n >\n {recordingEditReel ? \"Stop Recording\" : \"Start Recording\"}\n \n
\n {reelTimeEdited && (\n \n \n
\n \n \n Reels for participant no. {participantIndex + 1}\n
\n \n
\n ))}\n \n \n \n \n {reelToDelete !== null && (\n \n \n {convertSecondsToReadable(reel.start)} -{\" \"}\n {convertSecondsToReadable(reel.end)}\n
\n \n \n
\n \n \n {[...reels].map((reel, index) => (\n
\n \n \n \n {reel.name ?? \"\"}\n
\n \n \n
\n \n setCurrentReel(index)} />\n {\n setReelToDelete(reel);\n setDeleteReelModal(true);\n }}\n />\n
\n \n
\n \n Video sentiment analysis\n
\n \n \n \n \n \n \n {participants.map((val, index) => (\n \n Participant {index + 1}\n \n ))}\n \n \n \n {val}\n \n ))}\n
\n \n \n Facial features\n
\n {getFeatures(figures).map((val) => (\n\n {/* {figures?.AgeRange?.Low}-{figures?.AgeRange?.High} */}\n {getAverageAgeRange(emotionData)}\n
\n Likely age\n \n\n
\n Likely gender\n \n Video quality
\n {figures.Quality &&\n Object.keys(figures.Quality).map((val) => (\n\n
\n \n ))}\n \n \n \n Legends
\n {Object.keys(emotionColor).map((val) => (\n\n
\n {val}\n \n ))}\n \n \n {/* GRAPHS */}\n Emotions
\n {emotions.map((val) => (\n\n el.Type === val)\n .Confidence\n }\n color={emotionColor[val]}\n />\n
\n \n ))}\n \n \n \n {\n window.open(\n url.indexOf(\"https\") > -1 ? url : \"https://\" + url,\n \"_blank\"\n );\n }}\n >{`Open link: ${url}`}\n
\n );\n };\n\n const videos = [\n {\n url:\n \"https://userqual-file-upload.s3.amazonaws.com/newClip8O9hHs2klK.mp4\",\n type: \"video\",\n altTag: \"some image\",\n },\n {\n url:\n \"https://userqual-file-upload.s3.amazonaws.com/newClipB9DaKaq6W9.mp4\",\n type: \"video\",\n title: \"some video\",\n },\n {\n url:\n \"https://userqual-file-upload.s3.amazonaws.com/newClipaJQyanoC7F.mp4\",\n type: \"video\",\n altTag: \"some other image\",\n },\n {\n url:\n \"https://userqual-file-upload.s3.amazonaws.com/newClipaJQyanoC7F.mp4\",\n type: \"video\",\n title: \"some other video\",\n },\n ];\n\n useEffect(() => {\n if (Array.isArray(transcript)) {\n const text = transcript.map(({ text }) => text).join(\" \");\n setTranscriptText(text);\n }\n }, [transcript]);\n\n useEffect(() => {\n setResponses(questionResponses(participantResponse));\n // Only for Qualitative Surveys\n if (survey.surveyType) {\n setQualitativeData();\n saveVideoURL();\n // fetchSubtitleForVideo();\n }\n }, [participantResponse]);\n\n useEffect(() => {\n if (Array.isArray(transcript)) {\n setSubtitles(convertTranscriptToWebVtt(transcript));\n }\n }, [transcript]);\n\n const saveVideoURL = async () => {\n if (survey.surveyType) {\n const id =\n getRoleByToken(localStorage.getItem(\"token\")) === \"client\"\n ? localStorage.getItem(\"client\")\n : \"\";\n let { url, method } = client.getVideo(id, survey._id);\n url += fetchVideoUrl(survey, userId);\n try {\n const { data } = await axios[method](url);\n if (data) {\n console.log(\"video data\", data);\n setUserVideoURL(data.signedRequest);\n }\n } catch (err) {\n handleNetworkErrors(err);\n }\n }\n };\n\n const fetchVideoUrl = (survey, userId) => {\n if (survey.mode) {\n if (survey.surveyAccess) return getModeratedVideoUrl(survey._id, survey.qualitativeData[moderatedCallIndex]?.slotKey, survey.surveyAccess);\n return getModeratedVideoUrl(survey._id, userIdKey, survey.surveyAccess);\n } else {\n return getVideoUrl(survey._id, userId);\n }\n };\n\n const setQualitativeData = async () => {\n const id =\n getRoleByToken(localStorage.getItem(\"token\")) === \"client\"\n ? localStorage.getItem(\"client\")\n : \"\";\n let { url, method } = client.fetchQualitativeData(\n id,\n survey._id,\n userIdKey\n );\n // url += getTranscriptUrl(survey._id, userId);\n try {\n const { data } = await axios[method](url);\n // const { subtitleData } = await axios[method](subtitleUrl);\n // console.log(\"subtitles\", subtitleData);\n if (data) {\n setNotes((data.notes || []).sort((n1, n2) => n1.start - n2.start));\n setTranscript(\n (data.transcript || []).sort((t1, t2) => t1.start - t2.start)\n );\n setReels((data.reels || []).sort((r1, r2) => r1.start - r2.start));\n }\n } catch (err) {\n handleNetworkErrors(err);\n }\n };\n\n const fetchSubtitleForVideo = async () => {\n const id =\n getRoleByToken(localStorage.getItem(\"token\")) === \"client\"\n ? localStorage.getItem(\"client\")\n : \"\";\n let { url, method } = client.getTranscript(id, survey._id);\n if (survey.mode) {\n url += getModeratedSubtitlesUrl(survey._id, userIdKey);\n } else {\n url += getSubtitlesUrl(survey._id, userId);\n }\n try {\n const { data } = await axios[method](url);\n if (data) {\n setSubtitles(data);\n }\n } catch (err) {\n handleNetworkErrors(err);\n }\n };\n\n const saveTranscriptToTxt = () => {\n const element = document.createElement(\"a\");\n const file = new Blob([transcriptText], { type: \"text/plain\" });\n element.href = URL.createObjectURL(file);\n element.download = \"transcript.txt\";\n document.body.appendChild(element); // Required for this to work in FireFox\n element.click();\n setViewScript(false);\n };\n\n const onViewEmotionalAnalysis = async () => {\n const uploadURL = `${survey._id}_${userIdKey.replace(/\\//g, \"|\")}`;\n if (!survey.emotionJobId || !survey.emotionJobId[uploadURL]) {\n notify(\n \"error\",\n \"Error\",\n \"No emotional analysis found for this participant.\"\n );\n return;\n }\n const jobId = survey.emotionJobId[uploadURL];\n const clientId = localStorage.getItem(\"client\");\n try {\n let result = [];\n let nextToken = \"\";\n while (true) {\n const { data } = await axios({\n ...Routes.client.getVideoAnalysis(\n clientId,\n survey._id,\n jobId,\n nextToken\n ),\n });\n result = result.concat(data.Faces);\n if (data.NextToken) {\n nextToken = data.NextToken;\n } else {\n break;\n }\n }\n setEmotionalAnalysisObject(result);\n setEmotionalAnalysis(true);\n } catch (err) {\n notify(\n \"error\",\n \"Error\",\n \"No emotional analysis found for this participant.\"\n );\n }\n };\n\n const updateTranscript = async (transcript) => {\n const id =\n getRoleByToken(localStorage.getItem(\"token\")) === \"client\"\n ? localStorage.getItem(\"client\")\n : \"\";\n try {\n const { data } = await axios({\n ...Routes.client.upsertQualitativeData(id, survey._id),\n data: {\n data: {\n slotKey: userIdKey,\n transcript: transcript,\n },\n },\n });\n setTranscript(transcript);\n notification.success({ message: \"Transcript Updated Successfully\" });\n } catch (err) {\n handleNetworkErrors(err);\n }\n };\n\n const updateNote = async (notes) => {\n const id =\n getRoleByToken(localStorage.getItem(\"token\")) === \"client\"\n ? localStorage.getItem(\"client\")\n : \"\";\n try {\n const { data } = await axios({\n ...Routes.client.upsertQualitativeData(id, survey._id),\n data: {\n data: {\n slotKey: userIdKey,\n notes: notes,\n },\n },\n });\n setNotes(notes);\n notification.success({\n message: \"Notes Updated Successfully\",\n });\n } catch (err) {\n handleNetworkErrors(err);\n }\n };\n\n const addReelToResultSection = async (reelUrl, { start, end, name = \"\" }) => {\n const id =\n getRoleByToken(localStorage.getItem(\"token\")) === \"client\"\n ? localStorage.getItem(\"client\")\n : \"\";\n try {\n const { data } = await axios({\n ...Routes.client.upsertQualitativeData(id, survey._id),\n data: {\n data: {\n slotKey: userIdKey,\n reel: {\n url: reelUrl,\n start: start,\n end: end,\n name: name,\n },\n },\n },\n });\n notification.success({\n message: \"Reels Updated in Result Page Successfully\",\n });\n // Fetch Updated Data\n setQualitativeData();\n } catch (err) {\n handleNetworkErrors(err);\n }\n };\n\n // const addReelToResultSection = async (start, end) => {\n // const id =\n // getRoleByToken(localStorage.getItem(\"token\")) === \"client\"\n // ? localStorage.getItem(\"client\")\n // : \"\";\n // const startTime = convertSecondsIntoStandardFormat(start);\n // const endTime = convertSecondsIntoStandardFormat(end);\n // try {\n // const { url, method, data } = Routes.client.createReel(id, survey._id);\n // const updatedData = {\n // ...data,\n // inputs: [\n // {\n // fileName: `${survey._id}_${userId}.mp4`,\n // clippings: [\n // {\n // start: startTime,\n // end: endTime,\n // },\n // ],\n // },\n // ],\n // };\n // const resp = await axios[method](url, { data: updatedData });\n // notification.success({\n // message: \"Reel Created\",\n // });\n // updateReel(resp.data.url, { start, end });\n // } catch (e) {\n // handleNetworkErrors(e);\n // }\n // };\n\n const createReel = async (start, end, name = \"\") => {\n const id =\n getRoleByToken(localStorage.getItem(\"token\")) === \"client\"\n ? localStorage.getItem(\"client\")\n : \"\";\n const startTime = convertSecondsIntoStandardFormat(start);\n const endTime = convertSecondsIntoStandardFormat(end);\n try {\n const { url, method, data } = Routes.client.createReel(id, survey._id);\n const updatedData = {\n ...data,\n inputs: [\n {\n fileName: `${survey._id}_${userIdKey.replace(/\\//g, \"|\")}.mp4`,\n clippings: [\n {\n start: startTime,\n end: endTime,\n },\n ],\n },\n ],\n };\n const resp = await axios[method](url, { data: updatedData });\n // notification.success({\n // message: \"Reel Created\",\n // });\n const reelUrl = resp.data.url;\n await addReelToResultSection(reelUrl, { start, end, name });\n } catch (e) {\n handleNetworkErrors(e);\n }\n };\n\n const removeReel = async (url, reelId = null) => {\n const filePath = GetFilename(url);\n const id =\n getRoleByToken(localStorage.getItem(\"token\")) === \"client\"\n ? localStorage.getItem(\"client\")\n : \"\";\n try {\n const { url, method } = Routes.client.removeReel(id, survey._id);\n const { message } = await axios[method](url, {\n data: {\n data: {\n reelId: reelId,\n filePath: filePath,\n },\n },\n });\n notification.success({\n message: \"Reel deleted successfully\",\n });\n setReels(reels.filter((reel) => reel._id !== reelId));\n } catch (err) {\n handleNetworkErrors(ErrorOutlined);\n }\n };\n\n const questionResponses = (participantResponse) => {\n const responseArray = participantResponse.map((question, index) => {\n let generateResponse = null;\n switch (question.type) {\n case questionTypes.QUESTION_INSTRUCTION:\n case questionTypes.IMAGE_INSTRUCTION:\n case questionTypes.VIDEO_INSTRUCTION:\n generateResponse = (\n \n {/* 
*/}\n
\n ) : null}\n {question.videoUrl ? (\n \n
\n ) : null}\n \n {/* */}\n
\n ) : null}\n {question.videoUrl ? (\n \n {/* */}\n
\n ) : null}\n {question.answer[0]}
\n \n \n {option.imageUrl ? (\n
\n );\n })}\n \n {/* 
*/}\n
\n ) : null}\n {option.videoUrl ? (\n \n {/* */}\n
\n ) : null}\n {option.label}
\n \n -1\n ? { background: \"#01223f\" }\n : null\n }\n className={cx(\"check-boxes\")}\n >\n {option.imageUrl ? (\n
\n );\n })}\n \n {/* */}\n
\n ) : null}\n {option.videoUrl ? (\n \n {/* */}\n
\n ) : null}\n {option.label}
\n \n {question.answer[0]} (Range from 1-{question.range})\n
\n );\n break;\n case questionTypes.SLIDER:\n generateResponse = (\n \n \n
\n \n
\n {question.labels.start}
\n {question.labels.middle}
\n {question.labels.end}
\n \n {[...new Array(question.range)].map((tmp, index) => {\n return (\n \n );\n })}\n
\n \n
\n {question.labels.start}
\n {question.labels.middle}
\n {question.labels.end}
\n \n {[...new Array(11)].map((tmp, index) => {\n return (\n \n {index}\n
\n );\n })}\n \n Not At All Likely
\n Extremely Likely
\n \n \n {index + 1}- \n {choice.imageUrl ? (\n
\n );\n })}\n \n {/* 
*/}\n
\n ) : null}\n {choice.videoUrl ? (\n \n {/* */}\n
\n ) : null}\n {choice.label}
\n \n {choice.label ? {choice.label}- : null}\n {choice.imageUrl ? (\n
\n );\n })}\n \n {/* */}\n
\n ) : null}\n {choice.videoUrl ? (\n \n {/* */}\n
\n ) : null}\n {choice.association}
\n \n {option.imageUrl || option.videoUrl ? (\n \n {option.imageUrl ? (\n \n ) : null}\n
\n );\n })}\n \n \n {/* */}\n
\n ) : null}\n {option.videoUrl ? (\n \n {/* */}\n
\n ) : null}\n \n {option.label ? (\n
\n {option.label}
\n ) : null}\n \n {[...new Array(question.stars)].map((tmp, index) => {\n let star = 0;\n if (question.type === questionTypes.STAR_RATING) {\n star = question.answer[outIndex];\n } else {\n star = question.answer[0][option.label];\n }\n return index + 1 <= star ? (\n
\n \n
\n \n );\n });\n return responseArray;\n };\n\n return (\n \n \n
\n \n {index + 1}\n
\n \n {question.text}\n
\n \n {generateResponse}\n {question.clientLink !== \"\" ? (\n
\n \n \n \n {participantResponse[0].startedAt\n ? new Date(participantResponse[0].startedAt).toString()\n : \"No Details are available\"}\n \n
\n \n {participantDetails[participantIndex] &&\n participantDetails[participantIndex]\n .filter((detail) => [\"Gender\", \"Age\"].includes(detail.label))\n .map((detail, index) => {\n return (\n
*/}\n {/* \n \n {detail.value}\n
\n );\n })}\n \n {detail.label}\n
\n {detail.value}\n \n );\n })}\n \n Color of Eyes\n
\n Pink (Qualify)\n \n Degree
\n Psychology (Qualify)\n \n Ended
\n \n {participantResponse[0].endsAt\n ? new Date(participantResponse[0].endsAt).toString()\n : \"No Details are available\"}\n \n \n \n Time Spent\n
\n \n {participantResponse[0].startedAt &&\n participantResponse[0].endsAt\n ? new Date(\n new Date(participantResponse[0].endsAt) -\n new Date(participantResponse[0].startedAt)\n )\n .toISOString()\n .substr(11, 8)\n : \"No Details are available\"}\n */}\n \n \n \n )}\n {survey.surveyType && (\n \n setUserVideoRecording(true)}\n >\n View video recording\n
\n {userVideoRecording && userVideoURL && transcript && (\n \n // {\n // return {\n // url: reel?.url,\n // title: \"index\",\n // type: \"video\",\n // };\n // })}\n // startIndex={0}\n // showResourceCount={true}\n // onCloseCallback={() => setViewReels(false)}\n // onNavigationCallback={(currentIndex) =>\n // console.log(`Current index: ${currentIndex}`)\n // }\n // />\n //
*/}\n )}\n \n )}\n