\n \n {title}\n
\n {open && {children}
}\n \n );\n};\n\nexport default Accordion;\n","import React from 'react';\nimport { CheckMarkIcon } from '../../assets/Icons';\n\nconst Button = ({\n type,\n children,\n onClick,\n className,\n configColors,\n isLoading,\n isDone,\n disabled,\n style,\n ref,\n ...props\n}) => {\n const innerStyle = {\n '--primary-color': configColors.primary,\n '--background-color': configColors.background,\n '--text-color': configColors.text,\n '--border-color': configColors.border\n };\n\n style = { ...style, ...innerStyle };\n\n return (\n })
\n )}\n {isDone && \n
\n );\n};\n\nPasswordInput.defaultProps = {\n onChange: () => {},\n className: '',\n placeholder: '',\n label: '',\n name: '',\n value: false,\n};\n\nexport default PasswordInput;\n","import React, {useState} from 'react';\n\nconst CopyIcon = ({value}) => {\n const [isVisible, setIsVisible] = useState(false);\n\n const copyToClipboard = () => {\n navigator.clipboard.writeText(value);\n\n // set visible for 2 seconds\n setIsVisible(true);\n\n setTimeout(() => {\n setIsVisible(false);\n }, 2000);\n }\n\n return (\n \n \n {isVisible && <>Copied}\n
)\n}\n\nconst CopyBox = ({children, icon}) => {\n return (\n \n \n
\n );\n}\n\nexport default CopyBox;","import React, { useState, useRef } from 'react';\nimport { UploadIcon } from '../../assets/Icons';\nimport { getMaterial, setMaterial, updateMaterial } from '../../../redux/materialSlice';\nimport { useDispatch, useSelector } from 'react-redux';\nimport axios from 'axios';\nimport { getLayerConfig, updateLayerConfig, updateMainConfig } from '../../../redux/stepsSlice';\n\nconst DragDropUploader = ({ label, value, name, image_type, acceptedExtensions }) => {\n const acceptedExtensionString = acceptedExtensions.join(', ').toUpperCase();\n const [filePreview, setFilePreview] = useState(null);\n const [isDraggingOver, setIsDraggingOver] = useState(false); // Track whether a file is being dragged over\n const material = useSelector((state) => getMaterial(state));\n const dispatch = useDispatch();\n const layerConfig = useSelector((state) => getLayerConfig(state));\n\n const fileInputRef = useRef(null);\n\n const updateConfig = (sectionId, titleId, newValue) => {\n const data = {\n sectionId: sectionId,\n titleId: titleId,\n value: newValue\n };\n if (layerConfig.length > 0) {\n dispatch(updateLayerConfig(data));\n } else {\n dispatch(updateMainConfig(data));\n }\n };\n\n const handleFileSelect = async(e) => {\n const input = e.target;\n const file = input.files[0];\n\n if (file) {\n const reader = new FileReader();\n const response = await uploadImage(file);\n if (response) {\n dispatch(updateMaterial({[name]: response.image_url}));\n switch (image_type) {\n case 'favicon':\n updateConfig('phc', 'phcHeaderLogo', response.image_url);\n alert(`Logo added successfully.`);\n break;\n case 'thumbnail':\n dispatch(updateMaterial({'thumbnail_url': response.image_url}))\n alert(`Thumbnail added successfully.`);\n break;\n default:\n alert(`${name.charAt(0).toUpperCase() + name.slice(1)} added successfully.`);\n break;\n }\n }\n else {\n alert('Something went wrong.');\n }\n\n reader.onload = (e) => {\n // setFilePreview(e.target.result);\n };\n\n reader.readAsDataURL(file);\n }\n };\n\n const handleOuterDivClick = () => {\n fileInputRef.current.click();\n };\n\n const handleDragOver = (e) => {\n e.preventDefault();\n setIsDraggingOver(true); // Add class when file is dragged over\n };\n\n const handleDragLeave = () => {\n setIsDraggingOver(false); // Remove class when user moves the file out\n };\n\n const handleDrop = async (e) => {\n e.preventDefault();\n setIsDraggingOver(false); // Remove class when file is dropped\n const droppedFiles = e.dataTransfer.files;\n\n if (droppedFiles.length > 0) {\n const file = droppedFiles[0];\n const response = await uploadImage(droppedFiles[0]);\n if (response) {\n dispatch(updateMaterial({[name]: response.image_url}));\n switch (image_type) {\n case 'favicon':\n updateConfig('phc', 'phcHeaderLogo', response.image_url);\n alert(`Logo added successfully.`);\n break;\n case 'thumbnail':\n dispatch(updateMaterial({'thumbnail_url': response.image_url}))\n alert(`Thumbnail added successfully.`);\n break;\n default:\n alert(`${name.charAt(0).toUpperCase() + name.slice(1)} added successfully.`);\n break;\n }\n }\n else {\n alert('Something went wrong.');\n }\n\n const reader = new FileReader();\n\n reader.onload = (e) => {\n // setFilePreview(e.target.result);\n };\n\n reader.readAsDataURL(file);\n }\n };\n\n const uploadImage = async (file) => {\n const formData = new FormData();\n formData.append('image', file);\n formData.append('image_type', image_type)\n const url = `/api/v1/uploads/learning_material/${material.slug}`;\n const response = await axios\n .post(url, formData, {\n headers: {\n 'Content-Type': 'multipart/form-data',\n },\n })\n .finally(() => { \n });\n return response.data;\n };\n\n const handleRemoveImage = () => {\n setFilePreview(null); // Clear the file preview when the remove button is clicked\n };\n\n const divClassName = `un-drag-drop-uploader ${\n isDraggingOver ? 'drag-over' : ''\n }`;\n\n const filePreviewText = filePreview ? (\n \n {icon}\n {children}\n
\n \n \n 
\n
\n ) : (\n (!value || value === 'usernurture-logo-dark.png') && (\n \n Click to upload or drag and drop\n
\n {acceptedExtensionString}\n
\n )\n );\n\n return (\n \n {acceptedExtensionString}\n
{label}
\n\n {filePreview || (!value) && (\n 
\n )}\n {filePreviewText}\n
\n \n
\n )}\n {(value && value !== 'usernurture-logo-dark.png') && (\n \n
\n );\n};\n\nDropdownSelect.defaultProps = {\n onChange: () => {},\n onValidation: () => {},\n className: '',\n placeholder: '',\n label: '',\n name: '',\n type: 'text',\n value: '',\n options: [],\n required: false,\n lineInput: false,\n error: '',\n validationCallback: () => {}\n};\n\nexport default DropdownSelect;\n","import React, { useState } from 'react';\nimport { CrossIcon } from '../../assets/Icons';\nimport { API_ENDPOINTS } from '../../pages/utils/endpoints';\nimport { useSelector } from 'react-redux';\nimport { getOnboardingData } from '../../../redux/onboardingSlice';\nimport { http_multipart_post } from '../../pages/utils/api_client';\n\nconst FileUploader = ({\n name,\n value,\n label,\n onChange,\n className,\n image_type,\n acceptTypes\n}) => {\n const loader = require('../../assets/loader.svg');\n const data = useSelector((state) => getOnboardingData(state));\n const [preview, setPreview] = useState(value);\n const [isLoading, setIsLoading] = useState(false);\n\n const handleFileSelect = () => document.getElementById(`${name}-file-uploader`).click();\n\n const asyncUploadFile = async (e) => {\n setIsLoading(true);\n const file = e.target.files[0];\n\n if (!file) {\n setIsLoading(false);\n return;\n }\n\n const formData = new FormData();\n formData.append('image', file);\n formData.append('image_type', image_type);\n if (data.email && data.password) {\n formData.append('email', data.email);\n formData.append('password', data.password);\n }\n\n try {\n const response = await http_multipart_post(API_ENDPOINTS.POST_UPLOAD_FILE, formData);\n const imageUrl = response.data.image_url;\n setPreview(imageUrl);\n onChange({ target: { name, value: imageUrl } });\n } catch (error) {\n console.error('Error uploading file:', error);\n } finally {\n setIsLoading(false);\n }\n };\n\n const removeFile = () => {\n setPreview(null);\n onChange({ target: { name, value: '' } });\n };\n\n return (\n \n \n {renderDropdown()}\n
\n {errorMsg}
\n\n
\n );\n};\n\nFileUploader.defaultProps = {\n onChange: () => { },\n className: '',\n label: '',\n name: '',\n value: null,\n image_type: '',\n acceptTypes: '.png, .jpg, .jpeg'\n};\n\nexport default FileUploader;\n","import React, { useState, useEffect } from 'react';\nimport { ArrowDown, ArrowUp } from '../../assets/Icons';\n\nconst InviteInput = ({\n name,\n value,\n placeholder,\n label,\n onChange,\n className,\n error,\n}) => {\n const options = ['Member', 'Team Admin', 'View Only'];\n const [isOpen, setIsOpen] = useState(false);\n const [errorMsg, setErrorMsg] = useState(error);\n const [data, setData] = useState({ email: '', role: 'Member' });\n\n useEffect(() => {\n // Event listener to close options if clicked outside\n const closeOptions = (e) => {\n if (isOpen && !e.target.closest('.un-invite-input')) {\n setIsOpen(false);\n }\n };\n document.addEventListener('mousedown', closeOptions);\n\n return () => document.removeEventListener('mousedown', closeOptions);\n }, [isOpen]);\n\n const validateInput = (e) => {\n const email = e.target.value;\n const regex = /\\S+@\\S+\\.\\S+/;\n if (!regex.test(email)) {\n setErrorMsg('Please enter a valid email address');\n } else {\n setData({ ...data, email: email });\n setErrorMsg('');\n }\n };\n\n const handleOptionClick = (role) => {\n setData({ ...data, role: role });\n setIsOpen(false);\n if (onChange) {\n onChange({\n target: { name: name, value: { ...data, role: role } },\n });\n }\n };\n\n const renderOptions = () => {\n return options.map((option) => {\n return (\n \n {/*
\n \n \n
*/}\n \n Allowed file types: png, jpg, jpeg
\n\n {isLoading && 
}\n {preview && (\n
\n \n 
\n {/*
\n )}\n \n \n
\n );\n};\n\nInviteInput.defaultProps = {\n onChange: () => {},\n className: '',\n placeholder: '',\n label: '',\n name: '',\n value: false,\n error: '',\n};\n\nexport default InviteInput;\n","import React, { useEffect, useState } from 'react';\nimport { EyeIcon, EyeOffIcon } from '../../assets/Icons';\n\nconst PasswordInput = ({\n showStrength,\n name,\n value,\n placeholder,\n label,\n onChange,\n className,\n error,\n validationCallback,\n}) => {\n const [isVisible, setIsVisible] = useState(false);\n const [strength, setStrength] = useState(0);\n const [errorMsg, setErrorMsg] = useState(error);\n\n const switchPasswordView = () => {\n const passwordInput = document.getElementById(name);\n if (passwordInput.type === 'password') {\n passwordInput.type = 'text';\n setIsVisible(true);\n } else {\n passwordInput.type = 'password';\n setIsVisible(false);\n }\n };\n\n const handleChange = (event) => {\n setErrorMsg('');\n const weaknesses = calculatePasswordStrength(event.target.value);\n const totalDeductions = weaknesses.reduce(\n (total, weakness) => total + weakness,\n 0,\n );\n const strength = Math.max(100 - totalDeductions, 0);\n setStrength(strength);\n onChange(event);\n };\n\n const calculatePasswordStrength = (password) => {\n const weaknesses = [];\n weaknesses.push(lengthWeakness(password));\n weaknesses.push(lowercaseWeakness(password));\n weaknesses.push(uppercaseWeakness(password));\n weaknesses.push(numberWeakness(password));\n weaknesses.push(specialCharactersWeakness(password));\n weaknesses.push(repeatCharactersWeakness(password));\n return weaknesses;\n };\n\n const lengthWeakness = (password) => {\n const length = password.length;\n\n if (length <= 5) {\n return 40;\n }\n\n if (length <= 10) {\n return 15;\n }\n return 0;\n };\n\n const lowercaseWeakness = (password) => {\n return characterTypeWeakness(\n password,\n /[a-z]/g,\n 'lowercase characters',\n );\n };\n\n const uppercaseWeakness = (password) => {\n return characterTypeWeakness(\n password,\n /[A-Z]/g,\n 'uppercase characters',\n );\n };\n\n const numberWeakness = (password) => {\n return characterTypeWeakness(password, /[0-9]/g, 'numbers');\n };\n\n const specialCharactersWeakness = (password) => {\n return characterTypeWeakness(\n password,\n /[^0-9a-zA-Z\\s]/g,\n 'special characters',\n );\n };\n\n const characterTypeWeakness = (password, regex, type) => {\n const matches = password.match(regex) || [];\n\n if (matches.length === 0) {\n return 20;\n }\n\n if (matches.length <= 2) {\n return 5;\n }\n return 0;\n };\n\n const repeatCharactersWeakness = (password) => {\n const matches = password.match(/(.)\\1/g) || [];\n\n if (matches.length > 0) {\n return matches.length * 10;\n }\n return 0;\n };\n\n const renderBars = (strength) => {\n const bars = [];\n const barCount = 4;\n\n for (let i = 0; i < barCount; i++) {\n let barClass = 'bar';\n\n if (strength > 0 && i <= strength / 25) {\n barClass += ' fill';\n }\n\n bars.push();\n }\n\n return \n handleChange(e)}\n onBlur={(e) => validateInput(e)}\n value={data.email}\n />\n
\n \n {data.role}\n {isOpen ?
\n {errorMsg}
\n {isOpen &&{renderOptions()}
}\n {bars}
;\n };\n\n useEffect(() => {\n renderBars(strength);\n }, [strength]);\n\n const handleOnBlur = (e) => {\n if (!validationCallback) {\n return;\n }\n const result = validationCallback(e);\n setErrorMsg(result);\n };\n\n if (errorMsg) {\n className += ' error';\n }\n\n return (\n \n \n
\n );\n};\n\nPasswordInput.defaultProps = {\n onChange: () => {},\n className: '',\n placeholder: '',\n label: '',\n name: '',\n value: '',\n error: '',\n validationCallback: () => {},\n};\n\nexport default PasswordInput;\n","import React from \"react\";\n\nconst ProgressBar = ({ progress }) => {\n return (\n \n
\n {errorMsg}
\n {showStrength && !errorMsg && (\n\n {renderBars(strength)}\n
\n )}\n \n Use 8 or more characters with letters, numbers &\n symbols.\n
\n\n \n
\n );\n}\n\nexport default ProgressBar;","import React, { useEffect, useState } from 'react';\nimport { SearchIcon } from '../../assets/Icons';\n\nconst SearchInput = ({\n name,\n value,\n type,\n placeholder,\n label,\n onChange,\n onValidation,\n className,\n required,\n lineInput,\n error,\n validationCallback,\n options,\n}) => {\n const [errorMsg, setErrorMsg] = useState(error);\n const [suggestions, setSuggestions] = useState([]);\n\n useEffect(() => {\n setErrorMsg(error);\n }, [error]);\n\n // Combine the class names in a more readable way\n const inputClassName = `${className} ${lineInput ? 'line-input' : ''} ${\n errorMsg ? 'error' : ''\n }`.trim();\n\n const handleChange = (e) => {\n const { value } = e.target;\n onChange(e); // This might need to be updated depending on your state management\n setErrorMsg('');\n\n if (value) {\n const filteredOptions = options.filter((option) =>\n option.toLowerCase().includes(value.toLowerCase()),\n );\n setSuggestions(filteredOptions);\n } else {\n setSuggestions([]); // Clear suggestions when input is cleared\n }\n };\n\n const handleBlur = (e) => {\n if (required && !e.target.value) {\n setErrorMsg('This field is required');\n onValidation(e.target.name, false);\n return;\n }\n\n // validate with html5 validation\n if (e.target.validity && !e.target.validity.valid) {\n setErrorMsg(e.target.validationMessage);\n onValidation(e.target.name, false);\n return;\n }\n\n if (validationCallback) {\n const result = validationCallback(e);\n setErrorMsg(result);\n onValidation(e.target.name, false);\n return;\n }\n\n onValidation(e.target.name, true);\n };\n\n // Updated to handle option selection\n const handleOptionClick = (option) => {\n onChange({ target: { name, value: option } });\n setErrorMsg('');\n setSuggestions([]);\n };\n\n const renderOptions = () => {\n return (\n suggestions.length > 0 && (\n \n {suggestions.slice(0, 5).map((option, index) => (\n handleOptionClick(option)}\n >\n {option}\n
\n ))}\n \n )\n );\n };\n\n return (\n \n
\n {renderOptions()}\n {errorMsg && {errorMsg}
}\n \n );\n};\n\nSearchInput.defaultProps = {\n onChange: () => {},\n onValidation: () => {},\n className: '',\n placeholder: '',\n label: '',\n name: '',\n type: 'text',\n value: '',\n required: false,\n lineInput: false,\n error: '',\n validationCallback: null,\n options: [],\n};\n\nexport default SearchInput;\n","import React, { useEffect, useState } from 'react';\n\nconst TextArea = ({\n name,\n value,\n type,\n placeholder,\n label,\n onChange,\n onValidation,\n className,\n required,\n lineInput,\n error,\n validationCallback\n}) => {\n const style = {};\n const [errorMsg, setErrorMsg] = useState(error);\n\n useEffect(() => {\n setErrorMsg(error);\n }, [error]);\n\n if (lineInput) {\n className += ' line-input';\n }\n\n if (errorMsg) {\n className += ' error';\n }\n\n const handleChange = (e) => {\n onChange(e);\n setErrorMsg('');\n };\n\n const handleMouseout = (e) => {\n if (required && !e.target.value) {\n setErrorMsg('This field is required');\n onValidation(e.target.name, false);\n return;\n }\n\n // validate with html5 validation\n if (e.target.validity && !e.target.validity.valid) {\n setErrorMsg(e.target.validationMessage);\n onValidation(e.target.name, false);\n return;\n }\n\n if (validationCallback) {\n const result = validationCallback(e);\n setErrorMsg(result);\n onValidation(e.target.name, false);\n return;\n }\n\n onValidation(e.target.name, true);\n };\n\n return (\n\n \n \n
\n );\n};\n\nTextArea.defaultProps = {\n onChange: () => {},\n onValidation: () => {},\n className: '',\n placeholder: '',\n label: '',\n name: '',\n type: 'text',\n value: '',\n required: false,\n lineInput: false,\n error: '',\n validationCallback: () => {}\n};\n\nexport default TextArea;\n","import React, { useEffect, useState } from 'react';\n\nconst TextInput = ({\n name,\n value,\n type,\n placeholder,\n label,\n onChange,\n onValidation,\n className,\n required,\n lineInput,\n error,\n validationCallback,\n prefix,\n readOnly,\n disabled\n}) => {\n const style = {};\n const [errorMsg, setErrorMsg] = useState(error);\n\n useEffect(() => {\n setErrorMsg(error);\n }, [error]);\n\n if (lineInput) {\n className += ' line-input';\n }\n\n if (errorMsg) {\n className += ' error';\n }\n\n const handleChange = (e) => {\n onChange(e);\n setErrorMsg('');\n };\n\n const handleMouseout = (e) => {\n if (required && !e.target.value) {\n setErrorMsg('This field is required');\n onValidation(e.target.name, false);\n return;\n }\n\n // validate with html5 validation\n if (e.target.validity && !e.target.validity.valid) {\n setErrorMsg(e.target.validationMessage);\n onValidation(e.target.name, false);\n return;\n }\n\n if (validationCallback) {\n const result = validationCallback(e);\n setErrorMsg(result);\n onValidation(e.target.name, false);\n return;\n }\n\n onValidation(e.target.name, true);\n };\n\n return (\n {errorMsg}
\n\n \n
\n );\n};\n\nTextInput.defaultProps = {\n onChange: () => { },\n onValidation: () => { },\n className: '',\n placeholder: '',\n label: '',\n name: '',\n type: 'text',\n value: '',\n required: false,\n lineInput: false,\n readOnly: false,\n error: '',\n validationCallback: () => { },\n};\n\nexport default TextInput;\n","import { createContext } from 'react';\n\nexport const AuthContext = createContext(null);\n","const API_ROOT = '/api/v1';\nexport const AUDIENCE_LIST = `${API_ROOT}/audiences`;\nexport const AUDIENCE_GET_ACTIVITY_DETIALS = (id) => `${API_ROOT}/audiences/${id}/get_activity_details`;\nexport const AUDIENCE_GET_RESPONSE_DETIALS = (id) => `${API_ROOT}/audiences/${id}/get_responses`;\nexport const AUDIENCE_GET_FILES_DETAILS = (id) => `${API_ROOT}/audiences/${id}/get_files`;\n","import React, { useEffect, useState } from 'react';\nimport { ChevronLeft } from '../../assets/Icons';\nimport { ENDPOINTS } from '../../pages/utils/endpoints';\n\nconst RegistrationLayout = ({\n children,\n title,\n currStep,\n totalSteps,\n onBackClick\n}) => {\n const logo = require('../../assets/logo.png');\n const progressWidth = (currStep / totalSteps) * 100;\n\n return (\n \n {\n prefix &&
\n {prefix}
\n }\n {errorMsg}
\n\n
\n \n );\n};\n\nRegistrationLayout.defaultProps = {\n title: '',\n currentStep: '',\n totalSteps: 3,\n onBackClick: () => {}\n};\n\nexport default RegistrationLayout;\n","import React from 'react';\nimport History from './History';\nimport Settings from './Settings';\nimport Preview from './Preview';\n\nconst Actions = () => {\n return (\n \n \n 
\n \n \n Logout\n \n
\n \n
\n \n
\n {title}\n \n
\n \n
\n \n {currStep}/{totalSteps}\n
\n {children}
\n \n
\n );\n};\n\nexport default Actions;\n","import React from 'react';\nimport { HistoryIcon } from '../../assets/Icons';\n\nconst History = () => {\n return (\n \n
\n );\n};\n\nexport default History;\n","import React from 'react';\nimport { EyeIcon } from '../../assets/Icons';\nimport { useSelector } from 'react-redux';\nimport { getMaterial } from '../../../redux/materialSlice';\nimport { getCompany } from '../../../redux/companySlice';\nimport { ENDPOINTS } from '../../pages/utils/endpoints';\n\nconst Preview = () => {\n const material = useSelector((state) => getMaterial(state));\n const company = useSelector((state) => getCompany(state));\n\n const showPreview = () => {\n window.location.href = ENDPOINTS.VIEW_WALKTHROUGH(company.slug, material.slug);\n };\n\n return (\n \n
\n );\n};\n\nexport default Preview;\n","import React, { useState } from 'react';\nimport { CogIcon } from '../../assets/Icons';\nimport SettingsModal from '../settings-modal/SettingsModal';\n\nconst Settings = () => {\n const [open, setOpen] = useState(false);\n\n const showSettings = () => {\n $('#settingsModal').modal('show');\n };\n\n const onClose = () => {\n setOpen(false);\n }\n\n const openModal = () => {\n setOpen(true);\n $('#settingsModal').modal('show');\n }\n\n return (\n <>\n \n
\n \n );\n};\n\nexport default Settings;\n","import React, { useState, useRef, useEffect } from 'react';\nimport { EyeIcon, LinkIcon, MoreDotIcon, PencilIcon } from '../../assets/Icons';\nimport { API_ENDPOINTS, HUB_VIEW_ENDPOINTS } from '../../pages/utils/endpoints';\nimport { http_delete, http_get } from '../../pages/utils/api_client';\n\nconst Card = ({ item, baseUrl, companySlug, setUpdatedData, thumbnail_url, favicon_url }) => {\n const backgroundUrl = item?.data[0]?.backgroundUrl;\n const defaultImageURL = backgroundUrl || require('../../assets/1.png');\n const { name, material_type, status, description, slug, opens, unique_visits, completions } = item;\n const [visible, setVisible] = useState(false);\n const menuRef = useRef(null);\n const [copyVisible, setCopyVisible] = useState(false);\n\n const backgroundImage = (material_type === \"Walkthrough\" && thumbnail_url == \"/assets/not-found.png\") ? defaultImageURL : thumbnail_url;\n\n const navPublishedView = () => {\n window.location.pathname = `${baseUrl}`;\n };\n\n const navEditView = () => {\n window.location.pathname = `${baseUrl}/edit`;\n };\n\n const toggleMenu = () => {\n setVisible(!visible);\n };\n\n useEffect(() => {\n const handleClickOutside = (event) => {\n if (menuRef.current && !menuRef.current.contains(event.target)) {\n setVisible(false);\n }\n };\n\n document.addEventListener('mousedown', handleClickOutside);\n return () => {\n document.removeEventListener('mousedown', handleClickOutside);\n };\n }, []);\n\n const handleLinkCopy = ({ iframe = false }) => {\n const link = `${window.location.origin}${HUB_VIEW_ENDPOINTS.VIEW_MATERIAL(companySlug, item.slug)}`;\n if (iframe) {\n const data = ``;\n navigator.clipboard.writeText(data);\n } else {\n navigator.clipboard.writeText(link);\n }\n setVisible(false);\n\n setCopyVisible(true);\n setTimeout(() => {\n setCopyVisible(false);\n }, 2000);\n };\n\n const handleDelete = () => {\n if (confirm(`Are you sure you want to delete this material: ${name}?`)) {\n http_delete(API_ENDPOINTS.DELETE_MATERIAL(slug))\n .then((res) => {\n if (res && res.data && res.data.message) {\n alert(res.data.message);\n http_get(API_ENDPOINTS.GET_LEARNING_MATERIALS, { category: material_type === \"Walkthrough\" ? \"walkthroughs\" : material_type.toLowerCase() })\n .then((res) => {\n setUpdatedData(res.data);\n })\n }\n else {\n alert(res.data.error);\n }\n })\n .finally(() => { });\n }\n }\n\n const handleDuplicate = () => {\n http_get(API_ENDPOINTS.DUPLICATE_LEARNING_MATERIAL(slug))\n .then((res) => {\n if (res && res.data && res.data.message) {\n alert(res.data.message);\n http_get(API_ENDPOINTS.GET_LEARNING_MATERIALS, { category: material_type === \"Walkthrough\" ? \"walkthroughs\" : material_type.toLowerCase() })\n .then((res) => {\n setUpdatedData(res.data);\n })\n }\n else {\n alert(res.data.error);\n }\n })\n .finally(() => { });\n }\n\n return (\n \n \n
\n \n \n \n {status}\n
\n \n
\n \n
\n \n
\n \n
\n {name}
\n{material_type}
\n\n
\n {visible && (\n \n
\n \n
\n \n
\n \n
\n )}\n \n View the material\n
\n \n Edit the material\n
\n \n Publish the material\n
\n \n Copy URL\n
\n handleLinkCopy({ iframe: true })}>\n Copy embed code\n
\n handleDuplicate()}>\n Duplicate the content\n
\n handleDelete()}>\n Delete the content\n
\n \n
\n \n {description || 'These meticulously crafted resources are designed to aid students, educators.'}\n
\n\n
\n \n );\n};\n\nexport default Card;\n","import React from 'react';\nimport { AddUserIcon } from '../../assets/Icons';\n\nconst Collaborators = () => {\n return (\n \n
\n \n Opens
\n{opens}
\n\n
\n \n Completions
\n{completions}
\n\n
\n\n Uniques
\n{unique_visits}
\n\n
\n );\n};\n\nexport default Collaborators;\n","import React from 'react';\nimport { removeActiveLayer } from '../../../redux/toolsSlice';\nimport { removeLayerConfig, removeLayer } from '../../../redux/stepsSlice';\n\nconst ContextMenu = ({ options, activeLayer, stepId, dispatch, onClick }) => {\n const contextActionClicked = (e) => {\n switch (e) {\n case 'Copy':\n console.log('Copy');\n break;\n case 'Paste':\n console.log('Paste');\n break;\n case 'Edit':\n console.log('Edit');\n break;\n case 'Delete':\n dispatch(removeActiveLayer());\n dispatch(removeLayerConfig());\n dispatch(removeLayer({ stepId: stepId, layerId: activeLayer.id }));\n break;\n default:\n break;\n }\n onClick();\n };\n\n const render = () => {\n return options.map((option) => {\n return (\n U1
\n \n
\n {render()}
;\n};\n\nexport default ContextMenu;\n","import React, { useState } from 'react';\nimport Button from '../../atoms/button/Button';\nimport { API_ENDPOINTS } from '../../pages/utils/endpoints';\nimport { http_post } from '../../pages/utils/api_client';\nimport { materialEditPath } from '../../../utils/endpoints';\nimport { useSelector } from 'react-redux';\nimport { getCompany } from '../../../redux/companySlice';\n\nconst CreateModal = () => {\n const [name, setName] = useState('');\n const [materialType, setMaterialType] = useState('paths');\n const [isButtonDisabled, setIsButtonDisabled] = useState(false);\n const [isCreating, setIsCreating] = useState(false);\n const company = useSelector((state) => getCompany(state));\n\n const handleNameChange = (e) => {\n const newName = e.target.value;\n setName(newName);\n setIsButtonDisabled(newName.trim() === '');\n };\n\n const handleSubmit = (e) => {\n if (name.trim().length === 0) {\n alert(\"Please first enter the name of the material.\");\n return;\n }\n e.preventDefault();\n setIsCreating(true);\n const data = {\n name,\n material_type: materialType\n };\n\n http_post(API_ENDPOINTS.GET_LEARNING_MATERIALS, data)\n .then((res) => {\n const pathRedirect = materialEditPath({\n companySlug: company.slug,\n materialType: res.data.material_type,\n materialSlug: res.data.slug\n });\n window.location.href = pathRedirect;\n })\n .finally(() => {\n setIsCreating(false);\n });\n };\n\n const types = ['walkthrough', 'paths'];\n const description = {\n paths: 'Documentation base with section and subsection',\n /*docs: 'Contains modules with lessons and learner progress',*/\n walkthrough: 'Guide tour across your product with instruction',\n /*video: 'Video content with onboarding information'*/\n };\n\n return (\n \n
\n \n \n );\n};\n\nexport default CreateModal;\n","import React, { useState, useEffect, useLayoutEffect } from 'react';\nimport { Stage, Layer } from 'react-konva';\nimport { useSelector, useDispatch, shallowEqual } from 'react-redux';\nimport {\n selectLayers,\n addLayer,\n getActiveBackgroundURL\n} from '../../../redux/stepsSlice';\nimport { selectActiveTool, removeActiveTool } from '../../../redux/toolsSlice';\nimport { RenderSquare, squareLayerDefaults } from '../tools/Square';\nimport { RenderText, textLayerDefaults } from '../tools/TextTool';\nimport { RenderHotSpot, hotspotLayerDefaults } from '../tools/HotSpot';\nimport { RenderTextInput, textInputLayerDefaults } from '../tools/TextInput';\nimport { RenderDropdown, dropdownLayerDefaults } from '../tools/DropdownTool';\nimport { getActiveStep } from '../../../redux/toolsSlice';\nimport EmptyCanvas from '../empty-canvas/EmptyCanvas';\nimport URLImage, { RenderURLImage } from '../tools/UrlImage';\nimport { RenderLine, lineLayerDefaults } from '../tools/Line';\n\nconst DesignCanvas = () => {\n const dispatch = useDispatch();\n const step = useSelector((state) => getActiveStep(state));\n const layers = useSelector(\n (state) => selectLayers(state, step.id),\n shallowEqual\n );\n const [stageSize, setStageSize] = useState({ width: 1024, height: 768 });\n const [editorScale, setEditScale] = useState(1);\n const selectedTool = useSelector((state) => selectActiveTool(state));\n const [activeTool, setActiveTool] = useState(selectedTool);\n const activeBackgroundURL = useSelector((state) =>\n getActiveBackgroundURL(state, step.id)\n );\n\n const generateRandomId = () => {\n return (\n Math.random().toString(36).substring(2, 15) +\n Math.random().toString(36).substring(2, 15)\n );\n };\n\n const layerClicked = (e) => {\n if (!activeTool) {\n return;\n }\n\n const id = generateRandomId();\n const stage = e.target.getStage();\n\n const pos = stage.getPointerPosition();\n const mousePos = { x: pos.x, y: pos.y };\n\n let newLayer = null;\n switch (activeTool) {\n case 'square':\n newLayer = squareLayerDefaults(id, mousePos);\n break;\n case 'text':\n newLayer = textLayerDefaults(id, mousePos);\n break;\n case 'hotspot':\n newLayer = hotspotLayerDefaults(id, mousePos);\n break;\n case 'textInput':\n newLayer = textInputLayerDefaults(id, mousePos);\n break;\n case 'dropdown':\n newLayer = dropdownLayerDefaults(id, mousePos);\n break;\n case 'line':\n newLayer = lineLayerDefaults(id, mousePos);\n break;\n default:\n return;\n }\n\n dispatch(addLayer({ stepId: step.id, layer: newLayer }));\n dispatch(removeActiveTool());\n };\n\n const renderLayers = () => {\n if (!layers) return null;\n return layers.map((layer, index) => {\n switch (layer.type) {\n case 'image':\n return \n \n \n \n \n \n \n
\n \n
\n \n
\n \n \n \n \n Name can't be blank\n \n
\n \n \n {types.map((type, index) => (\n setMaterialType(type)}\n >\n
\n ))}\n \n
\n {type.charAt(0).toUpperCase() + type.slice(1)}
\n{description[type]}
\n\n \n Cancel\n \n \n Create\n \n
\n \n {!activeBackgroundURL && \n \n \n \n )}\n
\n );\n};\n\nexport default DesignCanvas;\n","import React, { useEffect } from 'react';\nimport DropdownSelect from '../../atoms/dropdown-select/DropdownSelect';\nimport { useSelector } from 'react-redux';\nimport { getCompanyDomains } from '../../../redux/companySlice';\n\nconst DomainSelector = ({ name, value, onChange }) => {\n const handleChange = (data) => {\n const result = {\n target: {\n name: name,\n value: data.value,\n label: data.label\n }\n };\n onChange(result);\n };\n\n const domains = useSelector((state) => getCompanyDomains(state)) || [];\n let options = domains.map((domain) => {\n return {\n value: domain.id,\n label: domain.name\n };\n });\n\n const selected = options.find((option) => option.value === value);\n\n useEffect(() => {\n if (value) {\n onChange({\n target: {\n name: name,\n value: value,\n label: selected?.label\n }\n });\n }\n }, []);\n\n return (\n Default
;\n }\n return (\n \n
\n );\n};\n\nDesignOption.defaultProps = {\n text: '',\n optionType: '',\n value: '',\n onChange: () => { },\n options: []\n};\n\nexport default DesignOption;\n","import React, { useEffect, useState } from 'react';\nimport Accordion from '../../atoms/accordion/Accordion';\nimport DesignOption from './DesignOption';\nimport { useSelector, useDispatch } from 'react-redux';\nimport {\n getLayerConfig,\n getMainConfig,\n updateMainConfig,\n updateLayerConfig\n} from '../../../redux/stepsSlice';\n\nconst EditorDesign = () => {\n const dispatch = useDispatch();\n const mainConfig = useSelector((state) => getMainConfig(state));\n const layerConfig = useSelector((state) => getLayerConfig(state));\n const [configs, setConfigs] = useState(\n layerConfig.length > 0 ? layerConfig : mainConfig\n );\n\n const updateConfig = (sectionId, titleId, newValue) => {\n const data = {\n sectionId: sectionId,\n titleId: titleId,\n value: newValue\n };\n if (layerConfig.length > 0) {\n dispatch(updateLayerConfig(data));\n } else {\n dispatch(updateMainConfig(data));\n }\n };\n\n useEffect(() => {\n if (layerConfig.length > 0) {\n setConfigs(layerConfig);\n } else {\n setConfigs(mainConfig);\n }\n }, [layerConfig, mainConfig]);\n\n const renderDesignOptions = ((sectionId, values) => {\n return values.map((value) => (\n {text}
\n {component}
\n {renderConfig()}
;\n};\n\nexport default EditorDesign;\n","import React, { useState, useEffect, useRef } from 'react';\nimport { SketchPicker } from 'react-color';\n\nconst ColorOption = ({ defaultValue, onChange }) => {\n const [show, setShow] = useState(false);\n const [color, setColor] = useState(defaultValue);\n const popoverRef = useRef();\n\n useEffect(() => {\n setColor(defaultValue);\n }, [defaultValue]);\n\n const handleChange = (color) => {\n const hexColor = convertRGBAToHex(color.rgb);\n setColor(hexColor);\n onChange(hexColor);\n };\n\n const convertRGBAToHex = (color) => {\n let r = color.r.toString(16);\n let g = color.g.toString(16);\n let b = color.b.toString(16);\n let a = Math.round(color.a * 255).toString(16);\n\n if (r.length === 1) r = '0' + r;\n if (g.length === 1) g = '0' + g;\n if (b.length === 1) b = '0' + b;\n if (a.length === 1) a = '0' + a;\n\n return '#' + r + g + b + a;\n };\n\n const handleClickOutside = (event) => {\n if (popoverRef.current && !popoverRef.current.contains(event.target)) {\n setShow(false);\n }\n };\n\n useEffect(() => {\n document.addEventListener('mousedown', handleClickOutside);\n return () => {\n document.removeEventListener('mousedown', handleClickOutside);\n };\n }, []);\n\n return (\n \n
\n );\n};\n\nexport default ColorOption;\n","import React, { useState, useEffect } from 'react';\nimport FontPicker from 'font-picker-react';\n\n// todo: remove api key\nconst FontOption = ({ defaultValue, onChange }) => {\n const pickerId = Math.random().toString(36).substr(2);\n const [font, setFont] = useState(defaultValue);\n\n useEffect(() => {\n setFont(defaultValue);\n }, [defaultValue]);\n\n const handleChange = (nextFont) => {\n setFont(nextFont.family);\n onChange(nextFont.family);\n };\n\n return (\n setShow(!show)}>\n \n {color.toUpperCase()}\n
\n {show && (\n \n
\n )}\n \n
\n );\n};\n\nFontOption.defaultProps = {\n defaultValue: 'Open Sans',\n onChange: () => { }\n};\n\nexport default FontOption;\n","import React, { useState, useEffect } from 'react';\nimport Dropdown from 'react-dropdown';\nimport 'react-dropdown/style.css';\n\nconst FontSizeOption = ({ defaultValue, onChange }) => {\n const [value, setValue] = useState(`${defaultValue}`);\n useEffect(() => {\n setValue(`${defaultValue} px`);\n }, [defaultValue]);\n\n let options = [];\n for (let i = 0; i <= 240; i++) {\n options.push({ value: i, label: `${i} px` });\n }\n\n const handleChange = (option) => {\n setValue(option.label);\n onChange(option.value);\n };\n\n return (\n <>\n \n
\n \n );\n}\n","import React, { useState, useEffect } from 'react';\n\nexport default function JustifyHorizontal({ defaultValue, onChange, options }) {\n const [value, setValue] = useState(defaultValue);\n\n useEffect(() => {\n setValue(defaultValue);\n }, [defaultValue]);\n\n const handleOnClick = (option) => {\n setValue(option);\n onChange(option);\n };\n\n return (\n <>\n \n {options.map((option) => {\n return handleOnClick(option)}\n value={option}>\n {option}\n \n })\n }\n
\n \n )\n}","import React, { useState, useEffect } from 'react';\n\nexport default function JustifyVertical({ defaultValue, onChange, options }) {\n const [value, setValue] = useState(defaultValue);\n\n useEffect(() => {\n setValue(defaultValue);\n }, [defaultValue]);\n\n const handleOnClick = (option) => {\n setValue(option);\n onChange(option);\n };\n\n return (\n <>\n \n {options.map((option) => {\n return handleOnClick(option)}\n value={option}>\n {option}\n \n })\n }\n
\n \n )\n}","import React, { useState, useEffect } from 'react';\nimport Dropdown from 'react-dropdown';\nimport 'react-dropdown/style.css';\n\nconst LineStyleOption = ({ defaultValue, onChange }) => {\n const [value, setValue] = useState(`${defaultValue} px`);\n useEffect(() => {\n setValue(`${defaultValue}`);\n }, [defaultValue]);\n\n let options = ['Solid', 'Dashed', 'Dotted'];\n\n const handleChange = (option) => {\n setValue(option.label);\n onChange(option.value);\n };\n\n return (\n \n \n
\n );\n};\n\nexport default NumberOption;\n","import React, { useEffect, useState } from 'react';\n\nconst TextAreaOption = ({ defaultValue, onChange }) => {\n const [value, setValue] = useState(defaultValue);\n\n useEffect(() => {\n setValue(defaultValue);\n }, [defaultValue]);\n\n const handleChange = (event) => {\n setValue(event.target.value);\n onChange(event.target.value);\n };\n\n return (\n \n \n
\n );\n};\n\nexport default TextAreaOption;\n","import React, { useEffect, useState } from 'react';\n\nconst TextOption = ({ defaultValue, onChange }) => {\n const [value, setValue] = useState(defaultValue);\n\n useEffect(() => {\n setValue(defaultValue);\n }, [defaultValue]);\n\n const handleChange = (event) => {\n setValue(event.target.value);\n onChange(event.target.value);\n };\n\n return (\n \n \n
\n );\n};\n\nTextOption.defaultProps = {\n defaultValue: '',\n onChange: () => {}\n};\n\nexport default TextOption;\n","import React from 'react';\nimport { UploadIcon } from '../../../assets/Icons';\nimport axios from 'axios';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { getMaterial, updateMaterial } from '../../../../redux/materialSlice';\n\nconst validateFileType = (fileType) => {\n const allowedTypes = ['image/jpg', 'image/jpeg', 'image/png', 'image/gif'];\n return allowedTypes.includes(fileType);\n};\n\nconst validateFileSize = (fileSize) => {\n const fileSizeLimit = 15 * 1024 * 1024; // 15 MB\n return fileSize <= fileSizeLimit;\n};\n\nexport default function UploadOption({ onChange, image_type }) {\n\n const dispatch = useDispatch();\n\n const materials = useSelector((state) => getMaterial(state));\n\n const handleFileChange = (event) => {\n event.preventDefault();\n const file = event.target.files[0];\n handleFile(file);\n }\n\n const uploadImage = async (file) => {\n const formData = new FormData();\n formData.append('image', file);\n formData.append('image_type', image_type);\n const url = `/api/v1/uploads/learning_material/${materials.slug}`;\n const response = await axios\n .post(url, formData, {\n headers: {\n 'Content-Type': 'multipart/form-data',\n },\n })\n .finally(() => {\n });\n return response.data;\n };\n\n const handleDeleteFile = async () => {\n if (confirm(`Are you sure you want to delete ${image_type} image?`)) {\n const url = `/api/v1/learning_materials/${materials.slug}/remove_attachment`;\n const response = await axios\n .delete(url, {\n data: {\n image_type: image_type,\n },\n });\n if (response.status == 200) {\n alert(`${response.data.message}`)\n window.location.reload();\n }\n else {\n alert(\"Something went wrong.\")\n }\n }\n }\n\n const handleFile = async (file) => {\n if (!validateFileType(file?.type)) {\n alert('Only JPG, PNG, GIF, and JPEG images are allowed.');\n return;\n }\n\n if (!validateFileSize(file.size)) {\n alert('File size exceeds the maximum limit of 15 MB.');\n return;\n }\n\n const response = await uploadImage(file);\n if (response) {\n onChange(response.image_url);\n const keyName = image_type == 'favicon' ? 'favicon_url' : 'cover_url';\n dispatch(updateMaterial({ keyName: response.image_url }))\n alert(`${image_type} added successfully.`)\n }\n else (\n alert('Something went wrong.')\n )\n }\n\n return (\n <>\n \n \n {(materials.cover_url == \"/assets/not-found.png\" || image_type !== \"cover\") ? null :\n \n X\n \n }\n
\n \n )\n}","import React, { useState, useEffect } from 'react';\nimport Dropdown from 'react-dropdown';\nimport 'react-dropdown/style.css';\nimport { API_ENDPOINTS } from '../../../pages/utils/endpoints';\nimport { http_get } from '../../../../utils/api_client';\n\nconst WalkthroughSelectOption = ({ defaultValue, onChange }) => {\n const [value, setValue] = useState(`${defaultValue}`);\n const [list, setList] = useState([]);\n\n useEffect(() => {\n // if(list){\n // setValue(list.filter(ele => ele.id === defaultValue)); \n // }\n setValue(list.filter(ele => parseInt(ele.value) === parseInt(defaultValue))?.[0]);\n }, [defaultValue, list]);\n\n const handleChange = (option) => {\n setValue(option);\n onChange(option.value);\n };\n\n const getWalkthroughList = () => {\n const params = { by: 'aasm_state', keyword: 'published' };\n http_get(API_ENDPOINTS.SEARCH_WALKTHROUGH, params)\n .then((response) => {\n setList(response?.data?.map(ele => { return{ value: ele.id.toString(), label: ele.name}}));\n })\n }\n\n useEffect(() => {\n getWalkthroughList();\n }, [])\n\n return (\n \n
\n \n );\n });\n };\n\n return {image.filename}
\n{renderImages()}
;\n};\n\nexport default EditorLibrary;\n","import React, { useState } from 'react';\nimport Tabs from '../tabs/Tabs';\nimport EditorLibrary from '../editor-library/EditorLibrary';\nimport EditorDesign from '../editor-design/EditorDesign';\n\nconst EditorOptions = () => {\n const tabs = ['Library', 'Design'];\n const [activeTab, setActiveTab] = useState();\n\n const handleSetTab = (tab) => {\n setActiveTab(tab);\n };\n\n return (\n \n
\n );\n};\n\nexport default EditorOptions;\n","// take a screenshot of shared screen\nfunction getUserMedia(options) {\n if (navigator.mediaDevices.getDisplayMedia) {\n return navigator.mediaDevices.getDisplayMedia(options);\n }\n if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {\n return navigator.mediaDevices.getUserMedia(options);\n }\n if (navigator.getUserMedia) {\n return navigator.getUserMedia(options);\n }\n if (navigator.webkitGetUserMedia) {\n return navigator.webkitGetUserMedia(options);\n }\n if (navigator.mozGetUserMedia) {\n return navigator.mozGetUserMedia(options);\n }\n if (navigator.msGetUserMedia) {\n return navigator.msGetUserMedia(options);\n }\n\n throw new Error('getUserMedia is not defined');\n}\n\nasync function takeScreenshotStream() {\n const width = screen.width * (window.devicePixelRatio || 1);\n const height = screen.height * (window.devicePixelRatio || 1);\n const errors = [];\n let stream;\n try {\n stream = await getUserMedia({\n audio: false,\n video: true\n });\n } catch (ex) {\n errors.push(ex);\n }\n\n if (errors.length) {\n console.debug(...errors);\n }\n return stream;\n}\n\nasync function takeScreenshotCanvas() {\n const stream = await takeScreenshotStream();\n\n if (!stream) {\n return null;\n }\n\n const video = document.createElement('video');\n const result = await new Promise((resolve, reject) => {\n video.onloadedmetadata = () => {\n video.play();\n video.pause();\n\n const canvas = document.createElement('canvas');\n canvas.width = video.videoWidth;\n canvas.height = video.videoHeight;\n const context = canvas.getContext('2d');\n context.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);\n resolve(canvas);\n };\n video.srcObject = stream;\n });\n\n stream.getTracks().forEach(function (track) {\n track.stop();\n });\n\n return result;\n}\n\n// from: https://stackoverflow.com/a/46182044/5221762\nfunction getJpegBlob(canvas) {\n return new Promise((resolve, reject) => {\n canvas.toBlob((blob) => resolve(blob), 'image/jpeg', 0.95);\n canvas.toDataURL('image/jpeg');\n });\n}\n\nexport const takeScreenshotJpegBlob = async () => {\n const canvas = await takeScreenshotCanvas();\n if (!canvas) {\n return null;\n }\n return getJpegBlob(canvas);\n};\n\n$('.take-screenshot').on('click', async function () {\n // take the screenshot\n var screenshotJpegBlob = await takeScreenshotJpegBlob();\n if (screenshotJpegBlob) {\n var formData = new FormData();\n var $input, url, id, data_id;\n data_id = $(this).data('id').split('_');\n id = data_id[0];\n learning_id = $(this).data('learning_id');\n if (material == 'demo') {\n url =\n '/' +\n data_id[1] +\n '/d/' +\n learning_id +\n '/add_section_image.js?section_id=' +\n id;\n formData.append('page_image[image]', screenshotJpegBlob);\n } else if (material == 'walkthrough') {\n url =\n '/' +\n data_id[1] +\n '/w/' +\n learning_id +\n '/add_step_image.js?step_id=' +\n id;\n formData.append('page_image[image]', screenshotJpegBlob);\n } else {\n $input = $('.' + material + '_section_image_upload');\n formData.append(\n material + '_section_page[image_video]',\n screenshotJpegBlob\n );\n url =\n '/' +\n data_id[1] +\n '/' +\n material +\n '_section_pages/' +\n id +\n '/upload_image';\n }\n $.ajax({\n url: url,\n method: 'post',\n data: formData,\n contentType: false,\n processData: false\n });\n }\n});\n","import React, { useState } from 'react';\nimport Button from '../../atoms/button/Button';\nimport { takeScreenshotJpegBlob } from '../../../utils/screenshot';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { getActiveStep } from '../../../redux/toolsSlice';\nimport { updateBackgroundURL } from '../../../redux/stepsSlice';\nimport axios from 'axios';\nimport Loader from '../../../components/organisms/loader/Loader';\nimport { INTERNAL_ENDPOINTS } from '../../pages/utils/endpoints';\n\nconst EmptyCanvas = () => {\n const dispatch = useDispatch();\n const activeStep = useSelector((state) => getActiveStep(state));\n const [loading, setLoading] = useState(false);\n\n const uploadScreenshot = async (screenshotJpegBlob) => {\n const formData = new FormData();\n formData.append('image', screenshotJpegBlob);\n const url = INTERNAL_ENDPOINTS.POST_LIBRARY;\n const response = await axios\n .post(url, formData, {\n headers: {\n 'Content-Type': 'multipart/form-data',\n },\n })\n .finally(() => {\n setLoading(false);\n });\n return response.data;\n };\n\n const takeScreenshot = async () => {\n const screenshotJpegBlob = await takeScreenshotJpegBlob();\n if (screenshotJpegBlob) {\n setLoading(true);\n const response = await uploadScreenshot(screenshotJpegBlob);\n const url = response.url;\n dispatch(updateBackgroundURL({ stepId: activeStep.id, url: url }));\n setLoading(false);\n }\n };\n\n const handleFileChange = async (e) => {\n setLoading(true);\n const file = e.target.files[0];\n const response = await uploadScreenshot(file);\n const urlImage = response.url;\n dispatch(updateBackgroundURL({ stepId: activeStep.id, url: urlImage }));\n setLoading(false);\n };\n\n const handleFileInputClick = () => {\n document.getElementById('imageInput').click();\n };\n\n return (\n \n
\n );\n};\n\nexport default EmptyCanvas;\n","import React, { useState } from 'react';\nimport { CONSTS } from '../../pages/utils/endpoints';\nimport { getCompany } from '../../../redux/companySlice';\nimport { useSelector } from 'react-redux';\nimport Card from '../card/Card';\nimport { ENDPOINTS } from '../../pages/utils/endpoints';\n\nconst LMGrid = ({ data }) => {\n const [updatedData, setUpdatedData] = useState(data);\n const company = useSelector((state) => getCompany(state));\n\n const getBaseUrl = (item) => {\n switch (item.material_type.toLowerCase()) {\n case CONSTS.WALKTHROUGH:\n return ENDPOINTS.VIEW_WALKTHROUGH(company.slug, item.slug);\n case CONSTS.VIDEO:\n return ENDPOINTS.VIEW_WALKTHROUGH(company.slug, item.slug);\n case CONSTS.PATHS:\n return ENDPOINTS.VIEW_PATH(company.slug, item.slug);\n default:\n break;\n }\n }\n\n const renderRows = () => {\n let rows = [];\n let row = [];\n updatedData.map((item, index) => {\n const baseUrl = getBaseUrl(item);\n row.push(\n \n \n
\n Image Placeholder
\n\n {loading && \n Take a screenshot\n \n \n \n Insert an image\n \n \n )}\n
\n \n Or Drag & Drop image from the library or your computer here\n
\n\n
\n );\n};\n\nexport default LMGrid;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst Header = ({ title, configColors }) => {\n const logo = require('./default_logo.png');\n\n const style = {\n '--primary-color': configColors.primary,\n '--background-color': configColors.background,\n };\n\n return (\n {renderRows()}
\n \n
\n );\n};\n\nHeader.defaultProps = {\n title: '',\n configColors: {\n primary: '#000000',\n background: '#ffffff',\n },\n};\n\nHeader.propTypes = {\n greeting: PropTypes.string,\n title: PropTypes.string,\n};\n\nexport default Header;\n","import React, { useEffect, useRef, useState } from \"react\";\r\n\r\nfunction DateDropdown({ column, placeholder }) {\r\n const [isActive, setIsActive] = useState(false);\r\n\r\n const containerRef = useRef(null);\r\n\r\n useEffect(() => {\r\n function handleClickOutside(event) {\r\n if (\r\n containerRef.current &&\r\n !containerRef.current.contains(event.target)\r\n ) {\r\n setIsActive(false);\r\n }\r\n }\r\n\r\n document.addEventListener(\"mousedown\", handleClickOutside);\r\n return () => {\r\n document.removeEventListener(\"mousedown\", handleClickOutside);\r\n };\r\n }, [containerRef]);\r\n\r\n const handleUserClick = () => {\r\n setIsActive((prev) => !prev);\r\n };\r\n\r\n useEffect(() => {\r\n // eslint-disable-next-line\r\n $(\".calendar\").datepick({\r\n onSelect: function (dateText) {\r\n const parsedDate = new Date(dateText[0]).toISOString();\r\n column.setFilterValue(parsedDate);\r\n },\r\n });\r\n }, [column]);\r\n\r\n return (\r\n \n \n \n \n
\n {title}
\n\n \n Sign in as Guest\n {' '}\n |{' '}\n \n Sign in as a Learner\n \n
\n \r\n \r\n
\r\n \r\n );\r\n}\r\n\r\nexport default DateDropdown;\r\n","import React from \"react\";\r\nimport getLMColumns from \"./columns\";\r\nimport DataTable from './datatable/DataTable';\r\n\r\nfunction LMTable({LMType, data, isLoading, onPaginationChange}) {\r\n return (\r\n handleUserClick()}>\r\n
\r\n \r\n \r\n
\r\n {placeholder}
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n Set Date\r\n \r\n
\r\n \r\n \r\n Relative Date\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n );\r\n}\r\n\r\nexport default MultiCombobox;\r\n","import React from \"react\";\r\n\r\nfunction SearchInput({ value, setValue, placeholder = \"\" }) {\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n {placeholder}
\r\n \r\n
\r\n All
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n {options.map((option, index) => {\r\n const isSelected =\r\n filters.find((e) => e === option.value) ?? false;\r\n\r\n return (\r\n
\r\n \r\n \r\n
\r\n );\r\n })}\r\n {isSelectAllEnabled ? (\r\n \r\n {\r\n if (isSelected) {\r\n setFilters((prev) =>\r\n prev.filter((e) => e !== option.value)\r\n );\r\n } else {\r\n setFilters((prev) => [...prev, option.value]);\r\n }\r\n }}\r\n />\r\n
\r\n \r\n {option.label}\r\n
\r\n \r\n \r\n {\r\n setFilters(options.map((e) => e.value));\r\n }}\r\n type=\"button\"\r\n className=\"all-dropdown-data\"\r\n >\r\n Select All\r\n \r\n
\r\n ) : (\r\n <>\r\n )}\r\n \r\n setValue(e.target.value)}\r\n />\r\n
\r\n );\r\n}\r\n\r\nexport default SearchInput;\r\n","import React, { useEffect, useRef, useState } from \"react\";\nimport VisitorImage from \"../../../../assets/images/visitor-logo-1.png\";\n\nfunction ShareAccess() {\n const [isActive, setIsActive] = useState(false);\n\n const [isDocActive, setIsDocActive] = useState(false);\n const [isUserActive, setIsUserActive] = useState(false);\n\n const containerRef = useRef(null);\n\n const docRef = useRef(null);\n const userRef = useRef(null);\n\n useEffect(() => {\n function handleClickOutside(event) {\n if (\n containerRef.current &&\n !containerRef.current.contains(event.target)\n ) {\n setIsActive(false);\n }\n if (docRef.current && !docRef.current.contains(event.target)) {\n setIsDocActive(false);\n }\n if (userRef.current && !userRef.current.contains(event.target)) {\n setIsUserActive(false);\n }\n }\n\n document.addEventListener(\"mousedown\", handleClickOutside);\n return () => {\n document.removeEventListener(\"mousedown\", handleClickOutside);\n };\n }, [containerRef]);\n\n const handleUserClick = () => {\n setIsActive((prev) => !prev);\n };\n\n return (\n <>\n \r\n \r\n
\r\n \n
\n \n \n Share Access\n \n
\n \n
\n \n
\n \n setIsActive(false)}\n id=\"close-export-modal\"\n className=\"close-modal\"\n >\n \n
\n Share Access
\n\n
\n \n \n
\n \n \n \n \n \n setIsUserActive((prev) => !prev)}\n className=\"input-export search-poup\"\n type=\"text\"\n placeholder=\"Type the name or email of the user(s) you want to grant access.\"\n />\n \n \n \n \n \n
\n \n
\n \n \n \n );\n}\n\nexport default ShareAccess;\n","import React, { useEffect, useRef } from 'react';\nimport Visitor1 from '../../../../assets/images/visitor-logo-1.png';\nimport ColumnHeader from '../../pages/audience/components/datatable/extra/ColumnHeader';\nimport { CONSTS } from '../../pages/utils/endpoints';\n\nconst handleOnImageLoadError = ({ currentTarget }) => {\n\tcurrentTarget.onerror = null;\n\tcurrentTarget.src = '/assets/customer_avatar.png';\n}\n\n// function IndeterminateCheckbox({ indeterminate, className = '', ...rest }) {\n// const ref = useRef(null);\n\n// useEffect(() => {\n// if (typeof indeterminate === 'boolean') {\n// ref.current.indeterminate = rest.checked && indeterminate;\n// }\n// }, [ref, indeterminate, rest.checked]);\n\n// return (\n// \n
\n Sharing Access with 2 users
\n\n
\n \n setIsActive(false)}\n className=\"btn-border\"\n type=\"button\"\n >\n Discard\n \n setIsActive(false)}\n className=\"model-export-btn\"\n type=\"button\"\n >\n Grant Access\n \n
\n \n // {/*
\n // ),\n // cell: ({ row }) => {\n // return (\n // \n // {/*
\n // );\n // },\n // },\n {\n accessorKey: 'name',\n header: ({ column }) => (\n \n {!!row.depth &&
\n );\n },\n },\n {\n accessorKey: 'progressPercentage',\n header: ({ column }) => \n 
\n
}\n \n
\n {row.getValue('name')}
\n\n
\n \n );\n },\n },\n {\n accessorKey: 'opens',\n header: ({ column }) => {percentage}%
\n \n
\n {row.getValue('opens')}
;\n },\n },\n // {\n // accessorKey: 'completions',\n // header: ({ column }) => (\n // {row.getValue('completions')}
\n // );\n // },\n // },\n // {\n // accessorKey: \"uniqueVisits\",\n // header: ({ column }) => (\n // {row.getValue(\"uniqueVisits\")}
\n // );\n // },\n // },\n // {\n // id: 'toggle',\n // header: ({ column }) => \n // \n // \n //
\n // )}\n // \n // \n // );\n // },\n // },\n ];\n\n let newColumns = [\n {\n accessorKey: 'currentStep',\n header: ({ column }) => (\n \n // {isExpandable ? (\n // \n // \n // \n // \n //
\n // ) : (\n // {row.getValue('currentStep')}
\n );\n },\n },\n {\n accessorKey: 'stepStatus',\n \n header: ({ column }) => (\n \n
\n );\n },\n },\n ];\n\n if (LMType === CONSTS.DOCS) {\n newColumns = [\n {\n accessorKey: \"lastPage\",\n header: ({ column }) => (\n {row.getValue('stepStatus')}
\n {row.getValue(\"lastPage\")}
;\n },\n }\n ]\n }\n columns.splice(6, 0, ...newColumns);\n return columns;\n};\n\n\nexport default getLMColumns;","import React, { useState } from \"react\";\r\nimport {\r\n flexRender,\r\n getCoreRowModel,\r\n getExpandedRowModel,\r\n getFacetedRowModel,\r\n getFacetedUniqueValues,\r\n getFilteredRowModel,\r\n getPaginationRowModel,\r\n getSortedRowModel,\r\n useReactTable,\r\n} from \"@tanstack/react-table\";\r\nimport Toolbar from \"./Toolbar\";\r\nimport Pagination from \"./extra/Pagination\";\r\nimport SatisfactionToolbar from \"./SatisfactionToolbar\";\r\nimport InteractionHistoryToolbar from \"./InteractionHistoryToolbar\";\r\nimport RemotePagination from \"../../../pages/audience/components/datatable/extra/RemotePagination\";\r\nimport Loader from \"../../loader/Loader\";\r\n\r\nfunction getNestedPropertyValue(object, propertyPath) {\r\n const properties = propertyPath.split(\".\");\r\n let value = object;\r\n\r\n for (const prop of properties) {\r\n if (value && typeof value === \"object\") {\r\n value = value[prop];\r\n } else {\r\n return undefined;\r\n }\r\n }\r\n\r\n return value;\r\n}\r\n\r\nfunction DataTable({\r\n columns,\r\n data,\r\n isLoading,\r\n toolbarType = \"\",\r\n isPaginationEnabled = false,\r\n onPaginationChange = () => { },\r\n customTable = false,\r\n}) {\r\n const [sorting, setSorting] = useState([]);\r\n const [columnFilters, setColumnFilters] = useState([]);\r\n const [columnVisibility, setColumnVisibility] = useState({});\r\n const [rowSelection, setRowSelection] = useState({});\r\n const [expanded, setExpanded] = useState()\r\n\r\n const nestedFilter = (row, ColumnId, value, addMeta) => {\r\n const name = row.original.learner.name;\r\n const email = row.original.learner.email;\r\n\r\n const userId = row.original.userId;\r\n\r\n if (name.toLowerCase().includes(value.toLowerCase())) {\r\n return true;\r\n }\r\n\r\n if (email.toLowerCase().includes(value.toLowerCase())) {\r\n return true;\r\n }\r\n\r\n if (userId.toLowerCase().includes(value.toLowerCase())) {\r\n return true;\r\n }\r\n\r\n return false;\r\n };\r\n\r\n const arrayFilter = (row, ColumnId, value, addMeta) => {\r\n const original = row.original;\r\n const propertiesToCheck = [\r\n \"activityStatus\",\r\n \"learningGroup\",\r\n \"type\",\r\n \"rating.type\",\r\n \"status\",\r\n ];\r\n\r\n for (const prop of propertiesToCheck) {\r\n let propertyValue = prop.includes(\".\")\r\n ? getNestedPropertyValue(original, prop)\r\n : original[prop];\r\n\r\n if (\r\n Array.isArray(propertyValue) &&\r\n propertyValue.some((item) => value.includes(item))\r\n ) {\r\n return true;\r\n } else if (\r\n typeof propertyValue === \"string\" &&\r\n value.includes(propertyValue)\r\n ) {\r\n return true;\r\n }\r\n }\r\n\r\n return false;\r\n };\r\n\r\n const table = useReactTable({\r\n data: data.records ? data.records : data,\r\n columns,\r\n filterFns: {\r\n nested: nestedFilter,\r\n customArray: arrayFilter,\r\n },\r\n onSortingChange: setSorting,\r\n onColumnFiltersChange: setColumnFilters,\r\n onColumnVisibilityChange: setColumnVisibility,\r\n getCoreRowModel: getCoreRowModel(),\r\n getFilteredRowModel: getFilteredRowModel(),\r\n // getPaginationRowModel: getPaginationRowModel(),\r\n manualPagination: true, //turn off client-side pagination\r\n pageCount: data.pagination ? data.pagination.total_pages : 0,\r\n onPaginationChange: onPaginationChange,\r\n getSortedRowModel: getSortedRowModel(),\r\n getFacetedRowModel: getFacetedRowModel(),\r\n getFacetedUniqueValues: getFacetedUniqueValues(),\r\n getSubRows: row => row.subRows,\r\n getExpandedRowModel: getExpandedRowModel(),\r\n // onExpandedChange: setExpanded,\r\n state: {\r\n sorting,\r\n columnVisibility,\r\n columnFilters,\r\n // rowSelection,\r\n expanded: true,\r\n pagination: data.pagination ? data.pagination : null,\r\n },\r\n // enableRowSelection: true,\r\n // onRowSelectionChange: setRowSelection,\r\n });\r\n\r\n return (\r\n <>\r\n {toolbarType === \"main\" && \r\n \r\n table.getColumn(\"materialName\").setFilterValue(value)\r\n }\r\n />\r\n
\r\n );\r\n}\r\n\r\nexport default InteractionHistoryToolbar;\r\n","import React, { useEffect, useState } from \"react\";\r\nimport SearchInput from '../SearchInput';\r\nimport MultiCombobox from '../MultiCombobox';\r\n\r\nconst typeOptions = [\r\n {\r\n value: \"form\",\r\n label: \"Form\",\r\n },\r\n {\r\n value: \"paths\",\r\n label: \"Paths\",\r\n },\r\n {\r\n value: \"walkthroughs\",\r\n label: \"Walkthroughs\",\r\n },\r\n];\r\n\r\nconst learningGroupOptions = [\r\n {\r\n value: \"completed\",\r\n label: \"Completed\",\r\n },\r\n {\r\n value: \"in progress\",\r\n label: \"In Progress\",\r\n },\r\n];\r\n\r\nfunction SatisfactionToolbar({ table }) {\r\n const [typeFilters, setTypeFilters] = useState([]);\r\n const [ratingFilters, setRatingFilters] = useState([]);\r\n\r\n useEffect(() => {\r\n const column = table.getColumn(\"type\");\r\n if (typeFilters.length > 0) {\r\n column.setFilterValue(typeFilters);\r\n } else {\r\n column.setFilterValue(undefined);\r\n }\r\n }, [typeFilters, table]);\r\n\r\n useEffect(() => {\r\n const column = table.getColumn(\"rating\");\r\n if (ratingFilters.length > 0) {\r\n column.setFilterValue(ratingFilters);\r\n } else {\r\n column.setFilterValue(undefined);\r\n }\r\n }, [ratingFilters, table]);\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n table.getColumn(\"materialName\").setFilterValue(value)\r\n }\r\n />\r\n
\r\n );\r\n}\r\n\r\nexport default SatisfactionToolbar;\r\n","import React, { useEffect, useState } from \"react\";\r\nimport ExportModal from \"./toolbar-extra/ExportModal\";\r\nimport SearchInput from \"../SearchInput\";\r\nimport MultiCombobox from \"../MultiCombobox\";\r\nimport DateDropdown from '../DateDropdown';\r\n\r\nconst activityStatusOptions = [\r\n {\r\n value: \"engaged\",\r\n label: \"Engaged\",\r\n },\r\n {\r\n value: \"at risk\",\r\n label: \"At Risk\",\r\n },\r\n {\r\n value: \"neutral\",\r\n label: \"Neutral\",\r\n },\r\n];\r\n\r\nconst learningGroupOptions = [\r\n {\r\n value: \"technology\",\r\n label: \"Technology\",\r\n },\r\n {\r\n value: \"education\",\r\n label: \"Education\",\r\n },\r\n {\r\n value: \"business\",\r\n label: \"Business\",\r\n },\r\n {\r\n value: \"marketing\",\r\n label: \"Marketing\",\r\n },\r\n {\r\n value: \"medicine\",\r\n label: \"Medicine\",\r\n },\r\n {\r\n value: \"contracts\",\r\n label: \"Contracts\",\r\n },\r\n {\r\n value: \"professionals\",\r\n label: \"Professionals\",\r\n },\r\n];\r\n\r\nfunction Toolbar({ table }) {\r\n const [activityFilters, setActivityFilters] = useState([]);\r\n const [learningGroupFilters, setLearningGroupFilters] = useState([]);\r\n\r\n useEffect(() => {\r\n const column = table.getColumn(\"activityStatus\");\r\n if (activityFilters.length > 0) {\r\n column.setFilterValue(activityFilters);\r\n } else {\r\n column.setFilterValue(undefined);\r\n }\r\n }, [activityFilters, table]);\r\n\r\n useEffect(() => {\r\n const column = table.getColumn(\"learningGroup\");\r\n if (learningGroupFilters.length > 0) {\r\n column.setFilterValue(learningGroupFilters);\r\n } else {\r\n column.setFilterValue(undefined);\r\n }\r\n }, [learningGroupFilters, table]);\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n );\r\n}\r\n\r\nexport default Toolbar;\r\n","import React from \"react\";\r\n\r\nfunction ColumnHeader({ column, title }) {\r\n return \r\n
\r\n \r\n
\r\n \r\n \r\n table.getColumn(\"learner\").setFilterValue(value)\r\n }\r\n />\r\n
\r\n \r\n
\r\n \r\n
\r\n {title}
;\r\n}\r\n\r\nexport default ColumnHeader;\r\n","import React, { useMemo } from \"react\";\r\n\r\nconst DOTS = \"...\";\r\n\r\nconst range = (start, end) => {\r\n let length = end - start;\r\n return Array.from({ length }, (_, idx) => idx + start);\r\n};\r\n\r\nfunction Pagination({ table }) {\r\n const usePagination = ({\r\n totalCount,\r\n pageSize,\r\n siblingCount = 1,\r\n currentPage,\r\n }) => {\r\n const paginationRange = useMemo(() => {\r\n const totalPageCount = Math.ceil(totalCount / pageSize);\r\n const totalPageNumbers = siblingCount + 5;\r\n\r\n if (totalPageNumbers >= totalPageCount) {\r\n return range(0, totalPageCount);\r\n }\r\n\r\n const leftSiblingIndex = Math.max(currentPage - siblingCount, 1);\r\n const rightSiblingIndex = Math.min(\r\n currentPage + siblingCount,\r\n totalPageCount\r\n );\r\n\r\n const shouldShowLeftDots = leftSiblingIndex > 2;\r\n const shouldShowRightDots = rightSiblingIndex < totalPageCount - 2;\r\n\r\n const firstPageIndex = 0;\r\n const lastPageIndex = totalPageCount - 1;\r\n\r\n if (!shouldShowLeftDots && shouldShowRightDots) {\r\n let leftItemCount = 3 + 2 * siblingCount;\r\n let leftRange = range(0, leftItemCount);\r\n\r\n return [...leftRange, DOTS, lastPageIndex];\r\n }\r\n\r\n if (shouldShowLeftDots && !shouldShowRightDots) {\r\n let rightItemCount = 3 + 2 * siblingCount;\r\n let rightRange = range(\r\n totalPageCount - rightItemCount + 1,\r\n totalPageCount\r\n );\r\n return [firstPageIndex, DOTS, ...rightRange];\r\n }\r\n\r\n if (shouldShowLeftDots && shouldShowRightDots) {\r\n let middleRange = range(leftSiblingIndex, rightSiblingIndex);\r\n return [firstPageIndex, DOTS, ...middleRange, DOTS, lastPageIndex];\r\n }\r\n }, [totalCount, pageSize, siblingCount, currentPage]);\r\n\r\n return paginationRange;\r\n };\r\n\r\n const paginationRange = usePagination({\r\n totalCount: table.getFilteredRowModel().rows.length, // total number of items\r\n pageSize: table.getState().pagination.pageSize,\r\n siblingCount: 1,\r\n currentPage: table.getState().pagination.pageIndex,\r\n });\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n {/* Counter Row Page */}\r\n
\r\n \r\n
\r\n {/* End Counter Row Page */}\r\n \r\n Rows per page:\r\n {\r\n table.setPageSize(Number(e.target.value));\r\n }}\r\n >\r\n {[10, 20, 30, 40, 50].map((pageSize) => (\r\n \r\n ))}\r\n \r\n
\r\n \r\n
\r\n \r\n table.previousPage()}\r\n disabled={!table.getCanPreviousPage()}\r\n type=\"button\"\r\n className=\"pagination-prev\"\r\n >\r\n \r\n table.nextPage()}\r\n disabled={!table.getCanNextPage()}\r\n type=\"button\"\r\n className=\"pagination-next\"\r\n >\r\n \r\n
\r\n \r\n {paginationRange.map((pageNumber, index) => {\r\n if (pageNumber === DOTS) {\r\n return (\r\n table.setPageIndex(pageNumber)}\r\n >\r\n {pageNumber + 1}\r\n \r\n );\r\n })}\r\n
\r\n \r\n …\r\n
\r\n );\r\n }\r\n return (\r\n \r\n
\r\n \r\n \r\n );\r\n}\r\n\r\nexport default ExportModal;\r\n","import React from \"react\";\r\n\r\nexport default function Search({ table }) {\r\n return (\r\n \r\n
\r\n \r\n setIsActive(false)}\r\n id=\"close-export-modal\"\r\n className=\"close-modal\"\r\n >\r\n \r\n
\r\n Export Data
\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n Numbers {table.getSelectedRowModel().rows.length ?? 0} users\r\n
\r\n\r\n
\r\n \r\n setIsActive(false)}\r\n className=\"btn-border\"\r\n type=\"button\"\r\n >\r\n Discard\r\n \r\n \r\n Export\r\n \r\n
\r\n \r\n \r\n table.getColumn(\"learner\").setFilterValue(event.target.value)\r\n }\r\n />\r\n
\r\n );\r\n}\r\n","import React, { useState, useEffect } from 'react';\nimport LineTab from './LineTab';\nimport { useSelector } from 'react-redux';\nimport { getCompany } from '../../../redux/companySlice';\nimport { ManageIcon, MaterialIcon } from '../../assets/Icons';\nimport { API_ENDPOINTS, CONSTS } from '../../pages/utils/endpoints';\nimport { http_get } from '../../pages/utils/api_client';\n\nconst LMLineTab = ({ tabName, defaultTab }) => {\n const company = useSelector((state) => getCompany(state));\n const [countData, setCountData] = React.useState(0);\n\n useEffect(() => {\n http_get(API_ENDPOINTS.GET_LEARNING_MATERIALS_COUNT)\n .then((response) => {\n switch (tabName) {\n case CONSTS.WALKTHROUGHS:\n setCountData(response.data.walkthroughs_count);\n break;\n case CONSTS.PATHS:\n setCountData(response.data.paths_count);\n break;\n case CONSTS.DOCS:\n setCountData(response.data.videos_count);\n break;\n default:\n console.log(\"Not found tab name\");\n }\n })\n }, []);\n\n const tabs = [\n {\n name: (\n \r\n \r\n
\r\n \n
\n ),\n path: `/${company.slug}/${tabName}`,\n },\n {\n name: (\n {countData}
\n \n
\n ),\n path: `/${company.slug}/${tabName}/manage-access`,\n }\n ];\n\n const handleTabChange = (tabName) => {\n const tab = tabs.find((tab) => tab.name === tabName);\n window.location.href = tab.path;\n }\n\n return (\n \n
\n );\n};\n\nLineTab.defaultProps = {\n tabs: [],\n onChange: () => { },\n defaultTab: 0,\n};\n\nexport default LineTab;\n","import React from 'react';\n\nconst Loader = ({ text }) => {\n return (\n {renderTabs()}
\n \n
\n\n \n \n \n \n \n \n \n \n \n \n \n
\n );\n};\n\nLoader.defaultProps = {\n text: 'Loading...',\n};\n\nexport default Loader;\n","import React from 'react';\n\nconst MaterialCard = ({ name, type, description, metadata }) => {\n const { opens, completions, uniques, score } = metadata;\n\n return (\n {text}
\n\n
\n \n
\n );\n};\n\nexport default MaterialCard;\n","import React from 'react';\n\nconst MaterialItem = ({ name, type, description, metadata }) => {\n const { opens, completions, uniques, score } = metadata;\n\n return (\n \n
\n \n {material.name}
\n{material.description}
\n\n \n
\n );\n};\n\nexport default MaterialItem;\n","import React from 'react';\n\nconst MaterialRow = ({ name, type, description, metadata }) => {\n const { opens, completions, uniques, score } = metadata;\n\n return (\n \n
\n \n {material.name}
\n{material.description}
\n\n \n
\n );\n};\n\nexport default MaterialRow;\n","import React from 'react';\n\nconst CloseIcon = () => {\n return (\n \n
\n \n {material.name}
\n{material.description}
\n\n
\n \n );\n};\n\nModalWrapper.defaultProps = {\n size: 'lg big',\n footer: null,\n onCloseModal: () => {},\n};\n\nexport default ModalWrapper;\n","import React, { useState, useEffect, useRef } from 'react';\nimport Button from '../../atoms/button/Button';\nimport { ArrowDown, PlusIcon } from '../../assets/Icons';\nimport { ENDPOINTS } from '../../pages/utils/endpoints';\nimport CreateModal from '../create-modal/CreateModal';\nimport { Provider } from 'react-redux';\nimport { store } from '../../../redux/store';\n\nconst Navbar = ({ configColors, links, profileLinks, rootUrl, userInfo }) => {\n const [dropdown, setDropdown] = useState(false);\n const dropdownRef = useRef(null);\n\n const logoSrc = require('./default_logo.svg');\n\n const style = {\n '--background-color': configColors.backgroundColor,\n '--primary-color': configColors.primaryColor,\n '--text-color': configColors.textColor\n };\n\n const imageSrc = userInfo.avatar || require('./default_avatar.png');\n\n const toggleDropdown = () => {\n setDropdown(!dropdown);\n };\n\n useEffect(() => {\n function handleClickOutside(event) {\n if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {\n setDropdown(false);\n }\n }\n\n document.addEventListener('mousedown', handleClickOutside);\n return () => {\n document.removeEventListener('mousedown', handleClickOutside);\n };\n }, []);\n\n const isActive = (url) => {\n if (window.location.pathname === url) {\n return 'active';\n }\n };\n\n const renderLinks = (links) => {\n if (!links) return null;\n\n return links.map((link) => {\n return (\n \n \n \n \n \n \n \n
\n \n
\n \n {children}\n
\n \n {footer}\n
\n \n
\n \n
\n \n \n 
\n \n
\n - {renderLinks(links)}
\n
\n \n
\n \n {userInfo.name}\n
\n {dropdown && (\n \n
\n )}\n - \n {renderLinks(profileLinks)}\n
- \n
\n {activeBackgroundURL && (\n \n \n \n \n )}\n
\n );\n};\n\nexport default DesignCanvas;\n","import React from \"react\";\n\nexport const CongratsScore = () => {\n return (\n \n )\n}\n\nexport const AngryFace = () => {\n return (\n \n )\n}\n\nexport const SadFace = () => {\n return (\n \n )\n}\n\nexport const NeutralFace = () => {\n return (\n \n )\n}\n\nexport const HappyFace = () => {\n return (\n \n )\n}\n\nexport const ExcitedFace = () => {\n return (\n \n )\n}\n\nexport const CloseIcon = () => {\n return (\n \n )\n}","import React, {useState} from \"react\";\nimport ModalWrapper from \".././modal-wrapper/ModalWrapper\";\nimport {AngryFace, CongratsScore, ExcitedFace, HappyFace, NeutralFace, SadFace} from \"./Icons\";\nimport Button from \"../../atoms/button/Button\";\n\nconst EmojiWrapper = ({children, isActive, value, onChange}) => {\n const classes = ['un-satisfaction-score__emoji']\n if (isActive) {\n classes.push('active');\n }\n const className = classes.join(' ');\n\n const setEmoji = () => {\n onChange(value);\n }\n\n return (\n \n {children}\n
\n )\n}\n\nconst SatisfactionScore = ({ onCloseModal, onSubmitScore }) => {\n const [activeEmoji, setActiveEmoji] = useState(null);\n const emojis = [\n {emoji: \n \n
\n )\n\n return (\n \n
\n \n
\n \n Great!\n
\n You have completed this walkthrough\n
\n How much was this information useful?\n
\n {renderEmojis()}\n
\n \n \n \n {nextLabel}\n
\n );\n };\n\n const style = {\n color: configColors.text,\n backgroundColor: mcaBGColor || configColors.background\n };\n\n const stepStyle = {\n color: mcaStepHeadlineColor || configColors.text,\n fontFamily: mcaStepHeadlineFont,\n fontSize: mcaStepHeadlineFontSize\n };\n\n const titleStyle = {\n color: mcaStepDescriptionColor || configColors.text,\n fontFamily: mcaStepDescriptionFont,\n fontSize: mcaStepDescriptionFontSize\n };\n\n const instructionStyle = {\n color: mcaInstructionColor || configColors.background,\n fontSize: mcaInstructionFontSize,\n fontFamily: mcaInstructionFont\n };\n\n return (\n \n
\n );\n};\n\nexport default Screen;\n","import React, { useEffect, useState } from 'react';\nimport Button from '../../atoms/button/Button';\nimport { API_ENDPOINTS, ENDPOINTS } from '../../pages/utils/endpoints';\nimport TextInput from '../../atoms/text-input/TextInput';\nimport TextArea from '../../atoms/text-area/TextArea';\nimport DragDropUploader from '../../atoms/drag-drop-uploader/DragDropUploader';\nimport { http_get, http_put } from '../../pages/utils/api_client';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { getMaterial, updateMaterial } from '../../../redux/materialSlice';\nimport { getCompany } from '../../../redux/companySlice';\nimport { Tooltip } from 'react-tooltip';\nimport Visibility from '../visibility/Visibility';\nimport DomainSelector from '../domain-selector/DomainSelector';\nimport { materialEditPath } from '../../../utils/endpoints';\n\nconst SettingsModal = () => {\n const dispatch = useDispatch();\n const material = useSelector((state) => getMaterial(state));\n const company = useSelector((state) => getCompany(state));\n const [isButtonDisabled, setIsButtonDisabled] = useState(false);\n const [isCreating, setIsCreating] = useState(false);\n const [domainName, setDomainName] = useState();\n const material_types = {\n \"Paths\": \"paths\",\n \"Walkthrough\": \"walkthroughs\",\n \"Video\": \"videos\",\n \"Docs\": \"docs\"\n }\n\n const handleSubmit = (e) => {\n e.preventDefault();\n setIsCreating(true);\n\n const data = {\n name: material.name,\n description: material.description,\n material_type: material.material_type.toLowerCase(),\n domain_id: material.domain_id,\n slug: material.slug\n };\n\n http_put(API_ENDPOINTS.LEARNING_MATERIAL(material.id), data)\n .then((res) => {\n window.location.href = materialEditPath({\n companySlug: company.slug,\n materialType: res.data.material_type,\n materialSlug: res.data.slug\n });\n hideModal();\n })\n .finally(() => {\n setIsCreating(false);\n });\n };\n\n const hideModal = () => {\n $('#settingsModal').modal('hide');\n };\n\n const handleChange = (e) => {\n const value = e.target.value;\n const name = e.target.name;\n const label = e.target.label;\n dispatch(updateMaterial({ [name]: value }));\n setDomainName(`${label}\\/`);\n };\n\n const saveToClipboard = (data) => {\n navigator.clipboard.writeText(data);\n window.alert(\"Public url copied successfully.\");\n }\n\n return (\n \n
\n {renderActionBtn()}\n \n {name}\n
\n\n {title}\n
\n\n {RenderEscapedString(description)}\n
\n\n
\n \n \n \n \n \n \n \n
\n \n \n );\n};\n\nexport default SettingsModal;\n","import React from \"react\";\nimport { Provider } from \"react-redux\";\nimport SidenavContent from \"./SidenavContent\";\nimport { store } from \"../../../redux/store\";\n\nconst Sidenav = ({ userInfo }) => {\n\n return (\n \n
\n
\n
\n \n
\n Settings
\n\n
\n
\n
\n \n
*/}\n saveToClipboard(`${domainName}${company.slug}/${material_types[material.material_type]}/${material.slug}/published_view`)}>\n \n
\n \n
\n \n
\n \n
\n \n
\n
\n \n
\n User Access
\n\n
\n \n \n Save\n \n
\n \n
\n )\n}\n\nexport default SidenavContent;\n","export const getValue = (configColors, sectionId, titleId) => {\n if (!configColors) return configColors.primary;\n if (!configColors.config) return configColors.primary;\n const section = configColors.config.find(\n (section) => section.sectionId === sectionId\n );\n if (section === undefined) return configColors.primary;\n const title = section.values.find((title) => title.id === titleId);\n return title?.value;\n};\n\n// get cookies\nexport const getCookie = (name) => {\n const value = `; ${document.cookie}`;\n const parts = value.split(`; ${name}=`);\n if (parts.length === 2)\n return parts\n .pop()\n .split(';')\n .shift();\n};\n\n// set cookies\nexport const setCookie = (name, value, days) => {\n let expires = '';\n if (days) {\n const date = new Date();\n date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000); // 24 hours\n expires = `; expires=${date.toGMTString()}`;\n }\n document.cookie = `${name}=${value}${expires}; path=/`;\n};\n\n// delete cookies\nexport const deleteCookie = (name) => {\n document.cookie = `${name}=; Max-Age=-99999999;`;\n};\n","import React from \"react\";\n\nexport const DashboardIcon = () => {\n return (\n \n )\n}\n\nexport const AudienceIcon = () => {\n return (\n \n )\n}\n\nexport const WalkthroughIcon = () => {\n return (\n \n )\n}\n\nexport const PathsIcon = () => {\n return (\n \n )\n}\n\nexport const DocsIcon = () => {\n return (\n \n )\n}\n\nexport const FormsIcon = () => {\n return (\n \n )\n}\n\nexport const TeamIcon = () => {\n return (\n \n )\n}\n\nexport const MessageIcon = () => {\n return (\n \n )\n}\n\nexport const CustomDomainIcon = () => {\n return (\n \n )\n}\n\nexport const SettingsIcon = () => {\n return (\n \n )\n}\n\nexport const BillingIcon = () => {\n return (\n \n )\n}\n\nexport const ExpandArrow = ({ onClick, className }) => {\n return (\n \n )\n}\n\nexport const ChevonDown = () => {\n return (\n \n )\n}","import React, { useState, useEffect } from 'react';\nimport { getValue } from '../../pages/utils/tools';\n\nconst StepIndicator = ({ steps, index, onChange, configColors }) => {\n const [startIndex, setStartIndex] = useState(0);\n const currentStep = steps[index];\n const maxSteps = 8;\n\n const setCurrent = (index) => () => {\n onChange(index);\n };\n\n const tnTextColor = getValue(configColors, 'tn', 'tnTextColor');\n const tnBGColor = getValue(configColors, 'tn', 'tnBGColor');\n const style = {\n '--background-color': tnTextColor || configColors.primary,\n '--primary-color': tnBGColor || configColors.background\n };\n\n const renderStep = (step, index) => {\n const isFirst = step.id === steps[0].id;\n const currIndex = steps.findIndex((step) => step.id === currentStep.id);\n const activeClass = currIndex + 1 > index ? 'active' : '';\n\n return (\n \n
\n \n \n
\n - \n {renderMenuItems()}\n
\n {isExpanded && (\n
\n \n \n
\n )}\n \n {\n profileOpen && (\n
\n \n
\n )\n }\n {isExpanded && (\n \n Profile\n \n Sign Out\n \n
\n \n
\n )}\n {!isExpanded && (\n \n \n
\n {userInfo.name}
\n\n
\n )}\n \n \n
\n \n {index + 1}\n
\n \n );\n };\n\n const shiftIndicator = (direction) => () => {\n if (direction === \"left\" && startIndex > 0) {\n setStartIndex(startIndex - 1);\n } else if (direction === \"right\" && startIndex + maxSteps < steps.length) {\n setStartIndex(startIndex + 1);\n }\n }\n\n useEffect(() => {\n const index = steps.findIndex((step) => step.id === currentStep.id);\n if (index >= 0) {\n const currStartIndex = index - (maxSteps - 1)\n if(currStartIndex + maxSteps >= steps.length) {\n setStartIndex(steps.length - maxSteps);\n return;\n }\n setStartIndex(currStartIndex >= 0 ? (currStartIndex + 1) : 0);\n }\n }, [index]);\n\n const visibleSteps = steps.slice(startIndex, startIndex + maxSteps);\n\n return (\n \n
\n );\n};\n\nexport default StepIndicator;\n","import React from 'react'\nimport Button from '../../atoms/button/Button';\nimport { CogIcon } from '../../pages/paths/assets/icons';\nimport { useDrag, useDrop } from 'react-dnd';\n\nconst ItemTypes = {\n STEP: 'step',\n};\n\nconst EditStepItem = ({ index, className, material_type, step, edit, handleEditChange, handleCancelEdit, handleRemoveStep, moveStep }) => {\n const [{isDragging}, drag] = useDrag({\n type: ItemTypes.STEP,\n item: { index },\n collect: (monitor) => ({\n isDragging: monitor.isDragging(),\n }),\n });\n\n const [, drop] = useDrop({\n accept: ItemTypes.STEP,\n drop: (item) => {\n moveStep(item.index, index);\n },\n });\n\n return (\n \n
\n \n
\n {visibleSteps.map((step, index) => renderStep(step, startIndex + index))}\n = steps.length ? '' : 'active'}`} \n onClick={shiftIndicator(\"right\")}\n >\n
\n \n {edit ? (\n <>\n \n
\n )\n}\n\nexport default EditStepItem","import React, { useEffect, useState } from 'react';\nimport { PlusGreyIcon } from '../../assets/Icons';\nimport { useSelector, useDispatch } from 'react-redux';\nimport {\n addStep,\n allSteps,\n updateStep,\n deleteStep,\n removeLayerConfig,\n changeStepOrder\n} from '../../../redux/stepsSlice';\nimport {\n setActiveStep,\n getActiveStep,\n removeActiveLayer\n} from '../../../redux/toolsSlice';\nimport EditStepItem from './EditStepItem';\nimport { DndProvider } from 'react-dnd';\nimport { HTML5Backend } from 'react-dnd-html5-backend';\n\nconst StepSidebar = () => {\n const dispatch = useDispatch();\n const steps = useSelector((state) => allSteps(state));\n const activeStep = useSelector((state) => getActiveStep(state));\n const [editingStep, setEditingStep] = useState(null);\n const material_type = window?.location?.pathname?.split('/')?.[2];\n const handleNewStep = () => {\n dispatch(addStep({ material_type }));\n };\n\n const isActiveStep = (index) => {\n if (activeStep === undefined) return false;\n return activeStep.id === index;\n };\n\n const handleStepChange = (step) => {\n dispatch(setActiveStep(step));\n dispatch(removeActiveLayer());\n dispatch(removeLayerConfig());\n };\n\n const handleDoubleClick = (step) => {\n setEditingStep(step.id);\n };\n\n const handleEditChange = (e) => {\n const updatedStep = {\n ...activeStep,\n [e.target.name]: e.target.value\n };\n dispatch(updateStep(updatedStep));\n };\n\n const handleCancelEdit = () => {\n setEditingStep(null);\n };\n\n const handleRemoveStep = (stepId) => {\n dispatch(deleteStep(stepId));\n\n if (steps.length > 1) {\n const newActiveStep = steps.find((step) => step.id !== stepId);\n dispatch(setActiveStep(newActiveStep));\n }\n };\n\n const moveStep = (fromIndex, toIndex) => {\n dispatch(changeStepOrder({ fromIndex, toIndex })); \n }\n\n const renderSteps = () => {\n if (steps === undefined) return;\n return steps.map((step, index) => {\n const className = `step-block ${isActiveStep(step.id) ? 'active' : ''}`;\n return (\n \n \n handleRemoveStep(step.id)}\n >\n Delete\n \n
\n \n\n ) : (\n <>\n {step.name}
\n{step.title}
\n {material_type !== \"paths\" &&\n{step.description}
\n }\n \n )}\n\n
\n );\n};\n\nexport default StepSidebar;\n","import React, { useEffect, useState } from 'react';\n\nconst Tabs = ({ tabs, onChange }) => {\n const [currentTab, setCurrentTab] = useState(0);\n const isActiveTab = (index) => {\n return currentTab === index ? 'active' : '';\n };\n\n const handleChange = (index) => {\n setCurrentTab(index);\n onChange(tabs[index]);\n };\n\n useEffect(() => {\n onChange(tabs[currentTab]);\n }, []);\n\n const renderTabs = () => {\n return tabs.map((tab, index) => {\n return (\n \n
\n Steps
\n\n
\n {renderSteps()}
\n \n
\n );\n};\n\nTabs.defaultProps = {\n tabs: [],\n onChange: () => {}\n};\n\nexport default Tabs;\n","import React, { useEffect, useState } from 'react';\nimport Tools from '../tools/Tools';\nimport { ArrowRight, ThunderIcon } from '../../assets/Icons';\nimport Collaborators from '../collaborators/Collaborators';\nimport Button from '../../atoms/button/Button';\nimport Actions from '../actions/Actions';\nimport { useSelector } from 'react-redux';\nimport { allSteps } from '../../../redux/stepsSlice';\nimport { getMainConfig } from '../../../redux/stepsSlice';\nimport { API_ENDPOINTS, ENDPOINTS } from '../../pages/utils/endpoints';\nimport { http_put } from '../../pages/utils/api_client';\nimport { getCompany } from '../../../redux/companySlice';\n\nconst Toolbar = ({ id, companyName, materialName }) => {\n const company = useSelector((state) => getCompany(state));\n const steps = useSelector((state) => allSteps(state));\n const config = useSelector((state) => getMainConfig(state));\n const [isPublishing, setIsPublishing] = useState(false);\n\n const handleSave = () => {\n if (id === null) return;\n\n http_put(API_ENDPOINTS.PUT_WALKTHROUGH(id), { data: steps, config: config })\n .then((res) => {\n setTimeout(() => { }, 2000);\n })\n .catch((err) => { });\n };\n\n const handlePublish = () => {\n setIsPublishing(true);\n http_put(API_ENDPOINTS.PUBLISH_WALKTHROUGH(id))\n .then((res) => { })\n .catch((err) => { })\n .finally(() => {\n setIsPublishing(false);\n });\n };\n\n // save after 5 seconds\n useEffect(() => {\n const timeout = setTimeout(() => {\n handleSave();\n }, 1000);\n return () => {\n clearTimeout(timeout);\n };\n }, [steps, config]);\n\n return (\n \n );\n};\n\nToolbar.defaultProps = {\n id: null,\n company_name: '',\n material_name: ''\n};\n\nexport default Toolbar;\n","import React from 'react';\nimport { BrushIcon, TextInputIcon } from '../../assets/Icons';\n\nconst Brush = () => {\n return (\n {renderTabs()}
\n \n {\n const container = e.target.getStage().container();\n container.style.cursor = 'pointer';\n }}\n onMouseOut={(e) => {\n const container = e.target.getStage().container();\n container.style.cursor = 'default';\n }}\n />\n
\n );\n };\n\n return <>{renderNode()};\n};\n\n// Author version of RenderSquare\nexport const RenderDropdown = ({ stepId, layer }) => {\n const shapeRef = useRef();\n const transformerRef = useRef();\n const dispatch = useDispatch();\n const activeLayer = useSelector((state) => selectActiveLayer(state));\n const isSelected =\n activeLayer &&\n activeLayer.layerId === layer.id &&\n activeLayer.stepId === stepId;\n const [menuVisible, setMenuVisible] = useState(false);\n const contextMenuOptions = ['Delete'];\n const defaultConfig = [\n {\n layerId: layer.id,\n sectionId: 'dropdown',\n sectionTitle: 'Element > Dropdown Menu',\n values: [\n {\n id: 'placeholder',\n title: 'Placeholder',\n type: 'text',\n value: layer.placeholder || ''\n },\n {\n id: 'pFontColor',\n title: 'P. Font Color',\n type: 'color',\n value: layer.pFontColor || '#000000'\n },\n {\n id: 'textColor',\n title: 'Font Color',\n type: 'color',\n value: layer.textColor || '#000000'\n },\n {\n id: 'fill',\n title: 'BG Color',\n type: 'color',\n value: layer.fill || '#11ffff44'\n },\n {\n id: 'stroke',\n title: 'Border Color',\n type: 'color',\n value: layer.stroke || '#000000'\n },\n {\n id: 'fontSize',\n title: 'Font Size',\n type: 'px-size',\n value: layer.fontSize || 12\n }\n ]\n },\n {\n layerId: layer.id,\n sectionId: 'dropdown-options',\n sectionTitle: 'Menu Options',\n values: [\n {\n id: 'option1',\n title: 'Option 1',\n type: 'multioptions',\n value: layer.option1 || [{ order: 0, title: 'Item 1' }]\n }\n ]\n }\n ];\n\n const layerObjConfig = useSelector(\n (state) => getLayerObjConfig(state, layer),\n shallowEqual\n );\n\n useEffect(() => {\n if (layerObjConfig) {\n const newLayer = {\n ...layer,\n ...layerObjConfig\n };\n dispatch(updateLayer({ stepId: stepId, layer: newLayer }));\n }\n }, [layerObjConfig]);\n\n const renderContextMenu = () => {\n return (\n \n {\n const container = e.target.getStage().container();\n container.style.cursor = 'pointer';\n }}\n onMouseOut={(e) => {\n const container = e.target.getStage().container();\n container.style.cursor = 'default';\n }}\n />\n
\n );\n };\n\n return <>{renderNode()};\n};\n\n// Author version of RenderSquare\nexport const RenderHotSpot = ({ stepId, layer }) => {\n const shapeRef = useRef();\n const transformerRef = useRef();\n const dispatch = useDispatch();\n const activeLayer = useSelector((state) => selectActiveLayer(state));\n const isSelected =\n activeLayer &&\n activeLayer.layerId === layer.id &&\n activeLayer.stepId === stepId;\n const [menuVisible, setMenuVisible] = useState(false);\n const contextMenuOptions = ['Delete'];\n const defaultConfig = [\n {\n layerId: layer.id,\n sectionId: 'hotspot',\n sectionTitle: 'Element > HotSpot',\n values: [\n {\n id: 'fill',\n title: 'BG Color',\n type: 'color',\n value: layer.fill || '#ffffff'\n },\n {\n id: 'stroke',\n title: 'Border Color',\n type: 'color',\n value: layer.stroke || '#000000'\n },\n {\n id: 'strokeWidth',\n title: 'Border Weight',\n type: 'px-size',\n value: layer.strokeWidth || 0\n },\n {\n id: 'cornerRadius',\n title: 'Border Radius',\n type: 'px-size',\n value: layer.cornerRadius || 0\n }\n ]\n }\n ];\n\n const layerObjConfig = useSelector(\n (state) => getLayerObjConfig(state, layer),\n shallowEqual\n );\n\n useEffect(() => {\n if (layerObjConfig) {\n const newLayer = {\n ...layer,\n ...layerObjConfig\n };\n dispatch(updateLayer({ stepId: stepId, layer: newLayer }));\n }\n }, [layerObjConfig]);\n\n const renderContextMenu = () => {\n return (\n \n
\n );\n};\n\nexport default Image;\n","import React, { useEffect, useRef } from 'react';\nimport { LineIcon } from '../../assets/Icons';\nimport { shallowEqual, useDispatch, useSelector } from 'react-redux';\nimport {\n setActiveTool,\n selectActiveTool,\n selectActiveLayer,\n setActiveLayer,\n removeActiveLayer\n} from '../../../redux/toolsSlice';\nimport { Transformer, Rect, Group, Shape } from 'react-konva';\nimport {\n updateLayer,\n removeLayerConfig,\n setLayerConfig,\n getLayerObjConfig,\n removeLayer\n} from '../../../redux/stepsSlice';\n\nconst Line = () => {\n const dispatch = useDispatch();\n const activeTool = useSelector((state) => selectActiveTool(state));\n\n const setActive = () => {\n dispatch(setActiveTool('line'));\n };\n\n return (\n