\n {hasOperatorConnect && (\n \n {\n setView('Operator Connect');\n addProvisionedServiceHandler();\n }}\n description=\"Authorize your Microsoft Teams tenancy to connect using Operator Connect API endpoints. This is only available to approved partners\"\n title={'Operator Connect'}\n image={{\n alt: 'Basic template image',\n image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/Microsoft_Office_Teams_%282018%E2%80%93present%29.svg/800px-Microsoft_Office_Teams_%282018%E2%80%93present%29.svg.png',\n title: 'Basic',\n style: {\n maxWidth: 175,\n width: '100%',\n padding: 10,\n marginLeft: 'auto',\n marginRight: 'auto',\n display: 'block',\n },\n }}\n divStyle={{padding: 25}}\n />\n
\n )}\n \n {\n setView('APP_AUTH');\n }}\n APP_AUTH\n title={'Direct Routing'}\n description=\"Authorize TCAP access to your Microsoft 365 tenancy. Requires a global administrator account to authorize the application.\"\n image={{\n alt: 'Basic template image',\n image: Microsoft,\n title: 'Basic',\n style: {\n width: '100%',\n padding: 10,\n paddingTop: 80,\n },\n }}\n />\n
\n \n \n );\n }\n}\n","import { useSelector, useDispatch } from 'react-redux';\nimport {\n Modal,\n ModalOverlay,\n ModalContent,\n ModalHeader,\n ModalFooter,\n ModalBody,\n} from '@/components/v4';\nimport {\n ChakraProvider,\n Box,\n useDisclosure,\n Spinner,\n // Button as ChakraButton,\n forwardRef,\n} from '@chakra-ui/react';\n\nimport { Button as ChakraButton } from 'components/v4';\n\nimport Error from '../maintenance/Error';\nimport walkthroughIds from './walkthroughIds';\nimport chakratheme from '@/chakratheme';\nimport { useLocation } from 'react-router-dom';\n\nexport const CANNOT_DELETE_MODE = 'Can not Delete';\nexport const LOADING_DELETE_MODE = 'Verifying for Deleting';\n\nconst Button = forwardRef((props, ref) => (\n \n));\n\n/*\n * Modal redux actions opens a pop up unlike edit form that opens\n * a new page, refactor into functional component with conditional rendering\n */\nconst ReduxModal = (props) => {\n const { modalSize, modalFooter, modalContent, modalTitle, modalButtons } =\n props;\n\n const { loading, restError, uploading, show, mode } = useSelector(\n (state) => {\n return { ...state.modal };\n },\n );\n\n const { darkMode } = useSelector((state) => state.settings);\n const { modal } = walkthroughIds;\n const dispatch = useDispatch();\n const { onClose } = useDisclosure();\n const onModalSubmit = () => {\n dispatch({ type: 'ON_MODAL_SUBMIT', payload: true });\n };\n const onHide = () => {\n dispatch({\n type: 'RESET_MODAL',\n });\n };\n const handleClose = () => {\n onClose();\n onHide();\n };\n const submitButton = () => {\n if (modalButtons) {\n return { ...modalButtons };\n }\n switch (mode) {\n case 'Delete':\n return (\n \n Delete\n \n );\n case 'Copy':\n return (\n \n );\n case 'Add':\n return (\n \n );\n case 'Convert':\n return (\n \n );\n case 'View':\n return null;\n case CANNOT_DELETE_MODE:\n return null;\n case LOADING_DELETE_MODE:\n return null;\n case 'Info':\n return null;\n default:\n return (\n \n );\n }\n };\n return (\n \n \n \n \n {modalTitle}\n \n {\n e.preventDefault();\n onModalSubmit();\n }}\n >\n {restError ? (\n \n ) : null}\n {!loading &&\n !uploading &&\n mode !== LOADING_DELETE_MODE ? (\n <>\n {' '}\n {modalContent}\n {modalFooter}\n \n \n Close\n \n {submitButton()}\n \n \n ) : (\n \n )}\n \n \n \n \n \n );\n};\n\nexport default ReduxModal;\n","import React from 'react';\nimport { Row, Col } from 'react-bootstrap';\nimport { TextField } from '@material-ui/core';\nimport {Box} from '@mui/material';\nimport { useSelector, useDispatch } from 'react-redux';\nimport { PARTNER } from './BillingForm';\n\nimport walkthroughIds from '../walkthroughIds';\n/*\n * Component for custom attributes in regards to companies, parters and wholesalers\n */\nconst EntityCustomFieldsForm = ({ mode, disabled = false }) => {\n const dispatch = useDispatch();\n\n // state access\n const { state, stateError } = useSelector((state) => {\n return { ...state.modal };\n });\n const { currentScope } = useSelector((state) => {\n return { ...state.login };\n });\n const isPartner = mode === PARTNER;\n\n // return the custom fields form\n return (\n \n {isPartner\n ? ['pAttribute1', 'pAttribute2', 'pAttribute3'].map(\n (v, idx) => (\n \n \n {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n [v]: e.target.value,\n },\n });\n }}\n data-walkthroughid={`${walkthroughIds.custom\n .ufCustomAttribute\n }/${idx + 1}`}\n />{' '}\n \n
\n ),\n )\n : ['attribute1', 'attribute2', 'attribute3'].map((v, idx) => (\n \n \n {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n [v]: e.target.value,\n },\n });\n }}\n data-walkthroughid={`${walkthroughIds.custom.ufCustomAttribute\n }/${idx + 1}`}\n />{' '}\n \n
\n ))}\n\n {isPartner\n ? \n {currentScope > 40 && \n {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n ['pServiceCountries']: e.target.value,\n },\n });\n }}\n />{' '}\n }\n
\n :\n // eventhough shared between wholesaler and company\n // wholesaler menu option is not visible therefore partner and above to view companies\n \n {currentScope > 20 &&\n {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n ['serviceCountries']: e.target.value,\n },\n });\n }}\n />{' '}\n }\n
\n }\n \n );\n};\n\nexport default EntityCustomFieldsForm;\n","export const initialState = {\n // changes to att value will be saved in services\n services: [],\n originalData: [],\n attributesErrors: [],\n};\n\nexport const useServicesReducer = (state = initialState, action) => {\n switch (action.type) {\n // set services against a user\n case 'ADD_SERVICES': {\n return {\n ...state,\n services: action.payload,\n originalData: action.payload\n };\n }\n // update value of an attribute by index and service index\n case 'UPDATE_ATT_VALUE': {\n return {\n ...state,\n services: state.services.map((service, sIndex) => {\n if (sIndex !== action.serviceIndex) {\n return service;\n }\n return {\n ...service,\n attributes: service.attributes.map(\n (attribute, aIndex) => {\n if (aIndex !== action.attIndex) {\n return attribute;\n }\n return {\n ...attribute,\n value: action.payload,\n };\n },\n ),\n };\n }),\n };\n }\n // update original data after successfully save attribute\n case 'UPDATE_OG_ATT_VALUE': {\n return {\n ...state,\n originalData: state.originalData.map((service, sIndex) => {\n if (sIndex !== action.serviceIndex) {\n return service;\n }\n return {\n ...service,\n attributes: service.attributes.map(\n (attribute, aIndex) => {\n if (aIndex !== action.attIndex) {\n return attribute;\n }\n return {\n ...attribute,\n value: action.payload,\n };\n },\n ),\n };\n }),\n };\n }\n // add a attribute error if does not exist\n case 'ADD_ATT_ERROR': {\n if (\n !state.attributesErrors.some(\n (obj) =>\n obj.id == action.index &&\n obj.serviceIndex == action.serviceIndex,\n )\n ) {\n return {\n ...state,\n attributesErrors: [\n ...state.attributesErrors,\n {\n ...action.payload,\n },\n ],\n };\n } else return { ...state };\n }\n // remove/override attribute error\n case 'UPDATE_ATT_ERROR': {\n if (\n state.attributesErrors.some(\n (obj) =>\n obj.id == action.index &&\n obj.serviceIndex == action.serviceIndex,\n )\n ) {\n return {\n ...state,\n attributesErrors: state.attributesErrors.filter(\n (obj) =>\n obj.id !== action.index ||\n obj.serviceIndex !== action.serviceIndex,\n ),\n };\n } else return { ...state };\n }\n default:\n return state;\n }\n};\n","import { createContext, useContext, useMemo, useReducer } from 'react';\nimport { initialState, useServicesReducer } from './useServicesReducer';\n\nexport const ServicesContext = createContext(null);\n\nexport const ServicesProvider = (props) => {\n const [state, dispatch] = useReducer(\n useServicesReducer,\n initialState,\n );\n const { services, originalData, attributesErrors } = state;\n\n const value = useMemo(\n () => ({\n dispatch,\n originalData,\n services,\n attributesErrors,\n }),\n [dispatch, services, originalData, attributesErrors],\n );\n\n return ;\n};\n\nexport const useServices = () => {\n const context = useContext(ServicesContext);\n\n if (context === undefined) {\n throw new Error(\n `useServices must be used within a ServicesProvider`,\n );\n }\n\n return context;\n};\n","const style = {\n fieldContainer: {marginBottom: 3},\n label: {margin: '0 0 3px'},\n inputField: {\n borderRadius: '4px',\n },\n};\n\nexport default style;\n","import { isEmpty } from 'lodash';\nimport { useServices } from '../ServicesContext';\n\nexport default function useServicesAttributesValidation() {\n const { dispatch } = useServices();\n\n const handleAttributeError = (index, message, serviceIndex) => {\n dispatch({\n type: 'ADD_ATT_ERROR',\n index: index,\n serviceIndex: serviceIndex,\n payload: {\n id: index,\n serviceIndex: serviceIndex,\n isError: true,\n message: message,\n },\n });\n };\n\n const removeAttributeError = (index, serviceIndex) => {\n dispatch({\n type: 'UPDATE_ATT_ERROR',\n index: index,\n serviceIndex: serviceIndex,\n });\n };\n\n // update services data attribute value on change input\n const handleAttributeChange = (value, attIndex, serviceIndex) => {\n dispatch({\n type: 'UPDATE_ATT_VALUE',\n serviceIndex: serviceIndex,\n attIndex: attIndex,\n // value is empty string, set to null\n payload: isEmpty(value) ? null : value,\n });\n };\n\n // update original data attribute value upon save successful\n const handleOGAttributeChange = (value, attIndex, serviceIndex) => {\n dispatch({\n type: 'UPDATE_OG_ATT_VALUE',\n serviceIndex: serviceIndex,\n attIndex: attIndex,\n // value is empty string, set to null\n payload: isEmpty(value) ? null : value,\n });\n };\n\n return {\n handleAttributeError,\n removeAttributeError,\n handleAttributeChange,\n handleOGAttributeChange\n };\n}\n","import { chakraSelectDarkMode, defaultChakraSelectStyle } from '@/constants';\nimport { InfoIcon } from '@chakra-ui/icons';\nimport {\n Badge,\n Box,\n FormControl,\n FormErrorMessage,\n FormHelperText,\n FormLabel,\n Tooltip,\n} from '@chakra-ui/react';\nimport { Select } from 'chakra-react-select';\nimport { isEqual } from 'lodash';\nimport { useSelector } from 'react-redux';\nimport { useServices } from '../ServicesContext';\nimport style from './styles';\nimport useServicesAttributesValidation from './useServicesAttributesValidation';\n\nexport default function BoolAttribute({\n attribute,\n index,\n serviceIndex,\n requiredScope,\n isBusy,\n}) {\n const options = [\n {\n value: '0',\n label: 'False',\n },\n {\n value: '1',\n label: 'True',\n },\n ];\n const validation = JSON.parse(attribute.definedAttributeValidationType);\n const { removeAttributeError, handleAttributeChange } =\n useServicesAttributesValidation();\n const { attributesErrors, services } = useServices();\n const { darkMode } = useSelector((state) => state.settings);\n const chakraSelectDark = chakraSelectDarkMode(darkMode);\n\n const error = attributesErrors.find(\n (obj) => obj.id === index && obj.serviceIndex === serviceIndex,\n );\n\n const updateAttribute = services[serviceIndex].attributes[index];\n\n return (\n \n \n \n {attribute.name}{' '}\n {attribute.toolTip && (\n \n \n \n )}\n \n\n \n \n item.value === updateAttribute?.value,\n )}\n options={options}\n onChange={(e) => {\n removeAttributeError(index, serviceIndex);\n handleAttributeChange(\n e.value,\n index,\n serviceIndex,\n );\n }}\n placeholder=\"Please select an option\"\n getOptionLabel={(i) => i.label}\n chakraStyles={{\n ...defaultChakraSelectStyle,\n ...chakraSelectDark,\n }}\n isDisabled={\n requiredScope < attribute.updateScope || isBusy\n }\n />\n \n {!isEqual(updateAttribute?.value, attribute.value) && (\n \n Unsaved\n \n )}\n \n\n {error ? (\n {error.message}\n ) : attribute?.description ? (\n {attribute?.description}\n ) : null}\n \n \n );\n}\n","import { InfoIcon } from '@chakra-ui/icons';\nimport {\n Badge,\n Box,\n FormControl,\n FormErrorMessage,\n FormHelperText,\n FormLabel,\n Tooltip,\n} from '@chakra-ui/react';\nimport { Input } from 'components/v4';\nimport { isEmpty, isEqual } from 'lodash';\nimport { useServices } from '../ServicesContext';\nimport style from './styles';\nimport useServicesAttributesValidation from './useServicesAttributesValidation';\n\nexport default function GuidAttribute({\n attribute,\n index,\n serviceIndex,\n requiredScope,\n isBusy\n}) {\n const validation = JSON.parse(attribute.definedAttributeValidationType);\n\n const { attributesErrors, services } = useServices();\n const {\n handleAttributeChange,\n handleAttributeError,\n removeAttributeError,\n } = useServicesAttributesValidation();\n\n const error = attributesErrors.find(\n (obj) => obj.id === index && obj.serviceIndex === serviceIndex,\n );\n\n const updateAttribute = services[serviceIndex].attributes[index];\n\n const guidPattern =\n /^[A-Fa-f0-9]{8}-[A-Fa-f0-9]{4}-[A-Fa-f0-9]{4}-[A-Fa-f0-9]{4}-[A-Fa-f0-9]{12}$/i;\n\n\n return (\n \n \n \n {attribute.name}{' '}\n {attribute.toolTip && (\n \n \n \n )}\n \n\n \n \n {\n removeAttributeError(index, serviceIndex);\n if (\n !isEmpty(e.target.value) &&\n !guidPattern.test(e.target.value)\n ) {\n handleAttributeError(\n index,\n 'Invalid GUID format.',\n serviceIndex,\n );\n }\n handleAttributeChange(\n e.target.value,\n index,\n serviceIndex,\n );\n }}\n isDisabled={requiredScope < attribute.updateScope || isBusy}\n />\n \n {!isEqual(updateAttribute?.value, attribute.value) && (\n \n Unsaved\n \n )}\n \n\n {error ? (\n {error.message}\n ) : attribute?.description ? (\n {attribute?.description}\n ) : null}\n \n \n );\n}\n","import { InfoIcon } from '@chakra-ui/icons';\nimport {\n Badge,\n Box,\n FormControl,\n FormErrorMessage,\n FormHelperText,\n FormLabel,\n Tooltip,\n} from '@chakra-ui/react';\nimport { Input } from 'components/v4';\nimport { isEqual } from 'lodash';\nimport { useServices } from '../ServicesContext';\nimport style from './styles';\nimport useServicesAttributesValidation from './useServicesAttributesValidation';\nexport default function IntAttribute({\n attribute, // original attribute data\n index,\n serviceIndex,\n requiredScope,\n isBusy,\n}) {\n const validation = JSON.parse(attribute.definedAttributeValidationType);\n const { attributesErrors, services } = useServices();\n const error = attributesErrors.find(\n (obj) => obj.id === index && obj.serviceIndex === serviceIndex,\n );\n\n const updateAttribute = services[serviceIndex].attributes[index];\n\n const {\n handleAttributeChange,\n handleAttributeError,\n removeAttributeError,\n } = useServicesAttributesValidation();\n\n return (\n \n \n \n {attribute.name}{' '}\n {attribute.toolTip && (\n \n \n \n )}\n \n\n \n \n \n ['e', 'E'].includes(evt.key) &&\n evt.preventDefault()\n }\n type=\"number\"\n placeholder=\"Please enter a value\"\n value={updateAttribute?.value}\n onChange={(e) => {\n removeAttributeError(index, serviceIndex);\n if (\n (parseInt(validation.Minimum) > 0 &&\n parseInt(validation.Maximum) > 0 &&\n parseInt(e.target.value) >\n validation.Maximum) ||\n parseInt(e.target.value) <\n validation.Minimum\n ) {\n handleAttributeError(\n index,\n `Only numeric values between ${validation.Minimum} and ${validation.Maximum} are allowed.`,\n serviceIndex,\n );\n }\n handleAttributeChange(\n e.target.value,\n index,\n serviceIndex,\n );\n }}\n isDisabled={\n requiredScope < attribute.updateScope || isBusy\n }\n />\n \n {!isEqual(updateAttribute?.value, attribute.value) && (\n \n Unsaved\n \n )}\n \n\n {error ? (\n {error.message}\n ) : attribute?.description ? (\n {attribute?.description}\n ) : null}\n \n \n );\n}\n","import { chakraSelectDarkMode, defaultChakraSelectStyle } from '@/constants';\nimport { InfoIcon } from '@chakra-ui/icons';\nimport {\n Badge,\n Box,\n FormControl,\n FormErrorMessage,\n FormHelperText,\n FormLabel,\n Tooltip,\n} from '@chakra-ui/react';\nimport { Select } from 'chakra-react-select';\nimport { isEqual } from 'lodash';\nimport { useState } from 'react';\nimport { useSelector } from 'react-redux';\nimport { useServices } from '../ServicesContext';\nimport style from './styles';\nimport useServicesAttributesValidation from './useServicesAttributesValidation';\n\nexport default function ListAttribute({\n attribute,\n index,\n serviceIndex,\n requiredScope,\n isBusy,\n}) {\n const validation = JSON.parse(attribute.definedAttributeValidationType);\n const { darkMode } = useSelector((state) => state.settings);\n const chakraSelectDark = chakraSelectDarkMode(darkMode);\n\n const { attributesErrors, services } = useServices();\n const error = attributesErrors.find(\n (obj) => obj.id === index && obj.serviceIndex === serviceIndex,\n );\n\n const [validValues] = useState(() =>\n validation.ValidValues.split(',')\n .map((value) => value.trim())\n .filter((value) => value !== '')\n .map((value, index) => ({ index, value })),\n );\n\n const updateAttribute = services[serviceIndex].attributes[index];\n\n const { removeAttributeError, handleAttributeChange } =\n useServicesAttributesValidation();\n\n return (\n \n \n \n {attribute.name}{' '}\n {attribute.toolTip && (\n \n \n \n )}\n \n \n \n item.value === updateAttribute.value,\n )}\n options={validValues}\n onChange={(e) => {\n removeAttributeError(index, serviceIndex);\n handleAttributeChange(\n e.value,\n index,\n serviceIndex,\n );\n }}\n placeholder=\"Please select an option\"\n getOptionLabel={(i) => i.value}\n menuPosition=\"fixed\"\n maxMenuHeight={200}\n chakraStyles={{\n ...defaultChakraSelectStyle,\n ...chakraSelectDark,\n }}\n isDisabled={\n requiredScope < attribute.updateScope || isBusy\n }\n />\n \n {!isEqual(updateAttribute?.value, attribute.value) && (\n \n Unsaved\n \n )}\n \n\n {error ? (\n {error.message}\n ) : attribute?.description ? (\n {attribute?.description}\n ) : null}\n \n \n );\n}\n","import { InfoIcon } from '@chakra-ui/icons';\nimport {\n Badge,\n Box,\n FormControl,\n FormErrorMessage,\n FormHelperText,\n FormLabel,\n Tooltip\n} from '@chakra-ui/react';\nimport { Input } from 'components/v4';\nimport { isEqual } from 'lodash';\nimport { useServices } from '../ServicesContext';\nimport style from './styles';\nimport useServicesAttributesValidation from './useServicesAttributesValidation';\n\nexport default function TextAttribute({\n attribute,\n index,\n serviceIndex,\n requiredScope,\n isBusy,\n}) {\n const validation = JSON.parse(attribute.definedAttributeValidationType);\n const { attributesErrors, services } = useServices();\n const error = attributesErrors.find(\n (obj) => obj.id === index && obj.serviceIndex === serviceIndex,\n );\n\n const updateAttribute = services[serviceIndex].attributes[index];\n\n const {\n removeAttributeError,\n handleAttributeChange,\n } = useServicesAttributesValidation();\n\n return (\n \n \n \n {attribute.name}{' '}\n {attribute.toolTip && (\n \n \n \n )}\n \n \n \n 0\n ? validation.MaxLength\n : null\n }\n value={updateAttribute?.value}\n onChange={(e) => {\n removeAttributeError(index, serviceIndex);\n handleAttributeChange(\n e.target.value,\n index,\n serviceIndex,\n );\n }}\n isDisabled={\n requiredScope < attribute.updateScope || isBusy\n }\n />\n \n {!isEqual(updateAttribute?.value, attribute.value) && (\n \n Unsaved\n \n )}\n \n\n {error ? (\n {error.message}\n ) : attribute?.description ? (\n {attribute?.description}\n ) : null}\n \n \n );\n}\n","import { useSelector } from 'react-redux';\nimport { useServices } from '../ServicesContext';\nimport BoolAttribute from './boolAttribute';\nimport GuidAttribute from './guidAttribute';\nimport IntAttribute from './intAttribute';\nimport ListAttribute from './listAttribute';\nimport TextAttribute from './textAttribute';\n\nexport default function ServicesAttributes({\n serviceIndex,\n isBusy\n}) {\n const { requiredScope } = useSelector((state) => {\n return { ...state.login };\n });\n const { originalData } = useServices();\n\n // leave it as it is when display order is same, otherwise sort\n return originalData[serviceIndex].attributes\n ?.sort((a, b) =>\n a.displayOrder === b.displayOrder\n ? 0\n : a.displayOrder - b.displayOrder,\n )\n ?.map((att, key) => {\n // defined attribute validation type is a json string\n const validation = JSON.parse(att.definedAttributeValidationType);\n switch (validation.Type) {\n case 'Int':\n return (\n \n );\n case 'Text':\n return (\n \n );\n\n case 'Bool':\n return (\n \n );\n\n case 'Guid':\n return (\n \n );\n\n case 'List':\n return (\n \n );\n default:\n break;\n }\n });\n}\n","import { axios } from '@/services/axios';\nimport { CheckCircleIcon, NotAllowedIcon } from '@chakra-ui/icons';\nimport {\n Accordion,\n AccordionButton,\n AccordionIcon,\n AccordionItem,\n AccordionPanel,\n Skeleton,\n Tooltip,\n} from '@chakra-ui/react';\nimport { useQuery, useQueryClient } from '@tanstack/react-query';\nimport { Alert, AlertIcon, Button, Heading, Text } from 'components/v4';\nimport { isEmpty } from 'lodash';\nimport { useState, useEffect } from 'react';\nimport { toast } from 'react-toastify';\nimport { useSelector } from 'react-redux';\nimport { useServices } from './ServicesContext';\nimport ServicesAttributes from './attributes/ServicesAttributes';\nimport useServicesAttributesValidation from './attributes/useServicesAttributesValidation';\n\nexport default function Services({ userID, numberID, companyID }) {\n const { dispatch, services, originalData, attributesErrors } =\n useServices();\n const [isLoading, setIsLoading] = useState(false);\n const { definedAttributes: servicesCompany } = useSelector(\n (state) => state.navigationLists?.currentCompanyData,\n );\n const queryClient = useQueryClient();\n const queryState = queryClient.getQueryState(['companyID', companyID]);\n const servicesCompanyLoading = queryState?.fetchStatus === 'fetching';\n\n const { data: servicesData, isFetching: servicesLoading } = useQuery({\n // eg. user id\n queryKey: ['userID', userID],\n queryFn: async () => {\n const res = await axios.get(`user/${userID}/definedattributes`);\n return res.data;\n },\n enabled: Boolean(userID),\n onSuccess: (data) => {\n dispatch({\n type: 'ADD_SERVICES',\n payload: data,\n });\n },\n onError: (err) => {\n toast.error(err?.response?.data?.message);\n },\n refetchOnWindowFocus: false,\n staleTime: 0,\n });\n\n const { data: servicesNumber, isFetching: servicesNumberLoading } =\n useQuery({\n // eg. user id\n queryKey: ['numberID', numberID],\n queryFn: async () => {\n const res = await axios.get(\n `number/${numberID}/definedattributes`,\n );\n return res.data;\n },\n enabled: Boolean(numberID),\n onSuccess: (data) => {\n dispatch({\n type: 'ADD_SERVICES',\n payload: data,\n });\n },\n onError: (err) => {\n toast.error(err?.response?.data?.message);\n },\n refetchOnWindowFocus: false,\n staleTime: 0,\n });\n\n const ufTitle = userID ? '/users' : numberID ? '/numbers' : '/companies';\n\n // TODO: uncomment this when we have a proper API for detecting company services 3.39\n // const { data: servicesCompany, isFetching: servicesCompanyLoading } =\n // useQuery({\n // // eg. user id\n // queryKey: ['companyID', companyID],\n // queryFn: async () => {\n // const res = await axios.get(\n // `company/${companyID}/definedattributes`,\n // );\n // return res.data;\n // },\n // enabled: Boolean(companyID),\n // onSuccess: (data) => {\n // dispatch({\n // type: 'ADD_SERVICES',\n // payload: data,\n // });\n // },\n // onError: (err) => {\n // toast.error(err?.response?.data?.message);\n // },\n // refetchOnWindowFocus: false,\n // staleTime: 0,\n // });\n\n const [index, setIndex] = useState(\n Array.from(\n {\n length:\n servicesData?.length ||\n servicesNumber?.length ||\n servicesCompany?.length,\n },\n (_, i) => i,\n ),\n );\n\n const {\n handleAttributeError,\n removeAttributeError,\n handleOGAttributeChange,\n } = useServicesAttributesValidation();\n\n const handleSubmit = async (servIndex) => {\n // get service and then attributes\n const serviceId = services[servIndex]?.service.id;\n const serviceAttributes = services[servIndex]?.attributes;\n let hasErrors = false;\n\n const errors = attributesErrors.some(\n (a) => a.serviceIndex === servIndex,\n );\n\n // if errors already exist, do not submit\n console.log(errors, 'att errors');\n if (errors) {\n toast.error(\n 'There are some validation errors. Please check and try again.',\n );\n return;\n }\n\n // check for errors and required fields\n for (const [index, att] of serviceAttributes.entries()) {\n const validation = JSON.parse(att.definedAttributeValidationType);\n\n if (validation.Required && isEmpty(att.value)) {\n handleAttributeError(index, 'Field is required.', servIndex);\n hasErrors = true;\n } else {\n removeAttributeError(index, servIndex);\n }\n }\n\n // has errors, do not proceed and show toast error\n if (hasErrors) {\n toast.error(\n 'There are some validation errors. Please check and try again.',\n );\n return;\n }\n\n setIsLoading(true);\n\n // attributes to be updated\n for (const [index, att] of serviceAttributes.entries()) {\n try {\n // if attribute value are the same (no changes), skip the update\n if (\n originalData[servIndex]?.attributes.some(\n (b) => b.value === att.value,\n )\n )\n continue;\n const resourceID = userID || numberID || companyID;\n const resourceType = userID\n ? 'user'\n : numberID\n ? 'number'\n : 'company';\n\n // need to pass serviceId for number and user defined attributes\n if (resourceType != 'company') {\n await axios.put(\n `/${resourceType}/${resourceID}/service/${serviceId}/definedattribute`,\n {\n ID: att.id,\n value: att.value,\n },\n );\n } else {\n await axios.put(\n `/${resourceType}/${resourceID}/definedattribute`,\n {\n ID: att.id,\n value: att.value,\n },\n );\n }\n\n // update original data with new value as it is successful\n handleOGAttributeChange(att.value, index, servIndex);\n } catch (e) {\n // need to add specific error message from the backend to the attribute error\n hasErrors = true;\n handleAttributeError(\n index,\n e?.response?.data?.message,\n servIndex,\n );\n }\n }\n\n // error from backend, show toast error\n if (hasErrors) {\n toast.error(\n 'There are some validation errors. Please check and try again.',\n );\n setIsLoading(false);\n return;\n }\n\n toast.success(\n `Successfully updated attributes for ${services[servIndex].service.name}!`,\n );\n\n setIsLoading(false);\n };\n\n useEffect(() => {\n if (servicesCompany) {\n dispatch({\n type: 'ADD_SERVICES',\n payload: servicesCompany,\n });\n }\n }, [servicesCompany, dispatch]);\n\n return servicesLoading ||\n servicesNumberLoading ||\n servicesCompanyLoading ? (\n \n {[...Array(5)].map((_, index) => (\n \n \n \n\n \n \n \n ))}\n \n ) : (\n <>\n {originalData?.length > 0 ? (\n setIndex(e)}\n allowMultiple\n reduceMotion\n allowToggle>\n {originalData.map((serv, servIndex) => (\n \n \n \n {serv.service.name}\n \n\n {serv.activated ? (\n \n \n \n ) : (\n \n \n \n )}\n {serv.attributes?.some(\n (att, index) =>\n att.value !=\n services[servIndex]?.attributes[index]\n ?.value,\n ) && (\n {\n e.preventDefault();\n handleSubmit(servIndex);\n }}>\n Save\n \n )}\n \n \n\n {serv.attributes?.length > 0 ? (\n \n \n \n ) : (\n \n \n No additional information required for\n this service.\n \n \n )}\n \n ))}\n \n ) : (\n \n \n No services activated.\n \n )}\n \n );\n}\n","/* eslint-disable */\nimport React, { useState, useEffect, useRef, useReducer } from 'react';\n// import { Button } from 'react-bootstrap';\nimport { Breadcrumbs, Link } from '@material-ui/core';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport FiberManualRecordRoundedIcon from '@material-ui/icons/FiberManualRecordRounded';\nimport { Alert } from '@material-ui/lab';\nimport { useSelector, useDispatch } from 'react-redux';\nimport EditRoundedIcon from '@material-ui/icons/EditRounded';\nimport CloseRoundedIcon from '@material-ui/icons/CloseRounded';\nimport {\n AdminForm,\n BillingForm,\n Approval,\n CustomFieldsForm,\n CompanyEdit,\n} from '..';\nimport TableAndModal, {\n modalTitle,\n onModalError,\n} from '../../../components/tables/TableAndModal';\nimport Script from '../../scripts';\nimport { LoadingFieldDropdown, TabView } from '../../../components';\nimport config from '../../../config.json';\nimport { axios } from '../../../services/axios';\nimport { COMPANY } from '../sharedComponents/BillingForm';\nimport { useLocation, useNavigate } from 'react-router-dom';\nimport {\n CANNOT_DELETE_MODE,\n LOADING_DELETE_MODE,\n} from 'components/tables/ReduxModal';\nimport CheckRounded from '@material-ui/icons/CheckRounded';\nimport CircularProgress from '@material-ui/core/CircularProgress';\n\nimport walkthroughIds from '../walkthroughIds';\nimport EntityCustomFieldsForm from '../sharedComponents/EntityCustomFieldsForm';\nimport Services from 'pages/accounts/users/services/Services';\nimport { Box, ChakraProvider } from '@chakra-ui/react';\nimport { useDeepMerge } from 'hooks/useDeepMerge';\nimport { ServicesProvider } from 'pages/accounts/users/services/ServicesContext';\n\nimport { Button } from 'components/v4';\nimport { useQuery } from '@tanstack/react-query';\nimport { useServices } from 'pages/accounts/users/services/ServicesContext';\n\n// default columns for the table\nconst defaultColumns = [\n {\n title: 'Friendly Company Name',\n defaultSort: 'asc',\n field: 'name',\n },\n {\n title: 'Legal Entity Name',\n defaultSort: 'asc',\n field: 'entityName',\n },\n {\n title: 'Status',\n field: 'status',\n width: '4%',\n lookupDescription: config.companies.statusNavbarJSON,\n },\n {\n title: 'Active',\n field: 'isActive',\n type: 'boolean',\n width: '4%',\n },\n {\n title: 'On Trial',\n field: 'isTrial',\n type: 'boolean',\n width: '4%',\n },\n {\n title: 'Initial Domain',\n field: 'initialDomain',\n },\n {\n title: 'Last Pairing',\n field: 'lastSuccessfulPair',\n type: 'datetime',\n hidden: true,\n },\n {\n title: 'Default Plan',\n field: 'defaultPlan',\n width: '12%',\n render: (rowData) => {\n if (typeof rowData.defaultPlan === 'string') {\n return rowData.defaultPlan;\n }\n return;\n },\n },\n {\n title: 'Trial On Hold',\n field: 'trialHold',\n type: 'boolean',\n width: '4%',\n },\n ...config.table.custom,\n {\n title: 'Service Countries',\n field: 'serviceCountries',\n hiddenByColumnsButton: true,\n hidden: true,\n },\n {\n title: 'Company ID',\n field: 'id',\n hiddenByColumnsButton: true,\n hidden: true,\n },\n];\n\n/*\n * Company Base component for the 'Companies' Tab of TCAP\n * Tab view is ComapnyStandardForm, AdminForm, CustomFieldsForm and BillingForm\n */\nconst Companies = (props) => {\n //voice policies field in edit general, when you add regions it will auto add voice policies\n const dispatch = useDispatch();\n const tableRef = useRef();\n\n const location = useLocation();\n const { theme } = useDeepMerge();\n\n const [voicePoliciesAvailable, setVoicePoliciesAvailable] = useState([]);\n const [, force] = useState(null);\n\n // modal Data from state\n const { modalData, modalMode, modalState } = useSelector((state) => {\n return {\n modalLoading: state.modal.loading,\n modalData: state.modal.data,\n modalState: state.modal.state,\n modalMode: state.modal.mode,\n modalStateError: state.modal.stateError,\n modalUploading: state.modal.uploading,\n modalLoadFields: state.modal.loadFields,\n modalShow: state.modal.show,\n };\n });\n\n // table data from state\n const { state: tableState } = useSelector((state) => {\n return {\n ...state.table,\n };\n });\n\n //powershell script for companies\n const { script } = useSelector((state) => {\n return {\n script: { ...state.script },\n };\n });\n\n // view data from state\n const { breadcrumb, modalTab } = useSelector((state) => {\n return {\n ...state.view,\n };\n });\n\n // navidation data from state\n const { currentPartner, currentCompanyData, currentWholesaler } =\n useSelector((state) => {\n return { ...state.navigationLists };\n });\n const { general } = walkthroughIds.companies;\n const { approval } = walkthroughIds;\n\n const navigate = useNavigate();\n\n // set state function to simplify change handlers\n const setState = (payload) => {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload,\n });\n };\n\n const openApprovalModal = () => {\n if (location?.state?.approval) {\n setTimeout(() => {\n dispatch({\n type: 'OPEN_MODAL',\n payload: {\n mode: 'Approval',\n data: currentCompanyData,\n },\n });\n }, 1000);\n }\n };\n\n const redirectToNewCompany = (result) => {\n dispatch({\n type: 'CHANGE_CURRENT_COMPANY',\n payload: result?.data?.id,\n });\n navigate('/dashboard-services');\n window.location.reload();\n };\n\n const { data: servicesCompany } = useQuery({\n queryKey: ['companyID', modalData?.id],\n queryFn: async () => {\n const res = await axios.get(\n `company/${modalData?.id}/definedattributes`,\n );\n return res.data;\n },\n enabled: Boolean(modalData?.id),\n onSuccess: (data) => {\n dispatch({\n type: 'CHANGE_CURRENT_COMPANY_DATA',\n payload: {\n ...currentCompanyData,\n definedAttributes: data,\n },\n });\n },\n // refetchOnWindowFocus: false,\n });\n useEffect(() => {\n openApprovalModal();\n }, [location]);\n\n // useEffect to set the avilible voice policies based on the regions value\n useEffect(() => {\n if (\n Array.isArray(modalState?.regions) &&\n modalState?.regions.filter((v) => v.id).length >= 1\n ) {\n axios\n .get(\n `/VoicePolicies/Regions${\n '?Regions=' +\n modalState?.regions\n .filter((v) => v.id)\n .map((v) => {\n if (typeof v === 'string') {\n return v;\n }\n return v?.id;\n })\n .join('&Regions=')\n }`,\n )\n .then((res) => {\n setVoicePoliciesAvailable(res.data);\n })\n .catch((e) => {\n onModalError(e);\n });\n } else {\n setVoicePoliciesAvailable([]);\n }\n }, [modalState?.regions]);\n\n // resets the modal and the table\n const dispatchHandler = () => {\n dispatch({\n type: 'RESET_MODAL',\n });\n dispatch({\n type: 'RESET_TABLE',\n });\n };\n\n // handle billing note update\n const billingNoteHandler = () => {\n if (modalState.companyBillingSettings.billingNotes?.length) {\n modalState.companyBillingSettings.billingNotes.forEach((note) => {\n if (note.id) {\n // edit logic\n axios.put('/billingnote', { ...note });\n } else {\n // add logic\n axios.post('/billingnote', { ...note });\n }\n });\n }\n\n // delete logic\n if (modalState.deletedNoteIDs) {\n modalState.deletedNoteIDs.forEach((note) => {\n if (note.id) {\n axios.delete('/billingnote/' + note.id);\n }\n });\n }\n };\n\n //useEffect to create json enum for default columns\n //cases 0,3,20 are different status, 0 = ok, 3 = pending aproval(purple), 20 = red. error, default yellow.\n useEffect(() => {\n if (tableState?.data?.length > 0) {\n const statusEnum = tableState?.data?.reduce((prev, current) => {\n if (!prev[current.status]) {\n switch (current.status) {\n case 0:\n prev[current.status] = (\n \n \n \n );\n break;\n case 3: //for pending approval\n prev[current.status] = (\n \n \n \n );\n break;\n case 20:\n prev[current.status] = (\n \n \n \n );\n break;\n default:\n prev[current.status] = (\n \n \n \n );\n break;\n }\n }\n return prev;\n }, {});\n\n //After makes json enum, put it in store\n dispatch({\n type: 'CHANGE_TABLE_STATE',\n payload: {\n ...tableState,\n columns: defaultColumns.map(({ field, ...rest }) => {\n if (field === 'status') {\n return {\n field,\n ...rest,\n lookup: statusEnum,\n customSort: (l, r) => {\n const leftValue =\n typeof l === 'object'\n ? (l.status ?? 0)\n : (l ?? 0);\n const rightValue =\n typeof r === 'object'\n ? (r.status ?? 0)\n : (r ?? 0);\n return leftValue - rightValue;\n },\n };\n }\n return {\n field,\n ...rest,\n };\n }),\n },\n });\n\n force();\n }\n }, [tableState?.data]);\n\n // list item component\n const listItemContent = (v) => (\n \n \n {v}\n \n );\n\n // function to render the modal based on the mode\n const modalContent = () => {\n switch (modalMode) {\n case 'Delete':\n return (\n \n Are you sure you want to delete {modalState?.name} ?\n This will de-activate {modalState?.name} , set the\n latest invoice to finalizing, and stop all future\n billing.\n \n );\n case 'Approval':\n return ;\n case 'Convert':\n return (\n \n Are you sure you want to convert {modalState?.name} from\n trial?\n
This will:
\n \n - Set the current invoice to 'ready to post'
\n - Remove and de-provision trial numbers
\n - \n Charge setup fees based on the currently\n assigned plan\n
\n
\n \n );\n case LOADING_DELETE_MODE:\n return (\n \n );\n case CANNOT_DELETE_MODE:\n return (\n <>\n {modalState?.isNextButtonDisabled\n ? 'Can not delete this Company, as it is still in use.'\n : 'You can delete this Company.'}\n \n {modalState?.issues?.active?.message ? (\n - \n \n {modalState?.issues?.active?.message}\n
\n ) : (\n - \n \n {'This Company is not active.'}\n
\n )}\n {modalState?.issues?.users?.message ? (\n - \n \n {modalState?.issues?.users?.message}\n {modalState?.issues?.users?.response && (\n
\n {modalState?.issues?.users?.response.map(\n listItemContent,\n )}\n
\n )}\n \n ) : (\n - \n \n {\n 'There are no Users With Numbers assigned in this Company.'\n }\n
\n )}\n {modalState?.issues?.resourceAccounts?.message ? (\n - \n \n {\n modalState?.issues?.resourceAccounts\n ?.message\n }\n {modalState?.issues?.resourceAccounts\n ?.response && (\n
\n {modalState?.issues?.resourceAccounts?.response.map(\n listItemContent,\n )}\n
\n )}\n \n ) : (\n - \n \n {\n 'There are no Resource Accounts With Numbers assigned in this Company.'\n }\n
\n )}\n {modalState?.issues?.numberBlocks?.message ? (\n - \n \n {modalState?.issues?.numberBlocks?.message}\n {modalState?.issues?.numberBlocks\n ?.response && (\n
\n {modalState?.issues?.numberBlocks?.response.map(\n listItemContent,\n )}\n
\n )}\n \n ) : (\n - \n \n {\n 'There are no Number Blocks assigned to this Company.'\n }\n
\n )}\n
\n \n );\n default:\n return (\n <>\n 0\n ? 'Services'\n : null,\n 'Admin',\n ]\n }\n contents={[\n ,\n ,\n ,\n servicesCompany?.length > 0 ? (\n \n \n \n \n \n \n \n ) : null,\n ,\n ]}\n insideModal={true}\n />\n \n );\n }\n };\n\n // for script view\n if (breadcrumb !== 'all') {\n return (\n <>\n \n {\n e.preventDefault();\n dispatch({\n type: 'CHANGE_BREADCRUMB_VIEW',\n payload: 'all',\n });\n dispatch({\n type: 'RESET_SCRIPT',\n });\n }}>\n All Companies\n \n \n {\n return status === 2 || status === 20;\n },\n )}\n onChange={(v) => {\n dispatch({\n type: 'OPEN_SCRIPT',\n payload: { id: v },\n });\n }}\n onDisplayDropdown={(value) => {\n if (typeof value === 'string') {\n const { name, status } =\n tableState?.data?.find(\n (v) => v.id === value,\n );\n return (\n name +\n ' - ' +\n config.companies.statusNavbarJSON[\n status\n ]\n );\n }\n const { name, status } = value;\n return (\n name +\n ' - ' +\n config.companies.statusNavbarJSON[status]\n );\n }}\n noEmptyOption\n fieldValue={script.rowData?.id}\n />\n
\n \n
\n \n \n );\n }\n\n // default return table with companies in it\n return (\n <>\n {\n return axios.get('/companies/List', {\n params: {\n wholesalerID: currentWholesaler,\n partnerID: currentPartner,\n },\n });\n }}\n // sort table data for walkthrough id\n onTableSucceed={(data) => {\n return data.sort(function (a, b) {\n var nameA = a.name?.toLowerCase(),\n nameB = b.name?.toLowerCase();\n if (nameA < nameB)\n //sort string ascending\n return -1;\n if (nameA > nameB) return 1;\n return 0; //default return value (no sorting)\n });\n }}\n modalFetch={\n modalMode === 'Approval'\n ? `/company/${modalData?.id}/approval/`\n : `/company/${modalData?.id}`\n }\n onModalSucceed={(res) => {\n if (modalMode === 'Delete' || modalMode === 'Convert') {\n dispatch({\n type: 'RESET_MODAL',\n });\n return;\n }\n if (modalMode === 'Approval') {\n dispatch({\n type: 'CHANGE_CURRENT_COMPANY_DATA',\n payload: { ...currentCompanyData, ...res.data },\n });\n // update the approval modal to close\n dispatch({\n type: 'ON_MODAL_SUBMIT_SUCCEED',\n });\n dispatch({\n type: 'CHANGE_TABLE_LOADING',\n });\n }\n }}\n modalDelete={`/company/${modalData?.id}`}\n modalConvert={`/company/convertfromtrial/${modalData?.id}`}\n overrideModalAdd={async () => {\n let compCreated = false;\n let compData = null;\n let compCreatedError =\n \"The company has been created, but could not be approved. Please come back to the Companies menu for approval at later time. We are redirecting you to the new company's dashboard. \";\n let couldNotCreateError =\n 'Could not Create Company at this time. Please try again later.';\n try {\n const createCompResp = await axios.post('/company', {\n ...modalState,\n trunkLocationID: 'MEL',\n enabled: true, //hardcode for partners\n });\n\n compCreated = true;\n compData = createCompResp;\n if (modalState?.createWithTrial) {\n const companyApprovalData = await axios.get(\n `/company/${createCompResp?.data?.id}/approval/`,\n );\n if (companyApprovalData.data?.canApprove) {\n const companyApprovalWithTrialResp =\n await axios.put(\n `/company/${createCompResp?.data?.id}/approval?trial=true`,\n companyApprovalData.data,\n );\n } else {\n alert(compCreatedError);\n }\n }\n redirectToNewCompany(createCompResp);\n } catch (e) {\n alert(\n compCreated\n ? compCreatedError\n : couldNotCreateError,\n );\n if (compCreated) {\n redirectToNewCompany(compData);\n }\n }\n }}\n modalApproval={\n modalState?.withTrialURL\n ? '/company/' + modalData?.id + '/approval?trial=true'\n : '/company/' + modalData?.id + '/approval'\n }\n modalValidate={() => {\n if (modalMode === 'Approval') {\n return true;\n }\n const newErrorState = {\n name:\n (!modalState?.name ||\n modalState?.name?.length < 1) &&\n 'Field is required.',\n partnerID:\n !modalState?.isPartner &&\n (!modalState?.partnerID ||\n modalState?.partnerID?.length < 1) &&\n 'Field is required.', //TODO CHANGE!\n voicePolicies:\n modalState?.voicePolicies?.some(({ id }) => {\n return !voicePoliciesAvailable.find(\n (vpItem) => vpItem.id === id,\n );\n }) && 'Some Voice Policies are not valid.',\n attribute1:\n modalState?.attribute1?.length > 100 &&\n 'Maximum field length is 100 characters. ',\n attribute2:\n modalState?.attribute2?.length > 100 &&\n 'Maximum field length is 100 characters. ',\n attribute3:\n modalState?.attribute3?.length > 100 &&\n 'Maximum field length is 100 characters. ',\n };\n\n dispatch({\n type: 'CHANGE_MODAL_STATE_ERROR',\n payload: newErrorState,\n });\n return !(\n newErrorState.name ||\n newErrorState.partnerID ||\n newErrorState.attribute1 ||\n newErrorState.attribute2 ||\n newErrorState.attribute3 ||\n newErrorState.voicePolicies\n );\n }}\n modalButtons={\n (modalMode === 'Approval' && (\n <>\n {\n setState({ withTrialURL: false });\n dispatch({\n type: 'ON_MODAL_SUBMIT',\n payload: true,\n });\n }}\n data-walkthroughid={approval.ufApproveButton}>\n Approve\n \n {\n setState({ withTrialURL: true });\n dispatch({\n type: 'ON_MODAL_SUBMIT',\n payload: true,\n });\n }}\n data-walkthroughid={\n approval.ufApproveAsTrialButton\n }>\n Approve As Trial\n \n \n )) ||\n (modalMode === 'Add' && (\n <>\n {\n dispatch({\n type: 'ON_MODAL_SUBMIT',\n payload: true,\n });\n }}\n data-walkthroughid={general.ufCreateButton}>\n Create\n \n {\n setState({ createWithTrial: true });\n dispatch({\n type: 'ON_MODAL_SUBMIT',\n payload: true,\n });\n }}\n data-walkthroughid={\n general.ufCreateAsTrialButton\n }>\n Create As Trial\n \n \n )) ||\n (modalMode === CANNOT_DELETE_MODE && (\n {\n e.preventDefault();\n dispatch({\n type: 'OPEN_MODAL',\n payload: {\n mode: 'Delete',\n uploading: false,\n loading: false,\n data: modalData,\n state: modalState,\n },\n });\n }}\n data-walkthroughid={general.ufDeleteButton}>\n Delete\n \n ))\n }\n //when you edit, set the initial state of the edit\n additionalActions={[\n (rowData) => ({\n icon: ({ disabled }) => {\n if (disabled) {\n return;\n }\n return (\n \n );\n },\n tooltip: 'Edit Companies',\n position: 'row',\n onClick: (event, rowData) => {\n dispatch({\n type: 'OPEN_MODAL',\n payload: {\n mode: 'Edit',\n data: rowData,\n state: {\n isPartner: !rowData.partnerID,\n },\n },\n });\n },\n }),\n ]}\n rowActions={{\n approvable: true,\n viewableScript: {\n onClick: function (event, rowData) {\n dispatch({\n type: 'OPEN_SCRIPT',\n payload: rowData,\n });\n dispatch({\n type: 'CHANGE_BREADCRUMB_VIEW',\n payload: 'scripts',\n });\n },\n disabled: (rowData) =>\n !(\n rowData.o365Sync &&\n (rowData.status === 2 || rowData.status === 20)\n ),\n },\n }}\n dynamicScope={{ minimumScope: 40 }}\n // modalUpdate={`/company/`}\n overrideModalUpdate={() => {\n axios\n .put('/company/', modalState)\n .then((res) => {\n // NOTE: add more API call to this Promise\n Promise.all([billingNoteHandler()]).then(\n (_result) => {\n dispatchHandler();\n },\n );\n })\n .catch((err) => {\n onModalError(err);\n });\n }}\n modalUpload={(freshData, state) => {\n if (state?.trialEndLocal) {\n return {\n ...state,\n trialEnd: new Date(\n state?.trialEndLocal,\n )?.toUTCString(),\n trunkLocationID: 'MEL',\n trialEndLocal: undefined,\n };\n }\n return {\n ...state,\n trunkLocationID: 'MEL',\n enabled: true, //hardcode for partners\n };\n }}\n modalInitState={{\n partnerID: currentPartner,\n isActive: true,\n o365Sync: true,\n selectiveSyncPolicy: 0,\n noNeedPrompt: true,\n }}\n title=\"Companies\"\n defaultColumns={defaultColumns}\n add\n groupable\n filterable\n maxBodyHeight={\n window.innerHeight * config.plainView.tableHeight\n }\n modalTitle={modalTitle(\n modalData,\n 'name',\n ' Company ',\n modalMode === CANNOT_DELETE_MODE &&\n !modalState?.isNextButtonDisabled\n ? 'Delete'\n : modalMode,\n )}\n noSaveButton={\n modalTab == 3 &&\n modalContent().props.children.props?.tabLabels[modalTab] ===\n 'Services'\n }\n newPage\n modalContent={modalContent()}\n />\n \n );\n};\n\nexport default Companies;\n","import { useState } from \"react\";\n\nexport default function useFileUpload(options) {\n const [fileReaderResult, setFileReaderResult] = useState(null);\n const [file, setFile] = useState(null);\n\n function uploadHandler(e) {\n if (!fileValidation(e)) return;\n e.persist()\n fileRead(e);\n setFile(e.target.files[0])\n }\n\n function fileRead(e) {\n const reader = new FileReader();\n reader.readAsDataURL(e.target.files[0]); // Converts image to \"browser readable\" format\n reader.onload = function () {\n setFileReaderResult(reader.result);\n };\n }\n\n function fileValidation(e) {\n const allowedExtensions = options.allowedExtensions\n .toString()\n .replaceAll(\",\", \" \").toLowerCase(); // ['.png', '.jpg'] => .png .jpg\n const fileExt = e.target.value.split(\".\").pop().toLowerCase(); // fileNameHere.png => png\n const isFileExtAllowed = allowedExtensions.includes(fileExt);\n\n if (!isFileExtAllowed) {\n options.fileRef.current.value = \"\";\n return false;\n } else {\n return true;\n }\n }\n\n return { file, fileReaderResult, uploadHandler };\n}\n","import React, { useEffect, useState, useRef } from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { Box } from '@chakra-ui/react';\nimport useDetectFileType from 'hooks/useDetectFileType';\n\nfunction usePublicParnerEndpoint() {\n const dispatch = useDispatch();\n const [publicParnerData, setPublicParnerData] = useState(null);\n const [imgPath, setImgPath] = useState(null);\n\n useEffect(() => {\n async function getPublicPartnerData() {\n try {\n fetch(\n `${import.meta.env.VITE_APP_API_URL}/theme/${\n window.location.host\n }`,\n {\n headers: {\n 'x-RequestScope': '20',\n },\n },\n ).then(async (response) => {\n const data = await response.json();\n setPublicParnerData(data);\n dispatch({\n type: 'SET_SBC_DOMAIN',\n payload: data.sbcDomain,\n });\n dispatch({\n type: 'CHANGE_IMAGE_PATH_LIGHT_MODE',\n payload: data.lightLogo,\n });\n dispatch({\n type: 'CHANGE_IMAGE_PATH_DARK_MODE',\n payload: data.darkLogo,\n });\n\n dispatch({\n type: 'HEADER_FAVICON_SUCCESS',\n payload: data.favicon,\n });\n dispatch({\n type: 'HEADER_TITLE_SUCCESS',\n payload: data.titleName,\n });\n dispatch({\n type: 'SET_SUPPORT_URL',\n payload: data.extLinkSupport,\n });\n setImgPath(data.lightLogo);\n });\n } catch (error) {}\n }\n if (!imgPath) {\n getPublicPartnerData();\n }\n }, [imgPath]);\n\n return publicParnerData;\n}\n\nfunction usePartnerProvidedBackground(ref, optionsOveride) {\n const data = usePublicParnerEndpoint();\n\n async function renderPartnerProvidedBackground(partnerData) {\n switch (partnerData.backgroundType) {\n // Default bg color\n case 0:\n ref.current.style.backgroundColor = `#F5F5F5`;\n ref.current.style.backgroundImage = `none`;\n break;\n // Solid defined bg color\n case 1:\n const bgColor = partnerData.backgroundColor.includes('#')\n ? partnerData.backgroundColor\n : `#${partnerData.backgroundColor}`;\n ref.current.style.backgroundColor = bgColor;\n ref.current.style.backgroundImage = `none`;\n break;\n // Defined bg image\n case 2:\n ref.current.style.backgroundPosition = 'center';\n ref.current.style.backgroundRepeat = 'no-repeat';\n ref.current.style.backgroundSize = 'cover';\n ref.current.style.backgroundImage = `url('${partnerData.backgroundImage}')`;\n break;\n // Bing image of the day\n case 3:\n ref.current.style.backgroundPosition = 'center';\n ref.current.style.backgroundRepeat = 'no-repeat';\n ref.current.style.backgroundSize = 'cover';\n ref.current.style.backgroundImage = `url('https://bing.biturl.top/?resolution=1920&format=image&index=0')`;\n break;\n // NASA image of the day\n case 4:\n await fetch(\n 'https://api.nasa.gov/planetary/apod?api_key=VKrdDxR2J9gaBTICmIWsDGN57FIiOLFg4tZaQKHe&thumbs=true',\n {\n method: 'GET',\n },\n ).then(async (response) => {\n const { hdurl, thumbnail_url } = await response.json();\n ref.current.style.backgroundPosition = 'center';\n ref.current.style.backgroundRepeat = 'no-repeat';\n ref.current.style.backgroundSize = 'cover';\n ref.current.style.backgroundImage = `url('${\n hdurl || thumbnail_url\n }')`;\n });\n break;\n }\n }\n\n useEffect(() => {\n if (optionsOveride) {\n renderPartnerProvidedBackground(optionsOveride);\n } else if (data) {\n renderPartnerProvidedBackground(data);\n }\n }, [data, optionsOveride]);\n}\n\nexport default function TcapPageBackgroundLoader({\n children,\n optionsOveride,\n ...props\n}) {\n const authPageContainerRef = useRef(null);\n usePartnerProvidedBackground(authPageContainerRef, optionsOveride);\n\n return (\n \n {children}\n \n );\n}\n","import useDetectFileType from '../../../hooks/useDetectFileType';\nimport Image from '../../v4/Image';\nexport default function ImageLoader({image, imageProps, objectProps}) {\n const fileType = useDetectFileType(image);\n\n return (\n <>\n {fileType === 'png' && }\n {fileType === 'svg' && }\n \n );\n}\n","import { Box, FormLabel, Input } from '@chakra-ui/react';\nimport Button from '../../../../components/v4/Button';\n// import Input from '../../../../components/v4/Input';\n// import FormLabel from '../../../../components/v4/FormLabel';\nimport { Link } from 'react-router-dom';\nimport useDetectFileType from '../../../../hooks/useDetectFileType';\nimport Image from '../../../../components/v4/Image';\nimport { useEffect, useState } from 'react';\n\nimport './fakelogin.css';\n\nimport ImageLoader from '../../../../components/v4/ImageLoader';\n\nexport default function FakeLogin({ logo, favicon, email, dataWalkthroughId }) {\n return (\n \n \n \n \n\n \n\n \n EMAIL\n \n \n\n \n\n \n PASSWORD\n \n \n\n \n\n \n \n \n \n REGISTER\n \n \n \n\n \n \n \n \n );\n}\n","export default \"__VITE_ASSET__2461ff7c__\"","import { useState, useEffect } from 'react';\nimport { Box } from '@chakra-ui/react';\nimport Text from '../../../../components/v4/Text';\nimport TcapPageBackgroundLoader from '../TcapPageBackgroundLoader';\nimport FakeLogin from './FakeLogin';\nimport Image from '../../../../components/v4/Image';\nimport useDetectFileType from '../../../../hooks/useDetectFileType';\nimport CloseIcon from '@material-ui/icons/Close';\nimport ImageLoader from '../../../../components/v4/ImageLoader';\n\nimport TCAPFavicon from '../../../../assets/images/TCAP-Favicon.svg';\n\nexport default function PartnerLoginPreview({\n logo,\n favicon,\n brandName = 'TCAP',\n email = '',\n backgroundOptions,\n // dirty prop, used to overide padding, cause we're reusing\n // this component on partner trials, and I need a quick way to change\n // padding\n paddingOveride = { padding: '25px 0' },\n dataWalkthroughId,\n}) {\n return (\n \n \n \n {/* Tab */}\n \n \n {brandName}\n \n \n \n\n \n \n \n \n \n );\n}\n","import { useState } from 'react';\nimport { TextEditor } from 'components';\nimport AutoFillMultiSelect from 'components/presentational/FillOnClickMultiselect';\nimport { TextField } from '@material-ui/core';\nimport { Box, Stack } from '@chakra-ui/react';\nimport Button from 'components/v4/Button';\nimport { useDispatch } from 'react-redux';\nimport './links.css';\nconst DEFAULT_SUPPORT_LINK_FIELDS = {\n COMPANY_ID: 'Company ID',\n PARTNER_ID: 'Partner ID',\n USER_ID: 'User ID',\n COMPANY_NAME: 'Company Name',\n COMPANY_LEGAL_ENTITY_NAME: 'Company Legal Entity Name',\n USER_EMAIL: 'User Email',\n USER_FIRST_NAME: 'User First Name',\n USER_LAST_NAME: 'User Last Name',\n COMPANY_ATTR_1: \"Company's Attribute 1\",\n COMPANY_ATTR_2: \"Company's Attribute 2\",\n COMPANY_ATTR_3: \"Company's Attribute 3\",\n TRIAL_STATUS: 'Trial Status',\n};\n\nimport walkthroughIds from '../../walkthroughIds';\n\nexport default function Links({\n submitState,\n partnerBranding,\n setPartnerBranding,\n updatePartnerbranding,\n}) {\n const dispatch = useDispatch();\n const [cursorPosition, setCursorPosition] = useState(0);\n\n // const [partnerBranding, setPartnerBranding] = useState({});\n\n const { branding } = walkthroughIds.partners;\n\n // const updatePartnerbranding = async () => {\n // setSubmitted(false);\n // try {\n // const currentPartner = await axios.get(`/partner/${partner?.id}`);\n\n // const updateRes = await axios.put('/partner/', {\n // ...currentPartner.data,\n // partnerBranding: {\n // ...currentPartner.data.partnerBranding,\n // extLinkSupport: partnerBranding.extLinkSupport,\n // extLinkRegistrationTerms:\n // partnerBranding.extLinkRegistrationTerms,\n // },\n // });\n // if (partner?.id === defaultCompany) {\n // dispatch({\n // type: 'SET_SUPPORT_URL',\n // payload: partnerBranding.extLinkSupport,\n // });\n // }\n // setSubmitted(true);\n // } catch (e) {}\n\n // };\n\n // const handleGetData = async () => {\n // // If no host header has been set, use a random string (unknown in this case) to return the default branding set (TCAP)\n // let newPartnerBranding = {\n // ...partner?.partnerBranding,\n // };\n // setIsLoading(true);\n // try {\n // let defaultBrandingKit = {data: null};\n // if (partner.hostHeader) {\n // defaultBrandingKit = await axios\n // .get('/theme/' + partner.hostHeader)\n // .then((response) => {\n // return response.data;\n // })\n // .catch((error) => {\n // console.log(error);\n // });\n // newPartnerBranding = {\n // ...newPartnerBranding,\n // ...defaultBrandingKit.data,\n // };\n // }\n\n // setPartnerBranding(newPartnerBranding);\n // } catch (e) {\n // console.log('error fetch', {e});\n // } finally {\n // setIsLoading(false);\n // }\n // };\n\n // useEffect(() => {\n // if (submitted) {\n // toast({\n // title: 'Links have been submitted successfully.',\n // status: 'success',\n // duration: 6000,\n // isClosable: true,\n // position: 'bottom',\n // });\n // }\n // }, [submitted]);\n\n // useEffect(() => {\n // if (partner) {\n // handleGetData();\n // }\n // }, [partner]);\n\n return (\n <>\n \n {\n setCursorPosition(value);\n }}\n textfield={{\n value: partnerBranding.extLinkSupport ?? '',\n label: 'Support Link',\n\n autoFocus: true,\n onChange: (e) => {\n setPartnerBranding({\n ...partnerBranding,\n extLinkSupport: e.target.value,\n });\n },\n }}\n dataWalkthroughId={branding.ufSupportLinkInput}\n />\n ({\n id: `[${id}]`,\n name,\n }),\n )}\n activeTextareaID={'extLinkSupport'}\n activeTextareaField={'extLinkSupport'}\n setState={setPartnerBranding}\n label={'Support Link Fields'}\n setCursorPosition={(value) => {\n setCursorPosition(value);\n }}\n cursorPosition={cursorPosition ?? 0}\n data-walkthroughid={branding.ufSupportLinkSelect}\n />\n {\n setPartnerBranding({\n ...partnerBranding,\n extLinkRegistrationTerms: e.target.value,\n });\n }}\n data-walkthroughid={branding.ufRegTcInput}\n />\n {\n setPartnerBranding({\n ...partnerBranding,\n extLinkPrivacyPolicy: e.target.value,\n });\n }}\n data-walkthroughid={branding.ufPrivacyPolicyInput}\n />\n \n\n \n dispatch({ type: 'RESET_MODAL' })}\n data-walkthroughid={`${branding.ufBackButton}/links`}>\n Back\n \n \n Save\n \n \n \n );\n}\n","import { useEffect, useState, useRef } from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport {\n Box,\n Tabs,\n TabList,\n TabPanels,\n Tab,\n TabPanel,\n useToast,\n} from '@chakra-ui/react';\n\nimport { axios } from '../../../../services/axios';\nimport useDetectFileType from 'hooks/useDetectFileType';\nimport useFileUpload from 'hooks/useFileUpload';\n// import config from '../../../../config.json';\n\nimport PartnerLoginPreview from 'components/v4/partners/PartnerBranding/PartnerBrandingLoginPreview';\n\nimport Links from './Links';\nimport Heading from 'components/v4/Heading';\nimport Text from 'components/v4/Text';\nimport FormLabel from 'components/v4/FormLabel';\nimport Dropdown from 'components/v4/Select';\nimport Button from 'components/v4/Button';\nimport Image from 'components/v4/Image';\n// import ChakraAlert from 'components/v4/Alert';\n// import ChakraAlertIcon from 'components/v4/AlertIcon';\n\nimport walkthroughIds from '../../walkthroughIds';\nimport {\n customTabStylesCombineTheme,\n selectedTabStylesCombineTheme,\n} from '@/constants';\n\nconst imageContainerStyles = {\n height: '100px',\n padding: '10px',\n display: 'flex',\n alignItems: 'center',\n};\nconst faviconContainerStyles = {\n width: '100px',\n};\nconst bgImageContainerStyles = {\n height: '100px',\n width: '210px',\n padding: '10px',\n display: 'flex',\n alignItems: 'center',\n};\n\nconst darkBgImageContainerStyles = {\n ...bgImageContainerStyles,\n background: 'gray.900',\n borderColor: 'gray.700',\n};\n\nconst logoImageStyles = { maxHeight: '100%', maxWidth: '100%' };\nconst faviconImageStyles = {\n maxHeight: '100%',\n maxWidth: '100%',\n margin: '0 auto',\n};\n\nexport default function PartnerBranding({ partner }) {\n const dispatch = useDispatch();\n const toast = useToast();\n\n // Logos\n const [logoSet, setLogoSet] = useState();\n\n // Branding\n const [brandingSet, setBrandingSet] = useState();\n const [submitted, setSubmitted] = useState('idle');\n\n // Logo refs\n const logoRef = useRef(null);\n const logoDarkRef = useRef(null);\n const logoFaviconRef = useRef(null);\n\n // Bg image ref\n const bgImageRef = useRef(null);\n\n // File refs\n const logoFileRef = useRef(null);\n const logoDarkFileRef = useRef(null);\n const logoFaviconFileRef = useRef(null);\n const bgImageFileRef = useRef(null);\n\n // File handlers\n const {\n uploadHandler: logoWhiteHandler,\n fileReaderResult: logoWhiteUploaded,\n file: logoWhiteFile,\n } = useFileUpload({\n allowedExtensions: ['.png', '.svg'],\n logoFileRef: logoFileRef,\n });\n const {\n uploadHandler: logoDarkHandler,\n fileReaderResult: logoDarkUploaded,\n file: logoDarkFile,\n } = useFileUpload({\n allowedExtensions: ['.png', '.svg'],\n logoFileRef: logoDarkFileRef,\n });\n const {\n uploadHandler: faviconHandler,\n fileReaderResult: faviconUploaded,\n file: faviconFile,\n } = useFileUpload({\n allowedExtensions: ['.png', '.svg'],\n logoFileRef: logoFaviconFileRef,\n });\n const {\n uploadHandler: bgImageHandler,\n fileReaderResult: bgImageUploaded,\n file: bgImageFile,\n } = useFileUpload({\n allowedExtensions: ['.png', '.svg'],\n logoFileRef: bgImageFileRef,\n });\n\n // File types\n const logoFileType = useDetectFileType(logoWhiteUploaded || logoSet?.light);\n const darkLogoFileType = useDetectFileType(\n logoDarkUploaded || logoSet?.dark,\n );\n const faviconFileType = useDetectFileType(\n faviconUploaded || logoSet?.favicon,\n );\n const bgImageFileType = useDetectFileType(\n bgImageUploaded || brandingSet?.backgroundImage,\n );\n\n //for links tab\n const [linksData, setLinksData] = useState({});\n\n const {\n defaultCompany, //company ID based on login\n } = useSelector((state) => state.login);\n\n const { darkMode } = useSelector((state) => state.settings);\n\n const { branding } = walkthroughIds.partners;\n\n const tabList = ['Logos', 'Links'];\n\n //on submission success, display a toast\n useEffect(() => {\n if (submitted === 'success') {\n toast({\n title: 'Logos and Links Tabs have been submitted successfully.',\n status: 'success',\n duration: 6000,\n // isClosable: true,\n position: 'bottom',\n });\n }\n }, [submitted]);\n\n useEffect(() => {\n if (partner) getPartnerData();\n }, [partner]);\n\n async function getPartnerData() {\n // If no host header has been set, use a random string (unknown in this case) to return the default branding set (TCAP)\n const hostHeader = partner.hostHeader ? partner.hostHeader : 'unknown';\n const defaultBrandingKit = await axios\n .get('/theme/' + hostHeader)\n .then((response) => response.data)\n .catch((error) => {\n console.log(error);\n });\n\n const {\n logoFile,\n darkLogoFile,\n faviconFile,\n partnerBranding: {\n backgroundType,\n backgroundImage,\n backgroundColor,\n extLinkSupport,\n extLinkRegistrationTerms,\n extLinkPrivacyPolicy,\n },\n } = partner;\n\n setLogoSet({\n light: logoFile\n ? `https://${window.location.host}/images/${logoFile}`\n : `https://${window.location.host}${defaultBrandingKit.lightLogo}`,\n dark: darkLogoFile\n ? `https://${window.location.host}/images/${darkLogoFile}`\n : `https://${window.location.host}${defaultBrandingKit.darkLogo}`,\n favicon: faviconFile\n ? `https://${window.location.host}/images/${faviconFile}`\n : `https://${window.location.host}${defaultBrandingKit.favicon}`,\n });\n\n setBrandingSet({\n ...defaultBrandingKit?.data,\n backgroundType: backgroundType ?? defaultBrandingKit.backgroundType,\n backgroundImage: backgroundImage\n ? `https://${window.location.host}/images/${backgroundImage}`\n : `https://${window.location.host}${defaultBrandingKit.backgroundImage}`,\n backgroundColor: backgroundColor\n ? `#${backgroundColor}`\n : `#${defaultBrandingKit.backgroundColor}`,\n });\n setLinksData({\n extLinkSupport,\n extLinkRegistrationTerms,\n extLinkPrivacyPolicy,\n });\n }\n\n async function updatePartnerbranding() {\n setSubmitted('pending');\n const endpoint = `/partner/${partner.id}/logo`;\n\n // Branding\n const bgColor = brandingSet.backgroundColor.replace('#', '');\n\n //current partner's data\n const currentPartner = await axios.get(`/partner/${partner?.id}`);\n\n const urlPattern = /^(http|https):\\/\\//i;\n\n if (\n linksData?.extLinkRegistrationTerms &&\n !urlPattern.test(linksData?.extLinkRegistrationTerms)\n ) {\n setSubmitted('idle');\n toast({\n title: 'Enter a valid Terms and Conditions URL including https://',\n status: 'error',\n duration: 6000,\n // isClosable: true,\n position: 'bottom',\n });\n return;\n }\n\n if (\n linksData?.extLinkPrivacyPolicy &&\n !urlPattern.test(linksData?.extLinkPrivacyPolicy)\n ) {\n setSubmitted('idle');\n toast({\n title: 'Enter a valid Privacy Policy URL including https://',\n status: 'error',\n duration: 6000,\n // isClosable: true,\n position: 'bottom',\n });\n return;\n }\n\n axios\n .put('/partner', {\n ...currentPartner.data,\n partnerBranding: {\n ...currentPartner.data.partnerBranding,\n backgroundType: brandingSet.backgroundType,\n backgroundColor: bgColor,\n extLinkSupport: linksData.extLinkSupport,\n extLinkRegistrationTerms:\n linksData.extLinkRegistrationTerms,\n extLinkPrivacyPolicy: linksData.extLinkPrivacyPolicy,\n },\n })\n // If we update the partner after uploading logos, it will overwrite them,\n // so we need to chain it with .then()\n .then(() => {\n // Light\n if (logoWhiteFile) {\n let formData = new FormData();\n formData.append('file', logoWhiteFile);\n axios.post(endpoint, formData, {\n headers: {\n 'Content-Type': 'multipart/form-data',\n },\n params: { mode: 'light' },\n });\n }\n\n // Dark\n if (logoDarkFile) {\n let formData = new FormData();\n formData.append('file', logoDarkFile);\n axios.post(endpoint, formData, {\n headers: {\n 'Content-Type': 'multipart/form-data',\n },\n params: { mode: 'dark' },\n });\n }\n\n // Favicon\n if (faviconFile) {\n let formData = new FormData();\n formData.append('file', faviconFile);\n axios.post(endpoint, formData, {\n headers: {\n 'Content-Type': 'multipart/form-data',\n },\n params: { mode: 'favicon' },\n });\n }\n\n // Login bg image\n if (bgImageFile) {\n let formData = new FormData();\n formData.append('file', bgImageFile);\n axios.post(endpoint, formData, {\n headers: {\n 'Content-Type': 'multipart/form-data',\n },\n params: { mode: 'BG' },\n });\n }\n if (partner?.id === defaultCompany) {\n dispatch({\n type: 'SET_SUPPORT_URL',\n payload: linksData.extLinkSupport,\n });\n }\n\n setSubmitted('success');\n\n // \"Redirect back\"\n setTimeout(() => {\n dispatch({ type: 'RESET_MODAL' });\n }, 1500);\n })\n .catch((e) => {\n setSubmitted('idle');\n toast({\n title:\n e?.response?.data?.message ||\n 'Unable to update partner branding!',\n status: 'error',\n duration: 6000,\n // isClosable: true,\n position: 'bottom',\n });\n });\n }\n\n // Branding handlers\n function onPartnerBrandingChange(e) {\n e.persist();\n setBrandingSet((p) => ({\n ...p,\n ...{\n backgroundType: Number(e.target.value),\n },\n }));\n }\n function onPartnerLoginColorChange(e) {\n e.persist();\n setBrandingSet((p) => ({\n ...p,\n ...{\n backgroundColor: e.target.value,\n },\n }));\n }\n\n if (!logoSet || !brandingSet) return null;\n\n return (\n <>\n \n Edit partner branding: {partner.name}\n \n \n \n \n {tabList.map((tab, index) => (\n \n e.button === 2 && e.preventDefault()\n }\n sx={customTabStylesCombineTheme}\n _selected={{\n ...selectedTabStylesCombineTheme,\n textColor: darkMode\n ? 'rgba(255, 255, 255)'\n : 'inherit',\n }}\n _focus={{\n boxShadow:\n '0 0 0 3px rgba(153, 202, 255, 1)',\n }}>\n {tab}\n \n ))}\n \n \n \n \n \n {/* Logo */}\n \n Logo\n \n\n {/* Logos*/}\n \n {/* Logo - White Bg */}\n \n \n Logo, white background\n \n \n \n {logoFileType === 'png' && (\n \n )}\n {logoFileType === 'svg' && (\n \n )}\n \n \n Choose File\n \n \n \n \n\n {/* Logo - Dark Bg */}\n \n \n Logo, dark background\n \n \n \n {darkLogoFileType === 'png' && (\n \n )}\n {darkLogoFileType === 'svg' && (\n \n )}\n \n \n Choose File\n \n \n \n \n\n {/* Logo - Favicon */}\n \n \n Favicon\n \n \n \n {faviconFileType === 'png' && (\n \n )}\n {faviconFileType === 'svg' && (\n \n )}\n \n \n Choose File\n \n \n \n \n \n\n \n\n \n Login background\n \n\n \n\n \n Background Type\n \n \n\n \n\n {/* Login - Solid bg */}\n {brandingSet.backgroundType === 1 && (\n \n \n Background Color\n \n \n \n )}\n\n {/* Login - Bg Image */}\n {brandingSet.backgroundType === 2 && (\n \n \n Background Image\n \n \n \n {bgImageFileType === 'png' && (\n \n )}\n {bgImageFileType === 'svg' && (\n \n )}\n \n \n Choose File\n \n \n \n \n )}\n\n \n\n \n Login Preview\n \n\n \n\n {/* Save / Cancel */}\n \n \n dispatch({ type: 'RESET_MODAL' })\n }\n data-walkthroughid={`${branding.ufBackButton}/logos`}>\n Back\n \n \n Save\n \n \n \n \n \n \n \n \n \n \n \n \n );\n}\n","import React, { useCallback, useEffect, useState } from 'react';\nimport { Row, Container, Col } from 'react-bootstrap';\nimport { TextField } from '@material-ui/core';\nimport { useSelector, useDispatch } from 'react-redux';\nimport { Skeleton } from '@material-ui/lab';\n\nimport { MultiSelect, LoadingFieldDropdown2 } from '../../../../components';\nimport { axios } from '../../../../services/axios';\nimport { onModalError } from '../../../../components/tables/TableAndModal';\n\nimport walkthroughIds from '../../walkthroughIds.js';\nimport config from '@/config.json';\n\n/*\n * Form that is rendered when adding or editing a partner\n */\nconst General = (props) => {\n const dispatch = useDispatch();\n const { setState, voicePoliciesAvailable } = props;\n const [plans, setPlans] = useState([]);\n const [selectedPlan, setSelectedPlan] = useState({\n id: '',\n name: '',\n });\n const [status, setStatus] = useState('idle');\n\n // modal data from State\n const {\n data: modalData,\n state,\n mode: modalMode,\n stateError: modalStateError,\n } = useSelector((state) => {\n return {\n ...state.modal,\n };\n });\n\n // navigation list from state\n const { currentWholesaler } = useSelector((state) => {\n return { ...state.navigationLists };\n });\n\n const { general } = walkthroughIds.partners;\n\n const handlePlanChange = (v) => {\n const selectedPlan = plans.find((plan) => plan.id === v);\n setSelectedPlan(selectedPlan);\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n defaultPartnerPlanID: v,\n },\n });\n };\n\n // get plans for ths partner and assign it to state\n useEffect(() => {\n if (modalData?.id) {\n axios\n .get('/partner/' + modalData?.id + '/plans/assigned')\n .then((res) => {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n plans: res.data,\n },\n });\n })\n .catch((e) => onModalError(e));\n }\n }, [modalData?.id]);\n\n const fetchPlans = useCallback(() => {\n setStatus('loading');\n return axios\n .get(`/wholesaler/${currentWholesaler}/plans`, {\n params: {\n wholesalerOnly: true,\n },\n })\n .then(\n (res) => {\n setStatus('success');\n const mapPlans = res.data.map((plan) => ({\n id: plan.id,\n name: plan.name,\n }));\n setPlans(mapPlans);\n // setPlans(res.data);\n },\n (rej) => console.error(rej),\n )\n .finally(() => setStatus('idle'));\n }, [currentWholesaler]);\n\n useEffect(() => {\n fetchPlans();\n }, []);\n\n if (status === 'loading' && modalMode === 'Add') {\n return (\n \n \n \n \n \n );\n }\n\n // return a container with the form fields required for a parnter\n return (\n <>\n \n {/* Friendly Company Name */}\n {modalMode === 'Add' && (\n \n \n {\n setState({ name: e.target.value });\n setState({ entityName: e.target.value });\n }}\n data-walkthroughid={general.ufPartnerNameInput}\n />\n \n
\n )}\n {modalMode !== 'Add' && (\n <>\n \n \n {\n setState({ name: e.target.value });\n }}\n data-walkthroughid={\n general.ufFriendlyNameInput\n }\n />\n \n
\n \n \n {\n setState({\n entityName: e.target.value,\n });\n }}\n data-walkthroughid={\n general.ufLegalNameInput\n }\n />\n \n
\n \n )}\n\n {/* Host Header */}\n \n \n {\n setState({\n hostHeader: e.target.value,\n });\n }}\n data-walkthroughid={general.ufHostHeaderInput}\n />\n \n
\n {modalMode === 'Add' && (\n <>\n {/* Default Partner Plan */}\n \n \n \n \n
\n \n )}\n {modalMode !== 'Add' && (\n <>\n {/* Business Number */}\n \n \n {\n setState({\n businessNumber: e.target.value,\n });\n }}\n data-walkthroughid={\n general.ufCompanyRegNumberInput\n }\n />\n \n
\n {/* Primary Contact - Name */}\n \n \n {\n setState({\n primaryContactName: e.target.value,\n });\n }}\n data-walkthroughid={\n general.ufPrimaryContactNameInput\n }\n />\n \n
\n {/* Primary Contact - Email */}\n \n \n {\n setState({\n primaryContactEmail: e.target.value,\n });\n }}\n data-walkthroughid={\n general.ufPrimaryContactEmailInput\n }\n />\n \n
\n {/* Primary Contact - Phone */}\n \n \n {\n setState({\n primaryContactPhone: e.target.value,\n });\n }}\n data-walkthroughid={\n general.ufPrimaryContactPhoneInput\n }\n />\n \n
\n {/* Accounts Contact Email */}\n \n \n {\n setState({\n accountsContactEmail:\n e.target.value,\n });\n }}\n data-walkthroughid={\n general.ufAccountsContactEmailInput\n }\n />\n \n
\n {/* Support Contact Email */}\n \n \n {\n setState({\n supportContactEmail: e.target.value,\n });\n }}\n data-walkthroughid={\n general.ufSupportContactEmailInput\n }\n />\n \n
\n \n )}\n \n \n );\n};\n\nexport default General;\n","import React from 'react';\nimport { Button, Row, Col, Container, Form } from 'react-bootstrap';\nimport { useSelector, useDispatch } from 'react-redux';\nimport { Box } from '@material-ui/core';\n\nimport { axios } from 'services/axios';\nimport { onModalError } from 'components/tables/TableAndModal';\n\nimport 'pages/organisations/companies/edit/alert.css';\nimport { COMPANY, PARTNER, WHOLESALER } from './BillingForm';\nimport { CANNOT_DELETE_MODE } from 'components/tables/ReduxModal';\nimport walkthroughIds from '../walkthroughIds';\n\n/*\n * Admin form for companies in the edit tab\n * Has a danger zone component with more senstive settings\n * Also has the ability to convert a company off trial\n */\nconst DeletePartnerWS = ({ mode }) => {\n const dispatch = useDispatch();\n\n // modal data from state\n const { state, data: modalData } = useSelector((state) => {\n return { ...state.modal };\n });\n\n const isPartner = mode === PARTNER;\n const isWS = mode === WHOLESALER;\n const entity = isPartner ? 'Partner' : 'Wholesaler';\n const entitySub = isPartner ? 'Companies' : 'Partners';\n\n // onclick Delete button, checks if partner/WS still have companies/partners under them & numbers assigned\n const onDeleteHandler = () => {\n Promise.all([\n isPartner\n ? axios.get(`/partner/${state?.id}/numberblocks/`)\n : axios.get(`/numberblocks/${state?.id}/`),\n isPartner\n ? axios.get(`/companies/${state?.id}`)\n : axios.get(`/partners/${state?.id}`),\n ])\n .then(([numBlockResponse, subResponse]) => {\n const numBlockIsEmpty =\n numBlockResponse.data.length === 0; // dont proceed if they have >= 1 num blocks assigned under them\n const partnerSubData =\n isPartner &&\n subResponse.data.filter((v) => v.id !== state?.id);\n const partnerSubIsEmpty =\n isPartner && partnerSubData.length === 0; // have at least 1 company under them that is not themself, dont proceed\n\n const wsSubIsEmpty = isWS && subResponse.data.length === 0; // dont proceed if they have >= 1 partner(s) under them\n\n const issues = {\n numberBlocks: {\n message:\n !numBlockIsEmpty &&\n `There are still ${numBlockResponse.data.length} Number Blocks assigned to this ${entity}.`,\n\n response: numBlockResponse.data,\n },\n sub: {\n message:\n (isPartner ? !partnerSubIsEmpty : !wsSubIsEmpty) &&\n `There are still ${\n isPartner\n ? partnerSubData.length\n : subResponse.data.length\n } ${entitySub} assigned to this ${entity}.`,\n\n response: isPartner ? partnerSubData : subResponse.data,\n },\n };\n\n dispatch({\n type: 'OPEN_MODAL',\n payload: {\n mode: CANNOT_DELETE_MODE,\n uploading: false,\n loading: false,\n data: modalData,\n state: {\n ...state,\n issues,\n isNextButtonDisabled:\n issues.numberBlocks.message ||\n issues.sub.message,\n },\n },\n });\n })\n .catch(onModalError);\n };\n\n // rendering the form and danger zone\n return (\n \n );\n};\n\nexport default DeletePartnerWS;\n","import {useSelector} from 'react-redux';\nimport {COMPANY, PARTNER, WHOLESALER} from './BillingForm';\nimport CloseRoundedIcon from '@material-ui/icons/CloseRounded';\nimport {validate} from '@material-ui/pickers';\nimport CheckRounded from '@material-ui/icons/CheckRounded';\n\nexport default function CouldNotDeletePartnerWS({mode}) {\n const {state: modalState} = useSelector((state) => state.modal);\n const isPartner = mode === PARTNER;\n const entity = isPartner ? 'Partner' : 'Wholesaler';\n const entitySub = isPartner ? 'Companies' : 'Partners';\n\n return (\n <>\n {modalState?.isNextButtonDisabled\n ? `Can not delete this ${entity}, as it is still in use.`\n : `You can delete this ${entity}.`}\n \n {modalState?.issues?.numberBlocks?.message ? (\n - \n \n {modalState?.issues?.numberBlocks?.message}\n {modalState?.issues?.numberBlocks?.response && (\n
\n {modalState?.issues?.numberBlocks?.response.map(\n (v) => (\n \n {`+${v.first} to +${v.last}`}\n \n ),\n )}\n
\n )}\n \n ) : (\n - \n \n {`There are no Number Blocks found under this ${entity}.`}\n
\n )}\n {modalState?.issues?.sub?.message ? (\n - \n \n {modalState?.issues?.sub?.message}\n {modalState?.issues?.sub?.response && (\n
\n {modalState?.issues?.sub?.response.map((v) => (\n \n {v.name}\n \n ))}\n
\n )}\n \n ) : (\n - \n \n {`There are no ${entitySub} found under this ${entity}.`}\n
\n )}\n
\n \n );\n}\n\nconst CouldNotDeleteListItem = ({children}) => (\n \n \n {children}\n \n);\n","import React, { useState, useEffect, useRef, useMemo } from 'react';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport FiberManualRecordRoundedIcon from '@material-ui/icons/FiberManualRecordRounded';\nimport Tabs from '@material-ui/core/Tabs';\nimport Tab from '@material-ui/core/Tab';\nimport { useSelector, useDispatch } from 'react-redux';\nimport { Breadcrumbs, Link, Typography } from '@material-ui/core';\nimport WarningRoundedIcon from '@material-ui/icons/WarningRounded';\nimport { Alert } from '@material-ui/lab';\n\nimport {\n TabPanel,\n LoadingFieldDropdown,\n IconButton,\n} from '../../../components';\nimport BillingForm, { PARTNER } from '../sharedComponents/BillingForm';\nimport TableAndModal, {\n modalTitle,\n onModalError,\n} from '../../../components/tables/TableAndModal';\nimport Approval from '../sharedComponents/Approval';\nimport Script from '../../scripts';\nimport config from '../../../config.json';\nimport CustomFieldsForm from '../sharedComponents/CustomFieldsForm';\nimport PartnersEdit from './edit/PartnerEditForm';\nimport { axios } from '../../../services/axios';\nimport PartnerBranding from './edit/PartnerBranding';\nimport { Box, ChakraProvider } from '@chakra-ui/react';\nimport chakratheme from '../../../chakratheme';\nimport DeletePartnerWS from '../sharedComponents/DeletePartnerWS';\nimport CouldNotDeletePartnerWS from '../sharedComponents/CouldNotDeletePartnerWS';\nimport { CANNOT_DELETE_MODE } from 'components/tables/ReduxModal';\nimport { Button } from 'react-bootstrap';\n\nimport walkthroughIds from '../walkthroughIds';\nimport { loadingColumnsConstructor } from 'components/tables/ReduxTable';\nimport EntityCustomFieldsForm from '../sharedComponents/EntityCustomFieldsForm';\n\n/*\n * Partner component when clicking Partner tab of the sidebar\n */\nexport default function Index() {\n const dispatch = useDispatch();\n const tableRef = useRef();\n const [voicePoliciesAvailable, setVoicePoliciesAvailable] = useState([]);\n const [, force] = useState(null);\n const [partners, setPartners] = useState([]);\n\n // scope data from state\n const { currentScope, requiredScope } = useSelector((state) => {\n return { ...state.login };\n });\n\n // view data from state\n const { modalTab, breadcrumb } = useSelector((state) => {\n return { ...state.view };\n });\n\n // navigation data from state\n const { currentWholesaler } = useSelector((state) => {\n return { ...state.navigationLists };\n });\n\n // modal Data from state\n const { modalData, modalState, modalMode } = useSelector((state) => {\n return {\n modalLoading: state.modal.loading,\n modalData: state.modal.data,\n modalState: state.modal.state,\n modalMode: state.modal.mode,\n modalStateError: state.modal.stateError,\n modalUploading: state.modal.uploading,\n };\n });\n\n // table data from state\n const { state: tableState, loading: tableLoading } = useSelector(\n (state) => {\n return {\n ...state.table,\n };\n },\n );\n\n // script data from state\n const { script } = useSelector((state) => {\n return {\n script: { ...state.script },\n };\n });\n\n // setting sdata from state\n const { darkMode } = useSelector((state) => {\n return { ...state.settings };\n });\n\n // function to simplify setting state\n const setState = (payload) => {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload,\n });\n };\n const tabList = ['General', 'Billing & Invoice', 'Custom', 'Admin'];\n\n // default columns for the table\n const defaultColumns = [\n {\n title: 'Friendly Company Name',\n defaultSort: 'asc',\n\n field: 'name',\n },\n {\n title: 'Legal Entity Name',\n\n field: 'entityName',\n },\n {\n title: 'Status',\n field: 'status',\n lookup: {\n 0: (\n \n \n \n ),\n 2: (\n \n \n \n ),\n 20: (\n \n \n \n ),\n },\n lookupDescription: config.companies.statusNavbarJSON,\n },\n {\n title: 'Host Header',\n field: 'hostHeader',\n doNotOverrideSort: true,\n },\n\n {\n title: 'Default Partner Plan',\n field: 'defaultPartnerPlan.name',\n render: (rowData) => {\n if (!rowData.defaultPartnerPlan) {\n return (\n \n }\n />\n );\n }\n return rowData?.defaultPartnerPlan?.name;\n },\n },\n ...config.table.custom,\n {\n title: 'Service Countries',\n field: 'serviceCountries',\n hiddenByColumnsButton: true,\n hidden: true,\n },\n ...config.table.customPartner,\n {\n title: 'Partner Service Countries',\n field: 'pServiceCountries',\n hiddenByColumnsButton: true,\n hidden: true,\n },\n {\n title: 'Partner ID',\n field: 'id',\n hiddenByColumnsButton: true,\n hidden: true,\n },\n ];\n\n const loadingColumns = useMemo(\n () => loadingColumnsConstructor(defaultColumns),\n [defaultColumns],\n );\n const dummyTable = [];\n const dummyTableLength = 12;\n\n for (let i = 0; i < dummyTableLength; i++) {\n const obj = {\n title: `Title ${i + 1}`,\n field: `Field ${i + 1}`,\n };\n dummyTable.push(obj);\n }\n\n useEffect(() => {\n if (modalMode != undefined) {\n axios\n .get(\n currentScope < 80\n ? '/partners/' + currentWholesaler\n : '/partners/all',\n )\n .then((response) => {\n setPartners(response.data);\n dispatch({ type: 'CHANGE_TABLE_LOADING' });\n });\n }\n }, [modalMode]);\n\n // set voice policies based on a API call once regions has been set\n useEffect(() => {\n if (\n Array.isArray(modalState?.regions) &&\n modalState?.regions.length >= 1\n ) {\n axios\n .get(\n `/VoicePolicies/Regions${\n '?Regions=' +\n modalState?.regions\n .map((v) => {\n if (typeof v === 'string') {\n return v;\n }\n return v?.id;\n })\n .join('&Regions=')\n }`,\n )\n .then((res) => {\n setVoicePoliciesAvailable(res.data);\n })\n .catch((e) => {\n onModalError(e);\n });\n } else {\n setVoicePoliciesAvailable([]);\n }\n }, [modalState?.regions]);\n\n // function to render the modal content\n const renderModalContent = () => {\n if (modalMode === 'Edit') {\n return (\n \n {\n dispatch({\n type: 'CHANGE_MODAL_TAB_VIEW',\n payload: i,\n });\n }}\n indicatorColor=\"primary\"\n textColor=\"primary\"\n centered\n aria-label=\"full width tabs example\">\n {tabList.map((tab, index) => (\n \n ))}\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n }\n\n // render approval\n if (modalMode === 'Approval') {\n return ;\n }\n\n if (modalMode === CANNOT_DELETE_MODE) {\n return ;\n }\n\n if (modalMode === 'Delete') {\n return (\n \n Are you sure you want to delete {modalState?.name} ? This\n will de-activate {modalState?.name} , set the latest invoice\n to finalizing, and stop all future billing.\n \n );\n }\n\n // return tab view with partners general form\n return (\n \n {\n dispatch({\n type: 'CHANGE_MODAL_TAB_VIEW',\n payload: i,\n });\n }}\n indicatorColor=\"primary\"\n textColor=\"primary\"\n centered\n aria-label=\"full width tabs example\">\n \n \n \n \n \n \n );\n };\n\n useEffect(() => {\n if (!tableState?.modified && tableState?.data?.length > 0) {\n const statusEnum = tableState?.data?.reduce((prev, current) => {\n if (!prev[current.status]) {\n switch (current.status) {\n case 0:\n prev[current.status] = (\n \n \n \n );\n break;\n case 3: //for pending approval\n prev[current.status] = (\n \n \n \n );\n break;\n case 20:\n prev[current.status] = (\n \n \n \n );\n break;\n default:\n prev[current.status] = (\n \n \n \n );\n\n break;\n }\n }\n return prev;\n }, {});\n\n dispatch({\n type: 'CHANGE_TABLE_STATE',\n payload: {\n ...tableState,\n modified: true,\n\n columns: defaultColumns.map(({ field, ...rest }) => {\n if (field === 'status') {\n return {\n field,\n ...rest,\n lookup: statusEnum,\n customSort: (l, r) => {\n const leftValue =\n typeof l === 'object'\n ? l.status ?? 0\n : l ?? 0;\n const rightValue =\n typeof r === 'object'\n ? r.status ?? 0\n : r ?? 0;\n return leftValue - rightValue;\n },\n };\n }\n return {\n field,\n ...rest,\n };\n }),\n },\n });\n\n force();\n }\n }, [tableState?.data, tableState?.modified]);\n\n // breadcrumb for the top of the page\n if (breadcrumb !== 'all') {\n return (\n <>\n \n {\n e.preventDefault();\n dispatch({\n type: 'CHANGE_BREADCRUMB_VIEW',\n payload: 'all',\n });\n dispatch({\n type: 'RESET_SCRIPT',\n });\n }}>\n All Partners\n \n \n {\n return status === 2 || status === 20;\n },\n )}\n onChange={(v) => {\n dispatch({\n type: 'OPEN_SCRIPT',\n payload: { id: v },\n });\n }}\n searchable\n onDisplayDropdown={(value) => {\n if (typeof value === 'string') {\n const { name, status } =\n tableState?.data?.find(\n (v) => v.id === value,\n );\n return (\n name +\n ' - ' +\n config.companies.statusNavbarJSON[\n status\n ]\n );\n }\n const { name, status } = value;\n return (\n name +\n ' - ' +\n config.companies.statusNavbarJSON[status]\n );\n }}\n noEmptyOption\n fieldValue={script.rowData?.id}\n />\n
\n Script\n \n
\n \n \n );\n }\n\n // move thise outside of renderModalContent, so we can isolate the branding component from the\n // rest of the modal stuff\n if (modalMode === 'Change Logo') {\n return (\n \n \n \n );\n }\n\n // return table and modal\n return (\n {\n var result = [];\n if (modalState?.lightModeFile) {\n var formData = new FormData();\n formData.append('file', modalState?.lightModeFile);\n result.push(\n axios.post(\n '/partner/' + modalData?.id + '/logo',\n formData,\n {\n headers: {\n 'Content-Type': 'multipart/form-data',\n },\n params: { mode: 'light' },\n },\n ),\n );\n }\n if (modalState?.darkModeFile) {\n var formData2 = new FormData();\n formData2.append('file', modalState?.darkModeFile);\n result.push(\n axios.post(\n '/partner/' + modalData?.id + '/logo',\n formData2,\n {\n headers: {\n 'Content-Type': 'multipart/form-data',\n },\n params: { mode: 'dark' },\n },\n ),\n );\n }\n if (modalState?.faviconFile) {\n var formData3 = new FormData();\n formData3.append('file', modalState?.faviconFile);\n result.push(\n axios.post(\n '/partner/' + modalData?.id + '/logo',\n formData3,\n {\n headers: {\n 'Content-Type': 'multipart/form-data',\n },\n params: { mode: 'favicon' },\n },\n ),\n );\n }\n return Promise.all(result);\n }}\n modalUpload={(freshData, state) => {\n if (state?.trialEndLocal) {\n return {\n ...state,\n trialEnd: new Date(state?.trialEndLocal)?.toUTCString(),\n enabled: true, //hardcode for partners\n trunkLocationID: 'MEL',\n };\n }\n if (modalMode === 'Add') {\n return {\n ...freshData,\n ...state,\n trunkLocationID: 'MEL',\n enabled: true, //hardcode for partners\n };\n }\n\n return {\n ...freshData,\n ...state,\n trunkLocationID: 'MEL',\n enabled: true, //hardcode for partners\n };\n }}\n modalInitState={{\n isActive: true,\n wholesalerID: currentWholesaler,\n mode: darkMode ? 'dark' : 'light',\n }}\n title=\"Partners\"\n add\n groupable\n filterable\n rowActions={{\n editable: true,\n changeLogo: requiredScope >= 60,\n }}\n modalButtons={\n modalMode === CANNOT_DELETE_MODE && (\n {\n e.preventDefault();\n dispatch({\n type: 'OPEN_MODAL',\n payload: {\n mode: 'Delete',\n uploading: false,\n loading: false,\n data: modalData,\n state: modalState,\n },\n });\n }}\n data-walkthroughid={\n walkthroughIds.partners.ufDeleteBtn\n }>\n Delete\n \n )\n }\n onModalSucceed={\n modalMode === 'Add' &&\n function (result) {\n dispatch({\n type: 'OPEN_MODAL',\n payload: {\n mode: 'Edit',\n data: result?.data,\n },\n });\n }\n }\n modalValidate={() => {\n if (modalMode === 'Approval') {\n return true;\n }\n if (modalMode === 'Change Logo') {\n const newErrorState = {\n lightModeFile: modalState?.lightModeFile?.type\n ? modalState?.lightModeFile?.type !== 'image/png' &&\n 'Only png file is allowed.'\n : false,\n darkModeFile: modalState?.darkModeFile?.type\n ? modalState?.darkModeFile?.type !== 'image/png' &&\n 'Only png file is allowed.'\n : false,\n faviconFile: modalState?.faviconFile?.type\n ? modalState?.faviconFile?.type !== 'image/png' &&\n 'Only png file is allowed.'\n : false,\n };\n dispatch({\n type: 'CHANGE_MODAL_STATE_ERROR',\n payload: newErrorState,\n });\n return !(\n newErrorState.darkModeFile ||\n newErrorState.lightModeFile ||\n newErrorState.faviconFile\n );\n } else {\n const newErrorState = {\n name:\n (!modalState?.name ||\n modalState?.name?.length < 1) &&\n 'Field is required.',\n hostHeader:\n modalState?.hostHeader &&\n new RegExp(':|/').test(modalState.hostHeader) &&\n 'Host header cannot contain protocol in front of URL.',\n voicePolicies:\n modalState?.voicePolicies?.some(({ id }) => {\n return !voicePoliciesAvailable.find(\n (vpItem) => vpItem.id === id,\n );\n }) && 'Some Voice Policies are not valid.',\n pAttribute1:\n modalState?.pAttribute1?.length > 100 &&\n 'Maximum field length is 100 characters. ',\n pAttribute2:\n modalState?.pAttribute2?.length > 100 &&\n 'Maximum field length is 100 characters. ',\n pAttribute3:\n modalState?.pAttribute3?.length > 100 &&\n 'Maximum field length is 100 characters. ',\n };\n dispatch({\n type: 'CHANGE_MODAL_STATE_ERROR',\n payload: newErrorState,\n });\n return !(\n newErrorState.name ||\n newErrorState.hostHeader ||\n newErrorState.pAttribute1 ||\n newErrorState.pAttribute2 ||\n newErrorState.pAttribute3 ||\n newErrorState.voicePolicies\n );\n }\n }}\n maxBodyHeight={window.innerHeight * config.plainView.tableHeight}\n modalTitle={modalTitle(\n modalData,\n 'name',\n ' Partners ',\n modalMode === CANNOT_DELETE_MODE &&\n !modalState?.isNextButtonDisabled\n ? 'Delete'\n : modalMode,\n )}\n modalContent={renderModalContent()}\n />\n );\n}\n","import React from 'react';\nimport {Row, Container, Col} from 'react-bootstrap';\nimport {TextField} from '@material-ui/core';\nimport {useSelector, useDispatch} from 'react-redux';\n\nimport {onModalError} from '../../../../components/tables/TableAndModal';\nimport {LoadingFieldDropdown, MultiSelect} from '../../../../components';\n\n/**\n * Standard form for editing a wholesaler\n */\nconst General = () => {\n const dispatch = useDispatch();\n\n // modal data from state\n const {\n data: modalData,\n state,\n mode: modalMode,\n stateError: modalStateError,\n } = useSelector((state) => {\n return {\n ...state.modal,\n };\n });\n\n // navigation data from state\n const {currentWholesaler} = useSelector((state) => {\n return {...state.navigationLists};\n });\n\n // return the form for editing a wholesaler\n return (\n <>\n \n {/* Name */}\n \n \n {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n name: e.target.value,\n },\n });\n }}\n />\n \n
\n {modalMode === 'Add' && (\n <>\n {/* Default Plan */}\n \n \n {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n defaultPlanID: v,\n },\n });\n }}\n fieldValue={state?.defaultPlanID}\n toggleLimit={5}\n noEmptyOption\n fieldFetch={`/wholesaler/${currentWholesaler}/plans/available`}\n />\n \n
\n {/* Business Number */}\n \n \n {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n businessNumber: e.target.value,\n },\n });\n }}\n />\n \n
\n {/* Primary Contact Name */}\n \n \n {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n primaryContactName:\n e.target.value,\n },\n });\n }}\n />\n \n
\n {/* Primary Contact Email*/}\n \n \n {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n primaryContactEmail:\n e.target.value,\n },\n });\n }}\n />\n \n
\n {/* Primary Contact Phone */}\n \n \n {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n primaryContactPhone:\n e.target.value,\n },\n });\n }}\n />\n \n
\n {/* Accounts Contact Email */}\n \n \n {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n accountsContactEmail:\n e.target.value,\n },\n });\n }}\n />\n \n
\n {/* Support Contact Email */}\n \n \n {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n supportContactEmail:\n e.target.value,\n },\n });\n }}\n />\n \n
\n \n )}\n {modalMode !== 'Add' && (\n <>\n {/* Carriers */}\n \n \n \n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n carriers: v,\n },\n })\n }\n />\n \n
\n {/* Regions */}\n \n \n \n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n regions: v,\n },\n })\n }\n onError={onModalError}\n />\n \n
\n {/* Business Number */}\n \n \n {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n businessNumber: e.target.value,\n },\n });\n }}\n />\n \n
\n {/* Primary Contact Name */}\n \n \n {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n primaryContactName:\n e.target.value,\n },\n });\n }}\n />\n \n
\n {/* Primary Contact Email*/}\n \n \n {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n primaryContactEmail:\n e.target.value,\n },\n });\n }}\n />\n \n
\n {/* Primary Contact Phone */}\n \n \n {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n primaryContactPhone:\n e.target.value,\n },\n });\n }}\n />\n \n
\n {/* Accounts Contact Email */}\n \n \n {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n accountsContactEmail:\n e.target.value,\n },\n });\n }}\n />\n \n
\n {/* Support Contact Email */}\n \n \n {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n supportContactEmail:\n e.target.value,\n },\n });\n }}\n />\n \n
\n \n )}\n \n \n );\n};\n\nexport default General;\n","import React, { useRef } from 'react';\nimport Tabs from '@material-ui/core/Tabs';\nimport Tab from '@material-ui/core/Tab';\nimport WarningRoundedIcon from '@material-ui/icons/WarningRounded';\nimport {useSelector, useDispatch} from 'react-redux';\nimport {Alert} from '@material-ui/lab';\nimport {TabPanel, IconButton} from '../../../components/';\nimport BillingForm, {WHOLESALER} from '../sharedComponents/BillingForm';\nimport TableAndModal, {\n modalTitle,\n} from '../../../components/tables/TableAndModal';\nimport {CustomFieldsForm} from '../';\nimport config from '../../../config.json';\nimport WholesalerEdit from './edit/WholesalerEditForm';\nimport CouldNotDeletePartnerWS from '../sharedComponents/CouldNotDeletePartnerWS';\nimport DeletePartnerWS from '../sharedComponents/DeletePartnerWS';\nimport {CANNOT_DELETE_MODE} from 'components/tables/ReduxModal';\nimport {Button} from 'react-bootstrap';\nimport EntityCustomFieldsForm from '../sharedComponents/EntityCustomFieldsForm';\n\n/**\n * Wholesaler Form when clicking the 'Wholesaler' Option in the GA tab of the sidebar\n */\nexport default function Index(props) {\n const dispatch = useDispatch();\n const tableRef = useRef();\n\n // view data from state\n const {modalTab} = useSelector((state) => {\n return {...state.view};\n });\n\n // modal data from state\n const {modalData, modalState, modalMode} = useSelector((state) => {\n return {\n modalLoading: state.modal.loading,\n modalData: state.modal.data,\n modalState: state.modal.state,\n modalMode: state.modal.mode,\n modalStateError: state.modal.stateError,\n modalUploading: state.modal.uploading,\n };\n });\n\n // function to simplify change handlers\n const setState = (payload) => {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload,\n });\n };\n\n // default columsn for the table\n const defaultColumns = [\n {\n title: 'Name',\n field: 'name',\n },\n {\n title: 'Default Plan',\n field: 'defaultWholesalerPlan.name',\n render: (rowData) => {\n if (!rowData.defaultWholesalerPlan) {\n return (\n \n }\n />\n );\n }\n return rowData?.defaultWholesalerPlan?.name;\n },\n },\n ...config.table.custom,\n {\n title: \"Service Countries\",\n field: \"serviceCountries\",\n hiddenByColumnsButton: true,\n hidden: true\n }\n ];\n\n // function to render the modal content\n const renderModalContent = () => {\n switch (modalMode) {\n case CANNOT_DELETE_MODE:\n return ;\n case 'Delete':\n return (\n \n Are you sure you want to delete {modalState?.name} ?\n This will de-activate {modalState?.name} , set the\n latest invoice to finalizing, and stop all future\n billing.\n \n );\n case 'Edit':\n return (\n <>\n {\n dispatch({\n type: 'CHANGE_MODAL_TAB_VIEW',\n payload: i,\n });\n }}\n indicatorColor=\"primary\"\n textColor=\"primary\"\n centered\n aria-label=\"full width tabs example\">\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n default:\n return ;\n }\n };\n\n // returns a Table and a Modal\n return (\n {\n if (state.trialEnd) {\n return {\n ...freshData,\n ...state,\n trialEnd: new Date(state?.trialEnd).toISOString(),\n };\n }\n return {\n ...freshData,\n ...state,\n };\n }}\n title=\"Wholesalers\"\n defaultColumns={defaultColumns}\n add\n groupable\n filterable\n rowActions={{\n editable: true,\n }}\n modalButtons={\n modalMode === CANNOT_DELETE_MODE && (\n {\n e.preventDefault();\n dispatch({\n type: 'OPEN_MODAL',\n payload: {\n mode: 'Delete',\n uploading: false,\n loading: false,\n data: modalData,\n state: modalState,\n },\n });\n }}>\n Delete\n \n )\n }\n modalValidate={() => {\n const newErrorState = {\n name:\n (!modalState?.name || modalState?.name?.length < 1) &&\n 'Field is required.',\n attribute1:\n modalState?.attribute1?.length > 100 &&\n 'Maximum field length is 100 characters. ',\n attribute2:\n modalState?.attribute2?.length > 100 &&\n 'Maximum field length is 100 characters. ',\n attribute3:\n modalState?.attribute3?.length > 100 &&\n 'Maximum field length is 100 characters. ',\n };\n dispatch({\n type: 'CHANGE_MODAL_STATE_ERROR',\n payload: newErrorState,\n });\n return !(\n newErrorState.name ||\n newErrorState.attribute1 ||\n newErrorState.attribute2 ||\n newErrorState.attribute3\n );\n }}\n maxBodyHeight={window.innerHeight * config.plainView.tableHeight}\n modalTitle={modalTitle(\n modalData,\n 'name',\n ' Wholesalers ',\n modalMode === CANNOT_DELETE_MODE &&\n !modalState?.isNextButtonDisabled\n ? 'Delete'\n : modalMode,\n )}\n modalContent={renderModalContent()}\n />\n );\n}\n","import store from '@/store/store';\nimport { redirect } from 'react-router-dom';\n\nfunction getCurrentStoreState() {\n const currentState = store.getState();\n return currentState;\n}\n\nfunction getAccessToken() {\n const token = store.getState().login?.token;\n return token;\n}\n\nfunction handleGoBack(navigate, pathname, parentPath) {\n if (pathname.split('/').length > 2) {\n navigate(`/${parentPath}`);\n } else {\n navigate(-1);\n }\n}\n\nfunction isLoggedIn() {\n const currentState = getCurrentStoreState();\n\n const isLoggedIn =\n JSON.parse(\n window.localStorage.getItem(import.meta.env.VITE_APP_LOGIN_SECRET),\n )?.loggedIn === 'true' || currentState.login.loggedIn;\n return isLoggedIn;\n}\n\nfunction isRequiredMFA() {\n const currentState = getCurrentStoreState();\n\n const isRequiredMFA =\n JSON.parse(\n window.localStorage.getItem(import.meta.env.VITE_APP_LOGIN_SECRET),\n )?.showMFA === 'true' || currentState.login.showMFA;\n console.log('currentState.login.showMFA', isRequiredMFA);\n return isRequiredMFA;\n}\n\nfunction requiredLoggedIn() {\n if (!isLoggedIn()) {\n throw redirect('/');\n }\n}\n\nexport {\n store,\n getCurrentStoreState,\n getAccessToken,\n handleGoBack,\n isLoggedIn,\n isRequiredMFA,\n requiredLoggedIn,\n};\n","import { axios } from '@/services/axios';\n\nimport { getCurrentStoreState } from '@tcap/data-router/utils/helpers';\n\nconst get = async (currentPartner) => {\n try {\n const res = await axios.get(`ApprovalCodes/${currentPartner}`, {\n headers: {\n 'X-RequestScope': 40,\n },\n });\n\n return res.data;\n } catch (error) {\n console.error('Error fetching approval codes: ', error);\n }\n};\n\nexport const getApprovalCodesQuery = (currentPartner) => ({\n queryKey: ['approvalCodes', currentPartner],\n queryFn: async () => get(currentPartner),\n});\n\nconst approvalCodeLoader = (queryClient) => async () => {\n const currentState = getCurrentStoreState();\n const { loggedIn, requiredScope } = currentState.login;\n const { currentPartner } = currentState.navigationLists;\n const { queryKey, queryFn } = getApprovalCodesQuery(currentPartner);\n const approvalCodes =\n loggedIn && requiredScope >= 40\n ? await queryClient.ensureQueryData({\n queryKey,\n queryFn,\n staleTime: 1000 * 60 * 2,\n })\n : null;\n return { approvalCodes };\n};\n\nexport { approvalCodeLoader };\n","import { axios } from '@/services/axios';\n\nimport {\n getCurrentStoreState,\n requiredLoggedIn,\n} from '@tcap/data-router/utils/helpers';\n\nconst getJobs = async (params) => {\n try {\n const response = await axios.get('jobs', {\n params,\n });\n\n return response.data;\n } catch (error) {\n console.error('Error fetching jobs: ', error);\n }\n};\n\nexport const getJobsQuery = (params) => ({\n queryKey: [\n 'jobs',\n Object.values(params).filter((param) => Boolean(param))[0],\n ],\n queryFn: () => {\n requiredLoggedIn();\n const jobs = getJobs(params);\n if (!jobs) {\n throw new Response('', { status: 404, statusText: 'Not Found' });\n }\n return jobs;\n },\n});\n\n/**\n * @param {import('@tanstack/react-query').QueryClient} queryClient\n */\nexport const loader = (queryClient) => async () => {\n const currentState = getCurrentStoreState();\n const { currentScope, loggedIn } = currentState.login;\n const { currentWholesaler, currentPartner, currentCompany } =\n currentState.navigationLists;\n const params = {\n wholesalerID: currentScope === 60 ? currentWholesaler : null,\n partnerID: currentScope === 40 ? currentPartner : null,\n companyID: currentScope === 20 ? currentCompany : null,\n };\n const { queryKey, queryFn } = getJobsQuery(params);\n const jobs = loggedIn\n ? await queryClient.ensureQueryData({\n queryKey,\n queryFn,\n staleTime: 1000 * 60 * 2,\n })\n : null;\n\n return { jobs };\n};\n","export async function loginLoader({ request }) {\n return new URL(request.url).searchParams.get('message');\n}\n","export default {\n dashboardsCallStats: {\n datePicker: 'call-stats/input/1',\n searchButton: 'call-stats/button/1',\n groupingSelect: 'call-stats/select/1',\n metricsSelect: 'call-stats/select/2',\n callStatsChart: 'call-stats/canvas/1',\n },\n};\n","import React, { useState, useMemo, useEffect } from 'react';\nimport DateFnsUtils from '@date-io/date-fns';\n// import {Row, Col, Button} from 'react-bootstrap';\nimport { Alert } from '@material-ui/lab';\nimport { useSelector, useDispatch } from 'react-redux';\nimport {\n Box,\n ChakraProvider,\n Heading,\n FormControl,\n FormLabel,\n} from '@chakra-ui/react';\n// import {\n// MuiPickersUtilsProvider,\n// KeyboardDatePicker,\n// } from '@material-ui/pickers';\n// import {Grid} from '@material-ui/core';\nimport { ResponsiveBarCanvas } from '@nivo/bar';\n\nimport { LoadingFieldDropdown } from 'components';\n\nimport { RangeDatepicker } from 'chakra-dayzed-datepicker';\nimport Grid from 'components/v4/Grid';\nimport Button from 'components/v4/Button';\nimport Select from 'components/v4/Select';\n\nimport walkthroughIds from 'pages/dashboards/walkthroughIds';\nimport { chakraDatepicker, chakraDatepickerDarkMode } from '@/constants';\nimport chakratheme, {\n ChakraDatePickerDarkModeStyles,\n ChakraDatePickerStyles,\n} from '@/chakratheme';\n\n// theme from material ui\nconst theme = {\n textColor: '#ffffff',\n fontSize: 11,\n axis: {\n domain: {\n line: {\n stroke: '#777777',\n strokeWidth: 1,\n },\n },\n ticks: {\n line: {\n stroke: '#777777',\n strokeWidth: 3,\n },\n },\n },\n grid: {\n line: {\n stroke: '#dddddd',\n strokeWidth: 1,\n },\n },\n};\n\n/*\n * Component for the Call Stats page of the dashboard\n */\nconst CallDashboard = () => {\n const today = new Date();\n const dispatch = useDispatch();\n const [from, setFrom] = useState(\n new Date(today.getFullYear(), today.getMonth() - 1, today.getDate())\n .toISOString()\n .substring(0, 10),\n );\n const [to, setTo] = useState(new Date().toISOString().substring(0, 10));\n const [mode, setMode] = useState('Calls');\n const [grouping, setGrouping] = useState('Daily');\n const [selectedDates, setSelectedDates] = useState([\n new Date(),\n new Date(),\n ]);\n\n const {\n datePicker,\n searchButton,\n groupingSelect,\n metricsSelect,\n callStatsChart,\n } = walkthroughIds.dashboardsCallStats;\n\n // table data from state\n const { state: tableState, loading: tableLoading } = useSelector(\n (state) => {\n return { ...state.table };\n },\n );\n\n // settings data from state\n const { darkMode } = useSelector((state) => {\n return { ...state.settings };\n });\n\n // navigation data from state\n const { currentCompany } = useSelector((state) => {\n return { ...state.navigationLists };\n });\n\n // colors for the graph\n const colors = {\n 'Inbound (calls)': '#E0F9B5',\n 'Outbound (calls)': '#A5DEE5',\n 'Inbound (mins)': '#E0F9B5',\n 'Outbound (mins)': '#A5DEE5',\n };\n\n // function to get the color for each bar\n const getColor = (bar) => colors[bar.id];\n\n // useMemo to get the data from the table as its a large data set\n const data = useMemo(() => {\n const init = [\n {\n 'Outbound (mins)': 0,\n 'Inbound (mins)': 0,\n date: '',\n 'Outbound (calls)': 0,\n 'Inbound (calls)': 0,\n },\n ];\n if (tableState?.data?.length < 1) {\n return init;\n }\n\n return (\n tableState?.data\n ?.reduce((result, current) => {\n const currentDate =\n grouping === 'Daily'\n ? current.dateTime?.substring(0, 10)\n : current.dateTime?.substring(0, 7);\n const index = result.findIndex((v) => {\n return v.date === currentDate;\n });\n const currentDuration =\n Number(current.duration?.substring(0, 2)) * 3600 +\n Number(current.duration?.substring(3, 5)) * 60 +\n Number(current.duration?.substring(6)); //seconds\n const fieldDuration = `${current.direction} (mins)`;\n const fieldNum = `${current.direction} (calls)`;\n\n if (index === -1) {\n result.push({\n 'Inbound (mins)': 0,\n 'Outbound (mins)': 0,\n 'Inbound (calls)': 0,\n 'Outbound (calls)': 0,\n InboundColor: 'hsl(216, 70%, 50%)',\n OutboundColor: 'hsl(216, 70%, 50%)',\n\n date: currentDate,\n [fieldDuration]: currentDuration,\n [fieldNum]: 1,\n });\n return result;\n } else {\n result[index] = {\n ...result[index],\n [fieldDuration]:\n result[index][fieldDuration] + currentDuration,\n [fieldNum]: result[index][fieldNum] + 1,\n };\n return result;\n }\n }, [])\n .map((v) => ({\n ...v,\n 'Inbound (mins)': Number(v['Inbound (mins)'] / 60).toFixed(\n 2,\n ),\n 'Outbound (mins)': Number(\n v['Outbound (mins)'] / 60,\n ).toFixed(2), //mins\n }))\n .sort((left, right) => {\n return new Date(left.date) - new Date(right.date);\n }) ?? init\n );\n }, [tableState?.data, grouping]);\n\n useEffect(() => {\n if (selectedDates.length > 1) {\n setFrom(new Date(selectedDates[0]).toISOString().substring(0, 10));\n setTo(new Date(selectedDates[1]).toISOString().substring(0, 10));\n }\n }, [selectedDates]);\n\n // useEffect to refresh the dashboard\n useEffect(() => {\n if (!currentCompany) {\n return;\n } else if (tableLoading) {\n dispatch({\n type: 'INIT_WEB_WORKER_STATE',\n payload: {\n fetchURL: `/calldetailrecords/${currentCompany}/${from}/${to}`,\n attribute: 'callDetailRecords',\n },\n });\n }\n }, [currentCompany, tableLoading]);\n\n // onClick to start the search for call records\n const onClick = () => {\n dispatch({\n type: 'INIT_WEB_WORKER_STATE',\n payload: {\n fetchURL: `/calldetailrecords/${currentCompany}/${from}/${to}`,\n attribute: 'callDetailRecords',\n },\n });\n };\n\n // if no company is selected, return a alert\n if (!currentCompany) {\n return (\n \n Please select a partner or a company to view dashboard.\n \n );\n }\n\n // presentational aspect of the dashboard\n return (\n <>\n \n \n Calls Statistics\n \n \n \n \n \n\n \n \n Search\n \n \n \n \n Grouping\n {\n setGrouping(v.target.value);\n }}\n value={grouping}\n />\n \n \n \n \n Metrics\n {\n setMode(v.target.value);\n }}\n />\n \n \n\n \n \n \n \n (\n \n {id}: {value}\n \n )}\n fill={[\n {\n match: {\n id: 'Inbound (mins)',\n },\n id: 'Inbound (mins)',\n },\n {\n match: {\n id: 'Inbound (calls)',\n },\n id: 'Inbound (calls)',\n },\n {\n match: {\n id: 'Outbound (mins)',\n },\n id: 'Outbound (mins)',\n },\n {\n match: {\n id: 'Outbound (calls)',\n },\n id: 'Outbound (calls)',\n },\n ]}\n defs={[\n {\n id: 'Inbound (calls)',\n color: '#42ff21',\n },\n {\n id: 'Outbound (calls)',\n color: '#2596be',\n },\n {\n id: 'Inbound (mins)',\n background: '#42ff21',\n },\n {\n id: 'Outbound (mins)',\n color: '#2596be',\n },\n ]}\n colors={getColor}\n borderColor={{\n from: 'color',\n modifiers: [['darker', 3.0]],\n }}\n axisTop={null}\n axisRight={null}\n axisBottom={{\n orient: 'bottom',\n tickSize: 0,\n tickPadding: 5,\n tickRotation: 45,\n }}\n labelSkipWidth={12}\n labelSkipHeight={12}\n labelTextColor={{\n from: 'color',\n modifiers: [['darker', 3.0]],\n }}\n legends={[\n {\n dataFrom: 'keys',\n anchor: 'top-right',\n direction: 'column',\n justify: false,\n translateX: 120,\n translateY: 0,\n itemsSpacing: 2,\n itemWidth: 100,\n itemHeight: 20,\n itemDirection: 'left-to-right',\n itemOpacity: 0.85,\n symbolSize: 20,\n effects: [\n {\n on: 'hover',\n style: {\n itemOpacity: 1,\n },\n },\n ],\n },\n ]}\n />\n \n \n \n );\n};\n\nexport default CallDashboard;\n","export default {\n adminsGeneral: {\n ufFirstName: 'accounts/admins/input/firstName',\n ufLastName: 'accounts/admins/input/lastName',\n ufIsActive: 'accounts/admins/checkbox/isActive',\n ufPermissionSet: 'accounts/admins/input',\n ufMfaSelect: 'accounts/admins/input/mfa',\n ufEmail: 'accounts/admins/input/email',\n ufResetMfaButton: 'accounts/admins/button/resetMfa',\n ufResetPassword: 'accounts/admins/button/resetPassword',\n ufBackBtn: 'accounts/admins/button/back',\n ufSaveBtn: 'accounts/admins/button/save',\n ufBypassMinPasswordAge: 'accounts/admins/button/bypassMinPasswordAge',\n ufCloseBtn: 'accounts/admins/modal/close',\n ufYesBtn: 'accounts/admins/modal/yes',\n ufOverrideOverstampList: 'accounts/admins/checkbox/overrideOverstamp',\n ufApiDocReader: 'accounts/admins/checkbox/apiDocReader',\n ufAdminDelete: 'accounts/admins/button/delete',\n },\n adminsAdmin: {\n ufOverrideOverstampList: 'accounts/admins/checkbox/overrideOverstamp',\n ufApiDocReader: 'accounts/admins/checkbox/apiDocReader',\n ufAdminDelete: 'accounts/admins/button/delete',\n },\n ufTableEditBtn: 'accounts/admins/button/edit',\n ufAddAdminUser: 'accounts/admins/button/add',\n ufTabButton: 'accounts/admins/tab/',\n ufSSO: 'accounts/admins/button/sso',\n adminSSO: {\n ufDisableSSOBtn: 'accounts/admins/sso/button/disable',\n ufEnableSSOSwitch: 'accounts/admins/sso/switch/enable',\n ufEnforceSSOBtn: 'accounts/admins/sso/checkbox/enforce',\n ufEnforceSSOSwitch: 'accounts/admins/sso/switch/enforce',\n ufSaveBtn: 'accounts/admins/sso/button/save',\n ufCloseBtn: 'accounts/admins/sso/button/close',\n ufProviderBtn: 'accounts/admins/sso/button/provider',\n ufDeactivateBtn: 'accounts/admins/sso/button/deactivate',\n ufVerifyBtn: 'accounts/admins/sso/button/verify/',\n ufActiveBtn: 'accounts/admins/sso/button/active/',\n ufEditBtn: 'accounts/admins/sso/button/edit/',\n ufTenantInput: 'accounts/admins/sso/input/tenant',\n ufOptionBtn: 'accounts/admins/sso/button/option',\n ufEmailInput: 'accounts/admins/sso/input/email',\n ufLookupBtn: 'accounts/admins/sso/button/lookup',\n ufBackBtn: 'accounts/admins/sso/button/back',\n ufSubmitBtn: 'accounts/admins/sso/button/submit',\n ufLookupSearchBtn: 'accounts/admins/sso/lookup/button/search',\n ufEmailLookupInput: 'accounts/admins/sso/lookup/input/email',\n ufLookupCloseBtn: 'accounts/admins/sso/lookup/button/close',\n ufLookupAddBtn: 'accounts/admins/sso/lookup/button/add',\n ufProviderSelect: 'accounts/admins/sso/select/provider',\n },\n adminPasswordPolicy: {\n ufPasswordPolicySwitch: 'accounts/admins/passwordpolicy/switch/enable',\n ufNumberOfDaysInput:\n 'accounts/admins/passwordpolicy/input/numberOfDays',\n ufPasswordReuseLimitInput:\n 'accounts/admins/passwordpolicy/input/reuseLimit',\n ufMinPasswordAgeInput:\n 'accounts/admins/passwordpolicy/input/minPasswordAge',\n ufSaveBtn: 'accounts/admins/passwordpolicy/button/save',\n },\n ufTableApiUserEditBtn: 'accounts/admins/apiUsers/button/edit',\n ufAddApiUser: 'accounts/admins/apiUsers/button/add',\n ufadminApiUserTabButton: 'accounts/admins/apiUsers/tab/',\n adminApiUsers: {\n ufBack: 'accounts/admins/apiUsers/button/back',\n ufCreate: 'accounts/admins/apiUsers/button/create',\n ufSave: 'accounts/admins/apiUsers/button/save',\n ufClose: 'accounts/admins/apiUsers/button/close',\n },\n adminApiUsersGeneral: {\n ufName: 'accounts/admins/apiUsers/input/name',\n ufIsActive: 'accounts/admins/apiUsers/checkbox/isActive',\n ufPermission: 'accounts/admins/apiUsers/input/permission',\n ufExpiration: 'accounts/admins/apiUsers/input/expiration',\n ufTime: 'accounts/admins/apiUsers/input/time',\n },\n adminApiUsersAdmin: {\n ufDelete: 'accounts/admins/apiUsers/button/delete',\n ufModalDelete: 'accounts/admins/apiUsers/modal/button/delete',\n ufReset: 'accounts/admins/apiUsers/button/reset',\n ufModalReset: 'accounts/admins/apiUsers/modal/button/reset',\n },\n};\n","import config from '@/config.json';\nimport AddRoundedIcon from '@material-ui/icons/AddRounded';\nimport EditRoundedIcon from '@material-ui/icons/EditRounded';\nimport { TableAndModal } from 'components/index';\nimport { useRef } from 'react';\nimport { Button } from 'react-bootstrap';\nimport { useSelector } from 'react-redux';\nimport { useNavigate } from 'react-router-dom';\nimport walkthroughIds from '../walkthroughIds';\n\nconst APIUsers = () => {\n const navigate = useNavigate();\n const tableRef = useRef();\n\n const { currentCompany } = useSelector((state) => {\n return { ...state.navigationLists };\n });\n\n const defaultColumns = [\n {\n title: 'Name',\n field: 'name',\n defaultSort: 'asc',\n },\n {\n title: 'API Key',\n field: 'apiKey',\n render: (rowData) => {\n return rowData.apiKey + '...';\n },\n },\n {\n title: 'Permission',\n field: 'permissionSet',\n },\n {\n title: 'Last Logged In',\n field: 'lastLoggedIn',\n type: 'datetime',\n },\n {\n title: 'Expiration',\n field: 'expiration',\n type: 'datetime',\n },\n {\n title: 'Active',\n field: 'isActive',\n width: '5%',\n type: 'boolean',\n },\n ];\n\n const editAPINavigate = (data) => {\n navigate(`/admins/api/${data.id}/edit`, { state: data });\n };\n\n return (\n <>\n {\n navigate('/admins/api');\n }}>\n {' '}\n {' '}\n API User\n \n }\n additionalActions={[\n (rowData) => ({\n icon: () => (\n \n ),\n tooltip: 'Edit API User',\n position: 'row',\n onClick: () => {\n editAPINavigate(rowData);\n },\n }),\n ]}\n groupable\n filterable\n maxBodyHeight={\n window.innerHeight * config.plainView.tableHeight\n }\n />\n \n );\n};\n\nexport default APIUsers;\n","export default {\n permissions: {\n ufCompany: '/permissions/input/companyInput',\n ufReadOnly: '/permissions/checkbox/readOnly',\n ufOptOut: '/permissions/checkbox/optOut',\n ufPermissionSet: '/permissions/input/permissionSet',\n ufDeleteBtn: '/permissions/button/deletePermission',\n ufSaveBtn: '/permissions/permissionsTab/button/saveBtn',\n },\n};\n","/* eslint-disable react-hooks/exhaustive-deps */\nimport { useEffect, useState, useMemo } from 'react';\nimport Accordion from '@material-ui/core/Accordion';\nimport AccordionSummary from '@material-ui/core/AccordionSummary';\nimport AccordionDetails from '@material-ui/core/AccordionDetails';\nimport Typography from '@material-ui/core/Typography';\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\nimport Grid from '@material-ui/core/Grid';\nimport Checkbox from '@material-ui/core/Checkbox';\nimport { useSelector, useDispatch } from 'react-redux';\nimport CircularProgress from '@material-ui/core/CircularProgress';\nimport Fab from '@material-ui/core/Fab';\nimport SaveRoundedIcon from '@material-ui/icons/SaveRounded';\n\nimport { axios } from '../../../services/axios';\nimport { addSpacing, hashObject } from '../../../utils/utils';\nimport './style.css';\nimport config from '../../../config.json';\nimport { onModalError } from '../../../components/tables/TableAndModal';\nimport { Error } from '../../../components';\nimport walkthroughIds from './walkthroughIds';\n\n/*\n * Shows a list of items that a user can have permissions for in the Permissions tab of of a entry from the 'Permissions' Sidebar item\n */\nconst Item = ({ disabled }) => {\n const { loading: tableLoading, child } = useSelector((state) => {\n return { ...state.table };\n });\n const {\n state: modalState,\n hash: modalHash,\n restError,\n } = useSelector((state) => {\n return { ...state.modal };\n });\n\n const dispatch = useDispatch();\n const [expanded, setExpanded] = useState({});\n const [submitData, setSubmitData] = useState({});\n const [uploading, setUploading] = useState(false);\n\n const { ufSaveBtn } = walkthroughIds.permissions;\n\n const hasChanges = useMemo(() => {\n const newHash = hashObject(modalState);\n return newHash !== modalHash;\n }, [modalState]);\n\n const handleOnChange = ({ e, permissionName, scopeNumber, mode }) => {\n var newData = { ...modalState };\n newData[permissionName][scopeNumber][mode] = e.target.checked;\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: newData,\n });\n\n var newSubmitData = { ...submitData };\n if (!newSubmitData[newData[permissionName][scopeNumber].id]) {\n newSubmitData[newData[permissionName][scopeNumber].id] = {\n ...newData[permissionName][scopeNumber],\n [mode]: e.target.checked,\n };\n } else {\n newSubmitData[newData[permissionName][scopeNumber].id][mode] =\n e.target.checked;\n }\n setSubmitData(newSubmitData);\n };\n\n const handleSubmit = () => {\n setUploading(true);\n\n const responses = Object.values(submitData).map((v) =>\n axios.put('/permission/', v),\n );\n Promise.all(responses)\n .then(() => {\n setUploading(false);\n dispatch({\n type: 'CHANGE_TABLE_LOADING',\n });\n })\n .catch((e) => {\n setUploading(false);\n onModalError(e);\n });\n };\n const handleExpand = (panel) => () => {\n setExpanded({ ...expanded, [panel]: !expanded[panel] });\n };\n\n useEffect(() => {\n if (tableLoading) {\n axios\n .get('/permissions/' + child?.id)\n .then((res) => {\n const newData = res.data.reduce((result, currentValue) => {\n const currentValueName = addSpacing(currentValue.name);\n if (!result[currentValueName]) {\n result[currentValueName] = {\n [currentValue.scope]: currentValue,\n };\n return result;\n }\n result[currentValueName][currentValue.scope] =\n currentValue;\n return result;\n }, {});\n dispatch({\n type: 'OPEN_MODAL',\n payload: {\n mode: 'Edit',\n data: newData,\n state: newData,\n hash: hashObject(newData),\n loading: false,\n uploading: false,\n },\n });\n dispatch({\n type: 'CHANGE_TABLE_LOADING',\n });\n setSubmitData({});\n })\n .catch((e) => {\n dispatch({\n type: 'CHANGE_TABLE_ERROR',\n payload: e,\n });\n });\n }\n }, [tableLoading]);\n\n if (tableLoading || uploading) {\n return (\n \n );\n }\n\n return (\n \n {restError && (\n
\n )}\n {hasChanges && (\n
\n \n \n )}\n \n {Object.entries(modalState)\n .sort((left, right) => left[0].localeCompare(right[0]))\n .map(([permissionName, value]) => (\n
\n }>\n \n \n \n {permissionName}\n \n \n {expanded[permissionName] &&\n [\n 'Create',\n 'Read',\n 'Update',\n 'Delete',\n ].map((mode) => (\n \n {mode}\n \n ))}\n \n \n {[20, 40, 60, 80]\n .filter((scopeNumber) => value[scopeNumber])\n .map((scopeNumber) => (\n \n \n \n \n {\n config.scope.json[\n scopeNumber\n ]\n }\n \n {[\n 'create',\n 'read',\n 'update',\n 'delete',\n ].map((mode) => (\n \n {\n handleOnChange({\n e,\n mode,\n scopeNumber,\n permissionName,\n });\n }}\n data-walkthroughid={`/permissions/permissionsTab/${permissionName}/${mode}`}\n />\n \n ))}\n \n
\n \n ))}\n \n ))}\n
\n Before deleting, please ensure that this Permission Set\n is not in use.\n \n This action cannot be undone.\n \n \n );\n default:\n return (\n <>\n \n \n {currentScope === 20 ? (\n \n ) : (\n \n )}\n \n
\n \n \n \n }\n />\n \n \n \n }\n />\n \n
\n \n \n \n \n
\n \n \n );\n }\n };\n\n // function to determine if the rowData can be edited\n const canEdit = (rowData) => {\n switch (requiredScope) {\n case 20:\n return !(\n !rowData?.companyID || //is global\n rowData?.requiredScope > 20 ||\n rowData?.companyID !== currentCompany\n );\n case 40:\n return !(\n !rowData?.companyID || //is global\n rowData?.requiredScope > 40 ||\n rowData?.companyID !== currentCompany\n );\n case 60:\n return !(\n !rowData?.companyID || //is global\n rowData?.requiredScope > 60 ||\n rowData?.companyID !== currentCompany\n );\n default:\n return true;\n }\n };\n\n // Sets the the current companies drop down based on partner and wholesaler\n useEffect(() => {\n axios\n .get('/Companies/DropDown', {\n params: {\n partnerID: currentPartner,\n },\n headers: {\n 'X-RequestScope': currentScope,\n },\n })\n .then((res) => {\n console.log(res.data);\n setCompanies(res.data);\n })\n .catch((err) => {\n throw new Error(err);\n });\n }, [currentPartner, currentWholesaler, currentScope]);\n\n // returns a multichild with modal content from the above function\n return (\n {\n return data.map(({ requiredScopeName, ...rest }) => ({\n requiredScopeName: addSpacing(requiredScopeName),\n ...rest,\n }));\n }}\n modalUpdate=\"/permissionset/\"\n modalDelete={`/permissionset/${modalData?.id}`}\n modalTitle={`${modalMode} Permission Sets: ${modalData?.companyName} - ${modalData?.name}`}\n tabs={\n !disabled\n ? [\n { details: true },\n {\n component: \n {additionalText}\n
\n {displayIcon &&\n type !== 'boolean' &&\n type !== 'loading' &&\n !lookup &&\n rowData &&\n (Number(renderValue) || //might wanna change to checking types instead.\n renderValue?.length > 0) && (\n \n )}\n {type !== 'boolean' &&\n type !== 'loading' &&\n !lookup &&\n rowData &&\n (Number(renderValue) || //might wanna change to checking types instead.\n renderValue?.length > 0) && (\n \n {\n const value = field.includes('.')\n ? field.split('.')\n : [field];\n const textToCopy =\n value.length > 1\n ? rowData[value[0]][value[1]]\n : rowData[field];\n\n navigator.clipboard.writeText(textToCopy);\n }}>\n \n \n \n )}\n \n );\n }\n}\n","/* eslint-disable no-unused-vars */\n//source code from https://github.com/mbrn/material-table/blob/master/src/components/m-table-filter-row.js\n\nimport React from 'react';\nimport FormControl from '@mui/material/FormControl';\nimport InputLabel from '@mui/material/InputLabel';\nimport { Select, MenuItem, OutlinedInput } from '@material-ui/core';\nimport Checkbox from '@mui/material/Checkbox';\nimport ListItemText from '@mui/material/ListItemText';\nimport { MTableFilterRow } from 'material-table';\nimport { useSelector } from 'react-redux';\n\nconst ITEM_HEIGHT = 48;\nconst ITEM_PADDING_TOP = 8;\nconst MenuProps = {\n PaperProps: {\n style: {\n maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,\n width: 250,\n },\n },\n};\n\nclass CustomMTableFilterRow extends MTableFilterRow {\n LookupFilter = ({ columnDef }) => {\n const [selectedFilter, setSelectedFilter] = React.useState(\n columnDef.tableData.filterValue || [],\n );\n\n React.useEffect(() => {\n setSelectedFilter(columnDef.tableData.filterValue || []);\n }, [columnDef.tableData.filterValue]);\n\n const { darkMode } = useSelector((state) => state.settings);\n\n return (\n \n \n {this.getLocalizedFilterPlaceHolder(columnDef)}\n \n {\n if (columnDef.filterOnItemSelect !== true)\n this.props.onFilterChanged(\n columnDef.tableData.id,\n selectedFilter,\n );\n }}\n onChange={(event) => {\n setSelectedFilter(event.target.value);\n if (columnDef.filterOnItemSelect === true)\n this.props.onFilterChanged(\n columnDef.tableData.id,\n event.target.value,\n );\n }}\n input={\n \n }\n renderValue={(selecteds) => {\n const result = selecteds.map(\n (selected) => columnDef.lookup[selected],\n );\n if (result.every((v) => typeof v === 'string')) {\n return result.join(', ');\n }\n return result;\n }}\n MenuProps={MenuProps}\n style={{ marginTop: 0 }}>\n {Object.keys(columnDef.lookup).map((key) => (\n \n ))}\n \n \n );\n };\n}\n\nexport default CustomMTableFilterRow;\n","export default {\n table: {\n ufSearchInput: 'table/input/search',\n ufShowColumn: 'table/button/showColumn',\n ufExportButton: 'table/button/export',\n ufFilterButton: 'table/button/filter',\n ufRefreshButton: 'table/button/refresh',\n ufGroupButton: 'table/button/group',\n ufProfileTypeSelect: 'table/select/profileType',\n },\n};\n","/* eslint-disable react/display-name */\nimport { forwardRef } from 'react';\n\n// Table icons\nimport AddBox from '@material-ui/icons/AddBox';\nimport ArrowDownward from '@material-ui/icons/ArrowDownward';\nimport Check from '@material-ui/icons/Check';\nimport ChevronLeft from '@material-ui/icons/ChevronLeft';\nimport ChevronRight from '@material-ui/icons/ChevronRight';\nimport Clear from '@material-ui/icons/Clear';\nimport DeleteOutline from '@material-ui/icons/DeleteOutline';\nimport Edit from '@material-ui/icons/Edit';\nimport FilterList from '@material-ui/icons/FilterList';\nimport FirstPage from '@material-ui/icons/FirstPage';\nimport LastPage from '@material-ui/icons/LastPage';\nimport Remove from '@material-ui/icons/Remove';\nimport SaveAlt from '@material-ui/icons/SaveAlt';\nimport Search from '@material-ui/icons/Search';\nimport ViewColumn from '@material-ui/icons/ViewColumn';\nimport CircularProgress from '@material-ui/core/CircularProgress';\n\n// Custom components\nimport CustomTableCell from '../../../components/tables/CustomTableCell';\nimport CustomTableToolbar from 'components/tables/CustomTableToolbar';\nimport CustomTableFilterRow from 'components/tables/CustomTableFilterRow';\nimport Container from 'react-bootstrap/Container';\n\nimport { MTableBodyRow, MTableAction } from 'material-table';\nimport { TableHead } from '@mui/material';\n\nimport './styles.css';\n\nimport walkthroughIds from './walkthroughIds.js';\n\nconst { table } = walkthroughIds;\n\nexport const tableIcons = {\n Add: forwardRef((props, ref) => (\n \n )),\n Check: forwardRef((props, ref) => (\n \n )),\n Clear: forwardRef((props, ref) => (\n \n )),\n Delete: forwardRef((props, ref) => (\n \n )),\n DetailPanel: forwardRef((props, ref) => (\n \n )),\n Edit: forwardRef((props, ref) => (\n \n )),\n Export: forwardRef((props, ref) => (\n \n )),\n Filter: forwardRef((props, ref) => (\n \n )),\n FirstPage: forwardRef((props, ref) => (\n \n )),\n LastPage: forwardRef((props, ref) => ),\n NextPage: forwardRef((props, ref) => ),\n PreviousPage: forwardRef((props, ref) => (\n \n )),\n ResetSearch: forwardRef((props, ref) => ),\n Search: forwardRef((props, ref) => ),\n SortArrow: forwardRef((props, ref) => (\n \n )),\n ThirdStateCheck: forwardRef((props, ref) => (\n \n )),\n ViewColumn: forwardRef((props, ref) => (\n \n )),\n};\n\nexport const components = {\n Cell: (props) => {\n return ;\n },\n Container: (props) => {\n return (\n \n );\n },\n Toolbar: (props) => {\n const toolbarButtonAlignment =\n props.selectedRows.length > 0\n ? 'left'\n : props.toolbarButtonAlignment;\n return (\n \n );\n },\n TableHead: (props) => {\n return (\n \n );\n },\n Row: (props) => {\n const actions = props.actions.map((v) =>\n typeof v.action === 'function'\n ? { action: v.action, position: 'row' }\n : v,\n );\n const newProps = { ...props, actions };\n\n if (\n Object.keys(props.data).includes('isActive') &&\n !props.data.isActive\n ) {\n return (\n \n );\n }\n\n const titleName = 'nothingfornow';\n if (\n titleName === 'Engines' &&\n props.data?.lastActive &&\n props.data?.lastActive !== '0001-01-01T00:00:00'\n ) {\n if (\n new Date() - new Date(props.data?.lastActive + 'Z') <\n 15 * 60 * 1000\n ) {\n return ;\n }\n\n if (\n new Date() - new Date(props.data?.lastActive + 'Z') <\n 30 * 60 * 1000\n ) {\n return (\n \n );\n }\n return ;\n }\n return ;\n },\n Action: (props) => {\n return ;\n },\n OverlayLoading: () => {\n return (\n \n );\n },\n FilterRow: (props) => {\n return ;\n },\n};\n","/* eslint-disable react/display-name */\nimport React, { useState, useEffect, useCallback } from 'react';\nimport { useSelector, useDispatch } from 'react-redux';\nimport MaterialTable from 'material-table';\nimport MaterialFilterList from '@material-ui/icons/FilterList';\nimport MaterialRefreshIcon from '@material-ui/icons/Refresh';\nimport { IoLayers } from 'react-icons/io5';\nimport { saveTableColumnOrder } from '@/components/v4/MaterialTable/helpers';\nimport CustomTableToolbar from 'components/tables/CustomTableToolbar';\nimport { MTableGroupbar } from 'material-table';\nimport isEqual from 'lodash/isEqual';\n\nimport { tableIcons, components } from './consts';\n\nimport walkthroughIds from './walkthroughIds';\n\nconst { ufFilterButton, ufRefreshButton, ufGroupButton } = walkthroughIds.table;\n\nconst FilterList = React.forwardRef((props, ref) => (\n \n));\n\nexport const RefreshIcon = React.forwardRef((props, ref) => (\n \n));\n\nconst GroupIcon = React.forwardRef((props, ref) => (\n \n));\n\nFilterList.displayName = 'FilterList';\nRefreshIcon.displayName = 'RefreshIcon';\nGroupIcon.displayName = 'GroupIcon';\n\n/**\n * @param {import('material-table').MaterialTableProps} props\n */\nexport default function MaterialTableHoc({\n data,\n columns,\n actions = [],\n refreshFn,\n options = {},\n titleName,\n refreshTable,\n ...props\n}) {\n const dispatch = useDispatch();\n const [isFiltering, setIsFiltering] = useState(false);\n const [isGrouping, setIsGrouping] = useState(false);\n const { darkMode } = useSelector((state) => state.settings);\n\n function toggleFiltering() {\n setIsFiltering((p) => !p);\n }\n\n function toggleGrouping() {\n setIsGrouping((p) => !p);\n }\n const titleNameOrder = titleName?.toLowerCase().replace(/\\s/g, '');\n\n const { tableColumnOrder, ...restSettings } = useSelector((state) => {\n return { ...state.settings };\n });\n\n // For if the table column settings doesn't exist\n const tableColumnInitialise = useCallback(() => {\n if (!tableColumnOrder) {\n dispatch({\n type: 'CHANGE_TABLE_COLUMN_ORDER',\n payload: {},\n });\n\n saveTableColumnOrder(restSettings, {});\n }\n if (\n !tableColumnOrder[titleNameOrder] ||\n tableColumnOrder[titleNameOrder] === undefined\n ) {\n dispatch({\n type: 'CHANGE_TABLE_COLUMN_ORDER',\n payload: {\n [titleNameOrder]: {},\n },\n });\n\n saveTableColumnOrder(restSettings, {\n ...tableColumnOrder,\n [titleNameOrder]: {},\n });\n }\n }, [dispatch, restSettings, tableColumnOrder, titleNameOrder]);\n\n tableColumnInitialise();\n\n useEffect(() => {\n tableColumnInitialise();\n }, [\n dispatch,\n restSettings,\n tableColumnInitialise,\n tableColumnOrder,\n titleNameOrder,\n ]);\n\n const tableColumnSettings = tableColumnOrder[titleNameOrder];\n\n const defaultColumnsOrder = columns.map((column, index) => {\n return {\n [column.field]: {\n hidden:\n column.hidden ||\n (column.hidden === (undefined || null) && false),\n columnOrder: index,\n groupOrder: undefined,\n },\n };\n });\n\n const columnsSettings = (columns) =>\n columns.map((column, index) => {\n return {\n [column.field]: {\n hidden:\n column.hidden || (column.hidden === undefined && false),\n columnOrder:\n column.tableData?.columnOrder ||\n (column.tableData?.columnOrder === undefined && index),\n groupOrder:\n column.tableData?.groupOrder ||\n (column.tableData?.groupOrder === undefined &&\n undefined),\n },\n };\n });\n\n const dispatchColumnSettings = useCallback(\n (columns) => {\n dispatch({\n type: 'CHANGE_TABLE_COLUMN_ORDER',\n payload: {\n [titleNameOrder]: columnsSettings(columns),\n },\n });\n },\n [dispatch, titleNameOrder],\n );\n\n if (!tableColumnOrder || !tableColumnSettings) {\n dispatchColumnSettings(columns);\n }\n\n const applyColumnSettings = (columns, columnSettings) => {\n return columns.map((column) => {\n const currentColumnSetting = Array.isArray(columnSettings)\n ? columnSettings.find((setting) => setting[column.field])?.[\n column.field\n ]\n : undefined;\n return {\n ...column,\n hidden: currentColumnSetting?.hidden,\n tableData: {\n columnOrder: currentColumnSetting?.columnOrder,\n groupOrder: currentColumnSetting?.groupOrder,\n },\n };\n });\n };\n\n const [previousColumns, setPreviousColumns] = useState(columns);\n const [currentColumns, setCurrentColumns] = useState(\n applyColumnSettings(columns, tableColumnSettings) || columns,\n );\n\n const initialGroupedColumns = currentColumns\n .filter((column) => column.tableData.groupOrder !== undefined)\n .map((column, index) => {\n return {\n [column.field]: {\n hidden:\n column.hidden ||\n (column.hidden === (undefined || null) && false),\n columnOrder: index,\n groupOrder: undefined,\n },\n };\n });\n\n const [currentGroupedColumns, setCurrentGroupedColumns] = useState(\n initialGroupedColumns,\n );\n\n const setColumnOrder = useCallback(\n (columns) => {\n dispatchColumnSettings(columns);\n\n saveTableColumnOrder(restSettings, {\n ...tableColumnOrder,\n [titleNameOrder]: columnsSettings(columns),\n });\n },\n [\n dispatchColumnSettings,\n restSettings,\n tableColumnOrder,\n titleNameOrder,\n ],\n );\n\n useEffect(() => {\n if (columns !== currentColumns) {\n setCurrentColumns(\n applyColumnSettings(columns, tableColumnSettings),\n );\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [columns]);\n\n const saveColumnOrder = useCallback(\n (columns) => {\n if (columns !== previousColumns) {\n setPreviousColumns(columns);\n setColumnOrder(columns);\n }\n },\n [previousColumns, setColumnOrder],\n );\n\n const resetColumnSettings = useCallback(() => {\n dispatch({\n type: 'CHANGE_TABLE_COLUMN_ORDER',\n payload: {\n [titleNameOrder]: defaultColumnsOrder,\n },\n });\n\n saveTableColumnOrder(restSettings, {\n ...tableColumnOrder,\n [titleNameOrder]: defaultColumnsOrder,\n });\n\n refreshTable();\n }, [\n defaultColumnsOrder,\n dispatch,\n refreshTable,\n restSettings,\n tableColumnOrder,\n titleNameOrder,\n ]);\n\n const MATERIAL_TABLE_OPTIONS = {\n sorting: true,\n filtering: isFiltering,\n actionsColumnIndex: -1, // Makes actions last column\n pageSize: 50,\n pageSizeOptions: (4)[(50, 100, 250, 500)],\n maxBodyHeight: 696,\n addRowPosition: 'first',\n cellStyle: { textAlign: 'left', wordWrap: 'break-word' },\n columnsButton: true,\n emptyRowsWhenPaging: false,\n exportAllData: true,\n exportButton: { csv: true, pdf: true },\n exportFileName: 'export',\n grouping: isGrouping,\n headerStyle: {\n position: 'sticky',\n top: 0,\n background: darkMode ? '#121212' : 'white',\n },\n paging: true,\n search: true,\n searchAutoFocus: false,\n selection: undefined,\n showTextRowsSelected: false,\n //loadingType: 'linear',\n };\n\n const MATERIAL_TABLE_ACTIONS = [\n {\n icon: FilterList,\n tooltip: 'Filter',\n isFreeAction: true,\n onClick: toggleFiltering,\n },\n {\n icon: GroupIcon,\n tooltip: 'Group',\n isFreeAction: true,\n onClick: toggleGrouping,\n },\n {\n icon: RefreshIcon,\n tooltip: 'Refresh',\n isFreeAction: true,\n onClick: refreshFn,\n hidden: !refreshFn,\n },\n ];\n\n const handleGroupingChange = (currentGroupBarColumns, groupColumns) => {\n setCurrentGroupedColumns(currentGroupBarColumns);\n const newColumns = [...currentColumns];\n newColumns.forEach((column) => {\n groupColumns.forEach((groupedColumn) => {\n if (column.field === groupedColumn.field) {\n column.tableData.groupOrder =\n groupedColumn.tableData.groupOrder;\n }\n });\n });\n saveColumnOrder(newColumns);\n };\n\n return (\n {\n const toolbarButtonAlignment =\n props.selectedRows.length > 0\n ? 'left'\n : props.toolbarButtonAlignment;\n return (\n \n );\n },\n Groupbar: (props) => {\n const groupbarColumns = columnsSettings(props.groupColumns);\n useEffect(() => {\n if (!isEqual(groupbarColumns, currentGroupedColumns)) {\n handleGroupingChange(\n groupbarColumns,\n props.groupColumns,\n );\n }\n }, [groupbarColumns, props.groupColumns]);\n return ;\n },\n }}\n onColumnDragged={(sourceIndex, destinationIndex) => {\n const newColumns = [...currentColumns];\n const [removed] = newColumns.splice(sourceIndex, 1);\n newColumns.splice(destinationIndex, 0, removed);\n saveColumnOrder(newColumns);\n }}\n onChangeColumnHidden={(column, hidden) => {\n const newColumns = [...currentColumns];\n const index = newColumns.findIndex(\n (col) => col.field === column.field,\n );\n newColumns[index].hidden = hidden;\n saveColumnOrder(newColumns);\n }}\n {...props}\n />\n );\n}\n","import { axios } from '@/services/axios';\n\nexport const changeAdminUser = ({ formData, scope }) =>\n axios.put('/AdminUser', formData, {\n headers: {\n 'X-RequestScope': scope,\n },\n });\n\nexport const postForgotPassword = ({ username, host }) =>\n axios.post('/forgotpassword', { username, host });\n\nexport const postMfaReset = (id) =>\n axios.post(`AdminUser/MFA/reset/${id}`, null, {});\n\nexport const getAdminPermission = async ({ accountScope, currentCompany }) => {\n const res = await axios.get(\n `/permissionSets/${accountScope}/${currentCompany}`,\n {\n headers: {\n 'X-RequestScope': accountScope,\n },\n },\n );\n return res.data;\n};\n\nexport const getAdminUser = async ({ token, id }) => {\n const res = await axios.get(`/AdminUser/${id}`, {\n headers: {\n authorization: `Bearer ${token}`,\n },\n });\n return res.data;\n};\nexport const deleteAdminUser = ({ id, token, scope }) =>\n axios.delete(`/AdminUser/${id}`, {\n headers: {\n authorization: `bearer ${token}`,\n 'X-RequestScope': scope,\n },\n });\n\nexport const postBypassMinPasswordAge = (adminUserID) =>\n axios.post(`/AdminUser/BypassMinPasswordAge/${adminUserID}`, null, {});\n\nexport const getAllAdminUsers = async (currentCompany) => {\n const res = await axios.get(`/AdminUsers/${currentCompany}`);\n return res.data;\n};\n\nexport const createAdminUser = async (formData) => {\n const res = await axios.post('/adminuser/', formData);\n return res.data;\n};\n\nexport const getSSO = async (currentCompany) => {\n const res = await axios.get(`/sso/${currentCompany}`);\n return res.data;\n};\n","export const initialState = {\n firstName: '',\n lastName: '',\n isActive: true,\n email: '',\n permissionSetID: '',\n mfaEnabled: true,\n canOverrideOverStamping: false,\n apiDocReader: false,\n};\nexport const tabList = ['General', 'Admin'];\nexport const mfaDropdown = [\n { label: 'Enabled', value: true },\n { label: 'Disabled', value: false },\n];\n\nexport const errorMessage = {\n 401: 'Unauthorized to change this user!',\n 403: 'Forbidden to change this user!',\n};\n\nexport const ACTIONS = {\n LOGOUT: 'LOGOUT',\n CLEAR_TOKEN: 'CLEAR_TOKEN',\n};\n\nexport const initFormData = {\n id: '',\n firstName: '',\n lastName: '',\n email: '',\n password: '',\n companyID: '',\n isActive: false,\n username: '',\n canOverrideOverStamping: false,\n permissionSetID: '',\n permissionSet: '',\n apiDocReader: false,\n lastLogin: '',\n mfatotpConfirmed: false,\n mfaEnabled: false,\n};\n\nexport const ERROR_EMAIL = 'Invalid email address';\n","import { useQuery, useMutation } from '@tanstack/react-query';\nimport {\n getAllAdminUsers,\n getAdminPermission,\n createAdminUser,\n getAdminUser,\n deleteAdminUser,\n changeAdminUser,\n postForgotPassword,\n postMfaReset,\n getSSO,\n} from 'API/AdminUser';\nimport { ACTIONS } from '../constants';\nimport { toast } from 'react-toastify';\n\nexport const useGetAllAdminUsers = (currentCompany, setTableData, dispatch) => {\n return useQuery({\n queryKey: ['adminUsers', currentCompany],\n queryFn: async () => {\n const data = await getAllAdminUsers(currentCompany);\n return data;\n },\n onSuccess: async (data) => {\n const structuredData = data.map((item) => {\n return {\n ...item,\n fullName: `${item.firstName} ${item.lastName}`,\n };\n });\n\n setTableData((prev) => ({\n ...prev,\n data: structuredData,\n }));\n dispatch({\n type: 'CHANGE_TABLE_LOADING',\n });\n },\n refetchOnWindowFocus: false,\n });\n};\n\nexport const useGetSSO = (currentCompany, setSSOEnforced) => {\n return useQuery({\n queryKey: ['sso', currentCompany],\n queryFn: () => getSSO(currentCompany),\n enabled: Boolean(currentCompany),\n onSuccess: (data) => {\n setSSOEnforced(data?.isEnforced);\n },\n refetchOnWindowFocus: false,\n });\n};\n\nexport const useGetAdminUserById = (\n adminId,\n token,\n setAdminUser,\n setOldAdmin,\n) => {\n return useQuery({\n queryKey: ['admin', { adminId }],\n queryFn: () => getAdminUser({ token, id: adminId }),\n enabled: Boolean(adminId),\n onError: (error) => {\n console.log('error now: ', error.message);\n throw new Error(error);\n },\n onSuccess: (data) => {\n setAdminUser(data);\n setOldAdmin(data);\n },\n refetchOnWindowFocus: false,\n });\n};\n\nexport const useGetAdminPermission = (currentCompany, accountScope) => {\n return useQuery({\n queryKey: ['permissionSets', currentCompany],\n queryFn: () => getAdminPermission({ accountScope, currentCompany }),\n enabled: Boolean(currentCompany),\n onSuccess: (data) => {\n return data.map((item) => ({\n label: item.name,\n value: item.id,\n }));\n },\n refetchOnWindowFocus: false,\n });\n};\n\nexport const useCreateNewAdminUser = (\n adminUser,\n navigate,\n resetPassword,\n currentCompany,\n) => {\n return useMutation({\n mutationFn: async () => {\n try {\n createAdminUser(adminUser)\n .then((res) => {\n getSSO(currentCompany).then((data) => {\n if (!data?.isEnforced) {\n resetPassword();\n }\n });\n\n toast.success('Account Create Success!');\n navigate('/admins');\n return res;\n })\n .catch((error) => {\n toast.error(\n error.response?.data?.message ||\n 'Failed to create account',\n );\n throw new Error(\n error.response?.data?.message ||\n 'Failed to create account',\n );\n });\n } catch (error) {\n toast.error(error.message);\n throw new Error(error?.message || 'Failed to create account');\n }\n },\n });\n};\n\nexport const useEditAdminUser = (\n data,\n accountScope,\n oldAdmin,\n email,\n dispatch,\n navigate,\n) => {\n return useMutation({\n mutationFn: async () => {\n try {\n changeAdminUser({\n formData: data,\n scope: accountScope,\n });\n } catch (error) {\n toast.error(error?.message || 'Failed to update account');\n }\n },\n onError: (error) => {\n toast.error(error?.message || 'Failed to update account');\n },\n onSuccess: () => {\n if (\n data.mfaEnabled &&\n !oldAdmin.mfaEnabled &&\n email === data.email\n ) {\n sessionStorage.clear();\n localStorage.clear();\n dispatch({ type: ACTIONS.LOGOUT });\n dispatch({ type: ACTIONS.CLEAR_TOKEN });\n navigate('/');\n }\n navigate('/admins');\n dispatch({ type: 'RESET_MODAL' });\n dispatch({ type: 'RESET_TABLE' });\n\n toast.success('Account Update Success!');\n },\n });\n};\n\nexport const useResetMfa = (adminId, isEditingThemself, dispatch, navigate) => {\n return useMutation({\n mutationFn: async () => {\n try {\n postMfaReset(adminId);\n } catch (error) {\n toast.error(\n 'You do not have permission to reset this MFA token.',\n );\n throw new Error(error.message);\n }\n },\n onError: (error) => {\n toast.error('You do not have permission to reset this MFA token.');\n throw new Error(error.message);\n },\n onSuccess: () => {\n toast.success('MFA Reset');\n if (isEditingThemself) {\n dispatch({ type: ACTIONS.LOGOUT });\n navigate('?action=mfaTokenReset');\n }\n },\n });\n};\n\nexport const useDeleteAdminUser = (\n adminId,\n token,\n accountScope,\n dispatch,\n navigate,\n) => {\n return useMutation({\n mutationFn: async () => {\n try {\n deleteAdminUser({ id: adminId, token, scope: accountScope });\n } catch (error) {\n toast.error(\n error?.response?.data?.message ||\n 'Failed to delete account',\n );\n throw new Error(error.message);\n }\n },\n onError: (error) => {\n toast.error(\n error?.response?.data?.message || 'Failed to delete account',\n );\n throw new Error(error.message);\n },\n onSuccess: () => {\n dispatch({ type: 'RESET_MODAL' });\n dispatch({ type: 'RESET_TABLE' });\n navigate('/admins');\n toast.success('Account Deleted');\n },\n });\n};\n\nexport const useForgotPassword = (\n adminUser,\n handleIsLoadingResetPasswordTrue,\n handleIsLoadingResetPasswordFalse,\n handleSetSucceedTrue,\n) => {\n const host =\n import.meta.env.MODE === 'development'\n ? 'teamsdev.tcap.dev'\n : window.location.host;\n\n return useMutation({\n mutationFn: async () => {\n try {\n handleIsLoadingResetPasswordTrue();\n postForgotPassword({\n username: adminUser?.email,\n host: `${host}/ui/change-password?token=[TOKEN]`,\n });\n } catch (error) {\n handleIsLoadingResetPasswordFalse();\n toast.error(\n 'Unable to process request. Please contact your administrator.',\n );\n throw new Error(error.message);\n }\n },\n onSuccess: () => {\n handleIsLoadingResetPasswordFalse();\n handleSetSucceedTrue();\n\n toast.success('Account Create Success!');\n },\n });\n};\n\nexport const useResetPassword = (adminUser, handleSuccess, onModalError) => {\n return useMutation({\n mutationFn: async () => {\n try {\n const host =\n import.meta.env.MODE === 'development'\n ? 'teamsdev.tcap.dev'\n : window.location.host;\n postForgotPassword({\n username: adminUser?.email,\n host: `${host}/ui/change-password?token=[TOKEN]`,\n })\n .then(() => {\n handleSuccess();\n })\n .catch((e) => {\n onModalError(e);\n });\n } catch (error) {\n toast.error(\n 'Unable to process request. Please contact your administrator.',\n );\n throw new Error(error.message);\n }\n },\n });\n};\n","import { useRef, useState, useMemo, useEffect } from 'react';\nimport { useSelector, useDispatch } from 'react-redux';\nimport { useNavigate } from 'react-router-dom';\nimport { EditRounded } from '@material-ui/icons';\nimport Button from 'components/v4/Button';\nimport MaterialTable, {\n RefreshIcon,\n} from '@/components/v4/MaterialTable/index';\nimport { useGetAllAdminUsers } from './new/queries';\nimport { loadingColumnsConstructor } from '@/components/tables/ReduxTable';\nimport walkthroughIds from '../walkthroughIds';\nimport useTableToolbar from 'hooks/useTableToolbar';\n\nconst AdminAccounts = () => {\n const tableRef = useRef();\n const dispatch = useDispatch();\n const navigate = useNavigate();\n\n const defaultColumns = [\n {\n title: 'Email',\n field: 'email',\n defaultSort: 'asc',\n },\n\n {\n title: 'First Name',\n field: 'firstName',\n },\n {\n title: 'Last Name',\n field: 'lastName',\n },\n {\n title: 'Permission',\n field: 'permissionSet',\n },\n {\n title: 'Last Logged In',\n field: 'lastLogin',\n type: 'datetime',\n },\n {\n title: 'Active',\n field: 'isActive',\n width: '5%',\n type: 'boolean',\n },\n ];\n\n const [tableData, setTableData] = useState({\n columns: defaultColumns,\n data: [],\n });\n\n const { currentCompany } = useSelector((state) => {\n return { ...state.navigationLists };\n });\n\n const { isLoading, refetch, isRefetching, isFetching } =\n useGetAllAdminUsers(currentCompany, setTableData, dispatch);\n\n const editAdminNavigate = (data) => {\n navigate(`${data.id}/edit`, { state: data });\n };\n\n const addAdminNavigate = async () => {\n navigate('/admins/create');\n };\n\n const { refreshFn } = useTableToolbar({\n refetch,\n });\n\n useEffect(() => {\n if (!(isFetching || isRefetching)) {\n refetch();\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const loadingColumns = useMemo(\n () => loadingColumnsConstructor(tableData.columns),\n [tableData.columns],\n );\n\n const dummyTable = [];\n const dummyTableLength = 12;\n for (let i = 0; i < dummyTableLength; i++) {\n const obj = {\n title: `Title ${i + 1}`,\n field: `Field ${i + 1}`,\n };\n dummyTable.push(obj);\n }\n\n const componentLoadingState = isLoading || isRefetching;\n\n const renderedColumns = componentLoadingState\n ? loadingColumns\n : defaultColumns;\n const renderedTableData = componentLoadingState\n ? dummyTable\n : tableData.data;\n\n const tableActions = [\n {\n icon: RefreshIcon,\n tooltip: 'Refresh Admin Users',\n isFreeAction: true,\n onClick: () => {\n tableRef.current &&\n tableRef.current.dataManager.columns.forEach((item) => {\n tableRef.current.onFilterChange(item.tableData.id, '');\n });\n refreshFn();\n },\n hidden: !refreshFn,\n },\n (rowData) => ({\n icon: () => (\n \n ),\n tooltip: 'Edit Admin User',\n position: 'row',\n onClick: () => {\n editAdminNavigate(rowData);\n },\n }),\n ];\n\n const header = 'Admin Users';\n const buttonAdd = '+ Admin';\n const addButtonWalkthroughId = walkthroughIds.ufAddAdminUser;\n\n return (\n \n {buttonAdd}\n \n }\n titleName={header}\n options={{\n search: true,\n pageSize: 10,\n pageSizeOptions: [10, 20, 50],\n }}\n refreshTable={refreshFn}\n />\n );\n};\n\nexport default AdminAccounts;\n","import { useEffect, useState } from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { useLocation } from 'react-router-dom';\nimport config from '@/config.json';\nimport { axios } from '@/services/axios';\nimport {\n ChakraProvider,\n Tab,\n TabList,\n TabPanel,\n TabPanels,\n Tabs,\n} from '@chakra-ui/react';\nimport { useDeepMerge } from 'hooks/useDeepMerge';\nimport walkthroughIds from './walkthroughIds';\n\nimport {\n customTabStylesCombineTheme,\n selectedTabStylesCombineTheme,\n} from '@/constants';\nimport APIUsers from './apiUsers/index';\nimport Permissions from '../permissions/Index';\nimport AdminAccounts from './adminUsers/Index';\n\n// Component for Table of the 'Admins' Page in the sidebar\nconst Admins = () => {\n const dispatch = useDispatch();\n const { theme } = useDeepMerge();\n const location = useLocation();\n const { state } = location;\n\n const [tabIndex, setTabIndex] = useState(\n state?.index != null ? state.index : 0,\n );\n\n const { darkMode } = useSelector((state) => state.settings);\n\n useEffect(() => {\n if (state?.index != null) {\n setTabIndex(state.index);\n return;\n }\n // Flag myself when hitting the admin page\n // make note of whether MFA is enabled,\n // so when we get a 200 from PUTing to admin,\n // we know to logout this admin user or not\n axios.get('/adminuser/me').then((response) => {\n dispatch({\n type: 'SET_IS_CURRENT_USER_MFA_ENABLED',\n payload: response.data.mfaEnabled,\n });\n });\n }, [dispatch, state]);\n\n const getTitle = (tabIndex) => {\n switch (tabIndex) {\n case 1:\n return config.apiUsers.tableTitle;\n case 2:\n return config.permissions.tableTitle;\n default:\n return config.adminUsers.tableTitle;\n }\n };\n\n return (\n \n \n {getTitle(tabIndex)}\n
\n\n {\n dispatch({\n type: 'RESET_MODAL',\n });\n dispatch({\n type: 'RESET_TABLE',\n });\n setTabIndex(index);\n }}>\n \n {config.adminUsers.tabsList.map((tab, index) => (\n \n e.button === 2 && e.preventDefault()\n }\n sx={{\n ...customTabStylesCombineTheme,\n color: darkMode\n ? 'rgba(255, 255, 255)'\n : 'inherit',\n }}\n _selected={{\n ...selectedTabStylesCombineTheme,\n }}>\n {tab}\n \n ))}\n \n \n \n {tabIndex == 0 && }\n \n \n {tabIndex == 1 && }\n \n \n {tabIndex == 2 && }\n \n \n \n \n );\n};\n\nexport default Admins;\n","import { FormControl, FormHelperText, TextField } from '@material-ui/core';\nimport { Row, Col } from 'react-bootstrap';\nimport { useSelector, useDispatch } from 'react-redux';\nimport { Box } from '@chakra-ui/react';\n\nimport config from '../../../../config.json';\nimport { PictureViewer } from '../../../../components';\nimport { NonNegativeInteger } from '../../../../components/maintenance/NumberFormatCustom';\nimport Button from 'components/v4/Button';\nimport FormLabel from 'components/v4/FormLabel';\nimport { AttachmentIcon } from '@chakra-ui/icons';\n\n// Component for the Add and Edit page of Templates - child of AATemplateTable.jsx\nconst TemplateEditForm = (props) => {\n const dispatch = useDispatch();\n const { state: modalState, stateError: modalStateError } = useSelector(\n (state) => {\n return {\n ...state.modal,\n };\n },\n );\n\n const imageChangeHandler = (e) => {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n newImage: e.target.files[0],\n },\n });\n };\n\n const nameChangeHandler = (e) => {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n name: e.target.value,\n },\n });\n };\n\n const idChangeHandler = (e) => {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n id: e.target.value,\n },\n });\n };\n\n return (\n \n \n \n \n \n \n \n \n \n \n \n {' '}\n \n {!modalState?.newImage\n ? 'Choose Image'\n : modalState?.newImage?.name}\n \n
\n \n\n {modalStateError?.newImage && (\n \n {modalStateError?.newImage}\n \n )}\n \n \n
\n {modalState?.newImage ? (\n \n ) : modalState?.image ? (\n \n ) : null}\n \n );\n};\n\nexport default TemplateEditForm;\n","import React, { useRef } from 'react';\nimport {useSelector, useDispatch} from 'react-redux';\n\nimport TableAndModal, {\n modalTitle,\n onModalError,\n} from '../../../components/tables/TableAndModal';\nimport config from '../../../config.json';\nimport {axios} from '../../../services/axios';\nimport Edit from './edit/TemplateEdit';\n\n// Component for 'Template Table' in the GA section of the sidebar\nconst Templates = (props) => {\n const dispatch = useDispatch();\n const tableRef = useRef();\n const {modalData, modalState, modalMode} = useSelector((state) => {\n return {\n modalLoading: state.modal.loading,\n modalData: state.modal.data,\n modalState: state.modal.state,\n modalMode: state.modal.mode,\n modalStateError: state.modal.stateError,\n modalUploading: state.modal.uploading,\n };\n });\n\n // default columns for the table\n const defaultColumns = [\n {\n title: 'ID',\n defaultSort: 'asc',\n field: 'id',\n },\n {\n title: 'Name',\n field: 'name',\n },\n ];\n\n return (\n {\n axios\n .post('/AATemplate/', modalState)\n .then((res) => {\n if (modalState?.newImage) {\n var formData = new FormData();\n formData.append('file', modalState?.newImage);\n axios\n .post(\n '/AATemplate/' + modalState?.id + '/Image',\n formData,\n {\n headers: {\n 'Content-Type':\n 'multipart/form-data',\n },\n },\n )\n .then((res) => {\n dispatch({\n type: 'RESET_MODAL',\n });\n dispatch({\n type: 'RESET_TABLE',\n });\n });\n } else {\n dispatch({\n type: 'RESET_MODAL',\n });\n dispatch({\n type: 'RESET_TABLE',\n });\n }\n })\n .catch((e) => {\n onModalError(e);\n });\n }}\n overrideModalUpdate={() => {\n axios\n .put('/AATemplate/', modalState)\n .then((res) => {\n if (modalState?.newImage) {\n var formData = new FormData();\n formData.append('file', modalState?.newImage);\n axios\n .post(\n '/AATemplate/' + modalState?.id + '/Image',\n formData,\n {\n headers: {\n 'Content-Type':\n 'multipart/form-data',\n },\n },\n )\n .then((res) => {\n dispatch({\n type: 'RESET_MODAL',\n });\n dispatch({\n type: 'RESET_TABLE',\n });\n });\n } else {\n dispatch({\n type: 'RESET_MODAL',\n });\n dispatch({\n type: 'RESET_TABLE',\n });\n }\n })\n .catch((e) => {\n onModalError(e);\n });\n }}\n modalUpload={(freshData, state) => {\n return {\n ...freshData,\n ...state,\n };\n }}\n title=\"Templates\"\n defaultColumns={defaultColumns}\n add\n groupable\n filterable\n rowActions={{\n editable: true,\n delete: true,\n }}\n modalValidate={() => {\n const newErrorState = {\n newImage: modalState?.newImage?.type\n ? modalState?.newImage?.type !== 'image/png' &&\n 'Only png file is allowed.'\n : false,\n id: modalState?.id?.length < 1 && 'ID is required.',\n };\n dispatch({\n type: 'CHANGE_MODAL_STATE_ERROR',\n payload: newErrorState,\n });\n return !(newErrorState.newImage || newErrorState.id);\n }}\n maxBodyHeight={window.innerHeight * config.plainView.tableHeight}\n modalTitle={modalTitle(modalData, 'name', ' Templates ', modalMode)}\n modalContent={}\n />\n );\n};\n\nexport default Templates;\n","export default {\n deleteMode: {\n ufTriggerName: '/triggers/input/triggerName',\n ufTriggerDescription: '/triggers/input/description',\n },\n editMode: {\n ufNameInput: '/triggers/input/name',\n ufEnabledCheckbox: '/triggers/checkbox/enabled',\n ufTypeSelect: '/triggers/select/type',\n ufEntitySelect: '/triggers/select',\n ufDescriptionTextarea: '/triggers/textarea/description',\n ufEventSelect: '/triggers/select/event',\n ufActionTypeSelect: '/triggers/select/actionType',\n\n ufEmailAddressInput: '/triggers/input/email',\n ufSubjectInput: '/triggers/input/subject',\n ufHtmlBodyCheckbox: '/triggers/checkbox/htmlBody',\n ufBodyTextarea: '/triggers/textarea/body',\n\n ufWebHookMethod: '/triggers/select/method',\n ufUriInput: '/triggers/input/uri',\n ufHeadersKeyInput: 'triggers/input/headersKey',\n ufHeadersValueInput: 'triggers/input/headersValue',\n ufClearHeadersBtn: 'triggers/button/clearHeaders',\n\n ufFieldsTags: '/triggers/tag/fields',\n ufDeleteBtn: '/triggers/button/delete',\n },\n addMode: {\n ufAddBtn: '/triggers/button/add',\n ufAddEnableBtn: '/triggers/button/addEnable',\n },\n};\n","import React from 'react';\nimport { Table } from 'react-bootstrap';\nimport { useSelector, useDispatch } from 'react-redux';\nimport { IconButton } from '@material-ui/core';\nimport ClearRoundedIcon from '@material-ui/icons/ClearRounded';\nimport { FormHelperText, InputLabel } from '@material-ui/core';\n\nimport { TextEditor } from '../../../../components';\nimport walkthroughIds from '../walkthroughIds';\n\n//headers form when webhook is selected in edit triggers\nconst ActionHeaders = ({ setCursorPosition }) => {\n const dispatch = useDispatch();\n\n // modal State\n const { state: modalState } = useSelector((state) => {\n return {\n ...state.modal,\n };\n });\n const { editMode } = walkthroughIds;\n\n // get the action headers from the state\n const getTableState = () => {\n return modalState?.actionHeaders;\n };\n\n // header rendering\n return (\n <>\n Headers \n \n \n \n | Key | \n Value | \n | \n
\n \n \n {modalState?.actionHeaders\n ?.sort((left, right) => {\n return left?.id - right?.id; //assume index is sorted by (key ASC)\n })\n .map(({ key, value, id }, index) => (\n \n | \n | \n \n | \n \n {getTableState().length > 1 && (\n {\n var newTable = [\n ...getTableState(),\n ];\n newTable.splice(index, 1);\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n actionHeaders: newTable,\n },\n });\n }}\n data-walkthroughid={\n editMode.ufClearHeadersBtn\n }>\n \n \n )}\n | \n
\n ))}\n \n
\n \n The body will be submitted with header: \"Content-Type:\n application/json\".\n \n \n );\n};\n\nexport default ActionHeaders;\n","import React, { useRef } from 'react';\nimport {TextField} from '@material-ui/core';\nimport {useSelector, useDispatch} from 'react-redux';\nimport {Row, Col} from 'react-bootstrap';\nimport VisibilityRoundedIcon from '@material-ui/icons/VisibilityRounded';\n\nimport TableAndModal, {\n modalTitle,\n} from '../../../components/tables/TableAndModal';\nimport config from '../../../config.json';\n\n// default columns for table\nconst defaultColumns = [\n {\n title: 'ID',\n field: 'id',\n classNameFn: (rowData) => {\n return 'red';\n },\n },\n {\n title: 'Name',\n field: 'name',\n defaultSort: 'asc',\n },\n {\n title: 'Last Heartbeat',\n field: 'lastActive',\n type: 'datetime',\n },\n {\n title: 'Last Process Identifier',\n field: 'lastProcessIdentifier',\n },\n {\n title: 'Last Process Type',\n field: 'lastProcessType',\n },\n {\n title: 'Details',\n field: 'details',\n },\n {\n title: 'Active',\n field: 'isActive',\n type: 'boolean',\n width: '5%',\n },\n];\n\n/*\n * Engine Component that presents the table and the Add/View functionality for the 'Engines' tab in the GA section of TCAP\n */\nconst Engines = () => {\n const dispatch = useDispatch();\n const tableRef = useRef();\n\n // modal State\n const {\n data: modalData,\n state: modalState,\n mode: modalMode,\n } = useSelector((state) => {\n return {\n ...state.modal,\n };\n });\n\n // field handlers\n const nameChangeHandler = (e) => {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n name: e.target.value,\n },\n });\n };\n\n // table and modal for engines\n return (\n {\n return {\n ...freshData,\n ...state,\n };\n }}\n title=\"Engines\"\n defaultColumns={defaultColumns}\n add\n groupable\n filterable\n maxBodyHeight={window.innerHeight * config.plainView.tableHeight}\n modalTitle={modalTitle(modalData, 'name', ' Engine ', modalMode)}\n modalValidate={() => {\n const newErrorState = {\n name:\n (!modalState?.name || modalState?.name?.length < 1) &&\n 'Field is required.',\n };\n dispatch({\n type: 'CHANGE_MODAL_STATE_ERROR',\n payload: newErrorState,\n });\n return !newErrorState.name;\n }}\n modalInitState={{\n isActive: true,\n }}\n additionalActions={[\n (rowData) => ({\n isFreeAction: false,\n onClick: () =>\n dispatch({\n type: 'OPEN_MODAL',\n payload: {\n mode: 'View',\n data: rowData,\n },\n }),\n icon: () => ,\n tooltip: 'View Engine',\n }),\n ]}\n modalContent={\n <>\n \n \n \n \n
\n {modalMode === 'View' && (\n <>\n \n \n \n \n
\n \n \n \n \n
\n \n )}\n \n }\n />\n );\n};\n\nexport default Engines;\n","import React, {useState, useEffect, useRef} from 'react';\nimport {useSelector, useDispatch} from 'react-redux';\nimport {Button, Table} from 'react-bootstrap';\nimport RefreshIcon from '@material-ui/icons/Refresh';\nimport PlaylistPlayRoundedIcon from '@material-ui/icons/PlaylistPlayRounded';\nimport CircularProgress from '@material-ui/core/CircularProgress';\n\nimport {TableAndModal, Error, Succeed} from '../../../../components';\nimport {axios} from '../../../../services/axios';\nimport { Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, Tooltip } from '@mui/material';\nimport { IconButton } from '@material-ui/core';\n\n/*\n * Component for the Trigger History of a Trigger Object\n */\nconst History = (props) => {\n // default columns for table\n const defaultColumns = [\n {\n title: 'Triggered At (UTC)',\n field: 'triggeredAt',\n type: 'datetime',\n defaultSort: 'desc',\n width: '40%',\n },\n {\n title: 'Actions',\n render: (rowData) => (\n \n {\n setRefire((prevFire) => ({...prevFire, rowData: rowData}));\n handleClickOpen();\n }}>\n \n \n \n ),\n width: '60%',\n },\n ];\n\n const {tableFetch} = props;\n const dispatch = useDispatch();\n const tableRef = useRef();\n const [refire, setRefire] = useState({\n state: '',\n rowData: null,\n error: null,\n });\n // dialog open/close\n const [open, setOpen] = React.useState(false);\n // child from table state\n const {child} = useSelector((state) => {\n return {...state.table};\n });\n\n // table loading from state\n const {loading: tableLoading} = useSelector((state) => {\n return {...state.table};\n });\n\n const handleClickOpen = () => {\n setOpen(true);\n };\n\n const handleClose = () => {\n setOpen(false);\n };\n\n const handleRefire = () => {\n setRefire({state: 'loading', rowData: refire.rowData});\n }\n\n useEffect(() => {\n if (tableLoading) {\n axios\n .get('/trigger/' + child?.id)\n .then((res) => {\n dispatch({\n type: 'CHANGE_TABLE_STATE',\n payload: {\n columns: defaultColumns,\n data: res.data.triggerHistory,\n },\n });\n\n dispatch({type: 'CHANGE_TABLE_LOADING'});\n })\n .catch((e) => {\n dispatch({\n type: 'CHANGE_TABLE_ERROR',\n payload: e,\n });\n });\n }\n }, [tableLoading]);\n\n useEffect(() => {\n if (refire.state === 'loading') {\n if (Array.isArray(refire.rowData)) {\n const responses = refire.rowData?.map(({id}) =>\n axios.post('/trigger/historicalfire/' + id),\n );\n Promise.all(responses)\n .then((res) => {\n setRefire({state: 'succeed', rowData: res.data});\n dispatch({type: 'CHANGE_TABLE_LOADING'});\n })\n .catch((error) => {\n setRefire({state: 'error', rowData: null, error});\n });\n return;\n }\n axios\n .post('/trigger/historicalfire/' + refire.rowData?.id)\n .then((res) => {\n setRefire({state: 'succeed', rowData: res.data});\n dispatch({type: 'CHANGE_TABLE_LOADING'});\n setRefire({state: 'succeed', rowData: null});\n handleClose();\n })\n .catch((error) => {\n setRefire({state: 'error', rowData: null, error});\n });\n }\n }, [refire]);\n\n if (refire.state === 'loading') {\n return ;\n }\n\n return (\n <>\n {refire.state === 'succeed' && }\n {refire.state === 'error' && }\n ,\n tooltip: 'Refresh',\n position: 'toolbar',\n onClick: () => {\n axios\n .get(tableFetch)\n .then((res) => {\n dispatch({\n type: 'CHANGE_PARENT_TABLE',\n payload: res.data,\n });\n dispatch({type: 'CHANGE_TABLE_LOADING'});\n })\n .catch((e) => {});\n },\n },\n ]}\n detailPanel={(rowData) => {\n return (\n \n \n \n | \n Key\n | \n \n Value\n | \n
\n \n \n {Object.entries(rowData.parameters ?? {})\n ?.map(([key, value]) => {\n return {\n key,\n value,\n };\n })\n .sort((left, right) => {\n return left?.key.localeCompare(\n right?.key,\n );\n })\n .map(({key, value}, idx) => (\n \n | {key} | {value} | \n
\n ))}\n \n \n );\n }}\n />\n\n \n \n Refire Trigger\n \n \n \n Are you sure you wish to refire trigger?\n \n \n \n \n \n \n \n \n );\n};\n\nexport default History;\n","import { useMemo, useRef } from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { useQuery } from '@tanstack/react-query';\n\nimport Tooltip from '@material-ui/core/Tooltip';\nimport FiberManualRecordRoundedIcon from '@material-ui/icons/FiberManualRecordRounded';\n\nimport { loadingColumnsConstructor } from '@/components/tables/ReduxTable';\nimport MaterialTable from '@/components/v4/MaterialTable';\nimport { getJobsQuery } from '@tcap/data-router/loaders/jobLoader';\nimport config from '@/config.json';\n\n/*\n * Component for the Jobs tab in the Sidebar that used the TableAndModal component\n * This table has no Read or Update/Delete and is just for viewing what jobs are active currently\n */\nconst Jobs = () => {\n const tableRef = useRef(null);\n // scope from state\n const { currentScope } = useSelector((state) => {\n return { ...state.login };\n });\n\n // current comapny, wholeasler and partner from state\n const { currentCompany, currentWholesaler, currentPartner } = useSelector(\n (state) => {\n return { ...state.navigationLists };\n },\n );\n\n // default columns for the table\n const defaultColumns = useMemo(() => {\n return [\n {\n title: 'Name',\n field: 'description',\n },\n\n {\n title: 'Status',\n field: 'jobStatus',\n\n width: '5%',\n cellStyle: {\n textAlign: 'center',\n },\n lookupDescription: config.jobs.statusJSON,\n lookup: {\n 0: (\n \n \n \n ),\n 1: (\n \n \n \n ),\n 2: (\n \n \n \n ),\n 3: (\n \n \n \n ),\n 20: (\n \n \n \n ),\n },\n customSort: (a, b) => a.jobStatus - b.jobStatus,\n },\n\n {\n title: 'Worker Type',\n field: 'workerType',\n lookup: config.jobs.workersJSON,\n },\n {\n title: 'Worker ID',\n field: 'workerID',\n hidden: currentScope !== 80,\n hiddenByColumnsButton: true,\n },\n\n { title: 'Comments', field: 'comments' },\n {\n title: 'Last Updated At',\n field: 'lastUpdatedTS',\n type: 'datetime',\n },\n {\n title: 'Created At',\n field: 'createTS',\n type: 'datetime',\n defaultSort: 'desc',\n },\n {\n title: 'Detail Type',\n field: 'detailType',\n lookup: config.jobs.detailsJSON,\n hidden: true,\n hiddenByColumnsButton: true,\n },\n {\n title: 'Details',\n field: 'details',\n hidden: true,\n hiddenByColumnsButton: true,\n },\n\n {\n title: 'Owner ID',\n field: 'ownerID',\n hidden: true,\n hiddenByColumnsButton: true,\n },\n {\n title: 'Wholesaler ID',\n field: 'wholesalerID',\n hidden: true,\n hiddenByColumnsButton: true,\n },\n {\n title: 'Partner ID',\n field: 'partnerID',\n hidden: true,\n hiddenByColumnsButton: true,\n },\n {\n title: 'Company ID',\n field: 'companyID',\n hidden: true,\n hiddenByColumnsButton: true,\n },\n ];\n }, [currentScope]);\n\n const {\n data: jobs,\n isRefetching,\n refetch,\n status,\n } = useQuery(\n getJobsQuery({\n wholesalerID: currentScope === 60 ? currentWholesaler : null,\n partnerID: currentScope === 40 ? currentPartner : null,\n companyID: currentScope === 20 ? currentCompany : null,\n }),\n { refetchOnWindowFocus: false, staleTime: 1000 * 60 * 2 },\n );\n\n const dispatch = useDispatch();\n\n const refreshFn = () => {\n dispatch({\n type: 'CHANGE_TABLE_FILTERING',\n });\n tableRef.current &&\n tableRef.current.dataManager.columns.forEach((item) => {\n tableRef.current.onFilterChange(item.tableData.id, '');\n });\n refetch();\n };\n\n const loadingColumns = useMemo(\n () => loadingColumnsConstructor(defaultColumns),\n [defaultColumns],\n );\n const dummyTable = [];\n const dummyTableLength = 12;\n for (let i = 0; i < dummyTableLength; i++) {\n const obj = {\n title: `Title ${i + 1}`,\n field: `Field ${i + 1}`,\n };\n dummyTable.push(obj);\n }\n\n const componentLoadingState = status === 'loading' || isRefetching;\n const renderedColumns = componentLoadingState\n ? loadingColumns\n : defaultColumns;\n const renderedTableData = componentLoadingState ? dummyTable : jobs;\n\n return (\n Jobs}\n tableRef={tableRef}\n titleName=\"Jobs\"\n columns={renderedColumns}\n refreshFn={refreshFn}\n refreshTable={refreshFn}\n data={renderedTableData}\n />\n );\n};\n\nexport default Jobs;\n","/* eslint-disable react-hooks/exhaustive-deps */\nimport { useEffect, useState } from 'react';\nimport { useQuery } from '@tanstack/react-query';\nimport { useSelector, useDispatch } from 'react-redux';\nimport Skeleton from '@material-ui/lab/Skeleton';\nimport ChipInput from 'material-ui-chip-input';\nimport { TextField, Checkbox, FormControlLabel } from '@material-ui/core';\nimport { Row, Col } from 'react-bootstrap';\n\nimport { onModalError } from '../../../../components/tables/TableAndModal';\nimport config from '../../../../config.json';\nimport ActionHeaders from './ActionHeaders';\nimport { axios } from '../../../../services/axios';\nimport { addSpacing } from '../../../../utils/utils';\nimport {\n DeleteBox,\n TextEditor,\n LoadingFieldDropdown,\n} from '../../../../components';\nimport MultiSelect from '../../../../components/presentational/FillOnClickMultiselect';\n\nimport walkthroughIds from '../walkthroughIds';\n\n/*\n * Edit Component from the Triggers Field\n */\nexport default function TriggersEdit() {\n const dispatch = useDispatch();\n const [cursorPosition, setCursorPosition] = useState(0); //cursor tracker.\n const [chipInputRef, setChipInputRef] = useState(null);\n const [fields, setFields] = useState([]);\n\n // partner and wholesaler frm state\n const { currentWholesaler, currentPartner } = useSelector((state) => {\n return { ...state.navigationLists };\n });\n\n const { editMode } = walkthroughIds;\n\n // modal state\n const {\n data: modalData,\n state: modalState,\n mode: modalMode,\n stateError: modalStateError,\n } = useSelector((state) => {\n return {\n ...state.modal,\n };\n });\n\n // scope from state\n const { requiredScope } = useSelector((state) => {\n return { ...state.login };\n });\n\n //\n const setMultiSelectState = (payload) => {\n if (modalState?.activeTextareaID?.startsWith('webHookHeader')) {\n const newPair = {\n id: modalState?.activeRowID,\n key: modalState?.key,\n value: modalState?.value,\n ...payload,\n };\n // eslint-disable-next-line no-unsafe-optional-chaining\n var newTable = [...modalState?.actionHeaders];\n newTable.splice(modalState?.activeRowIndex, 1, newPair);\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n actionHeaders: newTable,\n },\n });\n return;\n }\n\n if (modalState?.activeTextareaID?.startsWith('emailAddressField')) {\n const { emailAddress } = payload;\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n emailAddressTmp: emailAddress,\n },\n });\n return;\n }\n setActionState(payload);\n };\n\n //\n const setActionState = (payload) => {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n action: {\n ...modalState?.action,\n ...payload,\n },\n },\n });\n };\n\n //\n const triggerType = () => {\n return config.triggers.type.slice(\n modalState?.event?.requiredScope\n ? modalState?.event?.requiredScope / 20 - 1\n : 0,\n requiredScope / 20,\n );\n };\n\n //\n const idDropdown = () => {\n if (\n (requiredScope === 60 &&\n modalState?.triggerType === 'Wholesaler') ||\n (requiredScope === 40 && modalState?.triggerType === 'Partner') ||\n (requiredScope === 20 && modalState?.triggerType === 'Company')\n ) {\n return;\n }\n return (\n \n {status === 'loading' ? (\n \n ) : (\n <>\n {modalState?.triggerType === 'Wholesaler' && (\n {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n wholesalerID: v,\n },\n });\n }}\n errorText={\n !modalState?.wholesalerID &&\n 'Field is required.'\n }\n fieldValue={modalState?.wholesalerID}\n dataWalkthroughid={`${editMode.ufEntitySelect}/${modalState?.triggerType}`}\n />\n )}\n {modalState?.triggerType === 'Partner' && (\n {\n return axios.get(\n `/partners/${currentWholesaler}`,\n );\n }}\n fieldName=\"Partner\"\n dropDownValue=\"id\"\n onError={onModalError}\n displayField=\"name\"\n noEmptyOption\n onChange={(v) => {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n partnerID: v,\n },\n });\n }}\n errorText={\n !modalState?.partnerID &&\n 'Field is required.'\n }\n fieldValue={modalState?.partnerID}\n dataWalkthroughid={`${editMode.ufEntitySelect}/${modalState?.triggerType}`}\n />\n )}\n {modalState?.triggerType === 'Company' && (\n {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n companyID: v,\n },\n });\n }}\n errorText={\n !modalState?.companyID &&\n 'Field is required.'\n }\n fieldValue={modalState?.companyID}\n dataWalkthroughid={`${editMode.ufEntitySelect}/${modalState?.triggerType}`}\n />\n )}\n \n )}\n \n );\n };\n\n // get events drop down data when modal is opened\n useEffect(() => {\n axios\n .get('/trigger/events/')\n .then((res) => {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: { eventEnum: [...res.data] },\n });\n })\n .catch(() => {});\n }, [modalData?.id]);\n\n // initiate fields in modal so its not null\n useEffect(() => {\n if (!modalState?.actionHeaders) {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n actionHeaders:\n Object.keys(modalState?.action?.headers ?? {}).length >=\n 1\n ? Object.entries(modalState?.action?.headers)\n .map(([key, value]) => ({\n key,\n value,\n }))\n .sort((l, r) => l?.key?.localeCompare(r?.key))\n .map(({ key, value }, index) => ({\n key,\n value,\n index,\n }))\n : [{ id: 0, key: '', value: '' }],\n },\n });\n }\n }, [modalState?.actionHeaders]);\n\n // set email if null\n useEffect(() => {\n if (!Array.isArray(modalState?.action?.emailAddress)) {\n setActionState({\n emailAddress:\n modalState?.action?.emailAddress\n ?.trim()\n .split(',')\n .filter((v) => v.length > 0) ?? [],\n });\n }\n }, [modalState?.action?.emailAddress]);\n\n // when you select a new event, change Fields input\n useEffect(() => {\n if (modalState?.eventID && modalState?.eventEnum) {\n const newEvent = modalState?.eventEnum?.find(\n ({ id }) => id === modalState?.eventID,\n );\n const newFields = newEvent?.fields?.split(',').map((v) => ({\n id: '[' + v.trim() + ']',\n name: addSpacing(v.trim()),\n }));\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: { event: newEvent },\n });\n setFields(newFields);\n }\n }, [modalState?.eventID, modalState?.eventEnum]);\n\n const { data: companies, status } = useQuery({\n queryKey: ['triggerCompanies', currentWholesaler, currentPartner],\n // enabled: requiredScope > 20 && modalState?.triggerType === 'Company',\n queryFn: async () => {\n const res = await axios.get('/Companies/DropDown', {\n params: {\n partnerID: currentPartner,\n },\n headers: {\n 'X-RequestScope': 40,\n },\n });\n\n if (res.status !== 200) {\n throw new Error('Error fetching companies');\n }\n\n return res.data;\n },\n refetchOnWindowFocus: false,\n });\n\n return (\n <>\n \n Trigger\n \n \n \n {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n name: e.target.value,\n },\n });\n }}\n data-walkthroughid={editMode.ufNameInput}\n />\n \n {modalMode !== 'Add' && (\n \n {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n enabled: !modalState?.enabled,\n },\n });\n }}\n data-walkthroughid={\n editMode.ufEnabledCheckbox\n }\n />\n }\n label=\"Enabled\"\n />\n \n )}\n
\n \n \n {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n triggerType: v,\n },\n });\n }}\n errorText={modalStateError?.triggerType}\n noEmptyOption\n dataWalkthroughid={editMode.ufTypeSelect}\n />\n \n {idDropdown()}\n
\n \n \n {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n description: e.target.value,\n },\n });\n }}\n data-walkthroughid={editMode.ufDescriptionTextarea}\n />\n \n
\n {modalState?.triggerType && (\n <>\n \n {' '}\n Event{' '}\n \n \n \n {\n switch (modalState?.triggerType) {\n case 'Company':\n return requiredScopeMenu <= 20;\n case 'Partner':\n return requiredScopeMenu <= 40;\n case 'Wholesaler':\n return requiredScopeMenu <= 60;\n default:\n return true;\n }\n },\n )}\n fieldName=\"Name\"\n dropDownValue={'id'}\n displayField=\"name\"\n onDisplayDropdown={({ name, description }) =>\n name &&\n `${addSpacing(name)} - ${description} `\n }\n onError={() => {}}\n onChange={(v) => {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: { eventID: v },\n });\n }}\n dataWalkthroughid={editMode.ufEventSelect}\n />\n \n
\n \n )}\n {modalState?.eventID && (\n <>\n \n {' '}\n Action{' '}\n \n \n \n {\n setActionState({ actionType: v });\n }}\n errorText={modalStateError?.action?.actionType}\n noEmptyOption\n dataWalkthroughid={editMode.ufActionTypeSelect}\n />{' '}\n \n
\n \n )}\n {modalState?.eventID &&\n modalState?.action?.actionType === 'Email' && (\n <>\n \n \n {\n setCursorPosition(\n chipInputRef.selectionStart,\n );\n }}\n onFocus={() => {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n activeTextareaID:\n 'emailAddressField',\n activeTextareaField:\n 'emailAddress',\n },\n });\n }}\n label=\"Email Addresses\"\n inputRef={setChipInputRef}\n blurBehavior=\"ignore\"\n delayBeforeAdd\n newChipKeys={[' ', 'Enter']}\n newChipKeyCodes={[13, 32]}\n onAdd={(chip) => {\n if (\n Array.isArray(\n modalState?.action\n ?.emailAddress,\n )\n ) {\n setActionState({\n emailAddress:\n modalState?.action?.emailAddress.concat(\n chip\n ?.split(',')\n .map((v) =>\n v.trim(),\n )\n .filter(\n (v) =>\n v.length >\n 0,\n ),\n ),\n });\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n emailAddressTmp: '',\n },\n });\n return;\n }\n setActionState({\n emailAddress: chip\n ?.split(',')\n .map((v) => v.trim())\n .filter((v) => v.length > 0),\n });\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n emailAddressTmp: '',\n },\n });\n }}\n onDelete={(chip, index) => {\n var newAddress = [\n // eslint-disable-next-line no-unsafe-optional-chaining\n ...modalState?.action?.emailAddress,\n ];\n newAddress.splice(index, 1);\n\n setActionState({\n emailAddress: newAddress,\n });\n }}\n inputValue={modalState?.emailAddressTmp}\n InputProps={{\n onBlur: (e) => {\n if (\n Array.isArray(\n modalState?.action\n ?.emailAddress,\n )\n ) {\n setActionState({\n emailAddress:\n modalState?.action?.emailAddress.concat(\n e.target.value\n ?.split(',')\n .map((v) =>\n v.trim(),\n )\n .filter(\n (v) =>\n v.length >\n 0,\n ),\n ),\n });\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n emailAddressTmp: '',\n },\n });\n return;\n }\n setActionState({\n emailAddress: e.target.value\n ?.split(',')\n .map((v) => v.trim())\n .filter(\n (v) => v.length > 0,\n ),\n });\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n emailAddressTmp: '',\n },\n });\n },\n onChange: (e) => {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n emailAddressTmp:\n e.target.value,\n },\n });\n },\n }}\n data-walkthroughid={\n editMode.ufEmailAddressInput\n }\n />\n \n
\n \n \n {\n setActionState({\n subject: e.target.value,\n });\n },\n }}\n dataWalkthroughId={editMode.ufSubjectInput}\n />\n \n \n {\n setActionState({\n htmlBody:\n !modalState?.action\n ?.htmlBody,\n });\n }}\n data-walkthroughid={\n editMode.ufHtmlBodyCheckbox\n }\n // inputProps={{ 'aria-label': 'primary checkbox' }}\n />\n }\n label=\"HTML Body\"\n />\n \n
\n \n \n {\n setActionState({\n body: e.target.value,\n });\n },\n }}\n multiselect={{\n label: 'Fields',\n placeholder: '+',\n staticEnum: fields,\n }}\n dataWalkthroughId={editMode.ufBodyTextarea}\n />\n \n \n \n \n
\n \n )}\n {modalState?.eventID &&\n modalState?.action?.actionType === 'WebHook' && (\n <>\n \n \n {\n setActionState({ httpMethod: v });\n }}\n noEmptyOption\n dataWalkthroughid={editMode.ufWebHookMethod}\n />\n \n \n {\n setActionState({\n uri: e.target.value,\n });\n },\n }}\n dataWalkthroughId={editMode.ufUriInput}\n />\n \n
\n \n \n \n \n
\n \n \n {\n setActionState({\n body: e.target.value,\n });\n },\n }}\n dataWalkthroughId={editMode.ufBodyTextarea}\n />\n \n \n \n \n
\n \n )}\n {modalMode !== 'Add' && (\n {\n dispatch({\n type: 'OPEN_MODAL',\n payload: {\n mode: 'Delete',\n data: modalData,\n state: modalState,\n loading: false,\n uploading: false,\n },\n });\n }}\n walkthroughId={editMode.ufDeleteBtn}\n />\n )}\n \n );\n}\n","import React, { useEffect, useRef } from 'react';\nimport { useSelector, useDispatch } from 'react-redux';\nimport { Breadcrumbs, Link } from '@material-ui/core';\nimport { TextField } from '@material-ui/core';\nimport { Row, Col } from 'react-bootstrap';\nimport { Button } from 'react-bootstrap';\n\nimport TableAndModal, {\n modalTitle,\n onModalError,\n} from '../../../components/tables/TableAndModal';\nimport { TriggersEdit, History } from '..';\nimport { LoadingFieldDropdown, ModalCopy } from '../../../components';\nimport config from '../../../config.json';\nimport { axios } from '../../../services/axios';\nimport { addSpacing } from '../../../utils/utils';\n\nimport walkthroughIds from './walkthroughIds';\n\n// default columns for the table\nconst defaultColumns = [\n {\n title: 'Name',\n field: 'name',\n },\n {\n title: 'Description',\n field: 'description',\n type: 'string',\n width: '30%',\n },\n {\n title: 'Type',\n field: 'triggerType',\n },\n {\n title: 'Entity',\n field: 'entity',\n },\n\n {\n title: 'Action',\n field: 'actionName',\n },\n\n {\n title: 'Event',\n field: 'eventName',\n type: 'string',\n },\n\n {\n title: 'History Count',\n field: 'historyCount',\n width: '5%',\n },\n {\n title: 'Last Fired At',\n field: 'lastFiredAt',\n type: 'datetime',\n },\n {\n title: 'Enabled',\n field: 'enabled',\n width: '5%',\n type: 'boolean',\n },\n];\n\n/*\n * CRUD base component for the Triggers page of the sidebar\n */\nconst Triggers = () => {\n const dispatch = useDispatch();\n const tableRef = useRef();\n\n //scope from state\n const { currentScope } = useSelector((state) => {\n return { ...state.login };\n });\n\n // child and parent from table state\n const {\n child,\n parent,\n state: tableState,\n } = useSelector((state) => {\n return {\n ...state.table,\n };\n });\n\n // navigation lists from state\n const {\n companiesAndPartners,\n wholesalers,\n currentCompany,\n currentPartner,\n currentWholesaler,\n } = useSelector((state) => {\n return { ...state.navigationLists };\n });\n\n // modal information from state\n const { modalData, modalState, modalMode, modalStateError } = useSelector(\n (state) => {\n return {\n modalLoading: state.modal.loading,\n modalData: state.modal.data,\n modalState: state.modal.state,\n modalMode: state.modal.mode,\n modalStateError: state.modal.stateError,\n modalUploading: state.modal.uploading,\n modalLoadFields: state.modal.loadFields,\n modalShow: state.modal.show,\n };\n },\n );\n\n const { deleteMode, addMode } = walkthroughIds;\n\n // Fetch function based on scope for the TableAndModal\n const tableFetch = () => {\n switch (currentScope) {\n case 20:\n return '/triggers/list?companyID=' + currentCompany;\n case 40:\n return '/triggers/list?partnerID=' + currentPartner;\n case 60:\n return '/triggers/list?wholesalerID=' + currentWholesaler;\n default:\n return '/triggers/list';\n }\n };\n\n //\n useEffect(() => {\n if (\n !child &&\n !tableState?.modified &&\n tableState?.data?.length > 0\n ) {\n const newTableData = tableState.data.map(\n ({\n eventName,\n ...rest\n }) => ({\n ...rest,\n eventName: addSpacing(eventName),\n }),\n );\n dispatch({\n type: 'CHANGE_TABLE_STATE',\n payload: {\n columns: defaultColumns,\n data: newTableData,\n modified: true,\n },\n });\n return;\n }\n }, [\n tableState?.data,\n tableState?.modified,\n child,\n ]);\n\n // function to determine modal content of the TableAndModal Component\n const modalContent = () => {\n switch (modalMode) {\n case 'Delete':\n return (\n <>\n \n Are you sure you would like to delete this trigger?\n
\n \n \n {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n name: e.target.value,\n },\n });\n }}\n data-walkthroughid={\n deleteMode.ufTriggerName\n }\n />\n \n
\n \n \n {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n description: e.target.value,\n },\n });\n }}\n data-walkthroughid={\n deleteMode.ufTriggerDescription\n }\n />\n \n
\n \n );\n case 'Copy':\n return (\n {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload,\n });\n }}\n />\n );\n default:\n return ;\n }\n };\n\n // View trigger history\n if (child) {\n return (\n <>\n \n {\n e.preventDefault();\n dispatch({\n type: 'RESET_CHILD_TABLE',\n });\n }}>\n All Triggers\n \n \n option?.eventName}\n onDisplayDropdown={(value) => {\n if (typeof value === 'string') {\n const { eventName, triggerType, actionName } =\n parent?.find((v) => v.id === value);\n return (\n eventName +\n ' - ' +\n triggerType +\n ' - ' +\n actionName\n );\n }\n return (\n value?.eventName +\n ' - ' +\n value?.triggerType +\n ' - ' +\n value?.actionName\n );\n }}\n staticEnum={parent}\n searchable\n onChange={(v) => {\n dispatch({\n type: 'CHANGE_CHILD_TABLE',\n payload: { id: v },\n });\n }}\n noEmptyOption\n fieldValue={child.id}\n />\n
\n \n \n \n );\n }\n\n // If there isnt a child, return the TableAndModal component\n return (\n <>\n {\n axios\n .post('/trigger', {\n ...modalState,\n name:\n modalState?.copyName ?? modalState?.name ?? '',\n })\n .then((res) => {\n dispatch({\n type: 'OPEN_MODAL',\n payload: {\n mode: 'Edit',\n data: res.data,\n },\n });\n dispatch({\n type: 'CHANGE_MODAL_HASH',\n });\n })\n .catch((e) => {\n if (typeof onModalError !== 'undefined') {\n onModalError(e);\n }\n });\n }}\n newPage={modalMode === 'Edit' || modalMode === 'Add'}\n dynamicScope\n defaultColumns={defaultColumns}\n modalContent={modalContent()}\n modalAdd=\"/trigger\"\n modalUpdate=\"/trigger\"\n modalValidate={() => {\n var newErrorState;\n if (modalMode === 'Copy') {\n newErrorState = {\n copyName:\n (!modalState?.copyName ||\n modalState?.copyName?.length < 1 ||\n modalState?.copyName?.length > 100) &&\n 'Field is required and maximum field length is 100 characters.',\n };\n dispatch({\n type: 'CHANGE_MODAL_STATE_ERROR',\n payload: newErrorState,\n });\n return !newErrorState.copyName;\n }\n newErrorState = {\n name:\n (!modalState?.name ||\n modalState?.name?.length < 1 ||\n modalState?.name?.length > 100) &&\n 'Field is required and maximum length is 100 characters.',\n description:\n modalState?.description?.length > 200 &&\n 'Maximum field length is 200 characters.',\n triggerType:\n (!modalState?.triggerType ||\n modalState?.triggerType?.length < 1) &&\n 'Field is required.',\n companyID:\n modalState?.triggerType === 'Company' &&\n (!modalState?.companyID ||\n modalState?.companyID?.length < 1) &&\n 'Field is required.',\n partnerID:\n modalState?.triggerType === 'Partner' &&\n (!modalState?.partnerID ||\n modalState?.partnerID?.length < 1) &&\n 'Field is required.',\n wholesalerID:\n modalState?.triggerType === 'Wholesaler' &&\n (!modalState?.wholesalerID ||\n modalState?.wholesalerID?.length < 1) &&\n 'Field is required.',\n eventID:\n (!modalState?.eventID ||\n modalState?.eventID?.length < 1) &&\n 'Field is required.',\n };\n dispatch({\n type: 'CHANGE_MODAL_STATE_ERROR',\n payload: newErrorState,\n });\n\n return !(\n newErrorState.name ||\n newErrorState.description ||\n newErrorState.triggerType ||\n newErrorState.companyID ||\n newErrorState.partnerID ||\n newErrorState.wholesalerID ||\n newErrorState.eventID\n );\n }}\n modalDelete={'/trigger/' + modalData?.id}\n modalFetch={'/trigger/' + modalData?.id}\n rowActions={{\n editable: true,\n childTable: {\n name: 'Trigger History',\n doNotOverrideOnModalSucceed: true,\n hidden: (rowData) => rowData.historyCount > 0,\n },\n copiable: true,\n }}\n modalButtons={\n modalMode === 'Add' && (\n <>\n {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n enabled: false,\n },\n });\n dispatch({\n type: 'ON_MODAL_SUBMIT',\n payload: true,\n });\n }}\n data-walkthroughid={addMode.ufAddBtn}>\n Add\n \n {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n enabled: true,\n },\n });\n dispatch({\n type: 'ON_MODAL_SUBMIT',\n payload: true,\n });\n }}\n data-walkthroughid={addMode.ufAddEnableBtn}>\n Add and Enable\n \n \n )\n }\n modalUpload={(freshData, state) => {\n switch (modalMode) {\n case 'Delete':\n return { ...state };\n default:\n return {\n ...state,\n action: {\n ...state?.action,\n emailAddress:\n state?.action?.emailAddress.join(','),\n headers:\n state?.actionHeaders\n ?.filter(\n (v) =>\n v.key.length > 0 ||\n v.value.length > 0,\n )\n .reduce((res, current) => {\n res[current.key] =\n current.value;\n return res;\n }, {}) ?? state?.action?.headers,\n },\n };\n }\n }}\n modalInitState={{\n action: { actionType: 'Email' },\n triggerType: config.triggers.type[currentScope / 20 - 1],\n companyID: currentCompany,\n partnerID: currentPartner,\n wholesalerID: currentWholesaler,\n }}\n />\n \n );\n};\n\nexport default Triggers;\n","import React, { useRef } from 'react';\nimport {\n TextField,\n // Checkbox,\n FormControlLabel,\n FormHelperText,\n} from '@material-ui/core';\nimport { useSelector, useDispatch } from 'react-redux';\nimport { Row, Col } from 'react-bootstrap';\nimport {\n Box,\n ChakraProvider,\n Container,\n FormControl,\n FormErrorMessage,\n FormLabel,\n forwardRef,\n Stack,\n} from '@chakra-ui/react';\nimport NumberFormat from 'react-number-format';\nimport { Input as ChakraInput, Checkbox } from '@/components/v4';\n\nimport TableAndModal, {\n floatSearch,\n} from '../../../../components/tables/TableAndModal';\nimport NumberFormatCustom, {\n NonNegativeInteger,\n} from '../../../../components/maintenance/NumberFormatCustom';\nimport config from '../../../../config.json';\nimport { floatingLabelStyles as floatingLabel } from '@/chakratheme';\n\nconst Input = forwardRef((props, ref) => (\n \n));\n\n// default colulmns for the table\nconst defaultColumns = [\n {\n title: 'Country',\n field: 'country',\n defaultSort: 'asc',\n },\n\n {\n title: 'Name',\n field: 'name',\n },\n {\n title: 'Priority',\n field: 'priority',\n type: 'number',\n doNotOverrideSort: true,\n },\n {\n title: 'Prefix',\n field: 'prefix',\n },\n {\n title: 'Flag Fall In Rate',\n field: 'flagFallInRate',\n doNotOverrideSort: true,\n render: (rowData) => {\n return (\n \n );\n },\n customFilterAndSearch: (v, rowData) =>\n floatSearch(v, rowData, 'flagFallInRate'),\n },\n {\n title: 'Flag Fall Out Rate',\n field: 'flagFallOutRate',\n doNotOverrideSort: true,\n render: (rowData) => {\n return (\n \n );\n },\n customFilterAndSearch: (v, rowData) =>\n floatSearch(v, rowData, 'flagFallOutRate'),\n },\n {\n title: 'Inbound Rate',\n field: 'inboundRate',\n doNotOverrideSort: true,\n render: (rowData) => {\n return (\n \n );\n },\n customFilterAndSearch: (v, rowData) =>\n floatSearch(v, rowData, 'inboundRate'),\n },\n {\n title: 'Outbound Rate',\n field: 'outboundRate',\n doNotOverrideSort: true,\n render: (rowData) => {\n return (\n \n );\n },\n customFilterAndSearch: (v, rowData) =>\n floatSearch(v, rowData, 'outboundRate'),\n },\n {\n title: 'Minimum Cost',\n field: 'minPrice',\n doNotOverrideSort: true,\n render: (rowData) => {\n return (\n \n );\n },\n customFilterAndSearch: (v, rowData) =>\n floatSearch(v, rowData, 'minPrice'),\n },\n {\n title: 'Active',\n field: 'isActive',\n type: 'boolean',\n },\n];\n\n/*\n * Component for the International Rates Page inside 'International Rates List' Sidebar tab\n */\nconst InternationalRate = ({ disabled }) => {\n const dispatch = useDispatch();\n const tableRef = useRef();\n\n // modal data from state\n const { modalData, modalState, modalMode, modalStateError } = useSelector(\n (state) => {\n return {\n modalLoading: state.modal.loading,\n modalData: state.modal.data,\n modalState: state.modal.state,\n modalMode: state.modal.mode,\n modalStateError: state.modal.stateError,\n modalUploading: state.modal.uploading,\n };\n },\n );\n\n // child from table state\n const { child } = useSelector((state) => {\n return {\n ...state.table,\n };\n });\n const { darkMode } = useSelector((state) => state.settings);\n const priorityInputRef = useRef(null);\n\n const floatingLabelStyles = floatingLabel(darkMode);\n const handleInputChange = (e) => {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n [e.target.name]: e.target.value,\n },\n });\n };\n\n // return table and modal with modal content inside this as a prop\n return (\n {\n const newErrorState = {\n name:\n (!modalState?.name || modalState?.name?.length < 1) &&\n 'Field is required.',\n country:\n (!modalState?.country ||\n modalState?.country?.length < 1) &&\n 'Field is required.',\n prefix:\n (!modalState?.prefix ||\n modalState?.prefix?.length < 1) &&\n 'Field is required.',\n priority:\n (!modalState?.priority ||\n modalState?.priority?.length < 1) &&\n 'Field is required.',\n };\n dispatch({\n type: 'CHANGE_MODAL_STATE_ERROR',\n payload: newErrorState,\n });\n return !(\n newErrorState.name ||\n newErrorState.country ||\n newErrorState.prefix ||\n newErrorState.priority\n );\n }}\n editable={{\n update: true,\n }}\n modalUpload={(freshData, state) => {\n return {\n ...freshData,\n ...state,\n internationalRateListID: child?.id,\n };\n }}\n title={'International Rate'}\n defaultColumns={defaultColumns}\n add={!disabled}\n modalInitState={{\n isActive: true,\n }}\n groupable\n filterable\n maxBodyHeight={\n window.innerHeight * config.breadcrumbView.tableHeight\n }\n rowActions={{\n editable: !disabled,\n }}\n modalTitle={\n modalMode === 'Add'\n ? \"Add Int'l Rate\"\n : 'Edit ' + modalData?.name + \" Int'l Rate\"\n }\n modalContent={\n <>\n \n \n \n \n \n Country\n \n {Boolean(modalStateError?.country) ? (\n \n {modalStateError?.country}\n \n ) : (\n \n {modalStateError?.country}{' '}\n \n )}\n \n \n \n \n Name\n \n {Boolean(modalStateError?.country) ? (\n \n {modalStateError?.country}\n \n ) : (\n \n {modalStateError?.country}{' '}\n \n )}\n \n \n \n \n Prefix\n \n {Boolean(modalStateError?.prefix) ? (\n \n {modalStateError?.prefix}\n \n ) : (\n \n {modalStateError?.prefix}{' '}\n \n )}\n \n \n\n \n \n \n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n isActive: !modalState?.isActive,\n },\n })\n }\n name=\"isActive\"\n colorScheme=\"whatsapp\"\n mb={0}\n />\n \n Active\n \n \n \n\n \n \n \n (priorityInputRef.current = el)\n }\n ref={priorityInputRef}\n onChange={handleInputChange}\n />\n \n Priority\n \n {Boolean(modalStateError?.priority) ? (\n \n {modalStateError?.priority}\n \n ) : (\n \n {modalStateError?.priority}{' '}\n \n )}\n \n \n \n \n Minimum Cost\n \n \n \n\n \n \n \n \n Flag Fall In Rate\n \n \n\n \n \n \n Flag Fall Out Rate\n \n \n \n\n \n \n \n \n Inbound Rate\n \n \n\n \n \n \n Outbound Rate\n \n \n \n \n \n }\n />\n );\n};\n\nexport default InternationalRate;\n","export default {\n internationalRates: {\n ufCopyBtn: '/international-rates/button/copy',\n ufEditBtn: '/international-rates/button/edit',\n ufNameInput: '/international-rates/input/name',\n ufPublicCheckbox: '/international-rates/checkbox/public',\n ufActiveCheckbox: '/international-rates/checkbox/active',\n ufWholesalerSelect: '/international-rates/select/wholesaler',\n ufPartnerSelect: '/international-rates/select/partner',\n },\n};\n","import React, { useRef, useState } from 'react';\nimport { Row, Col } from 'react-bootstrap';\nimport { useSelector, useDispatch } from 'react-redux';\nimport FileCopyRoundedIcon from '@material-ui/icons/FileCopyRounded';\nimport EditRoundedIcon from '@material-ui/icons/EditRounded';\nimport VisibilityRoundedIcon from '@material-ui/icons/VisibilityRounded';\nimport { TextField, Checkbox, FormControlLabel } from '@material-ui/core';\n\nimport {\n modalTitle,\n onModalError,\n} from '../../../components/tables/TableAndModal';\nimport IntRates from './rates/Index';\nimport config from '../../../config.json';\nimport {\n ModalCopy,\n MultiChild,\n LoadingFieldDropdown,\n} from '../../../components';\n\nimport walkthroughIds from './walkthroughIds';\n\n/*\n * Component for the base page for the International Rates List Tab from the Sidebar, this also covers the add and edit pages in ModalContent\n */\nconst InternationalRatesList = () => {\n const dispatch = useDispatch();\n const [disabled, setDisabled] = useState(false);\n const tableRef = useRef();\n\n // parent from table state\n const { parent } = useSelector((state) => {\n return {\n ...state.table,\n };\n });\n\n // modal information from state\n const {\n data: modalData,\n state: modalState,\n mode: modalMode,\n stateError: modalStateError,\n } = useSelector((state) => {\n return {\n ...state.modal,\n };\n });\n\n // wholesaler/partners from state\n const { currentWholesaler, currentPartner } = useSelector((state) => {\n return { ...state.navigationLists };\n });\n\n // scope from state\n const { currentScope, requiredScope } = useSelector((state) => {\n return { ...state.login };\n });\n\n const { internationalRates } = walkthroughIds;\n\n // function to determine endpoint to use for the table fetch based on scope\n const tableFetch = () => {\n switch (currentScope) {\n case 80:\n return `/internationalratelists/`;\n case 60:\n return `/internationalratelists/wholesaler/${currentWholesaler}/?withPublic=true`;\n default:\n return `/internationalratelists/partner/${currentPartner}/?withPublic=true`;\n }\n };\n\n // default columns for the table\n const defaultColumns = [\n {\n title: 'Wholesaler',\n field: 'wholesaler',\n hidden: currentScope !== 80,\n hiddenByColumnsButton: true,\n },\n {\n title: 'Partner',\n field: 'partner',\n hidden: currentScope === 40,\n hiddenByColumnsButton: true,\n },\n {\n title: 'Name',\n field: 'name',\n defaultSort: 'asc',\n },\n {\n title: 'Public',\n field: 'isPublic',\n type: 'boolean',\n width: '5%',\n },\n {\n title: 'Active',\n field: 'isActive',\n type: 'boolean',\n width: '5%',\n },\n ];\n\n // function to determine if a row can be edited or not\n const canEdit = (rowData) => {\n switch (requiredScope) {\n case 40:\n return rowData?.partnerID === currentPartner;\n case 60:\n return rowData?.wholesalerID === currentWholesaler;\n default:\n return true;\n }\n };\n\n // return a multichild based on the functions above\n return (\n ,\n label: 'International Rates',\n },\n ]\n : [\n {\n component: ,\n label: 'International Rates',\n },\n ]\n }\n loadingFieldDropdown={{\n onChange: (v) => {\n const childData = parent.find(\n (parentValue) => parentValue.id === v,\n );\n dispatch({\n type: 'CHANGE_CHILD_TABLE',\n payload: childData,\n });\n const currentlyDisabled = !canEdit(childData);\n if (currentlyDisabled) {\n dispatch({\n type: 'CHANGE_BREADCRUMB_VIEW',\n payload: 0,\n });\n } else if (!currentlyDisabled && disabled) {\n dispatch({\n type: 'CHANGE_BREADCRUMB_VIEW',\n payload: 1,\n });\n }\n setDisabled(currentlyDisabled);\n },\n }}\n additionalActions={[\n (rowData) => ({\n icon: () => (\n \n ),\n tooltip: 'Copy International Rate List',\n position: 'row',\n hidden: !canEdit(rowData),\n onClick: (event, rowData) => {\n dispatch({\n type: 'OPEN_MODAL',\n payload: {\n mode: 'Copy',\n data: rowData,\n state: {\n copyName: `Copy of ${rowData?.name}`,\n },\n },\n });\n },\n }),\n (rowData) => ({\n icon: () => (\n \n ),\n tooltip: 'Edit International Rate List',\n position: 'row',\n hidden: !canEdit(rowData),\n onClick: (event, rowData) => {\n const currentlyDisabled = !canEdit(rowData);\n setDisabled(currentlyDisabled);\n dispatch({\n type: 'OPEN_CHILD_TABLE',\n payload: rowData,\n });\n dispatch({\n type: 'CHANGE_BREADCRUMB_VIEW',\n payload: 0,\n });\n },\n }),\n (rowData) => ({\n icon: () => ,\n tooltip: 'View International Rate List',\n position: 'row',\n hidden: canEdit(rowData),\n onClick: (event, rowData) => {\n const currentlyDisabled = !canEdit(rowData);\n setDisabled(currentlyDisabled);\n dispatch({\n type: 'OPEN_CHILD_TABLE',\n payload: rowData,\n });\n dispatch({\n type: 'CHANGE_BREADCRUMB_VIEW',\n payload: 0,\n });\n },\n }),\n ]}\n onTableSucceed={(data) => {\n return data.map(({ wholesaler, partner, ...rest }) => ({\n ...rest,\n wholesaler:\n wholesaler?.length > 0\n ? wholesaler\n : config.notAllocated.table,\n partner:\n partner?.length > 0\n ? partner\n : config.notAllocated.table,\n }));\n }}\n modalValidate={() => {\n var newErrorState;\n if (modalMode === 'Copy') {\n newErrorState = {\n copyName:\n (!modalState?.copyName ||\n modalState?.copyName?.length < 1 ||\n modalState?.copyName?.length > 100) &&\n 'Field is required and maximum field length is 100 characters.',\n };\n dispatch({\n type: 'CHANGE_MODAL_STATE_ERROR',\n payload: newErrorState,\n });\n return !newErrorState.copyName;\n }\n newErrorState = {\n name:\n (!modalState?.name ||\n modalState?.name?.length < 1 ||\n modalState?.name?.length > 100) &&\n 'Field is required and maximum field length is 100 characters.',\n };\n dispatch({\n type: 'CHANGE_MODAL_STATE_ERROR',\n payload: newErrorState,\n });\n return !newErrorState.name;\n }}\n modalTitle={modalTitle(\n modalData,\n 'name',\n ' International Rate List ',\n modalMode,\n )}\n modalUpload={(freshData, state) => {\n return {\n ...freshData,\n ...state,\n };\n }}\n modalInitState={{\n isActive: true,\n wholesalerID: currentWholesaler,\n partnerID: currentPartner,\n }}\n modalCopy={`/internationalratelist/${modalData?.id}/copy`}\n groupable\n filterable\n maxBodyHeight={window.innerHeight * config.plainView.tableHeight}\n editable={{\n update: true,\n }}\n modalContent={\n modalMode === 'Copy' ? (\n {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload,\n });\n }}\n />\n ) : (\n \n \n \n {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n name: e.target.value,\n },\n });\n }}\n data-walkthroughid={\n internationalRates.ufNameInput\n }\n />\n \n \n \n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n isPublic:\n !modalState?.isPublic,\n },\n })\n }\n data-walkthroughid={\n internationalRates.ufPublicCheckbox\n }\n />\n }\n label=\"Public\"\n />\n \n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n isActive:\n !modalState?.isActive,\n },\n })\n }\n data-walkthroughid={\n internationalRates.ufActiveCheckbox\n }\n />\n }\n label=\"Active\"\n />\n \n
\n {requiredScope === 80 && (\n \n \n {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n wholesalerID: v,\n partnerID: null,\n },\n });\n }}\n toggleLimit={4}\n fieldValue={modalState?.wholesalerID}\n onError={onModalError}\n dataWalkthroughid={\n internationalRates.ufWholesalerSelect\n }\n />\n \n
\n )}\n {requiredScope > 40 && modalState?.wholesalerID && (\n \n \n {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n partnerID: v,\n },\n });\n }}\n dependency={modalState?.wholesalerID}\n hasDependency={true}\n onError={onModalError}\n fieldValue={modalState?.partnerID}\n dataWalkthroughid={\n internationalRates.ufPartnerSelect\n }\n />\n \n
\n )}\n
\n )\n }\n />\n );\n};\n\nexport default InternationalRatesList;\n","export default {\n invoices: {\n ufViewInvoiceBtn: '/invoices/button/viewInvoice',\n ufReloadBtn: '/invoices/button/reload',\n },\n invoiceLines: {\n ufInvoiceTotalInput: '/invoices/input/invoiceTotal',\n ufUpdateStatusBtn: '/invoices/button/updateStatus',\n ufAddInvoiceLineBtn: '/invoices/button/addInvoiceLine',\n ufRefreshIconBtn: 'table/toolbar/button/refreshBtn',\n ufDeleteForeverBtn: 'table/button/deleteForeverBtn',\n ufModalUpdateStatusBtn: 'invoices/modal/button/updateBtn',\n ufModalFromInput: 'invoices/modal/input/from',\n ufModalToInput: 'invoices/modal/input/to',\n },\n invoiceLineEdit: {\n ufQuantityInput: '/invoices/input/quantity',\n ufUnitPriceInput: '/invoices/input/unitPrice',\n ufDescriptionInput: '/invoices/input/description',\n ufModalItemCode: '/invoices/modal/input/itemCode',\n }\n};\n","import React, { useEffect, useState } from 'react';\nimport { Row, Col } from 'react-bootstrap';\nimport { useSelector, useDispatch } from 'react-redux';\n\nimport config from '../../../config.json';\nimport walkthroughIds from './walkthroughIds';\nimport { ChakraProvider, FormControl, FormLabel } from '@chakra-ui/react';\nimport chakratheme from '@/chakratheme';\nimport { Select } from 'chakra-react-select';\nimport { Alert, AlertDescription, AlertIcon, Input } from 'components/v4';\nimport { defaultChakraSelectStyle, chakraSelectDarkMode } from '@/constants';\n\n/*\n * Component that modals the approval content for Invoice.jsx and InvoiceLines.jsx\n */\nconst ModalApprovalContent = () => {\n const dispatch = useDispatch();\n\n // modal data from state\n const { state: modalState } = useSelector((state) => {\n return {\n ...state.modal,\n };\n });\n\n const { darkMode } = useSelector((state) => state.settings);\n\n const chakraSelectDark = chakraSelectDarkMode(darkMode);\n\n const { invoiceLines } = walkthroughIds;\n\n const [options] = useState(\n config?.invoices?.statusUpload[modalState?.invoiceStatus],\n );\n\n // auto selects the first option\n useEffect(() => {\n if (modalState?.upload) {\n console.log(\"only comes here once\");\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n upload: config.invoices.statusUpload[\n modalState?.invoiceStatus\n ][0]?.upload,\n },\n });\n }\n }, [options]);\n\n return (\n <>\n \n \n \n \n From\n \n \n\n \n To\n opt.name}\n getOptionValue={(opt) => opt.upload}\n placeholder={'Please select invoice status'}\n value={options?.find(\n (a) => a.upload == modalState?.upload,\n )}\n onChange={(v) => {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n upload: v.upload,\n },\n });\n }}\n dataWalkthroughid={invoiceLines.ufModalToInput}\n chakraStyles={{\n ...defaultChakraSelectStyle,\n ...chakraSelectDark,\n }}\n />\n \n \n \n
\n\n {modalState?.invoiceStatus === 0 && (\n \n \n \n This action can't be reverted\n \n \n )}\n \n );\n};\n\nexport default ModalApprovalContent;\n","import React from 'react';\nimport {TextField} from '@material-ui/core';\nimport {useSelector, useDispatch} from 'react-redux';\nimport {Row, Col} from 'react-bootstrap';\nimport {\n NegativeSixDP,\n NonNegativeInteger,\n} from 'components/maintenance/NumberFormatCustom';\nimport {LoadingFieldDropdown} from 'components/index';\nimport {Alert} from '@material-ui/lab';\nimport walkthroughIds from '../walkthroughIds';\n\nconst ITEM_CODE = [\n {value: 'CDR', label: 'CDR'},\n {value: 'Company', label: 'Company'},\n {value: 'NumberBlock', label: 'Number Block'},\n {value: 'NumberBlockPorting', label: 'Number Block Porting'},\n {value: 'RGS', label: 'RGS'},\n {value: 'TeamsUser', label: 'Teams User'},\n {value: 'Trunk', label: 'Trunk'},\n];\n\n/*\n * Component for the modal content of the invoice lines component\n */\nconst InvoiceLineEdit = () => {\n const dispatch = useDispatch();\n\n // modal state\n const {state: modalState, mode: modalMode} = useSelector((state) => {\n return {\n ...state.modal,\n };\n });\n\n const {invoiceLineEdit} = walkthroughIds;\n\n return (\n <>\n \n \n {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n quantity: e.target.value,\n },\n });\n }}\n data-walkthroughid={invoiceLineEdit.ufQuantityInput}\n />\n \n
\n \n \n {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n unitPrice: e.target.value,\n },\n });\n }}\n data-walkthroughid={invoiceLineEdit.ufUnitPriceInput}\n />\n \n
\n \n \n {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n description: e.target.value,\n },\n });\n }}\n data-walkthroughid={invoiceLineEdit.ufDescriptionInput}\n />\n \n
\n {modalMode !== 'Edit' && (\n \n \n {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n itemCode: v,\n },\n });\n }}\n dataWalkthroughid={invoiceLineEdit.ufModalItemCode}\n />\n \n
\n )}\n {modalMode === 'Delete' && (\n \n Are you sure you want to delete this invoice line ? This\n action cannot be undone.\n \n )}\n \n );\n};\n\nexport default InvoiceLineEdit;\n","import React, { useState, useEffect, useMemo, useRef } from 'react';\nimport { useSelector, useDispatch } from 'react-redux';\nimport { TextField } from '@material-ui/core';\nimport RefreshIcon from '@material-ui/icons/Refresh';\nimport DeleteForeverRoundedIcon from '@material-ui/icons/DeleteForeverRounded';\n\nimport { TableAndModal } from '../../../../components/';\nimport { axios } from '../../../../services/axios';\nimport { extractFilename } from '../../../../utils/utils';\nimport config from '../../../../config.json';\nimport ModalApprovalContent from '../ModalApprovalContent';\nimport ModalEditContent from './InvoiceLineEdit';\nimport { Box, Button, ChakraProvider } from '@chakra-ui/react';\nimport { AddIcon } from '@chakra-ui/icons';\nimport chakratheme from 'src/chakratheme';\nimport { NegativeSixDP } from 'components/maintenance/NumberFormatCustom';\nimport walkthroughIds from '../walkthroughIds';\n\nconst EDITABLE_STATUS = [0, 1, 8];\n/*\n * Component rendered when somoene clicks the invoice lines button on the Invoices.jsx component\n */\nconst InvoiceLines = () => {\n const dispatch = useDispatch();\n const tableRef = useRef();\n const [currentInvoice, setCurrentInvoice] = useState(null);\n\n // scope from state\n const { requiredScope } = useSelector((state) => {\n return { ...state.login };\n });\n\n // table data from state\n const {\n child,\n state: tableState,\n parent,\n invoiceType,\n } = useSelector((state) => {\n return { ...state.table };\n });\n\n // modal data from state\n const {\n data: modalData,\n state: modalState,\n mode: modalMode,\n } = useSelector((state) => {\n return {\n ...state.modal,\n };\n });\n\n const { invoiceLines } = walkthroughIds;\n\n // default columns for the table\n const defaultColumns = useMemo(() => {\n return [\n {\n title: 'Date/Time (UTC)',\n field: 'createTS',\n type: 'datetime',\n width: '20%',\n defaultSort: 'desc',\n },\n {\n title: 'Item Code',\n field: 'itemCode',\n lookup: {\n CDR: 'CDR',\n Company: 'Company',\n NumberBlock: 'Number Block',\n NumberBlockPorting: 'Number Block Porting',\n RGS: 'RGS',\n TeamsUser: 'Teams User',\n Trunk: 'Trunk',\n },\n },\n\n {\n title: ' Unit Price',\n field: 'unitPrice',\n doNotOverrideSort: true,\n render: (rowData) => {\n return (\n \n );\n },\n },\n {\n title: 'Qty',\n field: 'quantity',\n width: '5%',\n },\n {\n title: 'Line Total',\n field: 'lineTotal',\n doNotOverrideSort: true,\n render: (rowData) => {\n return (\n \n );\n },\n },\n {\n title: 'Description',\n field: 'description',\n grouping: false,\n filtering: false,\n sorting: false,\n width: '45%',\n },\n ];\n }, []);\n\n // Total of the lines on the UI\n const currentTotal = useMemo(() => {\n if (tableState?.data) {\n return tableState.data.reduce((result, currentValue) => {\n result = result + currentValue?.lineTotal ?? 0;\n return result;\n }, 0);\n }\n }, [tableState?.data]);\n\n const scopeCanEdit = requiredScope > [20, 40, 60][invoiceType];\n\n /*\n * Component for the Invoice Total and Update Status button at top of hte invoice lines component\n */\n const titleProps = currentInvoice && (\n \n \n {currentInvoice?.invoiceStatus !== 8 && scopeCanEdit && (\n {\n dispatch({\n type: 'OPEN_MODAL',\n payload: {\n mode: 'Approval',\n data: currentInvoice,\n state: config.invoices.statusUpload[\n currentInvoice?.invoiceStatus\n ][0],\n },\n });\n }}\n data-walkthroughid={invoiceLines.ufUpdateStatusBtn}>\n Update Status\n \n )}\n {EDITABLE_STATUS.includes(currentInvoice?.invoiceStatus) &&\n scopeCanEdit && (\n }\n onClick={() => {\n dispatch({\n type: 'OPEN_MODAL',\n payload: {\n state: {},\n loading: false,\n mode: 'Add',\n hash: '',\n },\n });\n dispatch({\n type: 'CHANGE_MODAL_HASH',\n });\n }}\n data-walkthroughid={invoiceLines.ufAddInvoiceLineBtn}>\n Add Invoice Line\n \n )}\n \n );\n\n // set current invoice use Effect\n useEffect(() => {\n if (child?.id) {\n const tmp = parent.find((v) => v.id === child?.id);\n setCurrentInvoice(tmp);\n }\n }, [child?.id]);\n\n /*\n * Table and Modal of Invoice Lines\n */\n return (\n \n {\n return {\n ...freshData,\n ...state,\n };\n }}\n onModalSucceed={(res) => {\n const modalDataID = modalData?.id;\n dispatch({\n type: 'RESET_MODAL',\n });\n var dataIndex = null;\n switch (modalMode) {\n case 'Edit':\n var newTableData = [...tableState.data];\n dataIndex = newTableData.findIndex(\n (element) => element.id === res.data.id,\n );\n newTableData.splice(dataIndex, 1, res.data);\n dispatch({\n type: 'CHANGE_TABLE_STATE',\n payload: {\n ...tableState,\n data: newTableData,\n },\n });\n break;\n case 'Add':\n dispatch({\n type: 'CHANGE_TABLE_STATE',\n payload: {\n ...tableState,\n data: [...tableState.data, res.data],\n },\n });\n break;\n case 'Delete':\n var newTableData2 = [...tableState.data];\n dataIndex = newTableData2.findIndex(\n (element) => element.id === modalDataID,\n );\n newTableData2.splice(dataIndex, 1);\n dispatch({\n type: 'CHANGE_TABLE_STATE',\n payload: {\n ...tableState,\n data: newTableData2,\n },\n });\n break;\n default:\n break;\n }\n }}\n modalUpdate=\"/invoiceline/\"\n onModalAdd={() => {\n return axios.post('/invoiceline/', {\n ...modalState,\n invoiceID: child?.id,\n });\n }}\n modalFetch={\n modalMode === 'Approval'\n ? `/invoice/${modalData?.id}`\n : `/invoiceline/${modalData?.id}`\n }\n modalDelete={`/invoiceline/${modalData?.id}`}\n modalApproval={`/invoice/${modalData?.id}/${modalState?.upload}`}\n modalTitle={\n modalMode === 'Approval'\n ? ` Update Invoice Status of: ${modalData?.parentName} - ${modalData?.entityName} - ${modalData?.invoiceNumber}`\n : `${modalMode} Invoice Line`\n }\n modalContent={\n modalMode === 'Approval' ? (\n \n ) : (\n \n )\n }\n modalButtons={\n modalMode === 'Approval' && (\n {\n dispatch({\n type: 'ON_MODAL_SUBMIT',\n payload: true,\n });\n }}\n data-walkthroughid={\n invoiceLines.ufModalUpdateStatusBtn\n }>\n Update\n \n )\n }\n groupable\n newPage\n maxBodyHeight={\n window.innerHeight * config.breadcrumbView.tableHeight\n }\n rowActions={{\n editable: requiredScope > [20, 40, 60][invoiceType],\n // cdr: {\n // position: 'toolbar',\n // onClick: () => {\n // axios\n // .get('/invoice/' + child?.id + '/export/cdr', {\n // responseType: 'blob',\n // })\n // .then((res) => {\n // const filename = extractFilename(\n // res.headers['content-disposition'] ||\n // 'attachment; filename=\"Sample_File.csv\"; filename*=UTF-8\\'\\'CDR_Wounds%20Australia_.csv',\n // );\n // const blob = new Blob([res.data]);\n // const link = document.createElement('a');\n // link.href =\n // window.URL.createObjectURL(blob);\n // document.body.appendChild(link);\n\n // link.download = filename;\n // link.click();\n // })\n // .catch((e) => {});\n // },\n // },\n // xero: invoiceType === 0 && {\n // position: 'toolbar',\n // onClick: () => {\n // axios\n // .get('/invoice/' + child?.id + '/export/xero', {\n // responseType: 'blob',\n // })\n // .then((res) => {\n // const filename = extractFilename(\n // res.headers['content-disposition'] ||\n // 'attachment; filename=\"Sample_File.csv\"; filename*=UTF-8\\'\\'CDR_Wounds%20Australia_.csv',\n // );\n // const blob = new Blob([res.data]);\n // const link = document.createElement('a');\n // link.href =\n // window.URL.createObjectURL(blob);\n // document.body.appendChild(link);\n\n // link.download = filename;\n // link.click();\n // })\n // .catch((e) => {});\n // },\n // },\n }}\n columns={tableState?.data?.length > 0 ? defaultColumns : null}\n defaultColumns={defaultColumns}\n additionalActions={[\n {\n icon: () => (\n \n ),\n tooltip: 'Refresh',\n position: 'toolbar',\n onClick: () => {\n dispatch({\n type: 'INIT_WEB_WORKER_STATE',\n payload: {\n fetchURL: `/invoicelines/${child.id}`,\n attribute: 'invoiceLines',\n },\n });\n },\n },\n (rowData) => ({\n icon: () => (\n \n ),\n tooltip: 'Delete',\n hidden: !rowData.manualEntry,\n position: 'row',\n onClick: (event, rowData) => {\n dispatch({\n type: 'OPEN_MODAL',\n payload: {\n mode: 'Delete',\n data: rowData,\n },\n });\n },\n }),\n ]}\n />\n \n );\n};\n\nexport default InvoiceLines;\n","import { useRef, useState } from 'react';\nimport { useSelector, useDispatch } from 'react-redux';\nimport { Breadcrumbs, Link, Typography } from '@material-ui/core';\nimport { Button } from 'react-bootstrap';\nimport { Alert, AlertTitle } from '@material-ui/lab';\nimport ListRoundedIcon from '@material-ui/icons/ListRounded';\nimport LoopRoundedIcon from '@material-ui/icons/LoopRounded';\n\nimport { TableAndModal, LoadingFieldDropdown } from '../../../components';\nimport { NegativeSixDP } from 'components/maintenance/NumberFormatCustom';\nimport InvoiceLines from './invoiceLines/Index';\nimport config from '../../../config.json';\nimport { CustomFieldsForm } from '../../organisations';\nimport { axios } from '../../../services/axios';\nimport ModalApprovalContent from './ModalApprovalContent';\n\nimport walkthroughIds from './walkthroughIds';\n\n/*\n * Base component for rendering the Invoices tab on the sidebar\n */\nconst Invoice = () => {\n const dispatch = useDispatch();\n const tableRef = useRef();\n const [warning, setWarning] = useState(null);\n\n // table state data\n const { child, parent, invoiceType } = useSelector((state) => {\n return {\n ...state.table,\n };\n });\n\n // modal state data\n const {\n data: modalData,\n state: modalState,\n mode: modalMode,\n } = useSelector((state) => {\n return {\n ...state.modal,\n };\n });\n\n // scope state\n const { requiredScope, currentScope } = useSelector((state) => {\n return { ...state.login };\n });\n\n // company, wholesaler and partner from state\n const { currentCompany, currentPartner, currentWholesaler } = useSelector(\n (state) => {\n return { ...state.navigationLists };\n },\n );\n\n const { invoices } = walkthroughIds;\n\n // default columns for table\n const defaultColumns = [\n {\n title: 'Invoiced By',\n field: 'parentName',\n },\n {\n title: 'Invoiced To',\n field: 'entityName',\n },\n {\n title: 'Number',\n field: 'invoiceNumber',\n },\n {\n title: 'Due Date',\n field: 'dueDate',\n type: 'date',\n width: '15%',\n },\n {\n title: 'End Date',\n field: 'endDate',\n defaultSort: 'desc',\n type: 'date',\n width: '15%',\n },\n {\n title: 'Total',\n field: 'invoiceTotal',\n doNotOverrideSort: true,\n render: (rowData) => {\n return (\n \n );\n },\n },\n {\n title: 'Line Count',\n field: 'lineCount',\n doNotOverrideSort: true,\n },\n {\n title: 'Status',\n field: 'invoiceStatus',\n lookup: config.invoices.statusJSON,\n customSort: (l, r) => {\n const leftValue =\n typeof l === 'object'\n ? config.invoices.statusJSON[l?.invoiceStatus]\n : config.invoices.statusJSON[l];\n const rightValue =\n typeof r === 'object'\n ? config.invoices.statusJSON[r?.invoiceStatus]\n : config.invoices.statusJSON[r];\n\n return leftValue?.localeCompare(rightValue);\n },\n },\n ...config.table.custom,\n ];\n\n /*\n * onTableFetch Function for the TableAndModal\n * checks if currentCompany / partner / wholesaler actually set for proper filtering\n * Then after that returns a axios call with the data\n */\n const onTableFetch = () => {\n setWarning(null);\n switch (currentScope) {\n case 20:\n if (!currentCompany) {\n setWarning({ scope: 'Company' });\n }\n break;\n\n case 40:\n if (!currentPartner) {\n setWarning({ scope: 'Partner' });\n }\n break;\n case 60:\n if (!currentWholesaler) {\n setWarning({ scope: 'Wholesaler' });\n }\n break;\n default:\n break;\n }\n switch (String(invoiceType)) {\n case '2':\n return axios.get('/invoices/', {\n params: {\n wholesalerID:\n currentScope === 60 ? currentWholesaler : null,\n type: invoiceType,\n },\n });\n case '1':\n return axios.get('/invoices/', {\n params: {\n wholesalerID:\n currentScope === 60 ? currentWholesaler : null,\n partnerID: currentScope === 40 ? currentPartner : null,\n type: invoiceType,\n },\n });\n case '0':\n return axios.get('/invoices/', {\n params: {\n type: invoiceType,\n companyID: currentScope === 20 ? currentCompany : null,\n partnerID: currentScope === 40 ? currentPartner : null,\n wholesalerID:\n currentScope === 60 ? currentWholesaler : null,\n },\n });\n default:\n dispatch({\n type: 'CHANGE_TABLE_INVOICE_TYPE',\n payload: 0,\n });\n\n return axios.get('/invoices/', {\n params: {\n type: 0,\n companyID: currentScope === 20 ? currentCompany : null,\n },\n });\n }\n };\n\n /*\n * Child component is the button in the table with the tooltip 'View Invoice Lines'\n * When Clicked -> opened in a full page modal\n */\n if (child) {\n return (\n <>\n \n {\n e.preventDefault();\n dispatch({\n type: 'RESET_CHILD_TABLE',\n });\n dispatch({\n type: 'RESET_MODAL',\n });\n }}>\n All Invoices\n \n \n \n l?.entityName?.localeCompare(r?.entityName),\n )}\n onChange={(v) => {\n dispatch({\n type: 'CHANGE_CHILD_TABLE',\n payload: { id: v },\n });\n dispatch({\n type: 'INIT_WEB_WORKER_STATE',\n payload: {\n fetchURL: `/invoicelines/${v}`,\n attribute: 'invoiceLines',\n },\n });\n }}\n groupBy={(option) =>\n option?.entityName +\n ' - ' +\n config.invoices.statusJSON[\n option?.invoiceStatus\n ]\n }\n onDisplayDropdown={(value) => {\n if (typeof value === 'string') {\n const parentItem = parent?.find(\n (v) => v.id === value,\n );\n if (parentItem) {\n const {\n entityName,\n invoiceNumber,\n invoiceStatus,\n } = parentItem;\n return (\n entityName +\n ' - ' +\n config.invoices.statusJSON[\n invoiceStatus\n ] +\n ' - ' +\n invoiceNumber\n );\n }\n }\n return (\n value?.entityName +\n ' - ' +\n config.invoices.statusJSON[\n value?.invoiceStatus\n ] +\n ' - ' +\n value?.invoiceNumber\n );\n }}\n noEmptyOption\n fieldValue={child.id}\n />\n
\n Invoice Lines\n \n \n \n );\n }\n\n /*\n * Returns a Alert if the warning is set else\n * Returns a TableAndModal for invoices\n */\n return (\n <>\n {warning && (\n \n No {warning.scope} Set \n There are no {warning.scope} set. Invoice list is not\n filtered to the current {warning.scope} being managed.\n \n )}\n [20, 40, 60][invoiceType], // displayCustomFields.invoices, //editable 1 up\n invoiceType: requiredScope !== 20, //not a CA\n xero: { position: 'row' },\n cdr: invoiceType === 0 && { position: 'row' }, //CDR for company invoice type only\n }}\n dynamicScope\n modalTitle={\n modalMode === 'Edit'\n ? `Edit Invoice Custom Attributes : ${modalData?.parentName} - ${modalData?.entityName} - ${modalData?.invoiceNumber}`\n : ` Update Invoice Status of: ${modalData?.parentName} - ${modalData?.entityName} - ${modalData?.invoiceNumber}`\n }\n additionalActions={[\n (rowData) => ({\n icon: () => (\n \n ), //for viewing child tables only\n tooltip: 'View Invoice Lines',\n position: 'row',\n onClick: (event, rowData) => {\n dispatch({\n type: 'OPEN_CHILD_TABLE',\n payload: rowData,\n });\n dispatch({\n type: 'INIT_WEB_WORKER_STATE',\n payload: {\n fetchURL: `/invoicelines/${rowData.id}`,\n attribute: 'invoiceLines',\n },\n });\n },\n }),\n (rowData) => ({\n isFreeAction: false,\n position: 'row',\n tooltip: 'Update Invoice Status',\n icon: () => (\n \n ),\n hidden:\n requiredScope <= [20, 40, 60][invoiceType] ||\n rowData?.invoiceStatus === 8,\n onClick: () =>\n dispatch({\n type: 'OPEN_MODAL',\n payload: {\n mode: 'Approval',\n data: rowData,\n show: true,\n state: config.invoices.statusUpload[\n rowData?.invoiceStatus\n ][0],\n },\n }),\n }),\n ]}\n groupable\n filterable\n maxBodyHeight={\n window.innerHeight * config.plainView.tableHeight\n }\n modalContent={\n modalMode === 'Approval' ? (\n \n ) : (\n \n )\n }\n modalUpdate={`/invoice/attributes/${modalData?.id}`}\n modalUpload={(freshData, state) => {\n const { attribute1, attribute2, attribute3 } = {\n ...freshData,\n ...state,\n };\n return {\n config: {\n params: {\n attribute1,\n attribute2,\n attribute3,\n },\n },\n };\n }}\n modalButtons={\n modalMode === 'Approval' && (\n {\n dispatch({\n type: 'ON_MODAL_SUBMIT',\n payload: true,\n });\n }}>\n Update\n \n )\n }\n />\n \n );\n};\n\nexport default Invoice;\n","export default {\n plans: {\n ufNameInput: '/plans/input/name',\n ufActiveCheckbox: '/plans/checkbox/active',\n ufDescriptionInput: '/plans/input/description',\n ufWholesalerSelect: '/plans/select/wholesaler',\n ufPartnerSelect: '/plans/select/partner',\n ufInternationalRateSelect: '/plans/select/internationalRate',\n ufInternationalDiscountInput: '/plans/input/internationalDiscount',\n ufBillCheckbox: '/plans/checkbox/bill',\n ufCountryInput: '/plans/input/country',\n ufPrefixInput: '/plans/input/prefix',\n ufCompanySetupFeeInput: '/plans/input/companySetupFee',\n ufSimplePortingFeeInput: '/plans/input/simplePortingFee',\n ufComplexPortingFeeInput: '/plans/input/complexPortingFee',\n ufOtherPortingFeeInput: '/plans/input/otherPortingFee',\n ufSetupFeeUserTd: '/plans/td/setupFeeUser',\n ufSetupFeeTrunkTd: '/plans/td/setupFeeTrunk',\n ufSetupFeeChannelsTd: '/plans/td/setupFeeChannels',\n ufSetupFeeResponseGroupTd: '/plans/td/setupFeeResponseGroup',\n ufRateUserTd: '/plans/td/rateUser',\n ufRateTrunkTd: '/plans/td/rateTrunk',\n ufRateChannelsTd: '/plans/td/rateChannels',\n ufRateResponseGroupTd: '/plans/td/rateResponseGroup',\n ufBillUserCheckbox: '/plans/checkbox/billUser',\n ufBillTrunkCheckbox: '/plans/checkbox/billTrunk',\n ufBillChannelsCheckbox: '/plans/checkbox/billChannels',\n ufBillResponseGroupCheckbox: '/plans/checkbox/billResponseGroup',\n },\n callingRates: {\n ufNameInput: '/plans/calling-rates/input/name',\n ufPriorityInput: '/plans/calling-rates/input/priority',\n ufPrefixInput: '/plans/calling-rates/input/prefix',\n ufFlagFallInRateInput: '/plans/calling-rates/input/flagFallInRate',\n ufFlagFallOutRateInput: '/plans/calling-rates/input/flagFallOutRate',\n ufInboundRateInput: '/plans/calling-rates/input/inboundRate',\n ufOutboundRateInput: '/plans/calling-rates/input/outboundRate',\n },\n callingInclusions: {\n ufNameInput: '/plans/calling-inclusions/input/name',\n ufPriorityInput: '/plans/calling-inclusions/input/priority',\n ufInclusionAmountInput:\n '/plans/calling-inclusions/input/inclusionAmount',\n ufInclusionTypeSelect: '/plans/calling-inclusions/select/inclusionType',\n ufAppliesToSelect: '/plans/calling-inclusions/select/appliesTo',\n },\n numberBlockRates: {\n ufPatternSelect: '/plans/number-block-rates/select/pattern',\n ufPrefixInput: '/plans/number-block-rates/input/prefix',\n ufBlockSizeSelect: '/plans/number-block-rates/select/blockSize',\n ufBillCheckbox: '/plans/number-block-rates/checkbox/bill',\n ufSetupFeeInput: '/plans/number-block-rates/input/setupFee',\n ufRateInput: '/plans/number-block-rates/input/rate',\n ufDeleteBtn: '/plans/number-block-rates/button/delete',\n ufSaveBtn: '/plans/number-block-rates/button/save',\n },\n deleteModal: {\n ufDeleteModal: '/plans/modal/deleteModal',\n ufDeleteBtn: '/plans/modal/button/delete',\n ufCancelBtn: '/plans/modal/button/cancel',\n },\n itemCodeMappings: {\n ufAccountCode: '/plans/input/accountCode',\n ufItemCode: '/plans/input/itemCode',\n ufTrackingName1: '/plans/input/trackingName1',\n ufTrackingOption1: '/plans/input/trackingOption1',\n },\n};\n","import React, { useRef } from 'react';\nimport { useSelector, useDispatch } from 'react-redux';\nimport { Row, Col } from 'react-bootstrap';\nimport { TextField } from '@material-ui/core';\n\nimport config from '../../../../config.json';\nimport { TableAndModal } from '../../../../components';\n\nimport walkthroughIds from '../walkthroughIds';\n\n/**\n * Item Code Mappings component from the Plans comonent of TCAp\n */\nconst ItemCodeMappings = () => {\n const dispatch = useDispatch();\n const tableRef = useRef();\n\n // table data from state\n const { child } = useSelector((state) => {\n return {\n ...state.table,\n };\n });\n\n // modal data from state\n const { modalData, modalState, modalMode } = useSelector((state) => {\n return {\n modalLoading: state.modal.loading,\n modalData: state.modal.data,\n modalState: state.modal.state,\n modalMode: state.modal.mode,\n modalStateError: state.modal.stateError,\n modalUploading: state.modal.uploading,\n };\n });\n\n const { itemCodeMappings } = walkthroughIds;\n\n // default columns for the table\n const defaultColumns = [\n {\n title: 'Category',\n field: 'category',\n defaultSort: 'asc',\n },\n {\n title: 'Item Code',\n field: 'itemCode',\n },\n\n {\n title: 'Account Code',\n field: 'accountCode',\n },\n {\n title: 'Tracking Name 1',\n field: 'trackingName1',\n },\n {\n title: 'Tracking Option 1',\n field: 'trackingOption1',\n },\n ];\n\n // render the table and modal with the modal content specified\n return (\n {\n return {\n ...freshData,\n ...state,\n planID: child?.id,\n };\n }}\n title=\"Item Code Mappings\"\n defaultColumns={defaultColumns}\n groupable\n filterable\n maxBodyHeight={window.innerHeight * config.plainView.tableHeight}\n modalTitle={\n modalMode === 'Edit'\n ? 'Edit Item Code Mapping : ' + modalData?.category\n : 'Generate Item Code Mappings'\n }\n modalContent={\n <>\n \n \n {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n accountCode: e.target.value,\n },\n });\n }}\n data-walkthroughid={\n itemCodeMappings.ufAccountCode\n }\n />\n \n \n {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n itemCode: e.target.value,\n },\n });\n }}\n data-walkthroughid={itemCodeMappings.ufItemCode}\n />\n \n
\n \n \n {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n trackingName1: e.target.value,\n },\n });\n }}\n data-walkthroughid={\n itemCodeMappings.ufTrackingName1\n }\n />\n \n \n {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n trackingOption1: e.target.value,\n },\n });\n }}\n data-walkthroughid={\n itemCodeMappings.ufTrackingOption1\n }\n />\n \n
\n \n }\n />\n );\n};\n\nexport default ItemCodeMappings;\n","import { Button } from 'react-bootstrap';\nimport { useDispatch } from 'react-redux';\nimport {\n Dialog,\n DialogContent,\n DialogTitle,\n DialogContentText,\n DialogActions,\n} from '@mui/material';\n\nimport { Alert, AlertIcon } from '@/components/v4';\n\nimport walkthroughIds from '../walkthroughIds';\n\nexport default function DeleteConfirmation({ mode, show }) {\n const dispatch = useDispatch();\n const { deleteModal } = walkthroughIds;\n\n const handleCloseModal = () => {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n showPrompt: undefined,\n },\n });\n };\n const handleDelete = () => {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n isActive: false,\n showPrompt: undefined,\n },\n });\n dispatch({\n type: 'ON_MODAL_SUBMIT',\n payload: true,\n });\n };\n\n return (\n \n );\n}\n\nexport const DeleteButton = () => {\n const dispatch = useDispatch();\n\n const handleShowPrompt = () => {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n showPrompt: true,\n },\n });\n };\n\n return (\n \n {'Delete'}\n \n );\n};\n","import { useEffect, useRef, useState } from 'react';\nimport { useSelector, useDispatch } from 'react-redux';\nimport { Row, Col, Button } from 'react-bootstrap';\nimport { axios } from '../../../../services/axios';\nimport { Alert, AlertTitle } from '@material-ui/lab';\nimport { TextField } from '@material-ui/core';\nimport Skeleton from '@material-ui/lab/Skeleton';\nimport Visibility from '@material-ui/icons/VisibilityRounded';\n\nimport TableAndModal, {\n modalTitle,\n onModalError,\n} from '../../../../components/tables/TableAndModal';\nimport { NonNegativeInteger } from '../../../../components/maintenance/NumberFormatCustom';\nimport config from '../../../../config.json';\nimport { LoadingFieldDropdown, MultiSelect } from '../../../../components';\nimport DeleteConfirmation, { DeleteButton } from './DeleteConfirmation';\n\nimport walkthroughIds from '../walkthroughIds';\n\nconst CallInclusions = () => {\n const dispatch = useDispatch();\n const tableRef = useRef();\n const [availableRatesList, setAvailableRatesList] = useState([]);\n const [add, setAdd] = useState(true);\n\n // state access\n const {\n data: modalData,\n state: modalState,\n mode: modalMode,\n show: modalShow,\n stateError: modalStateError,\n } = useSelector((state) => {\n return {\n ...state.modal,\n };\n });\n\n const { loading: tableLoading } = useSelector((state) => {\n return { ...state.table };\n });\n\n const { child } = useSelector((state) => {\n return {\n ...state.table,\n };\n });\n\n const { callingInclusions } = walkthroughIds;\n\n // default columns for the table\n const defaultColumns = [\n {\n title: 'Name',\n field: 'name',\n defaultSort: 'asc',\n },\n\n {\n title: 'Priority',\n field: 'priority',\n },\n {\n title: 'Included Minutes',\n field: 'inclusionAmount',\n },\n\n {\n title: 'Included Minutes Per',\n field: 'inclusionType',\n lookup: config.callInclusions.typeJSON,\n },\n ];\n\n // get rates for the child based on the modal\n useEffect(() => {\n if (child?.id) {\n axios\n .get('/rates/' + child?.id)\n .then((res) => {\n setAdd(res?.data?.length > 0);\n })\n .catch(() => {});\n }\n }, [child?.id]);\n\n // useEffect to get the availibile rates list for a specific child id\n useEffect(() => {\n if (\n modalShow &&\n modalState?.appliesTo &&\n modalState?.modified !== true\n ) {\n axios\n .get('/CallInclusion/AvailableRates/' + child?.id)\n .then((res) => {\n var dumpedDataIDs = modalState.appliesTo.filter(\n (id) =>\n !res.data.some((validData) => validData.id === id),\n );\n var newAppliesTo = res.data.filter((availableRate) =>\n modalState.appliesTo.some(\n (item) => availableRate.id === item,\n ),\n );\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n appliesTo: newAppliesTo,\n modified: true,\n dumpedDataIDs,\n },\n });\n setAvailableRatesList(res.data);\n });\n }\n }, [modalState?.modified, modalShow, modalState?.appliesTo]);\n\n // return a table and modal for Call Inclusions\n return (\n <>\n {!tableLoading && !add && (\n \n No Calling Rates\n To add a call inclusion, you must have at least 1 calling\n rate.\n \n )}\n {\n return {\n ...freshData,\n ...state,\n planID: child?.id,\n appliesTo:\n state?.appliesTo\n ?.map((v) =>\n Object.keys(v).includes('id') ? v.id : v,\n )\n .filter((v) => v.length > 0) || [],\n };\n }}\n title=\"Call Inclusions\"\n noTitle\n defaultColumns={defaultColumns}\n add={!tableLoading && add}\n groupable\n filterable\n rowActions={{\n editable: true,\n }}\n additionalActions={[\n (rowData) => ({\n isFreeAction: false,\n hidden: true,\n onClick: () =>\n dispatch({\n type: 'OPEN_MODAL',\n payload: {\n mode: 'Edit',\n data: rowData,\n },\n }),\n icon: () => ,\n tooltip: 'View Call Inclusions',\n }),\n ]}\n modalInitState={{\n isActive: true,\n appliesTo: [],\n }}\n maxBodyHeight={\n window.innerHeight * config.breadcrumbView.tableHeight\n }\n modalTitle={modalTitle(\n modalData,\n 'name',\n ' Call Inclusions ',\n modalMode,\n )}\n modalButtons={\n modalMode === 'Edit' && (\n <>\n {\n dispatch({\n type: 'ON_MODAL_SUBMIT',\n payload: true,\n });\n }}>\n Save Changes\n \n \n \n )\n }\n modalValidate={() => {\n const newErrorState = {\n name:\n (!modalState?.name ||\n modalState?.name?.length < 1) &&\n 'Field is required.',\n priority:\n ((modalState?.priority !== 0 &&\n !modalState?.priority) ||\n String(modalState?.priority)?.length < 1) &&\n 'Field is required.',\n inclusionAmount:\n (!modalState?.inclusionAmount ||\n modalState?.inclusionAmount?.length < 1) &&\n 'Field is required.',\n inclusionType:\n !Object.keys(config.callInclusions.type).includes(\n String(modalState.inclusionType),\n ) && 'Field is required.',\n appliesTo:\n (!Array.isArray(modalState?.appliesTo) ||\n modalState?.appliesTo?.length < 1) &&\n 'Must apply to at least 1 rate.',\n };\n dispatch({\n type: 'CHANGE_MODAL_STATE_ERROR',\n payload: newErrorState,\n });\n return !(\n newErrorState.name ||\n newErrorState.priority ||\n newErrorState.inclusionAmount ||\n newErrorState.inclusionType ||\n newErrorState.appliesTo\n );\n }}\n newPage\n modalContent={\n <>\n \n \n \n {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n name: e.target.value,\n },\n });\n }}\n error={Boolean(modalStateError?.name)}\n helperText={modalStateError?.name}\n data-walkthroughid={\n callingInclusions.ufNameInput\n }\n />\n \n \n {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n priority: e.target.value,\n },\n });\n }}\n data-walkthroughid={\n callingInclusions.ufPriorityInput\n }\n />\n \n
\n \n \n {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n inclusionAmount: e.target.value,\n },\n });\n }}\n data-walkthroughid={\n callingInclusions.ufInclusionAmountInput\n }\n />\n \n \n {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n inclusionType: v,\n },\n });\n }}\n errorText={modalStateError?.inclusionType}\n noEmptyOption\n dataWalkthroughid={\n callingInclusions.ufInclusionTypeSelect\n }\n />\n \n
\n \n \n {modalState?.modified ? (\n \n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n appliesTo: v,\n },\n })\n }\n errorText={modalStateError?.appliesTo}\n value={modalState?.appliesTo}\n data-walkthroughid={\n callingInclusions.ufAppliesToSelect\n }\n />\n ) : (\n \n )}\n \n
\n \n }\n />\n \n );\n};\n\nexport default CallInclusions;\n","import { QuestionOutlineIcon } from '@chakra-ui/icons';\nimport { forwardRef, Tooltip } from '@chakra-ui/react';\nimport { classNames as cx } from 'utils/classNames';\nimport { useSelector } from 'react-redux';\n\n/**\n * @typedef {Object} TooltipOptions\n * @property {boolean} show (required) show tooltip icon when hovering to the parent element\n * @property {string} [tooltipClass] class name for tooltip\n * @property {string} [iconClass] class name for icon\n */\n\n/**\n * @typedef {import('@chakra-ui/react').TooltipProps & TooltipOptions} CustomTooltipProps\n * @type React.ForwardRefRenderFunction\n * @description Custom Tooltip component that shows when hover to the parent element\n * @description Parent component requires to have onMouseEnter and onMouseLeave (or pointer if disabled) events\n * @returns {JSX.Element}\n */\nexport const AltTooltip = forwardRef((props, ref) => {\n const { darkMode } = useSelector((state) => state.settings);\n const { label, show, tooltipClass, iconClass } = props;\n return (\n \n \n \n );\n});\n","export default {\n USERS: '/users',\n RESOURCE_ACCOUNTS: '/resource-accounts',\n RESOURCE_ACCOUNTS_ENDPOINT: '/resourceAccounts',\n BUILDER: 'builder',\n CSVUSERS: 'csv-users',\n CSVRESOURCEACCOUNTS: 'csv-resource-accounts',\n};\n","export default {\n /** @type {services} */\n SERVICES: 'services',\n\n /** @type {service-profiles} */\n SERVICE_PROFILES: 'service-profiles',\n\n /**@type {'directrouting'} */\n DIRECT_ROUTING: 'directrouting',\n /**@type {'sbcaas'} */\n SBCAAS: 'sbcaas',\n /**@type {'operatorconnect'} */\n OPERATOR_CONNECT: 'operatorconnect',\n /**@type {'occ'} */\n OPERATOR_CONNECT_CONFERENCE: 'occ',\n /**@type {'tpm'} */\n TEAM_PHONE_MOBILE: 'tpm',\n /**@type {'acsservice'} */\n AZURE_CONNECT_SERVICE: 'acsservice',\n /**@type {'appauth'} */\n APP_AUTH: 'appauth',\n /**@type {'vendordefined'} */\n VENDOR_DEFINED: 'vendordefined',\n\n /** @type {'/services/sbcaaas'} */\n SERVICES_SBCAAAS: '/services/sbcaaas',\n\n /** @type {'/services/operatorconnect'} */\n SERVICES_OPERATOR_CONNECT: '/services/operatorconnect',\n\n /** @type {'services/occ'} */\n SERVICES_OCC: '/services/occ',\n\n /** @type {'services/directrouting'} */\n SERVICES_DIRECT_ROUTING: '/services/directrouting',\n\n /** @type {'services/acsservice'} */\n SERVICES_AZURE_CONNECT_SERVICE: '/services/acsservice',\n\n /** @type {':id/activation'} */\n SERVICES_TPM_TRIAL: ':id/activation/*',\n\n /** @type {'activation/associated-accounts'} */\n SERVICES_TPM_ASSOCIATED_ACC: 'activation/associated-accounts',\n\n /** @type {'/service-profiles/occ'} */\n SERVICE_PROFILES_OCC: '/service-profiles/occ',\n\n /** @type {'/services/appauth'} */\n SERVICES_APP_AUTH: '/services/appauth',\n\n /** @type {':id/users'} */\n SERVICES_VD_USERS: ':id/users',\n /** @type {':id/numbers'} */\n SERVICES_VD_NUMBERS: ':id/numbers',\n};\n","export default {\n PLANS: '/plans',\n CSVCALLINGRATES: 'csv-calling-rates',\n};\n","export default {\n CSVNUMBERS: 'csv-numbers',\n NUMBERS: 'numbers',\n /** @type {'/numbers/tpm'} */\n NUMBERS_TPM: '/numbers/tpm',\n};\n","// TODO: refactor authentication routes in this route folder\nimport userPath from './users/userPath';\nimport servicePath from './services/servicePath';\nimport planPath from './plans/planPath';\nimport numberPath from './numbers/numberPath';\n\n/** @const {Object.} path - route path for TCAP pages */\nexport default {\n /**\n * Route for creating a new service / entity.\n * @type {'create'}\n */\n CREATE: 'create',\n\n /**\n * Route for editing a service / entity with a specific ID.\n * @type {':id/edit'}\n */\n EDIT: ':id/edit',\n ...servicePath,\n ...userPath,\n ...planPath,\n ...numberPath,\n};\n","import { useRef } from 'react';\nimport { useSelector, useDispatch } from 'react-redux';\nimport { useNavigate } from 'react-router-dom';\nimport { Row, Col, Button } from 'react-bootstrap';\nimport { TextField } from '@material-ui/core';\nimport { Box } from '@chakra-ui/react';\nimport AddRoundedIcon from '@material-ui/icons/AddRounded';\nimport { useBoolean } from '@chakra-ui/react';\n\nimport TableAndModal, {\n floatSearch,\n} from '../../../../components/tables/TableAndModal';\nimport NumberFormatCustom, {\n NonNegativeInteger,\n} from '../../../../components/maintenance/NumberFormatCustom';\nimport config from '../../../../config.json';\nimport DeleteConfirmation, { DeleteButton } from './DeleteConfirmation';\nimport { AltTooltip } from 'components/v4/Tooltip/AltTooltip';\n\nimport walkthroughIds from '../walkthroughIds';\nimport path from '@/routes/constants';\n\n/**\n * Component to render the Calling Tab of the Plans component\n */\nconst Calling = () => {\n const navigate = useNavigate();\n const dispatch = useDispatch();\n const tableRef = useRef();\n const [hover, setHover] = useBoolean();\n\n // modal data from state\n const {\n data: modalData,\n state: modalState,\n mode: modalMode,\n stateError: modalStateError,\n } = useSelector((state) => {\n return {\n ...state.modal,\n };\n });\n\n // table data from state\n const { child } = useSelector((state) => {\n return {\n ...state.table,\n };\n });\n\n const { callingRates } = walkthroughIds;\n\n // default columns from state\n const defaultColumns = [\n {\n title: 'Name',\n field: 'name',\n },\n {\n title: 'Priority',\n field: 'priority',\n doNotOverrideSort: true,\n\n defaultSort: 'asc',\n },\n\n {\n title: 'Prefix',\n field: 'prefix',\n },\n {\n title: 'Flag Fall In Rate',\n field: 'flagFallInRate',\n doNotOverrideSort: true,\n render: (rowData) => {\n return (\n \n );\n },\n customFilterAndSearch: (v, rowData) =>\n floatSearch(v, rowData, 'flagFallInRate'),\n },\n {\n title: 'Flag Fall Out Rate',\n field: 'flagFallOutRate',\n doNotOverrideSort: true,\n render: (rowData) => {\n return (\n \n );\n },\n customFilterAndSearch: (v, rowData) =>\n floatSearch(v, rowData, 'flagFallOutRate'),\n },\n {\n title: 'Inbound Rate',\n field: 'inboundRate',\n doNotOverrideSort: true,\n render: (rowData) => {\n return (\n \n );\n },\n customFilterAndSearch: (v, rowData) =>\n floatSearch(v, rowData, 'inboundRate'),\n },\n {\n title: 'Outbound Rate',\n field: 'outboundRate',\n doNotOverrideSort: true,\n render: (rowData) => {\n return (\n \n );\n },\n customFilterAndSearch: (v, rowData) =>\n floatSearch(v, rowData, 'outboundRate'),\n },\n ];\n\n // render table and modal with the modal content\n return (\n {\n return {\n ...freshData,\n ...state,\n planID: child?.id,\n };\n }}\n // title=\"Calling Rates\"\n titleProps={\n \n {/* TODO: Q4 2024 release feature, remove hidden class when it's ready */}\n {\n navigate(\n {\n pathname: `/plans/${path.CSVCALLINGRATES}`,\n search: `?plan=${child?.name?.replace(\n / /g,\n '_',\n )}`,\n },\n {\n state: { planID: child?.id },\n },\n );\n }}>\n CSV Update\n \n {\n dispatch({\n type: 'OPEN_MODAL',\n payload: {\n state: {\n isActive: true,\n planID: child?.id,\n },\n loading: false,\n mode: 'Add',\n hash: '',\n },\n });\n dispatch({\n type: 'CHANGE_MODAL_HASH',\n });\n }}>\n {' '}\n {' '}\n Calling Rates{' '}\n \n \n }\n defaultColumns={defaultColumns}\n // add\n noTitle\n title={'Calling Rates'}\n groupable\n filterable\n rowActions={{\n editable: true,\n }}\n modalInitState={{\n isActive: true,\n }}\n maxBodyHeight={\n window.innerHeight * config.breadcrumbView.tableHeight\n }\n newPage\n modalValidate={() => {\n const newErrorState = {\n name:\n (!modalState?.name || modalState?.name?.length < 1) &&\n 'Field is required.',\n prefix:\n (!modalState?.prefix ||\n modalState?.prefix?.length < 1) &&\n 'Field is required.',\n priority:\n (!modalState?.priority ||\n modalState?.priority?.length < 1) &&\n 'Field is required.',\n };\n dispatch({\n type: 'CHANGE_MODAL_STATE_ERROR',\n payload: newErrorState,\n });\n\n return !(\n newErrorState.name ||\n newErrorState.prefix ||\n newErrorState.priority\n );\n }}\n modalButtons={\n modalMode === 'Edit' && (\n <>\n {\n dispatch({\n type: 'ON_MODAL_SUBMIT',\n payload: true,\n });\n }}\n className=\"mr-[14px]\">\n Save\n \n \n \n )\n }\n modalContent={\n <>\n \n \n \n {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n name: e.target.value,\n },\n });\n }}\n error={Boolean(modalStateError?.name)}\n helperText={modalStateError?.name}\n data-walkthroughid={callingRates.ufNameInput}\n />\n \n \n {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n priority: e.target.value,\n },\n });\n }}\n data-walkthroughid={\n callingRates.ufPriorityInput\n }\n />\n \n \n \n ),\n }}\n onChange={(e) => {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n prefix: e.target.value,\n },\n });\n }}\n data-walkthroughid={callingRates.ufPrefixInput}\n />\n \n
\n \n \n {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n flagFallInRate: e.target.value,\n },\n });\n }}\n data-walkthroughid={\n callingRates.ufFlagFallInRateInput\n }\n />\n \n \n {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n flagFallOutRate: e.target.value,\n },\n });\n }}\n data-walkthroughid={\n callingRates.ufFlagFallOutRateInput\n }\n />\n \n
\n \n \n {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n inboundRate: e.target.value,\n },\n });\n }}\n data-walkthroughid={\n callingRates.ufInboundRateInput\n }\n />\n \n \n {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n outboundRate: e.target.value,\n },\n });\n }}\n data-walkthroughid={\n callingRates.ufOutboundRateInput\n }\n />\n \n
\n \n }\n />\n );\n};\n\nexport default Calling;\n","import React, { useState, useEffect, useRef } from 'react';\nimport { Alert, AlertTitle } from '@material-ui/lab';\nimport {\n TextField,\n Checkbox,\n FormControlLabel,\n IconButton,\n} from '@material-ui/core';\nimport { useSelector, useDispatch } from 'react-redux';\nimport { Row, Col, Button } from 'react-bootstrap';\nimport HelpRoundedIcon from '@material-ui/icons/HelpRounded';\n\nimport TableAndModal, {\n modalTitle,\n floatSearch,\n} from '../../../../components/tables/TableAndModal';\nimport {\n NumberFormatCustom,\n LoadingFieldDropdown,\n} from '../../../../components';\nimport config from '../../../../config.json';\nimport DeleteConfirmation, { DeleteButton } from './DeleteConfirmation';\n\nimport walkthroughIds from '../walkthroughIds';\n\n/**\n * Component for The number block tab inside Plans page\n */\nconst Block = () => {\n const dispatch = useDispatch();\n const tableRef = useRef();\n const [warning, setWarning] = useState('');\n\n // modal data from state\n const {\n data: modalData,\n state: modalState,\n mode: modalMode,\n stateError: modalStateError,\n } = useSelector((state) => {\n return {\n ...state.modal,\n };\n });\n\n // table data from state\n const { child, state: tableState } = useSelector((state) => {\n return {\n ...state.table,\n };\n });\n\n const { numberBlockRates } = walkthroughIds;\n\n // default columns for table\n const defaultColumns = [\n {\n title: 'Block Size',\n field: 'size',\n defaultSort: 'asc',\n },\n {\n title: 'Bill',\n field: 'bill',\n type: 'boolean',\n },\n {\n title: 'Setup Fee',\n field: 'setupFee',\n doNotOverrideSort: true,\n render: (rowData) => {\n return (\n \n );\n },\n customFilterAndSearch: (v, rowData) =>\n floatSearch(v, rowData, 'setupFee'),\n },\n {\n title: 'Rate',\n field: 'rate',\n doNotOverrideSort: true,\n render: (rowData) => {\n return (\n \n );\n },\n customFilterAndSearch: (v, rowData) =>\n floatSearch(v, rowData, 'rate'),\n },\n\n {\n title: 'Prefix',\n field: 'prefix',\n },\n\n {\n title: 'Pattern',\n field: 'pattern',\n },\n ];\n\n // blockSize use Effect - unsure what it does\n useEffect(() => {\n if (tableState?.data) {\n const result = tableState?.data.reduce(\n (result, { size }) => {\n result[size] = true; //true means rate exists for this blockSize.\n return result;\n },\n { 1: false, 5: false, 10: false, 100: false },\n );\n const newWarn = Object.values(result).reduce((result, value) => {\n return result && value;\n }, true);\n setWarning(!newWarn);\n }\n }, [tableState]);\n\n // changes modal state if its a prefix or a pattern\n useEffect(() => {\n if (modalData?.prefix) {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n prefixType: 'Prefix',\n },\n });\n } else if (modalData?.pattern) {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n prefixType: 'Pattern',\n },\n });\n }\n if (modalState?.bill === undefined) {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n bill: true,\n },\n });\n }\n }, [modalData?.prefix, modalData?.pattern, modalState.bill]);\n\n // Render table and modal or an alert if warning if true\n return (\n <>\n {\n const { prefixType, prefix, pattern, ...rest } = state;\n if (prefixType === 'Prefix') {\n return {\n prefix: prefix || pattern,\n ...rest,\n planID: child?.id,\n };\n } else {\n return {\n pattern: pattern || prefix,\n ...rest,\n planID: child?.id,\n };\n }\n }}\n modalInitState={{ prefixType: 'Prefix', isActive: true }}\n title=\"Number Block Rates\"\n defaultColumns={defaultColumns}\n noTitle\n add\n groupable\n filterable\n newPage\n maxBodyHeight={window.innerHeight * config.tabView.tableHeight}\n modalTitle={modalTitle(\n modalData,\n 'name',\n ' Number Block Rate ',\n modalMode,\n )}\n rowActions={{\n editable: {\n init: { prefixType: 'Prefix' },\n },\n }}\n modalButtons={\n modalMode === 'Edit' && (\n <>\n {\n dispatch({\n type: 'ON_MODAL_SUBMIT',\n payload: true,\n });\n }}\n data-walkthroughid={numberBlockRates.ufSaveBtn}>\n Save Changes\n \n \n \n )\n }\n modalValidate={() => {\n const newErrorState = {\n size:\n (!modalState?.size ||\n modalState?.size?.length < 1) &&\n 'Field is required.',\n prefix:\n modalState?.prefixType === 'Prefix' &&\n (!modalState?.prefix ||\n modalState?.prefix?.length < 1) &&\n (!modalState?.pattern ||\n modalState?.pattern?.length < 1) &&\n 'Field is required.',\n pattern:\n modalState?.prefixType === 'Pattern' &&\n (!modalState?.prefix ||\n modalState?.prefix?.length < 1) &&\n (!modalState?.pattern ||\n modalState?.pattern?.length < 1) &&\n 'Field is required.',\n };\n dispatch({\n type: 'CHANGE_MODAL_STATE_ERROR',\n payload: newErrorState,\n });\n return !(\n newErrorState.size ||\n (modalState?.prefixType === 'Prefix' &&\n newErrorState.prefix) ||\n (modalState?.prefixType === 'Pattern' &&\n newErrorState.pattern)\n );\n }}\n editable={{\n add: true,\n update: true,\n }}\n modalContent={\n <>\n \n\n \n \n {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n prefixType: v,\n },\n });\n }}\n dataWalkthroughid={\n numberBlockRates.ufPatternSelect\n }\n />\n \n \n {modalState?.prefixType === 'Prefix' ? (\n {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n prefix: e.target.value,\n },\n });\n }}\n InputProps={{\n endAdornment: (\n {\n window.alert(\n 'Prefix Example:\\n61 to match numbers starting in 61, 61[23] matches numbers starting in 612 or 613',\n );\n }}>\n \n \n ),\n }}\n InputLabelProps={{\n shrink: true,\n }}\n error={Boolean(modalStateError?.prefix)}\n helperText={\n modalStateError?.prefix ??\n 'Pattern is ignored if Prefix has been set.'\n }\n data-walkthroughid={\n numberBlockRates.ufPrefixInput\n }\n />\n ) : (\n {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n pattern: e.target.value,\n },\n });\n }}\n InputLabelProps={{\n shrink: true,\n }}\n InputProps={{\n endAdornment: (\n {\n window.alert(\n 'pattern example:\\n(Using Perl Regular Expression)\\n^ - Start of line\\n$ - End of line\\n[] - list of possibilities\\n() - for grouping\\n{[min],[max]} - length (quantity) range\\n^61[234][0-9]{8}$ = matches a number that start with 612, 613, 614, and is followed by 8 additional numbers exactly',\n );\n }}>\n \n \n ),\n }}\n error={Boolean(\n modalStateError?.pattern,\n )}\n helperText={\n modalStateError?.pattern ??\n 'Pattern is ignored if Prefix has been set.'\n }\n data-walkthroughid={\n numberBlockRates.ufPrefixInput\n }\n />\n )}\n \n \n {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n size: v,\n },\n });\n }}\n toggleLimit={5}\n fieldValue={modalState?.size}\n errorText={\n !modalState?.size &&\n 'Field is required.'\n }\n dataWalkthroughid={\n numberBlockRates.ufBlockSizeSelect\n }\n />\n \n
\n \n \n {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n bill: !modalState?.bill,\n },\n });\n }}\n data-walkthroughid={\n numberBlockRates.ufBillCheckbox\n }\n />\n }\n label=\"Bill\"\n />\n \n
\n \n \n {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n setupFee: e.target.value,\n },\n });\n }}\n data-walkthroughid={\n numberBlockRates.ufSetupFeeInput\n }\n />\n \n \n {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n rate: e.target.value,\n },\n });\n }}\n data-walkthroughid={\n numberBlockRates.ufRateInput\n }\n />\n \n
\n \n }\n />\n \n );\n};\n\nexport default Block;\n","import { useEffect, useState } from 'react';\nimport { Row, Col } from 'react-bootstrap';\nimport { Checkbox, TextField, FormControlLabel } from '@material-ui/core';\nimport { useSelector, useDispatch } from 'react-redux';\nimport { Table } from 'react-bootstrap';\n\nimport { LoadingFieldDropdown } from '../../../../components';\nimport NumberFormatCustom, {\n FloatAllowNegative,\n} from '../../../../components/maintenance/NumberFormatCustom';\nimport { onModalError } from '../../../../components/tables/TableAndModal';\nimport { axios } from '../../../../services/axios';\nimport walkthroughIds from '../walkthroughIds';\n\n/*\n * Component that renders the form for the Plans Details tab when editing or adding a plan\n */\nconst ItemContent = () => {\n const dispatch = useDispatch();\n const [enumArray, setEnum] = useState([]);\n\n // modal Data from state\n const { state: modalState, stateError: modalStateError } = useSelector(\n (state) => {\n return {\n ...state.modal,\n };\n },\n );\n\n // scope data from state\n const { requiredScope } = useSelector((state) => {\n return { ...state.login };\n });\n\n const { plans } = walkthroughIds;\n\n // function to fetch the fields for the form\n const fieldFetch = () => {\n //global level plan\n if (!modalState?.partnerID && !modalState?.wholesalerID) {\n return axios.get('/internationalratelists/', {\n params: { globalOnly: true },\n });\n }\n //wholesaler level plan\n if (!modalState?.partnerID && modalState?.wholesalerID) {\n return axios.get(\n `/internationalratelists/wholesaler/${modalState?.wholesalerID}`,\n {\n params: { withPublic: true },\n },\n );\n }\n //partner level plan\n if (modalState?.partnerID && modalState?.wholesalerID) {\n return axios.get(\n `/internationalratelists/partner/${modalState?.partnerID}`,\n {\n params: { withPublic: true },\n },\n );\n }\n };\n\n // calls fieldFetch and sets the Enum to the results\n useEffect(() => {\n fieldFetch().then((res) => {\n setEnum(res.data);\n });\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [modalState?.partnerID, modalState?.wholesalerID]);\n\n useEffect(() => {\n if (\n !modalState.id &&\n (!modalState.internationalType ||\n !modalState.userType ||\n !modalState.trunkType ||\n !modalState.rgsType)\n )\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n internationalType: true,\n userType: true,\n trunkType: true,\n rgsType: true,\n },\n });\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n // Render the form for the 'Plans Details' Tab for edit and add plan\n return (\n <>\n \n Name & Description\n \n \n \n {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: { name: e.target.value },\n });\n }}\n data-walkthroughid={plans.ufNameInput}\n />\n \n \n {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n isActive: !modalState?.isActive,\n },\n });\n }}\n data-walkthroughid={plans.ufActiveCheckbox}\n />\n }\n label=\"Active\"\n />\n \n
\n\n \n \n {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n description: e.target.value,\n },\n });\n }}\n data-walkthroughid={plans.ufDescriptionInput}\n />\n \n
\n {requiredScope > 40 && (\n <>\n \n Belongs To\n \n {requiredScope === 80 && (\n \n \n {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n wholesalerID: v,\n partnerID: null,\n internationalRateListID: null,\n },\n });\n }}\n fieldValue={modalState?.wholesalerID}\n onError={onModalError}\n dataWalkthroughid={plans.ufWholesalerSelect}\n />\n \n
\n )}\n {modalState?.wholesalerID && (\n \n \n {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n partnerID: v,\n internationalRateListID: null,\n },\n });\n }}\n hasDependency={true}\n dependency={modalState?.wholesalerID}\n fieldValue={modalState?.partnerID}\n onError={onModalError}\n dataWalkthroughid={plans.ufPartnerSelect}\n />\n \n
\n )}\n \n )}\n \n International Rates\n \n \n \n {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n internationalRateListID: v,\n },\n });\n }}\n fieldValue={modalState?.internationalRateListID}\n onError={onModalError}\n dataWalkthroughid={plans.ufInternationalRateSelect}\n />\n \n
\n \n \n {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n internationalDiscount: e.target.value,\n },\n });\n }}\n data-walkthroughid={plans.ufInternationalDiscountInput}\n />\n \n \n {\n {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n internationalType:\n !modalState?.internationalType,\n },\n });\n }\n }}\n data-walkthroughid={plans.ufBillCheckbox}\n />\n }\n label=\"Bill\"\n />\n \n
\n \n Configurations\n \n\n \n \n {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n country: e.target.value,\n },\n });\n }}\n data-walkthroughid={plans.ufCountryInput}\n />\n \n \n {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n countryPrefix: e.target.value,\n },\n });\n }}\n data-walkthroughid={plans.ufPrefixInput}\n />\n \n
\n \n \n {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n companySetupFee: e.target.value,\n },\n });\n }}\n data-walkthroughid={plans.ufCompanySetupFeeInput}\n />\n \n \n {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n simplePortingFee: e.target.value,\n },\n });\n }}\n data-walkthroughid={plans.ufSimplePortingFeeInput}\n />\n \n
\n \n \n {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n complexPortingFee: e.target.value,\n },\n });\n }}\n data-walkthroughid={plans.ufComplexPortingFeeInput}\n />\n \n \n {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n otherPortingFee: e.target.value,\n },\n });\n }}\n data-walkthroughid={plans.ufOtherPortingFeeInput}\n />\n \n
\n \n \n \n | \n Attributes\n | \n User | \n Trunk | \n Channels | \n \n Response Group\n | \n
\n \n \n \n | Setup Fee | \n \n {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n userSetupFee: e.target.value,\n },\n });\n }}\n data-walkthroughid={plans.ufSetupFeeUserTd}\n />\n | \n \n {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n trunkSetupFee: e.target.value,\n },\n });\n }}\n data-walkthroughid={plans.ufSetupFeeTrunkTd}\n />\n | \n \n {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n sipChannelSetup: e.target.value,\n },\n });\n }}\n data-walkthroughid={plans.ufSetupFeeChannelsTd}\n />\n | \n \n {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n rgsSetupFee: e.target.value,\n },\n });\n }}\n data-walkthroughid={\n plans.ufSetupFeeResponseGroupTd\n }\n />\n | \n
\n \n | Rate | \n \n {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n userRate: e.target.value,\n },\n });\n }}\n data-walkthroughid={plans.ufRateUserTd}\n />\n | \n \n {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n trunkRate: e.target.value,\n },\n });\n }}\n data-walkthroughid={plans.ufRateTrunkTd}\n />\n | \n \n {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n sipChannelRate: e.target.value,\n },\n });\n }}\n data-walkthroughid={plans.ufRateChannelsTd}\n />\n | \n \n {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n rgsRate: e.target.value,\n },\n });\n }}\n data-walkthroughid={plans.ufRateResponseGroupTd}\n />\n | \n
\n \n | Bill | \n \n {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n userType: !modalState?.userType,\n },\n });\n }}\n data-walkthroughid={plans.ufBillUserCheckbox}\n />\n \n \n {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n trunkType: !modalState?.trunkType,\n },\n });\n }}\n data-walkthroughid={plans.ufBillTrunkCheckbox}\n />\n \n \n \n {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n rgsType: !modalState?.rgsType,\n },\n });\n }}\n data-walkthroughid={\n plans.ufBillResponseGroupCheckbox\n }\n />\n \n
\n \n
\n \n );\n};\n\nexport default ItemContent;\n","import { useRef } from 'react';\nimport { useSelector, useDispatch } from 'react-redux';\n\nimport { modalTitle } from '../../../components/tables/TableAndModal';\nimport ItemCodeMapping from './edit/ItemCodeMapping';\nimport CallInclusions from './edit/CallInclusions';\nimport CallingRates from './edit/CallingRates';\nimport NumberBlockRates from './edit/NumberBlockRates';\nimport config from '../../../config.json';\nimport PlanDetails from './edit/PlanDetails';\nimport { ModalCopy, MultiChild } from '../../../components';\n\n/*\n * Plans component that renders for the Plans page of the sideboard\n * The tabs in the edit page are ItemContent, Block, Calling, ItemCodeMappings and Types\n */\nconst Plans = () => {\n const dispatch = useDispatch();\n const tableRef = useRef();\n\n // modal data from state\n const {\n data: modalData,\n state: modalState,\n mode: modalMode,\n stateError: modalStateError,\n } = useSelector((state) => {\n return {\n ...state.modal,\n };\n });\n\n // navigation data from state\n const { currentPartner, currentWholesaler } = useSelector((state) => {\n return { ...state.navigationLists };\n });\n\n // scope data from state\n const { currentScope } = useSelector((state) => {\n return { ...state.login };\n });\n\n // default columns for table\n const defaultColumns = [\n {\n title: 'Wholesaler',\n field: 'wholesaler',\n hidden: currentScope !== 80,\n },\n {\n title: 'Partner',\n field: 'partner',\n hidden: currentScope < 60,\n },\n\n {\n title: 'Plan',\n field: 'name',\n },\n {\n title: 'Description',\n field: 'description',\n },\n ];\n\n // function that returns the table fetch query\n const tableFetch = () => {\n switch (currentScope) {\n case 40:\n return '/partner/' + currentPartner + '/plans';\n case 60:\n return '/wholesaler/' + currentWholesaler + '/plans';\n default:\n return '/plans/';\n }\n };\n\n return (\n {\n return data.map(({ wholesaler, partner, ...rest }) => ({\n ...rest,\n wholesaler:\n wholesaler?.length > 0\n ? wholesaler\n : config.notAllocated.table,\n partner:\n partner?.length > 0\n ? partner\n : config.notAllocated.table,\n }));\n }}\n modalFetch={'/plan/' + modalData?.id}\n modalAdd=\"/plan/\"\n size={'md'}\n modalUpdate=\"/plan/\"\n modalCopy={`/plan/${modalData?.id}/copy`}\n modalUpload={(freshData, modalState) => {\n return {\n ...freshData,\n ...modalState,\n };\n }}\n modalInitState={{\n partnerID: currentPartner,\n wholesalerID: currentWholesaler,\n isActive: true,\n }}\n // Tabs are components all in the 'Rates' Folder\n tabs={[\n { details: true },\n { component: , label: 'Calling Rates' },\n { component: , label: 'Call Inclusions' },\n {\n component: ,\n label: 'Number Block Rates',\n },\n { component: , label: 'Item Code Mappings' },\n ]}\n dynamicScope={{ minimumScope: 40 }}\n modalValidate={() => {\n var newErrorState;\n if (modalMode === 'Copy') {\n newErrorState = {\n copyName:\n (!modalState?.copyName ||\n modalState?.copyName?.length < 1) &&\n 'Field is required.',\n };\n dispatch({\n type: 'CHANGE_MODAL_STATE_ERROR',\n payload: newErrorState,\n });\n return !newErrorState.copyName;\n }\n newErrorState = {\n name:\n (!modalState?.name || modalState?.name?.length < 1) &&\n 'Field is required.',\n country:\n (!modalState?.country ||\n modalState?.country?.length < 1) &&\n 'Field is required.',\n countryPrefix:\n (!modalState?.countryPrefix ||\n modalState?.countryPrefix?.length < 1) &&\n 'Field is required.',\n };\n dispatch({\n type: 'CHANGE_MODAL_STATE_ERROR',\n payload: newErrorState,\n });\n return !(\n newErrorState.name ||\n newErrorState.country ||\n newErrorState.countryPrefix\n );\n }}\n title=\"Plans\"\n defaultColumns={defaultColumns}\n add\n groupable\n filterable\n maxBodyHeight={window.innerHeight * config.tabView.tableHeight}\n modalContent={\n modalMode === 'Copy' ? (\n {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload,\n });\n }}\n />\n ) : (\n \n )\n }\n modalTitle={modalTitle(modalData, 'name', ' Plan ', modalMode)}\n rowActions={{\n copiable: true,\n multiChildTable: {\n name: 'Edit Plan, Rates and Inclusions',\n to: 0,\n },\n }}\n onModalSucceed={(res) => {\n dispatch({\n type: 'OPEN_CHILD_TABLE',\n payload: { ...res.data, append: true },\n });\n dispatch({\n type: 'CHANGE_BREADCRUMB_VIEW',\n payload: 1,\n });\n setTimeout(() => {\n dispatch({\n type: 'CHANGE_BREADCRUMB_VIEW',\n payload: 0,\n });\n }, 500);\n\n dispatch({\n type: 'RESET_MODAL',\n });\n }}\n />\n );\n};\n\nexport default Plans;\n","import { Suspense, lazy } from 'react';\nimport { ChakraProvider } from '@chakra-ui/react';\nimport { Routes, Route } from 'react-router-dom';\n// import { Plans, CSVCallingRates } from 'pages/billing/';\n\nimport { useDeepMerge } from 'hooks/useDeepMerge';\nimport { LoadingIndicator } from 'components/v4';\nimport chakratheme from '@/chakratheme';\n\nimport path from '@/routes/constants';\n\nconst Plans = lazy(() => import('pages/billing/plans/Index'));\nconst CSVCallingRates = lazy(() => import('pages/billing/plans/edit/csv/'));\n\nexport default function PlanRoutes() {\n const { theme } = useDeepMerge();\n const { CSVCALLINGRATES } = path;\n return (\n \n }>\n \n } />\n }\n />\n \n \n \n );\n}\n","export const addressColumns = [\n {\n title: 'Description',\n field: 'description',\n },\n {\n title: 'Address',\n field: 'address',\n },\n // Fields\n {\n title: 'Building Type',\n field: 'buildingType',\n hidden: true,\n hiddenByColumnsButton: true,\n },\n {\n title: 'Building 1st Number',\n field: 'building1stNumber',\n hidden: true,\n hiddenByColumnsButton: true,\n },\n {\n title: 'Building 1st Suffix',\n field: 'building1stSuffix',\n hidden: true,\n hiddenByColumnsButton: true,\n },\n {\n title: 'Building 2nd Number',\n field: 'building2ndNumber',\n hidden: true,\n hiddenByColumnsButton: true,\n },\n {\n title: 'Building 2nd Suffix',\n field: 'building2ndSuffix',\n hidden: true,\n hiddenByColumnsButton: true,\n },\n {\n title: 'Building Floor Type',\n field: 'buildingFloorType',\n hidden: true,\n hiddenByColumnsButton: true,\n },\n {\n title: 'Building Floor Number',\n field: 'buildingFloorNumber',\n hidden: true,\n hiddenByColumnsButton: true,\n },\n {\n title: 'Building Floor Number Suffix',\n field: 'buildingFloorNumberSuffix',\n hidden: true,\n hiddenByColumnsButton: true,\n },\n {\n title: 'Building Property',\n field: 'buildingProperty',\n hidden: true,\n hiddenByColumnsButton: true,\n },\n {\n title: 'Building Location',\n field: 'buildingLocation',\n hidden: true,\n hiddenByColumnsButton: true,\n },\n {\n title: 'Street House Number 1',\n field: 'streetHouseNumber1',\n hidden: true,\n hiddenByColumnsButton: true,\n },\n {\n title: 'Street House Number 1 Suffix',\n field: 'streetHouseNumber1Suffix',\n hidden: true,\n hiddenByColumnsButton: true,\n },\n {\n title: 'Street House Number 2',\n field: 'streetHouseNumber2',\n hidden: true,\n hiddenByColumnsButton: true,\n },\n {\n title: 'Street House Number 2 Suffix',\n field: 'streetHouseNumber2Suffix',\n hidden: true,\n hiddenByColumnsButton: true,\n },\n {\n title: 'Street Name 1',\n field: 'streetName1',\n hidden: true,\n hiddenByColumnsButton: true,\n },\n {\n title: 'Street Type 1',\n field: 'streetType1',\n hidden: true,\n hiddenByColumnsButton: true,\n },\n {\n title: 'Street Suffix 1',\n field: 'streetSuffix1',\n hidden: true,\n hiddenByColumnsButton: true,\n },\n {\n title: 'Street Name 2',\n field: 'streetName2',\n hidden: true,\n hiddenByColumnsButton: true,\n },\n {\n title: 'Street Type 2',\n field: 'streetType2',\n hidden: true,\n hiddenByColumnsButton: true,\n },\n {\n title: 'Street Suffix 2',\n field: 'streetSuffix2',\n hidden: true,\n hiddenByColumnsButton: true,\n },\n {\n title: 'Locality',\n field: 'locality',\n hidden: true,\n hiddenByColumnsButton: true,\n },\n {\n title: 'District',\n field: 'district',\n hidden: true,\n hiddenByColumnsButton: true,\n },\n {\n title: 'State',\n field: 'state',\n hidden: true,\n hiddenByColumnsButton: true,\n },\n {\n title: 'Postcode',\n field: 'postcode',\n hidden: true,\n hiddenByColumnsButton: true,\n },\n {\n title: 'Country',\n field: 'country',\n hidden: true,\n hiddenByColumnsButton: true,\n },\n {\n title: 'Google Place ID',\n field: 'googlePlaceID',\n hidden: true,\n hiddenByColumnsButton: true,\n },\n];\n","import { Box, Stack, StackDivider } from '@chakra-ui/react';\n\nimport Input from '../../../components/v4/Input';\nimport Text from '../../../components/v4/Text';\nimport FormLabel from '../../../components/v4/FormLabel';\n\nimport walkthroughIds from '../walkthroughIds';\nimport { Select } from 'chakra-react-select';\nimport { chakraSelectDarkMode, defaultChakraSelectStyle } from '@/constants';\nimport { useSelector } from 'react-redux';\n\nfunction AddressField({\n placeholder,\n fieldName,\n fieldValue,\n fieldHandler,\n fieldStyles = {},\n ...props\n}) {\n const { darkMode } = useSelector((state) => state.settings);\n return (\n \n \n {placeholder}\n \n fieldHandler(fieldName, e.target.value)}\n data-walkthroughid={props.dataWalkthroughId}\n />\n \n );\n}\n\nexport default function AddressFields({ fields, fieldHandler, countries }) {\n const { addresses } = walkthroughIds;\n const { darkMode } = useSelector((state) => state.settings);\n const chakraSelectDark = chakraSelectDarkMode(darkMode);\n const chakraStyles = {\n outlineColor: 'gray.300',\n ...defaultChakraSelectStyle,\n ...chakraSelectDark,\n ...{\n control: (provided, { selectProps }) => ({\n ...provided,\n borderColor: darkMode ? 'dark.tcap-borderGray' : '#0000003b',\n }),\n },\n };\n\n console.log('chakra select dark: ', chakraSelectDark);\n\n return (\n }>\n {/* Description */}\n \n \n Description\n \n \n \n \n \n {/* Building: Row 1 */}\n \n \n Building\n \n \n \n \n \n \n \n \n {/* Building: Row 2 */}\n \n \n \n \n \n\n {/* Building: Row 3 */}\n \n \n \n \n \n\n {/* Street: Row 1 */}\n \n \n Street\n \n \n \n \n \n \n \n\n {/* Street: Row 2 */}\n \n \n \n \n \n\n {/* Street: Row 3 */}\n \n \n \n \n \n\n {/* Street: Row 4 */}\n \n \n \n \n\n {/* Street: Row 5 */}\n \n \n \n \n \n\n \n {/* Country */}\n \n Country\n \n \n {\n fieldHandler('countryID', selectOpt.id);\n }}\n getOptionLabel={(opt) => opt.name}\n getOptionValue={(opt) => opt.id}\n options={countries.sort((a, b) =>\n a.name.localeCompare(b.name),\n )}\n isLoading={countries.length == 0}\n value={countries.find((a) => a.id == fields.countryID)}\n chakraStyles={chakraStyles}\n dataWalkthroughId={addresses.ufCountryInput}\n selectedOptionColor=\"brand\"\n />\n \n\n {/* Google Places */}\n \n Google Place ID\n \n\n \n \n \n \n \n );\n}\n","import {InputRightElement} from '@chakra-ui/react';\n\nexport default function ChakraInputRightElement({...rest}) {\n return ;\n}\n","import React, { useEffect, useRef, useState } from 'react';\nimport Button from '../../../components/v4/Button';\nimport Heading from '../../../components/v4/Heading';\nimport AddressFields from './AddressFields';\nimport useAddress from '../../../hooks/useAddress';\nimport { Box } from '@chakra-ui/react';\nimport { axios } from '../../../services/axios';\nimport Alert from '../../../components/v4/Alert';\nimport AlertDescription from '../../../components/v4/AlertDescription';\nimport AlertIcon from '../../../components/v4/AlertIcon';\nimport Text from '../../../components/v4/Text';\nimport Input from '../../../components/v4/Input';\nimport InputGroup from '../../../components/v4/InputGroup';\nimport InputRightElement from '../../../components/v4/InputRightElement';\n\nimport { usePlacesWidget } from 'react-google-autocomplete';\n\nimport { SearchIcon } from '@chakra-ui/icons';\nimport { useSelector } from 'react-redux';\nimport secret from '../../../secret.json';\n\nimport walkthroughIds from '../walkthroughIds';\nimport { toast } from 'react-toastify';\n\nexport default function AddressesCreate({ setAddressAction }) {\n const { addressFields, setAddressField, transformAddress } = useAddress();\n\n const companyID = useSelector(\n (state) => state.navigationLists.currentCompanyData?.id,\n );\n const { darkMode } = useSelector((state) => state.settings);\n\n const { addresses } = walkthroughIds;\n\n const [countries, setCountries] = useState([]);\n const countriesRef = useRef([]);\n\n const { ref } = usePlacesWidget({\n apiKey: secret.googleAutocomplete.testKey,\n onPlaceSelected: (place) =>\n transformAddress(place, countriesRef.current),\n options: {\n types: [], // this will screw the results, this lib sets types by default, which are actually optional on the maps SDK\n },\n });\n\n useEffect(async () => {\n try {\n const res = await axios.get('/countries/list');\n setCountries(res.data);\n countriesRef.current = res.data;\n } catch (e) {\n toast.error('Unable to retrieve countries');\n }\n }, []);\n\n function onAddressCreate(e) {\n e.preventDefault();\n\n axios\n .post(`/address`, {\n companyID: companyID,\n ...addressFields,\n })\n .then((response) => {\n setAddressAction('Get');\n })\n .catch((error) => {\n toast.error(\n error?.response?.data?.message ||\n 'There was an error creaing an address. Please make sure you have filled in \"Street House Number 1\".',\n );\n });\n }\n\n return (\n \n \n Create Address\n \n {/* Search address */}\n \n Search address\n \n \n }\n />\n \n \n\n \n \n \n Address search will populate each field below, please ensure\n you check each field before submitting.\n \n \n\n \n \n \n\n \n\n \n setAddressAction('Get')}\n data-walkthroughid={addresses.ufBackButton}>\n Back\n \n \n Create\n \n \n \n );\n}\n","import React, { useEffect, useState } from 'react';\nimport Button from '../../../components/v4/Button';\nimport Heading from '../../../components/v4/Heading';\nimport AddressFields from './AddressFields';\nimport useAddress from '../../../hooks/useAddress';\nimport { Box } from '@chakra-ui/react';\nimport { axios } from '../../../services/axios';\nimport Alert from '../../../components/v4/Alert';\nimport AlertDescription from '../../../components/v4/AlertDescription';\nimport AlertIcon from '../../../components/v4/AlertIcon';\nimport Text from '../../../components/v4/Text';\nimport Input from '../../../components/v4/Input';\nimport InputGroup from '../../../components/v4/InputGroup';\nimport InputRightElement from '../../../components/v4/InputRightElement';\n\nimport Autocomplete, { usePlacesWidget } from 'react-google-autocomplete';\n\nimport { SearchIcon } from '@chakra-ui/icons';\nimport { useSelector } from 'react-redux';\n\nimport walkthroughIds from '../walkthroughIds';\nimport { toast } from 'react-toastify';\n\nexport default function AddressEdit({ setAddressAction, rowData }) {\n const { addressFields, setAddressField, addressDescription } =\n useAddress(rowData);\n\n const companyID = useSelector(\n (state) => state.navigationLists.currentCompanyData?.id,\n );\n\n const { addresses } = walkthroughIds;\n\n const [countries, setCountries] = useState([]);\n useEffect(async () => {\n try {\n const res = await axios.get('/countries/list');\n setCountries(res.data);\n } catch (e) {\n toast.error('Unable to retrieve countries');\n }\n }, []);\n\n function onAddressEdit(e) {\n e.preventDefault();\n\n axios\n .put(`/address`, {\n companyID: companyID,\n ...addressFields,\n })\n .then((response) => {\n setAddressAction('Get');\n })\n .catch((error) => {\n toast.error(\n error?.response?.data?.message ||\n 'There was an error editing this address. Please make sure you have filled in \"Street House Number 1\".',\n );\n });\n }\n\n return (\n \n {addressDescription}\n \n Edit Address\n \n\n \n \n \n\n \n\n \n setAddressAction('Get')}\n data-walkthroughid={addresses.ufBackButton}>\n Back\n \n \n Save\n \n \n \n );\n}\n","export const nullError = {\n name: 'No Partner / Company / Wholesaler Selected',\n message: 'Please select a wholesaler and a partner / company.'\n}","export const initValidation = { number: '', message: '' };\nexport const NOT_VALID = 'Could not confirm numbers\\' validity';\nexport const NOT_AVAILABLE = 'Could not confirm numbers\\' availability';\nexport const NUMBER_EXCEED_LIMIT = 'Numbers exceed the limit of 1000 lines';\nexport const INVALID_CHAR = 'Number contains invalid characters';\nexport const NOT_ALLOCATE = 'Number still assigned to user';\nconst NOT_FOUND = 'Number not found';\nconst NOT_TPM_NUM = 'Number not on TPM Service';\n\nconst ERR_NOT_FOUND = 'Numbers not found';\nconst ERR_ALLOCATED = 'Numbers still assigned to users';\nconst ERR_TPM_NUM = 'Numbers not on TPM Service';\nconst ERR_INVALID_CHAR = 'Numbers contain invalid characters';\n\nexport const ERROR_MESSAGES = {\n [ERR_NOT_FOUND]: NOT_FOUND,\n [ERR_ALLOCATED]: NOT_ALLOCATE,\n [ERR_TPM_NUM]: NOT_TPM_NUM,\n [ERR_INVALID_CHAR]: INVALID_CHAR,\n};\n\nexport const actionButtons = [\n {\n label: 'Add row',\n 'aria-label': 'Add',\n },\n {\n label: 'Remove row',\n 'aria-label': 'Clear',\n },\n];\n\nexport const groupMessages = (messages) => {\n return messages.reduce(\n (acc, { number, message }) => {\n const [type] = message.split(':');\n if (type === NOT_VALID) {\n acc.validity.push(number);\n } else if (type === INVALID_CHAR) {\n acc.invalidChars.push(number);\n } else {\n acc.availability.push(number);\n }\n return acc;\n },\n { validity: [], availability: [], invalidChars: [] },\n );\n};\n\nexport const clearErrors = (setTelephoneNumbers, setValidateNumbers) => {\n setTelephoneNumbers((prev) =>\n prev.filter((item) => item.status === 'PASS'),\n );\n setValidateNumbers([initValidation]);\n};\n\nexport const clearErrorsDn = (setUpdate) => {\n setUpdate((prev) => prev.filter((item) => item.status !== 'FAIL'));\n};\n\nexport const refreshTable = (setUpdate) => {\n setUpdate([{ number: '', status: '' }]);\n};\n\nexport const search = (term, telephoneNumbers, setFilteredData) => {\n return telephoneNumbers?.reduce((acc, telephoneNumber) => {\n const matchedSearch =\n telephoneNumber?.number?.includes(term) ||\n telephoneNumber.status.toLowerCase().includes(term.toLowerCase());\n if (matchedSearch) {\n acc.push(telephoneNumber);\n }\n setFilteredData(acc);\n return acc;\n }, []);\n};\n\nexport const exceedsLimits = (\n isTrial,\n telephoneNumbers,\n numbers,\n trialNumberLimit,\n) => {\n const filteredTable = telephoneNumbers.filter((row) => row.number !== '');\n if (isTrial && filteredTable.length + numbers.length > trialNumberLimit) {\n alert(\n `Cannot exceed a total of ${trialNumberLimit} numbers while Company is on Trial. Please copy less numbers.`,\n );\n return true;\n }\n if (filteredTable.length + numbers.length > 1000) {\n alert('You have exceeded the maximum number of lines allowed (1000).');\n return true;\n }\n return false;\n};\n","/* eslint-disable react/display-name */\n/* eslint-disable react-hooks/exhaustive-deps */\n//external imports\nimport React, { useEffect, useMemo, useState, useRef } from 'react';\nimport { useSelector, useDispatch } from 'react-redux';\nimport MaterialTable from '../../../components/v4/MaterialTable';\nimport useAddress from '../../../hooks/useAddress';\nimport { useQuery } from '@tanstack/react-query';\n\nimport { axios } from '../../../services/axios';\nimport { Button } from 'react-bootstrap';\nimport { addressColumns } from './consts';\nimport { ChakraProvider, Box } from '@chakra-ui/react';\nimport chakratheme from '../../../chakratheme';\n\nimport AddressesCreate from './AddressesCreate';\nimport AddressesEdit from './AddressesEdit';\n\nimport MaterialEditIcon from '@material-ui/icons/Edit';\nimport AddRoundedIcon from '@material-ui/icons/AddRounded';\n\nimport walkthroughIds from '../walkthroughIds';\nimport { loadingColumnsConstructor } from 'components/tables/ReduxTable';\nimport { nullError } from 'components/error';\nimport { Error } from 'components/index';\nimport { refreshTable } from 'pages/tpm/AssociatedAccounts/helper';\n\nconst { addresses } = walkthroughIds;\n\nconst Edit = React.forwardRef((props, ref) => (\n \n));\n\nfunction AddressesHeader({ setAddressAction }) {\n return (\n \n
setAddressAction('Create')}\n data-walkthroughid={addresses.ufAddButton}>\n {' '}\n {' '}\n Address\n \n \n {titleName}\n
\n \n }\n titleName={titleName}\n tableRef={tableRef}\n refreshTable={refreshFn}\n columns={renderedColumns}\n data={renderedTableData}\n actions={[\n {\n icon: Edit,\n tooltip: 'Edit',\n isFreeAction: false,\n onClick: (e, rowData) => {\n editAddressItem(rowData);\n },\n },\n ]}\n />\n \n )}\n \n {addressAction === 'Create' && (\n \n )}\n {addressAction === 'Edit' && (\n \n )}\n \n \n );\n};\n\nexport default Addresses;\n","// external imports\nimport React from 'react';\nimport {Typography, styled} from '@mui/material';\n\nconst StyledType = styled(Typography)(({theme}) => ({}));\n\n/*\n * Skeleton of what will be Operator Consents page\n */\nconst OperatorConsents = (props) => {\n return (\n <>\n OperatorConsents \n \n );\n};\n\nexport default OperatorConsents;\n","//external imports\nimport React from 'react';\nimport Typography from '@material-ui/core/Typography';\nimport Box from '@material-ui/core/Box';\n\n/*\n * View of what is inside a tab panel for TabView.jsx\n */\nconst TabPanel = (props) => {\n const {children, value, index, ...other} = props;\n\n return (\n \n {value === index && (\n \n \n {children}\n \n \n )}\n \n );\n};\n\nexport default TabPanel;\n","import React from 'react';\nimport TextField from '@material-ui/core/TextField';\nimport {Row, Col} from 'react-bootstrap';\nimport {addSpacing} from '../../../../../utils/utils';\nimport MaterialTable from '../../../../../components/v4/MaterialTable';\nimport Divider from '@material-ui/core/Divider';\nconst CONSENT_COLUMNS = {\n id: '',\n msid: '',\n tenantID: '',\n tenantOrigin: '',\n operatorID: '',\n status: '',\n};\nconst CONTACT_COLUMNS = [\n {\n title: 'Full Name',\n field: 'fullName',\n defaultSort: 'asc',\n },\n {\n title: 'Email',\n field: 'email',\n },\n {\n title: 'Phone',\n field: 'phoneNumber',\n },\n {\n title: 'Company Name',\n field: 'companyName',\n },\n {\n title: 'Company Size',\n field: 'companySize',\n },\n {\n title: 'Default',\n field: 'isDefault',\n type: 'boolean',\n },\n];\n\nexport default function Details({data}) {\n return (\n \n {Object.keys(CONSENT_COLUMNS).map((v, i) => {\n return (\n
\n \n \n \n
\n );\n })}\n
\n
v.isDefault)}\n columns={CONTACT_COLUMNS}\n />\n \n \n \n Back\n \n \n
\n \n );\n }\n return (\n {\n return data.map((v) => {\n const consentedCountries =\n v.consentedCountriesList ?? v.consentedCountries ?? [];\n const consentedCountriesString = Array.isArray(\n consentedCountries,\n )\n ? consentedCountries.join(', ')\n : consentedCountries;\n\n const defaultContact = v?.contacts?.find(\n (x) => x.isDefault,\n ) ?? {\n companyName: '',\n fullName: '',\n email: '',\n phoneNumber: '',\n companySize: '',\n };\n\n return {\n ...v,\n defaultContact,\n consentedCountriesString,\n };\n });\n }}\n filterable\n maxBodyHeight={window.innerHeight * config.plainView.tableHeight}\n />\n );\n}\n","import { useRef } from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\n\nimport config from '../../../config';\nimport { MultiChild, TabView } from '../../../components';\nimport { ProfilesAdd, ProfilesEdit } from '../index';\nimport Consent from './consent';\nimport ListRoundedIcon from '@mui/icons-material/ListRounded';\n\n/*\n * Base page for operator profiles in the general admin tab\n * Presents the Table and provides endpoints for the various props for TableAndModal\n */\nconst OperatorProfiles = () => {\n const dispatch = useDispatch();\n const tableRef = useRef();\n\n // columns for the table\n const columns = [\n {\n title: 'Operator Name',\n field: 'name',\n },\n {\n title: 'Carrier Name',\n field: 'carrierName',\n },\n {\n title: 'App ID',\n field: 'appID',\n },\n {\n title: 'Tenant ID',\n field: 'tenantID',\n },\n {\n title: 'Last Sync',\n field: 'lastSync',\n type: 'datetime',\n },\n ];\n const tableActions = [\n {\n icon: ({ disabled }) => {\n if (disabled) {\n return;\n }\n return ;\n },\n tooltip: 'View Operator Consents Menu',\n position: 'row',\n onClick: (event, rowData) => {\n dispatch({\n type: 'OPEN_CHILD_TABLE',\n payload: rowData,\n });\n dispatch({\n type: 'CHANGE_BREADCRUMB_VIEW',\n payload: 1,\n });\n dispatch({\n type: 'RESET_MODAL',\n });\n },\n },\n ];\n // modal state access\n const {\n data: modalData,\n mode: modalMode,\n state: modalState,\n } = useSelector((state) => {\n return {\n ...state.modal,\n };\n });\n\n // current wholesaler from state\n const { currentWholesaler } = useSelector((state) => {\n return { ...state.navigationLists };\n });\n\n /*\n * Table and Modal presentation and endpoints for opereator profiles\n * Requires validation as currently the modalValidate prop just checks that all fields have been seleceted\n */\n return (\n <>\n ,\n label: 'Consents',\n },\n ]}\n tableFetch={'/operatorconnectoperatorprofiles'}\n modalFetch={'/operatorconnectoperatorprofile/' + modalData?.id}\n modalAdd={'/operatorconnectoperatorprofile'}\n modalUpdate={'/operatorconnectoperatorprofile'}\n modalValidate={() => {\n const newErrorState = {\n name: !modalState?.name && 'Name is required',\n carrierName:\n !modalState?.carrierName &&\n 'Carrier Name is required',\n appID: !modalState?.appID && 'App ID is required',\n tenantID:\n !modalState?.tenantID && 'Tenant ID is required',\n regions:\n !modalState?.regions && 'Region must be selected',\n };\n\n dispatch({\n type: 'CHANGE_MODAL_STATE_ERROR',\n payload: newErrorState,\n });\n\n return !(\n newErrorState.carrierName ||\n newErrorState.appID ||\n newErrorState.tenantID ||\n newErrorState.regions ||\n newErrorState.name\n );\n }}\n modalInitState={{\n wholesalerID: currentWholesaler,\n }}\n modalUpload={(freshData, state) => {\n return {\n ...freshData,\n ...state,\n };\n }}\n add\n modalTitle={\n modalData\n ? modalMode + ' Operator Profiles -> '\n : modalMode + ' Operator Profiles'\n }\n title=\"Operator Profiles\"\n defaultColumns={columns}\n groupable\n filterable\n rowActions={{\n multiChildTable: {\n name: 'Edit',\n to: 0,\n },\n }}\n maxBodyHeight={\n window.innerHeight * config.plainView.tableHeight\n }\n prependAdditionalActions={tableActions}\n // Renders the modal content as a veiw of tabs, Add page when mode == Add and Edit + Admin tabs otherwise\n modalContent={\n ]\n : []\n }\n insideModal={true}\n />\n }\n />\n \n );\n};\n\nexport default OperatorProfiles;\n","// external imports\nimport React from 'react';\nimport { Grid, TextField, Box } from '@mui/material';\nimport { useDispatch, useSelector } from 'react-redux';\n\nimport { MultiSelect } from '../../../../components';\nimport { getInputDarkStyle } from '@/constants';\n\n/*\n * Component for Adding a operator profile\n * Grid of options that have onChange handlers that set the state for submission\n */\nconst ProfilesAdd = (props) => {\n const dispatch = useDispatch();\n\n // state access\n const { state: modalState, stateError: modalStateError } = useSelector(\n (state) => {\n return {\n ...state.modal,\n };\n },\n );\n\n // current wholesaler from state\n const { currentWholesaler } = useSelector((state) => {\n return { ...state.navigationLists };\n });\n\n const { darkMode } = useSelector((state) => state.settings);\n\n const inputDarkStyle = getInputDarkStyle(darkMode);\n // function to set modal state easily\n const setState = (payload) => {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload,\n });\n };\n\n /*\n * Mui Grid, Textfield and a multiselect for regions\n * all of these use setState to set the state for the operator profiles page to perform the api requests\n */\n return (\n \n \n \n {\n setState({\n name: e.target.value,\n });\n }}\n error={modalStateError?.name}\n helperText={modalStateError?.name}\n />\n \n \n {\n setState({\n carrierName: e.target.value,\n });\n }}\n error={modalStateError?.carrierName}\n helperText={modalStateError?.carrierName}\n />\n \n \n {\n setState({\n appID: e.target.value,\n });\n }}\n error={modalStateError?.appID}\n helperText={modalStateError?.appID}\n />\n \n \n {\n setState({\n tenantID: e.target.value,\n });\n }}\n error={modalStateError?.tenantID}\n helperText={modalStateError?.tenantID}\n />\n \n \n {\n setState({\n clientSecret: e.target.value,\n });\n }}\n error={modalStateError?.clientSecret}\n helperText={modalStateError?.clientSecret}\n />\n \n \n \n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n ...modalState,\n regions: e,\n },\n })\n }\n onError\n errorText={modalStateError?.regions}\n />\n \n \n \n );\n};\n\nexport default ProfilesAdd;\n","// external imports\nimport React from 'react';\nimport { Box, Grid, TextField } from '@mui/material';\nimport { useDispatch, useSelector } from 'react-redux';\n\nimport { MultiSelect } from '../../../../components';\nimport { getInputDarkStyle } from '@/constants';\n\n/*\n * Component for editing a operator profile\n * Grid of options that have onChange handlers that set the state for submission\n */\nconst ProfilesEdit = (props) => {\n const dispatch = useDispatch();\n\n // state access\n const { state: modalState, stateError: modalStateError } = useSelector(\n (state) => {\n return {\n ...state.modal,\n };\n },\n );\n\n // current wholsaler from state\n const { currentWholesaler } = useSelector((state) => {\n return { ...state.navigationLists };\n });\n\n const { darkMode } = useSelector((state) => state.settings);\n const inputDarkStyle = getInputDarkStyle(darkMode);\n const inputDarkImportantStyle = getInputDarkStyle(darkMode, true);\n\n // function to set modal state easily\n const setState = (payload) => {\n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload,\n });\n };\n\n return (\n \n \n \n {\n setState({\n payload: {\n name: e,\n },\n });\n }}\n error={modalStateError?.name}\n helperText={modalStateError?.name}\n />\n \n \n \n dispatch({\n type: 'CHANGE_MODAL_STATE',\n payload: {\n ...modalState,\n regions: e,\n },\n })\n }\n errorText={modalStateError?.regions}\n />\n \n \n {\n setState({\n clientSecret: e.target.value,\n });\n }}\n error={modalStateError?.clientSecret}\n helperText={modalStateError?.clientSecret}\n />\n \n \n {\n setState({\n payload: {\n carrierName: e,\n },\n });\n }}\n error={modalStateError?.carrierName}\n helperText={modalStateError?.carrierName}\n />\n \n \n {\n setState({\n payload: {\n appID: e,\n },\n });\n }}\n error={modalStateError?.appID}\n helperText={modalStateError?.appID}\n />\n \n \n {\n setState({\n payload: {\n tenantID: e,\n },\n });\n }}\n error={modalStateError?.tenantID}\n helperText={modalStateError?.tenantID}\n />\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n};\n\nexport default ProfilesEdit;\n","import {axios} from '../../services/axios';\n\nexport default async function updateServiceProfiles({\n type,\n level,\n payload,\n scope,\n}) {\n try {\n const result = await axios.put(\n `/serviceprofile/${type}/${level}`,\n payload,\n {\n headers: {\n 'X-RequestScope': scope,\n },\n },\n );\n return result;\n } catch (e) {\n throw e;\n }\n}\n","import {axios} from '../services/axios';\nexport default async function getServiceProfiles({level, id}) {\n try {\n const result = await axios.get(`/serviceprofile/${level}/${id}`);\n return result;\n } catch (e) {\n throw e;\n }\n}\n","const style = {\n fieldContainer: {marginBottom: 3},\n label: {margin: '0 0 3px'},\n inputField: {\n borderRadius: '4px',\n },\n};\n\nexport default style;\n","import {Box} from '@chakra-ui/react';\n\nconst FooterContainer = ({children, ...props}) => (\n \n {children}\n \n);\n\nexport default FooterContainer;\n","import {axios} from '../../services/axios';\n\nexport default async function createServiceProfiles({\n type,\n level,\n payload,\n scope,\n}) {\n try {\n const result = await axios.post(\n `/serviceprofile/${type}/${level}`,\n payload,\n {\n headers: {\n 'X-RequestScope': scope,\n },\n },\n );\n return result;\n } catch (e) {\n throw e;\n }\n}\n","import { axios } from '@/services/axios';\n\nconst getTrunkTypesSpPartner = async (partnerId) => {\n try {\n const trunkResult = await axios.get(\n `/ServiceProfiles/SBCaaS/Partner/${partnerId}/TrunkTypes/Available`,\n );\n return trunkResult;\n } catch (e) {\n throw new Error(e);\n }\n};\n\nexport default getTrunkTypesSpPartner;\n","import {useState} from 'react';\nimport isEmail from 'validator/es/lib/isEmail';\nimport isEmpty from 'validator/es/lib/isEmpty';\nimport isMobilePhone from 'validator/es/lib/isMobilePhone';\nimport isLength from 'validator/es/lib/isLength';\n\nfunction validate(type, value, conditions) {\n switch (type) {\n case 'isLength':\n return isLength(value, conditions);\n case 'isEmail':\n return isEmail(value, {\n require_tld: false,\n });\n case 'isEmpty':\n return isEmpty(value) ? false : true;\n case 'isMobilePhone':\n return isMobilePhone(value);\n case 'isArrayEmpty':\n return value.length !== 0;\n case 'isBetween':\n return value >= conditions[0] && value <= conditions[1];\n case 'isAboveEQ':\n return value >= conditions[0];\n case 'isStrongPassword':\n let errors = [];\n if (value.includes('<')) errors.push('No < allowed.');\n if (value.includes('>')) errors.push('No > allowed.');\n if (value.match(/^[A-Za-z0-9<>]+$/)) {\n errors.push('You need at least one special character.');\n }\n if (value.length < 8)\n errors.push('You need at least 8 characters.');\n if (!value.match(/[A-Z]/))\n errors.push('You need at least one uppercase character.');\n if (!value.match(/[a-z]/))\n errors.push('You need at least one lowercase character.');\n if (!value.match(/[0-9]/))\n errors.push('You need at least one numeric value.');\n if (errors.length) {\n return {\n customErrorMessages: errors,\n };\n } else {\n return true;\n }\n case 'none':\n return true;\n }\n}\n\nexport default function useFieldValidation(fields, fieldValidators) {\n const [validationErrors, setValidationErrors] = useState(null);\n\n function validateItem(validateConditions, key, value) {\n const isValid = validate(\n validateConditions.type,\n value,\n validateConditions.conditions,\n );\n // Workaround for now to return a custom message instead of user defined\n if (isValid?.customErrorMessages) {\n setValidationErrors((p) => {\n return {\n ...p,\n password: isValid.customErrorMessages,\n };\n });\n return false;\n }\n\n if (!isValid) {\n setValidationErrors((p) => ({\n ...p,\n [key]: [validateConditions.message],\n }));\n return false;\n } else {\n setValidationErrors((p) => {\n let errors = p;\n if (errors) {\n if (errors.hasOwnProperty(key)) {\n delete errors[key];\n }\n }\n return errors;\n });\n return true;\n }\n }\n\n function validatefn() {\n let hasError = [];\n for (const [key, value] of Object.entries(fields)) {\n try {\n // Throw an error if we don't have a 1:1 match of properties\n if (!fieldValidators.hasOwnProperty(key)) {\n throw new Error(\n `No validation key found for the \"${key}\" field.`,\n );\n }\n // Get validation conditions\n const validateConditions = fieldValidators[key];\n\n // Single or multiple validation conditions\n if (Array.isArray(validateConditions)) {\n validateConditions.map((validateCondition) => {\n !validateItem(validateCondition, key, value) &&\n hasError.push(true);\n });\n } else {\n !validateItem(validateConditions, key, value) &&\n hasError.push(true);\n }\n } catch (error) {}\n }\n return hasError.some(Boolean) ? false : true; // If any truth values are found in the array, return false to stop execution\n }\n\n return {validationErrors, validatefn};\n}\n","import {Text} from '@chakra-ui/react';\n\nexport default function FieldValidation({errors = [], ...props}) {\n if (!errors) return null;\n return errors.map((err) => (\n \n {err}\n \n ));\n}\n","export const validationSchemaDR = {\n name: [{ type: 'isEmpty', message: 'Service Name cannot be left empty.' }],\n voicePolicies: [\n {\n type: 'isArrayEmpty',\n message: 'Please select at least one voice policy.',\n },\n ],\n dialPlans: [\n {\n type: 'isArrayEmpty',\n message: 'Please select at least one dial plan.',\n },\n ],\n regions: [\n { type: 'isArrayEmpty', message: 'Please select at least one region.' },\n ],\n};\n\nexport const validationSchemaOC = {\n name: [{ type: 'isEmpty', message: 'Service Name cannot be left empty.' }],\n voicePolicies: [\n {\n type: 'isArrayEmpty',\n message: 'Please select at least one voice policy.',\n },\n ],\n callingProfiles: [\n {\n type: 'isArrayEmpty',\n message: 'Please select at least one calling profile.',\n },\n ],\n operatorProfiles: [\n {\n type: 'isArrayEmpty',\n message: 'Please select at least one operator profile.',\n },\n ],\n dialPlans: [\n {\n type: 'isArrayEmpty',\n message: 'Please select at least one dial plan.',\n },\n ],\n regions: [\n { type: 'isArrayEmpty', message: 'Please select at least one region.' },\n ],\n};\n\nexport const validationSchemaSBCAAS = {\n name: [{ type: 'isEmpty', message: 'Service Name cannot be left empty.' }],\n maxChannel: [\n {\n type: 'isBetween',\n conditions: [1, 100],\n message: 'Max Channel should be between 1 and 100.',\n },\n ],\n regions: [\n { type: 'isArrayEmpty', message: 'Please select at least one region.' },\n ],\n // trunkTypes: [\n // { type: 'isArrayEmpty', message: 'Please select at least one trunk type.' },\n // ],\n};\n\nexport const validationSchemaACS = {\n name: [{ type: 'isEmpty', message: 'Service Name cannot be left empty.' }],\n regions: [\n { type: 'isArrayEmpty', message: 'Please select at least one region.' },\n ],\n maxChannel: [\n { type: 'isEmpty', message: 'Max Channel Count cannot be left empty.' },\n ],\n};\n\nexport const validationSchemaTPM = {\n name: [{ type: 'isEmpty', message: 'Service Name cannot be left empty.' }],\n callingProfiles: [\n {\n type: 'isArrayEmpty',\n message: 'Please select at least one calling profile.',\n },\n ],\n operatorProfiles: [\n {\n type: 'isArrayEmpty',\n message: 'Please select at least one operator profile.',\n },\n ],\n};\n\nexport const validationSchemaOCC = {\n name: [{ type: 'isEmpty', message: 'Service Name cannot be left empty.' }],\n callingProfiles: [\n {\n type: 'isArrayEmpty',\n message: 'Please select at least one calling profile.',\n },\n ],\n operatorProfiles: [\n {\n type: 'isArrayEmpty',\n message: 'Please select at least one operator profile.',\n },\n ],\n};\n\nexport const validationSchemaVD = {\n name: [{ type: 'isEmpty', message: 'Service Name cannot be left empty.' }],\n};\n","export default {\n dashboardServices: {\n ufTpmEditServiceButton: '/dashboard-services/tpm/button/1',\n ufTpmManageAccountButton: '/dashboard-services/tpm/button/2',\n ufNewServiceProfileCard: '/dashboard-services/new-service/div',\n },\n appAuth: {\n ufManagedBy: '/dashboard-services/appAuth/select/managedBy',\n ufTenantId: '/dashboard-services/appAuth/input/tenantId',\n ufServiceAdminAccount:\n '/dashboard-services/appAuth/input/serviceAdminAccount',\n ufMaxAccessFailures:\n '/dashboard-services/appAuth/input/maxAccessFailures',\n ufAccessFailureWindow:\n '/dashboard-services/appAuth/input/accessFailureWindow',\n ufSelectiveSync: '/dashboard-services/appAuth/checkbox/selectiveSync',\n ufUserSync: '/dashboard-services/appAuth/checkbox/userSync',\n ufGroupName: '/dashboard-services/appAuth/input/groupName',\n ufGroupNameInput: '/dashboard-services/appAuth/input/groupNameInput',\n ufUsageLocation: '/dashboard-services/appAuth/tags/usageLocation',\n ufUsageLocationTags:\n '/dashboard-services/appAuth/tags/usageLocationTags',\n ufCloseButton: '/dashboard-services/appAuth/button/close',\n ufUpdateButton: '/dashboard-services/appAuth/button/update',\n },\n serviceProfiles: {\n ufEditButton: 'service-profiles/table/button/edit',\n ufAddServiceProfile: '/service-profiles/button/add',\n ufSelectProfileType: '/service-profiles/select/profileType',\n ufSelectVisibleScope: '/service-profiles/select/visibleScope',\n ufCloseButton: '/service-profiles/button/close',\n ufUpdateButton: '/service-profiles/button/update',\n ufServiceNameInput: '/service-profiles/input/serviceName',\n ufOperatorsSelect: '/service-profiles/select/operators',\n ufCallingProfilesSelect: '/service-profiles/select/callingProfiles',\n ufRegionsSelect: '/service-profiles/select/regions',\n ufRegionTable: '/service-profiles/table/regions',\n ufVoicePoliciesSelect: '/service-profiles/select/voicePolicies',\n ufDialPlansSelect: '/service-profiles/select/dialPlans',\n ufAuthPolicySelect: '/service-profiles/select/authPolicy',\n ufMaxChannelsInput: '/service-profiles/input/maxChannels',\n ufMaxRedundancyLevelSelect:\n '/service-profiles/select/maxRedundancyLevel',\n },\n serviceCategories: {\n ufAddServiceCategory: 'service-categories/button/add',\n ufTableServiceCategoryEdit: 'service-categories/button/edit',\n ufTab: 'service-categories/tab/',\n ufID: 'service-categories/input/id',\n ufName: 'service-categories/input/name',\n ufDescription: 'service-categories/input/description',\n ufImage: 'service-categories/input/image',\n ufBack: 'service-categories/button/back',\n ufCreate: 'service-categories/button/create',\n ufSave: 'service-categories/button/save',\n ufClose: 'service-categories/button/close',\n ufDelete: 'service-categories/button/delete',\n },\n selectiveSync: {\n ufGroupName: 'selective-sync/input/groupName',\n ufGroupNameInput: 'selective-sync/input/groupNameInput',\n ufUsageLocation: 'selective-sync/tags/usageLocation',\n ufUsageLocationTags: 'selective-sync/tags/usageLocationTags',\n ufUpdateButton: 'selective-sync/button/updateButton',\n },\n};\n","import { useState, useEffect } from 'react';\nimport { useSelector } from 'react-redux';\n\nimport { axios } from 'services/axios';\nimport { Box, Tooltip, forwardRef } from '@chakra-ui/react';\nimport { InfoIcon } from '@chakra-ui/icons';\nimport Button from 'components/v4/Button';\nimport Dropdown from 'components/v4/Select';\nimport Input from 'components/v4/Input';\nimport FormLabel from 'components/v4/FormLabel';\nimport updateServiceProfiles from 'API/ServiceProfiles/updateServiceProfiles';\nimport { Select as _MultiSelect, Select as _Select } from 'chakra-react-select';\nimport {\n multiSelectDataMapper,\n toSentenceCase,\n filterUniqueItemList,\n} from 'utils/utils';\nimport getServiceProfiles from 'API/getServiceProfiles';\nimport style from './styles';\nimport FooterContainer from './FooterContainer';\nimport Heading from 'components/v4/Heading';\nimport Alert from 'components/v4/Alert';\nimport AlertDescription from 'components/v4/AlertDescription';\nimport AlertIcon from 'components/v4/AlertIcon';\nimport createServiceProfile from 'API/ServiceProfiles/createServiceProfile';\nimport getTrunkTypesSpPartner from 'API/ServiceProfiles/getTrunkTypesServiceProfile';\nimport LoadingIndicator from 'components/v4/LoadingIndicator';\nimport useFieldValidation from 'hooks/useFieldValidation';\nimport FieldValidation from 'components/v4/FieldValidation';\nimport { validationSchemaSBCAAS } from './schema';\n\nimport walkthroughIds from '../../walkthroughIds';\nimport { defaultChakraSelectStyle, chakraSelectDarkMode } from '@/constants';\nimport config from '@/config.json';\n\nconst MAX_REDUNDANCY_DROPDOWN = [\n {\n name: '1',\n value: 1,\n },\n {\n name: '2',\n value: 2,\n },\n {\n name: '3',\n value: 3,\n },\n {\n name: '4',\n value: 4,\n },\n];\n\nconst MultiSelect = forwardRef((props, ref) => (\n <_MultiSelect selectedOptionColor=\"brand\" ref={ref} {...props} />\n));\n\nconst Select = forwardRef((props, ref) => (\n <_Select selectedOptionColor=\"brand\" ref={ref} {...props} />\n));\n\nconst SBCAsAService = ({\n mode,\n data,\n handleBackButton,\n level,\n visibleScopeOptions,\n}) => {\n const {\n currentWholesaler: wholesalerID,\n currentPartner: partnerID,\n wholesalers,\n companiesAndPartners,\n } = useSelector((state) => state.navigationLists);\n const { requiredScope } = useSelector((state) => state.login);\n\n const { darkMode } = useSelector((state) => state.settings);\n const { ...ufElements } = walkthroughIds.serviceProfiles;\n const chakraSelectDark = chakraSelectDarkMode(darkMode);\n const chakraStyles = {\n ...defaultChakraSelectStyle,\n ...chakraSelectDark,\n };\n\n const DEFAULT_SBCAAS_PAYLOAD = {\n name: '[name] - SBC as a Service Wholesaler Profile',\n maxChannel: 10,\n maxRedundancy: 2,\n partnerID: level === 'partner' ? partnerID : undefined,\n wholesalerID: level === 'partner' ? undefined : wholesalerID,\n serviceType: 'SBCaaS',\n visibleScope: level === 'partner' ? 20 : 60,\n regions: [],\n trunkTypes: [],\n };\n\n useEffect(() => {\n if (mode !== 'EDIT' && level !== 'partner' && wholesalers?.length > 0) {\n const wsName = wholesalers.find(\n ({ id, name }) => id === wholesalerID,\n )?.name;\n handleChangeState({\n name: `${wsName} - SBC as a Service Wholesaler Profile`,\n });\n } else if (\n mode !== 'EDIT' &&\n level === 'partner' &&\n wholesalers?.length > 0\n ) {\n const partnerName = companiesAndPartners.find(\n ({ id, name }) => id === partnerID,\n )?.name;\n handleChangeState({\n name: `${partnerName} - SBC as a Service Partner Profile`,\n });\n }\n }, [mode, companiesAndPartners, wholesalers, level]);\n\n const [modalState, setModalState] = useState(\n data || DEFAULT_SBCAAS_PAYLOAD,\n );\n const [availableRegions, setAvailableRegions] = useState([]);\n const [trunkTypes, setTrunkTypes] = useState([]);\n const [error, setError] = useState(null);\n const [isLoading, setIsLoading] = useState(null);\n const { validationErrors, validatefn } = useFieldValidation(\n modalState,\n validationSchemaSBCAAS,\n );\n\n /*\n * A function to get the current scope and append it for API calls\n */\n const scope = () => {\n if (level === 'partner') {\n return `Partner/${partnerID}`;\n } else {\n return `Wholesaler/${wholesalerID}`;\n }\n };\n\n // function to set modal state with a given payload\n const handleChangeState = (payload) => {\n setModalState((prev) => ({\n ...prev,\n ...payload,\n }));\n };\n\n const handleGetDropdownData = async () => {\n setIsLoading(true);\n const fetchSPData = mode === 'EDIT' && data;\n try {\n const result = await axios.get(\n `/ServiceProfiles/SBCaaS/${scope()}/Regions/Available`,\n );\n // NOTE: if partner, fetch sbcaas of partner\n if (level === 'partner') {\n const trunkResult = await getTrunkTypesSpPartner(partnerID);\n setTrunkTypes(trunkResult.data.map(multiSelectDataMapper));\n } else {\n // NOTE: if wholesaler, check all trunk types available\n const trunkResult = await axios.get(`TrunkTypes/Available`);\n setTrunkTypes(trunkResult.data.map(multiSelectDataMapper));\n }\n setAvailableRegions(result.data.map(multiSelectDataMapper));\n if (fetchSPData) {\n const spResult = await getServiceProfiles({\n level,\n id: data?.id,\n });\n const regions = spResult.data.regions.map(\n multiSelectDataMapper,\n );\n const trunkTypes = spResult.data.trunkTypes.map(\n multiSelectDataMapper,\n );\n setModalState({\n ...spResult.data,\n regions,\n trunkTypes,\n });\n }\n } catch (e) {\n setError(e);\n } finally {\n setTimeout(() => {\n setIsLoading(false);\n }, 500);\n }\n };\n\n const handleSubmit = async () => {\n setError(null);\n //validate\n if (!validatefn()) {\n setError({\n response: {\n data: {\n message:\n 'There are some validation errors in the form. Please check and try again.',\n },\n },\n });\n return;\n }\n\n setIsLoading(true);\n try {\n if (mode === 'EDIT') {\n const result = await updateServiceProfiles({\n type: 'SBCaaS',\n level,\n payload: modalState,\n scope: requiredScope,\n });\n handleBackButton();\n } else {\n const result = await createServiceProfile({\n type: 'SBCaaS',\n payload: modalState,\n level,\n scope: requiredScope,\n });\n handleBackButton();\n }\n } catch (e) {\n setError(e);\n } finally {\n setIsLoading(false);\n }\n };\n\n useEffect(() => {\n handleGetDropdownData();\n }, [data, level]);\n\n useEffect(() => {\n const excludedRegions = filterUniqueItemList(\n availableRegions,\n modalState?.regions,\n 'id',\n );\n if (\n error?.response?.data?.message.includes('Invalid Region provided')\n ) {\n setError({\n response: {\n data: {\n message: `Invalid Region provided (${excludedRegions[0]?.label})`,\n },\n },\n });\n }\n }, [error?.response?.data?.message, availableRegions, modalState?.regions]);\n\n if (isLoading) {\n return ;\n }\n return (\n \n \n {`${toSentenceCase(mode)} ${modalState.name || data?.name}`}\n \n\n {error && (\n \n \n \n {error?.response?.data?.message ||\n 'An error occured. Please try again later.'}\n \n \n )}\n\n \n Service name\n \n handleChangeState({ name: e.target.value })\n }\n sx={style.inputField}\n data-walkthroughid={ufElements.ufServiceNameInput}\n />\n \n \n\n \n \n Visible Scope \n \n \n \n \n {modalState.visibleScope <= requiredScope ? (\n \n option.value === modalState.visibleScope,\n )}\n options={visibleScopeOptions}\n chakraStyles={chakraStyles}\n onChange={(selectedOption) => {\n handleChangeState({\n visibleScope: selectedOption.value,\n });\n }}\n />\n ) : (\n \n )}\n \n\n \n Trunk Types\n {\n handleChangeState({ trunkTypes: selectedOptions });\n }}\n options={trunkTypes}\n defaultValue={modalState.trunkTypes}\n chakraStyles={chakraStyles}\n />\n {/* */}\n \n\n \n Regions\n {\n handleChangeState({ regions: selectedOptions });\n }}\n options={availableRegions}\n defaultValue={modalState.regions}\n chakraStyles={chakraStyles}\n />\n \n \n \n Max Channel per SBC\n \n handleChangeState({ maxChannel: e.target.value })\n }\n value={modalState?.maxChannel}\n sx={style.inputField}\n data-walkthroughid={ufElements.ufMaxChannelsInput}\n />\n \n \n\n \n Max Redundancy Level\n option.value === modalState.maxRedundancy,\n )}\n options={MAX_REDUNDANCY_DROPDOWN}\n onChange={(e) =>\n handleChangeState({ maxRedundancy: e.value })\n }\n getOptionLabel={(option) => option.name}\n chakraStyles={chakraStyles}\n />\n \n\n \n \n Close\n \n \n {mode === 'ADD' ? 'Add' : 'Update'}\n \n \n \n );\n};\n\nexport default SBCAsAService;\n","import {axios} from '../../services/axios';\n\nexport default function getDRServiceProfileRegions({scope}) {\n return axios.get(\n `/ServiceProfiles/DirectRouting/${scope}/Regions/Available`,\n );\n}\n","import {axios} from '../../services/axios';\n\nexport default function getDRServiceProfileDialPlans({scope}) {\n return axios.get(\n `/ServiceProfiles/DirectRouting/${scope}/DialPlans/Available`,\n );\n}\n","import {axios} from '../../services/axios';\nimport {query} from '../../utils/utils';\nexport default function getDRServiceProfileVoicePolicies({scope, regions}) {\n return axios.get(\n `/ServiceProfiles/DirectRouting/${scope}/VoicePolicies/Available?RegionIDs=${query(\n regions,\n )}`,\n );\n}\n","import { Box } from '@chakra-ui/react';\n\n/**\n * Wrapper container for the form page\n * @param {import('@chakra-ui/react').BoxProps} props\n * @property {React.ReactNode} props.children\n * @returns\n */\nexport function Container(props) {\n return (\n \n {props.children}\n \n );\n}\n","import React, { useEffect, useState } from 'react';\nimport { useSelector } from 'react-redux';\nimport { axios } from 'services/axios';\nimport { Box, Tooltip, forwardRef } from '@chakra-ui/react';\nimport { InfoIcon } from '@chakra-ui/icons';\nimport Button from 'components/v4/Button';\nimport Grid from 'components/v4/Grid';\nimport Input from 'components/v4/Input';\nimport FormLabel from 'components/v4/FormLabel';\nimport updateServiceProfiles from 'API/ServiceProfiles/updateServiceProfiles';\nimport { Select as _MultiSelect, Select as _Select } from 'chakra-react-select';\nimport { multiSelectDataMapper, toSentenceCase } from 'utils/utils';\nimport getServiceProfiles from 'API/getServiceProfiles';\nimport style from './styles';\nimport FooterContainer from './FooterContainer';\nimport Heading from 'components/v4/Heading';\nimport Alert from 'components/v4/Alert';\nimport AlertDescription from 'components/v4/AlertDescription';\nimport AlertIcon from 'components/v4/AlertIcon';\nimport createServiceProfile from 'API/ServiceProfiles/createServiceProfile';\nimport LoadingIndicator from 'components/v4/LoadingIndicator';\nimport getDRServiceProfileRegions from 'API/ServiceProfiles/getDRServiceProfileRegions';\nimport getDRServiceProfileDialPlans from 'API/ServiceProfiles/getDRServiceProfileDialPlans';\nimport getDRServiceProfileVoicePolicies from 'API/ServiceProfiles/getDRServiceProfileVoicePolicies';\nimport useFieldValidation from 'hooks/useFieldValidation';\nimport FieldValidation from 'components/v4/FieldValidation';\n\nimport { validationSchemaDR } from './schema';\n\nimport walkthroughIds from '../../walkthroughIds.js';\nimport { defaultChakraSelectStyle, chakraSelectDarkMode } from '@/constants';\nimport { Container } from 'components/v4/Container/Container';\nimport config from '@/config.json';\n\nconst MultiSelect = forwardRef((props, ref) => (\n <_MultiSelect selectedOptionColor=\"brand\" ref={ref} {...props} />\n));\n\nconst Select = forwardRef((props, ref) => (\n <_Select selectedOptionColor=\"brand\" ref={ref} {...props} />\n));\n\n/*\n * Direct Routing Component for Edit/Add\n */\nconst DirectRouting = ({\n mode,\n data,\n level,\n handleBackButton,\n visibleScopeOptions,\n}) => {\n const [voicePolicyEnum, setVoicePolicyEnum] = useState([]);\n const [regionsEnum, setRegionsEnum] = useState([]);\n const [dialPlansEnum, setDialPlansEnum] = useState([]);\n const {\n currentWholesaler: wholesalerID,\n currentPartner: partnerID,\n wholesalers,\n companiesAndPartners,\n } = useSelector((state) => state.navigationLists);\n const { requiredScope } = useSelector((state) => state.login);\n\n const { ...ufElements } = walkthroughIds.serviceProfiles;\n const { darkMode } = useSelector((state) => state.settings);\n const chakraSelectDark = chakraSelectDarkMode(darkMode);\n const chakraStyles = {\n ...defaultChakraSelectStyle,\n ...chakraSelectDark,\n };\n\n const DEFAULT_DR_PAYLOAD = {\n name: 'Direct Routing Wholesaler Profile',\n partnerID: level === 'partner' ? partnerID : undefined,\n wholesalerID: level === 'partner' ? undefined : wholesalerID,\n voicePolicies: [],\n dialPlans: [],\n regions: [],\n visibleScope: level === 'partner' ? 20 : 60,\n };\n\n useEffect(() => {\n if (mode !== 'EDIT' && level !== 'partner' && wholesalers?.length > 0) {\n const wsName = wholesalers.find(\n ({ id, name }) => id === wholesalerID,\n )?.name;\n handleChangeState({\n name: `${wsName} - Direct Routing Wholesaler Profile`,\n });\n } else if (\n mode !== 'EDIT' &&\n level === 'partner' &&\n wholesalers?.length > 0\n ) {\n const partnerName = companiesAndPartners.find(\n ({ id, name }) => id === partnerID,\n )?.name;\n handleChangeState({\n name: `${partnerName} - Direct Routing Partner Profile`,\n });\n }\n }, [mode, companiesAndPartners, wholesalers, level]);\n\n const [modalState, setModalState] = useState(data || DEFAULT_DR_PAYLOAD);\n const [error, setError] = useState(null);\n const [isLoading, setIsLoading] = useState(null);\n\n const { validationErrors, validatefn } = useFieldValidation(\n modalState,\n validationSchemaDR,\n );\n\n /*\n * A function to get the current scope and append it for API calls\n */\n const scope = () => {\n if (level === 'partner') {\n return `Partner/${partnerID}`;\n } else {\n return `Wholesaler/${wholesalerID}`;\n }\n };\n // function to set modal state with a given payload\n const handleChangeState = (payload) => {\n setModalState((prev) => ({\n ...prev,\n ...payload,\n }));\n };\n\n const handleGetVoicePolicies = () => {\n getDRServiceProfileVoicePolicies({\n scope: scope(),\n regions: modalState.regions,\n })\n .then((res) => {\n setVoicePolicyEnum(res.data.map(multiSelectDataMapper));\n })\n .catch((e) => {\n setError(e);\n });\n };\n\n const handleGetDropdown = () => {\n setIsLoading(true);\n const fetchSPData = mode === 'EDIT' && data;\n Promise.all([\n fetchSPData\n ? getServiceProfiles({ level, id: data?.id })\n : setTimeout(() => {\n Promise.resolve();\n }, 1),\n getDRServiceProfileRegions({ scope: scope() }),\n getDRServiceProfileDialPlans({ scope: scope() }),\n ])\n .then(([spResult, regionsResult, dialPlansResult]) => {\n setRegionsEnum(regionsResult.data.map(multiSelectDataMapper));\n setDialPlansEnum(\n dialPlansResult.data.map(multiSelectDataMapper),\n );\n if (fetchSPData) {\n const regions = spResult.data.regions.map(\n multiSelectDataMapper,\n );\n const dialPlans = spResult.data.dialPlans.map(\n multiSelectDataMapper,\n );\n const voicePolicies = spResult.data.voicePolicies.map(\n multiSelectDataMapper,\n );\n\n setModalState({\n ...spResult.data,\n regions,\n dialPlans,\n voicePolicies,\n });\n }\n })\n .catch((e) => {\n setError(e);\n })\n .finally(() => {\n setTimeout(() => {\n setIsLoading(false);\n }, 500);\n });\n };\n\n const handleSubmit = () => {\n setError(null);\n //validate\n if (!validatefn()) {\n setError({\n response: {\n data: {\n message:\n 'There are some validation errors in the form. Please check and try again.',\n },\n },\n });\n return;\n }\n\n setIsLoading(true);\n let result = {};\n const params = {\n type: 'DirectRouting',\n payload: modalState,\n level,\n scope: requiredScope,\n };\n\n if (mode === 'EDIT') {\n result = updateServiceProfiles(params);\n } else {\n result = createServiceProfile(params);\n }\n result\n .then((res) => handleBackButton())\n .catch((e) => setError(e))\n .finally(() => setIsLoading(false));\n };\n\n useEffect(() => {\n if (modalState.regions && modalState.regions.length > 0) {\n handleGetVoicePolicies();\n }\n }, [modalState.regions]);\n\n useEffect(() => {\n handleGetDropdown();\n }, [mode, data, level]);\n\n if (isLoading) {\n return ;\n }\n\n return (\n \n \n {`${toSentenceCase(mode)} ${modalState.name || data?.name}`}\n \n\n {error && (\n \n \n \n {error?.response?.data?.message ||\n 'An error occured. Please try again later.'}\n \n \n )}\n\n \n Service name\n \n handleChangeState({ name: e.target.value })\n }\n sx={style.inputField}\n data-walkthroughid={ufElements.ufServiceNameInput}\n />\n \n \n\n \n \n Visible Scope \n \n \n \n \n {modalState.visibleScope <= requiredScope ? (\n \n option.value === modalState.visibleScope,\n )}\n options={visibleScopeOptions}\n chakraStyles={chakraStyles}\n onChange={(selectedOption) => {\n handleChangeState({\n visibleScope: selectedOption.value,\n });\n }}\n selectedOptionColor=\"brand\"\n />\n ) : (\n \n )}\n \n\n \n Dial Plans\n {\n handleChangeState({\n dialPlans: selectedOptions,\n });\n }}\n options={dialPlansEnum}\n defaultValue={modalState.dialPlans}\n chakraStyles={chakraStyles}\n />\n \n \n \n Regions\n {\n handleChangeState({\n regions: selectedOptions,\n });\n }}\n options={regionsEnum}\n defaultValue={modalState.regions}\n chakraStyles={chakraStyles}\n />\n \n \n \n Voice Policies \n {\n handleChangeState({\n voicePolicies: selectedOptions,\n });\n }}\n options={voicePolicyEnum}\n defaultValue={modalState.voicePolicies}\n chakraStyles={chakraStyles}\n />\n \n \n\n \n\n \n \n Close\n \n \n {mode === 'ADD' ? 'Add' : 'Update'}\n \n \n \n );\n};\n\nexport default DirectRouting;\n","import React, { useState, useEffect } from 'react';\nimport { useSelector } from 'react-redux';\n\nimport { axios } from '../../../../services/axios';\nimport {\n multiSelectDataMapper,\n query,\n toSentenceCase,\n} from '../../../../utils/utils';\nimport { Box, Tooltip, forwardRef } from '@chakra-ui/react';\nimport { InfoIcon } from '@chakra-ui/icons';\nimport Button from '../../../../components/v4/Button';\nimport Grid from '../../../../components/v4/Grid';\nimport Input from '../../../../components/v4/Input';\nimport FormLabel from '../../../../components/v4/FormLabel';\nimport updateServiceProfiles from '../../../../API/ServiceProfiles/updateServiceProfiles';\nimport createServiceProfile from '../../../../API/ServiceProfiles/createServiceProfile';\n\nimport { Select as _MultiSelect, Select as _Select } from 'chakra-react-select';\n// import Select from '../../../../components/v4/Select';\nimport getServiceProfiles from '../../../../API/getServiceProfiles';\nimport style from './styles';\nimport FooterContainer from './FooterContainer';\nimport Alert from '../../../../components/v4/Alert';\nimport AlertDescription from '../../../../components/v4/AlertDescription';\nimport AlertIcon from '../../../../components/v4/AlertIcon';\nimport Heading from '../../../../components/v4/Heading';\nimport LoadingIndicator from '../../../../components/v4/LoadingIndicator';\nimport { validationSchemaOC } from './schema';\nimport useFieldValidation from '../../../../hooks/useFieldValidation';\nimport FieldValidation from '../../../../components/v4/FieldValidation';\n\nimport walkthroughIds from '../../walkthroughIds';\nimport { defaultChakraSelectStyle, chakraSelectDarkMode } from '@/constants';\nimport config from '@/config.json';\n\nconst MultiSelect = forwardRef((props, ref) => (\n <_MultiSelect selectedOptionColor=\"brand\" ref={ref} {...props} />\n));\n\nconst Select = forwardRef((props, ref) => (\n <_Select selectedOptionColor=\"brand\" ref={ref} {...props} />\n));\n\nconst OperatorConnect = ({\n mode,\n data,\n handleBackButton,\n level,\n visibleScopeOptions,\n}) => {\n const {\n currentWholesaler: wholesalerID,\n currentPartner: partnerID,\n companiesAndPartners,\n wholesalers,\n } = useSelector((state) => state.navigationLists);\n\n const { requiredScope } = useSelector((state) => state.login);\n\n const { darkMode } = useSelector((state) => state.settings);\n\n const [callingProfiles, setCallingProfiles] = useState([]);\n const [regionsEnum, setRegionsEnum] = useState([]);\n const [voicePolicyEnum, setVoicePolicyEnum] = useState([]);\n const [operatorsEnum, setOperatorsEnum] = useState([]);\n const [dialPlansEnum, setDialPlansEnum] = useState([]);\n\n const [error, setError] = useState(null);\n\n const [isLoading, setIsLoading] = useState(true);\n\n const DEFAULT_OC_PAYLOAD = {\n name: `Operator Connect Wholesaler Profile`,\n authPolicy: 2,\n serviceType: 'OperatorConnect',\n callingProfiles: [],\n operatorProfiles: [],\n regions: [],\n voicePolicies: [],\n dialPlans: [],\n partnerID: level === 'partner' ? partnerID : undefined,\n wholesalerID: level === 'partner' ? undefined : wholesalerID,\n visibleScope: level === 'partner' ? 20 : 60,\n };\n\n const { ...ufElements } = walkthroughIds.serviceProfiles;\n const chakraSelectDarkStyle = chakraSelectDarkMode(darkMode);\n const chakraStyles = {\n ...defaultChakraSelectStyle,\n ...chakraSelectDarkStyle,\n };\n\n useEffect(() => {\n if (mode !== 'EDIT' && level !== 'partner' && wholesalers?.length > 0) {\n const wsName = wholesalers.find(\n ({ id, name }) => id === wholesalerID,\n )?.name;\n handleChangeState({\n name: `${wsName} - Operator Connect Wholesaler Profile`,\n });\n } else if (\n mode !== 'EDIT' &&\n level === 'partner' &&\n wholesalers?.length > 0\n ) {\n const partnerName = companiesAndPartners.find(\n ({ id, name }) => id === partnerID,\n )?.name;\n handleChangeState({\n name: `${partnerName} - Operator Connect Partner Profile`,\n });\n }\n }, [mode, companiesAndPartners, wholesalers, level]);\n\n const [modalState, setModalState] = useState(data || DEFAULT_OC_PAYLOAD);\n\n const authPolicyDropdown = [\n { value: 0, label: 'Disabled' },\n { value: 1, label: 'Enabled' },\n { value: 2, label: 'Required' },\n ];\n\n const { validationErrors, validatefn } = useFieldValidation(\n modalState,\n validationSchemaOC,\n );\n\n // function to set modal state with a given payload\n const handleChangeState = (payload) => {\n setModalState((prev) => ({\n ...prev,\n ...payload,\n }));\n };\n\n /*\n * A function to get the current scope and append it for API calls\n */\n const scope = () => {\n if (level === 'partner') {\n return `Partner/${partnerID}`;\n } else {\n return `Wholesaler/${wholesalerID}`;\n }\n };\n\n /*\n * Makes sure that operator profiles has been defined and if it has ->\n * sets the CallingProilfes list as the result of a api call with Scope and Query\n * is recalled whenever operator profiles is changed as the drop down list changes with that information\n */\n useEffect(() => {\n if (modalState.operatorProfiles?.length > 0) {\n axios\n .get(\n `/ServiceProfiles/OperatorConnect/${scope()}/CallingProfiles/Available?OperatorProfileIDs=${query(\n modalState.operatorProfiles,\n )}`,\n )\n .then((res) => {\n const data = res.data.map(multiSelectDataMapper);\n setCallingProfiles(data);\n })\n .catch((e) => {\n setError(e);\n });\n }\n }, [modalState.operatorProfiles?.length]);\n\n /*\n * if calling profiles and operator profiles are defined ->\n * peform a get request with those two as query parameters\n * recalled whenever either change due to the nature of the dropdowns\n */\n useEffect(() => {\n if (\n modalState.callingProfiles?.length > 0 &&\n modalState.operatorProfiles?.length > 0\n ) {\n axios\n .get(\n `/ServiceProfiles/OperatorConnect/${scope()}/Regions/Available?OperatorProfileIDs=${query(\n modalState.operatorProfiles,\n )}&CallingProfileIDs=${query(modalState.callingProfiles)}`,\n )\n .then((res) => {\n setRegionsEnum(res.data.map(multiSelectDataMapper));\n })\n .catch((e) => {\n setError(e);\n });\n }\n }, [modalState.operatorProfiles, modalState.callingProfiles]);\n\n /*\n * if calling profiles, operator profiles and regions are defined ->\n * peform a get request with those three as query parameters\n * recalled whenever any change due to the nature of the dropdowns\n */\n useEffect(() => {\n if (\n modalState.callingProfiles?.length > 0 &&\n modalState.operatorProfiles?.length > 0 &&\n modalState.regions?.length > 0\n ) {\n axios\n .get(\n `/ServiceProfiles/OperatorConnect/${scope()}/VoicePolicies/Available?OperatorProfileIDs=${query(\n modalState.operatorProfiles,\n )}&CallingProfileIDs=${query(\n modalState.callingProfiles,\n )}&RegionIDs=${query(modalState.regions)}`,\n )\n .then((res) => {\n setVoicePolicyEnum(res.data.map(multiSelectDataMapper));\n })\n .catch((e) => {\n setError(e);\n });\n }\n }, [\n modalState.operatorProfiles,\n modalState.callingProfiles,\n modalState.regions,\n ]);\n\n const handleGetDropdownData = async () => {\n setIsLoading(true);\n const fetchSPData = mode === 'EDIT' && data;\n try {\n const opResult = await axios.get(\n `/serviceprofiles/operatorconnect/${scope()}/operatorprofiles/available`,\n );\n setOperatorsEnum(opResult.data.map(multiSelectDataMapper));\n const dpResult = await axios.get(\n `/serviceprofiles/operatorconnect/${scope()}/dialplans/available`,\n );\n setDialPlansEnum(dpResult.data.map(multiSelectDataMapper));\n\n if (fetchSPData) {\n const spResult = await getServiceProfiles({\n level,\n id: data?.id,\n });\n const callingProfiles = spResult.data.callingProfiles?.map(\n multiSelectDataMapper,\n );\n const operatorProfiles = spResult.data.operatorProfiles?.map(\n multiSelectDataMapper,\n );\n const regions = spResult.data.regions?.map(\n multiSelectDataMapper,\n );\n const voicePolicies = spResult.data.voicePolicies?.map(\n multiSelectDataMapper,\n );\n const dialPlans = spResult.data.dialPlans?.map(\n multiSelectDataMapper,\n );\n\n setModalState({\n ...spResult.data,\n callingProfiles,\n operatorProfiles,\n regions,\n dialPlans,\n voicePolicies,\n });\n }\n } catch (e) {\n setError(e);\n } finally {\n setIsLoading(false);\n }\n };\n\n useEffect(() => {\n handleGetDropdownData();\n }, []);\n const handleSubmit = async () => {\n setError(null);\n //validate\n if (!validatefn()) {\n setError({\n response: {\n data: {\n message:\n 'There are some validation errors in the form. Please check and try again.',\n },\n },\n });\n return;\n }\n\n setIsLoading(true);\n try {\n if (mode === 'EDIT') {\n const result = await updateServiceProfiles({\n type: 'OperatorConnect',\n payload: modalState,\n level,\n scope: requiredScope,\n });\n handleBackButton();\n } else {\n const result = await createServiceProfile({\n type: 'OperatorConnect',\n payload: modalState,\n level,\n scope: requiredScope,\n });\n handleBackButton();\n }\n } catch (e) {\n setError(e);\n } finally {\n setIsLoading(false);\n }\n };\n\n if (isLoading) {\n return ;\n }\n\n return (\n \n \n {`${toSentenceCase(mode)} ${modalState.name || data?.name}`}\n \n {error && (\n \n \n \n {error?.response?.data?.message ||\n 'An error occured. Please try again later.'}\n \n \n )}\n \n Service name\n \n handleChangeState({ name: e.target.value })\n }\n sx={style.inputField}\n data-walkthroughid={ufElements.ufServiceNameInput}\n />\n \n \n\n \n \n Visible Scope \n \n \n \n \n {modalState.visibleScope <= requiredScope ? (\n {\n return option.value === modalState.visibleScope;\n })}\n options={visibleScopeOptions}\n chakraStyles={chakraStyles}\n onChange={(selectedOption) => {\n handleChangeState({\n visibleScope: selectedOption.value,\n });\n }}\n selectedOptionColor=\"brand\"\n />\n ) : (\n \n )}\n \n\n \n Operators \n {\n handleChangeState({\n operatorProfiles: selectedOptions,\n });\n }}\n options={operatorsEnum}\n defaultValue={modalState.operatorProfiles}\n chakraStyles={chakraStyles}\n />\n \n \n \n Calling Profiles \n {\n handleChangeState({\n callingProfiles: selectedOptions,\n });\n }}\n options={callingProfiles}\n defaultValue={modalState.callingProfiles}\n chakraStyles={chakraStyles}\n />\n \n \n\n \n Regions \n {\n handleChangeState({\n regions: selectedOptions,\n });\n }}\n options={regionsEnum}\n defaultValue={modalState.regions}\n chakraStyles={chakraStyles}\n />\n \n \n\n \n Voice Policies \n {\n handleChangeState({ voicePolicies: selectedOptions });\n }}\n options={voicePolicyEnum}\n defaultValue={modalState.voicePolicies}\n chakraStyles={chakraStyles}\n />\n \n \n \n Dial Plans \n {\n handleChangeState({ dialPlans: selectedOptions });\n }}\n options={dialPlansEnum}\n defaultValue={modalState.dialPlans}\n chakraStyles={chakraStyles}\n />\n \n \n \n Auth Policy \n handleChangeState({ authPolicy: e.value })}\n options={[\n {\n value: null,\n label: 'Select Auth Policy',\n },\n ...authPolicyDropdown,\n ]}\n data-walkthroughid={ufElements.ufAuthPolicySelect}\n chakraStyles={chakraStyles}\n />\n \n \n \n Close\n \n \n {mode === 'ADD' ? 'Add' : 'Update'}\n \n \n \n );\n};\n\nexport default OperatorConnect;\n","// external imports\nimport React from 'react';\nimport {Typography, styled} from '@mui/material';\n\nconst StyledType = styled(Typography)(({theme}) => ({}));\n\n/*\n * Will be the admin tab for service profiles\n * Most likely will be a tab to delete/reassing these service profiles\n * Waiting on information as to what it should do though\n */\nconst ServiceAdmin = (props) => {\n return (\n <>\n ServiceAdmin \n \n );\n};\n\nexport default ServiceAdmin;\n","export const serviceTableColumns = [\n {title: 'Service name', field: 'name'},\n {title: 'Status', field: 'statusDisplay.statusDisplayDetail'},\n {title: 'Last Health Check', field: 'lastHealthCheck'},\n {title: 'Actions', field: 'actions'},\n];\n\nexport const createSbcaasValidationSchema = {\n selectedMaxChannel: [\n {type: 'isEmpty', message: 'You need to specificy the maximum channels.'},\n ],\n serviceName: [\n {type: 'isEmpty', message: 'You need a service name.'},\n ],\n};\n","import {ModalCloseButton} from '@chakra-ui/react';\n\nexport default function ChakraModalCloseButton({...props}) {\n return ;\n}\n","/* eslint-disable no-unused-vars */\nimport { useState, useEffect } from 'react';\nimport { Box, useToast } from '@chakra-ui/react';\nimport { useSelector } from 'react-redux';\n\nimport { useNavigate, useParams, useLocation } from 'react-router-dom';\nimport { Select as MultiSelect } from 'chakra-react-select';\nimport { useQuery } from '@tanstack/react-query';\n\nimport { multiSelectDataMapper } from 'utils/utils';\nimport { axios } from 'services/axios';\n\nimport {\n Alert,\n AlertDescription,\n AlertIcon,\n Button,\n FormLabel,\n Heading,\n LoadingIndicator,\n} from 'components/v4';\nimport { OrderedLists } from 'components/index';\n\nimport { chakraSelectDarkMode, defaultChakraSelectStyle } from '@/constants';\nimport { classNames } from 'utils/classNames';\n\nimport walkthroughIds from '../walkthroughIds';\nimport { Container } from 'components/v4/Container/Container';\n\nconst DEFAULT_DATA = {\n name: 'Direct Routing',\n regions: [],\n voicePolicies: [],\n dialPlans: [],\n};\n\n/** Direct Routing component for Edit Services */\nexport default function DirectRouting({ mode }) {\n const { id: serviceId } = useParams();\n const navigate = useNavigate();\n const toast = useToast();\n const [data, setData] = useState(DEFAULT_DATA);\n\n const [regions, setRegions] = useState([]);\n const [dialPlans, setDialPlans] = useState([]);\n const [voicePolicies, setVoicePolicies] = useState([]);\n const [error, setError] = useState(false);\n const [isLoading, setIsLoading] = useState(true);\n const { currentCompany: companyID } = useSelector(\n (state) => state.navigationLists,\n );\n const { darkMode } = useSelector((state) => state.settings);\n const chakraSelectDark = chakraSelectDarkMode(darkMode);\n const chakraStyles = {\n outlineColor: 'gray.300',\n ...defaultChakraSelectStyle,\n ...chakraSelectDark,\n };\n const { state } = useLocation();\n\n const { serviceProfiles } = walkthroughIds;\n const handleBackButton = () => navigate('/dashboard-services');\n\n const handleGetData = async () => {\n try {\n const result = await axios.get(`/service/${data?.id}`);\n const voicePolicies = result.data?.voicePolicies?.map(\n multiSelectDataMapper,\n );\n const regions = result.data?.regions?.map(multiSelectDataMapper);\n const dialPlans = result.data?.dialPlans?.map(\n multiSelectDataMapper,\n );\n\n setData({ ...result.data, voicePolicies, regions, dialPlans });\n } catch (e) {\n setError(e);\n }\n };\n\n const handleGetDropdownData = async () => {\n try {\n const dpResult = await axios.get(\n `/Services/DirectRouting/Company/${companyID}/DialPlans/Available`,\n );\n setDialPlans(dpResult.data.map(multiSelectDataMapper));\n const regionsResult = await axios.get(\n `/Services/DirectRouting/Company/${companyID}/Profile/${serviceId}/Regions/Available`,\n );\n setRegions(regionsResult.data.map(multiSelectDataMapper));\n } catch (e) {\n setError(e);\n } finally {\n setIsLoading(false);\n }\n };\n\n const { data: directRoutingData } = useQuery({\n queryKey: ['directRoutingData', serviceId],\n queryFn: async () => {\n const res = await axios.get(`/Service/${serviceId}`);\n return res.data;\n },\n onSuccess: async (data) => {\n setData(data);\n },\n enabled: !state,\n refetchOnWindowFocus: false,\n staleTime: 500,\n });\n\n // this call will set data\n const { data: regionsData } = useQuery({\n queryKey: ['regionsData', companyID, serviceId, mode],\n queryFn: async () => {\n const regionIDQuery = new URLSearchParams({\n RegionIDs: data.regions.map((v) => v.id).join(','),\n });\n const result = await axios.get(\n `/Services/DirectRouting/Company/${companyID}/Profile/${serviceId}/VoicePolicies/Available?${regionIDQuery}`,\n );\n\n return result.data;\n },\n onSuccess: (data) => {\n setVoicePolicies(data.map(multiSelectDataMapper));\n if (mode === 'edit' && data?.id) {\n handleGetData();\n }\n // handleGetDropdownData();\n },\n enabled: data.regions && data.regions.length > 0,\n refetchOnWindowFocus: false,\n });\n\n useEffect(() => {\n handleGetDropdownData();\n }, []);\n\n useEffect(() => {\n if (state?.id) {\n setData(state);\n }\n }, [state]);\n\n const handleSubmit = async (e) => {\n e.preventDefault();\n const payload = {\n ...data,\n companyID,\n };\n let result = {};\n const endpoint = '/Service/DirectRouting';\n setIsLoading(true);\n try {\n switch (mode) {\n case 'add':\n result = await axios.post(endpoint, payload).then(() => {\n navigate('/dashboard-services');\n });\n break;\n case 'edit':\n result = await axios.put(endpoint, payload).then(() => {\n toast({\n status: 'success',\n title: 'Service Updated',\n description: 'Direct Routing has been updated.',\n isClosable: true,\n duration: 3000,\n });\n navigate('/dashboard-services');\n });\n break;\n }\n handleBackButton();\n } catch (e) {\n setError(e);\n } finally {\n setIsLoading(false);\n }\n };\n\n const handleChangeValue = (type, options) => {\n setData({ ...data, [type]: options });\n };\n\n if (isLoading) {\n return ;\n }\n return (\n \n \n Editing {data.name}\n \n\n {error && (\n <>\n \n \n \n \n {error?.response?.data?.message ||\n 'An error occured. please try again later.'}\n \n \n \n )}\n \n {/* Regions */}\n {\n setData((prev) => ({\n ...prev,\n ...v,\n }));\n }}\n options={regions}\n modalState={data}\n placeholder=\"- Select Regions -\"\n dataWalkthroughId={serviceProfiles.ufRegionTable}\n />\n\n \n\n {/* Voice Policies */}\n \n Voice Policies\n \n handleChangeValue('voicePolicies', selectedOptions)\n }\n options={voicePolicies}\n getOptionLabel={(option) => option.name}\n getOptionValue={(option) => option.id}\n defaultValue={data.voicePolicies}\n />\n \n\n \n\n {/* Dial Plans */}\n \n Dial Plans\n \n handleChangeValue('dialPlans', selectedOptions)\n }\n options={dialPlans}\n getOptionLabel={(option) => option.name}\n getOptionValue={(option) => option.id}\n defaultValue={data.dialPlans}\n />\n \n\n \n\n \n \n Close\n \n \n {mode === 'add' ? 'Add' : 'Update'}\n \n \n \n \n );\n}\n","import { useDebugValue } from 'react';\nimport { useLocation, useNavigate } from 'react-router-dom';\nimport { useDispatch } from 'react-redux';\n\nconst formatDebugValue = ({ location }) =>\n `${\n location.state?.from\n ? `navigate from: ${location.state?.from}`\n : `current location: ${location.pathname}`\n }`;\n\n/**\n * A custom hook to track current location and past location of a user, also reset modal when user navigates to a new page to prevent stale data from modal\n * @typedef {Object} NavigateLocationType\n * @property {(page: string, options?: import('react-router-dom').NavigateOptions) => void} handleNavigateLocation - a modified navigate function that includes a from location and reset modal\n * @returns {NavigateLocationType} - a modified navigate function\n */\nexport function useNavigateLocation() {\n const location = useLocation();\n const navigate = useNavigate();\n const dispatch = useDispatch();\n\n const _options = {\n state: { from: location?.pathname },\n };\n\n /**\n * @param {string} page - The page that user navigates to\n * @param {import('react-router-dom').NavigateOptions} options - The state to pass to the new location\n * @property {boolean} options.state.isModalPage - A flag to reset modal when navigating to a new page from TableAndModal\n * */\n function handleNavigateLocation(page, options = _options) {\n const { isModalPage = true } = options.state;\n if (isModalPage) {\n dispatch({ type: 'RESET_MODAL' });\n }\n navigate(page, options);\n }\n\n useDebugValue({ location }, formatDebugValue);\n\n return { handleNavigateLocation };\n}\n","import {Link} from '@chakra-ui/react';\n\nexport default function ChakraLink({children, ...rest}) {\n return {children};\n}\n","import { axios } from '../../services/axios';\n\nexport default async function getService(serviceId) {\n return axios\n .get(`/Service/${serviceId}`, {\n headers: {\n 'Cache-Control': 'no-cache',\n 'Pragma': 'no-cache',\n 'Expires': '0',\n },\n })\n .then((res) => res)\n .catch((e) => e);\n}\n","import { axios } from '../../services/axios';\n\nexport default async function getCompany(companyId) {\n return axios\n .get(`/company/${companyId}`, {\n headers: {\n 'Cache-Control': 'no-cache',\n 'Pragma': 'no-cache',\n 'Expires': '0',\n },\n })\n .then((res) => res)\n .catch((e) => e);\n}\n","import {axios} from '../../services/axios';\n\nexport default async function createOperatorConnectService(companyId) {\n return axios\n .post(`/Service/OperatorConnect/Magic/${companyId}`, {\n name: 'Operator Connect',\n companyId,\n })\n .then((res) => res)\n .catch((e) => e);\n}\n","import {axios} from '../../services/axios';\n\nexport default async function createDirectRoutingService(companyId) {\n return axios\n .post(`/Service/DirectRouting`, {\n name: 'Direct Routing',\n companyId,\n })\n .then((res) => res)\n .catch((e) => e);\n}\n","import {axios} from '../../services/axios';\n\nexport default async function createSbcService(companyId, regions, trunkTypes) {\n return axios\n .post(`/Service/SBCaaS`, {\n name: 'SBC as a Service',\n companyId: companyId,\n maxChannel: 0,\n maxRedundancy: 0,\n regions: regions,\n trunkTypes: trunkTypes\n })\n .then((res) => res)\n .catch((e) => e);\n}\n","import {axios} from '../../services/axios';\n\nexport default async function getAvailableRegionsFromACompany(companyId) {\n return axios\n .get(`/Services/SBCaaS/Company/${companyId}/Regions/Available`)\n .then((res) => res)\n .catch((e) => e);\n}\n","import {axios} from '../../services/axios';\n\nexport default async function getMsLoginLink(\n companyId,\n location = window.location.href,\n) {\n return axios\n .get(`/company/${companyId}/msloginlink?domain=${location}`)\n .then((res) => res)\n .catch((e) => e);\n}\n","import {axios} from '../../services/axios';\n\nexport default function getAppAuthByID(id) {\n return axios.get(`/appauth/${id}`);\n}\n","import {axios} from '../../services/axios';\n\nexport default function getAppAuthByCompanyID(companyID) {\n return axios.get(`/appauth/company/${companyID}`);\n}\n","import {axios} from '../../services/axios';\n\nexport default async function createMicrosoftAppAuth(params, scope) {\n return axios\n .post(`/AppAuth/Microsoft`, params, {\n headers: {\n 'X-RequestScope': scope\n }\n })\n .then((res) => res)\n .catch((e) => e);\n}\n","import { axios } from '../../services/axios';\n\nexport default async function updateAppAuth(params, scope) {\n return axios.put(`/AppAuth/Microsoft`, params, {\n headers: {\n 'X-RequestScope': scope,\n },\n });\n}\n","import { axios } from '@/services/axios';\n\nconst getTrunkTypesServiceCompany = async (companyId) => {\n try {\n const trunkResult = await axios.get(\n `/Services/SBCaaS/Company/${companyId}/TrunkTypes/Available`,\n );\n return trunkResult;\n } catch (e) {\n throw new Error(e);\n }\n};\n\nexport default getTrunkTypesServiceCompany;\n","import { createContext, useMemo, useState } from 'react';\n\nconst DashboardMenuContext = createContext(null);\nDashboardMenuContext.displayName = 'DashboardMenuContext';\n\nexport const DashboardMenuProvider = (props) => {\n const [isQueryDisabled, setIsQueryDisabled] = useState(false);\n\n const value = useMemo(\n () => ({\n isQueryDisabled,\n setIsQueryDisabled,\n }),\n [isQueryDisabled],\n );\n\n return ;\n};\n\nexport { DashboardMenuContext };\n","import { useContext, useDebugValue } from 'react';\n\nimport { DashboardMenuContext } from './DashboardMenuContext';\n\nexport const useDashboardMenu = () => {\n const context = useContext(DashboardMenuContext);\n useDebugValue(context, 'DashboardMenuContext');\n if (context === undefined) {\n throw new Error('useDashboardMenu must be used within a AuthProvider');\n }\n\n return context;\n};\n","import { useState } from 'react';\nimport { useSelector } from 'react-redux';\nimport { useNavigate } from 'react-router-dom';\n\n// Service APIs\nimport createOperatorConnectService from 'API/Service/createOperatorConnectService';\nimport createDirectRoutingService from 'API/Service/createDirectRoutingService';\nimport createSbcService from 'API/Service/createSbcService';\n\n// Region API\nimport getAvailableRegionsFromACompany from '../API/Service/getAvailableRegionsFromACompany';\n\n// Company API\nimport getCompany from 'API/Company/getCompany';\nimport getMsLoginLink from 'API/Company/getMsLoginLink';\n\n// Auth API\n// import createMicrosoftAppAuth from 'API/AppAuth/createMicrosoftAppAuth';\nimport { createMicrosoftAppAuth, updateAppAuth } from 'API/AppAuth/';\nimport getAppAuthByCompanyId from 'API/AppAuth/getAppAuthByCompanyId';\nimport getAppAuthById from 'API/AppAuth/getAppAuthById';\nimport getTrunkTypesServiceCompany from 'API/Service/getTrunkTypesServiceCompany';\nimport { useToast } from '@chakra-ui/react';\nimport { axios } from '@/services/axios';\nimport { useDashboardMenu } from 'context/DashboardMenuContext';\n\nexport default function useServiceWizard() {\n const navigate = useNavigate();\n const toast = useToast();\n // Wizard Flow\n const [flow, setFlow] = useState('Start'); // Start | CreateService | SelectiveSyncUsers | SelectiveSyncUsersEdit | MsAuth\n\n const [selectedServiceProfile, setSelectedServiceProfile] = useState(null);\n const [serviceCreationResponse, setServiceCreationResponse] =\n useState(null);\n\n // Selective Sync\n const [filterGroup, setFilterGroup] = useState(null);\n const [filterLocations, setFilterLocations] = useState(null);\n const [selectiveSyncEditData, setSelectiveSyncEditData] = useState(null);\n\n // State\n const [company, setCompany] = useState();\n const [companyAppAuth, setCompanyAppAuth] = useState([]);\n const [msServiceAuth, setMsServiceAuth] = useState([]);\n\n const [isCreatingService, setIsCreatingService] = useState(false);\n const [isCreatingAuth, setIsCreatingAuth] = useState(false);\n\n // Errors\n const [hasCreateServiceError, setHasCreateServiceError] = useState(null);\n\n // Other\n const currentCompany = useSelector(\n (state) => state.navigationLists.currentCompany,\n );\n\n const { requiredScope: accountScope } = useSelector((state) => state.login);\n const { restError: errorMessage } = useSelector((state) => ({\n ...state.modal,\n }));\n\n const { setIsQueryDisabled } = useDashboardMenu();\n\n function reset() {\n setFlow('Start');\n setSelectedServiceProfile(null);\n setFilterGroup('');\n setFilterLocations(null);\n setIsCreatingService(false);\n setIsCreatingAuth(false);\n setHasCreateServiceError(null);\n setSelectiveSyncEditData(null);\n setIsQueryDisabled(false);\n }\n\n function updateLocations(multiselectValues) {\n let items = [];\n multiselectValues.map((multiSelect) => {\n items.push(multiSelect.value);\n });\n setFilterLocations(items);\n }\n\n async function microsoftAuth() {\n const redirectUrl = await getMsLoginLink(currentCompany);\n window.location.href = redirectUrl.data;\n }\n\n async function createMicrosoftAuth(selectiveSync = false) {\n setIsCreatingAuth(true);\n await createMicrosoftAppAuth(\n {\n filterGroup,\n filterLocations,\n companyID: currentCompany,\n selectiveSync: selectiveSync,\n },\n accountScope,\n )\n .then((response) => response)\n .catch((error) => {\n console.log(error);\n })\n .finally(() => setIsCreatingAuth(false));\n }\n\n /**\n * disables your selective sync\n */\n async function onSelectiveSyncDisable() {\n await updateAppAuth(\n {\n id: msServiceAuth.id,\n tenantID: msServiceAuth.tenantID,\n filterGroup: null,\n filterLocations: null,\n companyID: currentCompany,\n selectiveSync: false,\n userSync: msServiceAuth.userSync, //TODO: check\n },\n accountScope,\n )\n .then((response) => {\n setFlow('Start');\n toast({\n title: 'Selective Sync Updated',\n description: 'Selective Sync has been updated.',\n status: 'success',\n duration: 3000,\n });\n })\n .catch((error) => {\n console.error(error);\n toast({\n title: 'Error',\n description:\n errorMessage ||\n 'There was an error updating selective sync.',\n status: 'error',\n duration: 3000,\n });\n });\n }\n\n // This is called when clicking no to selective sync\n async function onSelectiveSyncDeny() {\n const { serviceType } = selectedServiceProfile;\n\n if (serviceType === 'DirectRouting') {\n await microsoftAuth();\n } else if (serviceType === 'OperatorConnect') {\n setFlow('Start');\n }\n }\n\n // This is called when clicking next in the selective sync form\n async function onSelectiveSync() {\n await createMicrosoftAuth(true).then(async () => {\n await microsoftAuth();\n });\n }\n\n // This is called when editing selective sync\n async function onSelectiveSyncEdit() {\n let items = [];\n filterLocations.map((item) => {\n items.push(item.value);\n });\n await updateAppAuth(\n {\n id: msServiceAuth.id,\n tenantID: msServiceAuth.tenantID,\n filterGroup,\n filterLocations: items,\n companyID: currentCompany,\n selectiveSync: true,\n userSync: true,\n },\n accountScope,\n )\n .then((response) => {\n setFlow('Start');\n toast({\n title: 'Selective Sync Updated',\n description: 'Selective Sync has been updated.',\n status: 'success',\n duration: 3000,\n });\n })\n .catch((error) => {\n console.error(err);\n toast({\n title: 'Error',\n description:\n errorMessage ||\n 'There was an error updating selective sync.',\n status: 'error',\n duration: 3000,\n });\n });\n }\n\n async function ocFlow(serviceResponse) {\n // Flags\n let syncDisabled, syncEnabled, syncForced;\n let authDisabled, authEnabled, authForced;\n let userSync = false;\n let graphAuth = false;\n let serviceAuth;\n\n // Set all sync policy manually if were calling this function directly\n // Otherwise, grab the values from the service create response\n\n if (!serviceResponse) {\n const company = await getCompany(currentCompany);\n const { authPolicy } = selectedServiceProfile;\n const { selectiveSyncPolicy } = company.data;\n authDisabled = authPolicy === 0;\n authEnabled = authPolicy === 1;\n authForced = authPolicy === 2;\n syncDisabled = selectiveSyncPolicy === 0;\n syncEnabled = selectiveSyncPolicy === 1;\n syncForced = selectiveSyncPolicy === 2;\n } else {\n authDisabled = serviceResponse.authPolicy === 0;\n authEnabled = serviceResponse.authPolicy === 1;\n authForced = serviceResponse.authPolicy === 2;\n syncDisabled = serviceResponse.company.selectiveSyncPolicy === 0;\n syncEnabled = serviceResponse.companyselectiveSyncPolicy === 1;\n syncForced = serviceResponse.company.selectiveSyncPolicy === 2;\n }\n\n // Get the auth status\n const companyAppAuths = await getAppAuthByCompanyId(currentCompany);\n const companyAppAuthsContainThisService = companyAppAuths.data.find(\n (appAuth) => {\n return serviceResponse\n ? serviceResponse.appAuthType === appAuth.appAuthTypeID\n : companyAppAuths.data.appAuthType ===\n appAuth.appAuthTypeID;\n },\n );\n\n if (companyAppAuthsContainThisService?.id) {\n serviceAuth = await getAppAuthById(\n companyAppAuthsContainThisService.id,\n );\n if (serviceAuth.data?.userSync) {\n userSync = true;\n }\n if (serviceAuth.data?.graphAuth) {\n graphAuth = true;\n }\n }\n // console.log('193 going to if branch', {\n // syncDisabled,\n // syncEnabled,\n // syncForced,\n // authDisabled,\n // authEnabled,\n // authForced,\n // userSync,\n // graphAuth,\n // serviceAuth,\n // companyAppAuthsContainThisService,\n // companyAppAuths,\n // });\n\n // #1\n if (\n (authEnabled || authForced) &&\n (syncEnabled || syncForced) &&\n serviceAuth?.data?.status === 20 && //Error\n !graphAuth &&\n !userSync\n ) {\n setFlow('SelectiveSyncUsers');\n }\n // #2\n else if (\n (authEnabled || authForced) &&\n (syncEnabled || syncForced) &&\n serviceAuth?.data?.status === 2 && //Pending Access\n graphAuth &&\n userSync\n ) {\n setFlow('Start');\n }\n // #3\n else if (\n (authEnabled || authForced) &&\n (syncEnabled || syncForced) &&\n serviceAuth?.data?.status === 2 &&\n !graphAuth &&\n !userSync\n ) {\n //TODO:\n setFlow('SelectiveSyncUsers');\n }\n // #4\n else if (\n authForced &&\n syncDisabled &&\n serviceAuth?.data?.status === 2 &&\n graphAuth &&\n userSync\n ) {\n await microsoftAuth();\n }\n // #5\n else if (\n authEnabled &&\n syncDisabled &&\n serviceAuth?.data?.status === 2\n ) {\n await microsoftAuth();\n }\n // #6\n else if (authDisabled && syncDisabled) {\n setFlow('Start');\n }\n // #7\n else if (authDisabled && syncEnabled) {\n setFlow('Start');\n }\n // #8\n else if (authEnabled && syncForced && !serviceAuth) {\n setFlow('SelectiveSyncUsers');\n }\n // #9\n else if (authEnabled && syncEnabled && !serviceAuth) {\n setFlow('SelectiveSyncUsers');\n }\n // #10\n else if (authForced && syncDisabled && !serviceAuth) {\n await microsoftAuth();\n }\n // #11\n else if (authForced && syncEnabled && !serviceAuth) {\n setFlow('SelectiveSyncUsers');\n }\n // #12\n else if (authForced && syncForced && !serviceAuth) {\n setFlow('SelectiveSyncUsers');\n }\n // #13\n else if (authEnabled && syncDisabled && !serviceAuth) {\n await microsoftAuth();\n } else {\n navigate('/reload/dashboard-services');\n }\n }\n\n async function drFlow(serviceResponse) {\n // Flags\n let syncDisabled, syncEnabled, syncForced;\n let userSync,\n graphAuth = false;\n let serviceAuth;\n\n // Set all sync policy manually if were calling this function directly\n // Otherwise, grab the values from the service create response\n if (!serviceResponse) {\n const company = await getCompany(currentCompany);\n const { selectiveSyncPolicy } = company.data;\n syncDisabled = selectiveSyncPolicy === 0;\n syncEnabled = selectiveSyncPolicy === 1;\n syncForced = selectiveSyncPolicy === 2;\n } else {\n syncDisabled = serviceResponse.company.selectiveSyncPolicy === 0;\n syncEnabled = serviceResponse.company.selectiveSyncPolicy === 1;\n syncForced = serviceResponse.company.selectiveSyncPolicy === 2;\n }\n\n // Get the auth status\n const companyAppAuths = await getAppAuthByCompanyId(currentCompany);\n\n const companyAppAuthsContainThisService = companyAppAuths.data.find(\n (appAuth) => {\n return serviceResponse\n ? serviceResponse.appAuthType === appAuth.appAuthTypeID\n : companyAppAuths.data.appAuthType ===\n appAuth.appAuthTypeID;\n },\n );\n\n if (companyAppAuthsContainThisService?.id) {\n serviceAuth = await getAppAuthById(\n companyAppAuthsContainThisService.id,\n );\n if (serviceAuth.data?.userSync) {\n userSync = true;\n }\n if (serviceAuth.data?.graphAuth) {\n graphAuth = true;\n }\n }\n\n // DR flow\n // #1\n if ((syncEnabled || syncForced) && serviceAuth?.data?.status === 20) {\n setFlow('SelectiveSyncUsers');\n }\n // #2\n else if (\n (syncEnabled || syncForced) &&\n serviceAuth?.data?.status === 0 &&\n graphAuth &&\n userSync\n ) {\n setFlow('Start');\n }\n // #3\n else if (\n (syncEnabled || syncForced) &&\n serviceAuth?.data?.status === 0 &&\n !graphAuth &&\n !userSync\n ) {\n setFlow('SelectiveSyncUsers');\n }\n // #4\n else if (\n syncDisabled &&\n serviceAuth?.data?.status === 0 &&\n graphAuth &&\n userSync\n ) {\n setFlow('Start');\n }\n // #6 (NOT IN EXCEL)\n else if ((syncEnabled || syncForced) && !serviceAuth) {\n setFlow('SelectiveSyncUsers');\n }\n // #5 (NOT IN EXCEL)\n else if (!serviceAuth) {\n await microsoftAuth();\n } else {\n navigate('/dashboard-services');\n }\n }\n\n async function onServiceCreate(serviceResponse) {\n setServiceCreationResponse(serviceResponse);\n\n // 3. If SBC service, finish now\n if (\n serviceResponse.serviceType === 'SBCaaS' ||\n serviceResponse.serviceType === 'OperatorConnectConferencing'\n ) {\n setFlow('Start');\n setIsQueryDisabled(false);\n }\n\n // 4. Direct Routing\n else if (serviceResponse.serviceType === 'DirectRouting') {\n drFlow(serviceResponse);\n }\n\n // 5. Operator Connect\n else if (serviceResponse.serviceType === 'OperatorConnect') {\n ocFlow(serviceResponse);\n }\n }\n\n async function createService(serviceProfile) {\n setSelectedServiceProfile(serviceProfile);\n setIsCreatingService(true);\n setHasCreateServiceError(null);\n\n switch (serviceProfile.serviceType) {\n case 'DirectRouting':\n createDirectRoutingService(currentCompany).then((response) => {\n if (response?.response?.data?.message) {\n setHasCreateServiceError(\n response.response.data.message,\n );\n } else {\n onServiceCreate(response.data);\n }\n });\n break;\n case 'DirectRouting-':\n onServiceCreate({\n serviceType: 'DirectRouting',\n authPolicy: 2,\n company: { selectiveSyncPolicy: 2 },\n appAuthType: 'Microsoft',\n });\n setServiceCreationResponse({\n serviceType: 'DirectRouting',\n authPolicy: 2,\n company: { selectiveSyncPolicy: 2 },\n appAuthType: 'Microsoft',\n });\n break;\n case 'OperatorConnect':\n // Pre-check before creating an OC service\n const { selectiveSyncPolicy } = company;\n const { authPolicy } = serviceProfile;\n\n if (\n authPolicy === 0 &&\n (selectiveSyncPolicy === 1 || selectiveSyncPolicy === 2)\n ) {\n setIsCreatingService(false);\n setHasCreateServiceError(\n 'Selective Sync is enabled for this Company, however the Service Profile for Operator Connect does not allow Auth.',\n );\n return;\n }\n\n createOperatorConnectService(currentCompany).then(\n (response) => {\n if (response?.response?.data?.message) {\n setHasCreateServiceError(\n response.response.data.message,\n );\n } else {\n onServiceCreate(response.data);\n }\n },\n );\n break;\n case 'OperatorConnect--':\n onServiceCreate({\n authPolicy: 1,\n company: { selectiveSyncPolicy: 1 },\n appAuthType: 'Microsoft',\n serviceType: 'OperatorConnect',\n });\n setServiceCreationResponse({\n authPolicy: 1,\n company: { selectiveSyncPolicy: 1 },\n appAuthType: 'Microsoft',\n serviceType: 'OperatorConnect',\n });\n break;\n case 'SBCaaS':\n Promise.all([\n getAvailableRegionsFromACompany(currentCompany),\n getTrunkTypesServiceCompany(currentCompany),\n ]).then(([regionsResult, trunkTypesResult]) => {\n createSbcService(currentCompany, regionsResult.data, trunkTypesResult.data).then(\n (response) => {\n if(response?.response?.data.message) {\n setHasCreateServiceError(response.response.data.message);\n } else {\n onServiceCreate(response.data)\n }\n }\n )\n });\n\n break;\n case 'OperatorConnectConferencing':\n axios\n .post(\n `/Service/OperatorConnectConferencing/Magic/${currentCompany}`,\n {\n name: 'Operator Connect Conferencing',\n currentCompany,\n },\n )\n .then((res) => {\n if (res?.response?.data?.message) {\n setHasCreateServiceError(res.response.data.message);\n } else {\n onServiceCreate(res.data);\n }\n })\n .catch((e) => {\n setHasCreateServiceError(e.response.data.message);\n });\n break;\n }\n }\n\n return {\n flow,\n setFlow,\n createService,\n onSelectiveSync,\n onSelectiveSyncEdit,\n onSelectiveSyncDeny,\n setIsCreatingService,\n isCreatingService,\n\n // Selective Sync\n filterGroup,\n setFilterGroup,\n filterLocations,\n setFilterLocations,\n updateLocations,\n\n // Service profile\n setSelectedServiceProfile,\n selectedServiceProfile,\n\n // Server response after creating a service\n serviceCreationResponse,\n\n // Auth check\n microsoftAuth,\n createMicrosoftAuth,\n\n // State\n isCreatingService,\n isCreatingAuth,\n hasCreateServiceError,\n reset,\n msServiceAuth,\n setMsServiceAuth,\n selectiveSyncEditData,\n setSelectiveSyncEditData,\n companyAppAuth,\n setCompanyAppAuth,\n drFlow,\n ocFlow,\n company,\n setCompany,\n onSelectiveSyncDisable,\n setHasCreateServiceError,\n };\n}\n","export default function objChangeDetection(serverJson, newServerJson) {\n if (!serverJson.length) {\n return newServerJson.map((item) => ({...item, ...{changes: null}}));\n }\n\n return newServerJson.map((newObj) => {\n let aId, bId;\n\n const isSame = serverJson.some((o) => {\n if (newObj.id === o.id) {\n aId = o.id;\n bId = newObj.id;\n }\n return newObj.id === o.id;\n });\n\n if (isSame) {\n const itemA = serverJson.filter((el) => el.id === aId);\n const itemB = newServerJson.filter((el) => el.id === bId);\n\n const itemAStr = JSON.stringify(itemA);\n const itemBStr = JSON.stringify(itemB);\n\n const isModified = itemAStr === itemBStr;\n\n if (isModified) {\n return {...newObj, ...{changes: null}};\n } else {\n return {...newObj, ...{changes: 'modified'}};\n }\n } else {\n return {...newObj, ...{changes: 'added'}};\n }\n });\n}\n","import {Skeleton, SkeletonCircle, SkeletonText, Stack} from '@chakra-ui/react';\n\nexport default function ChakraSkeleton({...props}) {\n return ;\n}\n","export default {\n skeletonCircle: {\n marginLeft: 'auto',\n marginRight: 'auto',\n },\n};\n","import { useSelector } from 'react-redux';\nimport {\n Modal,\n ModalBody,\n ModalContent,\n ModalFooter,\n ModalHeader,\n ModalOverlay,\n Button,\n} from 'components/v4';\n\nconst walkthroughIdModal = {\n ufCancelButton: '/services-profile-add/modal/confirmation/cancel',\n ufAddButton: '/services-profile-add/modal/confirmation/add',\n};\n\nexport default function ConfirmationModal({\n onClose,\n isOpen,\n serviceName,\n vendorDefined,\n handleSubmit,\n}) {\n const { colorScheme } = useSelector((state) => state.settings);\n return (\n \n \n \n \n Add {vendorDefined ? vendorDefined : serviceName}\n \n \n \n Are you sure you would like to add{' '}\n {vendorDefined ? vendorDefined : serviceName}?\n
\n \n \n \n Cancel\n \n \n Add\n \n \n \n \n );\n}\n","export default {\n container: {\n position: 'relative',\n borderRadius: 'base',\n padding: '10px',\n // backgroundColor: '#FFF',\n boxShadow: 'base',\n maxWidth: '250px',\n minWidth: '250px',\n width: '100%',\n transition: 'all 0.5s',\n ':hover': {\n cursor: 'pointer',\n transform: 'scale(1.05)',\n boxShadow: 'lg',\n },\n },\n title: {\n fontWeight: 'bold',\n },\n imageContainer: {\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n height: '120px',\n },\n image: {\n maxHeight: '75px',\n },\n};\n","import { classNames } from '@/utils/classNames';\nimport { Box, useDisclosure } from '@chakra-ui/react';\nimport { useSelector } from 'react-redux';\n\nimport ConfirmationModal from './ConfirmationModal';\nimport styles from './styles';\n\n/**\n * @typedef {Object} ServiceProfileCardProps\n * @property {React.ReactNode} children\n * @param {ServiceProfileCardProps & import('@chakra-ui/react').BoxProps} props\n */\nexport default function ServiceProfileCard({ children, ...props }) {\n const { isOpen, onOpen, onClose } = useDisclosure();\n const { darkMode } = useSelector((state) => state.settings);\n const serviceName = props['data-walkthroughid']?.split('/')[4];\n\n const handleSubmit = (e) => {\n e.preventDefault();\n props.onClick(e);\n onClose();\n };\n\n const handleOnClick = () => {\n // no confirmation when vendor defined required as will redirect to form page\n if (props?.vendorDefined) {\n props.onClick();\n return;\n }\n // show modal confirmation on creating a service\n onOpen();\n };\n\n return (\n <>\n handleOnClick()}>\n {children}\n \n\n \n \n );\n}\n","import {Box, Stack} from '@chakra-ui/react';\nimport Skeleton from '../../Skeleton';\nimport Grid from '../../Grid';\nimport styles from './styles';\nimport ServiceProfileCard from '../ServiceProfileCard/ServiceProfileCard';\nimport {SkeletonCircle} from '@chakra-ui/react';\nexport default function ServiceProfileCardPlaceholder({\n skeletons,\n rows,\n columns,\n items,\n ...props\n}) {\n return (\n \n {Array.from(Array(items)).map((v) => (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n ))}\n \n );\n}\n","import { Box } from '@chakra-ui/react';\nimport Image from '../../Image';\nimport styles from './styles';\n\nexport default function ServiceProfileCardImage({src, ...props}) {\n return (\n \n \n \n );\n}\n","import Text from '../../Text';\nimport styles from './styles';\n\nexport default function ServiceProfileCardTitle({children, ...props}) {\n return (\n \n {children}\n \n );\n}\n","export default \"__VITE_ASSET__01f8bded__\"","export default \"__VITE_ASSET__c8661c66__\"","export default \"__VITE_ASSET__6c5abfa2__\"","import { Box, HStack, Image, Spinner, Text, Tooltip } from '@chakra-ui/react';\n\nimport ServiceProfileCard from 'components/v4/Cards/ServiceProfileCard/ServiceProfileCard';\nimport ServiceProfileCardImage from 'components/v4/Cards/ServiceProfileCard/ServiceProfileCardImage';\nimport ServiceProfileCardTitle from 'components/v4/Cards/ServiceProfileCard/ServiceProfileCardTitle';\n\nimport sbcLogo from 'assets/images/SbcaasLogo.png';\nimport cloudLogo from 'assets/images/cloud.png';\nimport callLogo from 'assets/images/call.png';\n\nimport walkthroughIds from 'pages/services/walkthroughIds';\nimport { useSelector } from 'react-redux';\n\nfunction SbcService({ serviceProfile, serviceWizard, id }) {\n const { ufNewServiceProfileCard } = walkthroughIds.dashboardServices;\n\n const { currentPartner } = useSelector((state) => state.navigationLists);\n return (\n {\n console.log('e sbc: ', e, ' | service wizard: ', serviceWizard);\n serviceWizard.createService(serviceProfile);\n }}\n key={id}\n data-walkthroughid={`${ufNewServiceProfileCard}/${id}`}>\n {serviceWizard.isCreatingService && (\n \n {serviceWizard.selectedServiceProfile.serviceType ===\n 'SBCaaS' && (\n \n )}\n \n )}\n \n \n SBC as a Service\n \n \n Connect SIP services to your company. This enables you to\n connect legacy and other cloud-based SIP platforms.\n \n {currentPartner == '100d5296-0c38-4192-1c43-08dbec03eb47' && (\n \n \n \n \n \n \n \n \n )}\n \n );\n}\n\nexport default SbcService;\n","export default \"__VITE_ASSET__4df489cd__\"","import { Box, HStack, Image, Spinner, Text, Tooltip } from '@chakra-ui/react';\n\nimport ServiceProfileCard from 'components/v4/Cards/ServiceProfileCard/ServiceProfileCard';\nimport ServiceProfileCardImage from 'components/v4/Cards/ServiceProfileCard/ServiceProfileCardImage';\nimport ServiceProfileCardTitle from 'components/v4/Cards/ServiceProfileCard/ServiceProfileCardTitle';\n\nimport msTeamsLogo from 'assets/images/ms_teams_logo.png';\nimport callLogo from 'assets/images/call.png';\nimport walkthroughIds from 'pages/services/walkthroughIds';\nimport { useSelector } from 'react-redux';\n\nfunction OcService({ serviceProfile, serviceWizard, id }) {\n const { ufNewServiceProfileCard } = walkthroughIds.dashboardServices;\n const { currentPartner } = useSelector((state) => state.navigationLists);\n return (\n serviceWizard.createService(serviceProfile)}\n key={id}\n data-walkthroughid={`${ufNewServiceProfileCard}/${id}`}>\n {serviceWizard.isCreatingService && (\n \n {serviceWizard.selectedServiceProfile.serviceType ===\n 'OperatorConnect' && (\n \n )}\n \n )}\n \n Operator Connect\n \n Authorize your Microsoft Teams tenancy to connect using Operator\n Connect API endpoints. This is only available to approved\n partners.\n \n {currentPartner == '100d5296-0c38-4192-1c43-08dbec03eb47' && (\n \n \n \n \n \n \n \n \n )}\n \n );\n}\n\nexport default OcService;\n","import { Box, Text, Spinner, HStack, Image, Tooltip } from '@chakra-ui/react';\n\nimport ServiceProfileCard from 'components/v4/Cards/ServiceProfileCard/ServiceProfileCard';\nimport ServiceProfileCardImage from 'components/v4/Cards/ServiceProfileCard/ServiceProfileCardImage';\nimport ServiceProfileCardTitle from 'components/v4/Cards/ServiceProfileCard/ServiceProfileCardTitle';\n\nimport msTeamsLogo from 'assets/images/ms_teams_logo.png';\nimport callLogo from 'assets/images/call.png';\n\nimport walkthroughIds from 'pages/services/walkthroughIds';\nimport { useSelector } from 'react-redux';\n\nfunction DrService({ serviceProfile, serviceWizard, id }) {\n const { ufNewServiceProfileCard } = walkthroughIds.dashboardServices;\n const { currentPartner } = useSelector((state) => state.navigationLists);\n const { colorScheme } = useSelector((state) => state.settings);\n return (\n serviceWizard.createService(serviceProfile)}\n key={id}\n data-walkthroughid={`${ufNewServiceProfileCard}/${id}`}\n >\n {serviceWizard.isCreatingService && (\n \n {serviceWizard.selectedServiceProfile.serviceType ===\n 'DirectRouting' && (\n \n )}\n \n )}\n \n Direct Routing\n \n {\n 'Authorize TCAP access to your Microsoft 365 tenancy. Requires a global administrator account to authorize the application.'\n }\n \n {currentPartner == '100d5296-0c38-4192-1c43-08dbec03eb47' && (\n \n \n \n \n \n \n \n \n )}\n \n );\n}\n\nexport default DrService;\n","export default \"__VITE_ASSET__beb82528__\"","import {\n Box,\n HStack,\n Icon,\n Image,\n Spinner,\n Text,\n Tooltip,\n} from '@chakra-ui/react';\nimport { MdPhonelinkRing } from 'react-icons/md';\nimport { useSelector } from 'react-redux';\nimport { useQueryClient } from '@tanstack/react-query';\n\nimport ServiceProfileCard from 'components/v4/Cards/ServiceProfileCard/ServiceProfileCard';\nimport ServiceProfileCardTitle from 'components/v4/Cards/ServiceProfileCard/ServiceProfileCardTitle';\nimport walkthroughIds from 'pages/services/walkthroughIds';\nimport { axios } from 'services/axios';\nimport { useNavigateLocation } from 'hooks/useNavigateLocation/useNavigateLocation';\n\nimport path from '@/routes/constants';\n\nimport mobileLogo from 'assets/images/mobile.png';\nimport msTeamsLogo from 'assets/images/ms_teams_logo.png';\n\nfunction TpmService({ serviceWizard, id }) {\n const queryClient = useQueryClient();\n const { ufNewServiceProfileCard } = walkthroughIds.dashboardServices;\n\n const { handleNavigateLocation: navigateLocation } = useNavigateLocation();\n const { currentPartner, currentCompany } = useSelector((state) => {\n return { ...state.navigationLists };\n });\n const { NUMBERS_TPM } = path;\n return (\n {\n serviceWizard.setSelectedServiceProfile('TPM');\n serviceWizard.setIsCreatingService(true);\n serviceWizard.setHasCreateServiceError(null);\n return axios\n .post(`/Service/TeamsPhoneMobile/Magic/${currentCompany}`)\n .then((res) => {\n navigateLocation(\n `${NUMBERS_TPM}/${res.data.id}/activation`,\n );\n queryClient.invalidateQueries([\n 'services',\n `company: ${currentCompany}`,\n ]);\n queryClient.invalidateQueries('getAssociatedAccounts');\n })\n .catch((e) => {\n const message =\n e?.response?.data?.message ||\n 'Error creating Teams Phone Mobile, Please Try Again.';\n serviceWizard.setHasCreateServiceError(message);\n });\n }}\n data-walkthroughid={`${ufNewServiceProfileCard}/${id}`}>\n {serviceWizard.isCreatingService && (\n \n {serviceWizard.selectedServiceProfile === 'TPM' && (\n \n )}\n \n )}\n \n \n \n \n Teams Phone Mobile\n \n \n Enable Teams Phone Mobile connectivity. This requires a valid\n Operator Connect service to be deployed.\n \n {currentPartner == '100d5296-0c38-4192-1c43-08dbec03eb47' && (\n \n \n \n \n \n \n \n \n )}\n \n );\n}\n\nexport default TpmService;\n","export default \"__VITE_ASSET__235e1d7e__\"","export default \"__VITE_ASSET__9f7e3f0f__\"","import { Box, HStack, Image, Spinner, Text, Tooltip } from '@chakra-ui/react';\n\nimport ServiceProfileCard from 'components/v4/Cards/ServiceProfileCard/ServiceProfileCard';\nimport ServiceProfileCardTitle from 'components/v4/Cards/ServiceProfileCard/ServiceProfileCardTitle';\n\nimport walkthroughIds from 'pages/services/walkthroughIds';\n\nimport occLogo from 'assets/images/occ.png';\nimport msTeamsLogo from 'assets/images/ms_teams_logo.png';\nimport conferenceLogo from 'assets/images/online-conference.png';\nimport ServiceProfileCardImage from 'components/v4/Cards/ServiceProfileCard/ServiceProfileCardImage';\nimport { useSelector } from 'react-redux';\n\nfunction OccService({ serviceProfile, serviceWizard, id }) {\n const { ufNewServiceProfileCard } = walkthroughIds.dashboardServices;\n const { currentPartner } = useSelector((state) => state.navigationLists);\n return (\n {\n serviceWizard.createService(serviceProfile);\n }}\n data-walkthroughid={`${ufNewServiceProfileCard}/${id}`}>\n {serviceWizard.isCreatingService && (\n \n {serviceWizard.selectedServiceProfile.serviceType ===\n 'OperatorConnectConferencing' && (\n \n )}\n \n )}\n \n \n Operator Connect Conferencing\n \n \n Enable Operator Connect Conferencing connectivity. This requires\n a valid Operator Connect service to be deployed.\n \n {currentPartner == '100d5296-0c38-4192-1c43-08dbec03eb47' && (\n \n \n \n \n \n \n \n \n )}\n \n );\n}\n\nexport default OccService;\n","export default \"__VITE_ASSET__4d2e7bab__\"","import { Box, Text, Spinner, HStack, Image, Tooltip } from '@chakra-ui/react';\n\nimport ServiceProfileCard from 'components/v4/Cards/ServiceProfileCard/ServiceProfileCard';\nimport ServiceProfileCardImage from 'components/v4/Cards/ServiceProfileCard/ServiceProfileCardImage';\nimport ServiceProfileCardTitle from 'components/v4/Cards/ServiceProfileCard/ServiceProfileCardTitle';\n\nimport AzureLogo from 'assets/images/Azure.png';\nimport msTeamsLogo from 'assets/images/ms_teams_logo.png';\nimport callLogo from 'assets/images/call.png';\n\nimport walkthroughIds from 'pages/services/walkthroughIds';\nimport { useNavigate } from 'react-router-dom';\nimport { useSelector } from 'react-redux';\nimport path from '@/routes/constants';\n\nfunction AcsService({ serviceWizard, id }) {\n const navigate = useNavigate();\n const { ufNewServiceProfileCard } = walkthroughIds.dashboardServices;\n\n const { currentPartner } = useSelector((state) => state.navigationLists);\n const acsPath = `${path.SERVICES_AZURE_CONNECT_SERVICE}/${path.CREATE}`;\n\n return (\n {\n navigate(acsPath);\n }}\n data-walkthroughid={`${ufNewServiceProfileCard}/${id}`}>\n {serviceWizard.isCreatingService && (\n \n {/* Azure Communication Service */}\n \n )}\n \n \n Azure Communication Services\n \n \n Authorize TCAP to connect to your Azure tenancy to manage or\n setup an Azure Communication Services instance.\n \n {currentPartner == '100d5296-0c38-4192-1c43-08dbec03eb47' && (\n \n \n \n \n \n \n \n \n )}\n \n );\n}\n\nexport default AcsService;\n","export default \"__VITE_ASSET__6c108c3d__\"","import { Box, Spinner, Text, Tooltip } from '@chakra-ui/react';\n\nimport ServiceProfileCard from 'components/v4/Cards/ServiceProfileCard/ServiceProfileCard';\nimport ServiceProfileCardTitle from 'components/v4/Cards/ServiceProfileCard/ServiceProfileCardTitle';\n\nimport walkthroughIds from 'pages/services/walkthroughIds';\n\nimport vendor from 'assets/images/vendor.png';\nimport ServiceProfileCardImage from 'components/v4/Cards/ServiceProfileCard/ServiceProfileCardImage';\nimport { isEmpty } from 'lodash';\n\nexport default function VendorDefinedService({\n serviceProfile,\n serviceWizard,\n id,\n}) {\n const { ufNewServiceProfileCard } = walkthroughIds.dashboardServices;\n\n return (\n {\n // custom flow for vendor defined to get template\n serviceWizard.setSelectedServiceProfile(serviceProfile);\n serviceWizard.setFlow('VendorDefined');\n }}\n vendorDefined={\n serviceProfile.serviceDefinition?.name || 'Vendor Defined'\n }\n data-walkthroughid={`${ufNewServiceProfileCard}/${id}`}>\n {serviceWizard.isCreatingService && (\n \n {serviceWizard.selectedServiceProfile.serviceType ===\n 'VendorDefined' && (\n \n )}\n \n )}\n {/* image is empty, use default, else use large logo */}\n \n \n {serviceProfile.serviceDefinition?.name}\n \n \n \n {serviceProfile.serviceDefinition?.descriptionShort}\n \n \n \n );\n}\n","import { useDispatch, useSelector } from 'react-redux';\nimport { Box, Text, Button } from '@chakra-ui/react';\nimport Grid from 'components/v4/Grid';\nimport Alert from 'components/v4/Alert';\nimport AlertIcon from 'components/v4/AlertIcon';\n\nimport SkeletonPlaceholder from 'components/v4/Cards/ServiceProfileCardPlaceholder';\n\nimport SbcService from './SbcService';\nimport OcService from './OcService';\nimport DrService from './DrService';\nimport TpmService from './TpmService';\n\nimport OccService from './OccService';\n\nimport path from '@/routes/constants';\nimport { useNavigateLocation } from 'hooks/useNavigateLocation/useNavigateLocation';\nimport { classNames } from 'utils/classNames';\n\nconst walkthroughIdPrefix = `/dashboard-services/new-service`;\n\nimport { useState } from 'react';\nimport AcsService from './AcsService';\nimport VendorDefinedService from './VendorDefinedService';\n\nexport default function AvailableServiceProfiles({\n serviceProfiles,\n serviceWizard,\n}) {\n const { handleNavigateLocation } = useNavigateLocation();\n const { requiredScope } = useSelector((state) => state.login);\n const dispatch = useDispatch();\n const { darkMode, colorScheme } = useSelector((state) => state.settings);\n\n /**\n * Loading available service profiles.\n */\n if (serviceProfiles === null || serviceProfiles === undefined) {\n return (\n \n );\n }\n\n /**\n * Loading services.\n */\n if (!serviceProfiles?.length) {\n return (\n \n \n {\n 'Your partner does not have any additional services which can be added.'\n }{' '}\n \n {requiredScope > 40 && (\n {\n handleNavigateLocation(`/${path.SERVICE_PROFILES}`);\n dispatch({\n type: 'CHANGE_MINIMUM_SCOPE',\n payload: 40,\n });\n }}\n >\n Go to service profiles\n \n )}\n \n );\n }\n\n /**\n * Available service profiles.\n */\n return (\n <>\n {serviceWizard.hasCreateServiceError &&\n serviceWizard.isCreatingService && (\n \n \n {serviceWizard.hasCreateServiceError} \n {\n serviceWizard.setIsCreatingService(false);\n dispatch({\n type: 'CHANGE_MODAL_BACKEND_ERROR',\n payload: null,\n });\n }}\n data-walkthroughid={`${walkthroughIdPrefix}/button/cancel`}\n >\n Cancel\n \n \n )}\n \n {serviceProfiles.map((serviceProfile) => {\n switch (serviceProfile.serviceType) {\n case 'ACSDirectRouting':\n return (\n \n );\n case 'SBCaaS':\n return (\n \n );\n case 'OperatorConnect':\n return (\n \n );\n case 'DirectRouting':\n return (\n \n );\n case 'TeamsPhoneMobile':\n return (\n \n );\n case 'OperatorConnectConferencing':\n return (\n \n );\n case 'VendorDefined':\n return (\n \n );\n }\n })}\n \n \n );\n}\n","import {axios} from '../../services/axios';\n\nexport default async function getAvailableServiceProfiles(companyID) {\n try {\n return axios\n .get(`/Services/Company/${companyID}/ServiceProfiles/Available`)\n .then((resp) => resp.data);\n } catch (error) {\n console.log(error);\n }\n}\n","export default {\n container: {\n position: 'relative',\n },\n horizontalLine: {\n display: 'flex',\n height: '1px',\n width: '100%',\n background: 'gray.300',\n },\n};\n","import React, { createContext, useState, useContext } from 'react';\n\nconst initialState = {\n microsoft: false,\n cisco: false,\n zoom: false,\n google: false,\n other: false,\n\n fixed: false,\n mobile: false,\n audio: false,\n ccaas: false,\n\n security: false,\n compliance: false,\n business: false,\n management: false,\n};\n\nexport const FilterContext = createContext();\n\nexport const FilterProvider = ({ children }) => {\n const [filterState, setFilterState] = useState(initialState);\n let noFilters = Object.values(filterState).every(\n (value) => value === false,\n );\n\n const changeCheckbox = (value) => {\n setFilterState((prevState) => ({\n ...prevState,\n [value]: !prevState[value],\n }));\n };\n\n const clearFilter = () => {\n setFilterState(initialState);\n };\n\n return (\n \n {children}\n \n );\n};\n","export default \"__VITE_ASSET__ed285561__\"","export default \"__VITE_ASSET__7fef0738__\"","export default \"__VITE_ASSET__78c746f1__\"","export default \"__VITE_ASSET__9f6ba3f1__\"","export default \"__VITE_ASSET__4f7a1ef6__\"","export default \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMAAAADACAMAAABlApw1AAAB0VBMVEUAAABAv0A0p1I0qFMzqFM0qFM0qFMzqFM0p1MzqVIzp1IzplM1qlU0qFM0qFM0qFM0qFM1qFM4p1A0qFM0qVI1qlU0p1M0qVM0qFQ1p1Q0qFM0p1M0qVMrqlUyqFI1qFQzqVM1p1I0qFMwr1AyqlU1qFI0qFMzqVMzp1RAn2A0qFM0qFM0qVQ0qFM0qFM0p1I1qFM1qFM0qFI0qFQ1p1Q3pFIchTseij8hjUEkkEQnlEYpmUksnUwvoU8zp1IYgDgZgjkijkIqmUkzplIxpVIZgTggij8pl0gxpFAahTktnk4tnkwZgTgrnEsfiz8voE4YgDgrm0oij0IXgDcyqVMZgTkkkkQzpVIYgDgchjwYgDgsnEsnlUYeiT4YgDgYgTgYgTgYgDgbgDcYgDgYgDgzplkXgDg0qFEXgTcYgDk0qFMXgTkYgDkagDcAgEAXgDcYgDgXgDgun00ZgDgXgTkmlEYbgDoYgDglkUQVfzkYgDgVgEAYgDgXgDcYgDgYgDgVgDUYgTgYgDgkkkMnlkc0qVQzqlUqmUormkoolkgol0c0qFQ0qFInl0grmUoggEAZgDgXgDoYgDgYgDgYgDgYgDgagDMYgTYqmUkZgTgvpU67wUi5AAAAm3RSTlMABGO738u/n5dzSygY//vXr28gz38wa+OPQ++jUww4W19X9xAkm/OLdwh756vT28OHs+tngxz//////////////////z7/////YuP/e/j//5f//69H////x//j////k3dfQBzrsxSDLE+rk2PLPATv86Pdu0PbMPv/JMMM948gnxh/5/Zhtzzh1f/6T6f4ZAibLLe/36cUS+NbQcCSfokAAAYySURBVHgB7NYDlkQxEEDRavO1bdvY/9bmYOyfVIa5O3hhifeXeZ7neZ7neZ7neZ4XCkei0WgsHkkkU+mM/DrZGI/l8oViSX6TOC+VK1X5LWq8rt5ohuQ3iPCmVrvTla8Q6vUHw6qYafGeUWMsrk2mMwDq87EY4AOtxVKcWuW40+o4CID1ICTOjDc8VnERANu0OJLd8VTDSQDEe+LCOM9zFTcBsJmIuuWel4qOAhgNRNsU7Av4vENIVA1AoYAAjl1RlJmhUUAQ+YnoiYNGAYGcmqLlDCoFBJM7i45xC50CgkqGRMMBdAoILD4We9kRSgUEFw+JtTkoFWAgKba6LbQKMHEWSzXQKsBEril2yqgVYOQ0ERsZUCvATL4rFi7oFWDoGBJzefQKMHUQY1cCKLoKYKA+RxsVYGxkfJHbKBZgbiOGtigW3FBzl42JJFEUhm9nHKjONoQNcRdk3PWOu7u7u7u7u//add/h9rlUMZX3c+Q8sU5hkyZPmTpt+oyZswye8qTfYqAEAf/e7Dlz5xmwoaRqvrEp4L9asHDRYgOVIE1LltoU8D+bvMwAjQxI0fIFKywK+N+tXOX6T+lqXrBGLZABvGBt/B+kYp7w1rFGEK6XAX+0YeMmE7N+wtvMKkFjKjaAecvMuB+1i+C2sk6QAwA8exv4UYGYdYLePADgBdtNrDpbcIBW0IAAmOfMMnFq1gJwQYQBeEesv0ZNagAsmAACeMcsI9cYqAGooA4F8Bz8JxMCgIIaGMDbXfwdYq0giQMWbDNi9QS2VSmoJRzAs2casSx+JVYJ2jUA3rIJ/90SWscqwdBABeCNRipDWDtZI6hPkQ6wQb4apAlqFysExSQpAbwWvkIK7WZBIOxHAQtWWb55Yg8DAmk/sdxKIzSaoPYyKqidSJUAWDonDyasfaCgNkWVASYLgJCw9rMgEPbDAJb+EB0gqIOMCEZ3UcWARQLgEEEdZkAwuoUqByy0+w/pXhYEwn4csGCe3ZuH9gkCYT8O4LmmbAXCOsIxBaU86QHAyeYoYR3jeIJSQJYAs2fZvBTTXhYEwn4cwDPBS7HQcUEg7ccBM6xeiukgy4JcQBYB08HDntAJFgU5IpuAaXZvGzp5qqxgRfz9dJpjNdWUq43QznBZwdnY++kcx2qKKdNYgjvPZbsQUdwuXuJK/yHNpAhvK5fpsjGA4NxplptkvtXIEXlSdLD8fkHgQVeE/f4Lrgr7vRcck/b7Lrh2Xdrvu+CGuN9zwc1L4n7PBbfk/X4LLsr7PResk/f7Ldgj7/dcsFne77fgvLzfc8E5eb/fgouX5P1+C27J+/0W3L4u7/dbcEfe77fg2t17xgxowX1jBrhg9EAXJDsdCYLE0bEPhnfkyXV1xokgMeqP1wQgxwUZF4IoNH/UQ47LhvYFEf6YLPc/RIAg0j/hR1Mw2rIgqvbfr3SjVUGkf/aktg4DCeD9Jmwmtw3HBOj+nwUJclo+gwnA/T/X+9CnXwMToft/FrSS0xLGhiASHvflsgIoQPf/LOgmp5VAgbBfeOyUg1oyoADd/7PgALksVQQFwn7h8VMOyvaCAnT/z4I8uWx9CAqA/dBjSNS1G6UgAp5G7LQIFeDvliOn5XAByu7zThAp0A4roXMig/YjuSwABY8eG7Sw2SPBE+anuOCZYwG0n/mJgXJ/PAhy0H5c4P54kIP24wL3x4MR0H5c4P54UBMi+2GB++MBre8F9usEB8hp2SKyHxa4Px5QKgPs1wny5LSW58B+leA5Oa4A7FcJInJcohHYrxAU8+S4dAbYrxB0kOvyw4H9uOAoua+5UdyvFzynKpQeLe3XC5qoGgUjQmG/WlCg6pTNyPtVgixVqaCuU96PC4ZS9UoONS+Y7Qp6s1TNXt5lu4IwQdXt1Z3TNgWdzVT1br++hAvcn+yR3rzFBe73Q52/igvcn+qhTqyrWDAkRd+1N7cuVSRoytP37vaN02pBYxv50LXd73SCQWnypZt33sOCwR3kVefP7EMExShP3nXi4PGYgpE1efKz27s/7JME9bksed3HT8vXbeX/6fPP43+IkjQg+rjny64bR67+8bu9dfO61ct3f+2in9qDAwEAAAAAQf7WKwxQAQAAAFeL50Ldv/vm2QAAAABJRU5ErkJggg==\"","export default \"__VITE_ASSET__1333bc08__\"","export default \"__VITE_ASSET__ffe8f6a9__\"","export default \"__VITE_ASSET__789f8de1__\"","export default \"__VITE_ASSET__4499faa2__\"","export default \"__VITE_ASSET__f080eb25__\"","export default \"data:image/png;base64,UklGRk4BAABXRUJQVlA4TEIBAAAvV4JOEAaHbdtI0rXssgS4z/tmd3OvFkKCxP+TKYoFk6nkf+fnNAAAJaK509yngAr/TbtH38D/B7EJLNkK7m4zPO0m4NyfYEIeOtBc7gkVQC+Brm7z7Uy72m61m8fyEmg+wYUJ/OC5XPjCAujr2lp70D61X+3nsRwQ8GEJYMFwBva6tt1etIM2OJgDAt5GtK32rP3Xf/pP/+k//af/9J/+03/6T//pP/2n//Sf/tN/+k//6T911g5ebuDAEF5wXe4JU6Cva6vtbnvXvrWvx3JAQIAI5CCz3BMSAF/XptrhdrKdbWeO5YDof/3/yz4n5CK5XC4zsgOSc3LD3Ct3HdkByXm5ZQ7MrP7Tf/pP/+k//af/9J/+03/6T//pP/2n//Sf/tN/+k//6b/V5/y3lZybm+R+uefIDkjOzOVznVxzZPcH\"","export default \"__VITE_ASSET__db61a8d1__\"","export default \"__VITE_ASSET__c6aa2b0f__\"","export default \"__VITE_ASSET__724900f4__\"","export default \"__VITE_ASSET__eb0f336e__\"","export default \"__VITE_ASSET__ced9a68b__\"","export default \"__VITE_ASSET__10ce8a1a__\"","export default \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAIACAYAAAD0eNT6AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAsASURBVHic7d0xb1RnFoDh49FKoKzpY4mKjiJl5A5FiCqSBdT8ApfUG1GgbE3JL6DGCCnVCkXpUMoUdK6QnB6DTOUtxt4FAgQB9gje55GmuTNjn2q+d+7M3G/t8PBwPsTzK5tnZubyzFydmYszs3F0W/+gPwB8dv/8z+O1Vf7/rZ3rH/YCApyE/ZnZO7o9mZkHM/Po4bX7Lz/kyWt/FwDPr2xuzMytmbkxM+c+aVTgsxIAwBuezcy9mbn98Nr9vfc98J0B8PzK5tmZ+Wlmbs7MN597QuDTCQDgHV7MzJ2Z+fnhtfsHb3vA4m0Hn1/Z/HZmfp2Zf43FHwC+NN/Mcg3/dWvn+rdve8BfAuD5lc3vZub3mdk82dkAgBO2OTO/b+1c/+7NO14LgKN3/r/MzPlTGgwAOFnnZ+aXN88E/C8Ajj7z3xmLPwB8bc7PzM7WzvWzxwdePQPw0zjtDwBfq81ZrvUzcxQARz/1u7mqiQCAU3Fza+f6xsz/zwDcGt/2B4Cv3TezXPNncXSFvxurnQcAOCU3tnaun1nM8vK+rvAHAA3nZubyYpbX9gcAOq4uZrmxDwDQcXExyx39AICODQEAAD0bi5lZX/UUAMCpWn/rboAAwNdNAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIWjs8PFz1DADAKXMGAACCBAAABAkAAAgSAAAQJAAAIEgAAECQAACAIAEAAEECAACCBAAABAkAAAgSAAAQJAAAIEgAAECQAACAIAEAAEECAACCBAAABAkAAAgSAAAQJAAAIEgAAECQAACAIAEAAEECAACCBAAABAkAAAgSAAAQJAAAIEgAAECQAACAoH9cuLt/uOohgI+zu72+ttIBfjvr9QO+UM4AAECQAACAIAEAAEECAACCBAAABAkAAAgSAAAQJAAAIEgAAECQAACAIAEAAEECAACCBAAABAkAAAgSAAAQJAAAIEgAAECQAACAIAEAAEECAACCBAAABAkAAAgSAAAQJAAAIEgAAECQAACAIAEAAEECAACCBAAABAkAAAgSAAAQJAAAIEgAAECQAACAIAEAAEECAACCBAAABAkAAAgSAAAQJAAAIEgAAECQAACAIAEAAEECAACCBAAABAkAAAgSAAAQJAAAIEgAAECQAACAIAEAAEECAACCBAAABAkAAAgSAAAQJAAAIEgAAECQAACAIAEAAEECAACCBAAABAkAAAgSAAAQJAAAIEgAAECQAACAIAEAAEECAACCBAAABAkAAAgSAAAQJAAAIEgAAECQAACAIAEAAEECAACCBAAABAkAAAgSAAAQJAAAIEgAAECQAACAIAEAAEECAACCBAAABAkAAAgSAAAQJAAAIEgAAECQAACAIAEAAEECAACCBAAABAkAAAgSAAAQJAAAIEgAAECQAACAIAEAAEECAACCBAAABAkAAAgSAAAQJAAAIEgAAECQAACAIAEAAEECAACCBAAABAkAAAgSAAAQJAAAIEgAAECQAACAIAEAAEECAACCBAAABAkAAAgSAAAQJAAAIEgAAECQAACAIAEAAEECAACCBAAABAkAAAgSAAAQJAAAIEgAAECQAACAIAEAAEECAACCBAAABAkAAAgSAAAQJAAAIEgAAECQAACAIAEAAEECAACCBAAABAkAAAgSAAAQJAAAIEgAAECQAACAIAEAAEECAACCBAAABAkAAAgSAAAQJAAAIEgAAECQAACAIAEAAEECAACCBAAABAkAAAgSAAAQJAAAIEgAAECQAACAIAEAAEECAACCBAAABAkAAAgSAAAQJAAAIEgAAECQAACAIAEAAEECAACCBAAABAkAAAgSAAAQJAAAIEgAAECQAACAIAEAAEECAACCBAAABAkAAAgSAAAQJAAAIEgAAECQAACAIAEAAEECAACCBAAABAkAAAgSAAAQJAAAIEgAAECQAACAIAEAAEECAACCBAAABAkAAAgSAAAQJAAAIEgAAECQAACAIAEAAEECAACCBAAABAkAAAgSAAAQJAAAIEgAAECQAACAIAEAAEECAACCBAAABAkAAAgSAAAQJAAAIEgAAECQAACAIAEAAEECAACCBAAABAkAAAgSAAAQtJiZ/VUPAQCcqv3FzOytegoA4FTtCQAA6NlbzMyTVU8BAJyqJ4uZebDqKQCAU/VgMTOPZubZqicBAE7Fs5l5tNjdXn85M/dWPQ0AcCruzaWDl8fXAbg9My9WOQ0AcOJezHLNX14IaHd7fW9m7qxyIgDgxN2ZSwd7M69fCfDnmXm8mnkAgBP2eJZr/cy8EgC72+sHM3NtZp6uYCgA4OQ8nZlrc+ng4PjAa3sB7G6v/zkzP44IAICvxdOZ+XEuHfz56sG/bAa0u73+x8x8Pz4OAIAv3eOZ+X4uHfzx5h1v3Q3w6EzADzPz7/HrAAD40ryY5Rr+w5vv/I+tHR4evvcvXLi7vzEzt2bmxsyc+9wTAh9vd3t9baUD/Hb2/S8gwGl7Nstr+9w+/rb/u/xtABy7cHf/zMxcnpmrM3NxZjaObuufNCrw0QQApO3PckO/vVnu6/NgZh7NpYOXH/Lk/wKQAq5eW3YI8AAAAABJRU5ErkJggg==\"","export default \"__VITE_ASSET__4e6f939d__\"","export default \"__VITE_ASSET__9c323297__\"","export default \"__VITE_ASSET__cc30a73d__\"","export default \"__VITE_ASSET__34dca156__\"","export default \"__VITE_ASSET__c80de1e4__\"","export default \"__VITE_ASSET__ad86a680__\"","export default \"__VITE_ASSET__b1a60385__\"","import { useSelector } from 'react-redux';\nimport {\n AlertTitle,\n Box,\n Image,\n Progress,\n useDisclosure,\n} from '@chakra-ui/react';\nimport { classNames } from '@/utils/classNames';\nimport {\n Modal,\n ModalContent,\n ModalBody,\n ModalHeader,\n ModalOverlay,\n ModalFooter,\n Alert,\n AlertIcon,\n AlertDescription,\n Button,\n} from '@/components/v4';\n\nimport styles from './styles';\nimport { useState } from 'react';\nimport { useQueryClient } from '@tanstack/react-query';\n\nconst walkthroughIdModal = {\n ufCancelButton: '/services-profile-add/modal/confirmation/cancel',\n ufAddButton: '/services-profile-add/modal/confirmation/add',\n};\n\n/**\n * @typedef {Object} DemoServiceProfileCardProps\n * @property {React.ReactNode} children\n * @param {DemoServiceProfileCardProps & import('@chakra-ui/react').BoxProps} props\n */\nexport default function DemoServiceProfileCard({ logo, children, ...props }) {\n const { darkMode } = useSelector((state) => state.settings);\n const { isOpen, onOpen, onClose } = useDisclosure();\n const {\n isOpen: isProgressOpen,\n onOpen: onProgressOpen,\n onClose: onProgressClose,\n } = useDisclosure();\n const serviceName = props['data-walkthroughid']?.split('/')[4];\n\n const [submitState, setSubmitState] = useState('start');\n const [serviceText, setServiceText] = useState();\n const [progressBar, setProgressBar] = useState(0);\n const { currentCompany } = useSelector((state) => state.navigationLists);\n const queryClient = useQueryClient();\n\n // the onclick adds the service with the\n const handleSubmit = async (e) => {\n e.preventDefault();\n onClose();\n setSubmitState('add');\n onProgressOpen();\n await handleAddService();\n queryClient.invalidateQueries({\n queryKey: ['services', `company: ${currentCompany}`],\n });\n };\n\n const handleAddService = async () => {\n const minDelay = 4000; // 4 seconds in milliseconds\n const maxDelay = 12000; // 12 seconds in milliseconds\n\n setProgressBar(1);\n setServiceText(`Provisioning ${serviceName}`);\n await new Promise((resolve) =>\n setTimeout(\n resolve,\n Math.floor(Math.random() * (maxDelay - minDelay + 1)) +\n minDelay,\n ),\n );\n setProgressBar(2);\n setServiceText(`Adding ${serviceName} to company`);\n await new Promise((resolve) =>\n setTimeout(\n resolve,\n Math.floor(Math.random() * (maxDelay - minDelay + 1)) +\n minDelay,\n ),\n );\n setProgressBar(3);\n setServiceText(`Activating ${serviceName}`);\n await new Promise((resolve) =>\n setTimeout(\n resolve,\n Math.floor(Math.random() * (maxDelay - minDelay + 1)) +\n minDelay,\n ),\n );\n setProgressBar(4);\n setServiceText(`Configuring ${serviceName}`);\n await new Promise((resolve) =>\n setTimeout(\n resolve,\n Math.floor(Math.random() * (maxDelay - minDelay + 1)) +\n minDelay,\n ),\n );\n setSubmitState('end');\n setServiceText(`${serviceName} provisioned successfully!`);\n };\n\n const handleProgressClose = () => {\n onProgressClose();\n setSubmitState('start');\n };\n\n return (\n <>\n \n {children}\n \n\n {submitState == 'start' && (\n \n \n \n Add {serviceName}\n \n \n Are you sure you would like to add {serviceName}\n ?\n
\n \n \n \n Cancel\n \n \n Add\n \n \n \n \n )}\n\n {(submitState == 'add' || submitState == 'end') && (\n \n \n \n \n \n \n \n {submitState == 'add' && (\n <>\n \n \n \n {serviceText}\n \n \n \n \n )}\n {submitState == 'end' && (\n \n \n \n {serviceText}\n \n \n )}\n \n \n \n Close\n \n \n \n \n )}\n \n );\n}\n","export default \"__VITE_ASSET__1a511ea1__\"","export default \"__VITE_ASSET__eddc83b8__\"","export default \"__VITE_ASSET__14f28760__\"","export default \"__VITE_ASSET__26698bee__\"","export default \"__VITE_ASSET__18f0fb11__\"","export default \"__VITE_ASSET__9694b177__\"","export default \"__VITE_ASSET__fd200a82__\"","export default \"__VITE_ASSET__671608e1__\"","export default \"__VITE_ASSET__458c5037__\"","import SkeletonPlaceholder from 'components/v4/Cards/ServiceProfileCardPlaceholder';\nimport { useContext, useEffect, useRef, useState } from 'react';\nimport ServiceProfileCard from 'components/v4/Cards/ServiceProfileCard/ServiceProfileCard';\nimport ServiceProfileCardImage from 'components/v4/Cards/ServiceProfileCard/ServiceProfileCardImage';\nimport ServiceProfileCardTitle from 'components/v4/Cards/ServiceProfileCard/ServiceProfileCardTitle';\n\nimport {\n Accordion,\n AccordionButton,\n AccordionIcon,\n AccordionItem,\n AccordionPanel,\n Box,\n HStack,\n Image,\n Text,\n Tooltip,\n} from '@chakra-ui/react';\n\nimport Grid from 'components/v4/Grid';\n\nimport { FilterContext } from './FilterContext';\nimport { Alert, AlertIcon } from 'components/v4';\nimport OcService from '../OcService';\nimport OccService from '../OccService';\nimport TpmService from '../TpmService';\nimport DrService from '../DrService';\n\n// Service images\nimport msTeamsLogo from 'assets/images/ms_teams_logo.png';\nimport gcchighLogo from 'assets/images/gcchigh.png';\nimport sharedCallingLogo from 'assets/images/sharedCalling.png';\nimport drManualLogo from 'assets/images/drmanual.png';\nimport webexLogo from 'assets/images/webex.png';\nimport zoomLogo from 'assets/images/zoom.png';\nimport voiceLogo from 'assets/images/voice.png';\nimport calendarLogo from 'assets/images/calendar.png';\nimport dynamicsLogo from 'assets/images/dynamics.png';\nimport five9Logo from 'assets/images/five9.png';\nimport eightLogo from 'assets/images/8x8.png';\nimport genesysLogo from 'assets/images/genesys.png';\nimport anywhere365Logo from 'assets/images/anywhere365.png';\nimport aiLogo from 'assets/images/ai.png';\nimport recorderLogo from 'assets/images/recorder.png';\nimport backupLogo from 'assets/images/backup.png';\nimport insightsLogo from 'assets/images/insights.png';\nimport transcriptionLogo from 'assets/images/transcription.png';\nimport trainingLogo from 'assets/images/training.png';\nimport microsoftLogo from 'assets/images/microsoft.png';\nimport certifiedLogo from 'assets/images/certified.png';\n\nimport callLogo from 'assets/images/call.png';\nimport cloudLogo from 'assets/images/cloud.png';\nimport zoomCircleLogo from 'assets/images/zoom-circle.png';\nimport googleLogo from 'assets/images/google.png';\n\nimport lockLogo from 'assets/images/lock.png';\nimport compliantLogo from 'assets/images/compliant.png';\nimport businessLogo from 'assets/images/pie-chart.png';\nimport managementLogo from 'assets/images/bullseye.png';\nimport AcsService from '../AcsService';\nimport SbcService from '../SbcService';\nimport walkthroughIds from 'pages/services/walkthroughIds';\nimport { useWindowSize } from '@uidotdev/usehooks';\nimport DemoServiceProfileCard from 'components/v4/Cards/ServiceProfileCard/DemoServiceProfileCard';\n\nimport ringCentralLogo from 'assets/images/ringcentralmigrate.png';\nimport netsapiensLogo from 'assets/images/netsapiensmigrate.png';\nimport googleMigrationLogo from 'assets/images/googlemigrate.png';\nimport maxucLogo from 'assets/images/maxucmigrate.png';\nimport webexMigrationLogo from 'assets/images/webexmigrate.png';\nimport ciscoCallManagerLogo from 'assets/images/ciscomigrate.png';\nimport zoomMigrationLogo from 'assets/images/zoommigrate.png';\nimport pbxLogo from 'assets/images/pbxmigrate.png';\nimport migrationLogo from 'assets/images/migration.png';\n\nexport default function DemoServiceProfiles({\n serviceProfiles,\n serviceWizard,\n}) {\n const { ufNewServiceProfileCard } = walkthroughIds.dashboardServices;\n\n const { filterState, noFilters } = useContext(FilterContext);\n\n const size = useWindowSize();\n const refBox = useRef();\n const [columns, setColumns] = useState(3);\n\n useEffect(() => {\n if (size.width > 0) {\n // -500 is rough estimate of the sidebar and whitespace gaps\n const width = Math.floor((size.width - 500) / 220) - 1;\n setColumns(width <= 2 ? 3 : width);\n }\n }, [size]);\n\n if (serviceProfiles === null) {\n return (\n \n );\n }\n\n if (!serviceProfiles?.length) {\n return (\n \n \n Your partner does not have any additional services which can be\n added.\n \n );\n }\n\n // service profile types available\n const oc = serviceProfiles.find((s) => s.serviceType === 'OperatorConnect');\n const tpm = serviceProfiles.find(\n (s) => s.serviceType === 'TeamsPhoneMobile',\n );\n const dr = serviceProfiles.find((s) => s.serviceType === 'DirectRouting');\n const acs = serviceProfiles.find(\n (s) => s.serviceType === 'ACSDirectRouting',\n );\n const sbcaas = serviceProfiles.find((s) => s.serviceType === 'SBCaaS');\n const occ = serviceProfiles.find(\n (s) => s.serviceType === 'OperatorConnectConferencing',\n );\n\n return (\n \n {serviceWizard.hasCreateServiceError &&\n serviceWizard.isCreatingService && (\n \n \n {serviceWizard.hasCreateServiceError}\n \n )}\n \n \n {(noFilters ||\n filterState.microsoft ||\n filterState.audio ||\n filterState.fixed ||\n filterState.mobile) && (\n \n \n \n \n Microsoft Teams Calling Services\n \n \n\n \n \n {/* OC */}\n {oc &&\n (noFilters ||\n filterState.microsoft ||\n filterState.fixed) && (\n \n )}\n\n {/* OCC */}\n {occ &&\n (noFilters ||\n filterState.microsoft ||\n filterState.audio) && (\n \n )}\n\n {/* TPM */}\n {tpm &&\n (noFilters ||\n filterState.microsoft ||\n filterState.mobile) && (\n \n )}\n\n {/* OCSC */}\n {(noFilters ||\n filterState.microsoft ||\n filterState.fixed) && (\n \n {serviceWizard.isCreatingService && (\n \n {serviceWizard\n .selectedServiceProfile\n .serviceType ===\n 'OCSC' && (\n \n )}\n \n )}\n \n \n Operator Connect Shared Calling\n \n \n Allow TCAP to automate the\n implementation of Microsoft\n Teams Shared Calling feature.\n Share a single number across\n multiple users for inbound and\n outbound calling.\n \n \n \n \n \n \n \n \n \n \n )}\n\n {/* DIRECT ROUTING */}\n {dr &&\n (noFilters ||\n filterState.microsoft ||\n filterState.fixed) && (\n \n )}\n\n {/* GCC High */}\n {(noFilters ||\n filterState.microsoft ||\n filterState.fixed) && (\n \n {serviceWizard.isCreatingService && (\n \n {serviceWizard\n .selectedServiceProfile\n .serviceType ===\n 'GCCHigh' && (\n \n )}\n \n )}\n \n \n GCC High\n \n \n Authorize TCAP access to your\n GCC High tenancy and configure\n Direct Routing services.\n Requires a global administrator\n account to authorize the\n application.\n \n \n \n \n \n \n \n \n \n \n )}\n\n {/* ACS */}\n {acs &&\n (noFilters ||\n filterState.microsoft ||\n filterState.fixed) && (\n \n )}\n\n {(noFilters ||\n filterState.microsoft ||\n filterState.fixed) && (\n \n {serviceWizard.isCreatingService && (\n \n {serviceWizard\n .selectedServiceProfile\n .serviceType ===\n 'DirectRoutingManual' && (\n \n )}\n \n )}\n \n \n Direct Routing (Manual)\n \n \n Configure Direct Routing\n manually (no automation\n provided).\n \n \n \n \n \n \n \n \n \n \n )}\n \n \n \n )}\n\n {(noFilters ||\n filterState.fixed ||\n filterState.other ||\n filterState.cisco ||\n filterState.zoom ||\n filterState.google) && (\n \n \n \n \n Other Calling Services\n \n \n\n \n \n {/* SIP */}\n {sbcaas &&\n (noFilters ||\n filterState.other ||\n filterState.fixed) && (\n \n )}\n\n {/* Webex */}\n {(noFilters ||\n filterState.cisco ||\n filterState.fixed) && (\n \n {serviceWizard.isCreatingService && (\n \n {serviceWizard\n .selectedServiceProfile\n .serviceType ===\n 'CiscoWebexCalling' && (\n \n )}\n \n )}\n \n \n Cisco WebEx Calling\n \n \n Authorize TCAP to automate WebEx\n Calling configuration and\n management\n \n \n \n \n \n \n \n \n \n \n )}\n\n {/* Zoom Phone */}\n {(noFilters ||\n filterState.zoom ||\n filterState.fixed) && (\n \n {serviceWizard.isCreatingService && (\n \n {serviceWizard\n .selectedServiceProfile\n .serviceType ===\n 'ZoomPhone' && (\n \n )}\n \n )}\n \n \n Zoom Phone\n \n \n Authorize TCAP to automate Zoom\n Phone configuration and\n management\n \n \n \n \n \n \n \n \n \n \n )}\n\n {/* Google Voice */}\n {(noFilters ||\n filterState.google ||\n filterState.fixed) && (\n \n {serviceWizard.isCreatingService && (\n \n {serviceWizard\n .selectedServiceProfile\n .serviceType ===\n 'GoogleVoice' && (\n \n )}\n \n )}\n \n \n Google Voice\n \n \n Authorize TCAP to automate\n Google Voice configuration and\n management\n \n \n \n \n \n \n \n \n \n \n )}\n \n \n \n )}\n\n {(noFilters || filterState.ccaas) && (\n \n \n \n \n Contact Center as a Service\n \n \n\n \n \n {/* Dynamics */}\n \n {serviceWizard.isCreatingService && (\n \n {serviceWizard\n .selectedServiceProfile\n .serviceType ===\n 'MicrosoftDynamics' && (\n \n )}\n \n )}\n \n \n Microsoft Dynamics\n \n \n Enable PSTN services to your\n Dynamics Contact Center.\n \n \n \n \n \n \n \n\n {/* Five9 */}\n \n {serviceWizard.isCreatingService && (\n \n {serviceWizard\n .selectedServiceProfile\n .serviceType ===\n 'Five9' && (\n \n )}\n \n )}\n \n \n Five9\n \n \n Enable PSTN services to your Five9\n Contact Center.\n \n \n \n \n \n \n \n\n {/* 8x8 */}\n \n {serviceWizard.isCreatingService && (\n \n {serviceWizard\n .selectedServiceProfile\n .serviceType === '8x8' && (\n \n )}\n \n )}\n \n \n 8x8\n \n \n Enable PSTN services to your 8x8\n Contact Center.\n \n \n \n \n \n \n \n\n {/* Genesys */}\n \n {serviceWizard.isCreatingService && (\n \n {serviceWizard\n .selectedServiceProfile\n .serviceType ===\n 'Genesys' && (\n \n )}\n \n )}\n \n \n Genesys\n \n \n Enable PSTN services to your Genesys\n Contact Center.\n \n \n \n \n \n \n \n\n {/* Anywhere365 */}\n \n {serviceWizard.isCreatingService && (\n \n {serviceWizard\n .selectedServiceProfile\n .serviceType ===\n 'Anywhere365' && (\n \n )}\n \n )}\n \n \n Anywhere365\n \n \n Enable PSTN services to your\n Anywhere365 Contact Center.\n \n \n \n \n \n \n \n \n \n \n )}\n\n {(noFilters ||\n filterState.fixed ||\n filterState.microsoft ||\n filterState.security ||\n filterState.compliance ||\n filterState.business ||\n filterState.management ||\n filterState.other) && (\n \n \n \n \n Add-On Services\n \n \n\n \n \n {/* AI Threat Intelligence */}\n {(noFilters ||\n filterState.fixed ||\n filterState.security) && (\n \n {serviceWizard.isCreatingService && (\n \n {serviceWizard\n .selectedServiceProfile\n .serviceType ===\n 'AIThreatIntelligence' && (\n \n )}\n \n )}\n \n \n AI Threat Intelligence\n \n \n Protect your organization and\n end users from social\n engineering attempts via TCAP's\n AI threat protection engine.\n \n \n \n \n \n \n \n \n \n \n )}\n\n {/* Call Recording */}\n {(noFilters ||\n filterState.compliance ||\n filterState.security ||\n filterState.fixed) && (\n \n {serviceWizard.isCreatingService && (\n \n {serviceWizard\n .selectedServiceProfile\n .serviceType ===\n 'CallRecording' && (\n \n )}\n \n )}\n \n \n Call Recording\n \n \n Ensure compliance across\n multiple industries by enabling\n Call Recording Services on your\n UCaaS platform.\n \n \n \n \n \n \n \n \n \n \n \n \n \n )}\n\n {/* Teams Backup */}\n {(noFilters ||\n filterState.microsoft ||\n filterState.security ||\n filterState.management ||\n filterState.business) && (\n \n {serviceWizard.isCreatingService && (\n \n {serviceWizard\n .selectedServiceProfile\n .serviceType ===\n 'TeamsBackupAsAService' && (\n \n )}\n \n )}\n \n \n Teams Backup as a Service\n \n \n Enable Teams Change Management\n automation via backup, history\n and notifications of Teams\n calling configurations.\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n )}\n\n {/* Insights */}\n {(noFilters || filterState.business) && (\n \n {serviceWizard.isCreatingService && (\n \n {serviceWizard\n .selectedServiceProfile\n .serviceType ===\n 'CustomerInsights' && (\n \n )}\n \n )}\n \n \n Customer Insights\n \n \n Maximise RoI with in depth\n knowledge of UCaaS service\n adoption, technologies and usage\n patterns.\n \n \n \n \n \n \n \n )}\n\n {/* Transcription */}\n {(noFilters ||\n filterState.compliance ||\n filterState.fixed) && (\n \n {serviceWizard.isCreatingService && (\n \n {serviceWizard\n .selectedServiceProfile\n .serviceType ===\n 'PSTNTranscription' && (\n \n )}\n \n )}\n \n \n PSTN Transcription\n \n \n Enhance your eDiscovery and\n retention strategies via\n automated transcription services\n to any PSTN calls.\n \n \n \n \n \n \n \n \n \n \n )}\n\n {/* Training */}\n {(noFilters || filterState.management) && (\n \n {serviceWizard.isCreatingService && (\n \n {serviceWizard\n .selectedServiceProfile\n .serviceType ===\n 'TrainingAndAdoption' && (\n \n )}\n \n )}\n \n \n Training & Adoption\n \n \n Maximise UCaaS RoI and adoption\n by ensuring your users are\n successfully deployed, enabled\n and trained.\n \n \n \n \n \n \n \n )}\n\n {/* Kade */}\n {(noFilters || filterState.other) && (\n \n {serviceWizard.isCreatingService && (\n \n {serviceWizard\n .selectedServiceProfile\n .serviceType ===\n 'Kade' && (\n \n )}\n \n )}\n \n \n Kade\n \n \n Track and manage your TCAP\n Number/Porting requests\n \n \n \n \n \n \n \n )}\n\n {/* Licensing */}\n {(noFilters ||\n filterState.microsoft ||\n filterState.management) && (\n \n {serviceWizard.isCreatingService && (\n \n {serviceWizard\n .selectedServiceProfile\n .serviceType ===\n 'MicrosoftLicensing' && (\n \n )}\n \n )}\n \n \n Microsoft Licensing\n \n \n Manage your Microsoft 365\n subscriptions via TCAP. Requires\n Microsoft reseller agreement.\n \n \n \n \n \n \n \n \n \n \n )}\n\n {/* Certified */}\n {(noFilters || filterState.management) && (\n \n {serviceWizard.isCreatingService && (\n \n {serviceWizard\n .selectedServiceProfile\n .serviceType ===\n 'CertifiedDevices' && (\n \n )}\n \n )}\n \n \n Certified Devices\n \n \n Browse, order and manage\n certified devices\n \n \n \n \n \n )}\n \n \n \n )}\n\n {(noFilters || filterState.migration) && (\n \n \n \n \n Migration Services\n \n \n\n \n \n {/* On-Prem PBX */}\n \n {serviceWizard.isCreatingService && (\n \n {serviceWizard\n .selectedServiceProfile\n .serviceType === 'pbx' && (\n \n )}\n \n )}\n \n \n From On-Prem PBX\n \n \n Migration tools built to facilitate\n migrations from On-Prem PBX\n \n \n \n \n \n\n {/* Ring Central */}\n \n {serviceWizard.isCreatingService && (\n \n {serviceWizard\n .selectedServiceProfile\n .serviceType ===\n 'RingCentral' && (\n \n )}\n \n )}\n \n \n From RingCentral\n \n \n Migration tools built to facilitate\n migrations from RingCentral\n \n \n \n \n \n\n {/* Cisco CallManager */}\n \n {serviceWizard.isCreatingService && (\n \n {serviceWizard\n .selectedServiceProfile\n .serviceType ===\n 'callmanager' && (\n \n )}\n \n )}\n \n \n From Call Manager (Cisco)\n \n \n Migration tools built to facilitate\n migrations from Call Manager (Cisco)\n \n \n \n \n \n\n {/* Netsapiens */}\n \n {serviceWizard.isCreatingService && (\n \n {serviceWizard\n .selectedServiceProfile\n .serviceType ===\n 'Netsapiens' && (\n \n )}\n \n )}\n \n \n From Netsapiens\n \n \n Migration tools built to facilitate\n migrations from Netsapiens\n \n \n \n \n \n\n {/* Webex Migration */}\n \n {serviceWizard.isCreatingService && (\n \n {serviceWizard\n .selectedServiceProfile\n .serviceType ===\n 'webexmigration' && (\n \n )}\n \n )}\n \n \n From Webex\n \n \n Migration tools built to facilitate\n migrations from Webex\n \n \n \n \n \n\n {/* Zoom */}\n \n {serviceWizard.isCreatingService && (\n \n {serviceWizard\n .selectedServiceProfile\n .serviceType ===\n 'zoommigration' && (\n \n )}\n \n )}\n \n \n From Zoom\n \n \n Migration tools built to facilitate\n migrations from Zoom\n \n \n \n \n \n\n {/* Google */}\n \n {serviceWizard.isCreatingService && (\n \n {serviceWizard\n .selectedServiceProfile\n .serviceType ===\n 'Google' && (\n \n )}\n \n )}\n \n \n From Google\n \n \n Migration tools built to facilitate\n migrations from Google\n \n \n \n \n \n\n {/* MaX UC */}\n \n {serviceWizard.isCreatingService && (\n \n {serviceWizard\n .selectedServiceProfile\n .serviceType ===\n 'maxuc' && (\n \n )}\n \n )}\n \n \n From MaX UC\n \n \n Migration tools built to facilitate\n migrations from MaX UC\n \n \n \n \n \n \n \n \n )}\n \n \n \n );\n}\n","import { Divider, HStack, Skeleton, Stack, VStack } from '@chakra-ui/react';\n\nexport default function FilterSkeleton() {\n return (\n \n \n \n \n \n \n\n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n}\n","import {\n Accordion,\n AccordionButton,\n AccordionIcon,\n AccordionItem,\n AccordionPanel,\n Box,\n Checkbox,\n FormControl,\n FormLabel,\n} from '@chakra-ui/react';\nimport { Text } from 'components/v4';\n\nimport { useContext } from 'react';\nimport FilterSkeleton from './FilterSkeleton';\nimport { FilterContext } from './FilterContext';\n\nexport default function FilterServiceProfiles({ serviceProfiles }) {\n const { filterState, changeCheckbox, clearFilter } =\n useContext(FilterContext);\n\n if (serviceProfiles === null) {\n return ;\n }\n\n if (!serviceProfiles?.length) {\n return null;\n }\n\n return (\n \n \n \n Filter\n \n clearFilter()}>\n Clear all\n \n \n\n \n \n \n \n UCaaS Provider\n \n \n\n \n \n \n changeCheckbox('microsoft')}\n />\n \n Microsoft\n \n \n \n \n \n changeCheckbox('cisco')}\n />\n \n Cisco\n \n \n \n \n \n changeCheckbox('zoom')}\n />\n \n Zoom\n \n \n \n \n \n changeCheckbox('google')}\n />\n \n Google\n \n \n \n \n \n changeCheckbox('other')}\n />\n \n Other\n \n \n \n \n \n\n \n \n \n \n Services\n \n \n\n \n \n \n changeCheckbox('fixed')}\n />\n \n Fixed Line Calling\n \n \n \n\n \n \n changeCheckbox('mobile')}\n />\n \n Mobile Calling\n \n \n \n\n \n \n changeCheckbox('audio')}\n />\n \n Audio Conferencing\n \n \n \n\n \n \n changeCheckbox('ccaas')}\n />\n \n CCaaS Enablement\n \n \n \n\n \n \n changeCheckbox('migration')}\n />\n \n Migration\n \n \n \n \n \n\n \n \n \n \n Add-On Services\n \n \n\n \n \n \n changeCheckbox('security')}\n />\n \n Security\n \n \n \n\n \n \n changeCheckbox('compliance')}\n />\n \n Compliance\n \n \n \n\n \n \n changeCheckbox('business')}\n />\n \n Business Intelligence\n \n \n \n\n \n \n changeCheckbox('management')}\n />\n \n Change Management\n \n \n \n \n \n \n );\n}\n","import { useEffect, useState } from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { Box, ChakraProvider, HStack, Stack } from '@chakra-ui/react';\nimport { useNavigate } from 'react-router-dom';\nimport { ArrowBackIcon } from '@chakra-ui/icons';\n\nimport AvailableServiceProfiles from './AvailableServiceProfiles';\nimport getAvailableServiceProfiles from '../../../../API/ServiceProfiles/getAvailableServiceProfiles';\n// import createService from '../../../../API/createService';\nimport { classNames } from 'utils/classNames';\n\nimport { Heading, Text, Button } from '@/components/v4';\nimport styles from './styles';\nimport chakratheme from '@/chakratheme';\nimport DemoServiceProfiles from './Demo/DemoServiceProfiles';\nimport { useWindowSize } from '@uidotdev/usehooks';\n\nconst walkthroughIdPrefix = `/dashboard-services/new-service`;\n\nimport FilterServiceProfiles from './Demo/FilterServiceProfiles';\nimport { FilterProvider } from './Demo/FilterContext';\n\nexport default function ServiceWizard({ serviceWizard }) {\n // Global\n const { currentPartner, currentCompany } = useSelector(\n (state) => state.navigationLists,\n );\n const { darkMode } = useSelector((state) => state.settings);\n const { requiredScope } = useSelector((state) => state.login);\n const navigate = useNavigate();\n const dispatch = useDispatch();\n const size = useWindowSize();\n\n // Local\n const [serviceProfiles, setServiceProfiles] = useState(null);\n const [serviceData, setServiceData] = useState([]);\n\n const handleGetData = async () => {\n if (currentCompany) {\n const serviceprofiles =\n await getAvailableServiceProfiles(currentCompany);\n setServiceProfiles(serviceprofiles);\n }\n };\n\n useEffect(() => {\n handleGetData();\n }, [currentCompany]);\n\n useEffect(() => {\n const filteredData = serviceProfiles?.filter(\n (service) => service.visibleScope <= requiredScope,\n );\n setServiceData(filteredData);\n }, [serviceProfiles]);\n\n return (\n \n \n Add a new service\n\n serviceWizard.reset()}\n sx={{ position: 'absolute', top: '6px', right: 0 }}\n data-walkthroughid={`${walkthroughIdPrefix}/button/back`}>\n \n Back to services\n \n\n \n \n Select the service you would like to add to your company.\n \n \n\n \n\n \n\n {/* change here for the demo */}\n {currentPartner == '100d5296-0c38-4192-1c43-08dbec03eb47' ? (\n \n \n \n\n {size.width > 1300 && (\n \n )}\n \n \n ) : (\n \n )}\n \n \n );\n}\n","export default {\n MicrosoftAuthCard: {\n backgroundColor: '#FFF',\n position: 'relative',\n display: 'flex',\n justifyContent: 'flex-start',\n alignContent: 'flex-start',\n flexDirection: 'column',\n maxWidth: '300px',\n minWidth: '200px',\n boxShadow: 'base',\n padding: '15px',\n '&:hover': {\n cursor: 'pointer',\n boxShadow: 'md',\n transition: 'all 0.5s',\n },\n },\n MicrosoftAuthCardImage: {maxWidth: '160px', mx: 'auto', mb: '10px'},\n};\n","import {Box} from '@chakra-ui/react';\nimport styles from './styles';\n\nexport default function MicrosoftAuthCard({children, ...props}) {\n return (\n \n {children}\n \n );\n}\n","export default \"__VITE_ASSET__490b00d3__\"","import Mslogo from '../../../../assets/images/Microsoft_logo.png';\nimport Image from '../../Image';\nimport styles from './styles';\n\nexport default function MicrosoftAuthCardImage({...props}) {\n return ;\n}\n","import {Box} from '@chakra-ui/react';\nimport {ArrowBackIcon, ExternalLinkIcon} from '@chakra-ui/icons';\n\n// Components\nimport Button from '../../../../components/v4/Button';\nimport Text from '../../../../components/v4/Text';\nimport Heading from '../../../../components/v4/Heading';\n\n// MS Card\nimport MicrosoftAuthCard from '../../../../components/v4/Cards/MicrosoftAuthCard/MicrosoftAuthCard';\nimport MicrosoftAuthCardImage from '../../../../components/v4/Cards/MicrosoftAuthCard/MicrosoftAuthCardImage';\n\nexport default function ServiceWizardMsAuth({serviceWizard}) {\n return (\n \n serviceWizard.reset()}\n sx={{position: 'absolute', top: '6px', right: 0}}>\n \n Back to services\n \n\n Authenticate your Microsoft Tenancy?\n\n \n\n {serviceWizard.serviceCreationResponse.authPolicy === 1 && (\n <>\n \n Your company's authentication policy is set to optional.\n If you would like to authenticate with Microsoft now,\n click Authenticate now. Otherwise you can skip this step\n by clicking Do this later.\n \n\n \n \n )}\n\n \n\n \n\n {/* Content */}\n \n \n\n {\n serviceWizard.microsoftAuth();\n }}\n size=\"sm\"\n sx={{margin: '0 auto', display: 'block'}}\n variant=\"link\">\n Authenticate Now \n \n\n \n\n {\n serviceWizard.reset();\n }}\n size=\"xs\"\n sx={{\n margin: '0 auto',\n color: 'gray.500',\n textAlign: 'center',\n display: 'block',\n }}\n variant=\"link\">\n Do this later\n \n \n \n );\n}\n","export default [\n {name: 'Afghanistan', 'alpha-2': 'AF', 'country-code': '004'},\n {name: 'Åland Islands', 'alpha-2': 'AX', 'country-code': '248'},\n {name: 'Albania', 'alpha-2': 'AL', 'country-code': '008'},\n {name: 'Algeria', 'alpha-2': 'DZ', 'country-code': '012'},\n {name: 'American Samoa', 'alpha-2': 'AS', 'country-code': '016'},\n {name: 'Andorra', 'alpha-2': 'AD', 'country-code': '020'},\n {name: 'Angola', 'alpha-2': 'AO', 'country-code': '024'},\n {name: 'Anguilla', 'alpha-2': 'AI', 'country-code': '660'},\n {name: 'Antarctica', 'alpha-2': 'AQ', 'country-code': '010'},\n {name: 'Antigua and Barbuda', 'alpha-2': 'AG', 'country-code': '028'},\n {name: 'Argentina', 'alpha-2': 'AR', 'country-code': '032'},\n {name: 'Armenia', 'alpha-2': 'AM', 'country-code': '051'},\n {name: 'Aruba', 'alpha-2': 'AW', 'country-code': '533'},\n {name: 'Australia', 'alpha-2': 'AU', 'country-code': '036'},\n {name: 'Austria', 'alpha-2': 'AT', 'country-code': '040'},\n {name: 'Azerbaijan', 'alpha-2': 'AZ', 'country-code': '031'},\n {name: 'Bahamas', 'alpha-2': 'BS', 'country-code': '044'},\n {name: 'Bahrain', 'alpha-2': 'BH', 'country-code': '048'},\n {name: 'Bangladesh', 'alpha-2': 'BD', 'country-code': '050'},\n {name: 'Barbados', 'alpha-2': 'BB', 'country-code': '052'},\n {name: 'Belarus', 'alpha-2': 'BY', 'country-code': '112'},\n {name: 'Belgium', 'alpha-2': 'BE', 'country-code': '056'},\n {name: 'Belize', 'alpha-2': 'BZ', 'country-code': '084'},\n {name: 'Benin', 'alpha-2': 'BJ', 'country-code': '204'},\n {name: 'Bermuda', 'alpha-2': 'BM', 'country-code': '060'},\n {name: 'Bhutan', 'alpha-2': 'BT', 'country-code': '064'},\n {\n name: 'Bolivia (Plurinational State of)',\n 'alpha-2': 'BO',\n 'country-code': '068',\n },\n {\n name: 'Bonaire, Sint Eustatius and Saba',\n 'alpha-2': 'BQ',\n 'country-code': '535',\n },\n {name: 'Bosnia and Herzegovina', 'alpha-2': 'BA', 'country-code': '070'},\n {name: 'Botswana', 'alpha-2': 'BW', 'country-code': '072'},\n {name: 'Bouvet Island', 'alpha-2': 'BV', 'country-code': '074'},\n {name: 'Brazil', 'alpha-2': 'BR', 'country-code': '076'},\n {\n name: 'British Indian Ocean Territory',\n 'alpha-2': 'IO',\n 'country-code': '086',\n },\n {name: 'Brunei Darussalam', 'alpha-2': 'BN', 'country-code': '096'},\n {name: 'Bulgaria', 'alpha-2': 'BG', 'country-code': '100'},\n {name: 'Burkina Faso', 'alpha-2': 'BF', 'country-code': '854'},\n {name: 'Burundi', 'alpha-2': 'BI', 'country-code': '108'},\n {name: 'Cabo Verde', 'alpha-2': 'CV', 'country-code': '132'},\n {name: 'Cambodia', 'alpha-2': 'KH', 'country-code': '116'},\n {name: 'Cameroon', 'alpha-2': 'CM', 'country-code': '120'},\n {name: 'Canada', 'alpha-2': 'CA', 'country-code': '124'},\n {name: 'Cayman Islands', 'alpha-2': 'KY', 'country-code': '136'},\n {name: 'Central African Republic', 'alpha-2': 'CF', 'country-code': '140'},\n {name: 'Chad', 'alpha-2': 'TD', 'country-code': '148'},\n {name: 'Chile', 'alpha-2': 'CL', 'country-code': '152'},\n {name: 'China', 'alpha-2': 'CN', 'country-code': '156'},\n {name: 'Christmas Island', 'alpha-2': 'CX', 'country-code': '162'},\n {name: 'Cocos (Keeling) Islands', 'alpha-2': 'CC', 'country-code': '166'},\n {name: 'Colombia', 'alpha-2': 'CO', 'country-code': '170'},\n {name: 'Comoros', 'alpha-2': 'KM', 'country-code': '174'},\n {name: 'Congo', 'alpha-2': 'CG', 'country-code': '178'},\n {\n name: 'Congo, Democratic Republic of the',\n 'alpha-2': 'CD',\n 'country-code': '180',\n },\n {name: 'Cook Islands', 'alpha-2': 'CK', 'country-code': '184'},\n {name: 'Costa Rica', 'alpha-2': 'CR', 'country-code': '188'},\n {name: \"Côte d'Ivoire\", 'alpha-2': 'CI', 'country-code': '384'},\n {name: 'Croatia', 'alpha-2': 'HR', 'country-code': '191'},\n {name: 'Cuba', 'alpha-2': 'CU', 'country-code': '192'},\n {name: 'Curaçao', 'alpha-2': 'CW', 'country-code': '531'},\n {name: 'Cyprus', 'alpha-2': 'CY', 'country-code': '196'},\n {name: 'Czechia', 'alpha-2': 'CZ', 'country-code': '203'},\n {name: 'Denmark', 'alpha-2': 'DK', 'country-code': '208'},\n {name: 'Djibouti', 'alpha-2': 'DJ', 'country-code': '262'},\n {name: 'Dominica', 'alpha-2': 'DM', 'country-code': '212'},\n {name: 'Dominican Republic', 'alpha-2': 'DO', 'country-code': '214'},\n {name: 'Ecuador', 'alpha-2': 'EC', 'country-code': '218'},\n {name: 'Egypt', 'alpha-2': 'EG', 'country-code': '818'},\n {name: 'El Salvador', 'alpha-2': 'SV', 'country-code': '222'},\n {name: 'Equatorial Guinea', 'alpha-2': 'GQ', 'country-code': '226'},\n {name: 'Eritrea', 'alpha-2': 'ER', 'country-code': '232'},\n {name: 'Estonia', 'alpha-2': 'EE', 'country-code': '233'},\n {name: 'Eswatini', 'alpha-2': 'SZ', 'country-code': '748'},\n {name: 'Ethiopia', 'alpha-2': 'ET', 'country-code': '231'},\n {\n name: 'Falkland Islands (Malvinas)',\n 'alpha-2': 'FK',\n 'country-code': '238',\n },\n {name: 'Faroe Islands', 'alpha-2': 'FO', 'country-code': '234'},\n {name: 'Fiji', 'alpha-2': 'FJ', 'country-code': '242'},\n {name: 'Finland', 'alpha-2': 'FI', 'country-code': '246'},\n {name: 'France', 'alpha-2': 'FR', 'country-code': '250'},\n {name: 'French Guiana', 'alpha-2': 'GF', 'country-code': '254'},\n {name: 'French Polynesia', 'alpha-2': 'PF', 'country-code': '258'},\n {\n name: 'French Southern Territories',\n 'alpha-2': 'TF',\n 'country-code': '260',\n },\n {name: 'Gabon', 'alpha-2': 'GA', 'country-code': '266'},\n {name: 'Gambia', 'alpha-2': 'GM', 'country-code': '270'},\n {name: 'Georgia', 'alpha-2': 'GE', 'country-code': '268'},\n {name: 'Germany', 'alpha-2': 'DE', 'country-code': '276'},\n {name: 'Ghana', 'alpha-2': 'GH', 'country-code': '288'},\n {name: 'Gibraltar', 'alpha-2': 'GI', 'country-code': '292'},\n {name: 'Greece', 'alpha-2': 'GR', 'country-code': '300'},\n {name: 'Greenland', 'alpha-2': 'GL', 'country-code': '304'},\n {name: 'Grenada', 'alpha-2': 'GD', 'country-code': '308'},\n {name: 'Guadeloupe', 'alpha-2': 'GP', 'country-code': '312'},\n {name: 'Guam', 'alpha-2': 'GU', 'country-code': '316'},\n {name: 'Guatemala', 'alpha-2': 'GT', 'country-code': '320'},\n {name: 'Guernsey', 'alpha-2': 'GG', 'country-code': '831'},\n {name: 'Guinea', 'alpha-2': 'GN', 'country-code': '324'},\n {name: 'Guinea-Bissau', 'alpha-2': 'GW', 'country-code': '624'},\n {name: 'Guyana', 'alpha-2': 'GY', 'country-code': '328'},\n {name: 'Haiti', 'alpha-2': 'HT', 'country-code': '332'},\n {\n name: 'Heard Island and McDonald Islands',\n 'alpha-2': 'HM',\n 'country-code': '334',\n },\n {name: 'Holy See', 'alpha-2': 'VA', 'country-code': '336'},\n {name: 'Honduras', 'alpha-2': 'HN', 'country-code': '340'},\n {name: 'Hong Kong', 'alpha-2': 'HK', 'country-code': '344'},\n {name: 'Hungary', 'alpha-2': 'HU', 'country-code': '348'},\n {name: 'Iceland', 'alpha-2': 'IS', 'country-code': '352'},\n {name: 'India', 'alpha-2': 'IN', 'country-code': '356'},\n {name: 'Indonesia', 'alpha-2': 'ID', 'country-code': '360'},\n {\n name: 'Iran (Islamic Republic of)',\n 'alpha-2': 'IR',\n 'country-code': '364',\n },\n {name: 'Iraq', 'alpha-2': 'IQ', 'country-code': '368'},\n {name: 'Ireland', 'alpha-2': 'IE', 'country-code': '372'},\n {name: 'Isle of Man', 'alpha-2': 'IM', 'country-code': '833'},\n {name: 'Israel', 'alpha-2': 'IL', 'country-code': '376'},\n {name: 'Italy', 'alpha-2': 'IT', 'country-code': '380'},\n {name: 'Jamaica', 'alpha-2': 'JM', 'country-code': '388'},\n {name: 'Japan', 'alpha-2': 'JP', 'country-code': '392'},\n {name: 'Jersey', 'alpha-2': 'JE', 'country-code': '832'},\n {name: 'Jordan', 'alpha-2': 'JO', 'country-code': '400'},\n {name: 'Kazakhstan', 'alpha-2': 'KZ', 'country-code': '398'},\n {name: 'Kenya', 'alpha-2': 'KE', 'country-code': '404'},\n {name: 'Kiribati', 'alpha-2': 'KI', 'country-code': '296'},\n {\n name: \"Korea (Democratic People's Republic of)\",\n 'alpha-2': 'KP',\n 'country-code': '408',\n },\n {name: 'Korea, Republic of', 'alpha-2': 'KR', 'country-code': '410'},\n {name: 'Kuwait', 'alpha-2': 'KW', 'country-code': '414'},\n {name: 'Kyrgyzstan', 'alpha-2': 'KG', 'country-code': '417'},\n {\n name: \"Lao People's Democratic Republic\",\n 'alpha-2': 'LA',\n 'country-code': '418',\n },\n {name: 'Latvia', 'alpha-2': 'LV', 'country-code': '428'},\n {name: 'Lebanon', 'alpha-2': 'LB', 'country-code': '422'},\n {name: 'Lesotho', 'alpha-2': 'LS', 'country-code': '426'},\n {name: 'Liberia', 'alpha-2': 'LR', 'country-code': '430'},\n {name: 'Libya', 'alpha-2': 'LY', 'country-code': '434'},\n {name: 'Liechtenstein', 'alpha-2': 'LI', 'country-code': '438'},\n {name: 'Lithuania', 'alpha-2': 'LT', 'country-code': '440'},\n {name: 'Luxembourg', 'alpha-2': 'LU', 'country-code': '442'},\n {name: 'Macao', 'alpha-2': 'MO', 'country-code': '446'},\n {name: 'Madagascar', 'alpha-2': 'MG', 'country-code': '450'},\n {name: 'Malawi', 'alpha-2': 'MW', 'country-code': '454'},\n {name: 'Malaysia', 'alpha-2': 'MY', 'country-code': '458'},\n {name: 'Maldives', 'alpha-2': 'MV', 'country-code': '462'},\n {name: 'Mali', 'alpha-2': 'ML', 'country-code': '466'},\n {name: 'Malta', 'alpha-2': 'MT', 'country-code': '470'},\n {name: 'Marshall Islands', 'alpha-2': 'MH', 'country-code': '584'},\n {name: 'Martinique', 'alpha-2': 'MQ', 'country-code': '474'},\n {name: 'Mauritania', 'alpha-2': 'MR', 'country-code': '478'},\n {name: 'Mauritius', 'alpha-2': 'MU', 'country-code': '480'},\n {name: 'Mayotte', 'alpha-2': 'YT', 'country-code': '175'},\n {name: 'Mexico', 'alpha-2': 'MX', 'country-code': '484'},\n {\n name: 'Micronesia (Federated States of)',\n 'alpha-2': 'FM',\n 'country-code': '583',\n },\n {name: 'Moldova, Republic of', 'alpha-2': 'MD', 'country-code': '498'},\n {name: 'Monaco', 'alpha-2': 'MC', 'country-code': '492'},\n {name: 'Mongolia', 'alpha-2': 'MN', 'country-code': '496'},\n {name: 'Montenegro', 'alpha-2': 'ME', 'country-code': '499'},\n {name: 'Montserrat', 'alpha-2': 'MS', 'country-code': '500'},\n {name: 'Morocco', 'alpha-2': 'MA', 'country-code': '504'},\n {name: 'Mozambique', 'alpha-2': 'MZ', 'country-code': '508'},\n {name: 'Myanmar', 'alpha-2': 'MM', 'country-code': '104'},\n {name: 'Namibia', 'alpha-2': 'NA', 'country-code': '516'},\n {name: 'Nauru', 'alpha-2': 'NR', 'country-code': '520'},\n {name: 'Nepal', 'alpha-2': 'NP', 'country-code': '524'},\n {name: 'Netherlands', 'alpha-2': 'NL', 'country-code': '528'},\n {name: 'New Caledonia', 'alpha-2': 'NC', 'country-code': '540'},\n {name: 'New Zealand', 'alpha-2': 'NZ', 'country-code': '554'},\n {name: 'Nicaragua', 'alpha-2': 'NI', 'country-code': '558'},\n {name: 'Niger', 'alpha-2': 'NE', 'country-code': '562'},\n {name: 'Nigeria', 'alpha-2': 'NG', 'country-code': '566'},\n {name: 'Niue', 'alpha-2': 'NU', 'country-code': '570'},\n {name: 'Norfolk Island', 'alpha-2': 'NF', 'country-code': '574'},\n {name: 'North Macedonia', 'alpha-2': 'MK', 'country-code': '807'},\n {name: 'Northern Mariana Islands', 'alpha-2': 'MP', 'country-code': '580'},\n {name: 'Norway', 'alpha-2': 'NO', 'country-code': '578'},\n {name: 'Oman', 'alpha-2': 'OM', 'country-code': '512'},\n {name: 'Pakistan', 'alpha-2': 'PK', 'country-code': '586'},\n {name: 'Palau', 'alpha-2': 'PW', 'country-code': '585'},\n {name: 'Palestine, State of', 'alpha-2': 'PS', 'country-code': '275'},\n {name: 'Panama', 'alpha-2': 'PA', 'country-code': '591'},\n {name: 'Papua New Guinea', 'alpha-2': 'PG', 'country-code': '598'},\n {name: 'Paraguay', 'alpha-2': 'PY', 'country-code': '600'},\n {name: 'Peru', 'alpha-2': 'PE', 'country-code': '604'},\n {name: 'Philippines', 'alpha-2': 'PH', 'country-code': '608'},\n {name: 'Pitcairn', 'alpha-2': 'PN', 'country-code': '612'},\n {name: 'Poland', 'alpha-2': 'PL', 'country-code': '616'},\n {name: 'Portugal', 'alpha-2': 'PT', 'country-code': '620'},\n {name: 'Puerto Rico', 'alpha-2': 'PR', 'country-code': '630'},\n {name: 'Qatar', 'alpha-2': 'QA', 'country-code': '634'},\n {name: 'Réunion', 'alpha-2': 'RE', 'country-code': '638'},\n {name: 'Romania', 'alpha-2': 'RO', 'country-code': '642'},\n {name: 'Russian Federation', 'alpha-2': 'RU', 'country-code': '643'},\n {name: 'Rwanda', 'alpha-2': 'RW', 'country-code': '646'},\n {name: 'Saint Barthélemy', 'alpha-2': 'BL', 'country-code': '652'},\n {\n name: 'Saint Helena, Ascension and Tristan da Cunha',\n 'alpha-2': 'SH',\n 'country-code': '654',\n },\n {name: 'Saint Kitts and Nevis', 'alpha-2': 'KN', 'country-code': '659'},\n {name: 'Saint Lucia', 'alpha-2': 'LC', 'country-code': '662'},\n {\n name: 'Saint Martin (French part)',\n 'alpha-2': 'MF',\n 'country-code': '663',\n },\n {name: 'Saint Pierre and Miquelon', 'alpha-2': 'PM', 'country-code': '666'},\n {\n name: 'Saint Vincent and the Grenadines',\n 'alpha-2': 'VC',\n 'country-code': '670',\n },\n {name: 'Samoa', 'alpha-2': 'WS', 'country-code': '882'},\n {name: 'San Marino', 'alpha-2': 'SM', 'country-code': '674'},\n {name: 'Sao Tome and Principe', 'alpha-2': 'ST', 'country-code': '678'},\n {name: 'Saudi Arabia', 'alpha-2': 'SA', 'country-code': '682'},\n {name: 'Senegal', 'alpha-2': 'SN', 'country-code': '686'},\n {name: 'Serbia', 'alpha-2': 'RS', 'country-code': '688'},\n {name: 'Seychelles', 'alpha-2': 'SC', 'country-code': '690'},\n {name: 'Sierra Leone', 'alpha-2': 'SL', 'country-code': '694'},\n {name: 'Singapore', 'alpha-2': 'SG', 'country-code': '702'},\n {name: 'Sint Maarten (Dutch part)', 'alpha-2': 'SX', 'country-code': '534'},\n {name: 'Slovakia', 'alpha-2': 'SK', 'country-code': '703'},\n {name: 'Slovenia', 'alpha-2': 'SI', 'country-code': '705'},\n {name: 'Solomon Islands', 'alpha-2': 'SB', 'country-code': '090'},\n {name: 'Somalia', 'alpha-2': 'SO', 'country-code': '706'},\n {name: 'South Africa', 'alpha-2': 'ZA', 'country-code': '710'},\n {\n name: 'South Georgia and the South Sandwich Islands',\n 'alpha-2': 'GS',\n 'country-code': '239',\n },\n {name: 'South Sudan', 'alpha-2': 'SS', 'country-code': '728'},\n {name: 'Spain', 'alpha-2': 'ES', 'country-code': '724'},\n {name: 'Sri Lanka', 'alpha-2': 'LK', 'country-code': '144'},\n {name: 'Sudan', 'alpha-2': 'SD', 'country-code': '729'},\n {name: 'Suriname', 'alpha-2': 'SR', 'country-code': '740'},\n {name: 'Svalbard and Jan Mayen', 'alpha-2': 'SJ', 'country-code': '744'},\n {name: 'Sweden', 'alpha-2': 'SE', 'country-code': '752'},\n {name: 'Switzerland', 'alpha-2': 'CH', 'country-code': '756'},\n {name: 'Syrian Arab Republic', 'alpha-2': 'SY', 'country-code': '760'},\n {name: 'Taiwan, Province of China', 'alpha-2': 'TW', 'country-code': '158'},\n {name: 'Tajikistan', 'alpha-2': 'TJ', 'country-code': '762'},\n {\n name: 'Tanzania, United Republic of',\n 'alpha-2': 'TZ',\n 'country-code': '834',\n },\n {name: 'Thailand', 'alpha-2': 'TH', 'country-code': '764'},\n {name: 'Timor-Leste', 'alpha-2': 'TL', 'country-code': '626'},\n {name: 'Togo', 'alpha-2': 'TG', 'country-code': '768'},\n {name: 'Tokelau', 'alpha-2': 'TK', 'country-code': '772'},\n {name: 'Tonga', 'alpha-2': 'TO', 'country-code': '776'},\n {name: 'Trinidad and Tobago', 'alpha-2': 'TT', 'country-code': '780'},\n {name: 'Tunisia', 'alpha-2': 'TN', 'country-code': '788'},\n {name: 'Turkey', 'alpha-2': 'TR', 'country-code': '792'},\n {name: 'Turkmenistan', 'alpha-2': 'TM', 'country-code': '795'},\n {name: 'Turks and Caicos Islands', 'alpha-2': 'TC', 'country-code': '796'},\n {name: 'Tuvalu', 'alpha-2': 'TV', 'country-code': '798'},\n {name: 'Uganda', 'alpha-2': 'UG', 'country-code': '800'},\n {name: 'Ukraine', 'alpha-2': 'UA', 'country-code': '804'},\n {name: 'United Arab Emirates', 'alpha-2': 'AE', 'country-code': '784'},\n {\n name: 'United Kingdom of Great Britain and Northern Ireland',\n 'alpha-2': 'GB',\n 'country-code': '826',\n },\n {name: 'United States of America', 'alpha-2': 'US', 'country-code': '840'},\n {\n name: 'United States Minor Outlying Islands',\n 'alpha-2': 'UM',\n 'country-code': '581',\n },\n {name: 'Uruguay', 'alpha-2': 'UY', 'country-code': '858'},\n {name: 'Uzbekistan', 'alpha-2': 'UZ', 'country-code': '860'},\n {name: 'Vanuatu', 'alpha-2': 'VU', 'country-code': '548'},\n {\n name: 'Venezuela (Bolivarian Republic of)',\n 'alpha-2': 'VE',\n 'country-code': '862',\n },\n {name: 'Viet Nam', 'alpha-2': 'VN', 'country-code': '704'},\n {name: 'Virgin Islands (British)', 'alpha-2': 'VG', 'country-code': '092'},\n {name: 'Virgin Islands (U.S.)', 'alpha-2': 'VI', 'country-code': '850'},\n {name: 'Wallis and Futuna', 'alpha-2': 'WF', 'country-code': '876'},\n {name: 'Western Sahara', 'alpha-2': 'EH', 'country-code': '732'},\n {name: 'Yemen', 'alpha-2': 'YE', 'country-code': '887'},\n {name: 'Zambia', 'alpha-2': 'ZM', 'country-code': '894'},\n {name: 'Zimbabwe', 'alpha-2': 'ZW', 'country-code': '716'},\n];\n","import { useEffect, useState } from 'react';\nimport { Box, FormControl } from '@chakra-ui/react';\nimport { Select as MultiSelect } from 'chakra-react-select';\nimport { useSelector } from 'react-redux';\n\n// Components\nimport { Button, Heading, Input, Checkbox } from '@/components/v4/index';\n\nimport iso3166CountryCodes from '../../../../utils/iso3166CountryCodes';\nimport { chakraSelectDarkMode, defaultChakraSelectStyle } from '@/constants';\nimport walkthroughId from '@/pages/services/walkthroughIds';\n\nexport default function SelectiveSyncForm({\n // Checkbox\n selectedGroupName,\n selectedGroupLocations,\n setSelectedGroupLocations,\n setSelectedGroupName,\n // Fields\n // Other\n serviceWizard,\n isLoading,\n edit,\n}) {\n const [isValid, setIsValid] = useState(false);\n const countryOptions = iso3166CountryCodes.map((country) => ({\n label: country.name,\n value: country['alpha-2'],\n }));\n const { darkMode } = useSelector((state) => state.settings);\n const chakraSelectDark = chakraSelectDarkMode(darkMode);\n const chakraStyles = { ...defaultChakraSelectStyle, ...chakraSelectDark };\n const {\n ufGroupName,\n ufGroupNameInput,\n ufUsageLocation,\n ufUsageLocationTags,\n ufUpdateButton,\n } = walkthroughId.selectiveSync || {};\n\n /**\n * Validate any field that is enabled (checkbox is checked)\n */\n useEffect(() => {\n if (selectedGroupName && selectedGroupLocations) {\n if (\n serviceWizard.filterGroup?.length &&\n serviceWizard.filterLocations?.length\n ) {\n setIsValid(true);\n } else {\n setIsValid(false);\n }\n } else if (selectedGroupName || selectedGroupLocations) {\n if (selectedGroupName) {\n if (serviceWizard.filterGroup?.length) {\n setIsValid(true);\n } else {\n setIsValid(false);\n }\n }\n if (selectedGroupLocations) {\n if (serviceWizard.filterLocations?.length) {\n setIsValid(true);\n } else {\n setIsValid(false);\n }\n }\n }\n }, [\n selectedGroupName,\n selectedGroupLocations,\n serviceWizard.filterGroup,\n serviceWizard.filterLocations,\n ]);\n\n /**\n * Reset the selective sync form whenever the checkboxes are toggled.\n */\n useEffect(() => {\n if (!selectedGroupName && !edit) {\n serviceWizard.setFilterGroup('');\n }\n if (!selectedGroupLocations && !edit) {\n serviceWizard.setFilterLocations(null);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [selectedGroupName, selectedGroupLocations]);\n\n /**\n * Set any edit data.\n */\n useEffect(() => {\n if (serviceWizard.selectiveSyncEditData?.id) {\n if (serviceWizard.selectiveSyncEditData?.filterGroup) {\n setSelectedGroupName(true);\n serviceWizard.setFilterGroup(\n serviceWizard.selectiveSyncEditData?.filterGroup,\n );\n }\n if (\n serviceWizard.selectiveSyncEditData?.filterLocations[0]?.length\n ) {\n let items = [];\n iso3166CountryCodes.filter((item) => {\n const matchFn = (element) => element === item['alpha-2'];\n const match =\n serviceWizard.selectiveSyncEditData?.filterLocations.some(\n matchFn,\n );\n if (match) {\n items.push({\n label: item.name,\n value: item['alpha-2'],\n });\n }\n });\n\n setSelectedGroupLocations(true);\n serviceWizard.setFilterLocations(items);\n }\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [serviceWizard.selectiveSyncEditData]);\n\n return (\n \n \n \n Select Sync Parameters\n \n\n \n\n \n {/* Group Name */}\n \n \n setSelectedGroupName(!selectedGroupName)\n }\n name=\"selectedGroupName\"\n colorScheme=\"whatsapp\">\n Group Name{' '}\n \n \n \n (The name entered below must exactly match the group\n name in Active Directory)\n \n {selectedGroupName && (\n <>\n \n \n serviceWizard.setFilterGroup(\n e.target.value,\n )\n }\n data-walkthroughid={ufGroupNameInput}\n />\n \n \n \n )}\n\n \n\n {/* Usage Locations */}\n \n \n setSelectedGroupLocations(\n !selectedGroupLocations,\n )\n }\n name=\"selectedGroupLocations\"\n colorScheme=\"whatsapp\">\n Usage Locations\n \n \n\n {selectedGroupLocations && (\n <>\n \n {\n serviceWizard.updateLocations(obj);\n }}\n options={countryOptions}\n // value={countryOptions.filter((obj) =>\n // serviceWizard?.filterLocations?.includes(\n // obj.value,\n // ),\n // )}\n />\n \n \n \n )}\n \n\n {(selectedGroupName || selectedGroupLocations) && (\n <>\n \n {edit && //edit mode\n serviceWizard?.company?.selectiveSyncPolicy !==\n 2 && //not required by company\n serviceWizard?.msServiceAuth?.selectiveSync && ( //selective sync been enabled\n \n serviceWizard.onSelectiveSyncDisable()\n }>\n Disable Selective Sync\n \n )}\n \n edit\n ? serviceWizard.onSelectiveSyncEdit()\n : serviceWizard.onSelectiveSync()\n }\n data-walkthroughid={`${ufUpdateButton}/${edit ? 'Update' : 'Next'}`}>\n {edit ? 'Update' : 'Next'}\n \n \n \n )}\n \n \n );\n}\n","import Text from '../../../../../components/v4/Text';\nimport Heading from '../../../../../components/v4/Heading';\nimport {Box} from '@chakra-ui/react';\n\nexport default function ServiceWizardSyncUsersHeader({serviceWizard}) {\n return <>;\n}\n","import Text from '../../../../../components/v4/Text';\nimport Heading from '../../../../../components/v4/Heading';\nimport {Box} from '@chakra-ui/react';\n\nexport default function ServiceWizardSyncUsersHeader({serviceWizard}) {\n return (\n <>\n {/* Enabled selective sync */}\n {serviceWizard.company.selectiveSyncPolicy === 1 && (\n <>\n Selectively Sync Users?\n\n \n\n \n If you choose yes, we will sync a subset of users from\n your tenancy, otherwise we will automatically sync all\n users.\n \n \n )}\n {/* Enabled selective sync */}\n {serviceWizard.company?.selectiveSyncPolicy === 2 && (\n <>\n Selectively Sync Users\n\n \n\n \n Your company is required to sync a subset of users from\n your tenancy.\n \n \n )}\n \n \n \n \n );\n}\n","import Button from '../../../../../components/v4/Button';\nimport {Box} from '@chakra-ui/react';\n\nexport default function ServiceWizardSyncUsersQuestion({\n serviceWizard,\n isLoading,\n setSyncUsers,\n}) {\n return (\n serviceWizard.company.selectiveSyncPolicy ===\n 1 && (\n <>\n \n serviceWizard.onSelectiveSyncDeny()}\n colorScheme=\"gray\"\n sx={{\n background: 'gray.300',\n marginLeft: '20px',\n '&:hover': {\n background: 'gray.300',\n },\n }}\n disabled={isLoading}>\n No\n \n \n \n )\n );\n}\n","import {useState} from 'react';\nimport {Box} from '@chakra-ui/react';\nimport {ArrowBackIcon} from '@chakra-ui/icons';\n\n// Components\nimport Button from '../../../../components/v4/Button';\nimport SelectiveSyncForm from './SelectiveSyncForm';\n\n// Edit\nimport ServiceWizardEditSyncUsersHeader from './Edit/ServiceWizardSyncUsersHeader';\n\n// Create\nimport ServiceWizardCreateSyncUsersHeader from './Create/ServiceWizardSyncUsersHeader';\nimport ServiceWizardCreateSyncUsersQuestion from './Create/ServiceWizardSyncUsersQuestion';\n\nexport default function ServiceWizardSyncUsers({serviceWizard, edit = false}) {\n const [syncUsers, setSyncUsers] = useState(false);\n const [isLoading, setIsLoading] = useState(false);\n\n const [selectedGroupName, setSelectedGroupName] = useState(false);\n const [selectedGroupLocations, setSelectedGroupLocations] = useState(false);\n\n return edit ? (\n \n serviceWizard.reset()}\n sx={{position: 'absolute', top: '6px', right: 0}}>\n \n Back to services\n \n\n {/* Header */}\n \n \n\n {/* Selective Sync Form */}\n \n \n ) : (\n \n serviceWizard.reset()}\n sx={{position: 'absolute', top: '6px', right: 0}}>\n \n Back to services\n \n {/* Header */}\n \n\n {/* Yes no question to selective sync */}\n \n\n {(serviceWizard.company\n .selectiveSyncPolicy == 2 ||\n syncUsers) && (\n \n )}\n \n );\n}\n","export default {\n skeletonCircle: {\n marginLeft: 'auto',\n marginRight: 'auto',\n },\n};\n","export default {\n root: {\n // backgroundColor: '#FFF',\n position: 'relative',\n display: 'flex',\n justifyContent: 'flex-start',\n alignContent: 'flex-start',\n flexDirection: 'column',\n maxWidth: '400px',\n minWidth: '200px',\n boxShadow: 'base',\n paddingLeft: '10px',\n '&:hover': {\n boxShadow: 'md',\n transition: 'all 0.5s',\n },\n },\n contentContainer: {\n display: 'flex',\n flex: 1,\n padding: '15px',\n flexDirection: 'column',\n justifyContent: 'space-between',\n },\n headerContainer: {\n display: 'flex',\n justifyContent: 'left',\n alignItems: 'center',\n height: '40px',\n fontWeight: 'bold',\n padding: '15px',\n },\n actionButton: {\n position: 'absolute',\n top: '0',\n right: '5px',\n boxShadow: 'none',\n border: 'none',\n _focus: {\n boxShadow: 'none',\n },\n _hover: {\n boxShadow: 'none',\n },\n },\n\n header: {\n display: 'flex',\n flexDirection: 'row',\n justifyContent: 'space-between',\n alignContent: 'center',\n },\n verticalBar: {\n width: '10px',\n position: 'absolute',\n left: 0,\n h: '100%',\n },\n verticalBarStatus: {\n 0: {\n background: 'green.500',\n },\n ok: {\n background: 'green.500',\n },\n 1: {\n background: 'yellow.400',\n },\n degraded: {\n background: 'yellow.400',\n },\n 2: {\n background: 'red.500',\n },\n error: {\n background: 'red.500',\n },\n },\n};\n","import React from 'react';\nimport { Box } from '@chakra-ui/react';\nimport style from './styles';\nimport { classNames } from '@/utils/classNames';\nimport { useSelector } from 'react-redux';\n\nexport default function DashboardServiceCard({\n children,\n sx,\n dataWalkthroughId,\n ...props\n}) {\n const { darkMode } = useSelector((state) => state.settings);\n\n return (\n \n {children}\n \n );\n}\n","import { Box, Stack } from '@chakra-ui/react';\nimport Skeleton from '../../Skeleton';\nimport Grid from '../../Grid';\nimport styles from './styles';\nimport DashboardServiceCard from '../DashboardServiceCard/DashboardServiceCard';\nimport { SkeletonCircle } from '@chakra-ui/react';\n\nexport default function DashboardServiceCardPlaceholder({\n skeletons,\n rows,\n columns,\n items,\n ...props\n}) {\n return (\n \n {Array.from(Array(items)).map((v, index) => (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n ))}\n \n );\n}\n","export default {\n DashboardServiceAddServiceCard: {\n // backgroundColor: '#FFF',\n position: 'relative',\n display: 'flex',\n justifyContent: 'center',\n alignContent: 'center',\n flexDirection: 'column',\n maxWidth: '400px',\n minWidth: '200px',\n minHeight: '245px',\n boxShadow: 'base',\n '&:hover': {\n boxShadow: 'md',\n transition: 'all 0.5s',\n cursor: 'pointer',\n },\n },\n DashboardServiceAddServiceCardContent: {\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'space-between',\n alignItems: 'center',\n flex: 1,\n maxHeight: '95px',\n margin: '0 auto',\n },\n DashboardServiceAddServiceCardButton: {},\n DashboardServiceAddServiceCardTitle: {\n fontSize: '2xl',\n fontWeight: '600',\n },\n};\n","import React from 'react';\nimport { Box } from '@chakra-ui/react';\nimport { useSelector } from 'react-redux';\n\nimport { classNames } from 'utils/classNames';\n\nimport styles from './styles';\n\nexport default function DashboardServiceAddServiceCard({\n children,\n dataWalkthroughId,\n ...props\n}) {\n const { darkMode } = useSelector((state) => state.settings);\n\n return (\n \n {children}\n \n );\n}\n","import { useSelector } from 'react-redux';\nimport { AddIcon } from '@chakra-ui/icons';\n\nexport default function DashboardServiceAddServiceCardButton() {\n const { colorScheme } = useSelector((state) => state.settings);\n return ;\n}\n","import React from 'react';\nimport {Box} from '@chakra-ui/react';\nimport styles from './styles';\nimport {PlusSquareIcon} from '@chakra-ui/icons';\nimport Text from '../../Text';\n\nexport default function DashboardServiceAddServiceCardTitle({\n children,\n ...props\n}) {\n return (\n \n {children}\n \n );\n}\n","import React from 'react';\nimport {Box} from '@chakra-ui/react';\nimport styles from './styles';\nimport {PlusSquareIcon} from '@chakra-ui/icons';\n\nexport default function DashboardServiceAddServiceCardContent({\n children,\n ...props\n}) {\n return (\n \n {children}\n \n );\n}\n","export const INVALID_USERNAME_PASSWORD =\n 'Login unsuccessful due to invalid username or password';\nexport const EXPIRED_PASSWORD = 'Login unsuccessful due to expired password';\nexport const DISABLED_DELETE_USER =\n 'Login unsuccessful due to disabled or deleted user';\nexport const CONDITIONAL_ACCESS_REQUIREMENT =\n 'Login unsuccessful due to conditional access requirement';\nexport const MFA_REQUIREMENT = 'Login unsuccessful due to MFA requirement';\nexport const ACCESS_MICROSOFT_FAILED =\n 'Access via Microsoft Graph failed (no roles returned)';\n\nexport const NO_VOICE_POLICIES =\n 'Provisioning DNS (Incomplete: Missing Voice Policies)';\nexport const NO_DIAL_PLANS =\n 'Provisioning DNS (Incomplete: Missing Dial Plans)';\nexport const NO_REGIONS = 'Provisioning DNS (Incomplete: Missing Regions)';\nexport const APP_AUTH_ACCESS_REQUIRED =\n 'Graph API access requested. No credentials to sync with';\nexport const CALLING_DISABLED =\n 'Calling Disabled due to expired Graph API failures. Please Grant Access to restore';\n\nconst ERROR_TOOLTIP = 'Please contact support for assistance.';\n\nexport const statusBaseConfig = {\n menu: {\n EditOnly: {\n showEdit: true,\n grantAccess: false,\n showTenantId: false,\n },\n EditAndAccess: {\n showEdit: true,\n grantAccess: true,\n showTenantId: false,\n },\n },\n actions: {\n GrantAccess: {\n actionIcon: 'Settings',\n actionIconTooltip: 'Grant Access',\n },\n ResetServiceAdmin: {\n actionIcon: 'Settings',\n actionIconTooltip: 'Reset Service Admin',\n },\n SyncSetupGuide: {\n actionIcon: 'ExternalLink',\n actionIconTooltip: 'Sync Setup Guide',\n },\n EditService: {\n actionIcon: 'Edit',\n actionIconTooltip: 'Edit Service',\n },\n None: {\n actionIcon: null,\n actionIconTooltip: null,\n },\n },\n};\n\nexport const APP_AUTH = 'AppAuth';\nexport const OPERATOR_CONNECT = 'OperatorConnect';\nexport const DIRECT_ROUTING = 'DirectRouting';\nexport const statusDisplayExtendMapping = {\n [ACCESS_MICROSOFT_FAILED]: {\n ...statusBaseConfig.actions.GrantAccess,\n ...statusBaseConfig.menu.EditAndAccess,\n },\n [DISABLED_DELETE_USER]: {\n ...statusBaseConfig.actions.ResetServiceAdmin,\n ...statusBaseConfig.menu.EditOnly,\n },\n [INVALID_USERNAME_PASSWORD]: {\n ...statusBaseConfig.actions.ResetServiceAdmin,\n ...statusBaseConfig.menu.EditOnly,\n },\n [MFA_REQUIREMENT]: {\n ...statusBaseConfig.actions.SyncSetupGuide,\n ...statusBaseConfig.menu.EditOnly,\n link: '/Guides/MFA_for_TCAP.pdf',\n },\n [CONDITIONAL_ACCESS_REQUIREMENT]: {\n ...statusBaseConfig.actions.SyncSetupGuide,\n ...statusBaseConfig.menu.EditOnly,\n link: '/Guides/MFA_for_TCAP.pdf',\n },\n [EXPIRED_PASSWORD]: {\n ...statusBaseConfig.actions.ResetServiceAdmin,\n ...statusBaseConfig.menu.EditOnly,\n },\n};\n\nexport const appAuthData = {\n statusId: {\n 0: {\n Healthy: {\n color: 'green',\n animation: false,\n tooltip: null,\n tooltipIcon: null,\n ...statusBaseConfig.actions.None,\n ...statusBaseConfig.menu.EditOnly,\n },\n statusLabels: ['Healthy'],\n },\n 2: {\n 'Access Required': {\n color: 'yellow',\n animation: false,\n tooltip: 'Please Grant Access to the service',\n tooltipIcon: 'Info',\n ...statusBaseConfig.actions.GrantAccess,\n ...statusBaseConfig.menu.EditAndAccess,\n },\n statusLabels: ['Access Required'],\n },\n 4: {\n Initializing: {\n color: 'green',\n animation: true,\n tooltip: 'Confirming Access. Please wait',\n tooltipIcon: 'Spinner',\n ...statusBaseConfig.actions.None,\n ...statusBaseConfig.menu.EditOnly,\n },\n statusLabels: ['Initializing'],\n },\n 5: {\n Reinitializing: {\n color: 'green',\n animation: true,\n tooltip:\n 'Service is currently re-establishing access. Please wait',\n tooltipIcon: 'Spinner',\n ...statusBaseConfig.actions.None,\n ...statusBaseConfig.menu.EditOnly,\n },\n statusLabels: ['Reinitializing'],\n },\n 20: {\n Degraded: {\n color: 'yellow',\n animation: false,\n tooltip: null, // statusDisplayExtended gonna display tooltip\n tooltipIcon: 'Info',\n //statusDisplayExtendMapping -- special case\n },\n Error: {\n color: 'red',\n animation: false,\n tooltip: ERROR_TOOLTIP,\n tooltipIcon: 'Warning',\n ...statusBaseConfig.actions.GrantAccess,\n ...statusBaseConfig.menu.EditAndAccess,\n },\n statusLabels: ['Degraded', 'Error'],\n },\n 21: {\n Degraded: {\n color: 'yellow',\n animation: false,\n tooltip:\n 'Service cannot connect. Please Grant Access. Calling may be disabled if this issue is not resolved',\n tooltipIcon: 'Info',\n ...statusBaseConfig.actions.GrantAccess,\n ...statusBaseConfig.menu.EditAndAccess,\n },\n statusLabels: ['Degraded'],\n },\n '-1': {\n 'Service Account Error': {\n color: 'yellow',\n animation: false,\n tooltip:\n 'Service Account issue detected. This may be impacting some service features. Please refer to the Sync Setup guide to restore access',\n tooltipIcon: 'Info',\n ...statusBaseConfig.actions.SyncSetupGuide,\n ...statusBaseConfig.menu.EditAndAccess,\n link: '/Guides/MFA_for_TCAP.pdf',\n },\n 'Calling Disabled': {\n color: 'yellow',\n animation: false,\n tooltip: CALLING_DISABLED,\n tooltipIcon: 'Info',\n ...statusBaseConfig.actions.GrantAccess,\n ...statusBaseConfig.menu.EditAndAccess,\n },\n // when app auth status is 5 to superseed calling disabled\n Reinitializing: {\n color: 'green',\n animation: true,\n tooltip:\n 'Service is currently re-establishing access. Please wait',\n tooltipIcon: 'Spinner',\n ...statusBaseConfig.actions.None,\n ...statusBaseConfig.menu.EditOnly,\n },\n statusLabels: [\n 'Service Account Error',\n 'Calling Disabled',\n 'Reinitializing',\n ],\n },\n },\n statusIds: [0, 2, 4, 5, 20, 21],\n};\n\nexport const menuAppAuthMapping = {\n NoAppAuth: {\n ...statusBaseConfig.menu.EditAndAccess,\n },\n HasAppAuth: {\n ...statusBaseConfig.menu.EditOnly,\n },\n};\n\nexport const operatorConnectData = {\n statusId: {\n 0: {\n Healthy: {\n color: 'green',\n animation: false,\n tooltip: null,\n tooltipIcon: null,\n ...statusBaseConfig.actions.None,\n // menuAppAuthMapping -- special case\n },\n statusLabels: ['Healthy'],\n },\n 2: {\n 'Access Required': {\n color: 'yellow',\n animation: false,\n tooltip:\n 'Operator Connect is not configured as access has not been provided. Please Grant Access or provide a Tenant ID',\n tooltipIcon: 'Info',\n ...statusBaseConfig.actions.GrantAccess,\n showEdit: true,\n grantAccess: true,\n showTenantId: true,\n },\n statusLabels: ['Access Required'],\n },\n 20: {\n Error: {\n color: 'red',\n animation: false,\n tooltip: ERROR_TOOLTIP,\n tooltipIcon: 'Warning',\n ...statusBaseConfig.actions.GrantAccess,\n ...statusBaseConfig.menu.EditAndAccess,\n },\n statusLabels: ['Error'],\n },\n '-1': {\n 'Calling Disabled': {\n color: 'red',\n animation: false,\n tooltip: CALLING_DISABLED,\n tooltipIcon: 'Warning',\n ...statusBaseConfig.actions.GrantAccess,\n ...statusBaseConfig.menu.EditAndAccess,\n },\n statusLabels: ['Calling Disabled'],\n },\n },\n statusIds: [0, 2, 20],\n};\n\nexport const directRoutingData = {\n statusId: {\n 0: {\n Healthy: {\n color: 'green',\n animation: false,\n tooltip: null,\n tooltipIcon: null,\n ...statusBaseConfig.actions.None,\n ...statusBaseConfig.menu.EditOnly,\n },\n statusLabels: ['Healthy'],\n },\n 2: {\n 'Confirming Access': {\n color: 'green',\n animation: true,\n tooltip: 'Checking initial Graph API access',\n tooltipIcon: 'Spinner',\n ...statusBaseConfig.actions.None,\n ...statusBaseConfig.menu.EditOnly,\n },\n 'Access Required': {\n color: 'yellow',\n animation: false,\n tooltip:\n 'Direct Routing cannot be configured as Sync permissions have not been provided. Please Activate Sync',\n tooltipIcon: 'Info',\n ...statusBaseConfig.actions.GrantAccess,\n ...statusBaseConfig.menu.EditAndAccess,\n },\n 'Approval Required': {\n color: 'yellow',\n animation: false,\n tooltip:\n 'Services will not provision until your company has been approved. Please contact your partner for more information',\n tooltipIcon: 'Info',\n ...statusBaseConfig.actions.None,\n ...statusBaseConfig.menu.EditOnly,\n },\n statusLabels: [\n 'Confirming Access',\n 'Access Required',\n 'Approval Required',\n ],\n },\n 4: {\n Initializing: {\n color: 'green',\n animation: true,\n tooltip: 'Pairing with Teams. Please wait',\n tooltipIcon: 'Spinner',\n ...statusBaseConfig.actions.None,\n ...statusBaseConfig.menu.EditOnly,\n },\n statusLabels: ['Initializing'],\n },\n 10: {\n 'Provisioning DNS': {\n color: 'green',\n animation: true,\n tooltip:\n 'Direct Routing domains are being created and validated. Please wait',\n tooltipIcon: 'Spinner',\n ...statusBaseConfig.actions.None,\n showEdit: false,\n grantAccess: false,\n showTenantId: false,\n },\n 'Region not set': {\n color: 'yellow',\n animation: false,\n tooltip:\n 'Direct Routing requires at least one Region to be assigned to the service. Please edit service to continue',\n tooltipIcon: 'Info',\n ...statusBaseConfig.actions.EditService,\n ...statusBaseConfig.menu.EditOnly,\n },\n statusLabels: ['Provisioning DNS', 'Region not set'],\n },\n 11: {\n 'No Voice Policies': {\n color: 'yellow',\n animation: false,\n tooltip:\n 'Direct Routing requires at least one Voice Policy to be assigned to the service. Please edit service to continue',\n tooltipIcon: 'Info',\n ...statusBaseConfig.actions.EditService,\n ...statusBaseConfig.menu.EditOnly,\n },\n 'No Dial Plans': {\n color: 'yellow',\n animation: false,\n tooltip:\n 'Direct Routing requires at least one Dial Plan to be assigned to the service. Please edit service to continue',\n tooltipIcon: 'Info',\n ...statusBaseConfig.actions.EditService,\n ...statusBaseConfig.menu.EditOnly,\n },\n 'Provisioning SBC': {\n color: 'green',\n animation: true,\n tooltip:\n 'SBC is being provisioned for Direct Routing. Please wait',\n tooltipIcon: 'Spinner',\n ...statusBaseConfig.actions.None,\n showEdit: false,\n grantAccess: false,\n showTenantId: false,\n },\n statusLabels: [\n 'No Voice Policies',\n 'No Dial Plans',\n 'Provisioning SBC',\n ],\n },\n 12: {\n 'No Voice Policies': {\n color: 'yellow',\n animation: false,\n tooltip:\n 'Direct Routing requires at least one Voice Policy to be assigned to the service. Please edit service to continue',\n tooltipIcon: 'Info',\n ...statusBaseConfig.actions.EditService,\n ...statusBaseConfig.menu.EditOnly,\n },\n 'No Dial Plans': {\n color: 'yellow',\n animation: false,\n tooltip:\n 'Direct Routing requires at least one Dial Plan to be assigned to the service. Please edit service to continue',\n tooltipIcon: 'Info',\n ...statusBaseConfig.actions.EditService,\n ...statusBaseConfig.menu.EditOnly,\n },\n 'Activating Teams Phone': {\n color: 'green',\n animation: true,\n tooltip:\n 'Enabling Enterprise Voice on new domains. Please wait',\n tooltipIcon: 'Spinner',\n ...statusBaseConfig.actions.None,\n showEdit: true,\n grantAccess: false,\n showTenantId: false,\n },\n statusLabels: [\n 'No Voice Policies',\n 'No Dial Plans',\n 'Activating Teams Phone',\n ],\n },\n 13: {\n 'No Voice Policies': {\n color: 'yellow',\n animation: false,\n tooltip:\n 'Direct Routing requires at least one Voice Routing Policy to be assigned to the service. Please edit service to continue',\n tooltipIcon: 'Info',\n ...statusBaseConfig.actions.EditService,\n ...statusBaseConfig.menu.EditOnly,\n },\n 'No Dial Plans': {\n color: 'yellow',\n animation: false,\n tooltip:\n 'Direct Routing requires at least one Dial Plan to be assigned to the service. Please edit service to continue',\n tooltipIcon: 'Info',\n ...statusBaseConfig.actions.EditService,\n ...statusBaseConfig.menu.EditOnly,\n },\n 'Provisioning Teams Phone': {\n color: 'green',\n animation: true,\n tooltip: 'Creating Voice Routing Policies and Dial Plans',\n tooltipIcon: 'Spinner',\n ...statusBaseConfig.actions.None,\n showEdit: true,\n grantAccess: false,\n showTenantId: false,\n },\n statusLabels: [\n 'No Voice Policies',\n 'No Dial Plans',\n 'Provisioning Teams Phone',\n ],\n },\n 20: {\n Error: {\n color: 'red',\n animation: false,\n tooltip: ERROR_TOOLTIP,\n tooltipIcon: 'Warning',\n ...statusBaseConfig.actions.GrantAccess,\n ...statusBaseConfig.menu.EditAndAccess,\n },\n statusLabels: ['Error'],\n },\n '-1': {\n 'Calling Disabled': {\n color: 'red',\n animation: false,\n tooltip: CALLING_DISABLED,\n tooltipIcon: 'Warning',\n ...statusBaseConfig.actions.GrantAccess,\n ...statusBaseConfig.menu.EditAndAccess,\n },\n statusLabels: ['Calling Disabled'],\n },\n },\n statusIds: [0, 2, 3, 4, 10, 11, 12, 13, 20],\n};\nexport const initServiceData = {\n services: {\n [APP_AUTH]: appAuthData,\n [OPERATOR_CONNECT]: operatorConnectData,\n [DIRECT_ROUTING]: directRoutingData,\n },\n serviceTypes: [APP_AUTH, OPERATOR_CONNECT, DIRECT_ROUTING],\n};\n\nexport const STATUS_CHANGE = 'STATUS_CHANGE';\nexport const changed_status = 'changed_status';\nexport const loaded_status = 'loaded_status';\n","import {\n APP_AUTH,\n changed_status,\n DIRECT_ROUTING,\n initServiceData,\n loaded_status,\n menuAppAuthMapping,\n OPERATOR_CONNECT,\n statusDisplayExtendMapping,\n} from './constants';\n\n/**\n * @param {Object} state\n * @param {CardStatusType} state.cardStatus\n * @param {{type: string; payload: {[k: string]: any; statusDisplay: {statusDisplayLevel: number}}}} action\n * */\n\nfunction getStatusLabel(\n statusOptions,\n status,\n statusDisplay,\n serviceType,\n isCallingDisabled,\n isServiceAccountError,\n appAuthService,\n) {\n const statusDisplayLevel = statusDisplay?.statusDisplayLevel;\n const statusDisplayDetail = statusDisplay?.statusDisplayDetail;\n\n const lastModifiedTS = appAuthService?.lastModifiedTS;\n // Has is been less than 5 mins since creating the auth?\n let isAuthlessThanFive = false;\n if (new Date() - new Date(lastModifiedTS + 'Z') < 5 * 60 * 1000) {\n isAuthlessThanFive = true;\n }\n\n if (!statusOptions) {\n return null;\n }\n\n if (serviceType === APP_AUTH && status === 5) {\n return 'Reinitializing';\n }\n\n if (isCallingDisabled) {\n return 'Calling Disabled';\n }\n\n if (serviceType === APP_AUTH) {\n if (isServiceAccountError && !isCallingDisabled) {\n return 'Service Account Error';\n }\n if (status === 20 || status === 21) {\n return statusDisplayLevel === 2 ? 'Error' : 'Degraded';\n }\n }\n\n if (serviceType === DIRECT_ROUTING) {\n if (status === 2) {\n if (appAuthService?.graphAuth) {\n if (!appAuthService?.company?.approved) {\n return 'Approval Required';\n } else {\n if (isAuthlessThanFive) {\n return 'Confirming Access';\n } else {\n return 'Access Required';\n }\n }\n } else {\n return 'Access Required';\n }\n }\n\n if (status === 4) {\n return 'Initializing';\n }\n\n if (status === 10) {\n if (statusDisplayDetail?.includes('Missing Regions')) {\n return 'Region not set';\n }\n return 'Provisioning DNS';\n }\n\n if (status === 11 || status === 12 || status === 13) {\n if (statusDisplayDetail?.includes('Missing Voice Policies')) {\n return 'No Voice Policies';\n } else if (statusDisplayDetail?.includes('Missing Dial Plans')) {\n return 'No Dial Plans';\n } else if (status === 11) {\n return 'Provisioning SBC';\n } else if (status === 12) {\n return 'Activating Teams Phone';\n }\n return 'Provisioning Teams Phone';\n }\n }\n\n return statusOptions.statusLabels[0];\n}\n\nfunction getStatus(\n statusOptions,\n status,\n statusDisplay,\n statusLabel,\n serviceType,\n appAuthService,\n service,\n) {\n if (!statusOptions) {\n return null;\n }\n\n if (\n serviceType === APP_AUTH &&\n appAuthService?.serviceAccountMessage &&\n !appAuthService?.linkedServicesDisabled\n ) {\n return {\n statusLabel: 'Service Account Error',\n ...initServiceData.services[APP_AUTH]['statusId']['-1'][\n 'Service Account Error'\n ],\n };\n }\n\n if (\n serviceType === APP_AUTH &&\n status === 20 &&\n statusLabel === 'Degraded'\n ) {\n return {\n statusLabel: 'Degraded',\n ...statusOptions['Degraded'],\n ...statusDisplayExtendMapping[statusDisplay?.statusDisplayExtended],\n };\n }\n\n if (\n serviceType === APP_AUTH &&\n !appAuthService?.userSync &&\n appAuthService?.tenantID\n ) {\n if (\n service[OPERATOR_CONNECT] &&\n Object.keys(service[DIRECT_ROUTING]).length === 0\n ) {\n return {\n statusLabel: 'Healthy',\n ...initServiceData.services[APP_AUTH]['statusId'][0]['Healthy'],\n };\n }\n }\n\n if (\n serviceType === OPERATOR_CONNECT &&\n status === 0 &&\n statusLabel === 'Healthy'\n ) {\n return {\n statusLabel: 'Healthy',\n ...statusOptions['Healthy'],\n ...menuAppAuthMapping[appAuthService ? 'HasAppAuth' : 'NoAppAuth'],\n };\n }\n\n return {\n statusLabel,\n ...statusOptions[statusLabel],\n };\n}\n\nexport const statusReducer = (state, action) => {\n const { serviceType } = action.payload;\n switch (action.type) {\n case `${serviceType}/${loaded_status}`: {\n const { service } = action.payload;\n if (!service) return state;\n const { status, statusDisplay } = service;\n const serviceStatuses = initServiceData.services[serviceType];\n const isCallingDisabled =\n state.service[APP_AUTH]?.linkedServicesDisabled;\n const isServiceAccountError =\n state.service[APP_AUTH]?.serviceAccountMessage;\n\n const serviceStatus = isCallingDisabled ? -1 : status;\n const statusOptions = serviceStatuses['statusId'][serviceStatus];\n\n const appAuthService = state.service[APP_AUTH];\n\n const statusLabel = getStatusLabel(\n statusOptions,\n status,\n statusDisplay,\n serviceType,\n isCallingDisabled,\n isServiceAccountError,\n appAuthService,\n );\n const cardStatus = getStatus(\n statusOptions,\n status,\n statusDisplay,\n statusLabel,\n serviceType,\n appAuthService,\n state?.service,\n );\n\n return {\n ...state,\n [serviceType]: {\n ...state[serviceType],\n status,\n statusDisplay,\n ...cardStatus,\n },\n service: {\n ...state.service,\n [serviceType]: service,\n },\n };\n }\n\n case changed_status: {\n return {};\n }\n default:\n throw new Error('Unknown action: ', +action.type);\n }\n};\n","import { createContext, useReducer } from 'react';\n\nimport {\n APP_AUTH,\n DIRECT_ROUTING,\n OPERATOR_CONNECT,\n} from 'pages/services/new/ServiceDashboard/Services/constants';\nimport { statusReducer } from 'pages/services/new/ServiceDashboard/Services/statusReducer';\n\nconst initialState = {\n [APP_AUTH]: {\n color: 'gray',\n animation: false,\n },\n [OPERATOR_CONNECT]: {\n color: 'gray',\n animation: false,\n },\n [DIRECT_ROUTING]: {\n color: 'gray',\n animation: false,\n },\n service: {\n [APP_AUTH]: {},\n [OPERATOR_CONNECT]: {},\n [DIRECT_ROUTING]: {},\n },\n};\nconst ServicesDashboardContext = createContext(initialState);\nconst ServicesDashboardDispatchContext = createContext(() => ({}));\nServicesDashboardContext.displayName = 'ServicesDashboardContext';\n\nexport const ServicesDashboardProvider = (props) => {\n const [serviceStatus, dispatch] = useReducer(statusReducer, initialState);\n\n return (\n \n \n {props.children}\n \n \n );\n};\n\nexport { ServicesDashboardContext, ServicesDashboardDispatchContext };\n","import { useContext, useDebugValue } from 'react';\n\nimport {\n ServicesDashboardContext,\n ServicesDashboardDispatchContext,\n} from './ServicesDashboardContext';\n\nexport const useServicesDashboard = () => {\n const context = useContext(ServicesDashboardContext);\n useDebugValue(context, 'ServicesDashboardContext');\n if (context === undefined) {\n throw new Error(\n 'useServicesDashboard must be used within a ServicesDashboardProvider',\n );\n }\n\n return context;\n};\n\nexport const useServicesDashboardDispatch = () => {\n const context = useContext(ServicesDashboardDispatchContext);\n useDebugValue(context, 'ServicesDashboardDispatchContext');\n if (context === undefined) {\n throw new Error(\n 'useServicesDashboardDispatch must be used within a ServicesDashboardDispatchProvider',\n );\n }\n\n return context;\n};\n","import {\n EditIcon,\n ExternalLinkIcon,\n InfoOutlineIcon,\n SettingsIcon,\n SpinnerIcon,\n UnlockIcon,\n WarningTwoIcon,\n} from '@chakra-ui/icons';\n\nconst iconMap = {\n Edit: EditIcon,\n ExternalLink: ExternalLinkIcon,\n Info: InfoOutlineIcon,\n Settings: SettingsIcon,\n Spinner: SpinnerIcon,\n Unlock: UnlockIcon,\n Warning: WarningTwoIcon,\n};\n\nexport const IconComponent = ({ icon, ...props }) => {\n const Icon = iconMap[icon];\n return Icon ? : null;\n};\n","import { useSelector } from 'react-redux';\nimport { Box, IconButton, Tooltip } from '@chakra-ui/react';\n\nimport { useServicesDashboard } from 'context/ServicesDashboardContext';\n\nimport Text from 'components/v4/Text';\nimport { IconComponent } from '../IconComponent';\n\nexport default function OperatorConnectStatus({ serviceObj, handleActions }) {\n const { darkMode } = useSelector((state) => state.settings);\n const { OperatorConnect: cardStatus } = useServicesDashboard();\n const { handleGrantAccess } = handleActions;\n const handleClick =\n cardStatus?.actionIconTooltip === 'Grant Access'\n ? handleGrantAccess\n : null;\n\n if (!serviceObj) return ...;\n\n if (cardStatus?.tooltipIcon) {\n return (\n \n {cardStatus.statusLabel}\n\n \n \n \n }\n size=\"xs\"\n bg=\"transparent\"\n _hover={{ bg: 'transparent' }}\n />\n \n \n\n {cardStatus?.actionIcon && serviceObj?.authPolicy !== 0 && (\n \n \n \n }\n size=\"xs\"\n onClick={handleClick}\n bg=\"transparent\"\n _hover={{ bg: 'transparent' }}\n />\n \n \n )}\n \n );\n }\n\n return {cardStatus?.statusLabel};\n}\n","import React from 'react';\nimport {Box} from '@chakra-ui/react';\nimport style from './styles';\n\nexport default function DashboardServiceCardContent({children}) {\n return {children};\n}\n","import React from 'react';\nimport {Box} from '@chakra-ui/react';\nimport style from './styles';\n\nexport default function DashboardServiceCardHeader({children, ...props}) {\n return (\n \n {children}\n \n );\n}\n","import React from 'react';\nimport { Menu, MenuButton, IconButton } from '@chakra-ui/react';\nimport { useSelector } from 'react-redux';\n\nimport MoreHorizRoundedIcon from '@mui/icons-material/MoreHorizRounded';\nimport { MenuList } from '@/components/v4';\nimport style from './styles';\n\nfunction DashboardServiceCardHeaderActionButton({\n children,\n dataWalkthroughId,\n id,\n}) {\n const { darkMode } = useSelector((state) => state.settings);\n const textColor = darkMode ? 'white' : 'black';\n const { actionButton } = style;\n\n const hasChildren =\n children &&\n React.Children.toArray(children).some((child) => {\n return React.isValidElement(child);\n });\n\n return hasChildren ? (\n \n ) : null;\n}\n\nexport default DashboardServiceCardHeaderActionButton;\n","import styles from './styles';\nimport { Progress } from '@chakra-ui/react';\n\nexport default function DashboardServiceCardStatusbar({ ...props }) {\n const { color, animation } = props.cardStatus || {\n color: 'gray',\n animation: false,\n };\n return (\n \n );\n}\n","import { useState, useEffect } from 'react';\n\nexport default function ServiceDashboardItemSyncUsers({ data }) {\n const [syncStatus, setSyncStatus] = useState('...');\n\n useEffect(() => {\n if (syncStatus === '...') {\n setSyncStatus(data?.userSync ? 'Enabled' : 'Off');\n } else if (syncStatus !== data?.userSync) {\n setSyncStatus(data?.userSync ? 'Enabled' : 'Off');\n }\n }, [data?.userSync]);\n\n return syncStatus;\n}\n","import { useQueryClient } from '@tanstack/react-query';\nimport { useState } from 'react';\nimport { useSelector } from 'react-redux';\nimport { FormControl } from '@chakra-ui/react';\nimport Modal from '../../Modal';\nimport ModalOverlay from '../../ModalOverlay';\nimport ModalHeader from '../../ModalHeader';\nimport ModalCloseButton from '../../ModalCloseButton';\nimport ModalBody from '../../ModalBody';\nimport ModalContent from '../../ModalContent';\nimport ModalFooter from '../../ModalFooter';\nimport Button from '../../Button';\nimport Input from '../../Input';\nimport FormLabel from '../../FormLabel';\nimport Alert from '../../Alert';\nimport AlertIcon from '../../AlertIcon';\nimport { axios } from '../../../../services/axios';\n\n//APIs\nimport createMicrosoftAppAuth from '../../../../API/AppAuth/createMicrosoftAppAuth';\n\nexport default function ServiceDashboardTenantId({ ...props }) {\n const [isLoading, setIsLoading] = useState(false);\n const [error, setError] = useState(null);\n const [success, setSuccess] = useState(null);\n const [tenantId, setTenantId] = useState('');\n const [domain, setDomain] = useState('');\n const currentCompany = useSelector(\n (state) => state.navigationLists.currentCompany,\n );\n\n const { requiredScope: accountScope } = useSelector((state) => state.login);\n const queryClient = useQueryClient();\n\n async function onTenantIdSubmit() {\n setIsLoading(true);\n await createMicrosoftAppAuth(\n {\n companyId: currentCompany,\n tenantId,\n },\n accountScope,\n )\n .then((response) => {\n if (response.status !== 200) {\n return setError(response.response.data.message);\n }\n setSuccess('Succesfully submited Tenant ID.');\n props.setMsServiceAuth(response.data);\n queryClient.invalidateQueries([\n 'services',\n `company: ${currentCompany}`,\n ]);\n })\n .catch((error) => {\n setError(error.response.data.message);\n })\n .finally(() => setIsLoading(false));\n }\n\n function reset() {\n props.onClose();\n setError(null);\n setSuccess(null);\n }\n\n function onDomainLookup() {\n setIsLoading(true);\n setError(null);\n setSuccess(null);\n axios(\n `https://login.microsoftonline.com/${domain}/.well-known/openid-configuration`,\n )\n .then((response) => {\n const id = response.data.authorization_endpoint\n .replace('https://login.microsoftonline.com/', '')\n .replace('/oauth2/authorize', '');\n setTenantId(id);\n })\n .catch((error) => {\n if (error.response.data.error === 'invalid_tenant') {\n setError(\n `Tenant '${domain}' not found. Check to make sure you have the correct tenant ID and are signing into the correct cloud. Check with your subscription administrator, this may happen if there are no active subscriptions for the tenant.`,\n );\n }\n })\n .finally(() => {\n setIsLoading(false);\n });\n }\n\n return (\n \n \n \n Submit Tenant ID\n \n \n \n Lookup Domain\n setDomain(e.target.value)} />\n \n \n Lookup\n \n\n \n Tenant ID\n setTenantId(e.target.value)}\n />\n \n {error && (\n \n \n {error}\n \n )}\n {success && (\n \n \n {success}\n \n )}\n \n\n \n \n Submit\n \n \n Close\n \n \n \n \n );\n}\n","export const statusDisplayLevel = {\n Ok: 0,\n Warning: 1,\n Alert: 2,\n Ok_Animate: 10,\n Warning_Animate: 11,\n Alert_Animate: 12,\n Unknown: -1,\n};\n\nexport const ACTIONS = {\n GET_SERVICE_ACTIONS: 'GET_SERVICE_ACTIONS',\n UPDATE_SERVICE_ACTIONS: 'UPDATE_SERVICE_ACTIONS',\n UPDATE_SERVICE: 'UPDATE_SERVICE',\n CHANGE_SERVICE_STATUS: 'CHANGE_SERVICE_STATUS',\n};\n","import { statusDisplayLevel } from './constant';\n\nexport const useStatus = (statusDisplay) => {\n const {\n statusDisplayLevel: displayLevel = -1,\n statusDisplayDetail: status,\n } = statusDisplay;\n\n const getStatus = (() => {\n switch (displayLevel) {\n case statusDisplayLevel.Ok:\n return {\n color: 'green',\n isAnimated: false,\n hasStripes: false,\n status,\n };\n\n case statusDisplayLevel.Warning:\n return {\n color: 'yellow',\n isAnimated: false,\n hasStripes: false,\n status,\n };\n\n case statusDisplayLevel.Alert:\n return {\n color: 'red',\n isAnimated: false,\n hasStripes: false,\n status,\n };\n\n case statusDisplayLevel.Ok_Animate:\n return {\n color: 'green',\n isAnimated: true,\n hasStripes: true,\n status,\n };\n\n case statusDisplayLevel.Warning_Animate:\n return {\n color: 'yellow',\n isAnimated: true,\n hasStripes: true,\n status,\n };\n\n case statusDisplayLevel.Alert_Animate:\n return {\n color: 'red',\n isAnimated: true,\n hasStripes: true,\n status,\n };\n\n default:\n return {\n color: 'gray',\n isAnimated: false,\n hasStripes: false,\n status,\n };\n }\n })();\n\n return getStatus;\n};\n\nexport const isTruncated = (text) => {\n return text?.length > 20;\n};\n\nexport const getTruncatedText = (text) => {\n if (isTruncated(text)) {\n return text;\n } else {\n return '';\n }\n};\n","import { Box, IconButton, Tooltip } from '@chakra-ui/react';\nimport { useSelector } from 'react-redux';\nimport { Link } from 'react-router-dom';\n\nimport { useServicesDashboard } from 'context/ServicesDashboardContext';\nimport { classNames } from 'utils/classNames';\nimport { getTruncatedText, isTruncated } from '../Vendor/helper';\n\nimport Text from 'components/v4/Text';\nimport { IconComponent } from '../IconComponent';\n\nexport default function DirectRoutingCustomStatus({\n serviceObj,\n accountScope,\n handleActions,\n}) {\n const { DirectRouting: cardStatus } = useServicesDashboard();\n const { handleGrantAccess } = handleActions;\n const DrEdit = `/services/directrouting/${serviceObj?.id}/edit`;\n const canEdit = accountScope >= 40 && cardStatus?.showEdit;\n const canGrantAccess =\n cardStatus?.grantAccess && serviceObj?.authPolicy !== 0;\n\n const handleClick =\n cardStatus?.actionIconTooltip === 'Grant Access'\n ? handleGrantAccess\n : null;\n\n const { darkMode } = useSelector((state) => state.settings);\n\n if (!serviceObj) return ...;\n\n if (cardStatus?.tooltipIcon) {\n return (\n \n \n \n {cardStatus?.statusLabel}\n \n \n\n \n \n \n }\n size=\"xs\"\n bg=\"transparent\"\n _hover={{ bg: 'transparent' }}\n _focus={{ bg: 'transparent' }}\n _active={{ bg: 'transparent' }}\n className=\"!cursor-default\"\n />\n \n \n {cardStatus?.actionIcon === 'Settings' && canGrantAccess && (\n \n \n \n }\n size=\"xs\"\n bg=\"transparent\"\n _hover={{\n bg: 'transparent',\n }}\n _focus={{\n bg: 'transparent',\n }}\n _active={{ bg: 'transparent' }}\n onClick={handleClick}\n />\n \n \n )}\n {cardStatus?.actionIcon === 'Edit' && canEdit && (\n \n \n \n \n }\n size=\"xs\"\n bg=\"transparent\"\n _hover={{\n bg: 'transparent',\n }}\n _focus={{\n bg: 'transparent',\n }}\n _active={{ bg: 'transparent' }}\n />\n \n \n \n )}\n \n );\n }\n\n return {cardStatus?.statusLabel};\n}\n","export default \"__VITE_ASSET__62222e20__\"","import { useQuery } from '@tanstack/react-query';\nimport { useSelector } from 'react-redux';\n\nimport { useServicesDashboardDispatch } from 'context/ServicesDashboardContext';\nimport getService from 'API/Service/getService';\nimport { initServiceData } from 'pages/services/new/ServiceDashboard/Services/constants';\n\nfunction useServiceDashboard({ serviceType, serviceId, enabled }) {\n const { currentCompany: companyId } = useSelector(\n (state) => state.navigationLists,\n );\n const dispatch = useServicesDashboardDispatch();\n\n return useQuery({\n queryKey: [\n `Service: ${serviceType}, ServiceID: ${serviceId}, CompanyID: ${companyId}`,\n ],\n queryFn: async () => {\n try {\n const res = await getService(serviceId);\n return res.data;\n } catch (error) {\n throw new Error(error);\n }\n },\n onSuccess: (data) => {\n if (initServiceData.serviceTypes.includes(serviceType)) {\n dispatch({\n type: `${serviceType}/loaded_status`,\n payload: {\n serviceType,\n service: data,\n },\n });\n }\n },\n enabled,\n retry: 3,\n });\n}\n\nexport { useServiceDashboard };\n","import { useState, useEffect } from 'react';\nimport { Link } from 'react-router-dom';\nimport { useSelector } from 'react-redux';\n\nimport classNames from 'classnames';\nimport { Box, useDisclosure } from '@chakra-ui/react';\nimport { EditIcon } from '@chakra-ui/icons';\n\n// DR Card\nimport DashboardServiceCard from 'components/v4/Cards/DashboardServiceCard/DashboardServiceCard';\nimport DashboardServiceCardContent from 'components/v4/Cards/DashboardServiceCard/DashboardServiceCardContent';\nimport DashboardServiceCardHeader from 'components/v4/Cards/DashboardServiceCard/DashboardServiceCardHeader';\nimport DashboardServiceCardHeaderActionButton from 'components/v4/Cards/DashboardServiceCard/DashboardServiceCardHeaderActionButton';\nimport DirectRoutingStatus from './DirectRoutingStatus';\n\n// Components\nimport Text from 'components/v4/Text';\nimport Image from 'components/v4/Image';\nimport ServiceDashboardItemSyncUsers from 'components/v4/Services/ServiceDashboard/ServiceDashboardItemSyncUsers';\nimport ServiceDashboardTenantId from 'components/v4/Services/ServiceDashboard/ServiceDashboardTenantId';\nimport { MenuItem } from 'components/v4';\nimport { IconComponent } from '../IconComponent';\n\n// Util\nimport { dateStringToDate } from 'utils/utils';\n\n// Assets\nimport sbcLogo from 'assets/images/sbcaas.png';\nimport msTeamsLogo from 'assets/images/ms_teams_logo.png';\n\nimport path from '@/routes/constants';\n\nimport { useServicesDashboard } from 'context/ServicesDashboardContext';\nimport { DIRECT_ROUTING } from '../constants';\nimport { useServiceDashboard } from 'hooks/useCustomQuery/useServiceDashboard';\nimport DashboardServiceCardStatusbar from 'components/v4/Cards/DashboardServiceCard/DashboardServiceCardStatusbar';\n\nexport function ServiceDashboardItemLastHealthCheck({ data }) {\n if (!data.lastProcessed)\n return (\n \n \n {data.lastProcessed && 'Last Health Check'}\n \n \n {'Last Health Check,Last Health Check,Last Health Check'}\n \n \n );\n\n return (\n \n \n {data.lastProcessed && 'Last Health Check'}\n \n {data.lastProcessed ?? ''}\n \n );\n}\n\nexport default function DirectRoutingCard({\n service,\n serviceWizard,\n companyAppAuth,\n}) {\n const modalState = useDisclosure();\n const accountScope = useSelector((state) => state.login.requiredScope);\n const { darkMode } = useSelector((state) => state.settings);\n\n const [data, setData] = useState(service);\n const [authData, setAuthData] = useState(null);\n\n const [currentCompanyAppAuth, setCurrentCompanyAppAuth] = useState(null);\n\n const serviceStatus = useServicesDashboard();\n const cardStatus = serviceStatus[DIRECT_ROUTING];\n\n const [actionPermissions, setActionPermissions] = useState({\n menuEditServiceScope: 40,\n });\n\n const {\n data: serviceObj,\n isRefetching,\n isFetching,\n refetch,\n } = useServiceDashboard({\n serviceId: service.id,\n serviceType: DIRECT_ROUTING,\n enabled: !!service.id,\n });\n\n const handleGrantAccess = async () => {\n if (serviceObj?.company?.selectiveSyncPolicy === 2) {\n if (serviceWizard.msServiceAuth?.id) {\n await serviceWizard.microsoftAuth();\n } else {\n serviceWizard.drFlow();\n }\n } else if (\n serviceObj?.company?.selectiveSyncPolicy === 1 ||\n serviceObj?.company?.selectiveSyncPolicy === 0\n ) {\n await serviceWizard.microsoftAuth();\n }\n };\n\n useEffect(() => {\n if (companyAppAuth && currentCompanyAppAuth?.id !== companyAppAuth.id) {\n //set MS Service Auth & Service Data.\n setData({\n ...serviceWizard.msServiceAuth,\n ...service,\n hasAppAuthData: true,\n lastProcessed:\n serviceWizard.msServiceAuth?.lastProcessedTS &&\n dateStringToDate(\n serviceWizard.msServiceAuth?.lastProcessedTS,\n 'datetime',\n ),\n });\n setAuthData(serviceWizard.msServiceAuth);\n setCurrentCompanyAppAuth(companyAppAuth);\n }\n }, [companyAppAuth, service, serviceWizard.msServiceAuth]);\n\n useEffect(() => {\n if (!(isFetching || isRefetching)) {\n refetch();\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n useEffect(() => {\n if (serviceObj) {\n // Provide Access\n if (\n (serviceObj?.status === 2 && currentCompanyAppAuth === null) ||\n (serviceObj?.status === 2 &&\n (data.userSync === false || data.graphAuth === false)) ||\n currentCompanyAppAuth?.status === 20\n ) {\n setActionPermissions((p) => ({\n ...p,\n ...{\n menuProvideAccessScope: 20,\n },\n }));\n } else {\n setActionPermissions((p) => {\n if (\n Object.prototype.hasOwnProperty.call(\n p,\n 'menuProvideAccessScope',\n )\n ) {\n delete p.menuProvideAccessScope;\n return p;\n }\n return p;\n });\n }\n }\n }, [currentCompanyAppAuth, companyAppAuth, serviceObj, service]);\n\n const classes = classNames({\n flash: service.changes === 'added',\n });\n\n return (\n <>\n \n \n \n \n \n {data.name}\n \n \n {/* Edit service */}\n {accountScope >=\n actionPermissions?.menuEditServiceScope &&\n cardStatus?.showEdit && (\n \n }\n data-walkthroughid={`/dashboard-services/card/${service.name}/edit-service`}>\n \n Edit Service\n \n \n \n )}\n\n {/* Provide Access */}\n {cardStatus?.grantAccess &&\n serviceObj?.authPolicy !== 0 && (\n \n }\n onClick={handleGrantAccess}\n data-walkthroughid={`/dashboard-services/card/${service.name}/provide-access`}>\n Grant Access\n \n )}\n \n \n \n \n \n\n \n {/* Status */}\n \n \n Status\n \n \n \n\n {/* Sync */}\n \n \n Sync\n \n \n \n \n \n\n {/* Last Health Check */}\n \n \n \n \n \n \n );\n}\n","import { Icon } from '@chakra-ui/react';\nexport const TenantIcon = (props) => (\n \n \n \n \n \n \n);\n","import { useState, useEffect } from 'react';\nimport { Link } from 'react-router-dom';\nimport { useSelector } from 'react-redux';\n\nimport classNames from 'classnames';\nimport { Box, useDisclosure } from '@chakra-ui/react';\n\n// OC Card\nimport OperatorConnectStatus from './OperatorConnectStatus';\nimport DashboardServiceCard from 'components/v4/Cards/DashboardServiceCard/DashboardServiceCard';\nimport DashboardServiceCardContent from 'components/v4/Cards/DashboardServiceCard/DashboardServiceCardContent';\nimport DashboardServiceCardHeader from 'components/v4/Cards/DashboardServiceCard/DashboardServiceCardHeader';\nimport DashboardServiceCardHeaderActionButton from 'components/v4/Cards/DashboardServiceCard/DashboardServiceCardHeaderActionButton';\nimport DashboardServiceCardStatusbar from 'components/v4/Cards/DashboardServiceCard/DashboardServiceCardStatusbar';\n\n// Components\nimport Text from 'components/v4/Text';\nimport Image from 'components/v4/Image';\nimport { MenuItem } from 'components/v4';\nimport ServiceDashboardItemSyncUsers from 'components/v4/Services/ServiceDashboard/ServiceDashboardItemSyncUsers';\nimport ServiceDashboardTenantId from 'components/v4/Services/ServiceDashboard/ServiceDashboardTenantId';\nimport { ServiceDashboardItemLastHealthCheck } from '../DirectRouting';\nimport { IconComponent } from '../IconComponent';\n// Util\nimport { dateStringToDate } from 'utils/utils';\n\n// Assets\nimport sbcLogo from 'assets/images/sbcaas.png';\nimport msTeamsLogo from 'assets/images/ms_teams_logo.png';\nimport path from '@/routes/constants';\n\nimport { useServicesDashboard } from 'context/ServicesDashboardContext';\nimport { OPERATOR_CONNECT } from '../constants';\nimport { useServiceDashboard } from 'hooks/useCustomQuery/useServiceDashboard';\nimport { TenantIcon } from './TenantIcon';\n\nexport default function OperatorConnectCard({\n service,\n companyAppAuth,\n serviceWizard,\n}) {\n const accountScope = useSelector((state) => state.login.requiredScope);\n const [data, setData] = useState(service);\n const [authData, setAuthData] = useState(null);\n const modalState = useDisclosure();\n const [currentCompanyAppAuth, setCurrentCompanyAppAuth] = useState(null);\n const [actionPermissions, setActionPermissions] = useState({\n menuEditServiceScope: 40,\n });\n const serviceStatus = useServicesDashboard();\n const cardStatus = serviceStatus[OPERATOR_CONNECT];\n const { darkMode } = useSelector((state) => state.settings);\n\n const {\n data: serviceObj,\n isRefetching,\n isFetching,\n refetch,\n } = useServiceDashboard({\n serviceId: service.id,\n serviceType: OPERATOR_CONNECT,\n enabled: !!service.id,\n });\n\n const handleGrantAccess = async () => {\n if (serviceObj?.company?.selectiveSyncPolicy === 2) {\n if (serviceWizard.msServiceAuth?.id) {\n await serviceWizard.microsoftAuth();\n } else {\n serviceWizard.ocFlow();\n }\n } else if (\n serviceObj?.company?.selectiveSyncPolicy === 1 ||\n serviceObj?.company?.selectiveSyncPolicy === 0\n ) {\n await serviceWizard.microsoftAuth();\n }\n };\n\n useEffect(() => {\n if (!(isFetching || isRefetching)) {\n refetch();\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n useEffect(() => {\n if (service) serviceWizard.setSelectedServiceProfile(service);\n }, [service]);\n\n useEffect(() => {\n if (companyAppAuth) {\n //set MS Service Auth & Service Data.\n setAuthData(serviceWizard.msServiceAuth);\n setData({\n ...serviceWizard.msServiceAuth,\n ...service,\n hasAppAuthData: true,\n lastProcessed:\n serviceWizard.msServiceAuth?.lastProcessedTS &&\n dateStringToDate(\n serviceWizard.msServiceAuth?.lastProcessedTS,\n 'datetime',\n ),\n });\n setCurrentCompanyAppAuth(companyAppAuth);\n }\n }, [companyAppAuth, service, serviceWizard.msServiceAuth]);\n\n useEffect(() => {\n if (serviceObj) {\n // Tenant ID\n if (\n !serviceWizard?.msServiceAuth?.tenantID &&\n serviceObj?.status === 2 &&\n (serviceObj?.authPolicy === 0 || serviceObj?.authPolicy === 1)\n ) {\n if (serviceObj?.company?.selectiveSyncPolicy !== 2) {\n setActionPermissions((p) => ({\n ...p,\n ...{\n menuTenantIdScope: 20,\n },\n }));\n }\n } else {\n setActionPermissions((p) => {\n if (\n Object.prototype.hasOwnProperty.call(\n p,\n 'menuTenantIdScope',\n )\n ) {\n delete p.menuTenantIdScope;\n return p;\n }\n return p;\n });\n }\n\n // Provide Access\n if (serviceObj?.authPolicy !== 0) {\n if (\n (serviceObj?.status === 2 &&\n currentCompanyAppAuth === null) ||\n (serviceObj?.status === 2 &&\n (data.userSync === false ||\n data.graphAuth === false)) ||\n currentCompanyAppAuth?.status === 20\n ) {\n setActionPermissions((p) => ({\n ...p,\n ...{\n menuProvideAccessScope: 20,\n },\n }));\n }\n } else {\n setActionPermissions((p) => {\n if (\n Object.prototype.hasOwnProperty.call(\n p,\n 'menuProvideAccessScope',\n )\n ) {\n delete p.menuProvideAccessScope;\n return p;\n }\n return p;\n });\n }\n\n //TODO: Enable User Sync After Manual App Auth\n\n if (serviceObj?.authPolicy !== 0) {\n if (\n serviceWizard?.msServiceAuth?.tenantID &&\n data.graphAuth === false && //have tenant id & no graph auth\n data.userSync === false // hide if userSync is enabled\n ) {\n setActionPermissions((p) => ({\n ...p,\n ...{\n menuEnableSyncScope: 20,\n },\n }));\n }\n } else {\n setActionPermissions((p) => {\n if (\n Object.prototype.hasOwnProperty.call(\n p,\n 'menuEnableSyncScope',\n )\n ) {\n delete p.menuEnableSyncScope;\n return p;\n }\n return p;\n });\n }\n }\n }, [currentCompanyAppAuth, companyAppAuth, serviceObj, service, data]);\n\n const classes = classNames({\n flash: service.changes === 'added',\n });\n\n return (\n <>\n \n \n \n \n \n {data.name}\n \n \n {/* Edit Service */}\n {cardStatus?.showEdit &&\n accountScope >=\n actionPermissions.menuEditServiceScope && (\n \n \n }\n data-walkthroughid={`/dashboard-services/card/${service.name}/edit-service`}>\n \n Edit Service\n \n \n \n )}\n\n {/* Tenant ID */}\n {cardStatus?.showTenantId &&\n serviceObj?.authPolicy !== 2 && (\n \n }\n onClick={() => {\n modalState.onOpen();\n }}\n data-walkthroughid={`/dashboard-services/card/${service.name}/tenant-id`}>\n Tenant ID\n \n )}\n\n {/* Provide Access */}\n {cardStatus?.grantAccess &&\n serviceObj?.authPolicy !== 0 && (\n \n }\n onClick={handleGrantAccess}\n data-walkthroughid={`/dashboard-services/card/${service.name}/provide-access`}>\n Grant Access\n \n )}\n \n \n \n \n \n\n \n {/* Status */}\n \n \n Status\n \n \n \n\n {/* Sync Time */}\n \n \n Sync\n \n \n \n \n \n\n {/* Last Health Check */}\n \n \n \n \n \n \n );\n}\n","export default function trunkStatusCodeToText(code) {\n switch (code) {\n case 0:\n return 'OK';\n case 1:\n return 'Adding';\n case 3:\n return 'Pending Approval';\n case 4:\n return 'Updating';\n case 8:\n return 'Degraded';\n case 9:\n return 'Deleting';\n case 20:\n return 'Error';\n }\n}\n","import React from 'react';\nimport styles from './styles';\nimport {Progress} from '@chakra-ui/react';\n\nconst sbcStates = {\n 0: 'green', // OK\n 1: 'green', // Adding\n 3: 'green', // Pending Approval\n 4: 'green', // Updating\n 8: 'yellow', // Degraded\n 9: 'green', // Deleting\n 20: 'red', // Error\n};\n\nconst sbcWorkingStates = {\n 0: false,\n 1: true,\n 3: false, // Unused now\n 4: true,\n 8: false,\n 9: true,\n 20: false,\n};\n\nexport default function DashboardServiceCardSbcStatusbar({\n children,\n status,\n ...props\n}) {\n\n return (\n \n );\n}\n","import { axios } from '../../services/axios';\n\nexport default async function getTrunks(companyId) {\n return await axios\n .get(`/Trunks/${companyId}`, {\n headers: {\n 'Cache-Control': 'no-cache',\n 'Pragma': 'no-cache',\n 'Expires': '0',\n },\n })\n .then((res) => res)\n .catch((e) => e);\n}\n","/* eslint-disable no-unused-vars */\nimport { useState, useEffect, memo } from 'react';\n\nimport { useNavigate, Link } from 'react-router-dom';\nimport { useDispatch, useSelector } from 'react-redux';\n\nimport classNames from 'classnames';\nimport { Box } from '@chakra-ui/react';\nimport { EditIcon, AddIcon, ViewIcon } from '@chakra-ui/icons';\n\n// Utils\nimport trunkStatusCodeToText from 'utils/trunkStatusCodeToText';\n\n//Components\nimport DashboardServiceCard from 'components/v4/Cards/DashboardServiceCard/DashboardServiceCard';\nimport DashboardServiceCardSbcStatusbar from 'components/v4/Cards/DashboardServiceCard/DashboardServiceCardSbcStatusbar';\nimport DashboardServiceCardContent from 'components/v4/Cards/DashboardServiceCard/DashboardServiceCardContent';\nimport DashboardServiceCardHeader from 'components/v4/Cards/DashboardServiceCard/DashboardServiceCardHeader';\nimport DashboardServiceCardHeaderActionButton from 'components/v4/Cards/DashboardServiceCard/DashboardServiceCardHeaderActionButton';\nimport Text from 'components/v4/Text';\nimport Image from 'components/v4/Image';\nimport { MenuItem } from 'components/v4';\n\n//APIs\nimport { useQuery } from '@tanstack/react-query';\nimport getTrunks from 'API/Trunk/getTrunks';\n\n// Assets\nimport sbcLogo from 'assets/images/SbcaasLogo.png';\nimport { useDashboardMenu } from 'context/DashboardMenuContext';\nexport const QUERY_CACHE_TIME = 1; // cache time set to 1 ms. (converted to milliseconds)\nexport const REFETCH_INTERVAL = 15 * 1000; // refetch interval set to 15 secs. (converted to milliseconds)\n\nexport default function SBCaaSCard({ service }) {\n const navigate = useNavigate();\n const dispatch = useDispatch();\n const { isQueryDisabled } = useDashboardMenu();\n const currentCompany = useSelector(\n (state) => state.navigationLists.currentCompany,\n );\n const accountScope = useSelector((state) => state.login.requiredScope);\n const [data, setData] = useState(service);\n const { data: trunkData } = useQuery(\n ['getTrunks'],\n () => getTrunks(currentCompany),\n {\n cacheTime: QUERY_CACHE_TIME,\n refetchInterval: REFETCH_INTERVAL,\n enabled: !isQueryDisabled,\n },\n );\n\n const [actionPermissions, setActionPermissions] = useState({\n menuEditServiceScope: 40,\n });\n const [cardStatus, setCardStatus] = useState({\n sipCount: '...',\n channelCount: '...',\n status: '...',\n statusCode: null,\n });\n\n const classes = classNames({\n flash: service.changes === 'added',\n });\n\n function calculateSbcStatus(trunkData) {\n let sipCount = 0;\n let channelCount = 0;\n let status = '';\n let statusCode = null;\n\n trunkData?.data?.map((trunk) => {\n // Count the SIP trunks\n if (trunk.trunkType.sipEnabled) {\n sipCount++;\n }\n\n // Count the channels\n channelCount += trunk.channels;\n });\n\n // Find the worst status\n const isOk = trunkData.data\n .map((trunk) => {\n if (trunk.status >= 0 && trunk.status <= 4) {\n return trunk.status;\n }\n })\n .filter((n) => !Number(n) && typeof n !== 'undefined');\n\n const isWarning = trunkData.data\n .map((trunk) => {\n if (trunk.status === 8 || trunk.status === 9) {\n return trunk.status;\n }\n })\n .filter((n) => !Number(n) && typeof n !== 'undefined');\n const isError = trunkData.data\n .map((trunk) => {\n if (trunk.status === 20) {\n return trunk.status;\n }\n })\n .filter((n) => !Number(n) && typeof n !== 'undefined');\n\n if (isError.length) {\n statusCode = Math.max(...isError);\n status = trunkStatusCodeToText(statusCode);\n } else if (isWarning.length) {\n statusCode = Math.max(...isWarning);\n status = trunkStatusCodeToText(statusCode);\n } else if (isOk.length) {\n statusCode = Math.max(...isOk);\n status = trunkStatusCodeToText(statusCode);\n }\n\n setCardStatus({\n sipCount,\n channelCount,\n status,\n statusCode,\n });\n }\n\n useEffect(() => {\n if (trunkData) {\n setTimeout(() => {\n calculateSbcStatus(trunkData);\n }, 500);\n }\n }, [trunkData]);\n\n const addTrunks = () => {\n // get parent menu item Accounts\n let tel = document.querySelector('.Telephony');\n // if only 1 then the menu item is closed\n if (tel.children.length == 1) {\n var divElement = tel.querySelector('div');\n // create on click event\n const clickEvent = new MouseEvent('click', {\n bubbles: true,\n cancelable: true,\n view: window,\n });\n divElement.dispatchEvent(clickEvent);\n }\n\n // redirect is to select the sub menu item\n // scope 20 to focus on currently managing company\n dispatch({\n type: 'REDIRECT',\n payload: {\n pathname: '/telephony/trunks',\n scope: 20,\n },\n });\n navigate('/trunks/add');\n };\n\n const viewTrunks = () => {\n // get parent menu item Accounts\n let tel = document.querySelector('.Telephony');\n // if only 1 then the menu item is closed\n if (tel.children.length == 1) {\n var divElement = tel.querySelector('div');\n // create on click event\n const clickEvent = new MouseEvent('click', {\n bubbles: true,\n cancelable: true,\n view: window,\n });\n divElement.dispatchEvent(clickEvent);\n }\n\n // redirect is to select the sub menu item\n // scope 20 to focus on currently managing company\n dispatch({\n type: 'REDIRECT',\n payload: {\n pathname: '/telephony/trunks',\n scope: 20,\n },\n });\n navigate('/trunks');\n };\n\n return (\n \n \n \n \n {data.name}\n \n \n }\n onClick={addTrunks}\n data-walkthroughid={`/dashboard-service/card/${service.name}/add-trunk`}>\n Add Trunk\n \n } onClick={viewTrunks}>\n View Trunks\n \n {accountScope >= actionPermissions.menuEditServiceScope && (\n \n }\n data-walkthroughid={`/dashboard-service/card/${service.name}/edit-trunk`}>\n Edit Service\n \n \n )}\n \n \n \n \n \n\n \n {/* Trunk Health*/}\n \n \n Status\n \n \n {cardStatus.status === 'OK' ||\n service?.statusDisplay?.statusDisplayDetail ===\n 'Ok'\n ? 'Healthy'\n : cardStatus.status}\n \n \n\n {/* SIP Trunks */}\n \n \n SIP Trunks\n \n \n {cardStatus.sipCount}\n \n \n\n {/* Channels */}\n \n \n Channels\n \n \n {cardStatus.channelCount}\n \n \n \n \n \n \n );\n}\n","import React from 'react';\nimport styles from './styles';\nimport {Progress} from '@chakra-ui/react';\n\nexport default function DashboardServiceCardOcStatus({\n children,\n status,\n ...props\n}) {\n return (\n \n );\n}\n","/* eslint-disable no-unused-vars */\nimport { useState, useEffect } from 'react';\nimport { useNavigate, Link } from 'react-router-dom';\nimport { useSelector, useDispatch } from 'react-redux';\nimport { Box, Icon } from '@chakra-ui/react';\nimport { EditIcon } from '@chakra-ui/icons';\nimport classNames from 'classnames';\n\nimport DashboardServiceCardContent from 'components/v4/Cards/DashboardServiceCard/DashboardServiceCardContent';\nimport DashboardServiceCard from 'components/v4/Cards/DashboardServiceCard/DashboardServiceCard';\nimport DashboardServiceCardOcStatusbar from 'components/v4/Cards/DashboardServiceCard/DashboardServiceCardOcStatusbar';\nimport DashboardServiceCardHeader from 'components/v4/Cards/DashboardServiceCard/DashboardServiceCardHeader';\nimport DashboardServiceCardHeaderActionButton from 'components/v4/Cards/DashboardServiceCard/DashboardServiceCardHeaderActionButton';\nimport Text from 'components/v4/Text';\nimport Image from 'components/v4/Image';\nimport { MenuItem } from 'components/v4';\n\n// Assets\nimport occLogo from 'assets/images/occ.png';\n\nimport walkthroughIds from 'pages/services/walkthroughIds';\nimport path from '@/routes/constants';\n\nexport default function OCCCard({ service }) {\n const classes = classNames({\n flash: service.changes === 'added',\n });\n\n const navigate = useNavigate();\n const [cardStatus, setCardStatus] = useState({\n color: 'green',\n isAnimated: false,\n hasStripes: false,\n status: '...',\n to: null,\n toText: null,\n });\n const { requiredScope } = useSelector((state) => state.login);\n\n const [data, setData] = useState({});\n const { ufTpmEditServiceButton, ufTpmVerifyServiceButton } =\n walkthroughIds.dashboardServices;\n const handleGetData = () => {\n // getService(service?.id)\n // .then((res) => {\n // setData(res.data);\n // })\n // .catch((e) => {\n // console.log('error get acs', {e});\n // });\n };\n useEffect(() => {\n // setCardStatus({\n // color: 'green',\n // isAnimated: false,\n // hasStripes: false,\n // status: 'OK',\n // });\n }, []);\n\n useEffect(() => {\n handleGetData();\n }, [service?.changes]);\n\n return (\n \n \n\n \n \n Operator Connect Conferencing\n \n\n {/* \n {requiredScope >= 40 && (\n \n }\n // onClick={() => {\n // navigate(\n // `/operator-connect-conferencing/edit/${service.id}`,\n // { state: service },\n // );\n // }}\n data-walkthroughid={ufTpmEditServiceButton}>\n Edit Service\n \n \n )}\n }\n onClick={() => {\n navigate(\n `/teams-phone-mobile/activation/${service.id}`,\n );\n }}\n data-walkthroughid={ufTpmVerifyServiceButton}>\n Verify Numbers\n \n */}\n \n \n \n \n\n \n {/* Status */}\n \n Status\n \n {service?.statusDisplay?.statusDisplayDetail}\n \n \n\n {/* Available Numbers // TODO: change with real data later */}\n \n \n Available Numbers\n \n 12\n \n\n {/* Active Numbers */}\n \n Active Numbers\n 0\n \n \n \n \n \n );\n}\n","import { Box, IconButton, Tooltip } from '@chakra-ui/react';\nimport { useSelector } from 'react-redux';\n\nimport Text from 'components/v4/Text';\nimport { IconComponent } from '../IconComponent';\nconst CALLING_DISABLED = 'Calling Disabled';\n\nexport default function TpmStatus({ isTrialExpired, cardStatus }) {\n const { darkMode } = useSelector((state) => state.settings);\n\n if (cardStatus?.tooltipIcon || isTrialExpired) {\n return (\n \n \n {isTrialExpired ? CALLING_DISABLED : cardStatus.statusLabel}\n \n\n \n \n \n }\n size=\"xs\"\n bg=\"transparent\"\n _hover={{ bg: 'transparent' }}\n />\n \n \n \n );\n }\n\n return {cardStatus?.statusLabel};\n}\n","import {\n Box,\n Text,\n Tooltip,\n IconButton,\n Link as ChakraLink,\n} from '@chakra-ui/react';\nimport { Link, useLocation } from 'react-router-dom';\nimport { MdDialpad } from 'react-icons/md';\n\nconst ManageNumbers = ({\n cardStatus,\n isTrialExpired,\n darkMode,\n numbersPath,\n tpmId,\n}) => {\n const { pathname } = useLocation();\n return cardStatus?.statusLabel === 'Healthy' && !isTrialExpired ? (\n \n \n Manage Numbers\n \n\n \n \n \n \n }\n size=\"xs\"\n bg=\"transparent\"\n _hover={{ bg: 'transparent' }}\n _active={{ bg: 'transparent' }}\n _focus={{ bg: 'transparent' }}\n onClick={() => {}}\n />\n \n \n \n \n ) : (\n \n );\n};\n\nexport default ManageNumbers;\n","import { EditIcon } from '@chakra-ui/icons';\nimport { Box, Icon, useBoolean } from '@chakra-ui/react';\nimport classNames from 'classnames';\nimport { useEffect, useState } from 'react';\nimport { MdPhonelinkRing, MdDialpad } from 'react-icons/md';\nimport { useSelector } from 'react-redux';\nimport { useNavigate } from 'react-router-dom';\n\nimport { MenuItem, Text } from 'components/v4';\nimport DashboardServiceCard from 'components/v4/Cards/DashboardServiceCard/DashboardServiceCard';\nimport DashboardServiceCardContent from 'components/v4/Cards/DashboardServiceCard/DashboardServiceCardContent';\nimport DashboardServiceCardHeader from 'components/v4/Cards/DashboardServiceCard/DashboardServiceCardHeader';\nimport DashboardServiceCardHeaderActionButton from 'components/v4/Cards/DashboardServiceCard/DashboardServiceCardHeaderActionButton';\nimport DashboardServiceCardStatusbar from 'components/v4/Cards/DashboardServiceCard/DashboardServiceCardStatusbar';\nimport { ServiceDashboardItemLastHealthCheck } from '../DirectRouting';\n\nimport { useServicesDashboard } from 'context/ServicesDashboardContext';\n\n// Util\nimport { dateStringToDate } from 'utils/utils';\n\nimport { useServiceDashboard } from 'hooks/useCustomQuery/useServiceDashboard';\nimport { useNavigateLocation } from 'hooks/useNavigateLocation/useNavigateLocation';\n\nimport path from '@/routes/constants';\nimport walkthroughIds from 'pages/services/walkthroughIds';\nimport { OPERATOR_CONNECT } from '../constants';\nimport TpmStatus from './TpmStatus';\nimport ManageNumbers from './ManageNumbers';\n\nexport default function TPMDashboard({\n service,\n ocService,\n serviceWizard,\n companyData,\n}) {\n const classes = classNames({\n flash: service.changes === 'added',\n });\n\n const isTrialExpired =\n companyData?.isTrial && Date.parse(companyData?.trialEnd) < Date.now();\n\n const tpmPath = `${path.NUMBERS_TPM}`;\n const navigate = useNavigate();\n const { handleNavigateLocation: navigateLocation } = useNavigateLocation();\n\n const serviceStatus = useServicesDashboard();\n const cardStatus = serviceStatus[OPERATOR_CONNECT];\n\n const [data, setData] = useState(service);\n const [hover, setHover] = useBoolean();\n const { requiredScope } = useSelector((state) => state.login);\n const { darkMode } = useSelector((state) => state.settings);\n\n const { ufTpmEditServiceButton, ufTpmManageAccountButton } =\n walkthroughIds.dashboardServices;\n\n const { data: serviceObj } = useServiceDashboard({\n serviceId: ocService.id,\n serviceType: OPERATOR_CONNECT,\n enabled: !!ocService.id,\n });\n\n const companyAppAuth = serviceWizard?.companyAppAuth.find((appAuth) =>\n ocService.appAuthType?.includes(appAuth.appAuthTypeID),\n );\n\n useEffect(() => {\n if (companyAppAuth) {\n //set MS Service Auth & Service Data.\n setData({\n ...serviceWizard.msServiceAuth,\n ...serviceObj,\n hasAppAuthData: true,\n lastProcessed:\n serviceWizard.msServiceAuth?.lastProcessedTS &&\n dateStringToDate(\n serviceWizard.msServiceAuth?.lastProcessedTS,\n 'datetime',\n ),\n });\n }\n }, [companyAppAuth, service, serviceObj, serviceWizard.msServiceAuth]);\n\n useEffect(() => {\n const alert = document.querySelector('.chakra-alert');\n\n if (!alert || !hover || !isTrialExpired) return;\n\n const classList = [\n 'animate-pulse-slow',\n darkMode\n ? '!bg-[var(--chakra-colors-blue-900)]'\n : '!bg-[var(--chakra-colors-blue-200)]',\n ];\n alert.classList.add(...classList);\n\n return () => alert.classList.remove(...classList);\n }, [hover, isTrialExpired, darkMode]);\n\n return (\n \n \n\n \n \n Teams Phone Mobile\n \n\n \n {requiredScope >= 40 && (\n }\n onClick={() => {\n navigate(`/services/tpm/${service.id}/edit`);\n }}\n data-walkthroughid={ufTpmEditServiceButton}>\n Edit Service\n \n )}\n }\n onClick={() => {\n navigateLocation(\n `/${tpmPath}/${service.id}/activation`,\n );\n }}\n onPointerEnter={setHover.on}\n onPointerLeave={setHover.off}\n isDisabled={isTrialExpired}\n data-walkthroughid={ufTpmManageAccountButton}>\n Number Management\n \n \n \n \n \n {/* // TODO: change this with TPM logo later */}\n \n \n \n\n \n {/* Status */}\n \n Status\n \n \n\n {/* Manage Numbers */}\n \n\n {/* Last Health Check */}\n \n \n \n \n \n );\n}\n","import { useState, useEffect } from 'react';\nimport { Link } from 'react-router-dom';\nimport { Box } from '@chakra-ui/react';\nimport { EditIcon } from '@chakra-ui/icons';\nimport classNames from 'classnames';\n\nimport DashboardServiceCardContent from 'components/v4/Cards/DashboardServiceCard/DashboardServiceCardContent';\nimport DashboardServiceCard from 'components/v4/Cards/DashboardServiceCard/DashboardServiceCard';\nimport DashboardServiceCardOcStatusbar from 'components/v4/Cards/DashboardServiceCard/DashboardServiceCardOcStatusbar';\nimport DashboardServiceCardHeader from 'components/v4/Cards/DashboardServiceCard/DashboardServiceCardHeader';\nimport DashboardServiceCardHeaderActionButton from 'components/v4/Cards/DashboardServiceCard/DashboardServiceCardHeaderActionButton';\nimport Text from 'components/v4/Text';\nimport Image from 'components/v4/Image';\n\n// Assets\nimport AzureLogo from 'assets/images/Azure.png';\nimport getService from 'API/Service/getService';\n\nimport { MenuItem } from 'components/v4';\n\nexport default function ACSDashboard({ service }) {\n const classes = classNames({\n flash: service.changes === 'added',\n });\n\n // const navigate = useNavigate();\n const [cardStatus, setCardStatus] = useState({\n color: 'gray',\n isAnimated: false,\n hasStripes: false,\n status: '...',\n to: null,\n toText: null,\n });\n const [data, setData] = useState({});\n const handleGetData = () => {\n getService(service?.id)\n .then((res) => {\n setData(res.data);\n })\n .catch((e) => {\n console.log('error get acs', { e });\n });\n };\n useEffect(() => {\n setCardStatus({\n color: 'green',\n isAnimated: false,\n hasStripes: false,\n status: 'Healthy',\n });\n }, []);\n\n useEffect(() => {\n handleGetData();\n }, [service?.changes]);\n\n return (\n \n \n\n \n \n {service.name}\n \n \n \n }\n // onClick={() => {\n // navigate(`/editacsservice?id=${service.id}`);\n // }}\n >\n Edit Service\n \n \n \n \n \n \n \n\n \n {/* Status */}\n \n \n Status\n \n {cardStatus.status}\n \n\n {/* Sync Time */}\n \n \n Max Channel\n \n \n {' '}\n {data?.maxChannel}\n \n \n \n \n \n \n );\n}\n","import { Link } from 'react-router-dom';\nimport { useSelector } from 'react-redux';\nimport { Box, IconButton, Link as ChakraLink, Tooltip } from '@chakra-ui/react';\n\nimport { useServicesDashboard } from 'context/ServicesDashboardContext';\nimport { classNames } from 'utils/classNames';\nimport { getTruncatedText, isTruncated } from '../Vendor/helper';\n\nimport Text from 'components/v4/Text';\nimport { IconComponent } from '../IconComponent';\n\nexport default function AppAuthStatus({ serviceObj, handleActions }) {\n const { AppAuth: cardStatus } = useServicesDashboard();\n const { handleResetServiceAdmin, handleGrantAccess } = handleActions;\n\n const handleClick =\n cardStatus?.actionIconTooltip === 'Reset Service Admin'\n ? handleResetServiceAdmin\n : cardStatus?.actionIconTooltip === 'Grant Access'\n ? handleGrantAccess\n : null;\n\n const { darkMode } = useSelector((state) => state.settings);\n\n if (!serviceObj) return ...;\n if (cardStatus?.tooltipIcon) {\n return (\n \n \n \n {cardStatus?.statusLabel}\n \n \n\n \n \n \n }\n size=\"xs\"\n bg=\"transparent\"\n _hover={{ bg: 'transparent' }}\n />\n \n \n\n {cardStatus?.actionIcon === 'Settings' && (\n \n \n \n }\n size=\"xs\"\n bg=\"transparent\"\n _hover={{\n bg: 'transparent',\n }}\n _focus={{\n bg: 'transparent',\n }}\n _active={{ bg: 'transparent' }}\n onClick={handleClick}\n />\n \n \n )}\n {cardStatus?.actionIcon === 'ExternalLink' && (\n \n \n \n \n }\n size=\"xs\"\n bg=\"transparent\"\n _hover={{ bg: 'transparent' }}\n _active={{ bg: 'transparent' }}\n _focus={{ bg: 'transparent' }}\n onClick={handleClick}\n />\n \n \n \n )}\n \n );\n }\n\n return {cardStatus?.statusLabel};\n}\n","import { axios } from '../../services/axios';\n\nexport default async function postOverrideLimit(serviceId) {\n return axios\n .post(`/AppAuth/Microsoft/${serviceId}/OverrideLimit`, null)\n .then((res) => res)\n .catch((e) => e);\n}\n","export default \"__VITE_ASSET__672a6f2e__\"","import { axios } from '../../services/axios';\n\nexport default async function postTCAPUserReset(serviceId) {\n return axios\n .post(`/AppAuth/Microsoft/${serviceId}/RequestTCAPUserReset`, null)\n .then((res) => res)\n .catch((e) => e);\n}\n","import { Spinner, ModalCloseButton } from '@chakra-ui/react';\n\nimport {\n Modal,\n ModalContent,\n ModalHeader,\n ModalBody,\n ModalFooter,\n ModalOverlay,\n} from '@/components/v4';\n\nconst walkthroughIdModal = {\n ufCancelButton: '/dashboard-services/modal/override-limit/cancel',\n ufOverrideButton: '/dashboard-services/modal/override-limit/override',\n};\n\nfunction OverrideLimitModal({ isOpen, onClose, handleSubmit, status }) {\n return (\n \n \n \n Override Delete Limit\n \n \n \n Are you sure you would like to override delete limit?{' '}\n
\n \n This will allow the next sync process to remove more\n than 50% of the current users\n
\n \n \n \n Cancel\n \n \n {status === 'loading' ? (\n \n ) : (\n 'Override'\n )}\n \n \n \n \n );\n}\n\nexport default OverrideLimitModal;\n","import { useState, useEffect } from 'react';\nimport { useSelector } from 'react-redux';\n\nimport classNames from 'classnames';\nimport { Box, useDisclosure, useToast } from '@chakra-ui/react';\nimport { Link } from 'react-router-dom';\nimport { DeleteIcon } from '@chakra-ui/icons';\n\n// DR Card\nimport DashboardServiceCard from 'components/v4/Cards/DashboardServiceCard/DashboardServiceCard';\nimport DashboardServiceCardContent from 'components/v4/Cards/DashboardServiceCard/DashboardServiceCardContent';\nimport DashboardServiceCardHeader from 'components/v4/Cards/DashboardServiceCard/DashboardServiceCardHeader';\nimport DashboardServiceCardHeaderActionButton from 'components/v4/Cards/DashboardServiceCard/DashboardServiceCardHeaderActionButton';\nimport DashboardServiceCardStatusbar from 'components/v4/Cards/DashboardServiceCard/DashboardServiceCardStatusbar';\nimport AppAuthStatus from './AppAuthStatus';\n\n// Components\nimport Text from 'components/v4/Text';\nimport Image from 'components/v4/Image';\nimport ServiceDashboardItemSyncUsers from 'components/v4/Services/ServiceDashboard/ServiceDashboardItemSyncUsers';\nimport ServiceDashboardTenantId from 'components/v4/Services/ServiceDashboard/ServiceDashboardTenantId';\nimport { MenuItem } from 'components/v4';\n\n// Util\nimport { dateStringToDate } from 'utils/utils';\n\n// API\nimport postOverrideLimit from 'API/Service/postOverrideLimit';\n\n// Assets\nimport MsAppAuthLogo from 'assets/images/Graph_API_logo.png';\nimport postTCAPUserReset from 'API/Service/postTCAPUserReset';\n\nimport OverrideLimitModal from 'components/modal/OverrideLimitModal';\nimport path from '@/routes/constants';\nimport { useServicesDashboard } from 'context/ServicesDashboardContext';\nimport { APP_AUTH, loaded_status } from '../constants';\nimport { useServicesDashboardDispatch } from 'context/ServicesDashboardContext';\nimport { IconComponent } from '../IconComponent';\n\nconst walkthroughIdPrefix = '/dashboard-services/card';\n\nexport function ServiceDashboardItemLastHealthCheck({ data }) {\n if (!data.lastProcessed)\n return (\n \n \n {data.lastProcessed && 'Last Health Check'}\n \n \n {'Last Health Check,Last Health Check,Last Health Check'}\n \n \n );\n\n return (\n \n \n {data.lastProcessed && 'Last Health Check'}\n \n {data.lastProcessed ?? ''}\n \n );\n}\n\nexport default function AppAuthCard({\n service,\n serviceWizard,\n companyAppAuth,\n companyData,\n}) {\n const modalState = useDisclosure();\n const accountScope = useSelector((state) => state.login.requiredScope);\n const toast = useToast();\n const { isOpen, onOpen, onClose } = useDisclosure();\n\n const [status, setStatus] = useState('idle');\n const [data, setData] = useState(service);\n\n const [serviceObj, setServiceObj] = useState(null);\n const { darkMode } = useSelector((state) => state.settings);\n\n const serviceStatus = useServicesDashboard();\n const cardStatus = serviceStatus[APP_AUTH];\n const dispatch = useServicesDashboardDispatch();\n\n const handleGrantAccess = async () => await serviceWizard.microsoftAuth();\n\n const isMigrateToNewSync =\n !serviceObj?.msGraphAppInstanceID && // no appauth instance id\n serviceObj?.lastAccessSuccess && // has login before\n serviceObj?.statusDisplay?.statusDisplayLevel === 0; // is healthy status\n\n useEffect(() => {\n if (companyAppAuth) {\n //set MS Service Auth & Service Data.\n setData({\n ...serviceWizard.msServiceAuth,\n ...service,\n hasAppAuthData: true,\n lastProcessed:\n serviceWizard.msServiceAuth?.lastProcessedTS &&\n dateStringToDate(\n serviceWizard.msServiceAuth?.lastProcessedTS,\n 'datetime',\n ),\n });\n }\n if (service.id) {\n setServiceObj({ ...service, company: companyData });\n }\n }, [companyAppAuth, service, serviceWizard.msServiceAuth, companyData]);\n\n useEffect(() => {\n if (serviceObj) {\n const newServiceObj = {\n ...serviceObj,\n };\n dispatch({\n type: `${APP_AUTH}/${loaded_status}`,\n payload: {\n serviceType: APP_AUTH,\n service: newServiceObj,\n },\n });\n }\n }, [serviceObj, dispatch]);\n\n const classes = classNames({\n flash: service.changes === 'added',\n });\n\n useEffect(() => {\n if (!isOpen) {\n setStatus('idle');\n }\n }, [isOpen]);\n\n const handlePostOverrideLimit = async () => {\n setStatus('loading');\n const res = await postOverrideLimit(data.id);\n if (res.status === 200) {\n setStatus('success');\n toast({\n title: 'Override Limit',\n description:\n 'Override limit has been submitted for processing.',\n status: 'success',\n duration: 5000,\n isClosable: true,\n });\n onClose();\n } else {\n setStatus('error');\n toast({\n title: 'Override Limit',\n description:\n 'Unable to Process Request. One or more validation errors occurred.',\n status: 'error',\n duration: 5000,\n isClosable: true,\n });\n }\n };\n\n const handleResetServiceAdmin = async () => {\n const res = await postTCAPUserReset(data.id);\n if (res.status === 200) {\n toast({\n title: 'Reset Service Admin',\n description: 'Reset Service Admin has been submitted.',\n status: 'success',\n duration: 5000,\n isClosable: true,\n });\n } else {\n toast({\n title: 'Reset Service Admin',\n description:\n 'Unable to Process Request. One or more validation errors occurred.',\n status: 'error',\n duration: 5000,\n isClosable: true,\n });\n }\n };\n\n // submit Override Limit modal\n const handleSubmit = (e) => {\n e.preventDefault();\n handlePostOverrideLimit();\n };\n\n return (\n <>\n \n \n \n \n \n Microsoft Graph API\n \n {/* MENU ITEMS */}\n \n {/* Edit service */}\n \n \n }\n data-walkthroughid={`${walkthroughIdPrefix}/${service.serviceType}/edit-appAuth`}>\n Edit AppAuth\n \n \n\n {/* Override Delete Limit */}\n {accountScope >= 80 && (\n \n }\n onClick={onOpen}\n data-walkthroughid={`${walkthroughIdPrefix}/${service.serviceType}/override-deleteLimit`}>\n \n Override Delete Limit\n \n \n )}\n\n {/* Migration to New Sync */}\n {!serviceObj?.graphAuth || cardStatus?.grantAccess ? (\n \n }\n onClick={handleGrantAccess}\n data-walkthroughid={`${walkthroughIdPrefix}/${service.serviceType}/provide-access`}>\n Grant Access\n \n ) : (\n isMigrateToNewSync && (\n \n }\n onClick={handleGrantAccess}\n data-walkthroughid={`${walkthroughIdPrefix}/${service.serviceType}/provide-access`}>\n \n Migrate to New Sync\n \n \n )\n )}\n \n \n \n \n \n\n \n {/* Status */}\n \n \n Status\n \n \n \n\n {/* Sync */}\n \n \n Sync\n \n \n {/* TODO: APPAUTH change this when backend is ready */}\n \n \n \n\n {/* Last Health Check */}\n \n \n \n \n \n {/* Override Delete Limit Modal */}\n \n \n );\n}\n","export const root = {\n '--card-bg': '#FFFFFF',\n '--chakra-colors-body-text': 'var(--chakra-colors-gray-800)',\n '--card-radius': 'var(--chakra-radii-md)',\n '--card-padding': 'var(--chakra-space-5)',\n '--card-shadow': 'var(--chakra-shadows-base)',\n display: 'flex',\n background: 'var(--card-bg)',\n position: 'relative',\n borderRadius: 'var(--card-radius)',\n boxShadow: 'var(--card-shadow)',\n};\n\nexport const base = {\n '--card-bg': '#FFFFFF',\n fontFamily: 'var(--chakra-fonts-body)',\n marginTop: 'var(--chakra-space-5)',\n padding: 'var(--chakra-space-3)',\n background: 'var(--card-bg)',\n borderWidth: '1px',\n borderRadius: '12px',\n color: 'var(--chakra-colors-gray-700)',\n lineHeight: 'var(--chakra-lineHeights-base)',\n overflowX: 'auto',\n};\n\nexport const header = {\n padding: 'var(--card-padding)',\n};\n\nexport const body = {\n padding: 'var(--card-padding)',\n flex: '1 1 0%',\n};\n\nexport const footer = {\n padding: 'var(--card-padding)',\n};\n","import {\n createContext as createReactContext,\n useContext as useReactContext,\n} from 'react';\n\nimport { root } from './constant';\n\nfunction getErrorMessage(hook, provider) {\n return `${hook} returned \\`undefined\\`. Seems you forgot to wrap the components in ${provider}\" `;\n}\n\nexport function createContext(options) {\n const {\n name,\n strict = true,\n hookName = 'useContext',\n providerName = 'Provider',\n errorMessage,\n } = options;\n\n const defaultValue = {\n styles: {\n root,\n footer: {\n padding: 8,\n },\n },\n };\n const Context = createReactContext(defaultValue);\n Context.displayName = name;\n\n function useContext() {\n const context = useReactContext(Context);\n\n if (!context && strict) {\n const error = new Error(\n errorMessage ?? getErrorMessage(hookName, providerName),\n );\n error.name = 'ContextError';\n Error.captureStackTrace?.(error, useContext);\n throw error;\n }\n\n return context;\n }\n\n return [Context.Provider, useContext, Context];\n}\n\nconst [StylesProvider, useStyles] = createContext({\n name: 'StylesContext',\n errorMessage:\n 'useStyles: `styles` is undefined. Seems you forgot to wrap the components in `` ',\n});\n\nexport { StylesProvider, useStyles };\n\n/**\n * Helper function that creates context with a standardized errorMessage related to the component\n * @param {string} componentName\n * @typedef {import('react').Context>} CreateStyleContextReturn\n * @returns {CreateStyleContextReturn} [StylesProvider, useStyles] */\nexport function createStylesContext(componentName) {\n return createContext({\n name: `${componentName}StylesContext`,\n errorMessage: `useStyles: \"styles\" is undefined. Seems you forgot to wrap the components in \"<${componentName} />\" `,\n });\n}\n\nexport const [CardStylesProvider, useCardStyles] = createStylesContext('Card');\n","import {\n chakra,\n forwardRef,\n omitThemingProps,\n useMultiStyleConfig,\n} from '@chakra-ui/react';\n\nimport { classNames as cx } from 'utils/classNames';\nimport { CardStylesProvider } from './card-context';\nimport { root, body, header, footer } from './constant';\n\n/**\n * @typedef {Object} CardOptions\n * @property {import('@chakra-ui/react').SystemProps['flexDirection']} [direction] - The flex direction of the card. Valid values are\n * similar to CSS flex-direction property (e.g., \"row\", \"column\", \"row-reverse\").\n * @property {import('@chakra-ui/react').SystemProps['alignItems']} [align] - The flex alignment of the card. Valid values are similar\n * to CSS align-items property (e.g., \"start\", \"center\", \"end\", \"stretch\").\n * @property {import('@chakra-ui/react').SystemProps['justifyContent']} [justify] - The flex distribution of the card. Valid values are\n * similar to CSS justify-content property (e.g., \"start\", \"center\", \"end\", \"space-between\").\n */\n\n/**\n * @typedef {import('@chakra-ui/react').HTMLChakraProps<\"div\"> & CardOptions} CardProps\n * @type React.ForwardRefRenderFunction\n * @returns {JSX.Element}\n */\nexport const CardRoot = forwardRef(function CardRoot(props, ref) {\n const {\n children,\n direction = 'column',\n justify,\n align,\n ...rest\n } = omitThemingProps(props);\n\n const styles = {\n ...useMultiStyleConfig('Card', props),\n root,\n body,\n header,\n footer,\n };\n\n return (\n \n \n {children}\n \n \n );\n});\n","import { chakra, forwardRef } from '@chakra-ui/react';\n\nimport { classNames as cx } from '@/utils/classNames';\nimport { useCardStyles } from './card-context';\n\n/**\n * @typedef {import('@chakra-ui/react').HTMLChakraProps<\"div\">} CardBodyProps\n * @type React.ForwardRefRenderFunction\n * @returns {JSX.Element}\n */\nexport const CardBody = forwardRef(function CardBody(props, ref) {\n const { className, ...rest } = props;\n const styles = useCardStyles();\n return (\n \n );\n});\n","import { chakra, forwardRef } from '@chakra-ui/react';\n\nimport { classNames as cx } from '@/utils/classNames';\nimport { useCardStyles } from './card-context';\n\n/**\n * @typedef {import('@chakra-ui/react').HTMLChakraProps<\"div\">} CardFooterProps\n * @type React.ForwardRefRenderFunction\n * @returns {JSX.Element}\n */\nexport const CardFooter = forwardRef(function CardFooter(props, ref) {\n const { className, justify, ...rest } = props;\n const styles = useCardStyles();\n return (\n \n );\n});\n","import { chakra, forwardRef } from '@chakra-ui/react';\n\nimport { classNames as cx } from '@/utils/classNames';\nimport { useCardStyles } from './card-context';\n\n/**\n * @typedef {import('@chakra-ui/react').HTMLChakraProps<\"div\">} CardHeaderProps\n * @type React.ForwardRefRenderFunction\n * @returns {JSX.Element}\n */\nexport const CardHeader = forwardRef(function CardHeader(props, ref) {\n const { className, ...rest } = props;\n const styles = useCardStyles();\n return (\n \n );\n});\n","import { axios } from '../../services/axios';\n\nexport default async function updateVendorDefinedStatus(serviceID, statusID) {\n return axios\n .put(`/Service/VendorDefined/${serviceID}/Status/${statusID}`, null)\n .then((res) => res.data)\n .catch((e) => e);\n}\n","import { ACTIONS } from './constant';\n\nexport const serviceReducer = (state, action) => {\n switch (action.type) {\n case ACTIONS.GET_SERVICE_ACTIONS:\n case ACTIONS.UPDATE_SERVICE_ACTIONS:\n return {\n ...state,\n actions: action.payload,\n };\n\n case ACTIONS.UPDATE_SERVICE: {\n return {\n ...state,\n ...action.payload,\n };\n }\n\n default:\n return state;\n }\n};\n","import {\n EditIcon,\n ExternalLinkIcon,\n InfoIcon,\n RepeatIcon,\n DeleteIcon,\n} from '@chakra-ui/icons';\nimport {\n Box,\n IconButton,\n SkeletonCircle,\n SkeletonText,\n Tooltip,\n forwardRef,\n} from '@chakra-ui/react';\nimport { useMutation, useQuery } from '@tanstack/react-query';\nimport { isEmpty } from 'lodash';\nimport { useReducer } from 'react';\nimport { useSelector } from 'react-redux';\nimport { Link } from 'react-router-dom';\n\nimport { MenuItem as ChakraMenuItem, Image, Text } from '@/components/v4';\nimport { Card, CardBody, CardHeader } from 'components/v4/Card';\nimport DashboardServiceCardHeaderActionButton from 'components/v4/Cards/DashboardServiceCard/DashboardServiceCardHeaderActionButton';\nimport DashboardServiceCardStatus from 'components/v4/Cards/DashboardServiceCard/DashboardServiceCardOcStatusbar';\n\nimport getService from 'API/Service/getService';\nimport updateVendorDefinedStatus from 'API/Service/updateVendorDefinedStatus';\nimport { useDashboardMenu } from 'context/DashboardMenuContext';\nimport { classNames } from 'utils/classNames';\nimport { getTruncatedText, isTruncated, useStatus } from './helper';\nimport { serviceReducer } from './serviceReducer';\n\nimport {\n QUERY_CACHE_TIME,\n REFETCH_INTERVAL,\n} from '@/pages/services/new/ServiceDashboard';\nimport vendor from 'assets/images/vendor.png';\nimport { ACTIONS } from './constant';\nimport { axios } from '@/services/axios';\nimport { toast } from 'react-toastify';\nconst MenuItem = forwardRef((props, ref) => {\n const { darkMode } = useSelector((state) => state.settings);\n\n return (\n \n );\n});\nconst VendorCard = ({ service }) => {\n const { darkMode } = useSelector((state) => state.settings);\n const { isQueryDisabled, setIsQueryDisabled } = useDashboardMenu();\n const [state, dispatch] = useReducer(serviceReducer, service);\n const status = useStatus(state.statusDisplay);\n\n const { status: serviceStatus } = useQuery({\n queryKey: ['Service', state.id],\n queryFn: async () => {\n try {\n const res = await getService(state.id);\n if (!res.data) throw Error('No service found');\n return res.data;\n } catch (error) {\n console.log('Error at getting service: ', error);\n }\n },\n onSuccess: (service) => {\n dispatch({\n type: ACTIONS.UPDATE_SERVICE,\n payload: service,\n });\n dispatch({\n type: ACTIONS.GET_SERVICE_ACTIONS,\n payload: service.actions,\n });\n },\n cacheTime: QUERY_CACHE_TIME,\n refetchInterval: REFETCH_INTERVAL,\n enabled: !isQueryDisabled,\n });\n\n const updateStatus = useMutation({\n mutationFn: (serviceStatusID) =>\n updateVendorDefinedStatus(state.id, serviceStatusID),\n onSuccess: (newService) => {\n dispatch({\n type: ACTIONS.UPDATE_SERVICE,\n payload: newService,\n });\n if (newService?.actions?.length > 0)\n dispatch({\n type: ACTIONS.UPDATE_SERVICE_ACTIONS,\n payload: newService.actions,\n });\n },\n });\n\n const handleClick = (action) => {\n if (action.serviceStatusID) {\n return updateStatus.mutate(action.serviceStatusID);\n } else if (action.externalURL) {\n window.open(action.externalURL, '_blank');\n }\n };\n\n let loadingContent = (\n }>\n \n \n );\n\n const deleteService = async () => {\n try {\n await axios.delete(`/service/vendordefined/${service?.id}`);\n console.log('this is query disabled', isQueryDisabled);\n // previously stopped refreshing, will re-trigger refetch\n if (isQueryDisabled) {\n setIsQueryDisabled(false);\n }\n toast.success('Vendor defined service removed successfully!');\n } catch (e) {\n toast.error(e.response.data.message);\n }\n };\n\n return (\n \n \n\n \n \n \n \n {service.name}\n \n \n \n \n {state?.allowEdit && (\n \n }>\n Edit Service\n \n \n )}\n {state?.allowUserEdit && (\n \n }>\n Activate Users\n \n \n )}\n {state?.allowNumberEdit && (\n \n }>\n Activate Numbers\n \n \n )}\n {serviceStatus === 'loading'\n ? loadingContent\n : state?.actions?.length > 0 &&\n state?.actions?.map((action, index) => {\n // TODO: need switch case to dynamically render the actions\n const onClick = () => {\n return handleClick(action);\n };\n\n if (action?.externalURL) {\n return (\n \n }>\n {action.name}\n \n \n );\n }\n return (\n }\n onClick={onClick}>\n {action.name}\n \n );\n })}\n {/* Delete a service */}\n {state?.allowDelete && (\n deleteService()}\n icon={}>\n Delete Service\n \n )}\n \n \n \n \n \n \n {/* Status */}\n \n Status\n \n \n \n {status.status}\n \n \n {state.statusDisplay?.statusDisplayExtended && (\n \n \n \n }\n size=\"xs\"\n bg=\"transparent\"\n _hover={{\n bg: 'transparent',\n boxShadow: 'none',\n }}\n _active={{\n bg: 'transparent',\n boxShadow: 'none',\n }}\n />\n \n \n )}\n \n \n \n \n );\n};\n\nexport default VendorCard;\n","export const initialState = {\n number: '',\n status: 'IDLE',\n error: '',\n touched: false,\n};\n\nexport const path = {\n /** @type {'/sms-authorization'} */\n SMS_AUTHORIZATION: '/sms-authorization',\n /** @type {'/associated-accounts'} */\n ASSOCIATED_ACCOUNTS: '/associated-accounts',\n};\n\nexport const QUEUE_LIMIT = 30 * 60; // 30 minutes\nexport const delay = 20 * 1000;\n\nexport const trialEndInstructionBody = [\n 'Your trial has expired and calling services have been disabled.',\n 'Please contact your provider.',\n];\n\nexport const noAssociatedInstructionBody = [\n 'Please Enter your Mobile Phone Number above to verify with the Operator if TPM is supported.',\n 'Please note, this may take up to 15 minutes after submitting your number.',\n];\n\nexport const associatedInstructionBody = [\n 'There is already an Active Mobile Account associated with your organisation.',\n 'If the Mobile Phone Number you are looking to enable for Teams Phone Mobile belongs to this account, click Back to activate.',\n 'If you would like to add a new account, please continue to enter the Mobile Phone number above to start the verification process.',\n];\n\nexport const PHONE_INVALID_FORMAT =\n 'Phone number contains invalid characters. Please ensure you are using E.164 format.';\n\nexport const operatorInstruction = [\n 'The Mobile Operator is processing your request.',\n 'This may take up to 15 minutes. This screen shall auto refresh,',\n 'You may navigate away from this screen and come back to it later if required.',\n 'Resubmitting your number for validation does not restart the process.',\n];\n\nexport const keywords = [\n 'Mobile Phone Number',\n 'TPM',\n '15 minutes',\n 'Back',\n 'Teams Phone Mobile',\n 'Active Mobile Account',\n 'has expired',\n 'disabled',\n];\n","import { useEffect } from 'react';\nimport { useSelector } from 'react-redux';\nimport { useLocation } from 'react-router-dom';\nimport { useQuery } from '@tanstack/react-query';\nimport { toast } from 'react-toastify';\n\nimport { useDashboardMenu } from 'context/DashboardMenuContext';\n\n// Components\n// import Text from 'components/v4/Text';\nimport Grid from 'components/v4/Grid';\nimport Alert from 'components/v4/Alert';\nimport AlertIcon from 'components/v4/AlertIcon';\n\nimport SkeletonPlaceholder from 'components/v4/Cards/DashboardServiceCardPlaceholder';\nimport DashboardServiceAddServiceCard from 'components/v4/Cards/DashboardServiceAddServiceCard/DashboardServiceAddServiceCard';\nimport DashboardServiceAddServiceCardButton from 'components/v4/Cards/DashboardServiceAddServiceCard/DashboardServiceAddServiceCardButton';\nimport DashboardServiceAddServiceCardTitle from 'components/v4/Cards/DashboardServiceAddServiceCard/DashboardServiceAddServiceCardTitle';\nimport DashboardServiceAddServiceCardContent from 'components/v4/Cards/DashboardServiceAddServiceCard/DashboardServiceAddServiceCardContent';\n\n// Service Cards\nimport OperatorConnectCard from './Services/OperatorConnect';\nimport DirectRoutingCard from './Services/DirectRouting';\nimport SBCaaSCard from './Services/SBCaaS';\nimport OCCCard from './Services/OCC';\nimport TPMDashboard from './Services/TPM';\nimport ACSDashboard from './Services/ACS';\nimport AppAuthCard from './Services/AppAuth';\nimport VendorCard from './Services/Vendor/';\n\n// API\nimport getAppAuthByCompanyId from 'API/AppAuth/getAppAuthByCompanyId';\nimport getAppAuthByID from 'API/AppAuth/getAppAuthById';\n\nimport { QUERY_CACHE_TIME, REFETCH_INTERVAL } from '.';\nimport { useServicesDashboardDispatch } from 'context/ServicesDashboardContext';\nimport { APP_AUTH } from './Services/constants';\nimport { trialEndInstructionBody } from 'pages/tpm/constants';\n\nfunction CompanyApproveBanner({ companyData, partnerName, appAuth }) {\n if (!companyData) {\n return null;\n }\n const isNotApproved = !companyData?.approved;\n const isTrialExpired =\n companyData?.isTrial && Date.parse(companyData?.trialEnd) < Date.now();\n const isInvalidSync =\n Date.parse(appAuth?.lastAccessTest) >\n Date.parse(appAuth?.lastAccessSuccess);\n let content = null;\n\n if (isNotApproved) {\n content = `Services will not provision until your company has been approved. Please contact ${partnerName} for more information.`;\n } else if (isTrialExpired) {\n content = trialEndInstructionBody.map((p, index) => (\n {p} \n ));\n } else if (isInvalidSync) {\n content =\n 'Service cannot connect. Please Grant Access. Calling may be disabled if this issue is not resolved';\n }\n\n if (!content) return null;\n\n return (\n \n \n {content}\n \n );\n}\n\nexport default function DashboardServices({\n serviceWizard,\n services,\n companyData,\n isServicesLoading,\n}) {\n const { isQueryDisabled } = useDashboardMenu();\n const { currentCompany: companyID } = useSelector(\n (state) => state.navigationLists,\n );\n const partnerName = useSelector(\n (state) => state.navigationLists?.currentCompanyData?.partnerName,\n );\n const { state } = useLocation();\n const dispatch = useServicesDashboardDispatch();\n\n const {\n data: companyAppAuth,\n isLoading,\n refetch,\n isRefetching,\n isFetching,\n } = useQuery(\n ['companyAppAuth', serviceWizard.flow, companyID],\n async () => {\n try {\n const compAppAuth = await getAppAuthByCompanyId(companyID);\n const allCompanyAppAuthRes = await Promise.all(\n compAppAuth.data.map((v) => getAppAuthByID(v.id)),\n );\n return allCompanyAppAuthRes;\n } catch (e) {\n console.error('error getting comp auth data', { e });\n }\n },\n {\n cacheTime: QUERY_CACHE_TIME,\n refetchInterval: REFETCH_INTERVAL,\n enabled: !isQueryDisabled,\n onSuccess: (data) => {\n dispatch({\n type: `${APP_AUTH}/loaded_status`,\n payload: {\n serviceType: APP_AUTH,\n service: {\n ...data[0]?.data,\n company: companyData,\n },\n },\n });\n serviceWizard.setMsServiceAuth(data[0]?.data);\n serviceWizard.setCompanyAppAuth(data?.map((v) => v.data));\n },\n // staleTime: 500,\n },\n );\n\n const AppAuthServiceType = companyAppAuth?.length > 0 ? 'AppAuth' : null;\n\n useEffect(() => {\n // Reset create service loading flag here\n // That way, when creating a service, and authing, the loading spinner\n // will stay true until they leave the page\n serviceWizard.setIsCreatingService(false);\n }, [companyID]);\n\n useEffect(() => {\n if (!state?.message) return;\n\n let isMounted = true;\n if (state?.message) {\n toast.error(state?.message, { autoClose: 3000 });\n }\n\n if (isMounted) {\n window.history.replaceState({}, ''); // HACK: reset history state when refresh\n }\n return () => {\n isMounted = false;\n toast.dismiss();\n };\n }, []);\n\n useEffect(() => {\n if (!(isFetching || isRefetching)) {\n refetch();\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n /**\n * Loading.\n */\n if (\n services === null ||\n serviceWizard.companyAppAuth === null ||\n isLoading ||\n isServicesLoading\n ) {\n return (\n \n );\n }\n\n /**\n * No available services.\n */\n if (!services?.length) {\n return (\n <>\n \n \n You haven't created any services. Click the Add Service\n button below to create your first service.\n \n serviceWizard.setFlow('CreateService')}\n dataWalkthroughId={'/dashboard-services/card/add-service'}>\n \n \n Add Service\n \n \n \n \n \n );\n }\n /**\n * Services.\n */\n return (\n <>\n \n\n \n {[\n {\n serviceType: AppAuthServiceType,\n ...companyAppAuth[0]?.data,\n },\n ...services.sort((a, b) => {\n const priorityServices = [\n 'TeamsPhoneMobile',\n 'DirectRouting',\n 'OperatorConnect',\n 'AppAuth',\n ];\n return (\n priorityServices.indexOf(b?.serviceType) -\n priorityServices.indexOf(a?.serviceType)\n );\n }),\n ].map((service) => {\n switch (service.serviceType) {\n case 'AppAuth':\n return (\n \n );\n case 'TeamsPhoneMobile':\n return (\n \n s.serviceType === 'OperatorConnect',\n )}\n serviceWizard={serviceWizard}\n companyData={companyData}\n />\n );\n case 'ACSDirectRouting':\n return (\n \n );\n case 'OperatorConnect':\n return (\n \n service.appAuthType?.includes(\n appAuth.appAuthTypeID,\n ),\n )}>\n );\n case 'DirectRouting':\n return (\n \n service.appAuthType?.includes(\n appAuth.appAuthTypeID,\n ),\n )}>\n );\n case 'SBCaaS':\n return (\n \n service.appAuthType?.includes(\n appAuth.appAuthTypeID,\n ),\n )}>\n );\n case 'OperatorConnectConferencing':\n return (\n \n );\n\n case 'VendorDefined':\n return (\n \n );\n }\n })}\n {/* {vendorList?.length && } */}\n serviceWizard.setFlow('CreateService')}\n dataWalkthroughId={'/dashboard-services/card/add-service'}>\n \n \n Add Service\n \n \n \n \n \n \n );\n}\n","export const initialState = { attributesList: [], attributesErrors: [] };\n\nexport const useDefinedAttributesReducer = (state = initialState, action) => {\n switch (action.type) {\n // set attribute list\n case 'UPDATE_ATT_LIST': {\n return {\n ...state,\n attributesList: action.payload,\n };\n }\n // update value of an attribute by index\n case 'UPDATE_ATT_VALUE': {\n return {\n ...state,\n attributesList: state.attributesList.map((item, index) => {\n if (index === action.index) {\n // If the current index matches the action index, update the value property\n return {\n ...item, // Copy the current item properties\n value: action.payload, // Update the value property\n };\n }\n return item; // Return the unchanged item for other indices\n }),\n };\n }\n // add a attribute error if does not exist\n case 'ADD_ATT_ERROR': {\n if (!state.attributesErrors.some((obj) => obj.id == action.index)) {\n return {\n ...state,\n attributesErrors: [\n ...state.attributesErrors,\n {\n ...action.payload,\n },\n ],\n };\n } else return { ...state };\n }\n // remove/override attribute error\n case 'UPDATE_ATT_ERROR': {\n if (state.attributesErrors.some((obj) => obj.id == action.index)) {\n return {\n ...state,\n attributesErrors: state.attributesErrors.filter(\n (obj) => obj.id !== action.index,\n ),\n };\n } else return { ...state };\n }\n default:\n return state;\n }\n};\n","import { createContext, useContext, useMemo, useReducer } from 'react';\nimport {\n initialState,\n useDefinedAttributesReducer,\n} from './useDefinedAttributesReducer';\n\nexport const DefinedAttributesContext = createContext(null);\n\nexport const DefinedAttributesProvider = (props) => {\n const [state, dispatch] = useReducer(\n useDefinedAttributesReducer,\n initialState,\n );\n const { attributesList, attributesErrors } = state;\n\n const value = useMemo(\n () => ({\n dispatch,\n attributesErrors,\n attributesList,\n }),\n [dispatch, attributesErrors, attributesList],\n );\n\n return ;\n};\n\nexport const useDefinedAttributes = () => {\n const context = useContext(DefinedAttributesContext);\n if (context === undefined) {\n throw new Error(\n `useDefinedAttributes must be used within a DefinedAttributesProvider`,\n );\n }\n\n return context;\n};\n","import { isEmpty } from 'lodash';\nimport { useDefinedAttributes } from '../DefinedAttributesContext';\n\nexport default function useDefinedAttributeValidation() {\n const { dispatch } = useDefinedAttributes();\n\n const handleAttributeError = (index, message) => {\n dispatch({\n type: 'ADD_ATT_ERROR',\n index: index,\n payload: {\n id: index,\n isError: true,\n message: message,\n },\n });\n };\n\n const removeAttributeError = (index) => {\n dispatch({\n type: 'UPDATE_ATT_ERROR',\n index: index,\n });\n };\n\n const handleAttributeChange = (value, index) => {\n dispatch({\n type: 'UPDATE_ATT_VALUE',\n index: index,\n payload: isEmpty(value) ? null : value,\n });\n };\n\n return {\n handleAttributeError,\n removeAttributeError,\n handleAttributeChange,\n };\n}\n","import { chakraSelectDarkMode, defaultChakraSelectStyle } from '@/constants';\nimport { InfoIcon } from '@chakra-ui/icons';\nimport {\n Box,\n FormControl,\n FormErrorMessage,\n FormHelperText,\n FormLabel,\n Tooltip,\n} from '@chakra-ui/react';\nimport { Select } from 'chakra-react-select';\nimport { useSelector } from 'react-redux';\nimport style from '../../edit/styles';\nimport { useDefinedAttributes } from '../DefinedAttributesContext';\nimport useDefinedAttributeValidation from './useDefinedAttributeValidation';\n\nexport default function BoolAttribute({ attribute, index, requiredScope }) {\n const options = [\n {\n value: '0',\n label: 'False',\n },\n {\n value: '1',\n label: 'True',\n },\n ];\n const validation = JSON.parse(attribute.definedAttributeValidationType);\n const { removeAttributeError, handleAttributeChange } =\n useDefinedAttributeValidation();\n const { attributesErrors } = useDefinedAttributes();\n const { darkMode } = useSelector((state) => state.settings);\n const chakraSelectDark = chakraSelectDarkMode(darkMode);\n\n const error = attributesErrors.find((obj) => obj.id === index);\n return (\n \n \n \n {attribute.name}{' '}\n {attribute.toolTip && (\n \n \n \n )}\n \n item.value === attribute.value,\n )}\n options={options}\n onChange={(e) => {\n removeAttributeError(index);\n handleAttributeChange(e.value, index);\n }}\n placeholder=\"Please select an option\"\n getOptionLabel={(i) => i.label}\n chakraStyles={{\n ...defaultChakraSelectStyle,\n ...chakraSelectDark,\n }}\n isDisabled={requiredScope < attribute.updateScope}\n selectedOptionColor=\"brand\"\n />\n\n {error ? (\n {error.message}\n ) : attribute?.description ? (\n {attribute?.description}\n ) : null}\n \n \n );\n}\n","import { InfoIcon } from '@chakra-ui/icons';\nimport {\n Box,\n FormControl,\n FormErrorMessage,\n FormHelperText,\n FormLabel,\n Tooltip,\n} from '@chakra-ui/react';\nimport { Input } from 'components/v4';\nimport style from '../../edit/styles';\nimport { useDefinedAttributes } from '../DefinedAttributesContext';\nimport useDefinedAttributeValidation from './useDefinedAttributeValidation';\nimport { isEmpty } from 'lodash';\n\nexport default function GuidAttribute({\n attribute,\n index,\n requiredScope,\n}) {\n const validation = JSON.parse(attribute.definedAttributeValidationType);\n\n const { attributesErrors } = useDefinedAttributes();\n const {\n handleAttributeChange,\n handleAttributeError,\n removeAttributeError,\n } = useDefinedAttributeValidation();\n\n const error = attributesErrors.find((obj) => obj.id === index);\n\n const guidPattern =\n /^[A-Fa-f0-9]{8}-[A-Fa-f0-9]{4}-[A-Fa-f0-9]{4}-[A-Fa-f0-9]{4}-[A-Fa-f0-9]{12}$/i;\n\n return (\n \n \n \n {attribute.name}{' '}\n {attribute.toolTip && (\n \n \n \n )}\n \n {\n removeAttributeError(index);\n if (\n !isEmpty(e.target.value) &&\n !guidPattern.test(e.target.value)\n ) {\n handleAttributeError(index, 'Invalid GUID format.');\n }\n handleAttributeChange(e.target.value, index);\n }}\n isDisabled={requiredScope < attribute.updateScope}\n />\n\n {error ? (\n {error.message}\n ) : attribute?.description ? (\n {attribute?.description}\n ) : null}\n \n \n );\n}\n","import { InfoIcon } from '@chakra-ui/icons';\nimport {\n Box,\n FormControl,\n FormErrorMessage,\n FormHelperText,\n FormLabel,\n Tooltip,\n} from '@chakra-ui/react';\nimport { Input } from 'components/v4';\nimport style from '../../edit/styles';\nimport { useDefinedAttributes } from '../DefinedAttributesContext';\nimport useDefinedAttributeValidation from './useDefinedAttributeValidation';\n\nexport default function IntAttribute({\n attribute,\n index,\n requiredScope,\n}) {\n const validation = JSON.parse(attribute.definedAttributeValidationType);\n const { attributesErrors } = useDefinedAttributes();\n const error = attributesErrors.find((obj) => obj.id === index);\n\n const {\n handleAttributeChange,\n handleAttributeError,\n removeAttributeError,\n } = useDefinedAttributeValidation();\n\n return (\n \n \n \n {attribute.name}{' '}\n {attribute.toolTip && (\n \n \n \n )}\n \n \n ['e', 'E'].includes(evt.key) && evt.preventDefault()\n }\n type=\"number\"\n placeholder=\"Please enter a value\"\n value={attribute.value}\n onChange={(e) => {\n removeAttributeError(index);\n if (\n (parseInt(validation.Minimum) > 0 &&\n parseInt(validation.Maximum) > 0 &&\n parseInt(e.target.value) >\n validation.Maximum) ||\n parseInt(e.target.value) < validation.Minimum\n ) {\n handleAttributeError(\n index,\n `Only numeric values between ${validation.Minimum} and ${validation.Maximum} are allowed.`,\n );\n }\n\n handleAttributeChange(e.target.value, index);\n }}\n isDisabled={requiredScope < attribute.updateScope}\n />\n\n {error ? (\n {error.message}\n ) : attribute?.description ? (\n {attribute?.description}\n ) : null}\n \n \n );\n}\n","import { chakraSelectDarkMode, defaultChakraSelectStyle } from '@/constants';\nimport { InfoIcon } from '@chakra-ui/icons';\nimport {\n Box,\n FormControl,\n FormErrorMessage,\n FormHelperText,\n FormLabel,\n Tooltip,\n} from '@chakra-ui/react';\nimport { Select } from 'chakra-react-select';\nimport { useState } from 'react';\nimport { useSelector } from 'react-redux';\nimport style from '../../edit/styles';\nimport { useDefinedAttributes } from '../DefinedAttributesContext';\nimport useDefinedAttributeValidation from './useDefinedAttributeValidation';\n\nexport default function ListAttribute({ attribute, index, requiredScope }) {\n const validation = JSON.parse(attribute.definedAttributeValidationType);\n const { darkMode } = useSelector((state) => state.settings);\n const chakraSelectDark = chakraSelectDarkMode(darkMode);\n\n const { attributesErrors } = useDefinedAttributes();\n const error = attributesErrors.find((obj) => obj.id === index);\n\n const [validValues] = useState(() =>\n validation.ValidValues.split(',')\n .map((value) => value.trim())\n .filter((value) => value !== '')\n .map((value, index) => ({ index, value })),\n );\n\n const { removeAttributeError, handleAttributeChange } =\n useDefinedAttributeValidation();\n\n return (\n \n \n \n {attribute.name}{' '}\n {attribute.toolTip && (\n \n \n \n )}\n \n item.value === attribute.value,\n )}\n options={validValues}\n onChange={(e) => {\n removeAttributeError(index);\n handleAttributeChange(e.value, index);\n }}\n placeholder=\"Please select an option\"\n getOptionLabel={(i) => i.value}\n menuPosition=\"fixed\"\n maxMenuHeight={200}\n chakraStyles={{\n ...defaultChakraSelectStyle,\n ...chakraSelectDark,\n }}\n isDisabled={requiredScope < attribute.updateScope}\n selectedOptionColor=\"brand\"\n />\n\n {error ? (\n {error.message}\n ) : attribute?.description ? (\n {attribute?.description}\n ) : null}\n \n \n );\n}\n","import { InfoIcon } from '@chakra-ui/icons';\nimport {\n Box,\n FormControl,\n FormErrorMessage,\n FormHelperText,\n FormLabel,\n Tooltip,\n} from '@chakra-ui/react';\nimport { Input } from 'components/v4';\nimport style from '../../edit/styles';\nimport { useDefinedAttributes } from '../DefinedAttributesContext';\nimport useDefinedAttributeValidation from './useDefinedAttributeValidation';\n\nexport default function TextAttribute({\n attribute,\n index,\n requiredScope,\n}) {\n const validation = JSON.parse(attribute.definedAttributeValidationType);\n const { attributesErrors } = useDefinedAttributes();\n const error = attributesErrors.find((obj) => obj.id === index);\n const { removeAttributeError, handleAttributeChange } =\n useDefinedAttributeValidation();\n\n return (\n \n \n \n {attribute.name}{' '}\n {attribute.toolTip && (\n \n \n \n )}\n \n 0 ? validation.MaxLength : null\n }\n value={attribute.value}\n onChange={(e) => {\n removeAttributeError(index);\n handleAttributeChange(e.target.value, index);\n }}\n isDisabled={requiredScope < attribute.updateScope}\n />\n\n {error ? (\n {error.message}\n ) : attribute?.description ? (\n {attribute?.description}\n ) : null}\n \n \n );\n}\n","import { useDefinedAttributes } from '../DefinedAttributesContext';\nimport BoolAttribute from './boolAttribute';\nimport GuidAttribute from './guidAttribute';\nimport IntAttribute from './intAttribute';\nimport ListAttribute from './listAttribute';\nimport TextAttribute from './textAttribute';\n\nexport default function DefinedAttributes({ requiredScope }) {\n const { attributesList } = useDefinedAttributes();\n\n // leave it as it is when display order is same, otherwise sort\n return attributesList\n ?.sort((a, b) =>\n a.displayOrder === b.displayOrder\n ? 0\n : a.displayOrder - b.displayOrder,\n )\n ?.map((att, key) => {\n // defined attribute validation type is a json string\n const validation = JSON.parse(att.definedAttributeValidationType);\n switch (validation.Type) {\n case 'Int':\n return (\n \n );\n case 'Text':\n return (\n \n );\n\n case 'Bool':\n return (\n \n );\n\n case 'Guid':\n return (\n \n );\n\n case 'List':\n return (\n \n );\n default:\n break;\n }\n });\n}\n","import { axios } from '@/services/axios';\nimport {\n Box,\n HStack,\n Skeleton,\n SkeletonCircle,\n Stack,\n useDisclosure,\n} from '@chakra-ui/react';\nimport { useQuery } from '@tanstack/react-query';\nimport {\n Alert,\n AlertDescription,\n AlertIcon,\n Button,\n Heading,\n} from 'components/v4';\nimport ConfirmationModal from 'components/v4/Cards/ServiceProfileCard/ConfirmationModal';\nimport { isEmpty } from 'lodash';\nimport FooterContainer from 'pages/services/serviceprofiles/edit/FooterContainer';\nimport { useDefinedAttributes } from 'pages/services/serviceprofiles/vendorDefined/DefinedAttributesContext';\nimport DefinedAttributes from 'pages/services/serviceprofiles/vendorDefined/attributes/definedAttributes';\nimport useDefinedAttributeValidation from 'pages/services/serviceprofiles/vendorDefined/attributes/useDefinedAttributeValidation';\nimport { useState } from 'react';\nimport { useSelector } from 'react-redux';\nimport { toast } from 'react-toastify';\nimport { classNames } from 'utils/classNames';\n\nexport default function AddVendorDefined({ serviceWizard }) {\n const { isOpen, onOpen, onClose } = useDisclosure();\n const { requiredScope } = useSelector((state) => state.login);\n\n const { darkMode } = useSelector((state) => state.settings);\n const handleBackButton = () => serviceWizard.reset();\n\n const [error, setError] = useState(false);\n\n const [isLoading, setIsLoading] = useState(false);\n const { currentCompany: companyID } = useSelector(\n (state) => state.navigationLists,\n );\n\n const { dispatch, attributesList, attributesErrors } =\n useDefinedAttributes();\n\n const { handleAttributeError, removeAttributeError } =\n useDefinedAttributeValidation();\n\n // to be completed\n const DEFAULT_VENDOR_DEFINED = {\n name: '',\n serviceDefinitionID: '',\n };\n\n const [data, setData] = useState(DEFAULT_VENDOR_DEFINED);\n\n // get service definition for vendor defined service\n const { data: vendorDefinedData, isFetching: vendorDefinedLoading } =\n useQuery({\n queryKey: [\n 'vendorDefined',\n serviceWizard.selectedServiceProfile.id,\n ],\n queryFn: async () => {\n const res = await axios.get(\n `service/vendordefined/company/${companyID}/Template/${serviceWizard.selectedServiceProfile.serviceDefinition.id}`,\n );\n return res.data;\n },\n enabled: Boolean(\n serviceWizard.selectedServiceProfile?.serviceDefinition?.id,\n ),\n onSuccess: async (data) => {\n // data for the service type and attributes list\n setData((prevState) => ({\n ...prevState,\n ...data,\n }));\n if (data.attributeList?.length > 0) {\n for (let att of data.attributeList) {\n // attribute value is empty\n if (isEmpty(att.value)) {\n // default value is empty, set value to be empty string\n att.value = isEmpty(att.defaultValue)\n ? null\n : att.defaultValue;\n }\n }\n }\n dispatch({\n type: 'UPDATE_ATT_LIST',\n payload: data.attributeList,\n });\n },\n onError: (err) => {\n toast.error(err?.response?.data?.message);\n handleBackButton();\n },\n refetchOnWindowFocus: false,\n });\n\n const handleValidation = () => {\n setError(null);\n let hasError = false;\n\n // check for any attributes errors\n if (attributesErrors.length > 0) {\n hasError = true;\n }\n\n // check for required attributes\n if (attributesList?.length > 0) {\n attributesList.forEach((att, index) => {\n const validation = JSON.parse(\n att.definedAttributeValidationType,\n );\n\n // if required, input cannot be empty\n if (validation.Required && isEmpty(att.value)) {\n handleAttributeError(index, 'Field is required.');\n hasError = true;\n } else {\n removeAttributeError(index);\n }\n });\n }\n if (hasError) return;\n\n // validation passes, required confirmation to add service\n onOpen();\n };\n\n const handleSubmit = async (e) => {\n // close add service confirmation modal\n e.preventDefault();\n onClose();\n\n setIsLoading(true);\n try {\n await axios.post(`service/vendordefined`, {\n name: data.name,\n companyID: companyID,\n serviceDefinitionID: data.serviceDefinitionID,\n attributeList: attributesList,\n });\n\n toast.success(`Successfully created a Vendor Defined Service!`);\n // go back to dashboard services\n handleBackButton();\n } catch (e) {\n setError(e);\n } finally {\n setIsLoading(false);\n }\n };\n\n return (\n \n \n Add{' '}\n {serviceWizard.selectedServiceProfile?.serviceDefinition\n ?.name || 'Vendor Defined Service'}\n \n\n {error && (\n \n \n \n {error?.response?.data?.message ||\n 'An error occured. please try again later.'}\n \n \n )}\n\n {vendorDefinedLoading ? (\n \n {[...Array(3)].map((_, index) => (\n \n \n \n \n \n\n \n \n \n ))}\n \n ) : attributesList?.length > 0 ? (\n \n ) : (\n \n \n No information is required at this time! Click 'Add' to\n continue.\n \n )}\n\n \n serviceWizard.setFlow('CreateService')}>\n Back\n \n handleValidation()}\n w={{ base: '100%', md: '80px' }}\n type=\"submit\">\n Add\n \n \n\n \n \n );\n}\n","import { axios } from 'services/axios';\n\n/**\n * @link /Services/TeamsPhoneMobile/{serviceID}/RequestNumberVerification\n * */\nexport const postRequestNumberVerification = ({ serviceID, phonenumber }) =>\n axios.post(\n `/Services/TeamsPhoneMobile/${serviceID}/RequestNumberVerification`,\n { phonenumber },\n );\n/**\n * @link /Services/TeamsPhoneMobile/{serviceID}/SubmitNumberVerification\n * */\nexport const postSubmitNumberVerification = ({\n serviceID,\n phonenumber,\n code,\n}) =>\n axios.post(\n `/Services/TeamsPhoneMobile/${serviceID}/SubmitNumberVerification`,\n { phonenumber, code },\n );\n/**\n * @link /Services/TeamsPhoneMobile/{serviceID}/ActivateNumbers\n * @param {{serviceID: string, phoneNumbers: string[]}}\n * @returns {Promise>}\n * */\nexport const postActivateNumbers = ({ serviceID, phoneNumbers }) =>\n axios.post(\n `/Services/TeamsPhoneMobile/${serviceID}/ActivateNumbers`,\n phoneNumbers,\n );\n/**\n * @link /Services/TeamsPhoneMobile/{serviceID}/ValidateNumbers\n * @param {{serviceID: string, phoneNumbers: string[]}}\n * @returns {Promise>}\n * */\nexport const postValidateNumbers = ({ serviceID, phoneNumbers }) =>\n axios.post(\n `/Services/TeamsPhoneMobile/${serviceID}/ValidateNumbers`,\n phoneNumbers,\n );\n/**\n * @link /Services/TeamsPhoneMobile/{serviceID}/DeactivateNumbers\n * @param {{serviceID: string, phoneNumbers: string[]}}\n * @returns {Promise>}\n * */\nexport const postDeactivateNumbers = ({ serviceID, phoneNumbers }) =>\n axios.post(\n `/Services/TeamsPhoneMobile/${serviceID}/DeactivateNumbers`,\n phoneNumbers,\n );\n/**\n * @link /Services/TeamsPhoneMobile/{serviceID}/Associations\n * @param {string} serviceID\n * */\nexport const getAssociations = ({ serviceID }) =>\n axios.get(`/Services/TeamsPhoneMobile/${serviceID}/Associations`);\n","import { useMutation } from '@tanstack/react-query';\nimport { postRequestNumberVerification } from 'API/TPMTrial';\n\nfunction useRequestNumber(id, mpn, delay) {\n return useMutation({\n mutationKey: ['requestNumber'],\n mutationFn: () =>\n postRequestNumberVerification({\n serviceID: id,\n phonenumber: mpn,\n }),\n onSuccess: () => {\n console.log('Mutation successful');\n },\n retryDelay: delay,\n retry: 3,\n });\n}\n\nexport default useRequestNumber;\n","import { useQuery } from '@tanstack/react-query';\nimport { useDispatch } from 'react-redux';\n\nimport { getAssociations } from 'API/TPMTrial';\n\nfunction useAssociatedAccounts(serviceID) {\n const dispatch = useDispatch();\n return useQuery({\n queryKey: ['getAssociatedAccounts', serviceID],\n queryFn: async () => {\n try {\n const res = await getAssociations({\n serviceID,\n });\n return res.data;\n } catch (error) {\n let errorMessage = 'Error fetching data';\n if (error.response.status === 401) {\n errorMessage =\n 'Unauthorized. Login does not have the required access.';\n } else if (error.response.status === 403) {\n errorMessage =\n 'Forbidden. Provided credentials do not have access to the requested resource.';\n } else {\n errorMessage =\n error?.response?.data?.message ||\n error?.response?.data?.title;\n }\n\n dispatch({\n type: 'CHANGE_MODAL_BACKEND_ERROR',\n payload: errorMessage,\n });\n }\n },\n useErrorBoundary: (error) => error.response?.status >= 500,\n retry: 3,\n enabled: !!serviceID,\n cacheTime: 1,\n });\n}\n\nexport default useAssociatedAccounts;\n","import { axios } from '../services/axios';\n\nexport default async function getCompanyServices(companyid) {\n return await axios\n .get(`/Services/Company/${companyid}`, {\n headers: {\n 'Cache-Control': 'no-cache',\n 'Pragma': 'no-cache',\n 'Expires': '0',\n },\n })\n .then((response) => response)\n .catch((error) => error);\n}\n","import { useQuery } from '@tanstack/react-query';\n\nimport getCompanyServices from 'API/getCompanySevices';\n\n/**\n * @typedef {Object} Service\n * @property {string} id\n * @property {string} name\n **/\n\n/**\n * @typedef {Object} UseDashboardServicesParams\n * @property {string} currentCompany - The current company identifier\n * @property {string[]} [queryKey] - Optional query key for the useQuery hook\n * @property {Omit, 'queryKey' | 'queryFn'>} [options] - Optional react-query options\n **/\n\n/**\n * Custom hook to fetch company services with react-query.\n * @param {UseDashboardServicesParams} params - Parameters for the hook\n * @returns {import('@tanstack/react-query').UseQueryResult} The result of the react-query hook\n **/\nfunction useDashboardServices({\n currentCompany,\n queryKey = ['services', `company: ${currentCompany}`],\n options = {},\n}) {\n return useQuery(\n queryKey,\n async () => {\n const res = await getCompanyServices(currentCompany);\n if (res.status !== 200) {\n throw new Error(\n res.message || 'Error fetching company services',\n );\n }\n return res.data;\n },\n {\n ...options,\n },\n );\n}\nexport default useDashboardServices;\n","import { useRef } from 'react';\nimport { toast } from 'react-toastify';\n\nexport function useSingleToast() {\n const toastId = useRef(null);\n\n const successToast = (message, options = {}) => {\n // Dismiss the previous toast before showing a new one\n if (toastId.current) {\n toast.dismiss(toastId.current);\n }\n\n toastId.current = toast.success(message, {\n autoClose: 5000,\n ...options,\n });\n };\n\n const errorToast = (message, options = {}) => {\n // Dismiss the previous toast before showing a new one\n if (toastId.current) {\n toast.dismiss(toastId.current);\n }\n\n toastId.current = toast.error(message, {\n autoClose: 5000,\n ...options,\n });\n };\n\n return { successToast, errorToast };\n}\n","import { useMutation } from '@tanstack/react-query';\n\nimport { postDeactivateNumbers } from 'API/TPMTrial';\nimport { useSingleToast } from 'hooks/useSingleToast';\n\n/**\n * Custom hook that contain a `mutateAsync` function to trigger the tpm numbers deactivation.\n *\n * @example\n * const { mutateAsync: deactivateNumbers } = useDeactivate();\n *\n * const handleSubmitDn = async () => {\n * deactivateNumbers({\n * serviceID: ,\n * phoneNumbers: ['61435678910']\n * });\n * };\n **/\nfunction useDeactivate() {\n const { successToast, errorToast } = useSingleToast();\n return useMutation({\n /**\n * Mutation function to deactivate phone numbers for a specific service.\n *\n * @param {Object} params - Parameters for deactivation.\n * @param {string} params.serviceID - The ID of the service.\n * @param {string[]} params.phoneNumbers - Array of phone numbers to deactivate.\n * @returns {Promise