@rh-support/react-context 2.5.327 → 2.6.11

package/lib/esm/GlobalContextWrapper.d.ts

@@ -8,9 +8,7 @@ declare global {
         MSInputMethodContext: any;
         portal: any;
         Raven: any;
-        embedded_svc: any;
-        $Lightning: any;
-        liveAgentDeployment: any;
+        embeddedservice_bootstrap: any;
     }
     interface Document {
         documentMode: any;

package/lib/esm/GlobalContextWrapper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GlobalContextWrapper.d.ts","sourceRoot":"","sources":["../../src/GlobalContextWrapper.tsx"],"names":[],"mappings":"AAKA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAcnD,UAAU,MAAM;IACZ,QAAQ,EAAE,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;CACzC;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,MAAM;QACZ,SAAS,EAAE,GAAG,CAAC;QACf,oBAAoB,EAAE,GAAG,CAAC;QAC1B,MAAM,EAAE,GAAG,CAAC;QACZ,KAAK,EAAE,GAAG,CAAC;QACX,YAAY,EAAE,GAAG,CAAC;QAClB,UAAU,EAAE,GAAG,CAAC;QAChB,mBAAmB,EAAE,GAAG,CAAC;KAC5B;IAED,UAAU,QAAQ;QACd,YAAY,EAAE,GAAG,CAAC;KACrB;CACJ;AAmGD,eAAO,MAAM,oBAAoB,GAAI,OAAO,MAAM,sBAKjD,CAAC"}
+{"version":3,"file":"GlobalContextWrapper.d.ts","sourceRoot":"","sources":["../../src/GlobalContextWrapper.tsx"],"names":[],"mappings":"AAYA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAenD,UAAU,MAAM;IACZ,QAAQ,EAAE,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;CACzC;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,MAAM;QACZ,SAAS,EAAE,GAAG,CAAC;QACf,oBAAoB,EAAE,GAAG,CAAC;QAC1B,MAAM,EAAE,GAAG,CAAC;QACZ,KAAK,EAAE,GAAG,CAAC;QACX,yBAAyB,EAAE,GAAG,CAAC;KAClC;IAED,UAAU,QAAQ;QACd,YAAY,EAAE,GAAG,CAAC;KACrB;CACJ;AA0HD,eAAO,MAAM,oBAAoB,GAAI,OAAO,MAAM,sBAKjD,CAAC"}

package/lib/esm/GlobalContextWrapper.js

@@ -7,17 +7,19 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
+import { useApolloClient } from '@apollo/client/react';
 import { accounts, Config } from '@cee-eng/hydrajs';
 import { LoginModal } from '@rh-support/components';
-import { getApiResourceObject, setSecuredSupport, setStrataHeaders } from '@rh-support/utils';
+import { fetchAndSetSalesforceToken, getApiResourceObject, SALESFORCE_SESSION_EXPIRED_EVENT, setSecuredSupport, setStrataHeaders, } from '@rh-support/utils';
 import isEmpty from 'lodash/isEmpty';
 import React, { useEffect, useState } from 'react';
 import { GlobalMetadataContextProvider, GlobalMetadataDispatchContext } from './context/GlobalMetadataContext';
-import { fetchAccountManagers, fetchLoggedInUser, fetchLoggedInUsersAccount, fetchManagedAccounts, fetchUserPreferences, GlobalMetadataReducerConstants, loadPCMConfig, setLoggedInUserJwtToken, } from './reducers/GlobalMetadataReducer';
+import { fetchAccountManagers, fetchCaseRecordTypes, fetchLoggedInUser, fetchLoggedInUsersAccount, fetchManagedAccounts, fetchUserPreferences, GlobalMetadataReducerConstants, loadPCMConfig, setLoggedInUserJwtToken, } from './reducers/GlobalMetadataReducer';
 function GlobalContextMetadataWrapper() {
     const [showReLoginModal, setShowReLoginModal] = useState(false);
     const [showSessionExpiredModal, setShowSessionExpiredModal] = useState(false);
     const dispatchToGlobalMetadataReducer = React.useContext(GlobalMetadataDispatchContext);
+    const apolloClient = useApolloClient();
     // Configuring callbacks to show modals in case of auth logout or session expiry
     useEffect(() => {
         const init = () => __awaiter(this, void 0, void 0, function* () {
@@ -29,21 +31,37 @@ function GlobalContextMetadataWrapper() {
                     setShowSessionExpiredModal(true);
                 }
             }));
+            session.on('AuthRefreshSuccess', () => {
+                fetchAndSetSalesforceToken(window.sessionjs.getEncodedToken());
+            });
         });
         init();
     }, []);
-    const loadGlobalMetadata = (loggedInUserJwtToken) => {
+    // Show session-expired modal when Salesforce token refresh fails
+    useEffect(() => {
+        const handleSalesforceSessionExpired = () => {
+            setShowSessionExpiredModal(true);
+        };
+        window.addEventListener(SALESFORCE_SESSION_EXPIRED_EVENT, handleSalesforceSessionExpired);
+        return () => window.removeEventListener(SALESFORCE_SESSION_EXPIRED_EVENT, handleSalesforceSessionExpired);
+    }, []);
+    const loadGlobalMetadata = (loggedInUserJwtToken) => __awaiter(this, void 0, void 0, function* () {
+        var _a, _b;
         setLoggedInUserJwtToken(dispatchToGlobalMetadataReducer, loggedInUserJwtToken);
+        fetchCaseRecordTypes(dispatchToGlobalMetadataReducer, apolloClient);
         /**
          * Even GS4 users can use strata's normal user and  account endpoints and thus fetching them before hand. This improves the load time by 4 seconds
          */
-        loadPCMConfig(dispatchToGlobalMetadataReducer).then((pcmConfig) => {
-            fetchLoggedInUser(dispatchToGlobalMetadataReducer, loggedInUserJwtToken, pcmConfig);
-        });
+        loadPCMConfig(dispatchToGlobalMetadataReducer);
+        const encodedJwt = (_b = (_a = window.sessionjs) === null || _a === void 0 ? void 0 : _a.getEncodedToken) === null || _b === void 0 ? void 0 : _b.call(_a);
+        if (encodedJwt) {
+            yield fetchAndSetSalesforceToken(encodedJwt);
+        }
+        fetchLoggedInUser(dispatchToGlobalMetadataReducer, loggedInUserJwtToken, null, apolloClient);
         fetchUserPreferences(dispatchToGlobalMetadataReducer, loggedInUserJwtToken);
         fetchManagedAccounts(dispatchToGlobalMetadataReducer, loggedInUserJwtToken);
         fetchAccountManagers(dispatchToGlobalMetadataReducer, loggedInUserJwtToken);
-        fetchLoggedInUsersAccount(dispatchToGlobalMetadataReducer, loggedInUserJwtToken).then((loggedInUserAccount) => {
+        fetchLoggedInUsersAccount(dispatchToGlobalMetadataReducer, loggedInUserJwtToken, false, apolloClient).then((loggedInUserAccount) => {
             setSecuredSupport(loggedInUserAccount === null || loggedInUserAccount === void 0 ? void 0 : loggedInUserAccount.secureSupport);
             if (loggedInUserAccount === null || loggedInUserAccount === void 0 ? void 0 : loggedInUserAccount.secureSupport) {
                 Config.setUserConfig({ isLoggedInAccountGS4: true });
@@ -51,7 +69,7 @@ function GlobalContextMetadataWrapper() {
                 element && element.classList.add('support-secured');
             }
         });
-    };
+    });
     useEffect(() => {
         const loggedInUserJwtToken = window.sessionjs.getToken();
         const getAccountNumber = () => __awaiter(this, void 0, void 0, function* () {

package/lib/esm/components/AccountSelector/AccountSelectorInternal.d.ts

@@ -1,5 +1,4 @@
 import { IAccount } from '@cee-eng/hydrajs/@types/models/account';
-import { IAccountListParams } from '@cee-eng/hydrajs/@types/models/csp/account';
 import React from 'react';
 interface IProps {
     selectedAccounts?: IAccount[];
@@ -8,7 +7,6 @@ interface IProps {
     canBookmarkAccount?: boolean;
     suggestBookmarkAccounts?: boolean;
     onSelect?: (accounts: IAccount[]) => any;
-    accountListParams?: IAccountListParams;
     multiple?: boolean;
     isInValid?: boolean;
     restrictedOnSubscriptionAbuse?: boolean;
@@ -24,6 +22,7 @@ interface IProps {
     disabled?: boolean;
     maxResults?: number;
     delay?: number;
+    showSelectionCountBadge?: boolean;
 }
 declare function AccountSelectorInternal(props: IProps): React.JSX.Element;
 declare namespace AccountSelectorInternal {

package/lib/esm/components/AccountSelector/AccountSelectorInternal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AccountSelectorInternal.d.ts","sourceRoot":"","sources":["../../../../src/components/AccountSelector/AccountSelectorInternal.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,wCAAwC,CAAC;AAClE,OAAO,EAAE,kBAAkB,EAAE,MAAM,4CAA4C,CAAC;AAqBhF,OAAO,KAA+C,MAAM,OAAO,CAAC;AAKpE,UAAU,MAAM;IACZ,gBAAgB,CAAC,EAAE,QAAQ,EAAE,CAAC;IAC9B,eAAe,CAAC,EAAE,QAAQ,EAAE,CAAC;IAC7B,kBAAkB,CAAC,EAAE,QAAQ,EAAE,CAAC;IAChC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,GAAG,CAAC;IACzC,iBAAiB,CAAC,EAAE,kBAAkB,CAAC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6BAA6B,CAAC,EAAE,OAAO,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAkCD,iBAAS,uBAAuB,CAAC,KAAK,EAAE,MAAM,qBA+S7C;kBA/SQ,uBAAuB;;;AAkThC,OAAO,EAAE,uBAAuB,EAAE,CAAC"}
+{"version":3,"file":"AccountSelectorInternal.d.ts","sourceRoot":"","sources":["../../../../src/components/AccountSelector/AccountSelectorInternal.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,wCAAwC,CAAC;AA4BlE,OAAO,KAA4D,MAAM,OAAO,CAAC;AAKjF,UAAU,MAAM;IACZ,gBAAgB,CAAC,EAAE,QAAQ,EAAE,CAAC;IAC9B,eAAe,CAAC,EAAE,QAAQ,EAAE,CAAC;IAC7B,kBAAkB,CAAC,EAAE,QAAQ,EAAE,CAAC;IAChC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,GAAG,CAAC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6BAA6B,CAAC,EAAE,OAAO,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uBAAuB,CAAC,EAAE,OAAO,CAAC;CACrC;AAkCD,iBAAS,uBAAuB,CAAC,KAAK,EAAE,MAAM,qBA8W7C;kBA9WQ,uBAAuB;;;AAiXhC,OAAO,EAAE,uBAAuB,EAAE,CAAC"}

package/lib/esm/components/AccountSelector/AccountSelectorInternal.js

@@ -7,18 +7,19 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { accounts } from '@cee-eng/hydrajs';
-import { Button, Flex, FlexItem, MenuToggle, Select, SelectList, SelectOption, TextInputGroup, TextInputGroupMain, TextInputGroupUtilities, } from '@patternfly/react-core';
-import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
+import { useApolloClient } from '@apollo/client/react';
+import { Badge, Button, Flex, FlexItem, MenuToggle, Select, SelectList, SelectOption, TextInputGroup, TextInputGroupMain, TextInputGroupUtilities, } from '@patternfly/react-core';
 import TimesCircleIcon from '@patternfly/react-icons/dist/js/icons/times-circle-icon';
-import { LoadingIndicator, useFetch } from '@rh-support/components';
+import { LoadingIndicator } from '@rh-support/components';
+import { buildSearchAccountsWhere, handleGraphQLSearchAccountsResponse, SEARCH_ACCOUNTS, } from '@rh-support/utils';
+import debounce from 'lodash/debounce';
 import isEmpty from 'lodash/isEmpty';
 import isNull from 'lodash/isNull';
 import isUndefined from 'lodash/isUndefined';
 import uniqBy from 'lodash/uniqBy';
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
-import { parseAccountSearchQuery, sortAccountsByQuery } from '../../utils';
+import { sortAccountsByQuery } from '../../utils';
 const defaultProps = {
     id: '',
     className: '',
@@ -50,24 +51,28 @@ const getDisplayName = (account) => {
         : '';
 };
 function AccountSelectorInternal(props) {
-    const { request, isFetching } = useFetch(accounts.getAccounts, { isAbortable: true });
+    const apolloClient = useApolloClient();
     const [items, setItems] = useState([]);
     const [selectedItems, setSelectedItems] = useState([]);
     const [isOpen, setIsOpen] = useState(false);
     const [isQueryChanged, setIsQueryChanged] = useState(false);
+    const [isFetching, setIsFetching] = useState(false);
     const [query, setQuery] = useState('');
     const [focusedItemIndex, setFocusedItemIndex] = useState(null);
+    const [hasNextPage, setHasNextPage] = useState(false);
+    const [endCursor, setEndCursor] = useState('');
+    const [currentSearchQuery, setCurrentSearchQuery] = useState('');
     const textInputRef = useRef();
     const inputGroupRef = useRef();
+    const abortControllerRef = useRef();
     const { t } = useTranslation();
     const bookmarkedAccountsDeduped = uniqBy(props.bookmarkedAccounts, (b) => b.accountNumber);
     const pageSize = 20;
-    const [resultSize, setResultSize] = useState(pageSize);
     const setQueryLabel = (selectedItems) => {
         const item = !isEmpty(selectedItems) && !props.multiple ? selectedItems[0] : {};
         setQuery(getDisplayName(item));
     };
-    const itemsToRender = useMemo(() => (isEmpty(items) ? bookmarkedAccountsDeduped : items.slice(0, props.paginate ? resultSize : items.length)), [items, bookmarkedAccountsDeduped, props.paginate, resultSize]);
+    const itemsToRender = useMemo(() => (isEmpty(items) ? bookmarkedAccountsDeduped : items), [items, bookmarkedAccountsDeduped]);
     useEffect(() => {
         if (!props.multiple) {
             const selectedItem = (props.selectedAccounts || [])[0];
@@ -81,11 +86,13 @@ function AccountSelectorInternal(props) {
         setQueryLabel(selectedItems);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [selectedItems, props.multiple]);
-    const onDisplayMoreClick = (e) => {
+    const onDisplayMoreClick = (e) => __awaiter(this, void 0, void 0, function* () {
         e.stopPropagation();
-        setResultSize((pre) => Math.min(pre + pageSize, items.length));
         setIsOpen(true);
-    };
+        if (!hasNextPage || !endCursor || !currentSearchQuery)
+            return;
+        yield fetchAccounts(currentSearchQuery, endCursor);
+    });
     const dropdownOptions = useMemo(() => {
         if (isFetching) {
             return (React.createElement("div", { key: "searching", className: "pf-v6-u-px-md pf-v6-u-py-sm" },
@@ -96,13 +103,9 @@ function AccountSelectorInternal(props) {
                 React.createElement(Trans, null, "No results found")));
         }
         return [
-            ...itemsToRender.map((item, index) => (React.createElement(SelectOption, { isFocused: focusedItemIndex === index, key: index, value: item, hasCheckbox: props.multiple, isSelected: selectedItems.some((account) => item.accountNumber === account.accountNumber) }, props.restrictedOnSubscriptionAbuse && item.subscriptionAbuse ? (React.createElement(Flex, { justifyContent: { default: 'justifyContentSpaceBetween' } },
-                React.createElement(FlexItem, { className: "form-instructions form-invalid" }, getDisplayName(item)),
-                React.createElement(FlexItem, { className: "form-instructions form-invalid pf-v6-u-text-nowrap pf-v6-u-pr-sm" },
-                    React.createElement(InfoCircleIcon, null),
-                    " ",
-                    React.createElement(Trans, null, "Subscription abuse")))) : (React.createElement("span", null, getDisplayName(item)))))),
-            ...(resultSize < items.length
+            ...itemsToRender.map((item, index) => (React.createElement(SelectOption, { isFocused: focusedItemIndex === index, key: index, value: item, hasCheckbox: props.multiple, isSelected: selectedItems.some((account) => item.accountNumber === account.accountNumber) },
+                React.createElement("span", null, getDisplayName(item))))),
+            ...(hasNextPage
                 ? [
                     React.createElement("div", { className: "pf-v6-c-divider", role: "separator", key: "separator" }),
                     React.createElement(SelectOption, { key: 'diplay-more-option', onClick: onDisplayMoreClick, value: 'display-more' },
@@ -115,18 +118,62 @@ function AccountSelectorInternal(props) {
     }, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [items, bookmarkedAccountsDeduped, isFetching, itemsToRender, isQueryChanged]);
-    const fetchAccounts = (rawQuery) => __awaiter(this, void 0, void 0, function* () {
-        if (isEmpty(rawQuery === null || rawQuery === void 0 ? void 0 : rawQuery.trim())) {
+    const fetchAccounts = useCallback((searchQuery, afterCursor) => __awaiter(this, void 0, void 0, function* () {
+        if (isEmpty(searchQuery)) {
             return;
         }
-        const { query: searchQuery, queryKey } = parseAccountSearchQuery(rawQuery);
-        const fields = ['accountNumber', 'accountId', 'name', 'subscriptionAbuse'].join(',');
-        const params = Object.assign({ fields, limit: 60, accountNumberNotNull: true }, (queryKey === 'accountNumber' ? { accountNumberLike: searchQuery } : { nameLike: searchQuery }));
-        const response = request && (yield request(params));
-        const options = response && response.items && response.items.length ? response.items : [];
-        const sortedOptions = sortAccountsByQuery(options, searchQuery, queryKey);
-        setItems(sortedOptions);
-    });
+        if (abortControllerRef.current) {
+            abortControllerRef.current.abort();
+        }
+        abortControllerRef.current = new AbortController();
+        const isAppending = !!afterCursor;
+        if (!isAppending) {
+            setIsFetching(true);
+        }
+        try {
+            const where = buildSearchAccountsWhere(searchQuery);
+            const queryKey = isNaN(searchQuery) ? 'name' : 'accountNumber';
+            const { data } = yield apolloClient.query({
+                query: SEARCH_ACCOUNTS,
+                variables: Object.assign(Object.assign({ where, first: pageSize }, (afterCursor ? { after: afterCursor } : {})), { orderBy: { Name: { order: 'ASC' } } }),
+                context: { fetchOptions: { signal: abortControllerRef.current.signal } },
+            });
+            const result = handleGraphQLSearchAccountsResponse(data);
+            const newItems = result.items.map((item) => ({
+                accountNumber: item.accountNumber,
+                name: item.name,
+            }));
+            const sortedItems = sortAccountsByQuery(newItems, searchQuery, queryKey);
+            if (isAppending) {
+                setItems((prev) => [...prev, ...sortedItems]);
+            }
+            else {
+                setItems(sortedItems);
+            }
+            setHasNextPage(result.hasNextPage);
+            setEndCursor(result.endCursor);
+            setCurrentSearchQuery(searchQuery);
+        }
+        catch (err) {
+            if ((err === null || err === void 0 ? void 0 : err.name) !== 'AbortError') {
+                console.error('Failed to search accounts via GraphQL', err);
+                setItems([]);
+                setHasNextPage(false);
+                setEndCursor('');
+            }
+        }
+        finally {
+            setIsFetching(false);
+        }
+    }), [apolloClient]);
+    const fetchAccountsRef = useRef(fetchAccounts);
+    fetchAccountsRef.current = fetchAccounts;
+    const debouncedFetchAccounts = useMemo(() => { var _a; return debounce((value) => fetchAccountsRef.current(value), (_a = props.delay) !== null && _a !== void 0 ? _a : 300); }, [props.delay]);
+    useEffect(() => {
+        return () => {
+            debouncedFetchAccounts.cancel();
+        };
+    }, [debouncedFetchAccounts]);
     const onOuterClick = () => {
         setQueryLabel(props.selectedAccounts || []);
         setSelectedItems(props.selectedAccounts || []);
@@ -162,15 +209,19 @@ function AccountSelectorInternal(props) {
         (_a = textInputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
     };
     const onFilter = (_event, value) => {
-        const trimmed = value.trim();
         setQuery(value);
-        setIsQueryChanged(!isEmpty(trimmed));
-        if (!isEmpty(trimmed)) {
-            setIsOpen(true);
-        }
-        fetchAccounts(value);
-        setResultSize(pageSize);
+        setIsQueryChanged(!isEmpty(value));
         setFocusedItemIndex(null);
+        if (isEmpty(value)) {
+            debouncedFetchAccounts.cancel();
+            setItems([]);
+            setIsFetching(false);
+            setHasNextPage(false);
+            setEndCursor('');
+            return;
+        }
+        setIsFetching(true);
+        debouncedFetchAccounts(value);
     };
     const onToggleClick = () => {
         setIsOpen((pre) => !pre);
@@ -186,6 +237,9 @@ function AccountSelectorInternal(props) {
         setSelectedItems([]);
         setItems([]);
         setIsQueryChanged(false);
+        setHasNextPage(false);
+        setEndCursor('');
+        setCurrentSearchQuery('');
         (_a = textInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     };
     const onSelect = (selection) => {
@@ -242,7 +296,9 @@ function AccountSelectorInternal(props) {
     const toggle = (toggleRef) => (React.createElement(MenuToggle, { innerRef: toggleRef, variant: "typeahead", onClick: onToggleClick, isExpanded: isOpen, isFullWidth: true, isDisabled: props.disabled },
         React.createElement(TextInputGroup, { isPlain: true, innerRef: inputGroupRef },
             React.createElement(TextInputGroupMain, { value: query, role: "combobox", onClick: onInputClick, onKeyDown: onInputKeyDown, onChange: onFilter, placeholder: t(props.placeholder || ''), isExpanded: isOpen, innerRef: textInputRef, "aria-label": `select${props.multiple ? ' multi' : ''} typeahead listbox`, "aria-controls": "account-selector-dropdown" }),
-            React.createElement(TextInputGroupUtilities, null, !isEmpty(query) && (React.createElement(Button, { icon: isFetching ? (React.createElement(LoadingIndicator, { show: true, size: "sm" })) : (React.createElement(TimesCircleIcon, { "aria-hidden": true })), variant: "plain", onClick: onClearSelection, isDisabled: isFetching, "aria-label": t('Clear') }))))));
+            React.createElement(TextInputGroupUtilities, null,
+                props.showSelectionCountBadge && props.multiple && selectedItems.length > 0 && (React.createElement(Badge, { className: "advance-search-dropdown-toggle-badge pf-v6-u-mr-sm" }, t('{{count}} selected', { count: selectedItems.length }))),
+                !isEmpty(query) && (React.createElement(Button, { icon: isFetching ? (React.createElement(LoadingIndicator, { show: true, size: "sm" })) : (React.createElement(TimesCircleIcon, { "aria-hidden": true })), variant: "plain", onClick: onClearSelection, isDisabled: isFetching, "aria-label": t('Clear') }))))));
     return (React.createElement(Select, { "data-tracking-id": "account-selector-dropdown", isOpen: isOpen, onOpenChange: () => setIsOpen(false), id: props.id, toggle: toggle, popperProps: { direction: 'down', enableFlip: false }, onSelect: (_e, v) => onSelect(v), selected: selectedItems, isScrollable: true },
         React.createElement(SelectList, null, dropdownOptions)));
 }

package/lib/esm/components/EmbeddedServiceChat/EmbeddedServiceChat.d.ts

@@ -1,4 +1,10 @@
 import './embeddedServiceChat.css';
 import { FC } from 'react';
+/**
+ * Bootstraps Salesforce Enhanced Messaging.
+ * The messaging widget (button + chat window) is rendered by the Salesforce
+ * bootstrap script; this component only triggers initialisation and shows a
+ * spinner while the script loads.
+ */
 export declare const EmbeddedServiceChat: FC;
 //# sourceMappingURL=EmbeddedServiceChat.d.ts.map

package/lib/esm/components/EmbeddedServiceChat/EmbeddedServiceChat.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EmbeddedServiceChat.d.ts","sourceRoot":"","sources":["../../../../src/components/EmbeddedServiceChat/EmbeddedServiceChat.tsx"],"names":[],"mappings":"AAAA,OAAO,2BAA2B,CAAC;AAInC,OAAc,EAAE,EAAE,EAAoB,MAAM,OAAO,CAAC;AAMpD,eAAO,MAAM,mBAAmB,EAAE,EA6HjC,CAAC"}
+{"version":3,"file":"EmbeddedServiceChat.d.ts","sourceRoot":"","sources":["../../../../src/components/EmbeddedServiceChat/EmbeddedServiceChat.tsx"],"names":[],"mappings":"AAAA,OAAO,2BAA2B,CAAC;AAGnC,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAKlC;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,EAAE,EAcjC,CAAC"}

package/lib/esm/components/EmbeddedServiceChat/EmbeddedServiceChat.js

@@ -1,55 +1,21 @@
 import './embeddedServiceChat.css';
-import { Button, ButtonVariant, Popover, PopoverPosition, Spinner } from '@patternfly/react-core';
-import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
-import React, { useRef, useState } from 'react';
-import { Trans, useTranslation } from 'react-i18next';
-import { FeatureAnnouncementKeys, NewFeaturePopoverAnnouncement, useChatInit } from '../..';
-import { ChatSVGIcon } from './ChatSVGIcon';
+import { Spinner } from '@patternfly/react-core';
+import React from 'react';
+import { createPortal } from 'react-dom';
+import { useChatInit } from '../../hooks/useChatInit';
+/**
+ * Bootstraps Salesforce Enhanced Messaging.
+ * The messaging widget (button + chat window) is rendered by the Salesforce
+ * bootstrap script; this component only triggers initialisation and shows a
+ * spinner while the script loads.
+ */
 export const EmbeddedServiceChat = () => {
-    var _a;
-    const componentRef = useRef(null);
-    const { loadingChat, isChatStarted, onStartChat, hasChatDomainsBlocked, hasBlockedByBrowser, chatServiceNotAvailable, hasBlockedByCookie, getChatFormDetails, } = useChatInit();
-    const [isBlockedErrorBoxVisible, setIsBlockedErrorBoxVisible] = useState(true);
-    const [chatClicked, setChatClicked] = useState(false);
-    const { t } = useTranslation();
-    const sessionId = (_a = getChatFormDetails().find((item) => item.label === 'SessionId')) === null || _a === void 0 ? void 0 : _a.value;
-    const shouldClose = () => {
-        setIsBlockedErrorBoxVisible(false);
-    };
-    const shouldOpen = () => {
-        setIsBlockedErrorBoxVisible(true);
-    };
-    const chatErrorMessagePopover = (param) => (React.createElement("div", { className: "chatButton chatError", id: "chat-blocked-popover-selector" },
-        React.createElement(Popover, { "aria-label": t('Cannot connect to chat support'), alertSeverityVariant: 'danger', position: PopoverPosition.top, hasAutoWidth: true, maxWidth: '420px', headerIcon: React.createElement(ExclamationCircleIcon, { className: "pf-v6-u-danger-color-100" }), headerComponent: "h1", headerContent: React.createElement(Trans, null, "Cannot connect to chat support"), bodyContent: param === 'cookie' ? (React.createElement("p", { className: "pf-v6-u-px-md" },
-                React.createElement(Trans, null,
-                    "Accept functional cookies in your",
-                    ' ',
-                    React.createElement(Button, { variant: ButtonVariant.link, isInline: true, onClick: (e) => {
-                            e.preventDefault();
-                            document.querySelector('#teconsent a[role="link"]').click();
-                        } }, "cookie preferences"),
-                    ' ',
-                    "to enable the Red Hat Chat Support, then refresh page."))) : (React.createElement("p", { className: "pf-v6-u-px-md" },
-                React.createElement(Trans, null, "There are multiple problems that can cause this error."),
-                React.createElement("br", null),
-                React.createElement("a", { href: `https://access.redhat.com/articles/313583#${hasBlockedByBrowser
-                        ? 'troubleshoot_browser'
-                        : hasChatDomainsBlocked
-                            ? 'troubleshoot_network'
-                            : ''}`, target: "_blank", rel: "noreferrer noopener" },
-                    React.createElement(Trans, null, "See a list of possible causes.")))), isVisible: isBlockedErrorBoxVisible, shouldClose: shouldClose, shouldOpen: shouldOpen },
-            React.createElement(Button, { variant: ButtonVariant.link, className: "pf-v6-u-m-0 pf-v6-u-p-0" },
-                React.createElement(ChatSVGIcon, null)))));
-    if (chatServiceNotAvailable)
+    const { loadingChat, chatServiceNotAvailable, hasBlockedByCookie } = useChatInit();
+    if (chatServiceNotAvailable || hasBlockedByCookie)
         return React.createElement(React.Fragment, null);
-    return loadingChat ? (React.createElement("div", { className: "chatButton" },
-        React.createElement(Spinner, { diameter: "28px", className: "pf-v6-u-m-xs" }))) : hasBlockedByCookie && chatClicked && document.querySelector('#teconsent a[role="link"]') !== null ? (chatErrorMessagePopover('cookie')) : (hasBlockedByBrowser || hasChatDomainsBlocked || !sessionId) && chatClicked ? (chatErrorMessagePopover()) : !isChatStarted ? (React.createElement("div", { className: "chatButton", onClick: () => {
-            setChatClicked(true);
-            if (sessionId) {
-                onStartChat();
-            }
-        }, "data-tracking-id": "embedded-service-chat", ref: componentRef, id: "chat-bot-wrapper" },
-        React.createElement(ChatSVGIcon, null),
-        React.createElement(NewFeaturePopoverAnnouncement, { "aria-label": t('Support now has a chatbot (beta). Try it if you need help with a case.'), featureName: FeatureAnnouncementKeys.CHAT_BOT, sectionRef: componentRef, bodyContent: React.createElement("div", null,
-                React.createElement(Trans, null, "Support now has a chatbot (beta). Try it if you need help with a case.")), triggerRef: () => document.getElementById('chat-bot-wrapper') }))) : (React.createElement(React.Fragment, null));
+    if (loadingChat) {
+        return createPortal(React.createElement("div", { className: "chatButton" },
+            React.createElement(Spinner, { diameter: "28px", className: "pf-v6-u-m-xs" })), document.body);
+    }
+    return React.createElement(React.Fragment, null);
 };

package/lib/esm/components/EmbeddedServiceChat/embeddedServiceChat.css

@@ -3,6 +3,7 @@
     position: fixed;
     right: 4rem;
     bottom: 1rem;
+    z-index: var(--pf-t--global--z-index--2xl, 200);
     width: 48px;
     height: 48px;
     padding: var(--global-spacer-sm, 8px);
@@ -18,54 +19,3 @@
 body:has(.pf-chatbot) .chatButton {
     display: none !important;
 }
-
-.chatError {
-    opacity: 0.7;
-}
-
-/* Requested by CCM team */
-.agent .chat-content[CLWCP-lwcchatpack_lwcchatpack] {
-    text-align: left;
-}
-
-/* Adding fowling CSS as requested by CCM team (Sudhir Panda)  */
-.embeddedServiceLiveAgentStateChat .chatSessionStartTime {
-    font-family: 'Red Hat Text', 'RedHatText', 'Overpass', Overpass, Arial, sans-serif;
-}
-.embeddedServiceLiveAgentStateChatItem.chatMessage {
-    font-family: 'Red Hat Text', 'RedHatText', 'Overpass', Overpass, Arial, sans-serif;
-}
-.embeddedServiceLiveAgentStateChatItem.chatMessage button {
-    font-family: 'Red Hat Text', 'RedHatText', 'Overpass', Overpass, Arial, sans-serif;
-}
-.embeddedServiceHelpButton .helpButton .uiButton {
-    background-color: #005290;
-    font-family: 'Arial', sans-serif;
-}
-.embeddedServiceHelpButton .helpButton .uiButton:focus {
-    outline: 1px solid #005290;
-}
-.agent .chat-content[CLWCP-lwcchatpack_lwcchatpack] {
-    text-align: left;
-    font-family: 'Red Hat Text', 'RedHatText', 'Overpass', Overpass, Arial, sans-serif;
-}
-/* red hat chat icon */
-.embeddedServiceLiveAgentStateChatAvatar.isLightningOutContext .agentIconColor0 {
-    background-image: url('https://access.redhat.com/chrome_themes/nimbus/img/red-hat-customer-portal.svg');
-    background-repeat: no-repeat;
-    background-size: 420% !important;
-    font-size: 0 !important;
-    background-color: #fff !important;
-}
-
-/* user chat bubble */
-.chasitor.chat-content[CLWCP-lwcchatpack_lwcchatpack] {
-    background: #fff !important;
-    color: #0066cc !important;
-    border: #0066cc 1px solid !important;
-}
-
-/* timeout text background color */
-.embeddedServiceSidebar .headerAnnouncement p {
-    background-color: #151515;
-}

package/lib/esm/components/SharedModals/CSSUserModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CSSUserModal.d.ts","sourceRoot":"","sources":["../../../../src/components/SharedModals/CSSUserModal.tsx"],"names":[],"mappings":"AACA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAIpD,UAAU,MAAM;IACZ,oCAAoC,EAAE,MAAM,IAAI,CAAC;IACjD,OAAO,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,YAAY,CAAC,EAAE,oCAAoC,EAAE,OAAO,EAAE,EAAE,MAAM,qBAiGrF"}
+{"version":3,"file":"CSSUserModal.d.ts","sourceRoot":"","sources":["../../../../src/components/SharedModals/CSSUserModal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAIpD,UAAU,MAAM;IACZ,oCAAoC,EAAE,MAAM,IAAI,CAAC;IACjD,OAAO,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,YAAY,CAAC,EAAE,oCAAoC,EAAE,OAAO,EAAE,EAAE,MAAM,qBAiGrF"}

package/lib/esm/components/SharedModals/CSSUserModal.js

@@ -1,4 +1,5 @@
 import { Button, Modal, ModalBody, ModalFooter, ModalHeader, ModalVariant } from '@patternfly/react-core';
+import { getCssPortalUrl } from '@rh-support/utils';
 import React, { useContext, useState } from 'react';
 import { GlobalMetadataStateContext } from '../../context/GlobalMetadataContext';
 export function CSSUserModal({ onConfirmTraditionalSupportAgreement, display }) {
@@ -8,7 +9,7 @@ export function CSSUserModal({ onConfirmTraditionalSupportAgreement, display })
     const { globalMetadataState: { loggedInUsersAccount }, } = useContext(GlobalMetadataStateContext);
     const isConfirmedStateSideSupport = (_a = loggedInUsersAccount === null || loggedInUsersAccount === void 0 ? void 0 : loggedInUsersAccount.data) === null || _a === void 0 ? void 0 : _a.hasConfirmedStatesideSupport;
     const handleCSSclick = () => {
-        window.open('https://govsupport.redhat.com/css/s/', '_self');
+        window.open(getCssPortalUrl(), '_self');
     };
     const handleTraditionalSupportClick = () => {
         setShowTraditionalSupportAgreement(true);

package/lib/esm/components/SharedModals/CloseCaseModal.d.ts

@@ -1,10 +1,10 @@
 import './CloseCaseModal.scss';
 import React from 'react';
 interface IProps {
-    onConfirm: (commentBody: string) => void;
+    onConfirm: (commentBody: string) => Promise<boolean> | boolean;
     onClose: () => void;
     caseNumber?: string;
-    isUpdating: boolean;
+    isUpdating?: boolean;
 }
 export declare function CloseCaseModal(props: IProps): React.JSX.Element;
 export {};

package/lib/esm/components/SharedModals/CloseCaseModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CloseCaseModal.d.ts","sourceRoot":"","sources":["../../../../src/components/SharedModals/CloseCaseModal.tsx"],"names":[],"mappings":"AAAA,OAAO,uBAAuB,CAAC;AAoB/B,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,UAAU,MAAM;IACZ,SAAS,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,OAAO,CAAC;CACvB;AAUD,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,qBAkL3C"}
+{"version":3,"file":"CloseCaseModal.d.ts","sourceRoot":"","sources":["../../../../src/components/SharedModals/CloseCaseModal.tsx"],"names":[],"mappings":"AAAA,OAAO,uBAAuB,CAAC;AAoB/B,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,UAAU,MAAM;IACZ,SAAS,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,OAAO,CAAC,OAAO,CAAC,GAAG,OAAO,CAAC;IAC/D,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;CACxB;AAUD,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,qBAkM3C"}

package/lib/esm/components/SharedModals/CloseCaseModal.js

@@ -24,17 +24,24 @@ const resolutionOptions = [...resolutionWithoutDescription, ...resolutionsWithDe
 export function CloseCaseModal(props) {
     const { t } = useTranslation();
     const [showTextArea, setShowTextArea] = useState(false);
+    const [isSubmitting, setIsSubmitting] = useState(false);
     const [selectedResolution, setSelectedResolution] = useState('');
     const [resolutionDescription, setResolutionDescription] = useState('');
     const [showValidationError, setShowValidationError] = useState(false);
     const isCaseListPage = !props.caseNumber;
+    const isBusy = isSubmitting || !!props.isUpdating;
+    const handleClose = () => {
+        if (!isBusy) {
+            props.onClose();
+        }
+    };
     const onResolutionChange = (option) => {
         setSelectedResolution(option.value);
         setShowValidationError(false);
         resolutionsWithDescription.includes(option.value) ? setShowTextArea(true) : setShowTextArea(false);
     };
     const getCommentBody = () => {
-        return `**Reason for closing case:** \n${selectedResolution}${resolutionsWithDescription.includes(selectedResolution) ? `. ${resolutionDescription}` : ''}`;
+        return `<p><strong>Reason for closing case:</strong></p><p>${selectedResolution}${resolutionsWithDescription.includes(selectedResolution) ? `. ${resolutionDescription}` : ''}</p>`;
     };
     // To check for required fields
     const checkForRequiredFields = () => {
@@ -52,7 +59,16 @@ export function CloseCaseModal(props) {
     const onSubmit = () => __awaiter(this, void 0, void 0, function* () {
         if (!checkForRequiredFields())
             return;
-        props.onConfirm(getCommentBody());
+        setIsSubmitting(true);
+        try {
+            const result = yield props.onConfirm(getCommentBody());
+            if (result) {
+                props.onClose();
+            }
+        }
+        finally {
+            setIsSubmitting(false);
+        }
     });
     const onDescriptionChange = (description) => {
         setShowValidationError(false);
@@ -67,7 +83,7 @@ export function CloseCaseModal(props) {
         label: t(selectedResolution),
         value: t(selectedResolution),
     };
-    return (React.createElement(Modal, { id: "case-close-modal", "aria-describedby": "case-close-modal", isOpen: true, onClose: props.onClose, variant: ModalVariant.medium },
+    return (React.createElement(Modal, { id: "case-close-modal", "aria-describedby": "case-close-modal", isOpen: true, onClose: handleClose, variant: ModalVariant.medium },
         React.createElement(ModalHeader, null,
             React.createElement("h2", null,
                 isCaseListPage && React.createElement(Trans, null, "Do you want to close the selected cases?"),
@@ -93,12 +109,12 @@ export function CloseCaseModal(props) {
                                 React.createElement(Trans, null, "All of the selected cases will have the same resolution in bulk edit."))),
                             showValidationError && !selectedResolution && (React.createElement(HelperTextItem, { variant: "error" },
                                 React.createElement(Trans, null, "Required field"))))),
-                    React.createElement(SingleSelectDropdown, { placeholder: t('Select an option that best fits'), dataTrackingId: "case-resolution", options: getDropdownOptions, selected: getSelectedDropdownOption, isDisabled: props.isUpdating, isInvalid: showValidationError && !selectedResolution, onSelect: onResolutionChange })),
+                    React.createElement(SingleSelectDropdown, { placeholder: t('Select an option that best fits'), dataTrackingId: "case-resolution", options: getDropdownOptions, selected: getSelectedDropdownOption, isDisabled: isBusy, isInvalid: showValidationError && !selectedResolution, onSelect: onResolutionChange })),
                 showTextArea && (React.createElement(FormGroup, { label: t('Please describe your resolution'), type: "text", isRequired: true, fieldId: "close-case-description" },
-                    React.createElement(TextArea, { validated: showValidationError && !resolutionDescription ? 'error' : 'default', isRequired: true, id: "close-case-description", name: "close-case-description", "aria-describedby": "close-case-description", value: resolutionDescription, placeholder: t('Please describe your resolution to help us better understand.'), onChange: (_event, description) => onDescriptionChange(description), isDisabled: props.isUpdating, resizeOrientation: "vertical" }))))),
+                    React.createElement(TextArea, { validated: showValidationError && !resolutionDescription ? 'error' : 'default', isRequired: true, id: "close-case-description", name: "close-case-description", "aria-describedby": "close-case-description", value: resolutionDescription, placeholder: t('Please describe your resolution to help us better understand.'), onChange: (_event, description) => onDescriptionChange(description), isDisabled: isBusy, resizeOrientation: "vertical" }))))),
         React.createElement(ModalFooter, null,
-            React.createElement(Button, { key: "submit-description", variant: ButtonVariant.primary, onClick: onSubmit, isLoading: props.isUpdating, isDisabled: isResolutionDescEmpty || showValidationError || props.isUpdating, "data-tracking-id": "close-case-description-modal-submit" },
+            React.createElement(Button, { key: "submit-description", variant: ButtonVariant.primary, onClick: onSubmit, isLoading: isBusy, isDisabled: isResolutionDescEmpty || showValidationError || isBusy, "data-tracking-id": "close-case-description-modal-submit" },
                 React.createElement(Trans, null, "Close case")),
-            React.createElement(Button, { key: "close-modal", variant: ButtonVariant.secondary, onClick: props.onClose, isDisabled: props.isUpdating, "data-tracking-id": "close-case-description-modal-cancel" },
+            React.createElement(Button, { key: "close-modal", variant: ButtonVariant.secondary, onClick: handleClose, isDisabled: isBusy, "data-tracking-id": "close-case-description-modal-cancel" },
                 React.createElement(Trans, null, "Cancel")))));
 }

package/lib/esm/context/CaseStatusContext.d.ts

@@ -0,0 +1,9 @@
+import React, { ReactNode } from 'react';
+export declare const CaseStatusContext: React.Context<string>;
+interface CaseStatusProviderProps {
+    caseStatus?: string;
+    children: ReactNode;
+}
+export declare function CaseStatusProvider({ caseStatus, children }: CaseStatusProviderProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=CaseStatusContext.d.ts.map

package/lib/esm/context/CaseStatusContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CaseStatusContext.d.ts","sourceRoot":"","sources":["../../../src/context/CaseStatusContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AAExD,eAAO,MAAM,iBAAiB,uBAA+C,CAAC;AAE9E,UAAU,uBAAuB;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC;CACvB;AAED,wBAAgB,kBAAkB,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,uBAAuB,qBAEnF"}

package/lib/esm/context/CaseStatusContext.js

@@ -0,0 +1,5 @@
+import React, { createContext } from 'react';
+export const CaseStatusContext = createContext(undefined);
+export function CaseStatusProvider({ caseStatus, children }) {
+    return React.createElement(CaseStatusContext.Provider, { value: caseStatus }, children);
+}