\n
\n )}\n \n )\n}\nexport default RangeInput\n","import config from '../config/config'\r\nimport { newEdgeId, scenesToEdges } from './edgeHelper'\r\nimport { INTERACTIVE_ELEMENT_TYPES } from './elementHelper'\r\nimport {\r\n useEdges,\r\n useNodes,\r\n useReactFlow,\r\n useUpdateNodeInternals,\r\n} from 'reactflow'\r\n\r\nexport const newNodeId = 'new-node'\r\n\r\nexport const scenesToNodes = (reactFlow, scenes, location) => {\r\n // add scene nodes\r\n const regex = /\\/scenes\\/(\\d+).*$/\r\n const match = location.pathname.match(regex)\r\n let selectedSceneId\r\n if (match) selectedSceneId = match[1]\r\n\r\n const nodes = scenes\r\n .map((scene) => ({\r\n id: scene.id,\r\n selected: scene.id === selectedSceneId,\r\n type: 'Scene',\r\n position: { x: scene.canvasX, y: scene.canvasY },\r\n data: {\r\n ...scene,\r\n elements: [...scene.elements].sort((a, b) => a.id - b.id),\r\n description: scene.description ?? '',\r\n },\r\n }))\r\n .sort((a, b) => a.position.y - b.position.y)\r\n reactFlow.setNodes(nodes)\r\n const edges = scenesToEdges(scenes)\r\n reactFlow.setEdges(edges)\r\n return nodes\r\n}\r\n\r\nexport const getNodeHandles = (nodes, nodeData, edges) => {\r\n const selectedEdges = edges.filter((n) => n.selected)\r\n\r\n return {\r\n source: nodeData.elements\r\n ? [\r\n ...nodeData.elements\r\n .filter(\r\n (el) =>\r\n INTERACTIVE_ELEMENT_TYPES.includes(el.kind) &&\r\n !el.randomizedLinkToIds?.length\r\n )\r\n .map((el) => ({\r\n id: `e${nodeData.id}-${el.id}`,\r\n points: el.points,\r\n selected: selectedEdges.find((edge) => edge.id === el.id),\r\n })),\r\n // Add randomizer handles\r\n ...nodeData.elements\r\n .filter((el) => el.randomizedLinkToIds?.length)\r\n .map((el) =>\r\n el.randomizedLinkToIds\r\n .map((sceneId, index) => {\r\n const handleId = `e${nodeData.id}-${el.id}-${index}`\r\n return {\r\n id: handleId,\r\n elementId: el.id,\r\n points: el.points,\r\n selected: selectedEdges.find(\r\n (edge) => edge.sourceHandle === handleId\r\n ),\r\n isRandomized: true,\r\n randomizeIndex: index,\r\n }\r\n })\r\n .filter((sceneId) => !!sceneId)\r\n )\r\n .flat(),\r\n ]\r\n : [],\r\n target: [\r\n ...nodes\r\n .filter((node) => node.id !== nodeData.id && node.data.elements)\r\n .map((node) => node.data.elements)\r\n .flat()\r\n .filter(\r\n (el) => el.linkToId === nodeData.id && !el.randomizedLinkToIds?.length\r\n )\r\n .filter((el) => {\r\n // hide handles that related edge is hidden\r\n const relatedEdge = edges.find(\r\n (e) => e.id === el.id || el.id === e.oldId\r\n )\r\n return !relatedEdge || !relatedEdge.data.customHidden\r\n })\r\n .map((el) => ({\r\n id: `e${nodeData.id}-${el.id}`,\r\n points: el.points,\r\n selected: selectedEdges.find((e) => e.id === el.id),\r\n })),\r\n\r\n // Add randomizer handles\r\n ...nodes\r\n .filter((node) => node.id !== nodeData.id && node.data.elements)\r\n .map((node) => node.data.elements)\r\n .flat()\r\n .filter((el) => el.randomizedLinkToIds?.length)\r\n .map((el) =>\r\n el.randomizedLinkToIds\r\n .map((sceneId, index) => {\r\n if (!sceneId || sceneId !== nodeData.id) return null\r\n const handleId = `e${nodeData.id}-${el.id}-${index}`\r\n return {\r\n id: handleId,\r\n points: el.points,\r\n selected: selectedEdges.find(\r\n (e) => e.targetHandle === handleId\r\n ),\r\n }\r\n })\r\n .filter((sceneId) => !!sceneId)\r\n )\r\n .flat(),\r\n ],\r\n }\r\n}\r\n\r\nexport const useSortedNodeHandles = (nodeData) => {\r\n const nodes = useNodes()\r\n const edges = useEdges()\r\n return getNodeHandles(nodes, nodeData, edges)\r\n}\r\n\r\nexport const getHandles = (nodes, edges) => {\r\n const allHandles = nodes.map((node) =>\r\n getNodeHandles(nodes, node.data, edges)\r\n )\r\n return {\r\n source: allHandles.map((h) => h.source).flat(),\r\n target: allHandles.map((h) => h.target).flat(),\r\n }\r\n}\r\n\r\nexport const useAddNewNodePlaceholder = () => {\r\n const updateNodeInternals = useUpdateNodeInternals()\r\n const reactFlow = useReactFlow()\r\n\r\n return (position, setNodes, scenarioId) => {\r\n const edges = reactFlow.getEdges()\r\n const sourceNode = edges.find((e) => e.id === newEdgeId)?.source\r\n const newNode = {\r\n id: newNodeId,\r\n position,\r\n type: 'New',\r\n selectable: false,\r\n data: { scenarioId },\r\n }\r\n setNodes((nds) => nds.concat(newNode))\r\n updateNodeInternals(sourceNode)\r\n }\r\n}\r\n\r\nexport const useRemoveNewNodePlaceholder = () => {\r\n const updateNodeInternals = useUpdateNodeInternals()\r\n const reactFlow = useReactFlow()\r\n return () => {\r\n const edges = reactFlow.getEdges()\r\n const sourceNode = edges.find((e) => e.id === newEdgeId)?.source\r\n const targetNode = edges.find((e) => e.id === newEdgeId)?.targetNode\r\n reactFlow.deleteElements({\r\n nodes: [{ id: newNodeId }],\r\n edges: [{ id: newEdgeId }],\r\n })\r\n if (sourceNode) updateNodeInternals(sourceNode)\r\n if (targetNode) updateNodeInternals(targetNode)\r\n }\r\n}\r\n\r\nconst getNodeHeight = (id) =>\r\n document.querySelector(`.react-flow__nodes > [data-id=\"${id}\"]`)\r\n ?.offsetHeight ?? config.sceneNodeMinHeight\r\n\r\nexport const setCentralNodeAndSelectIt = (reactFlow, node, zoom) => {\r\n setCenteral(reactFlow, node, zoom)\r\n reactFlow.setNodes(\r\n reactFlow.getNodes().map((n) => ({ ...n, selected: n.id === node.id }))\r\n )\r\n}\r\n\r\nexport const setCenteral = (reactFlow, node, zoom) => {\r\n const viewPort = reactFlow.getViewport()\r\n zoom || (zoom = viewPort.zoom)\r\n reactFlow.setCenter(\r\n node.position.x + config.sceneNodeWidth / 2,\r\n node.position.y + getNodeHeight(node.id) / 2,\r\n {\r\n duration: config.zoomDuration,\r\n zoom,\r\n }\r\n )\r\n}\r\n\r\nexport const setNode = (reactFlow, node) => {\r\n const newNode = { ...node }\r\n if (newNode.data?.elements) {\r\n newNode.data.elements = [...newNode.data.elements].sort(\r\n (a, b) => a.id - b.id\r\n )\r\n }\r\n reactFlow.setNodes(() =>\r\n reactFlow.getNodes().map((n) => (n.id === newNode.id ? newNode : n))\r\n )\r\n}\r\n\r\nexport const selectNodes = (reactFlow, nodeIds) => {\r\n const nodes = reactFlow.getNodes()\r\n const selectedNodes = nodes.filter((node) => nodeIds.includes(node.id))\r\n if (selectedNodes) {\r\n reactFlow.setNodes(\r\n nodes.map((node) => ({\r\n ...node,\r\n selected: nodeIds.includes(node.id),\r\n }))\r\n )\r\n }\r\n}\r\n\r\nexport const isMultiSelection = () =>\r\n document.querySelector('.react-flow__pane').classList.contains('selection')\r\n\r\nexport const getConnectedNodes = (reactFlow, targetNodeId) => {\r\n const edges = reactFlow.getEdges()\r\n const connectedNodes = edges\r\n .filter((edge) => edge.target === targetNodeId)\r\n .map((edge) => edge.target)\r\n\r\n const uniqueConnectedNodes = [...new Set(connectedNodes)]\r\n return uniqueConnectedNodes\r\n}\r\n","import React from 'react'\n\nconst RadioButton = ({\n id,\n label,\n clickHandler,\n name,\n checked,\n disabled,\n labelClassName = '',\n value = 'on'\n}) => (\n {formatLabel ? formatLabel(minValue) : minValue}
\n {formatLabel ? formatLabel(maxValue) : maxValue}
\n \n {\n const { hidden } = volumeRange.current\n volumeRange.current.hidden = !hidden\n if (volumeRange.current.hidden) {\n volumeRange.current.classList.remove('is-visible')\n } else {\n volumeRange.current.classList.add('is-visible')\n }\n }}>\n {getVolumeIcon()}\n \n \n
\n )\n}\nexport default VolumeSlider\n","import React, { Component } from 'react'\nimport { observer, inject } from 'mobx-react'\nimport classNames from 'classnames'\n\n@inject('diagramStore')\n@observer\nclass Scene extends Component {\n render() {\n const { scene } = this.props\n return (\n \n
\n \n \n \n \n {scene.kind_formatted}\n \n \n {scene.start && (\n \n )}\n {scene.has_video && (\n \n )}\n {scene.isRandomized && (\n \n )}\n
\n \n {scene.priority && `${scene.priority}.`} {scene.name}\n
\n\n \n {scene.question && scene.kind !== 'transition' && (\n
\n \n \n \n \n )\n }\n}\n\nexport default Scene\n","import React, { Component } from 'react'\nimport { observer, inject } from 'mobx-react'\n\n@inject('diagramStore')\n@observer\nclass MoreMenu extends Component {\n render() {\n const { card } = this.props\n const { cameraLocations } = card.store\n return (\n card.showMoreMenu && (\n \n {scene.question}\n
\n )}\n {scene.kind !== 'transition' &&\n scene.answers.map((answer) => {\n return (\n\n {answer.letter}. {answer.name}\n
\n )\n })}\n {scene.kind === 'transition' && (\n \n \n {scene.kind_formatted}\n \n \n )}\n- \n {card.type === 'scene' && !card.start && (\n
- \n
- \n
- \n
- \n
- \n
Ending
\n \n \n )\n }\n}\n\nexport default Ending\n","import React, { Component } from 'react'\nimport { runInAction } from 'mobx'\nimport { observer, inject } from 'mobx-react'\nimport { DraggableCore } from 'react-draggable'\nimport Scene from './card/scene'\nimport Ending from './card/ending'\n\n@inject('diagramStore')\n@observer\nclass Card extends Component {\n startDrag = (_, dragInfo) => {\n const { card } = this.props\n card.startDrag(dragInfo)\n card.isDragging = true\n }\n\n handleDrag = (_, dragInfo) => {\n const { card } = this.props\n card.showMoreMenu = false\n\n runInAction('move card', () => {\n card.handleDrag(dragInfo)\n })\n }\n\n stopDrag = (e, dragInfo) => {\n const { card } = this.props\n card.stopDrag(e, dragInfo)\n card.isDragging = false\n }\n\n render() {\n const { card } = this.props\n return (\n\n {nodes.length > 0 ? (\n <>\n {getTestButton()}\n {getPublishButton()}\n \n ) : (\n <>\n \n {getTestButton()}\n \n \n {getPublishButton(true)}\n \n \n )}\n
\n {nodes.length > 0 && (\n \n
\n\n \n tab.isRoute && location.pathname.includes(tab.key)\n )}>\n
\n \n
\n\n \n
\n \n
\n \n
\n {scenario.name}
\n- \n {EDITOR_TABS.map((tab) => (\n
\n Member of ${count} group${\n count === 1 ? '' : 's'\n }\n
\n `\n\n return (\n - \n ${names\n .sort()\n .map((name) => formatName(name))\n .join('')}\n
\n {isTrainee && !isRestricted && (\n <>\n
\n \n )}\n {showDeleteTraineeOption()}\n \n )}\n \n \n )\n }\n return (\n
- \n ${list}\n
No groups selected
\n \n )\n return (\n- \n {groupList.map((group) => {\n const title = `\n
- \n
\n {getCount(group.count)}\n \n \n\n \n \n \n )\n })}\n
\n ${getTitle(group, 'scenarios')} \n ${getTitle(group, 'courses')}\n
\n `\n return (\n \n {'Create a new group – '}\n {searchKey}\n
\n \n )\n\n return (\n \n {showDetailGroupList()}\n
\n )\n}\nexport default TraineeDetailGroupsList\n","import { useMutation } from '@apollo/client'\nimport React, { useRef, useState } from 'react'\nimport { v4 as uuidv4 } from 'uuid'\nimport {\n addUserToGroupsMutation,\n removeUserFromGroupsMutation,\n} from '../../../apollo/query/groups'\nimport Modal from '../../UI/Modal'\nimport TraineeDetailGroupsList from '../Forms/TraineeDetailGroupsList'\nimport { chunkArray } from '../../../utils/helpers/javascript'\nimport { removeAlert, addSuccessAlert, addErrorAlert } from '../../../utils/helpers/alerts'\n\nconst BulkManageTraineeGroupsModal = ({\n id,\n appendTo,\n userIds,\n addUsers = true,\n bulkActionCallback,\n}) => {\n const groupIdsRef = useRef()\n const [key, setKey] = useState(uuidv4())\n\n const [addGroupsMutation] = useMutation(addUserToGroupsMutation)\n const [removeGroupsMutation] = useMutation(removeUserFromGroupsMutation)\n\n let alertId\n\n const handleSuccess = () => {\n removeAlert(alertId)\n\n let title\n if (addUsers) {\n title = 'Finished adding users to groups'\n } else {\n title = 'Finished removing users from groups'\n }\n\n addSuccessAlert({\n title\n })\n\n bulkActionCallback()\n }\n\n const handleError = (err) => {\n removeAlert(alertId)\n\n addErrorAlert({\n title: 'Something went wrong',\n subtitle: 'Please try again.'\n })\n\n throw new Error(err.message)\n }\n\n const createAlert = () => {\n let title\n\n if (addUsers) {\n title = `Currently adding ${userIds.length} trainees to ${groupIdsRef.current.length} groups`\n } else {\n title = `Currently removing ${userIds.length} trainees from ${groupIdsRef.current.length} groups`\n }\n const subtitle = `Please stay on this page until the process is done.`\n\n alertId = addSuccessAlert({\n title,\n subtitle,\n timeout: false,\n dismissable: false\n })\n }\n\n const confirmHandler = () => {\n const promise = async () => {\n const userLimit = 500\n const chunks = chunkArray(userIds, userLimit)\n const allresponses = []\n\n createAlert()\n\n if (addUsers) {\n for (const chunk of chunks) {\n const response = await addGroupsMutation({\n variables: {\n userIds: chunk,\n groupIds: groupIdsRef.current,\n },\n })\n allresponses.push(response)\n }\n } else {\n for (const chunk of chunks) {\n const result = await removeGroupsMutation({\n variables: {\n userIds: chunk,\n groupIds: groupIdsRef.current,\n },\n })\n allresponses.push(result)\n }\n }\n return allresponses\n }\n promise()\n .then(() => {\n handleSuccess()\n })\n .then(() => setKey(uuidv4()))\n .catch((err) => handleError(err))\n }\n const headerText = () => {\n if (addUsers) return 'Add selected trainees to groups'\n return 'Remove trainees from groups'\n }\n const labelText = () => {\n if (addUsers) return 'Add trainees to the following groups'\n return 'Remove trainees from the following groups'\n }\n\n return (\n \n {\n e.preventDefault()\n e.stopPropagation()\n getGroups()\n setShow(true)\n }}>\n {\n addGroup(group)\n setShow(false)\n }}\n hideHandler={() => setShow(false)}\n loading={loading}\n notFoundTitle=\"No groups found\"\n notFoundText={\n \n {`You don't have any groups to add or you have linked this\n user to all groups`}\n \n }\n data={allGroups}\n setSearchKey={setSearchKey}\n footer={searchKey && footer}\n />\n )}\n
\n \n {currentTrainee.activated ? (\n
\n \n )\n}\nexport default EditTraineeModal\n","import { useMutation } from '@apollo/client'\nimport React, { useState } from 'react'\nimport { v4 as uuidv4 } from 'uuid'\nimport { exportUsersMutation } from '../../../apollo/query/user'\nimport Modal from '../../UI/Modal'\nimport { addSuccessAlert } from '../../../utils/helpers/alerts'\nimport { handleApolloError } from '../../../utils/errors'\n\nconst ExportTraineesModal = ({ id, appendTo, userIds }) => {\n const [key, setKey] = useState(uuidv4())\n\n const [exportTrainees] = useMutation(exportUsersMutation, {\n onError: handleApolloError,\n })\n\n const submitHandler = () => {\n exportTrainees({\n variables: {\n kind: 'TRAINEES',\n userIds,\n },\n })\n addSuccessAlert({\n title: 'The export of trainees is being made',\n subtitle: 'You are notified by email when finished',\n icon: 'progress',\n timeout: false,\n })\n\n setKey(uuidv4())\n }\n\n const subtitle = () => {\n return (\n \n Create a CSV export of selected trainees.{' '}\n \n
\n ) : (\n \n )}\n \n \n
\n \n
\n Email address
\n{currentTrainee.email}
{' '}\n\n \n \n
\n \n
\n \n Trainee name\n
\n{currentTrainee.name}
{' '}\n\n \n \n
\n \n
\n \n )\n}\nexport default ImportTSVFile\n","import React, { useRef, useState } from 'react'\nimport TraineeDetailGroupsList from './TraineeDetailGroupsList'\n\nimport ImportTSVFile from '../../UI/Form/ImportTSVFile'\n\nconst ImportTraineesForm = ({ modalId, cancelHandler, callback }) => {\n const groupRef = useRef()\n const [shouldStartUploading, setShouldStartUploading] = useState(false)\n const [fileSelected, setFileSelected] = useState(false)\n return (\n \n )\n}\nexport default ImportTraineesForm\n","import { useLazyQuery, useMutation } from '@apollo/client'\nimport React, { useRef, useState } from 'react'\nimport { FaArrowRight, FaExclamationTriangle, FaUndo } from 'react-icons/fa'\nimport { v4 as uuidv4 } from 'uuid'\nimport { addUserToGroupsMutation } from '../../../apollo/query/groups'\nimport {\n addUserMutation,\n deleteUsersMutation,\n getUserByEmailQuery,\n updateUserMutation,\n} from '../../../apollo/query/user'\nimport { handleApolloError } from '../../../utils/errors'\nimport LoadingSpinner from '../../UI/LoadingSpinner'\nimport Modal from '../../UI/Modal'\nimport ImportTraineesForm from '../Forms/ImportTraineesForm'\nimport TraineeDetailGroupsList from '../Forms/TraineeDetailGroupsList'\nimport TraineeDetailSelectRole from '../TraineeDetailSelectRole'\n\nconst AddTraineeModal = ({ id, appendTo, importHandler, callback }) => {\n // Form state management\n const [key, setKey] = useState(uuidv4())\n const [importMany, setImportMany] = useState(false)\n\n // Add trainee management\n const groupIdsRef = useRef()\n const [existingTrainee, setExistingTrainee] = useState(false)\n const [step, setStep] = useState(0)\n const [values, setValues] = useState({\n userId: '',\n firstName: '',\n lastName: '',\n email: '',\n employeeNumber: '',\n role: 'USER', // Default add trainees as USER\n })\n\n const [addUser] = useMutation(addUserMutation, {\n onError: handleApolloError,\n onCompleted: ({ addUser: { user } }) => {\n setValues({\n ...values,\n userId: user.id,\n firstName: user.firstName,\n lastName: user.lastName,\n role: user.role,\n email: user.email,\n })\n if (user?.activated) {\n setExistingTrainee(user)\n }\n },\n })\n\n const [addUserToGroups] = useMutation(addUserToGroupsMutation, {\n onError: handleApolloError,\n })\n const [deleteUsers] = useMutation(deleteUsersMutation, {\n onError: handleApolloError,\n })\n const [getUserByEmail] = useLazyQuery(getUserByEmailQuery, {\n onCompleted: async ({ users }) => {\n if (!users.length) {\n setExistingTrainee(null)\n await addUser({\n variables: {\n ...values,\n },\n })\n return setStep(1)\n }\n return setExistingTrainee(users[0])\n },\n })\n\n const [updateTrainee] = useMutation(updateUserMutation, {\n onError: handleApolloError,\n })\n const clear = () => {\n // Timeout is needed to wait for form to close, before resetting state\n setTimeout(() => {\n setKey(uuidv4())\n setImportMany(false)\n setExistingTrainee(null)\n setValues({\n userId: '',\n firstName: '',\n lastName: '',\n email: '',\n role: 'USER',\n })\n setStep(0)\n }, 300)\n }\n\n const resetForm = () => {\n setValues({ ...values, email: '' })\n setExistingTrainee(null)\n document.querySelector('#emailInput').focus()\n }\n\n const submitHandler = (e) => {\n e.preventDefault()\n if (!values.email) return null\n return getUserByEmail({\n variables: {\n email: values.email.toLowerCase(),\n },\n })\n }\n\n const updateUserHandler = async (e) => {\n if (!existingTrainee && (!values.firstName || !values.lastName)) {\n if (!values.firstName)\n document\n .querySelector('#firstNameInput')\n .classList.add('input--required')\n if (!values.lastName)\n document\n .querySelector('#lastNameInput')\n .classList.add('input--required')\n e.preventDefault()\n e.stopPropagation()\n return null\n }\n if (groupIdsRef.current.length) {\n await addUserToGroups({\n variables: {\n userIds: [values.userId],\n groupIds: groupIdsRef.current,\n },\n })\n }\n updateTrainee({\n variables: {\n ...values,\n },\n })\n callback()\n return clear()\n }\n\n const cancelHandler = () => {\n deleteUsers({\n variables: {\n ids: [values.userId],\n },\n })\n clear()\n }\n const addUserButton = () => {\n if (existingTrainee)\n return (\n \n {\n setFiles([...files])\n hasFileSelected(files.length)\n }}\n />\n
\n \n \n Browse\n \n
\n {footerText}
\n \n )\n const codePartial = (\n <>\n \n {sessionInfo?.code}\n \n \n \n This code is valid for 60 minutes and can only be used once.\n {' '}\n Make sure to only give this code to {traineeNameOrEmail}.\n
\n\n
\n \n )\n const showContent = () => {\n if (multipleOrganisations) return multipleOrganisationsPartial\n return codePartial\n }\n const clear = () => {\n setTimeout(() => {\n setShowButton(true)\n }, 300)\n }\n\n return (\n OR
\n {footerText}\n\n \n
\n {showButton ? (\n \n If you click on Generate code you\n will receive a six digit code to give to the trainee. This is useful\n for local sessions. For remote sessions, please send an email to the\n trainee.\n
\n\n {\n setMultipleOrganisations(false)\n createSession({\n variables: {\n userId: currentTrainee.id,\n email: false,\n },\n })\n setShowButton(false)\n }}>\n Generate code\n \n
\n ) : (\n showContent()\n )}\n \n )\n}\n\nexport default GetTraineeCodeModal\n","import React from 'react'\nimport BulkManageTraineeGroupsModal from './Modal/BulkManageTraineeGroupsModal'\nimport DeleteTraineeModal from './Modal/DeleteTraineeModal'\nimport EditTraineeModal from './Modal/EditTraineeModal'\nimport ExportTraineesModal from './Modal/ExportTraineesModal'\nimport HelpSigninTraineesModal from './Modal/HelpSigninTraineesModal'\nimport ManageTraineeGroupsModal from './Modal/ManageTraineeGroupsModal'\nimport AddTraineeModal from './Modal/AddTraineeModal'\nimport GetTraineeCodeModal from './Modal/GetTraineeCodeModal'\n\nconst TraineeModals = ({\n appendTo,\n selectedTrainees,\n lmsUserIds,\n ownerIds,\n currentTrainee,\n groups,\n bulkActionAddUsers,\n clearHandler,\n editCallbackHandler,\n addTraineeCallBack,\n importHandler,\n bulkActionCallback,\n}) => {\n return (\n <>\n \n
\n OR
\n {footerText}\n- \n ${otherLmsList.map((l) => listItem(l)).join('')}\n
\n
\n
\n {traineeModalContent()}\n 1 ? 'trainees' : 'trainee'}\n closeHandler={dismissToastHandler}>\n {toastContent}\n \n
\n )\n}\n\nexport default withApollo(Trainees)\n","import { gql } from '@apollo/client'\n\nconst registrationQuery = gql`\n query registration($id: ID!) {\n registration(id: $id) {\n id\n state\n code\n device {\n description\n id\n }\n }\n }\n`\n\nconst getDevices = gql`\n query Devices {\n devices {\n id\n name\n registration\n description\n disableDeleteDownload\n signOutAfterSleep\n groups {\n id\n name\n endDate\n startDate\n }\n }\n }\n`\nconst createDeviceRegistration = gql`\n mutation createRegistration {\n createRegistration {\n registration {\n id\n code\n state\n device {\n id\n name\n registration\n description\n groups {\n id\n }\n }\n }\n }\n }\n`\n\nconst cancelRegistrationMutation = gql`\n mutation cancelRegistration($id: ID!) {\n cancelRegistration(id: $id) {\n registration {\n id\n state\n }\n }\n }\n`\n\nconst confirmDeviceRegistrationMutation = gql`\n mutation confirmRegistration($id: ID!, $name: String!) {\n confirmRegistration(id: $id, name: $name) {\n device {\n id\n name\n registration\n description\n disableDeleteDownload\n signOutAfterSleep\n groups {\n id\n }\n }\n }\n }\n`\n\nconst updateDeviceMutation = gql`\n mutation updateDevice(\n $id: ID!\n $name: String\n $registration: DeviceRegistration!\n $groupIds: [ID!]\n $disableDeleteDownload: Boolean\n $signOutAfterSleep: Boolean\n ) {\n updateDevice(\n id: $id\n name: $name\n registration: $registration\n groupIds: $groupIds\n disableDeleteDownload: $disableDeleteDownload\n signOutAfterSleep: $signOutAfterSleep\n ) {\n device {\n id\n name\n registration\n description\n disableDeleteDownload\n signOutAfterSleep\n groups {\n id\n }\n }\n }\n }\n`\n\nexport {\n getDevices,\n registrationQuery,\n createDeviceRegistration,\n cancelRegistrationMutation,\n confirmDeviceRegistrationMutation,\n updateDeviceMutation,\n}\n","import React, { useState } from 'react'\nimport { FaEllipsisH } from 'react-icons/fa'\nimport Dropdown from '../UI/Menu/Dropdown'\n\nconst SharedDevicesOptionDropdown = ({ id, setCurrentDeviceId }) => {\n const [isHovered, setIsHovered] = useState(false)\n\n if (isHovered)\n return (\n \n \n {tableSearchBar()}\n \n
\n \n {pageContent()}\n
\n \n
\n \n New {registrationData?.registration.device?.brand} device connected\n \n
\n )\n\n const showSessionExpired = () => (\n \n \n Session Expired{' '}\n {\n setCurrentCode(null)\n setIsSessionExpired(false)\n createRegistration()\n }}>\n Click here for a new code\n \n \n
\n )\n\n const showCode = (\n \n {currentCode ? (\n <>\n \n {currentCode}\n \n {\n e.preventDefault()\n createRegistration()\n }}>\n Generate Code\n \n )}\n
\n )\n\n return (\n This code is valid for 10 minutes and can only be used once.
\n \n ) : (\n\n \n {signInOption === 'REGISTERED_GROUP' && (\n
\n \n ))}\n \n ) : (\n ''\n )}\n \n When multiple groups are selected, a specific group can be selected\n to only show a list of trainees from that group. Group selection is\n done in the shared device. Trainees can only access courses and\n scenarios from a specific group. Group sign-in mode works best with\n groups of 50 trainees or less per group.{' '}\n
\n Select one or more groups to give the anonymous trainee access to\n courses and scenarios.{' '}\n
- \n {sortOnKey([...groups], 'name', false).map((g) => (\n
- \n
\n \n
\n
\n )}\n \n \n
\n \n
\n \n \n \n
\n }\n />\n ))}\n \n \n \n
\n {restrictedGroups.includes(signInOption) && showGroupInfo()}\n \n
\n \n \n )\n}\n\nexport default EditSharedDeviceModal\n","import React from 'react'\nimport { useMutation } from '@apollo/client'\nimport Modal from '../../UI/Modal'\nimport { updateDeviceMutation } from '../../../apollo/query/devices'\nimport { handleApolloError } from '../../../utils/errors'\nimport { addSuccessAlert } from '../../../utils/helpers/alerts'\n\nconst DeleteSharedDeviceModal = ({\n id,\n appendTo,\n ids,\n devices,\n clearSelectedItems,\n clearCurrentDeviceId,\n}) => {\n const [updateDevice] = useMutation(updateDeviceMutation, {\n onError: handleApolloError,\n })\n const deleteSharedDevice = (deviceId) => {\n const deviceToDelete = devices.find((d) => d.id === deviceId)\n updateDevice({\n variables: {\n ...deviceToDelete,\n registration: 'UNREGISTERED',\n },\n onCompleted: () => {\n addSuccessAlert({ title: 'Deletion successful' })\n },\n })\n }\n return (\n \n \n \n setDeviceSettings({\n ...deviceSettings,\n disableDeleteDownload: !deviceSettings.disableDeleteDownload,\n })\n }\n disabled={false}\n />\n {signInOption === 'REGISTERED_GROUP' && (\n \n setDeviceSettings({\n ...deviceSettings,\n signOutAfterSleep: !deviceSettings.signOutAfterSleep,\n })\n }\n disabled={false}\n />\n )}\n
\n Connected to ${groups.length} groups
- ${groupContent}
\n
\n {\n e.preventDefault()\n e.stopPropagation()\n getScenarios()\n setShowScenarioSelector(true)\n }}\n className=\"button hollow secondary text-bold mb-1 mt1\">\n {\n addScenario(scenario)\n getScenarios()\n }}\n loading={loading}\n hideHandler={() => setShowScenarioSelector(false)}\n notFoundTitle=\"No published scenarios\"\n notFoundText={\n \n There are no published scenarios (left) to add to this course\n \n }\n data={allScenarios}\n />\n )}\n
\n \n \n \n
\n \n \n \n $('#addCourseModal').foundation('open')}>\n Create your first course now!\n \n \n
\n \n)\n\nexport default CoursesEmptyPage\n","import React, { useState } from 'react'\nimport { FaEllipsisH } from 'react-icons/fa'\nimport Dropdown from '../UI/Menu/Dropdown'\n\nconst CourseOptionDropdown = ({ id, setCurrentCourse, courses }) => {\n const [isHovered, setIsHovered] = useState(false)\n\n if (isHovered) {\n return (\n {}}>\n {`You don't have any courses yet`}\n
\n\n
\n Access to ${count} ${type}${\n count === 1 ? '' : 's'\n }\n
\n `\n\n return (\n - \n ${names\n .sort((a, b) => a.localeCompare(b))\n .map((name) => formatName(name))\n .join('')}\n
\n \n \n
\n \n )\n}\n\nexport default CoursesUpgradeNeededPage\n","import React, { useState } from 'react'\nimport { useQuery } from '@apollo/client'\nimport { FaImage, FaTrash } from 'react-icons/fa'\nimport Table from '../components/Table'\nimport Toast from '../components/UI/Notifications/Toast'\nimport LoadingSpinner from '../components/UI/LoadingSpinner'\nimport TableHeader from '../components/UI/TableHeader'\nimport withApollo from '../hooks/withApollo'\nimport Delay from '../utils/helpers/Delay'\nimport Checkbox from '../components/UI/Form/Checkbox'\nimport { default as S } from '../utils/lang/en.json'\nimport { sortOnKey, dateFormat } from '../utils/format'\nimport { getCoursesQuery } from '../apollo/query/courses'\nimport AddCourseModal from '../components/Courses/Modal/AddCourseModal'\nimport EditCourseModal from '../components/Courses/Modal/EditCourseModal'\nimport DeleteCourseModal from '../components/Courses/Modal/DeleteCourseModal'\nimport CoursesEmptyPage from './Courses/CoursesEmptyPage'\nimport FilterEmptyState from '../components/UI/Menu/FilterEmptyState'\nimport TableColumnsDropdown from '../components/UI/TableColumnsDropdown'\nimport CourseOptionDropdown from '../components/Courses/CourseOptionDropdown'\nimport usePreferences from '../hooks/usePreferences'\nimport useCurrentFeatures from '../hooks/useCurrentFeatures'\nimport useCurrentUser from '../hooks/useCurrentUser'\nimport { filterColumnsHandler, sortHandler } from '../components/tableFunctions'\nimport TableSearchBar from '../components/UI/Table/TableSearchBar'\nimport TableAddButton from '../components/UI/Table/TableAddButton'\nimport GroupCourseScenarioTooltip from '../components/Groups/Tooltips/GroupCourseScenarioTooltip'\nimport CoursesUpgradeNeededPage from './Scenarios/CoursesUpgradeNeededPage'\n\nconst Courses = () => {\n const { hasFeature } = useCurrentFeatures()\n const coursesFeatureEnabled = hasFeature('COURSES')\n\n const [preferences, setPreferences] = usePreferences(\n 'courses',\n 'name',\n !coursesFeatureEnabled\n )\n const [selectedItems, setSelectedItems] = useState([])\n const [currentCourse, setCurrentCourse] = useState({})\n const [searchQuery, setSearchQuery] = useState('')\n const [dismissToast, setDismissToast] = useState(false)\n const [showEmptyState, setShowEmptyState] = useState(false)\n\n const [currentUser] = useCurrentUser()\n\n const { loading, data } = useQuery(getCoursesQuery, {\n skip: !coursesFeatureEnabled,\n })\n\n if (\n loading ||\n (coursesFeatureEnabled && (!data || !preferences || !currentUser))\n )\n return (\n \n
\n \n \n Upgrade your plan to get courses\n
\n\n Go to the subscription page and upgrade your plan to get access to\n courses\n
\n \n\n {loadModals()}\n 1 ? 'courses' : 'course'}\n closeHandler={() => {\n setDismissToast(true)\n setTimeout(() => {\n setDismissToast(false)\n }, 300)\n setTimeout(() => {\n setSelectedItems([])\n }, 10)\n }}>\n \n \n
\n )\n}\n\nexport default withApollo(Courses)\n","import React, { useState } from 'react'\nimport { FaEllipsisH } from 'react-icons/fa'\nimport Dropdown from '../UI/Menu/Dropdown'\nimport DataTooltip from '../UI/DataTooltip'\n\nconst GroupOptionDropdown = ({\n id,\n copyLinkHandler,\n publicLinkEnabled,\n isPublicLinkModalDisabled,\n setCurrentGroup,\n}) => {\n const [isCopied, setIsCopied] = useState(false)\n const [isHovered, setIsHovered] = useState(false)\n\n const showPublicLinkField = () => {\n let cn = 'o-dropdown__list-item text-normal text-dark'\n if (isCopied) cn += ' bg-success'\n\n return (\n \n
\n \n {showEmptyState ? (\n !preferences.filteredColumns.includes(i)\n )}\n sortOn={preferences.sortOn}\n sortHandler={(value) =>\n sortHandler(value, preferences, setPreferences)\n }\n selectedItems={selectedItems}\n selectable\n checkboxHandler={checkboxHandler}\n selectAllHandler={(ids) => setSelectedItems(ids)}\n type=\"courses\"\n rowSuffix={(i) => renderOptions(i)}\n />\n )}\n
\n\n \n
- \n {list.map((item) => (\n
- \n
\n \n \n \n ))}\n
No {type}s selected yet...
\n \n )}\n\n \n
\n ))\n }\n return (\n \n
\n )\n}\n\nexport default GroupRestrictAccess\n","import React, { useState } from 'react'\n\nimport ImportTSVFile from '../UI/Form/ImportTSVFile'\n\nconst ImportGroupsForm = ({ modalId, cancelHandler, callback }) => {\n const [shouldStartUploading, setShouldStartUploading] = useState(false)\n const [fileSelected, setFileSelected] = useState(false)\n return (\n \n )\n}\nexport default ImportGroupsForm\n","import React, { useState, useRef } from 'react'\nimport { useMutation } from '@apollo/client'\nimport { v4 as uuidv4 } from 'uuid'\nimport Modal from '../../UI/Modal'\nimport GroupsList from '../GroupsList'\nimport cache from '../../../apollo/cache'\nimport { addGroupMutation, getGroupsQuery } from '../../../apollo/query/groups'\nimport { addSuccessAlert } from '../../../utils/helpers/alerts'\nimport { handleApolloError } from '../../../utils/errors'\nimport GroupRestrictAccess from '../GroupRestrictAccess'\nimport ImportGroupsForm from '../ImportGroupsForm'\n\nconst AddGroupModal = ({ id, appendTo, purchasedCourses, purchasedScenarios, callback }) => {\n const courseRef = useRef([])\n const scenarioRef = useRef([])\n const [key, setKey] = useState(uuidv4())\n const [importMany, setImportMany] = useState(false)\n\n const [restrictedAccess, setRestrictedAccess] = useState(false)\n const [values, setValues] = useState({\n name: '',\n startDate: null,\n endDate: null,\n })\n\n const [addGroup] = useMutation(addGroupMutation, {\n onError: handleApolloError,\n onCompleted: ({ addGroup: { group } }) => {\n addSuccessAlert({ title: 'Group created', subtitle: group.name })\n\n const { groups } = cache.readQuery({ query: getGroupsQuery })\n cache.writeQuery({ query: getGroupsQuery, data: [...groups, group] })\n callback()\n },\n })\n\n const resetForm = () => {\n setTimeout(() => {\n setImportMany(false)\n setValues({ name: '' })\n setKey(uuidv4())\n }, 300)\n }\n\n const submit = () => {\n addGroup({\n variables: {\n name: values.name,\n publishedScenarioIds: scenarioRef.current.map((i) => Number(i)),\n courseIds: courseRef.current.map((i) => Number(i)),\n startDate:\n restrictedAccess && values.startDate ? values.startDate : null,\n endDate: restrictedAccess && values.endDate ? values.endDate : null,\n },\n })\n\n resetForm()\n }\n const getGroupLists = () => {\n const grouplists = [\n {\n label: 'Courses',\n type: 'course',\n ref: courseRef,\n },\n {\n label: 'Scenarios',\n type: 'scenario',\n ref: scenarioRef,\n },\n ]\n return grouplists.map((g, index) => (\n \n \n setRestrictedAccess(!restrictedAccess)}\n value=\"Set access period\"\n />\n
\n {restrictedAccess && showFields()}\n {restrictedAccess && showErrorMessages && (\n {errorMessage}\n )}\n \n \n
\n ))\n }\n\n const getFormContent = () => {\n if (!importMany)\n return (\n \n )\n return (\n \n {\n navigator.clipboard.writeText(group.publicLinkUrl)\n }}\n />{' '}\n {\n e.preventDefault()\n navigator.clipboard.writeText(group.publicLinkUrl)\n setIsCopied(true)\n }}>\n \n {buttonContent}\n \n \n
\n )\n }\n\n const handleDomains = () => {\n let shouldSave =\n domainRef.current.value !== group.publicLinkDomains.join(', ')\n\n setError({ ...error, show: false })\n const domains = domainRef.current.value.split(',').reduce((a, domain) => {\n let trimmed = domain.trim()\n if (trimmed[0] === '@') trimmed = trimmed.substr(1)\n a.push(trimmed)\n return a\n }, [])\n\n // validation\n domains.forEach((domain) => {\n if (domain.includes('@') || !domain.includes('.')) {\n setError({\n show: true,\n message: `Invalid domain ${domain}`,\n })\n shouldSave = false\n }\n if (!domain) {\n setError({\n show: true,\n message: 'A domain is required',\n })\n shouldSave = false\n }\n })\n\n domainsList.current = domains.map((a) => a.trim())\n\n if (shouldSave) publicLinkHandler(true)\n }\n\n const updatePublicLinkSecurity = () => {\n const { elements } = formRef.current\n if (elements['check-domain']?.checked && elements['check-email']?.checked)\n return publicLinkHandler(true, 'DOMAIN')\n\n if (elements['check-email']?.checked)\n return publicLinkHandler(true, 'EMAIL')\n\n if (clientHaveAnonymousPublicLink)\n return publicLinkHandler(true, 'ANONYMOUS')\n\n return publicLinkHandler(true, 'EMAIL')\n }\n\n const showLimitAccess = () => {\n return (\n <>\n \n\n \n \n
\n )}\n \n )\n }\n const submit = () => {\n setTimeout(() => {\n setIsCopied(false)\n }, 300)\n setKey(uuidv4())\n }\n return (\n \n \n @\n \n
\n {error.show && (\n {error.message}
\n )}\n {`Don't use the @. Separate multiple domains with a comma.`}\n\n \n
\n ))\n }\n return (\n \n \n
\n ))\n }\n const title = () => {\n if (addContent) return 'Add courses and scenarios to groups'\n return 'Remove courses and scenarios from groups'\n }\n return (\n \n \n \n \n creating a group\n \n \n \n
\n \n )\n}\n\nexport default GroupsEmptyState\n","import { useQuery } from '@apollo/client'\nimport React, { useState } from 'react'\nimport { FaChevronDown, FaUsers, FaEllipsisH } from 'react-icons/fa'\nimport { getGroupsQuery } from '../apollo/query/groups'\nimport Table from '../components/Table'\nimport Checkbox from '../components/UI/Form/Checkbox'\nimport LoadingSpinner from '../components/UI/LoadingSpinner'\nimport TableColumnsDropdown from '../components/UI/TableColumnsDropdown'\nimport TableHeader from '../components/UI/TableHeader'\nimport withApollo from '../hooks/withApollo'\nimport Delay from '../utils/helpers/Delay'\nimport { default as S } from '../utils/lang/en.json'\nimport { dateFormat, sortOnKey } from '../utils/format'\nimport Filter from '../components/UI/Menu/Filter'\nimport GroupOptionDropdown from '../components/Groups/GroupOptionDropdown'\nimport Toast from '../components/UI/Notifications/Toast'\nimport AddGroupModal from '../components/Groups/Modal/AddGroupModal'\nimport LinkSettingsModal from '../components/Groups/Modal/LinkSettingsModal'\nimport EditGroupModal from '../components/Groups/Modal/EditGroupModal'\nimport DeleteGroupModal from '../components/Groups/Modal/DeleteGroupModal'\nimport GroupCourseScenarioTooltip from '../components/Groups/Tooltips/GroupCourseScenarioTooltip'\nimport GroupPublicLink from '../components/Groups/GroupPublicLink'\nimport { truncate } from '../utils/helpers/javascript'\nimport {\n getPurchasedCoursesQuery,\n getCoursesQuery,\n} from '../apollo/query/courses'\nimport DataTooltip from '../components/UI/DataTooltip'\nimport usePreferences from '../hooks/usePreferences'\nimport useCurrentUser from '../hooks/useCurrentUser'\nimport { filterColumnsHandler, sortHandler } from '../components/tableFunctions'\nimport TableSearchBar from '../components/UI/Table/TableSearchBar'\nimport TableAddButton from '../components/UI/Table/TableAddButton'\nimport Dropdown from '../components/UI/Menu/Dropdown'\nimport BulkEditGroupModal from '../components/Groups/Modal/BulkEditGroupModal'\nimport FilterEmptyState from '../components/UI/Menu/FilterEmptyState'\nimport GroupsEmptyState from '../components/Groups/GroupsEmptyState'\nimport { getPurchasedScenariosQuery } from '../apollo/query/scenarios'\n\nconst Groups = () => {\n const [preferences, setPreferences] = usePreferences('groups')\n const [currentUser] = useCurrentUser()\n const [showEmptyFilters, setShowEmptyFilters] = useState(false)\n const [dismissToast, setDismissToast] = useState(false)\n const [currentGroup, setCurrentGroup] = useState(null)\n const [purchasedCourses, setPurchasedCourses] = useState([])\n const [purchasedScenarios, setPurchasedScenarios] = useState([])\n const [bulkEditGroupModeShouldAdd, setBulkEditGroupModeShouldAdd] =\n useState(true)\n // Sorting & filtering\n const [selectedItems, setSelectedItems] = useState([])\n const [searchQuery, setSearchQuery] = useState('')\n const [filterOption, setFilterOption] = useState({\n course: [], // array of course names\n scenario: '',\n })\n\n const { loading: loadingPurchasedCourses } = useQuery(\n getPurchasedCoursesQuery,\n {\n onCompleted: ({ purchasedCourses: p }) => setPurchasedCourses(p),\n }\n )\n\n const { loading: loadingPurchasedScenarios } = useQuery(\n getPurchasedScenariosQuery,\n {\n onCompleted: ({ purchasedScenarios: p }) => setPurchasedScenarios(p),\n }\n )\n\n const { loading: loadingCourses, data: coursesData } =\n useQuery(getCoursesQuery)\n const { loading, data, refetch } = useQuery(getGroupsQuery, {\n onCompleted: (d) => {\n return d.groups.filter((group) => group.courses === [])\n },\n })\n\n const tableHeaders = [\n 'name',\n 'courses',\n 'scenarios',\n 'publicLink',\n 'trainees',\n 'startDate',\n 'endDate',\n 'createdAt',\n ]\n\n const copyLink = (id) => {\n navigator.clipboard.writeText(\n data.groups.find(({ id: i }) => i === id).publicLinkUrl\n )\n }\n\n if (\n loading ||\n loadingCourses ||\n loadingPurchasedCourses ||\n loadingPurchasedScenarios ||\n !data ||\n !preferences ||\n !currentUser ||\n !coursesData\n ) {\n return (\n No groups yet!
\n \n Start by{' '}\n\n
\n {loadModals()}\n 1 ? 'groups' : 'group'}\n closeHandler={() => {\n setDismissToast(true)\n setTimeout(() => setDismissToast(false), 300)\n setTimeout(() => setSelectedItems([]), 10)\n }}>\n {toastContent}\n \n
\n )\n}\nexport default withApollo(Groups)\n","import { gql } from '@apollo/client'\nimport { PRODUCT_FIELDS } from './fragments'\n\nconst getProductsQuery = gql`\n ${PRODUCT_FIELDS}\n query getProducts {\n products {\n ...ProductFields\n }\n }\n`\n\nconst addProductMutation = gql`\n ${PRODUCT_FIELDS}\n mutation addProduct(\n $name: String!\n $description: String!\n $kind: ProductKind!\n $licenseType: ProductLicenseType\n $licenseDuration: Int\n $courseIds: [Int!]!\n $scenarioIds: [Int!]!\n $state: ProductState!\n $blobId: String\n ) {\n addProduct(\n name: $name\n description: $description\n kind: $kind\n licenseType: $licenseType\n licenseDuration: $licenseDuration\n state: $state\n courseIds: $courseIds\n scenarioIds: $scenarioIds\n blobId: $blobId\n ) {\n product {\n ...ProductFields\n }\n }\n }\n`\nconst getPurchasedProductsQuery = gql`\n query purchasedProducts {\n purchasedProducts {\n id\n client {\n id\n name\n logoMobileUrl\n }\n name\n description\n imageUrl\n purchases {\n activeLicenseCount\n availableLicenseCount\n expirationDate\n expiredLicenseCount\n kind\n id\n licenseType\n licenseDuration\n purchaseDate\n state\n usedLicenseCount\n }\n subscriptions {\n licenseDuration\n licenseType\n renewalDate\n renewalLicenseCount\n startDate\n state\n }\n courses {\n scenarios {\n id\n description\n imageUrl\n name\n }\n id\n name\n description\n }\n scenarios {\n id\n name\n description\n imageUrl\n }\n }\n }\n`\nconst updateProductMutation = gql`\n ${PRODUCT_FIELDS}\n mutation updateProduct(\n $id: ID!\n $name: String!\n $description: String!\n $kind: ProductKind!\n $licenseType: ProductLicenseType\n $licenseDuration: Int\n $state: ProductState!\n $blobId: String\n $courseIds: [Int!]!\n $scenarioIds: [Int!]!\n ) {\n updateProduct(\n id: $id\n name: $name\n description: $description\n kind: $kind\n licenseType: $licenseType\n licenseDuration: $licenseDuration\n state: $state\n courseIds: $courseIds\n scenarioIds: $scenarioIds\n blobId: $blobId\n ) {\n product {\n ...ProductFields\n }\n }\n }\n`\nconst removeProductMutation = gql`\n mutation removeProduct($id: ID!) {\n removeProduct(id: $id) {\n id\n }\n }\n`\nexport {\n getProductsQuery,\n addProductMutation,\n updateProductMutation,\n removeProductMutation,\n getPurchasedProductsQuery,\n}\n","import React, { useState } from 'react'\nimport { FaChevronDown } from 'react-icons/fa'\n\nconst Accordion = ({ id, headers, content }) => {\n const [activeTab, setActiveTab] = useState(null)\n\n const activeHandler = (index) => {\n if (activeTab === index) return setActiveTab(null)\n return setActiveTab(index)\n }\n\n const createHeader = (header, index) => {\n const { title, suffix } = header\n\n return (\n \n \n
\n \n {getPageContent()}\n
\n {title}
\n {suffix}
\n \n )\n }\n const createContent = (contentItem, index) => (\n \n {createHeader(header, index)}\n {createContent(content[index], index)}\n
\n ))\n }\n return (\n \n {createRows()}\n
\n )\n}\nexport default Accordion\n","import React, { useState } from 'react'\nimport { truncate } from '../../../../utils/helpers/javascript'\nimport scenarioBg from '../../../../../../images/default/scenario.png'\nimport Accordion from '../../../UI/Accordion'\n\nconst CourseDescription = ({ description }) => {\n const [showMore, setShowMore] = useState(false)\n return (\n \n {showMore ? `${description} ` : `${truncate(description, 200, true)} `}\n {description.length > 200 && (\n
\n
\n )\n}\n\nconst ProductContentTab = ({ product }) => {\n const [showMore, setShowMore] = useState(false)\n\n const accordionHeaders = product.courses.reduce((a, course) => {\n const { length } = course.scenarios\n a.push({\n title: course.name,\n suffix: length ? `${length} scenario${length === 1 ? '' : 's'}` : '',\n })\n return a\n }, [])\n\n const accordionContent = product.courses.reduce((a, course) => {\n a.push(\n <>\n \n
\n\n \n 
\n
\n {scenario.name}
\n\n {showMore\n ? `${scenario.description} `\n : `${truncate(scenario.description, 200, true)} `}\n {scenario.description.length > 200 && (\n
\n {course.scenarios.map((scenario) => (\n
\n \n )\n return a\n }, [])\n return (\n <>\n \n
\n\n {!!product.courses.length && (\n \n
{' '}\n {product.name}
\n\n {showMore\n ? product.description\n : truncate(product.description, 200, true)}\n {' '}\n {product.description.length > 200 && (\n <>\n
\n
\n )}\n\n {!!product.scenarios.length && (\n \n {product.courses.length} Course{product.courses.length > 1 && 's'}\n
\n\n
\n )}\n \n )\n}\nexport default ProductContentTab\n","import React, { useEffect, useState } from 'react'\nimport { v4 as uuidv4 } from 'uuid'\nimport { FaQuestionCircle } from 'react-icons/fa'\nimport { default as S } from '../../../../utils/lang/en.json'\nimport { dateFormat, sortOnKey } from '../../../../utils/format'\nimport DataTooltip from '../../../UI/DataTooltip'\n\nconst PurchasedLicensesTab = ({ product }) => {\n const { licenseType, kind } = product.purchases[0]\n const [totalCount, setTotalCount] = useState(0)\n const { licenseDuration } = product.purchases[product.purchases.length - 1]\n\n useEffect(() => {\n if (product && product.purchases) {\n const n = product.purchases.reduce(\n (a, b) => {\n const x = {\n availableLicenseCount:\n a.availableLicenseCount + b.availableLicenseCount,\n activeLicenseCount: a.activeLicenseCount + b.activeLicenseCount,\n usedLicenseCount: a.usedLicenseCount + b.usedLicenseCount,\n expiredLicenseCount: a.expiredLicenseCount + b.expiredLicenseCount,\n }\n const sum =\n x.availableLicenseCount +\n a.activeLicenseCount +\n a.usedLicenseCount +\n a.expiredLicenseCount\n return { ...x, sum }\n },\n {\n availableLicenseCount: 0,\n activeLicenseCount: 0,\n usedLicenseCount: 0,\n expiredLicenseCount: 0,\n }\n )\n setTotalCount(n)\n }\n }, [product])\n\n const createBars = (purchases) => {\n return purchases.map((purchase) => {\n const barItems = [\n {\n type: 'available',\n count: purchase.availableLicenseCount,\n color: 'energized',\n },\n {\n type: 'active',\n count: purchase.activeLicenseCount,\n color: 'royal',\n },\n {\n type: 'used',\n count: purchase.usedLicenseCount,\n color: 'stable-dark',\n },\n {\n type: 'expired',\n count: purchase.expiredLicenseCount,\n color: 'stable-light',\n },\n ]\n const total = barItems.reduce((a, { count }) => {\n return a + count\n }, 0)\n const calculatePercentages = barItems.map(({ count }) => {\n if (!count) return count\n let percentage = (count / total) * 100\n if (percentage < 5) percentage = 5\n return percentage\n })\n const totalPercent = calculatePercentages.reduce((a, b) => a + b, 0)\n\n const createBarItems = () => {\n return barItems.reduce((a, item, index) => {\n if (!item.count) return a\n a.push(\n \n {product.scenarios.length} Scenario\n {product.scenarios.length > 1 && 's'}\n
\n {product.scenarios.length && (\n\n {product.scenarios.map((scenario) => (\n
\n )}\n {item.count}
\n \n \n )\n return a\n }, [])\n }\n\n const expirationLine = () => {\n if (purchase.expirationDate) {\n return `Expires ${dateFormat(\n purchase.expirationDate,\n 'DD MMM YYYY',\n false\n )}`\n }\n }\n\n return (\n \n {dateFormat(purchase.purchaseDate, 'DD MMM YYYY', false)}\n
\n {expirationLine()}
\n\n
\n \n )\n })\n }\n const tooltipTitle = `\n {createBarItems()}
\n - \n
- Available licenses have not yet been used and are still available. \n
- Active licenses are currently in use. \n
- Used licenses have been used, and have passed the license duration. \n
- Expired licenses have passed the expiration date without being used. \n
\n
\n )\n}\n\nexport default PurchasedLicensesTab\n","import React, { useState, useEffect } from 'react'\nimport { v4 as uuidv4 } from 'uuid'\nimport Modal from '../../UI/Modal'\nimport { TabTitles, TabContent } from '../../UI/Tabs/Tabs'\nimport ProductContentTab from './Tabs/ProductContentTab'\nimport PurchasedLicensesTab from './Tabs/PurchasedLicensesTab'\n\nconst PurchasedProductInfoModal = ({\n id,\n appendTo,\n product,\n showLicenseTab = false,\n}) => {\n const [selectedTab, setSelectedTab] = useState(0)\n\n useEffect(() => {\n if (product) setSelectedTab(showLicenseTab ? 1 : 0)\n }, [product])\n\n useEffect(() => {\n setSelectedTab(showLicenseTab ? 1 : 0)\n }, [showLicenseTab])\n\n if (!product) return Purchased licenses
\n{subTitle()}
\n\n
\n \n
\n \n \n {licenseType !== 'UNLIMITED' && (\n
\n {kind === 'SUBSCRIPTION' && (\n \n \n {totalCount.availableLicenseCount} Available\n
\n )}\n \n \n {totalCount.activeLicenseCount} Active\n
\n \n \n {totalCount.usedLicenseCount} Used\n
\n \n \n {totalCount.expiredLicenseCount} Expired\n
\n \n \n \n
\n \n {product.subscriptions[0].state === 'ACTIVE'\n ? `You have a subscription on this product. Renews on ${dateFormat(product.subscriptions[0].renewalDate, 'DD MMM YYYY')} with ${product.subscriptions[0].renewalLicenseCount || 'unlimited'} licenses.`\n : `The subscription on this product has been cancelled`}\n
\n )}\n {createBars(\n sortOnKey([...product.purchases], 'expirationDate', true)\n )}\n \n
\n \n )\n}\n\nexport default PurchasedProductInfoModal\n","import React from 'react'\nimport { default as S } from '../../../utils/lang/en.json'\nimport { dateFormat } from '../../../utils/format'\nimport scenarioBg from '../../../../../images/default/scenario.png'\n\nconst PurchasedProductCards = ({\n products,\n setCurrentProduct,\n setShowLicenseTab,\n}) => {\n const getSubtitle = (product) => {\n return `${\n product.courses.length\n ? `${product.courses.length} course${\n product.courses.length > 1 ? 's' : ''\n }`\n : ''\n }${product.courses.length && product.scenarios.length ? ', ' : ''} ${\n product.scenarios.length\n ? `${product.scenarios.length} scenario${\n product.scenarios.length > 1 ? 's' : ''\n }`\n : ''\n } `\n }\n\n const getTotalCount = (purchases) => {\n return purchases.reduce(\n (a, b) => {\n const x = {\n availableLicenseCount:\n a.availableLicenseCount + b.availableLicenseCount,\n activeLicenseCount: a.activeLicenseCount + b.activeLicenseCount,\n usedLicenseCount: a.usedLicenseCount + b.usedLicenseCount,\n expiredLicenseCount: a.expiredLicenseCount + b.expiredLicenseCount,\n }\n const sum =\n x.availableLicenseCount +\n x.activeLicenseCount +\n x.usedLicenseCount +\n x.expiredLicenseCount\n return { ...x, sum }\n },\n {\n availableLicenseCount: 0,\n activeLicenseCount: 0,\n usedLicenseCount: 0,\n expiredLicenseCount: 0,\n }\n )\n }\n\n const getLicenseInfo = (product) => {\n const {\n kind,\n state,\n expirationDate,\n licenseType,\n licenseDuration: productLicenseDuration,\n } = product.purchases[0]\n\n const topText = () => {\n if (licenseType === 'UNLIMITED') {\n return 'Unlimited licenses'\n } else {\n return `${\n getTotalCount(product.purchases).availableLicenseCount\n } licenses available`\n }\n }\n\n const subText = () => {\n if (kind === 'SUBSCRIPTION') {\n const { licenseDuration, renewalDate, renewalLicenseCount, state } =\n product.subscriptions[0]\n\n const date = dateFormat(renewalDate, 'DD MMM YYYY')\n\n if (state === 'ACTIVE') {\n return `${\n S.store.licenseType[licenseType]\n } license (${licenseDuration} month${\n licenseDuration === 1 ? '' : 's'\n }) • Renews ${date} with ${renewalLicenseCount} licenses`\n } else {\n return `${\n S.store.licenseType[licenseType]\n } license (${licenseDuration} month${\n licenseDuration === 1 ? '' : 's'\n }) • Cancelled at ${date}`\n }\n }\n\n if (kind === 'ONE_TIME') {\n return `${\n S.store.licenseType[licenseType]\n } license (${productLicenseDuration} month${\n productLicenseDuration === 1 ? '' : 's'\n })`\n }\n }\n\n return (\n <>\n \n
\n \n
\n \n {topText()}\n
\n \n\n {subText()}\n
\n \n \n )\n }\n return products.map((product) => {\n return (\n\n setShowLicenseTab(false)}>\n
\n \n \n
\n \n \n
\n \n {product.client.name}\n
\n \n
\n \n \n
\n {product.name}
\n\n {getSubtitle(product)}\n
\n\n
\n \n )\n}\n\nexport default withApollo(Purchased)\n","import { gql } from \"@apollo/client\"\n\nconst getAllPlanHistories = gql`\n query getAllPlanHistories {\n allPlanHistories {\n client {\n id\n name\n }\n planChange {\n changed\n changeFrom {\n id\n name\n }\n changeTo {\n id\n name\n }\n }\n periodChange {\n changed\n changeFrom\n changeTo\n }\n currencyChange {\n changed\n changeFrom\n changeTo\n }\n additionalPublishedScenariosChange {\n changed\n changeFrom\n changeTo\n }\n additionalWorkspacesChange {\n changed\n changeFrom\n changeTo\n }\n createdAt\n }\n }\n`\n\nexport { getAllPlanHistories }\n","import React, { useState } from 'react'\nimport { useQuery } from '@apollo/client'\nimport Table from '../../Table'\nimport LoadingSpinner from '../../UI/LoadingSpinner'\nimport withApollo from '../../../hooks/withApollo'\nimport Delay from '../../../utils/helpers/Delay'\nimport { dateFormat, sortOnKey } from '../../../utils/format'\nimport TableHeader from '../../UI/TableHeader'\nimport { filterColumnsHandler, sortHandler } from '../../tableFunctions'\nimport TableColumnsDropdown from '../../UI/TableColumnsDropdown'\nimport { default as S } from '../../../utils/lang/en.json'\nimport Checkbox from '../../UI/Form/Checkbox'\nimport { getAllPlanHistories } from '../../../apollo/query/planHistories'\nimport { FaArrowRight, FaImage } from 'react-icons/fa'\nimport TableSearchBar from '../../UI/Table/TableSearchBar'\nimport FilterEmptyState from '../../UI/Menu/FilterEmptyState'\n\nconst tableHeaders = [\n 'name',\n 'id',\n 'createdAt',\n 'planChange',\n 'periodChange',\n 'currencyChange',\n 'additionalPublishedScenariosChange',\n 'additionalWorkspacesChange',\n]\n\nconst PlanHistories = () => {\n const [searchQuery, setSearchQuery] = useState('')\n const [showEmptyState, setShowEmptyState] = useState(false)\n const [preferences, setPreferences] = useState({\n sortOn: {\n isAscending: true,\n value: 'createdAt',\n },\n filteredColumns: [],\n })\n\n // Data & render states\n const { loading, data } = useQuery(getAllPlanHistories)\n\n const tableLeftBar = () => (\n <>\n \n
\n \n \n
\n \n {\n const searchString =\n `${product.name} ${product.client.name}`.toLowerCase()\n return searchString.includes(searchQuery.toLowerCase())\n })}\n setShowLicenseTab={setShowLicenseTab}\n setCurrentProduct={setCurrentProduct}\n />\n
\n \n \n {showEmptyState ? (\n {\n sortHandler(value, preferences, setPreferences)\n }}\n headers={tableHeaders.filter(\n (i) => !preferences.filteredColumns.includes(i)\n )}\n type=\"planHistories\"\n />\n )}\n
\n \n )\n}\n\nexport default withApollo(PlanHistories)\n","import { gql } from '@apollo/client'\n\nconst getCurrentClientQuery = gql`\n query currentClient {\n currentClient {\n id\n name\n appTitle\n appDescription\n }\n }\n`\n\nconst getClientsQuery = gql`\n query clients {\n clients {\n id\n name\n createdAt\n lastActivityAt\n features\n workspaceKind\n workspaceManagedByClientName\n planBillingPeriod\n planAdditionalPublishedScenarios\n planAdditionalWorkspaces\n statistics {\n traineeCount\n memberCount\n enrolledTraineeCount\n draftScenarioCount\n publishedScenarioCount\n testScenarioCount\n suspendedScenarioCount\n originalSceneCount\n publishedSceneCount\n groupCount\n courseCount\n attemptCount\n lastMonthAttemptCount\n testAttemptCount\n lastMonthTestAttemptCount\n last3mActiveTraineeCount\n mediumCount\n originalStorageByteSize\n processedStorageByteSize\n publishedStorageByteSize\n lastMonthDraftSceneCount\n lastWeekDraftSceneCount\n lastMonthPublishedScenarioCount\n lastMonthMediumCount\n lastWeekActiveMemberCount\n lastMonthActiveMemberCount\n }\n }\n }\n`\n\nconst getCurrentClientBillingQuery = gql`\n query currentClientBilling {\n currentClient {\n billingFirstName\n billingLastName\n billingEmail\n billingReference\n billingName\n billingStreet\n billingPostalcode\n billingCity\n billingCountry\n billingVatNumber\n }\n }\n`\n\nconst updateClientBrandingMutation = gql`\n mutation updateClientBranding(\n $appTitle: String\n $appDescription: String\n $primaryColor: String\n $secondaryColor: String\n $logoVrBlobId: String\n $logoMobileBlobId: String\n ) {\n updateClientBranding(\n appTitle: $appTitle\n appDescription: $appDescription\n primaryColor: $primaryColor\n secondaryColor: $secondaryColor\n logoVrBlobId: $logoVrBlobId\n logoMobileBlobId: $logoMobileBlobId\n ) {\n client {\n id\n appTitle\n appDescription\n primaryColor\n secondaryColor\n locale\n emailIntro\n }\n }\n }\n`\n\nconst updateClientEmailsMutation = gql`\n mutation updateClientEmails($locale: Locale!, $emailIntro: String!) {\n updateClientEmails(locale: $locale, emailIntro: $emailIntro) {\n client {\n appTitle\n appDescription\n primaryColor\n secondaryColor\n logoVrUrl\n logoMobileUrl\n locale\n emailIntro\n }\n }\n }\n`\n\nconst updateClientPlanMutation = gql`\n mutation updateClientPlan(\n $additionalPublishedScenarios: Int!\n $additionalWorkspaces: Int!\n ) {\n updateClientPlan(\n additionalPublishedScenarios: $additionalPublishedScenarios\n additionalWorkspaces: $additionalWorkspaces\n ) {\n client {\n planAdditionalWorkspaces\n planAdditionalPublishedScenarios\n }\n }\n }\n`\n\nconst updateClientBillingMutation = gql`\n mutation updateClientBilling(\n $billingFirstName: String!\n $billingLastName: String!\n $billingEmail: String!\n $billingName: String!\n $billingStreet: String!\n $billingPostalcode: String!\n $billingCity: String!\n $billingCountry: String!\n $billingVatNumber: String!\n $billingReference: String!\n ) {\n updateClientBilling(\n billingFirstName: $billingFirstName\n billingLastName: $billingLastName\n billingEmail: $billingEmail\n billingName: $billingName\n billingStreet: $billingStreet\n billingPostalcode: $billingPostalcode\n billingCity: $billingCity\n billingCountry: $billingCountry\n billingVatNumber: $billingVatNumber\n billingReference: $billingReference\n ) {\n client {\n billingFirstName\n billingLastName\n billingEmail\n billingName\n billingStreet\n billingPostalcode\n billingCity\n billingCountry\n billingVatNumber\n billingReference\n }\n }\n }\n`\n\nconst getBuyingClientsQuery = gql`\n query getBuyingClients {\n clients: buyingClients {\n id\n name\n }\n }\n`\n\nconst switchClientMutation = gql`\n mutation switchClient($id: ID!) {\n switchClient(id: $id) {\n client {\n id\n name\n }\n }\n }\n`\n\nconst updateClientSettingsMutation = gql`\n mutation updateClientSettings($settings: [Setting!]!) {\n updateClientSettings(settings: $settings) {\n client {\n id\n name\n settings\n }\n }\n }\n`\n\nexport {\n getCurrentClientQuery,\n getClientsQuery,\n getCurrentClientBillingQuery,\n getBuyingClientsQuery,\n updateClientBrandingMutation,\n updateClientEmailsMutation,\n updateClientPlanMutation,\n updateClientBillingMutation,\n switchClientMutation,\n updateClientSettingsMutation,\n}\n","import React, { useState } from 'react'\nimport { FaEllipsisH } from 'react-icons/fa'\nimport { useQuery } from '@apollo/client'\nimport Dropdown from '../UI/Menu/Dropdown'\nimport useCurrentUser from '../../hooks/useCurrentUser'\nimport { clientsQuery } from '../../apollo/query/user'\n\nconst WorkspaceOptionDropdown = ({ id, onClick, deleteTemporaryDisabled }) => {\n const [isHovered, setIsHovered] = useState(false)\n const [currentUser] = useCurrentUser()\n\n const { data: clientsData } = useQuery(clientsQuery, {\n skip: !currentUser,\n })\n\n const handleClick = (e) => {\n e.preventDefault()\n const { action } = e.target.dataset\n if (action === 'delete' && deletedDisabled) return false\n onClick(action)\n }\n\n if (!currentUser || (!currentUser.administrator && !clientsData)) return null\n\n const clients = clientsData?.clients\n\n if (isHovered) {\n return (\n \n
\n \n \n
\n \n {features.map((feature) => (\n \n ))}\n \n )\n }\n\n const getBillingFields = () => {\n if (formValues.kind !== 'BILLING') {\n return (\n <>\n \n \n \n )\n }\n\n return (\n <>\n \n
\n\n \n \n \n
\n \n
\n\n \n \n \n
\n \n \n \n
\n \n {selectedPlan &&\n selectedPlan.features.includes('PUBLISHED_SCENARIOS') && (\n \n \n \n
\n )}\n \n \n )\n }\n\n const getOwnerFields = () => {\n return (\n <>\n \n \n \n
\n )}\n\n {selectedPlan && selectedPlan.features.includes('WORKSPACES') && (\n \n \n
\n\n \n
\n\n \n \n
\n \n \n
\n \n
\n \n )\n }\n\n const onClose = () => {\n setTimeout(() => {\n setFormValues(initialValues)\n }, 500)\n onCloseCallback()\n }\n\n return (\n \n \n
\n \n \n
\n \n \n {showEmptyState && !isSortingData ? (\n !preferences.filteredColumns.includes(i)\n )}\n sortOn={preferences.sortOn}\n sortHandler={(value) =>\n sortHandler(value, preferences, setPreferences)\n }\n loadMore={hasMore}\n loadMoreHandler={() => setLimit(limit + numberOfItems)}\n type=\"clients\"\n rowSuffix={renderOptions}\n />\n )}\n
\n\n \n
\n \n
\n \n )\n}\n\nexport default withApollo(AdminWorkspaces)\n","import React, { useState } from 'react'\nimport { TabContent } from '../../components/UI/Tabs/Tabs'\nimport withApollo from '../../hooks/withApollo'\nimport PlanHistories from '../../components/Admin/Workspaces/PlanHistories'\nimport AdminWorkspaces from '../../components/Admin/Workspaces/AdminWorkspaces'\n\nconst Workspaces = () => {\n const [activeTab, setActiveTab] = useState(0)\n\n const titles = ['workspaces', 'planHistories']\n\n const content = [\n \n
\n \n\n \n
\n - \n
\n
\n {canViewAttempts && (\n
}\n {published && (\n
\n
\n \n \n )\n}\nexport default AddScenarioModal\n","import React, { useState, useEffect } from 'react'\nimport { useMutation } from '@apollo/client'\nimport { DirectUpload } from '@rails/activestorage'\nimport { FaTimes } from 'react-icons/fa'\nimport useFoundation from '../../../hooks/useFoundation'\nimport {\n updateScenarioMutation,\n updateScenarioImageMutation,\n} from '../../../apollo/query/scenarios'\nimport { default as S } from '../../../utils/lang/en.json'\nimport { addSuccessAlert, addErrorAlert } from '../../../utils/helpers/alerts'\nimport { handleApolloError } from '../../../utils/errors'\nimport { validateImageExtension } from '../../../utils/validation/validate'\n\nconst EditScenarioModal = ({ id, appendTo, scenarios }) => {\n const [scenarioId, setScenarioId] = useState(null)\n const [scenario, setScenario] = useState(null)\n const [title, setTitle] = useState(null)\n const [description, setDescription] = useState(null)\n const [previewImage, setPreviewImage] = useState('')\n const [image, setImage] = useState(null)\n\n useEffect(() => {\n if (scenarios) {\n setScenario(scenarios[0])\n }\n }, [scenarios])\n\n useEffect(() => {\n if (scenario) {\n setTitle(scenario.name)\n setScenarioId(scenario.id)\n setDescription(scenario.description)\n setPreviewImage(scenario.imageUrl)\n setImage(scenario.imageUrl)\n }\n }, [scenario])\n\n const editNotificationHandler = (s) => {\n addSuccessAlert({\n title: S.notifications.scenarios.edit,\n subtitle: `Changes to '${s.name}' were saved succesfully`,\n })\n }\n\n const [updateScenario] = useMutation(updateScenarioMutation, {\n onError: handleApolloError,\n update: (_, { data: d }) => {\n editNotificationHandler(d.updateScenario.scenario)\n },\n })\n const [updateScenarioWithImage] = useMutation(updateScenarioImageMutation, {\n onError: handleApolloError,\n update: (_, { data: d }) => {\n editNotificationHandler(d.updateScenario.scenario)\n },\n })\n\n const DIRECT_UPLOAD_URL = '/rails/active_storage/direct_uploads'\n\n const handleEditScenario = () => {\n if (!title) return null\n\n if (image !== scenario.imageUrl) {\n const upload = new DirectUpload(image, DIRECT_UPLOAD_URL)\n upload.create((error, blob) => {\n if (error) throw new Error(error.message)\n updateScenarioWithImage({\n variables: {\n id: scenario.id,\n name: title,\n description,\n blobId: blob.signed_id || '',\n },\n })\n })\n } else {\n updateScenario({\n variables: {\n id: scenario.id,\n name: title,\n description,\n },\n })\n }\n return $('#editScenarioModal').foundation('close')\n }\n\n const ref = useFoundation()\n\n return (\n \n \n \n {`${image ? 'Change' : 'Select'} cover image`}\n {\n const file = event.target.files[0]\n if (validateImageExtension(file)) {\n setPreviewImage(URL.createObjectURL(file))\n setImage(file)\n } else {\n addErrorAlert({\n title: `Invalid image file type: ${file.type}`,\n subtitle: 'Please upload a png or jpeg image',\n timeout: 6000,\n })\n }\n }}>\n \n
\n \n {hybridNewFlow && flowFields()}\n \n
\n \n
\n New scenario
\n \n\n \n Cancel\n \n {\n handleCreateScenario()\n }}>\n Confirm\n \n
\n \n
\n \n \n \n Change cover image\n {\n const file = event.target.files[0]\n if (validateImageExtension(file)) {\n setPreviewImage(URL.createObjectURL(file))\n setImage(file)\n } else {\n addErrorAlert({\n title: `Invalid image file type: ${file.type}`,\n subtitle: 'Please upload a png or jpeg image',\n timeout: 6000,\n })\n }\n }}\n />\n \n
\n \n
\n \n
\n Edit scenario
\n \n\n \n Cancel\n \n {\n handleEditScenario()\n }}>\n Confirm\n \n
\n \n \n )\n}\nexport default EditScenarioModal\n","import { useMutation } from '@apollo/client'\nimport React, { useEffect, useState } from 'react'\nimport { FaTimes } from 'react-icons/fa'\nimport { v4 as uuidv4 } from 'uuid'\nimport cache from '../../../apollo/cache'\nimport {\n duplicateScenarioMutation,\n getScenariosQuery,\n} from '../../../apollo/query/scenarios'\nimport useFoundation from '../../../hooks/useFoundation'\nimport { sortOnKey } from '../../../utils/format'\nimport { default as S } from '../../../utils/lang/en.json'\nimport { addSuccessAlert } from '../../../utils/helpers/alerts'\nimport { handleApolloError } from '../../../utils/errors'\n\nconst DuplicateScenarioModal = ({\n id,\n appendTo,\n scenarios,\n clients,\n currentClient,\n}) => {\n const [key, setKey] = useState(uuidv4())\n const [names, setNames] = useState([])\n const [current, setCurrent] = useState([])\n const [clientId, setClientId] = useState(currentClient.id)\n\n const [duplicateScenario] = useMutation(duplicateScenarioMutation, {\n update: (_, { data }) => {\n if (currentClient.id === clientId) {\n const newScenario = data.duplicateScenario.scenario\n const { scenarios: currentScenarios } = cache.readQuery({\n query: getScenariosQuery,\n })\n if (newScenario) {\n cache.writeQuery({\n query: getScenariosQuery,\n data: {\n scenarios: [...currentScenarios, newScenario],\n },\n })\n }\n }\n },\n onError: handleApolloError,\n onCompleted: (data) => {\n addSuccessAlert({\n title: S.notifications.scenarios.duplicate,\n subtitle: data.duplicateScenario?.name,\n })\n },\n })\n\n useEffect(() => {\n if (scenarios) {\n setKey(uuidv4())\n setCurrent(scenarios)\n const newNames = scenarios?.map((scenario) => `Copy of ${scenario?.name}`)\n setNames(newNames)\n }\n }, [scenarios])\n\n const createCells = () => {\n return (\n \n )\n }\n\n const handleDuplicateScenarios = async () => {\n current.forEach((scenario, i) => {\n duplicateScenario({\n variables: {\n id: scenario.id,\n name: names[i],\n clientId,\n },\n })\n })\n $('#duplicateScenarioModal').foundation('close')\n }\n\n const ref = useFoundation()\n\n if (!current) return null\n return (\n \n
\n \n )\n}\n\nexport default DuplicateScenarioModal\n","import React from 'react'\nimport Modal from '../UI/Modal'\nimport { FaUpLong } from 'react-icons/fa6'\nimport { GrCommand } from 'react-icons/gr'\nimport { isIOS } from '../../utils/helpers/browser'\nimport useFoundation from '../../hooks/useFoundation'\n\nconst CTRL_ICON = isIOS ? \n
\n \n
\n {createCells()}\n \n
\n Duplicate scenario
\n \n\n \n Cancel\n \n {\n handleDuplicateScenarios()\n }}>\n Confirm\n \n
\n \n \n \n
\n ))}\n \n \n \n )\n}\nexport default KeyboardShortcutsModal\n","export const isIOS = navigator.userAgentData\n ? navigator.userAgentData.platform === 'macOS'\n : /Mac|iPod|iPhone|iPad/.test(navigator.userAgent) ||\n (navigator.userAgent.includes('Mac') && 'ontouchend' in document)\n","import React from 'react'\nimport {\n FaComment,\n FaKeyboard,\n FaLightbulb,\n FaQuestionCircle,\n FaRocket,\n} from 'react-icons/fa'\nimport Dropdown from '../UI/Menu/Dropdown'\nimport KeyboardShortcutsModal from './KeyboardShortcutsModal'\n\nconst openChat = () => window.$crisp.push(['do', 'chat:open'])\n\nconst HelpDropdown = ({ id, button }) => {\n return (\n <>\n \n {SHORTCUTS.map((shortcut) => (\n \n
\n {shortcut.title}
\n \n {shortcut.shortcuts.map((key, index) => (\n \n {key}\n
\n ))}\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n)\r\n\r\nexport default ScenariosEmptyPage\r\n","import React, { useEffect, useState } from 'react'\nimport Modal from '../../../../UI/Modal'\n\nconst MigrateModal = ({\n id,\n appendTo,\n onConfirm,\n scenarioName,\n onClose = () => {},\n}) => {\n const [single, setSingle] = useState(\n $('#migrateModal').data('all') === 'false'\n )\n\n useEffect(() => {\n setSingle($('#migrateModal').data('all') === 'false')\n }, [scenarioName])\n return (\n \r\n \r\n 
\r\n
\r\n No scenarios yet
\r\n\r\n Create your first scenario now. Need guidance?
\r\n Click the help-icon and explore our resources.\r\n
\r\n \r\n \r\n
\r\n \n
\n \n )\n}\nexport default MigrateModal\n","import React, { useEffect, useRef, useState } from 'react'\nimport { useLazyQuery, useMutation, useQuery } from '@apollo/client'\nimport {\n FaThLarge,\n FaListUl,\n FaCopy,\n FaChevronDown,\n FaTrash,\n FaImage,\n} from 'react-icons/fa'\nimport TableHeader from '../components/UI/TableHeader'\nimport {\n deleteScenarioMutation,\n unpublishScenarioMutation,\n unpublishTestScenarioMutation,\n getScenariosQuery,\n migrateAllScenariosMutation,\n migrateScenarioMutation,\n} from '../apollo/query/scenarios'\nimport { clientsQuery } from '../apollo/query/user'\nimport LoadingSpinner from '../components/UI/LoadingSpinner'\nimport withApollo from '../hooks/withApollo'\nimport { getStoreQuery } from '../apollo/query/store'\nimport { updateScenarioStore } from '../utils/helpers/graphql'\nimport Grid from '../components/Grid'\nimport {\n dateFormat,\n dateFormatWithoutTZConversion,\n sortOnKey,\n} from '../utils/format'\nimport Table from '../components/Table'\nimport Toast from '../components/UI/Notifications/Toast'\nimport OptionsDropdown from '../components/Scenarios/OptionsDropdown'\nimport Checkbox from '../components/UI/Form/Checkbox'\nimport Filter from '../components/UI/Menu/Filter'\nimport AddScenarioModal from '../components/Scenarios/Modal/AddScenarioModal'\nimport EditScenarioModal from '../components/Scenarios/Modal/EditScenarioModal'\nimport Modal from '../components/UI/Modal'\nimport cache from '../apollo/cache'\nimport DuplicateScenarioModal from '../components/Scenarios/Modal/DuplicateScenarioModal'\nimport { default as S } from '../utils/lang/en.json'\nimport ScenariosEmptyPage from './Scenarios/ScenariosEmptyPage'\nimport Delay from '../utils/helpers/Delay'\nimport TableColumnsDropdown from '../components/UI/TableColumnsDropdown'\nimport useCurrentUser from '../hooks/useCurrentUser'\nimport usePreferences from '../hooks/usePreferences'\nimport { filterColumnsHandler, sortHandler } from '../components/tableFunctions'\nimport TableSearchBar from '../components/UI/Table/TableSearchBar'\nimport TableAddButton from '../components/UI/Table/TableAddButton'\nimport { addSuccessAlert } from '../utils/helpers/alerts'\nimport { handleApolloError } from '../utils/errors'\nimport FilterEmptyState from '../components/UI/Menu/FilterEmptyState'\nimport TraineeUserGroup from '../components/Trainees/Table/TraineeUserGroup'\nimport { getGroupNamesQuery } from '../apollo/query/groups'\nimport MigrateModal from '../components/FlowV2/components/FlowEditor/Publish/MigrateModal'\n\nconst getAttemptCount = (scenario) =>\n scenario.attemptsCount\n ? `${scenario.attemptsCount} attempt${\n scenario.attemptsCount === 1 ? '' : 's'\n }`\n : '-'\n\nconst Scenarios = () => {\n const [preferences, setPreferences] = usePreferences('scenarios')\n const { loading, data, error, startPolling, stopPolling, refetch } =\n useQuery(getScenariosQuery)\n\n const { loading: loadingGroups, data: groupsData } = useQuery(\n getGroupNamesQuery,\n {\n fetchPolicy: 'no-cache',\n }\n )\n const [currentScenarios, setCurrentScenarios] = useState(null)\n const [selectedItems, setSelectedItems] = useState([])\n const [dismissToast, setDismissToast] = useState(false)\n const [searchQuery, setSearchQuery] = useState('')\n const [showEmptyState, setShowEmptyState] = useState(false)\n const migratedScenarioId = useRef(null)\n\n const [currentUser, currentClient, currentRole] = useCurrentUser()\n\n const { data: store } = useQuery(getStoreQuery)\n const { scenarioStore } = store\n const canViewAttempts = ['OWNER', 'MANAGER', 'INSTRUCTOR'].includes(\n currentRole\n )\n const canDuplicateToWorkspace =\n ['OWNER', 'MANAGER'].includes(currentRole) || currentUser?.administrator\n const hybridNewFlow = currentClient?.features.includes('HYBRID_NEW_FLOW')\n\n const [getClients, { data: clients }] = useLazyQuery(clientsQuery)\n\n const getClientsForDuplication = () => {\n if (canDuplicateToWorkspace) {\n getClients()\n }\n }\n\n const [deleteScenario] = useMutation(deleteScenarioMutation, {\n onError: handleApolloError,\n update: (_, { data: d }) => {\n const current = cache.readQuery({ query: getScenariosQuery })\n const { id } = d.removeScenario\n\n addSuccessAlert({\n title: S.notifications.scenarios.delete,\n subtitle: current.scenarios.find((i) => i.id === id).name,\n icon: 'thrash',\n })\n\n cache.writeQuery({\n query: getScenariosQuery,\n data: { scenarios: current.scenarios.filter((i) => i.id !== id) },\n })\n },\n })\n\n const [unpublishScenario] = useMutation(unpublishScenarioMutation, {\n onError: handleApolloError,\n update: (_, { data: d }) => {\n const current = cache.readQuery({ query: getScenariosQuery })\n const { id } = d.unpublishScenario\n const index = current.scenarios.findIndex((item) => item.id === id)\n let newScenario = current.scenarios.find((item) => item.id === id)\n const { statuses } = newScenario\n const newStatus = statuses.filter((i) => i !== 'PUBLISHED')\n const newScenarios = [...current.scenarios]\n newScenario = { ...newScenario, statuses: newStatus }\n newScenarios[index] = newScenario\n\n addSuccessAlert({\n title: S.notifications.scenarios.unpublish,\n subtitle: current.scenarios.find((i) => i.id === id).name,\n icon: 'undo',\n })\n\n cache.writeQuery({\n query: getScenariosQuery,\n data: { scenarios: newScenarios },\n })\n },\n })\n\n const [unpublishTestScenario] = useMutation(unpublishTestScenarioMutation, {\n onError: handleApolloError,\n update: (_, { data: d }) => {\n const current = cache.readQuery({ query: getScenariosQuery })\n const { id } = d.unpublishTestScenario\n const index = current.scenarios.findIndex((item) => item.id === id)\n let newScenario = current.scenarios.find((item) => item.id === id)\n const { statuses } = newScenario\n const newStatus = statuses.filter((i) => i !== 'TESTING')\n const newScenarios = [...current.scenarios]\n newScenario = { ...newScenario, statuses: newStatus }\n newScenarios[index] = newScenario\n\n addSuccessAlert({\n title: S.notifications.scenarios.unpublishTest,\n subtitle: current.scenarios.find((i) => i.id === id).name,\n icon: 'undo',\n })\n\n cache.writeQuery({\n query: getScenariosQuery,\n data: { scenarios: newScenarios },\n })\n },\n })\n\n const [migrateScenario] = useMutation(migrateScenarioMutation, {\n variables: { id: currentScenarios?.[0]?.id },\n onError: handleApolloError,\n onCompleted: (d) => {\n const current = cache.readQuery({ query: getScenariosQuery })\n const id = migratedScenarioId.current\n const index = current.scenarios.findIndex((item) => item.id === id)\n let newScenario = current.scenarios.find((item) => item.id === id)\n const newScenarios = [...current.scenarios]\n newScenario = { ...newScenario, legacyFlow: false }\n newScenarios[index] = newScenario\n\n addSuccessAlert({\n title: 'Successfully migrated scenario',\n })\n\n cache.writeQuery({\n query: getScenariosQuery,\n data: { scenarios: newScenarios },\n })\n\n $('#migrateModal').data('all', '')\n migratedScenarioId.current = null\n\n openHandler(id)\n },\n })\n\n // TODO: move to Modal\n const [migrateAllScenarios] = useMutation(migrateAllScenariosMutation, {\n onError: handleApolloError,\n onCompleted: () => {\n addSuccessAlert({\n title: 'Successfully migrated all scenarios',\n })\n $('#migrateModal').data('all', '')\n refetch()\n window.location.reload()\n },\n })\n\n const handleMigrate = () => {\n if ($('#migrateModal').data('all') === 'false') {\n migratedScenarioId.current = currentScenarios?.[0]?.id\n migrateScenario()\n } else migrateAllScenarios()\n }\n\n useEffect(() => {\n // Start polling during publishing\n if (data) {\n const statuses = data?.scenarios.flatMap((scenario) => [\n ...scenario.statuses,\n ...(scenario.testScenario ? [scenario.testScenario.status] : []),\n ])\n const isPublishing =\n statuses.includes('PUBLISHING') ||\n statuses.includes('PUBLISHING_FOR_TESTING')\n\n if (isPublishing) startPolling(5000)\n if (!isPublishing) stopPolling()\n }\n }, [data])\n\n if (loading || !preferences || !currentUser || loadingGroups)\n return (\n \n The new flow makes creating highly engaging immersive scenarios even\n easier, featuring simplified navigation, the ability to combine\n elements, and much more.\n
\n
\n You are updating the scenario '{scenarioName}' to the new flow.\n Scenarios that have not been updated, will still open in the legacy\n flow.\n
\n )}\n\n Scenarios created with the new Flow cannot be played on a Pico G2 4K\n or Meta Quest 1 VR headset. This action is irreversible.\n
\n\n \n {isSubtitle ? (\n value\n ) : (\n openHandler(scenario.id)}>{value}\n )}\n \n
\n )\n }\n return isSubtitle ? (\n value\n ) : (\n openHandler(scenario.id)}>{value}\n )\n }\n\n const renderSubtitle = (value, scenario) => {\n return renderNameLabel(value, scenario, true)\n }\n\n const openMigrateModal = () => {\n $('#migrateModal').data('all', 'false').foundation('open')\n }\n\n const renderOptions = (id) => {\n return (\n \n {legacyFlow && (\n \n )}\n {modified && (\n \n )}\n
\n \n {\n setCurrentScenarios([])\n $('#migrateModal').data('all', '')\n }}\n />\n {\n currentScenarios.forEach(({ id }) => {\n unpublishScenario({ variables: { id } })\n })\n setSelectedItems([])\n }}\n />\n {\n currentScenarios.forEach(({ id }) => {\n unpublishTestScenario({ variables: { id } })\n })\n setSelectedItems([])\n }}\n />\n {\n currentScenarios.forEach(({ id }) => {\n deleteScenario({ variables: { id } })\n })\n setSelectedItems([])\n }}\n />\n \n {\n // eslint-disable-next-line no-nested-ternary\n showEmptyState ? (\n !preferences.filteredColumns.includes(i)\n )}\n selectable\n selectedItems={selectedItems}\n selectAllHandler={(ids) => setSelectedItems(ids)}\n sortOn={preferences.sortOn}\n sortHandler={(value) =>\n sortHandler(value, preferences, setPreferences)\n }\n checkboxHandler={checkboxHandler}\n type=\"scenarios\"\n rowSuffix={(i) => renderOptions(i)}\n />\n ) : (\n renderOptions(i)}\n />\n )\n }\n
\n\n \n
\n \n
\n Including ${count} course${\n count === 1 ? '' : 's'\n }\n
\n `\n return (\n - \n ${names.map((name) => formatName(name)).join('')}\n
\n {\n e.preventDefault()\n e.stopPropagation()\n getDropdownItemsHandler()\n setShowSelector(true)\n }}>\n {\n add(item)\n }}\n loading={loading}\n hideHandler={() => setShowSelector(false)}\n notFoundTitle=\"Nothing to see here...\"\n notFoundText=\"there is nothing (left) to add..\"\n data={dropdownItems.filter((item) => {\n const ids = list.map(({ id }) => Number(id))\n return !ids.includes(Number(item.id))\n })}\n />\n )}\n
\n \n \n {\n setValues({ ...values, name: target.value })\n }}\n />\n
\n \n \n \n setValues({ ...values, description: target.value })\n }\n />\n
\n \n \n getCourses()}\n dropdownItems={coursesList}\n buttonText=\"Select courses\"\n />\n
\n \n \n getScenarios()}\n dropdownItems={scenariosList}\n buttonText=\"Select scenario\"\n />\n
\n \n )\n const licenseFields = (\n <>\n \n \n \n
\n\n \n \n \n
\n\n \n \n \n setValues({ ...values, licenseDuration: Number(target.value) })\n }\n id=\"license-duration\">\n {LICENSE_DURATION_OPTIONS.map((v, i) => (\n \n ))}\n \n
\n \n )\n return (\n \n Unable to remove{' '}\n {unableToDeleteProducts()}\n
\n \n )\n return (\n\n \n {\n setValues({ ...values, name: target.value })\n }}\n />\n
\n \n \n \n setValues({ ...values, description: target.value })\n }\n />\n
\n \n \n getCourses()}\n dropdownItems={coursesList}\n buttonText=\"Select courses\"\n />\n
\n \n \n getScenarios()}\n dropdownItems={scenariosList}\n buttonText=\"Select scenario\"\n />\n
\n \n )\n const licenseFields = () => {\n const isDisabled = product.state === 'READY' || product.state === 'ARCHIVED'\n const isDisabledTitle =\n 'It is not possible to change the pricing plan or license type for archived products and products in the Warp Store'\n return (\n <>\n \n \n \n
\n \n \n \n
\n\n \n \n \n setValues({\n ...values,\n licenseDuration: Number(target.value),\n })\n }\n id=\"edit-license-duration\">\n {LICENSE_DURATION_OPTIONS.map((v, i) => (\n \n ))}\n \n
\n \n \n State\n \n
\n {product.state !== 'READY' && product.state !== 'ARCHIVED' && (\n \n Fill all fields and add scenarios or courses to change state to\n Prepared for sale\n \n )}\n
\n \n )\n }\n\n return (\n \n
\n \n {product.state !== 'READY' && product.state !== 'ARCHIVED' && (\n \n Fill all fields and add scenarios or courses to change state to\n Prepared for sale\n \n )}\n
\n When publishing this product to the Warp Store, it is made available for\n purchase. Changing to this state is irreversible.\n
\n \n )\n}\n\nexport default PublishProductModal\n","import React from 'react'\nimport { useMutation } from '@apollo/client'\nimport Modal from '../../../UI/Modal'\nimport { updateProductMutation } from '../../../../apollo/query/products'\nimport { addSuccessAlert } from '../../../../utils/helpers/alerts'\nimport { handleApolloError } from '../../../../utils/errors'\n\nconst ArchiveProductModal = ({ id, appendTo, product, callback }) => {\n const [publishProduct] = useMutation(updateProductMutation, {\n onError: handleApolloError,\n onCompleted: () => addSuccessAlert({ title: 'Product archived' }),\n })\n\n const submit = () => {\n const vars = { ...product }\n const courseIds = vars.courses.map(({ course }) => Number(course.id))\n delete vars.courses\n\n const scenarioIds = vars.scenarios.map(({ scenario }) =>\n Number(scenario.id)\n )\n delete vars.scenarios\n\n publishProduct({\n variables: {\n ...vars,\n courseIds,\n scenarioIds,\n state: 'ARCHIVED',\n },\n })\n }\n\n return (\n\n When archiving this product, it will no longer be available for purchase\n in the Warp Store. Available or active licenses can still be used until\n they are used or expired.{' '}\n
\nChanging to this state is irreversible.
\n \n )\n}\n\nexport default ArchiveProductModal\n","import React, { useState } from 'react'\nimport DataTooltip from '../../UI/DataTooltip'\n\nconst ProductScenarios = ({ count, names }) => {\n const [isHovered, setIsHovered] = useState(false)\n\n if (count <= 0) return '-'\n\n const formatName = (value) => `\n Including ${count} scenario${\n count === 1 ? '' : 's'\n }\n
\n `\n return (\n - \n ${names.map((name) => formatName(name)).join('')}\n
\n \n
\n )\n if (!data.products.length) {\n return (\n \n {loadModals()}\n {tableHeader()}\n
\n )\n }\n\n return (\n \n \n \n
\n {}}>\n {`You don't have any products yet`}\n
\n \n\n {loadModals()}\n {tableHeader()}\n
\n )\n}\nexport default withApollo(Products)\n","import React, { useState } from 'react'\nimport { FaEllipsisH } from 'react-icons/fa'\nimport Dropdown from '../UI/Menu/Dropdown'\n\nconst PurchaseOptionDropdown = ({\n id,\n subscription,\n currentPurchaseHandler,\n}) => {\n const [isHovered, setIsHovered] = useState(false)\n\n const content = () => (\n <>\n {subscription ? (\n \n {showEmptyState ? (\n !preferences.filteredColumns.includes(i)\n )}\n sortOn={preferences.sortOn}\n sortHandler={(value) => {\n sortHandler(value, preferences, setPreferences)\n }}\n selectedItems={selectedItems}\n checkboxHandler={checkboxHandler}\n selectAllHandler={(ids) => setSelectedItems(ids)}\n type=\"products\"\n rowSuffix={(i) => {\n return renderOptions(i)\n }}\n />\n )}\n
\n Contact {getSupportEmailLink()} when a workspace is not listed
\n \n )\n}\nexport default AddTransactionModal\n","import React from 'react'\nimport { useMutation } from '@apollo/client'\nimport Modal from '../../../UI/Modal'\nimport { addSuccessAlert } from '../../../../utils/helpers/alerts'\nimport { handleApolloError } from '../../../../utils/errors'\nimport { cancelPurchaseSubscriptionMutation } from '../../../../apollo/query/transactions'\n\nconst CancelSubscriptionModal = ({ id: modalId, appendTo, purchaseId }) => {\n const [cancelSubscription] = useMutation(cancelPurchaseSubscriptionMutation, {\n onCompleted: () => addSuccessAlert({ title: 'Subscription cancelled' }),\n onError: handleApolloError,\n })\n\n const submit = () => {\n cancelSubscription({\n variables: {\n id: purchaseId,\n },\n })\n }\n\n return (\n\n When this subscription is stopped, no future transactions will be added\n for this client, Any available or active licenses will not be deleted.\n
\n \n )\n}\nexport default CancelSubscriptionModal\n","import React from 'react'\nimport { useMutation } from '@apollo/client'\nimport Modal from '../../../UI/Modal'\nimport { addSuccessAlert } from '../../../../utils/helpers/alerts'\nimport { handleApolloError } from '../../../../utils/errors'\nimport { cancelPurchaseMutation } from '../../../../apollo/query/transactions'\n\nconst CancelPurchaseModal = ({ id: modalId, appendTo, purchaseId }) => {\n const [cancelPurchase] = useMutation(cancelPurchaseMutation, {\n onCompleted: () => addSuccessAlert({ title: 'Transaction cancelled' }),\n onError: handleApolloError,\n })\n\n const submit = () => {\n cancelPurchase({\n variables: {\n id: purchaseId,\n },\n })\n }\n\n return (\n\n When this transaction is cancelled, no more new licenses will be\n assigned.\n
\n \n )\n}\nexport default CancelPurchaseModal\n","import React, { useState } from 'react'\nimport { FaWallet, FaExchangeAlt } from 'react-icons/fa'\nimport { useQuery } from '@apollo/client'\nimport TableHeader from '../../components/UI/TableHeader'\nimport TableColumnsDropdown from '../../components/UI/TableColumnsDropdown'\nimport PurchaseOptionDropdown from '../../components/Store/PurchaseOptionDropdown'\nimport {\n sortHandler,\n filterColumnsHandler,\n} from '../../components/tableFunctions'\nimport usePreferences from '../../hooks/usePreferences'\nimport Table from '../../components/Table'\nimport withApollo from '../../hooks/withApollo'\nimport LoadingSpinner from '../../components/UI/LoadingSpinner'\nimport { getSellerTransactionsQuery } from '../../apollo/query/transactions'\nimport Checkbox from '../../components/UI/Form/Checkbox'\n\nimport { default as S } from '../../utils/lang/en.json'\nimport { sortOnKey, dateFormat } from '../../utils/format'\nimport TableSearchBar from '../../components/UI/Table/TableSearchBar'\nimport TableFilters from '../../components/UI/Table/TableFilters'\nimport TableAddButton from '../../components/UI/Table/TableAddButton'\nimport AddTransactionModal from '../../components/Store/Transactions/Modal/AddTransactionModal'\nimport CancelSubscriptionModal from '../../components/Store/Transactions/Modal/CancelSubscriptionModal'\nimport CancelPurchaseModal from '../../components/Store/Transactions/Modal/CancelPurchaseModal'\nimport Delay from '../../utils/helpers/Delay'\nimport FilterEmptyState from '../../components/UI/Menu/FilterEmptyState'\n\nconst Transactions = () => {\n const [preferences, setPreferences] = usePreferences('transactions')\n const [showEmptyState, setShowEmptyState] = useState(false)\n\n const [currentPurchase, setCurrentPurchase] = useState(null)\n\n const [searchQuery, setSearchQuery] = useState('')\n const [filterOption, setFilterOption] = useState({\n state: '',\n plan: '',\n licenseType: '',\n })\n\n const { data, loading } = useQuery(getSellerTransactionsQuery)\n\n if (loading || !data || !preferences)\n return (\n\n {loadModals()}\n
\n )\n }\n return (\n \n \n
\n \n \n \n
\n {}}>\n {`There are no transactions`}\n
\n \n\n {loadModals()}\n
\n )\n}\n\nexport default withApollo(Transactions)\n","import { createContext } from 'react'\n\nconst LanguageContext = createContext({\n languages: ['en', 'nl'],\n language: 'en',\n languageFile: '',\n})\n\nexport default LanguageContext\n","import React, { useEffect, useState } from 'react'\nimport LanguageContext from './LanguageContext'\nimport nl from '../lang/Launcher/nl.json'\nimport en from '../lang/Launcher/en.json'\n\nconst LanguageContextProvider = ({ children }) => {\n const [language, setLanguage] = useState('nl')\n const [translations, setTranslations] = useState()\n const languages = { en, nl }\n\n // initialize current language based on browser\n useEffect(() => {\n const lang = window.navigator.userLanguage || window.navigator.language\n const ln = lang.split('-')[0]\n if (languages[ln]) {\n setLanguage(ln)\n } else {\n setLanguage('en')\n }\n }, [])\n\n // update i18n on language change\n useEffect(() => {\n setTranslations(languages[language])\n }, [language])\n\n return (\n \n \n
\n\n \n {showEmptyState ? (\n !preferences.filteredColumns.includes(i)\n )}\n sortOn={preferences.sortOn}\n sortHandler={(value) =>\n sortHandler(value, preferences, setPreferences)\n }\n type=\"transactions\"\n rowSuffix={(i) => {\n return renderOptions(i)\n }}\n />\n )}\n
\n {scenario.name}
\n{scenario.description}
\n \n )\n })\n }\n\n const { containsScenarios, scenarios: scenariosText } = t.sections.about\n\n return (\n <>\n\n \n
\n \n \n
\n \n {containsScenarios} {scenarios.length} {scenariosText}\n
\n\n
\n \n \n
\n \n {scenariosCarousel()}\n
\n \n
\n \n \n \n )\n}\nexport default ScenariosCarousel\n","import React, { useContext } from 'react'\nimport LanguageContext from '../../utils/context/LanguageContext'\nimport ScenariosCarousel from './ScenariosCarousel'\n\nconst About = ({\n data,\n description,\n isCourse = false,\n buttonColor = 'white',\n}) => {\n const { client } = data\n const { translations: t } = useContext(LanguageContext)\n const { titles } = t.sections\n\n return (\n \n
\n \n \n {scenariosCarousel()}\n
\n \n \n
\n \n {isCourse && \n $('#signinmodal').foundation('open')}\n className=\"c-launcher__sign-in--button button small-12 mb-2\"\n style={{\n marginTop: '60px',\n color: buttonColor,\n backgroundColor: client.primaryColor,\n }}>\n {isCourse ? t.buttonValues.course : t.buttonValues.scenario}\n \n
\n \n {isCourse ? titles.aboutCourse : titles.aboutScenario}\n
\n{description}
\n\n \n Contact {client.name}\n \n )}\n
\n {client.name}
\n{client.description}
\n {client.contactEmail && (\n\n
\n ))\n }\n\n const { titles } = t.sections\n return (\n {item.question}
\n{item.answer}
\n{titles.faq}
\n\n
\n {createFAQs()}
\n \n \n 
\n \n \n {`${t.goTo} warpvr.com`}\n \n \n
\n \n )\n}\nexport default Header\n","/* eslint-disable global-require */\nimport React, { useContext } from 'react'\nimport LanguageContext from '../../utils/context/LanguageContext'\nimport iconGoogle from '../../../../images/icon-google-play2.svg'\nimport iconApple from '../../../../images/icon-apple.svg'\nimport iconOculus from '../../../../images/icon-oculus-colored.svg'\nimport iconPico from '../../../../images/icon-pico-colored.svg'\n\nconst AppStoreLinks = ({ grid = false }) => {\n const { translations: t } = useContext(LanguageContext)\n\n const stores = t.stores || []\n const final = stores.map((item, i) => {\n let icon\n switch (item.icon) {\n case 'icon-google-play2':\n icon = iconGoogle\n break\n case 'icon-apple':\n icon = iconApple\n break\n case 'icon-oculus-colored':\n icon = iconOculus\n break\n case 'icon-pico-colored':\n icon = iconPico\n break\n default:\n return null\n }\n return (\n Warp VR
\n \n \n\n
\n \n \n )\n })\n if (grid)\n return (\n {item.store}
\n{item.text}
\n\n
\n \n
\n \n {i + 1}\n
\n \n
\n {item.title}
\n{item.explanation}
\n\n
\n \n )\n })\n }\n\n const { titles } = t.sections\n return (\n {i + 1}
\n \n
\n {item.title}
\n{item.explanation}
\n{titles.howtoplay}
\n\n \n {createHowToList()}\n
\n \n
\n \n \n \n
\n \n
\n \n \n
\n \n
\n \n {\n window.open('https://warpvr.com')\n }}>\n \n
\n \n {errors.notFound.title}\n
\n\n {errors.notFound.message}\n \n {errors.notFound.link}\n \n
\n\n
\n \n \n \n {data.length > 1 && ( // only show tabs if there are more then 1\n
\n )}\n\n \n
\n \n \n {createTabTitles('small')}\n \n \n \n {createTabTitles()}\n \n \n
\n \n setCollapsed(!collapsed)}>\n
\n {t.signIn.accessTo}
\n \n {data[current].name}\n \n \n {collapsed ? (\n <>\n \n {t.signIn.accessTo}\n
\n \n \n \n {buttontext}\n \n \n {error.show && (\n \n {error.message}\n \n )}\n
\n )\n }\n const confirmSent = () => {\n const {\n title,\n subtext,\n subtextBold,\n subtextAfter,\n noAppTitle,\n noAppSubtext,\n } = t.modals.signin.showConfirm\n\n return (\n {title}
\n{subtext}
\n\n
\n )\n }\n return (\n {title}
\n\n {subtext}\n {subtextBold}\n {subtextAfter}\n
\n{noAppTitle}
\n{noAppSubtext}
\n\n \n 1 ? 'no-border-bottom' : ''\n }`}\n style={{\n backgroundImage: `url(\"${course.scenarios[0].imageUrl}\")`,\n }}>
\n {scenariosCount > 1 && (\n \n \n
\n \n
\n {client.name}
\n\n
\n {course.name}
\n\n {t.sections.about.containsScenariosShort} {scenariosCount}{' '}\n {scenariosCount === 1\n ? t.sections.about.scenario\n : t.sections.about.scenarios}\n
\n\n
\n \n {course.description.slice(0, 250)}\n {course.description.length > 250 && (\n <>\n ...\n
\n
\n $('#signinmodal').foundation('open')}\n className=\"c-launcher__sign-in--button small-12 button\"\n style={{\n color: buttonColor,\n backgroundColor: client.primaryColor,\n }}>\n {t.buttonValues.course}\n \n
\n \n \n
\n \n \n \n )\n}\n\nexport default ScenarioSignIn\n","import React, { useEffect } from 'react'\n\nconst PlayerRedirect = ({ path }) => {\n let playerSubdomain\n\n switch (window.location.host) {\n case 'app.warp.studio':\n playerSubdomain = 'play'\n break\n case 'staging.warp.studio':\n playerSubdomain = 'player-staging'\n break\n default:\n playerSubdomain = 'test'\n }\n\n useEffect(() => {\n window.location.href = `https://${playerSubdomain}.warpvr.com/${path}`\n }, [])\n}\n\nexport default PlayerRedirect\n","import { useQuery } from '@apollo/client'\nimport React, { useState } from 'react'\nimport { useParams } from 'react-router-dom'\nimport { getPublicLinkSessionQuery } from '../../apollo/query/session'\nimport About from '../../components/Launcher/About'\nimport FAQ from '../../components/Launcher/FAQ'\nimport Footer from '../../components/Launcher/Footer/Footer'\nimport Header from '../../components/Launcher/Header'\nimport HowToPlay from '../../components/Launcher/HowToPlay'\nimport Error from '../../components/Launcher/Error'\nimport Nav from '../../components/Launcher/Nav'\nimport TabView from '../../components/Launcher/TabView'\nimport CourseSignIn from '../../components/Launcher/SignIn/CourseSignIn'\nimport ScenarioSignIn from '../../components/Launcher/SignIn/ScenarioSignIn'\nimport withApollo from '../../hooks/withApollo'\nimport { isBrightColor } from '../../utils/helpers/color'\nimport PlayerRedirect from '../../utils/helpers/PlayerRedirect'\n\nconst CourseScenarioLauncher = () => {\n const [isCourse, setIsCourse] = useState(false)\n const [selectedIndex, setSelectedIndex] = useState(0)\n const { groupSecret: publicLinkSecret } = useParams()\n const { loading, data } = useQuery(getPublicLinkSessionQuery, {\n variables: {\n publicLinkSecret,\n },\n })\n\n if (loading || !data) return null\n if (data.publicLink === null) return \n \n
\n \n
\n {client.name}
\n\n
\n {scenario.name}
\n\n
\n \n {scenario.description.slice(0, 250)}\n {scenario.description.length > 250 && (\n <>\n ...\n
\n
\n $('#signinmodal').foundation('open')}\n className=\"c-launcher__sign-in--button small-12 text-bold button mb-1\"\n style={{\n color: buttonColor,\n backgroundColor: client.primaryColor,\n }}>\n {t.buttonValues.scenario}\n \n
\n {titles.sessionCode}
\n\n
\n \n \n {data.session.code}\n \n
\n \n {`${t.modals.signin.showConfirm.subtextBold} `}\n {t.modals.signin.showConfirm.subtextAfter}\n
\n\n {data?.notifications}\n
\n )\n}\n\nexport default withApollo(AlertList)\n","import iconHotspot from '../../../../images/scene-icons/hotspot.svg'\nimport iconMpc from '../../../../images/scene-icons/multiple-choice.svg'\nimport iconInfo from '../../../../images/scene-icons/info.svg'\nimport iconDirection from '../../../../images/scene-icons/direction.svg'\nimport iconTransition from '../../../../images/scene-icons/auto-transition.svg'\nimport iconEnding from '../../../../images/scene-icons/ending.svg'\n\nconst getIconByKind = (kind) => {\n switch (kind) {\n case 'INFORMATION':\n return iconInfo\n case 'HOTSPOT':\n return iconHotspot\n case 'DIRECTION':\n return iconDirection\n case 'MPC':\n return iconMpc\n case 'TRANSITION':\n return iconTransition\n case 'ENDING':\n return iconEnding\n default:\n return null\n }\n}\nexport default getIconByKind\n","import React, { useState, useEffect } from 'react'\nimport { useQuery } from '@apollo/client'\nimport { getSceneQuery } from '../../apollo/query/scenes'\n\nconst SceneEditorContext = React.createContext([\n {},\n () => {\n // this function is intentionally left empty\n },\n])\nconst SceneEditorProvider = (props) => {\n const [state, setState] = useState({\n video: {\n duration: 0,\n fps: 29,\n playUrl: '',\n volume: 0,\n },\n answers: [],\n questionFadeIn: 0,\n videoLoopEnabled: true,\n videoLoop: 0,\n showQuestionInLookDirection: 0,\n })\n const { data } = useQuery(getSceneQuery, {\n variables: {\n id: props.sceneID,\n },\n onCompleted: ({ scene }) => {\n document.title = `${scene.number} | Warp Studio`\n },\n })\n useEffect(() => {\n if (data && data.scene) {\n if (data.scene.video === null) {\n setState({\n ...data.scene,\n video: { duration: 0, fps: 29, playUrl: '', volume: 0 },\n })\n } else {\n setState(data.scene)\n }\n }\n }, [data])\n\n return (\n \n {truncate(sceneState.name || '', 40, true)}\n {\n // this function is intentionally left empty\n }}\n clickHandler={(item) => {\n window.Turbolinks.visit(\n `/scenarios/${scenarioID}/cards/${item.id}/editor`\n )\n }}\n />\n
\n\n \n
\n )\n}\n\nexport default Header\n","const roundedRect = (ctx, x, y, width, height, radius) => {\n ctx.moveTo(x, y + radius)\n ctx.lineTo(x, y + height - radius)\n ctx.quadraticCurveTo(x, y + height, x + radius, y + height)\n ctx.lineTo(x + width - radius, y + height)\n ctx.quadraticCurveTo(x + width, y + height, x + width, y + height - radius)\n ctx.lineTo(x + width, y + radius)\n ctx.quadraticCurveTo(x + width, y, x + width - radius, y)\n ctx.lineTo(x + radius, y)\n ctx.quadraticCurveTo(x, y, x, y + radius)\n}\n\nconst arrowBubble = (ctx, x, y, width, height, radius) => {\n const arrowSize = width * (width > 3.5 ? 0.025 : 0.05)\n const arrowRadius = radius * (width > 3.5 ? 0.25 : 0.5)\n ctx.moveTo(x, y + radius + arrowSize)\n ctx.lineTo(x, y + height - radius)\n ctx.quadraticCurveTo(x, y + height, x + radius, y + height)\n ctx.lineTo(x + width - radius, y + height)\n ctx.quadraticCurveTo(x + width, y + height, x + width, y + height - radius)\n ctx.lineTo(x + width, y + radius + arrowSize)\n ctx.quadraticCurveTo(\n x + width,\n y + arrowSize,\n x + width - radius,\n y + arrowSize\n )\n // :::ARROW:::\n ctx.lineTo(x + width / 2 + arrowSize, y + arrowSize)\n ctx.lineTo(x + width / 2 + arrowRadius, y + arrowRadius)\n ctx.quadraticCurveTo(\n x + width / 2,\n y,\n x + width / 2 - arrowRadius,\n y + arrowRadius\n )\n ctx.lineTo(x + width / 2 - arrowRadius, y + arrowRadius)\n ctx.lineTo(x + width / 2 - arrowSize, y + arrowSize)\n // :::END ARROW:::\n ctx.lineTo(x + radius, y + arrowSize)\n ctx.quadraticCurveTo(x, y + arrowSize, x, y + arrowSize + radius)\n}\n\nexport { roundedRect, arrowBubble }\n","import { arrowBubble } from '../../../helpers/aframe-shapes'\nimport { clamp } from '../../../../../utils/helpers/javascript'\n\nconst { AFRAME, THREE } = window\n\nAFRAME.registerComponent('text-bubble', {\n schema: {\n enabled: { default: true },\n radius: { default: 0.05 },\n textOffset: { default: 0.05 },\n paddingX: { default: 0.1 },\n paddingY: { default: 0.2 },\n bottomSpacing: { default: 0.15 },\n width: { default: 1.8 },\n type: { default: 'default' },\n },\n draw() {\n const shape = new THREE.Shape()\n arrowBubble(\n shape,\n -this.data.width / 2,\n -(this.data.height / 2) + this.data.textOffset,\n this.data.width,\n this.data.height + this.data.textOffset,\n this.data.radius || 0.05\n )\n return new THREE.ShapeGeometry(shape)\n },\n\n update() {\n const textBox = this.self.children[0]\n const bubbleBox = this.self.children[1]\n if (!textBox || !bubbleBox) return null\n\n let { height } = textBox.getAttribute('geometry')\n if (!height) return null\n\n height += this.data.paddingY * 2\n this.data.height = clamp(height, 0.3, height)\n\n this.self.setAttribute(\n 'position',\n `0 ${this.data.height / 2 + this.data.bottomSpacing} 0`\n )\n\n this.bubble = new THREE.Mesh(this.draw(), this.bubbleMaterial)\n this.bubble.geometry.computeBoundingBox()\n this.bubble.position.set(0, 0, 0.01)\n textBox.setAttribute('position', `0 ${this.data.paddingY - 0.02} 0.03`)\n return bubbleBox.setObject3D('bubble', this.bubble)\n },\n\n onLoad() {\n for (const child of this.self.children) {\n child.addEventListener('componentchanged', (e) => {\n if (e.detail.name === 'geometry') {\n setTimeout(() => this.update(), 0)\n }\n if (e.detail.name === 'text') {\n setTimeout(() => this.update(), 0) //update width\n this.self.children[0].setAttribute(\n 'geometry',\n `primitive: plane; width: auto; height: auto;`\n )\n setTimeout(() => this.update(), 0) //update height\n }\n })\n }\n },\n\n init() {\n this.self = this.el\n this.self.addEventListener('loaded', this.onLoad.bind(this))\n },\n})\n","import colors from '../../../helpers/colors'\nimport { roundedRect } from '../../../helpers/aframe-shapes'\n\nconst { AFRAME, THREE } = window\n\nAFRAME.registerComponent('button', {\n schema: {\n color: { default: colors.assertive },\n type: { default: 'default' },\n width: { default: 1.8 },\n height: { default: 0.4 },\n radius: { default: 0.05 },\n paddingY: { default: 0.2 },\n },\n draw() {\n const shape = new THREE.Shape()\n const { width, height, radius } = this.data\n roundedRect(shape, -width / 2, -height / 2, width, height, radius || 0.05)\n return new THREE.ShapeGeometry(shape)\n },\n\n update() {\n const textBox = this.self.children[0]\n const buttonBox = this.self.children[1]\n if (!textBox || !buttonBox) return null\n\n const { height } = textBox.getAttribute('geometry')\n if (!height) return null\n\n this.data.height = height + this.data.paddingY * 2\n\n this.self.setAttribute('position', `0 ${-this.data.height / 2} 0`)\n this.self.setAttribute(\n 'geometry',\n `width: ${this.data.width}; height: ${this.data.height}`\n )\n\n this.self.setAttribute('material', 'visible:false')\n if (this.self.getAttribute('color'))\n this.material.color = new THREE.Color(this.self.getAttribute('color'))\n this.buttonMesh = new THREE.Mesh(this.draw(), this.material)\n\n textBox.setAttribute('position', `0 0.05 0.03`)\n\n buttonBox.setObject3D('button', this.buttonMesh)\n\n // tell mpc-list to update\n if (this.data.type === 'mpc') {\n this.self.parentNode.emit('update-required')\n }\n\n return this.self.emit('button-loaded')\n },\n onLoad() {\n this.mesh = new THREE.Mesh()\n this.mesh.position.set(0, 0, -0.001)\n\n for (const child of this.self.children) {\n child.addEventListener('componentchanged', (e) => {\n if (e.detail.name === 'geometry') {\n setTimeout(() => this.update(), 0)\n }\n if (e.detail.name === 'text') {\n setTimeout(() => this.update(), 0) //update width\n this.self.children[0].setAttribute(\n 'geometry',\n `primitive: plane; width: auto; height: auto;`\n )\n setTimeout(() => this.update(), 0) //update height\n }\n })\n }\n },\n init() {\n this.self = this.el\n this.material = new THREE.MeshBasicMaterial({\n color: new THREE.Color(this.data.color),\n side: THREE.FrontSide,\n })\n this.self.addEventListener('loaded', this.onLoad.bind(this))\n },\n})\n","import colors from '../../../helpers/colors'\nimport { scrollIntoViewWithOffset } from '../../../../../utils/helpers/javascript'\nimport { roundedRect } from '../../../helpers/aframe-shapes'\nimport {\n selectSidebarElement,\n unSelectSidebarElements,\n} from '../../../../FlowV2/helpers/elementHelper'\n\nconst { AFRAME, THREE } = window\n\nAFRAME.registerComponent('collisionbox', {\n schema: {\n enabled: { default: true },\n width: { type: 'number', default: 2 },\n height: { type: 'number', default: 2.2 },\n radius: { type: 'number', default: 0.1 },\n opacity: { type: 'number', default: 0 },\n color: { type: 'color', default: colors.royal },\n },\n draw(extraSpacing) {\n // draw element\n const roundedRectShape = new THREE.Shape()\n const bubblePosition = this.self.children[0].getAttribute('position')\n\n roundedRect(\n roundedRectShape,\n -this.data.width / 2 - extraSpacing / 2 + bubblePosition.x,\n -this.data.height / 2 - extraSpacing / 2,\n this.data.width + extraSpacing,\n this.data.height + extraSpacing,\n this.data.radius\n )\n if (roundedRectShape) return new THREE.ShapeGeometry(roundedRectShape)\n return null\n },\n update() {\n if (this.data.enabled) {\n if (this.data.opacity === 0) {\n this.planeMesh.visible = false\n this.borderMesh.visible = false\n } else {\n this.planeMesh.visible = true\n this.planeMesh.material.opacity = this.data.opacity\n this.borderMesh.visible = true\n }\n }\n },\n onIntersected() {\n this.data.opacity = 0.2\n this.mouseOver = true\n this.update()\n },\n onIntersectedCleared() {\n this.mouseOver = false\n if (!this.isSelected) {\n this.data.opacity = 0\n this.update()\n }\n },\n onSave() {\n const saveButton = document.querySelectorAll(\n `#element-${this.self.id}--save-button`\n )[0]\n saveButton.click()\n },\n onSelect(e) {\n this.isSelected = e.detail.isSelected\n if (!this.mouseOver && !this.isSelected) {\n this.data.opacity = 0\n this.self.classList.remove('selected')\n unSelectSidebarElements(`element-${this.self.id}--card`)\n this.update()\n }\n\n if (this.isSelected) {\n this.self.classList.add('selected')\n const sidebarCard = document.querySelector(\n `#element-${this.self.id}--card`\n )\n const sidebarElement = document.querySelector(`#element-${this.self.id}`)\n if (e.detail.scroll) {\n this.data.scrollHeaderOffset =\n this.self.getAttribute('scroll-header-offset') || 10\n scrollIntoViewWithOffset(sidebarElement, this.data.scrollHeaderOffset)\n }\n selectSidebarElement(`element-${this.self.id}--card`)\n sidebarCard.classList.add('active')\n }\n },\n drawBorder() {\n this.planeMesh = new THREE.Mesh(this.draw(0), this.material.plane)\n this.borderMesh = new THREE.Mesh(this.draw(0.08), this.material.border)\n this.borderMesh.position.set(0, 0, -0.05)\n this.self.setObject3D('plane', this.planeMesh)\n this.self.setObject3D('border', this.borderMesh)\n },\n init() {\n this.mouseOver = false\n this.isSelected = false\n this.self = this.el\n this.self.setAttribute('position', '0 0 -7')\n this.material = {\n plane: new THREE.MeshBasicMaterial({\n color: new THREE.Color(this.data.color),\n transparent: true,\n side: THREE.FrontSide,\n opacity: this.data.opacity,\n }),\n border: new THREE.MeshBasicMaterial({\n transparent: true,\n color: new THREE.Color(this.data.color),\n side: THREE.FrontSide,\n opacity: 1,\n }),\n }\n this.drawBorder()\n this.self.classList.add('clickable')\n\n this.self.addEventListener('is-selected', this.onSelect.bind(this))\n this.self.addEventListener('save-position', this.onSave.bind(this))\n this.self.addEventListener('intersect', this.onIntersected.bind(this))\n this.self.addEventListener(\n 'intersect-cleared',\n this.onIntersectedCleared.bind(this)\n )\n\n this.self.addEventListener('componentchanged', (e) => {\n if (e.detail.name === 'collisionbox') {\n this.drawBorder()\n this.onIntersectedCleared()\n }\n })\n this.self.children[0].addEventListener('componentchanged', (e) => {\n if (e.detail.name === 'position') {\n setTimeout(() => {\n this.drawBorder()\n this.onIntersectedCleared()\n }, 100)\n }\n })\n },\n})\n\nAFRAME.registerPrimitive('a-collision-box', {\n defaultComponents: {\n collisionbox: {},\n },\n mappings: {\n enabled: 'collisionbox.enabled',\n width: 'collisionbox.width',\n height: 'collisionbox.height',\n radius: 'collisionbox.radius',\n color: 'collisionbox.color',\n opacity: 'collisionbox.opacity',\n },\n})\n","import React, { useContext } from 'react'\nimport colors from '../../../helpers/colors'\nimport { SceneEditorContext } from '../../../SceneEditorContext'\nimport { getRotation } from '../../../helpers/controls'\n\nconst NorthOffsetLine = () => {\n const [sceneState] = useContext(SceneEditorContext)\n return (\n \n
\n {backButton}
\n \n {previousScene}\n {sceneSelector}\n {nextScene}\n
\n {sceneState.video.name}
\n \n
\n \n
\n {backButton}
\n {sceneState.video.name}
\n \n {previousScene}\n {sceneSelector}\n {nextScene}\n
\n \n \n \n {/* Assets */}\n \n {\n const el = e.currentTarget\n setTime(el.currentTime * 1000)\n setControls({ ...controls, isPlaying: !el.paused && !el.ended })\n }}\n />\n \n {/* Camera */}\n \n {/* Background video */}\n {sceneState.video.playUrl ? (\n \n ) : (\n noVideoPlayer()\n )}\n\n {sceneState.northOffsetEnabled &&
\n )\n }\n return (\n \n {loading && 'loading...'}\n {player()}\n
\n )\n}\nexport default Player\n","import React, { useContext, useState } from 'react'\nimport { FaQuestionCircle, FaMapPin } from 'react-icons/fa'\nimport { useMutation } from '@apollo/client'\nimport DataTooltip from '../../UI/DataTooltip'\nimport { convertMilliSeconds } from '../../../utils/format'\nimport RangeInput from '../../UI/Form/RangeInput'\nimport { SceneEditorContext } from '../SceneEditorContext'\nimport { updateSceneMutation } from '../../../apollo/query/scenes'\nimport { handleApolloError } from '../../../utils/errors'\nimport { MediumContext } from '../../Media/Modal/MediumContext'\n\nconst VIDEO_LOOP_THRESHOLD = 2 //seconds\n\nconst Sliders = () => {\n const [showThumbTooltip, setShowThumbTooltip] = useState()\n const [sceneState, setSceneState] = useContext(SceneEditorContext)\n const {\n medium: [medium],\n time: [time],\n } = useContext(MediumContext)\n\n const [updateScene] = useMutation(updateSceneMutation, {\n onError: handleApolloError,\n })\n\n const updateSceneHandler = (value) => {\n updateScene({\n variables: value,\n })\n }\n\n if (!medium) return null\n if (sceneState.kind === 'TRANSITION')\n return (\n \n
\n )\n\n const maxVideoLoop = medium.trimEnabled\n ? Number(medium.trimEnd - medium.trimStart)\n : Number(sceneState.video.duration / 1000)\n\n const videoLoopEnabled =\n sceneState.videoLoopEnabled && sceneState.video.duration > 2000\n\n return (\n \n \n \n
\n \n
\n \n \n )\n}\nexport default Sliders\n","import React, { useContext } from 'react'\nimport { useMutation } from '@apollo/client'\nimport { SceneEditorContext } from '../../../SceneEditorContext'\nimport { updateSceneMutation } from '../../../../../apollo/query/scenes'\nimport { handleApolloError } from '../../../../../utils/errors'\n\nconst HotspotSettings = () => {\n const [sceneState] = useContext(SceneEditorContext)\n\n const [updateScene] = useMutation(updateSceneMutation, {\n onError: handleApolloError,\n })\n return (\n \n
\n \n {\n setSceneState(() => ({\n ...sceneState,\n questionFadeIn: Number(time / 1000),\n }))\n updateSceneHandler({\n ...sceneState,\n questionFadeIn: Number(time / 1000),\n })\n }}>\n \n \n \n
\n \n Elements fade in\n \n {' '}\n
\n \n {convertMilliSeconds(sceneState.questionFadeIn * 1000, true)}\n
\n \n convertMilliSeconds(Number(v) * 1000)}\n updateOnDrag={true}\n maxValue={\n medium.trimEnabled\n ? Number(medium.trimEnd - medium.trimStart)\n : Number(sceneState.video.duration / 1000)\n }\n value={sceneState.questionFadeIn || 0}\n setValue={(v, save) => {\n setSceneState(() => ({\n ...sceneState,\n questionFadeIn: Number(v),\n }))\n if (save) {\n updateSceneHandler({\n ...sceneState,\n questionFadeIn: Number(v),\n })\n }\n }}\n />\n
\n \n {\n setSceneState(() => ({\n ...sceneState,\n videoLoop: Number(time / 1000),\n }))\n updateSceneHandler({\n ...sceneState,\n videoLoop: Number(time / 1000),\n })\n }}>\n \n \n \n
\n \n {sceneState.video.duration > 2000 ? (\n \n
\n {videoLoopEnabled && (\n <>\n \n
\n ) : (\n \n
\n \n {\n updateSceneHandler({\n ...sceneState,\n videoLoopEnabled: target.checked,\n })\n }}\n className=\"o-switch__input\"\n />\n \n
\n \n Video loop\n \n {' '}\n
\n \n
\n \n )}\n \n
\n \n \n
\n \n Video loop\n
\n \n {convertMilliSeconds(sceneState.videoLoop * 1000, true)}\n
{' '}\n \n convertMilliSeconds(Number(v) * 1000)}\n maxValue={maxVideoLoop}\n updateOnDrag\n value={sceneState.videoLoop || 0}\n redRange={[maxVideoLoop - VIDEO_LOOP_THRESHOLD, maxVideoLoop]}\n thumbTooltip={`The video loop can not be shorter than ${VIDEO_LOOP_THRESHOLD} seconds`}\n showThumbTooltip={showThumbTooltip}\n setValue={(v, save) => {\n let value = Number(v)\n if (value + VIDEO_LOOP_THRESHOLD > maxVideoLoop) {\n // set value to maximum\n value = maxVideoLoop - VIDEO_LOOP_THRESHOLD\n\n setSceneState(() => ({\n ...sceneState,\n videoLoop: value,\n }))\n\n if (save) {\n setShowThumbTooltip(true)\n setTimeout(() => {\n setShowThumbTooltip(false)\n }, 4000)\n updateSceneHandler({\n ...sceneState,\n videoLoop: value,\n })\n }\n } else {\n setSceneState(() => ({\n ...sceneState,\n videoLoop: value,\n }))\n\n if (save) {\n setShowThumbTooltip(false)\n updateSceneHandler({\n ...sceneState,\n videoLoop: value,\n })\n }\n }\n }}\n />\n
\n \n )}\n \n \n {\n updateScene({\n variables: {\n ...sceneState,\n giveHintAfter: Math.floor(e.target.value),\n },\n })\n }}\n />\n
\n Hotspot settings
\n\n
\n {sceneState.hideHotspotLabelsVr && (\n Hide labels
\n \n
\n \n {\n updateScene({\n variables: {\n ...sceneState,\n hideHotspotLabelsVr: !sceneState.hideHotspotLabelsVr,\n hint: sceneState.hideHotspotLabelsVr\n ? false\n : sceneState.hint,\n },\n })\n }}\n className=\"o-switch__input\"\n />\n \n
\n \n \n {'Hide complete hotspot'} \n
\n {sceneState.hint && (\n <>\n for
\n seconds
\n \n )}\n \n
\n \n )}\n \n )\n}\n\nexport default HotspotSettings\n","import React from 'react'\nimport ButtonGroup from '../../../../UI/Form/ButtonGroup/ButtonGroup'\n\nconst ElementSizeButtonGroup = ({ onChange, active }) => {\n return (\n \n {\n updateScene({\n variables: {\n ...sceneState,\n hint: !sceneState.hint,\n },\n })\n }}\n />{' '}\n \n
\n \n {\n if (e.key === 'Enter') submitHandler()\n }}\n id=\"edit-question\"\n defaultValue={value}\n ref={editRef}\n />\n
\n \n {warningMessage && (\n <>\n
\n \n {\n if (e.key === 'Enter') submitHandler()\n }}\n rows=\"3\"\n type=\"text\"\n name=\"edit-field\"\n id=\"\"\n defaultValue={value}\n />\n
\n \n \n
\n {warningMessage && (\n <>\n