)\n let [state, setStateImpl] = React.useState(router.state);\n let { v7_startTransition } = future || {};\n let setState = React.useCallback(\n (newState: RouterState) => {\n v7_startTransition && startTransitionImpl\n ? startTransitionImpl(() => setStateImpl(newState))\n : setStateImpl(newState);\n },\n [setStateImpl, v7_startTransition]\n );\n React.useLayoutEffect(() => router.subscribe(setState), [router, setState]);\n\n let navigator = React.useMemo((): Navigator => {\n return {\n createHref: router.createHref,\n encodeLocation: router.encodeLocation,\n go: (n) => router.navigate(n),\n push: (to, state, opts) =>\n router.navigate(to, {\n state,\n preventScrollReset: opts?.preventScrollReset,\n }),\n replace: (to, state, opts) =>\n router.navigate(to, {\n replace: true,\n state,\n preventScrollReset: opts?.preventScrollReset,\n }),\n };\n }, [router]);\n\n let basename = router.basename || \"/\";\n\n let dataRouterContext = React.useMemo(\n () => ({\n router,\n navigator,\n static: false,\n basename,\n }),\n [router, navigator, basename]\n );\n\n // The fragment and {null} here are important! We need them to keep React 18's\n // useId happy when we are server-rendering since we may have a ;\n `;\n\n const initCode = `\n /** INITIALIZE USERTIP CODE SNIPPET HERE **/\n let config = {};\n // add additional meta data of visitor to record\n let visitorMetaData = {\n //unique_id: user.id, // visitor unique id, must be unique\n //email: user.email, // user’s email (optional)\n //role: user.role, // user role or title\n //fname: user.fname, // first name\n //lname: user.lname, //last name\n //department: user.department, // department user may belong to\n };\n\n if (window.Usertip) {\n window.Usertip.init(config, visitorMetaData);\n }\n /** END INITIALIZE USERTIP CODE SNIPPET HERE **/\n `;\n\n const reactExample = `\n useEffect(() => {\n /** Ensure that the user object/data is valid **/\n if (user) {\n /** INITIALIZE USERTIP CODE SNIPPET HERE **/\n let config = {};\n // add additional meta data of visitor to record\n let visitorMetaData = {\n unique_id: user.id, // visitor unique id, must be unique\n //email: user.email, // user’s email (optional)\n //role: user.role, // user role or title\n //fname: user.fname, // first name\n //lname: user.lname, //last name\n //department: user.department, // department user may belong to\n };\n \n if (window.Usertip) {\n window.Usertip.init(config, visitorMetaData);\n }\n /** END INITIALIZE USERTIP CODE SNIPPET HERE **/\n };\n }, [user]);\n `;\n return (\n <>\n \n If your website is a single page application, and using technologies\n like React, Angular or Vue, we would recommend that you install the\n Usertip code snippet with this method. You can copy the code below and\n share it with your engineering team.\n
\n
\n \n
\n How to initialize (start) Usertip in your Web Application.
\n
\n \n
\n \n For example if your application is built using React.js, you will call{\" \"}\n window.Usertip.init in a useEffect (see below for code\n example). If you need to, you can also add metadata for your visitors\n which can be used to filter a user by email (for example).\n
\n
\n \n
\n \n NOTE: config && visitorMetaData are REQUIRED{\" \"}\n parameters when calling window.Usertip.init\n
\n \n );\n};\n\nexport default ComponentInstallationSPA;\n","import React from \"react\";\nimport ComponentCodeBlock from \"./ComponentCodeBlock\";\n\nconst ComponentInstallationWPA = ({ api_key }: { api_key: string }) => {\n const initScript = `\n ;\n `;\n return (\n <>\n \n If your website is an MPA or a server-side rendering MPA, we would\n recommend installing Usertip by adding the JavaScript code snippet below\n to every page that you want Usertip to be displayed on. The Usertip\n initialization code will be added together with this snippet as well.\n You can copy the code below and share it with your engineering team.\n
\n
\n \n If you need to, you can also add metadata for your visitors which can be\n used to filter a user by email (for example).\n
\n
\n \n
\n \n Once the snippet has been added, deploy the changes on your environment\n and the Usertip Code Snippet will be automatically installed and running\n on your website.\n
\n \n );\n};\n\nexport default ComponentInstallationWPA;\n","import _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nimport _extends from \"@babel/runtime/helpers/esm/extends\";\nconst _excluded = [\"className\", \"component\", \"disableGutters\", \"fixed\", \"maxWidth\", \"classes\"];\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport { unstable_capitalize as capitalize, unstable_composeClasses as composeClasses, unstable_generateUtilityClass as generateUtilityClass } from '@mui/utils';\nimport useThemePropsSystem from '../useThemeProps';\nimport systemStyled from '../styled';\nimport createTheme from '../createTheme';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst defaultTheme = createTheme();\nconst defaultCreateStyledComponent = systemStyled('div', {\n name: 'MuiContainer',\n slot: 'Root',\n overridesResolver: (props, styles) => {\n const {\n ownerState\n } = props;\n return [styles.root, styles[`maxWidth${capitalize(String(ownerState.maxWidth))}`], ownerState.fixed && styles.fixed, ownerState.disableGutters && styles.disableGutters];\n }\n});\nconst useThemePropsDefault = inProps => useThemePropsSystem({\n props: inProps,\n name: 'MuiContainer',\n defaultTheme\n});\nconst useUtilityClasses = (ownerState, componentName) => {\n const getContainerUtilityClass = slot => {\n return generateUtilityClass(componentName, slot);\n };\n const {\n classes,\n fixed,\n disableGutters,\n maxWidth\n } = ownerState;\n const slots = {\n root: ['root', maxWidth && `maxWidth${capitalize(String(maxWidth))}`, fixed && 'fixed', disableGutters && 'disableGutters']\n };\n return composeClasses(slots, getContainerUtilityClass, classes);\n};\nexport default function createContainer(options = {}) {\n const {\n // This will allow adding custom styled fn (for example for custom sx style function)\n createStyledComponent = defaultCreateStyledComponent,\n useThemeProps = useThemePropsDefault,\n componentName = 'MuiContainer'\n } = options;\n const ContainerRoot = createStyledComponent(({\n theme,\n ownerState\n }) => _extends({\n width: '100%',\n marginLeft: 'auto',\n boxSizing: 'border-box',\n marginRight: 'auto',\n display: 'block'\n }, !ownerState.disableGutters && {\n paddingLeft: theme.spacing(2),\n paddingRight: theme.spacing(2),\n // @ts-ignore module augmentation fails if custom breakpoints are used\n [theme.breakpoints.up('sm')]: {\n paddingLeft: theme.spacing(3),\n paddingRight: theme.spacing(3)\n }\n }), ({\n theme,\n ownerState\n }) => ownerState.fixed && Object.keys(theme.breakpoints.values).reduce((acc, breakpointValueKey) => {\n const breakpoint = breakpointValueKey;\n const value = theme.breakpoints.values[breakpoint];\n if (value !== 0) {\n // @ts-ignore\n acc[theme.breakpoints.up(breakpoint)] = {\n maxWidth: `${value}${theme.breakpoints.unit}`\n };\n }\n return acc;\n }, {}), ({\n theme,\n ownerState\n }) => _extends({}, ownerState.maxWidth === 'xs' && {\n // @ts-ignore module augmentation fails if custom breakpoints are used\n [theme.breakpoints.up('xs')]: {\n // @ts-ignore module augmentation fails if custom breakpoints are used\n maxWidth: Math.max(theme.breakpoints.values.xs, 444)\n }\n }, ownerState.maxWidth &&\n // @ts-ignore module augmentation fails if custom breakpoints are used\n ownerState.maxWidth !== 'xs' && {\n // @ts-ignore module augmentation fails if custom breakpoints are used\n [theme.breakpoints.up(ownerState.maxWidth)]: {\n // @ts-ignore module augmentation fails if custom breakpoints are used\n maxWidth: `${theme.breakpoints.values[ownerState.maxWidth]}${theme.breakpoints.unit}`\n }\n }));\n const Container = /*#__PURE__*/React.forwardRef(function Container(inProps, ref) {\n const props = useThemeProps(inProps);\n const {\n className,\n component = 'div',\n disableGutters = false,\n fixed = false,\n maxWidth = 'lg'\n } = props,\n other = _objectWithoutPropertiesLoose(props, _excluded);\n const ownerState = _extends({}, props, {\n component,\n disableGutters,\n fixed,\n maxWidth\n });\n\n // @ts-ignore module augmentation fails if custom breakpoints are used\n const classes = useUtilityClasses(ownerState, componentName);\n return (\n /*#__PURE__*/\n // @ts-ignore theme is injected by the styled util\n _jsx(ContainerRoot, _extends({\n as: component\n // @ts-ignore module augmentation fails if custom breakpoints are used\n ,\n ownerState: ownerState,\n className: clsx(classes.root, className),\n ref: ref\n }, other))\n );\n });\n process.env.NODE_ENV !== \"production\" ? Container.propTypes /* remove-proptypes */ = {\n children: PropTypes.node,\n classes: PropTypes.object,\n className: PropTypes.string,\n component: PropTypes.elementType,\n disableGutters: PropTypes.bool,\n fixed: PropTypes.bool,\n maxWidth: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl', false]), PropTypes.string]),\n sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])\n } : void 0;\n return Container;\n}","'use client';\n\nimport PropTypes from 'prop-types';\nimport { createContainer } from '@mui/system';\nimport capitalize from '../utils/capitalize';\nimport styled from '../styles/styled';\nimport useThemeProps from '../styles/useThemeProps';\nconst Container = createContainer({\n createStyledComponent: styled('div', {\n name: 'MuiContainer',\n slot: 'Root',\n overridesResolver: (props, styles) => {\n const {\n ownerState\n } = props;\n return [styles.root, styles[`maxWidth${capitalize(String(ownerState.maxWidth))}`], ownerState.fixed && styles.fixed, ownerState.disableGutters && styles.disableGutters];\n }\n }),\n useThemeProps: inProps => useThemeProps({\n props: inProps,\n name: 'MuiContainer'\n })\n});\nprocess.env.NODE_ENV !== \"production\" ? Container.propTypes /* remove-proptypes */ = {\n // ----------------------------- Warning --------------------------------\n // | These PropTypes are generated from the TypeScript type definitions |\n // | To update them edit the d.ts file and run \"yarn proptypes\" |\n // ----------------------------------------------------------------------\n /**\n * @ignore\n */\n children: PropTypes.node,\n /**\n * Override or extend the styles applied to the component.\n */\n classes: PropTypes.object,\n /**\n * The component used for the root node.\n * Either a string to use a HTML element or a component.\n */\n component: PropTypes.elementType,\n /**\n * If `true`, the left and right padding is removed.\n * @default false\n */\n disableGutters: PropTypes.bool,\n /**\n * Set the max-width to match the min-width of the current breakpoint.\n * This is useful if you'd prefer to design for a fixed set of sizes\n * instead of trying to accommodate a fully fluid viewport.\n * It's fluid by default.\n * @default false\n */\n fixed: PropTypes.bool,\n /**\n * Determine the max-width of the container.\n * The container width grows with the size of the screen.\n * Set to `false` to disable `maxWidth`.\n * @default 'lg'\n */\n maxWidth: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl', false]), PropTypes.string]),\n /**\n * The system prop that allows defining system overrides as well as additional CSS styles.\n */\n sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])\n} : void 0;\nexport default Container;","import React from \"react\";\n\ninterface Props {\n /** This is for sidebar item label */\n label?: string;\n /** This is for sidebar item icon */\n icon?: JSX.Element;\n /** This is for grouping the radio input to one group (set the same name to make the style working) */\n name: string;\n /** This is for set function when sidebarItem is clicked */\n onClick?: () => void;\n}\n\nconst SidebarItem = ({ label, icon, name, onClick }: Props) => {\n /** This const is for parent container style */\n const statusClass: string =\n \"w-full my-1 h-9 py-2 px-[0.625em] rounded-[2.5em] flex items-center gap-[0.625em] cursor-pointer relative group\";\n /** This const is for icon style */\n const iconClass: string =\n \"fill-current text-default-neutral-60 group-hover:text-default-neutral-100 group-active:text-default-neutral-100 peer-checked/radio:text-default-primary\";\n /** This const is for background style */\n const bgClass: string =\n \"w-full h-full absolute left-0 -z-10 peer-checked/radio:bg-default-neutral-10 rounded-[2.5em] bg-default-neutral-20 peer-checked/radio:drop-shadow-[0_4px_4px_rgba(0,0,0,0.2)] group-hover:bg-default-primary-lightest group-hover:drop-shadow-[0_4px_4px_rgba(0,0,0,0.2)] group-active:bg-[#E4DDFC] group-active:drop-shadow-[0_4px_4px_rgba(0,0,0,0.2)]\";\n /** This const is for label style */\n const labelClass: string =\n \"font-medium text-default-neutral-60 peer-checked/radio:text-default-neutral-100 group-hover:text-default-neutral-100 group-active:text-default-neutral-100\";\n\n return (\n \n
\n
\n
\n {!icon ? (\n
\n \n \n ) : (\n icon\n )}\n \n
{label}
\n
\n
{\n e.stopPropagation();\n if (avatarOnClick) {\n avatarOnClick();\n }\n }}\n >\n \n \n *
\n *
Drag 'n' drop some files here, or click to select files
\n *
\n *
\n *
Drag and drop some files here, or click to select files
\n *
Mass Import
\n\n \n Download our \"Mass Upload Template\" to fill up your bulk email entries\n and upload your entire list in one sweep.\n
\n\n \n }\n iconLeft={true}\n />\n
\n\n \n \n \n {isDragAccept && (\n <>\n
\n Seems like you have the right *.csv file format.\n
\n \n )}\n {isDragReject && (\n <>\n
\n The file format seems to be invalid for upload.\n
\n \n )}\n {!isDragActive && (\n <>\n
\n Drag & drop your Mass Import Template, or click to select your\n upload\n
\n
\n (Only *.csv file format with a maximum of {maxLimitRowCap} email\n rows will be accepted.)\n
\n \n )}\n
\n \n \n
\n \n );\n};\n\nexport default ComponentAddUsersMassImport;\n","import React, { useEffect, useState } from \"react\";\n\nimport { TextField, Chip } from \"@mui/material\";\nimport { Button } from \"usertip-component-library\";\n\nimport DriveFolderUpload from \"@mui/icons-material/DriveFolderUpload\";\n\nimport { validateEmailFormat } from \"../../utility/functions/validation\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport { setTabsOrgSuccess } from \"../../store/reducers/reducerInviteQuickAccess\";\nimport { useNavigate } from \"react-router-dom\";\n\nconst ComponentAddUsersEmailsToChips = ({\n orgID,\n onInviteUserToOrg,\n displayUserRole,\n\n usersEmails,\n setUsersEmails,\n email,\n setEmail,\n emailError,\n setEmailError,\n\n handleHideModal,\n\n handleMassImportClick,\n\n resetUsersEmailsKeys,\n\n resetEmailErrorHandler,\n resetEmailHandler,\n}) => {\n // to disable confirm button if the role not selected\n const isEmpty = useSelector((state) => state.inviteQuick.isEmpty);\n // state from reducerOrganization to decide invite / add members success or failed\n const inviteFailed = useSelector((state) => state.org.isInviteFailed);\n // console.log(\"------\", inviteFailed);\n // console.log(displayUserRole);\n\n const dispatch = useDispatch();\n const [confirmBtnDisabled, setConfirmBtnDisabled] = useState(true);\n\n const emailDefaultInfoText = \"*Hit to add email to list\";\n const emailDefaultInvalidFormatText = \"*Invalid email format\";\n\n // User email field change handler.\n const emailChangeHandler = (e) => {\n const value = e.target.value;\n\n setEmail(value.toLowerCase());\n if (value.trim()) {\n resetEmailErrorHandler();\n }\n };\n\n // Set user email input field warning.\n const setEmailErrorHandler = (message) => {\n setEmailError({ option: true, message });\n };\n\n // Validate email input field.\n const validateEmailField = () => {\n const isEmpty = !email.trim();\n const isValidated = validateEmailFormat(email.trim());\n if (isEmpty) {\n setEmailErrorHandler(emailDefaultInfoText);\n } else if (!isValidated) {\n setEmailErrorHandler(emailDefaultInvalidFormatText);\n } else {\n resetEmailErrorHandler();\n }\n\n return !isEmpty && isValidated;\n };\n\n const navigate = useNavigate();\n\n // Create walkthrough form submission handler\n const handleAddNewUserRoleToOrgFormSubmission = (e) => {\n e.preventDefault();\n e.stopPropagation();\n\n // Checks if list of emails contains New Email(s) not in database\n\n let role = null;\n // If New Email(s) Not in database Exists, send new user registration invites through email & Add the emails to the list\n // dispatch(setTabsOrgSuccess(number)) is to set selected tabs after navigate to organization page\n if (displayUserRole === \"Admin\") {\n role = \"admin\";\n dispatch(setTabsOrgSuccess(0));\n } else if (displayUserRole === \"Builder\") {\n role = \"builder\";\n dispatch(setTabsOrgSuccess(1));\n } else if (displayUserRole === \"Viewer\") {\n role = \"viewer\";\n dispatch(setTabsOrgSuccess(2));\n }\n\n // If the email array is not empty\n if (usersEmails && usersEmails.length > 0) {\n let finalEmailList = [];\n for (let i = 0; i < usersEmails.length; i++) {\n // Forward each new user email invite manually one-by-one, as server does not handle bulk invites at the moment\n // Format to send: orgID, email, role, mfa\n finalEmailList.push(usersEmails[i].userEmail);\n }\n const orgData = {\n orgID: orgID,\n emails: finalEmailList,\n role: role,\n };\n dispatch(onInviteUserToOrg(orgData));\n // dispatch(setTabsOrgSuccess(selectTabsOrg));\n }\n // handleHideModal();\n };\n\n // to handle the behavour when the invite / add members success or failed\n if (inviteFailed === true) {\n console.log(\"INVITE FAILED +++++\");\n } else if (inviteFailed === false) {\n console.log(\"INVITE SUCCESS +++++\");\n setTimeout(() => {\n handleHideModal();\n navigate(\"/organization\");\n }, 500);\n }\n\n // Checks if array list is empty, if true, disable Confirm btn\n const verifyIfArrayIsEmptyToDisableConfirmBtn = (usersEmailsArray) => {\n if (usersEmailsArray.length > 0) {\n setConfirmBtnDisabled(false);\n } else {\n setConfirmBtnDisabled(true);\n }\n };\n\n // Checks if new email already exists in array list\n const verifyIfEmailExistsInUsersEmails = () => {\n for (let i = 0; i < usersEmails.length; i++) {\n // If email already exists in the current arraylist\n if (usersEmails[i].userEmail.includes(email)) {\n return true;\n }\n }\n return false;\n };\n\n const handleAddNewEmail = (e) => {\n // Only process add email from textfield when \"Enter\" key is pressed\n if (e.key === \"Enter\") {\n // Execute check to valid email before adding to array list\n if (validateEmailField()) {\n // If email already exists on list, inform to try new email\n if (verifyIfEmailExistsInUsersEmails()) {\n setEmailErrorHandler(\n \"*Email already added to list. Please try again.\"\n );\n }\n // If email does not exist, add to array list\n else {\n // Reset array list keys count\n resetUsersEmailsKeys();\n\n // Add new email to array list usersEmails if verified email is of valid format\n usersEmails.push({\n key: usersEmails.length,\n userEmail: email,\n });\n\n // Clears textfield after successful add\n resetEmailHandler();\n // Checks if array list is empty and whether to disable Confirm btn. Verify with usersEmails as the active array to check\n verifyIfArrayIsEmptyToDisableConfirmBtn(usersEmails);\n }\n }\n }\n };\n\n const handleDeleteSelectedEmail = (emailSelectedToDelete) => () => {\n // Remove selected email to delete\n const newUsersEmailsAfterDeletion = usersEmails.filter(\n (emailToDelete) => emailToDelete.key !== emailSelectedToDelete.key\n );\n setUsersEmails(newUsersEmailsAfterDeletion);\n\n // Reset array list keys count\n resetUsersEmailsKeys();\n // Checks if array list is empty and whether to disable Confirm btn. Verify with newUsersEmailsAfterDeletion as apparently the original array will not be deducted to zero, and it will only work when using newArray newUsersEmailsAfterDeletion\n verifyIfArrayIsEmptyToDisableConfirmBtn(newUsersEmailsAfterDeletion);\n };\n\n return (\n <>\n \n }\n iconLeft={true}\n />\n
\n\n \n
\n
\n {usersEmails.map((inputEmail) => {\n let icon;\n\n return (\n - \n \n
\n );\n })}\n
\n
\n\n
\n
\n\n {usersEmails.length > 0 && (\n
\n Total Emails: {usersEmails.length}\n
\n )}\n
\n
\n {inviteFailed\n ? `Error: Cannot add ${displayUserRole} as members`\n : \"\"}\n \n\n
\n \n \n
\n
\n {!showMassImport ? (\n
\n
\n Add new members\n \n x\n \n
\n
\n
\n \n }\n label={\"Admin\"}\n value={\"Admin\"}\n />\n }\n label={\"Builder\"}\n value={\"Builder\"}\n />\n }\n label={\"Viewer\"}\n value={\"Viewer\"}\n />\n \n
\n
\n \n
\n
\n ) : (\n
\n setShowMassImport(false)}\n setModalPageState=\"MassImport\"\n setShowAlertSnackbar={setShowAlertSnackbar}\n setShowAlertSnackbarMsg={setShowAlertSnackbarMsg}\n // @ts-ignore\n showAlertSnackbarMsg={showAlertSnackbarMsg}\n downloadCSVFile={downloadCSVFile}\n />\n
\n )}\n
\n
\n
dispatch(showHideNavbar(false))}\n >\n \n Usertip
\n \n \n\n