From 446fc7497c27f58fcbe9cd0f33d4ab931637fc22 Mon Sep 17 00:00:00 2001
From: vashjs <vadym.shchekotilin@gmail.com>
Date: Thu, 1 Aug 2024 16:31:36 +0200
Subject: [PATCH 1/7] UITEN-299 Rewrite all class components to functional ones
 (ui-tenant-settings module)

---
 package.json                                  |   1 +
 src/components/Period/Period.js               | 190 ++---
 src/hooks/useCampusDetails.js                 |  20 +
 src/hooks/useCampuses.js                      |  19 +
 src/hooks/useConfigurations.js                |  19 +
 src/hooks/useConfigurationsCreate.js          |  16 +
 src/hooks/useConfigurationsUpdate.js          |  16 +
 src/hooks/useInstitutionDetails.js            |  20 +
 src/hooks/useInstitutions.js                  |  19 +
 src/hooks/useLibraries.js                     |  19 +
 src/hooks/useLibraryDetails.js                |  20 +
 src/hooks/useLocationCreate.js                |  16 +
 src/hooks/useLocationDelete.js                |  16 +
 src/hooks/useLocationUpdate.js                |  16 +
 src/hooks/useLocations.js                     |  19 +
 src/hooks/useRemoteStorageConfigurations.js   |  21 +
 src/hooks/useRemoteStorageMappingDelete.js    |  16 +
 src/hooks/useRemoteStorageMappingUpdate.js    |  16 +
 src/hooks/useRemoteStorageMappings.js         |  21 +
 src/hooks/useSamlConfiguration.js             |  19 +
 src/hooks/useSamlConfigurationUpdate.js       |  16 +
 src/hooks/useSamlDownload.js                  |  24 +
 src/hooks/useServicePoints.js                 |  19 +
 src/settings/Addresses.js                     | 192 ++---
 src/settings/Bindings/Bindings.js             |  52 +-
 src/settings/Bindings/BindingsForm.js         | 139 ++--
 src/settings/Locale.js                        |  77 +-
 src/settings/LocaleForm.js                    | 263 +++---
 src/settings/LocationCampuses.js              | 255 +++---
 src/settings/LocationCampuses.test.js         | 115 ++-
 src/settings/LocationInstitutions.js          | 141 ++--
 src/settings/LocationInstitutions.test.js     |  63 +-
 src/settings/LocationLibraries.js             | 327 +++-----
 src/settings/LocationLibraries.test.js        | 111 ++-
 .../LocationLocations/LocationDetail.js       | 115 ++-
 .../LocationForm/DetailsField.js              |  99 +--
 .../LocationForm/DetailsField.test.js         |   9 +-
 .../LocationForm/LocationForm.js              | 580 ++++++-------
 .../LocationForm/LocationFormContainer.js     |  53 +-
 .../LocationFormContainer.test.js             | 270 +++---
 .../LocationForm/RemoteStorageField.js        |  13 +-
 .../LocationForm/ServicePointsFields.js       | 118 ++-
 .../LocationLocations/LocationManager.js      | 779 +++++++-----------
 .../LocationLocations/LocationManager.test.js | 233 ++----
 .../RemoteStorage/Control.js                  |  17 +-
 .../RemoteStorage/Control.test.js             |  26 +-
 .../RemoteStorage/Provider.js                 | 100 +--
 .../LocationLocations/RemoteStorageDetails.js |   3 +-
 .../LocationLocations/locationDetail.test.js  |  76 +-
 .../remoteStorageDetails.test.js              |  23 +-
 src/settings/LocationLocations/utils.js       |   8 +-
 src/settings/Plugins/PluginForm.js            | 126 ++-
 src/settings/Plugins/Plugins.js               | 153 ++--
 src/settings/Plugins/Plugins.test.js          |  67 +-
 .../ReadingRoomAccess/ReadingRoomAccess.js    |  16 +-
 .../ReadingRoomAccess.test.js                 |  13 +-
 src/settings/SSOSettings/SSOSettings.js       | 174 ++--
 src/settings/SSOSettings/SSOSettings.test.js  |  63 +-
 src/settings/SSOSettings/SamlForm.js          | 292 ++++---
 .../ServicePoints/StaffSlipEditList.js        |  36 +-
 src/settings/ServicePoints/StaffSlipList.js   |  49 +-
 src/settings/index.js                         | 228 +++--
 src/settings/index.test.js                    |  47 +-
 test/jest/__mocks__/stripesCore.mock.js       | 160 ++--
 64 files changed, 2842 insertions(+), 3417 deletions(-)
 create mode 100644 src/hooks/useCampusDetails.js
 create mode 100644 src/hooks/useCampuses.js
 create mode 100644 src/hooks/useConfigurations.js
 create mode 100644 src/hooks/useConfigurationsCreate.js
 create mode 100644 src/hooks/useConfigurationsUpdate.js
 create mode 100644 src/hooks/useInstitutionDetails.js
 create mode 100644 src/hooks/useInstitutions.js
 create mode 100644 src/hooks/useLibraries.js
 create mode 100644 src/hooks/useLibraryDetails.js
 create mode 100644 src/hooks/useLocationCreate.js
 create mode 100644 src/hooks/useLocationDelete.js
 create mode 100644 src/hooks/useLocationUpdate.js
 create mode 100644 src/hooks/useLocations.js
 create mode 100644 src/hooks/useRemoteStorageConfigurations.js
 create mode 100644 src/hooks/useRemoteStorageMappingDelete.js
 create mode 100644 src/hooks/useRemoteStorageMappingUpdate.js
 create mode 100644 src/hooks/useRemoteStorageMappings.js
 create mode 100644 src/hooks/useSamlConfiguration.js
 create mode 100644 src/hooks/useSamlConfigurationUpdate.js
 create mode 100644 src/hooks/useSamlDownload.js
 create mode 100644 src/hooks/useServicePoints.js

diff --git a/package.json b/package.json
index c1ce21e0..7f108ad2 100644
--- a/package.json
+++ b/package.json
@@ -305,6 +305,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-intl": "^6.4.4",
+    "react-query": "^3.6.0",
     "react-router-dom": "^5.2.0"
   }
 }
diff --git a/src/components/Period/Period.js b/src/components/Period/Period.js
index 9f999028..65d6b441 100644
--- a/src/components/Period/Period.js
+++ b/src/components/Period/Period.js
@@ -1,31 +1,24 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
-
-import {
-  Field,
-} from 'react-final-form';
-
-import {
-  get,
-  isEmpty,
-  isNumber,
-} from 'lodash';
+import { Field } from 'react-final-form';
+import { get, isEmpty, isNumber } from 'lodash';
 
 import {
   Col,
   Row,
   Select,
   TextField,
-  Label,
+  Label
 } from '@folio/stripes/components';
 
-import css from './Period.css';
 import {
   shortTermExpiryPeriod,
   shortTermClosedDateManagementMenu,
   longTermClosedDateManagementMenu
 } from '../../settings/ServicePoints/constants';
+import css from './Period.css';
+
 
 const validateDuration = value => {
   if (typeof value !== 'number') {
@@ -39,32 +32,19 @@ const validateDuration = value => {
   return undefined;
 };
 
-class Period extends React.Component {
-  static propTypes = {
-    fieldLabel: PropTypes.string.isRequired,
-    selectPlaceholder: PropTypes.string.isRequired,
-    dependentValuePath: PropTypes.string.isRequired,
-    inputValuePath: PropTypes.string.isRequired,
-    selectValuePath: PropTypes.string.isRequired,
-    entity: PropTypes.object.isRequired,
-    intervalPeriods: PropTypes.arrayOf(PropTypes.object),
-    changeFormValue: PropTypes.func.isRequired,
-  };
-
-  constructor(props) {
-    super(props);
-
-    this.inputRef = React.createRef();
-  }
-
-  onInputBlur = () => {
-    const {
-      inputValuePath,
-      selectValuePath,
-      entity,
-      changeFormValue,
-    } = this.props;
-
+const Period = ({
+  fieldLabel,
+  selectPlaceholder,
+  dependentValuePath,
+  inputValuePath,
+  selectValuePath,
+  entity,
+  intervalPeriods,
+  changeFormValue
+}) => {
+  const inputRef = useRef(null);
+
+  const onInputBlur = () => {
     const inputValue = get(entity, inputValuePath);
 
     if (isNumber(inputValue)) {
@@ -74,22 +54,11 @@ class Period extends React.Component {
     changeFormValue(selectValuePath, '');
   };
 
-  onInputClear = () => {
-    const {
-      inputValuePath,
-      changeFormValue,
-    } = this.props;
-
+  const onInputClear = () => {
     changeFormValue(inputValuePath, '');
   };
 
-  onSelectChange = (e) => {
-    const {
-      selectValuePath,
-      changeFormValue,
-      dependentValuePath,
-    } = this.props;
-
+  const onSelectChange = (e) => {
     changeFormValue(selectValuePath, e.target.value);
     const holdShelfClosedLibraryDateManagementValue =
       shortTermExpiryPeriod.findIndex(item => item === e.target.value) > -1
@@ -97,10 +66,10 @@ class Period extends React.Component {
         : longTermClosedDateManagementMenu[0].value;
     changeFormValue(dependentValuePath, holdShelfClosedLibraryDateManagementValue);
 
-    this.inputRef.current.focus();
+    inputRef.current.focus();
   };
 
-  transformInputValue = (value) => {
+  const transformInputValue = (value) => {
     if (isEmpty(value)) {
       return '';
     }
@@ -108,12 +77,7 @@ class Period extends React.Component {
     return Number(value);
   };
 
-  generateOptions = () => {
-    const {
-      intervalPeriods,
-      selectValuePath,
-    } = this.props;
-
+  const generateOptions = () => {
     return intervalPeriods.map(({ value, label }) => (
       <option value={value} key={`${selectValuePath}-${value}`}>
         {label}
@@ -121,57 +85,59 @@ class Period extends React.Component {
     ));
   };
 
-  render() {
-    const {
-      fieldLabel,
-      selectPlaceholder,
-      inputValuePath,
-      selectValuePath,
-    } = this.props;
-
-    return (
-      <>
-        <Row className={css.labelRow}>
-          <Col xs={12}>
-            <Label className={css.label} required>
-              <FormattedMessage id={fieldLabel} />
-            </Label>
-          </Col>
-        </Row>
-        <Row>
-          <Col xs={2}>
-            <Field
-              data-test-period-duration
-              type="number"
-              name={inputValuePath}
-              component={TextField}
-              forwardRef
-              inputRef={this.inputRef}
-              onBlur={this.onInputBlur}
-              onClearField={this.onInputClear}
-              parse={this.transformInputValue}
-              validate={validateDuration}
-            />
-          </Col>
-          <Col xs={2}>
-            <FormattedMessage id={selectPlaceholder}>
-              {placeholder => (
-                <Field
-                  data-test-period-interval
-                  name={selectValuePath}
-                  component={Select}
-                  placeholder={placeholder}
-                  onChange={this.onSelectChange}
-                >
-                  {this.generateOptions()}
-                </Field>
-              )}
-            </FormattedMessage>
-          </Col>
-        </Row>
-      </>
-    );
-  }
-}
+  return (
+    <>
+      <Row className={css.labelRow}>
+        <Col xs={12}>
+          <Label className={css.label} required>
+            <FormattedMessage id={fieldLabel} />
+          </Label>
+        </Col>
+      </Row>
+      <Row>
+        <Col xs={2}>
+          <Field
+            data-test-period-duration
+            type="number"
+            name={inputValuePath}
+            component={TextField}
+            forwardRef
+            inputRef={inputRef}
+            onBlur={onInputBlur}
+            onClearField={onInputClear}
+            parse={transformInputValue}
+            validate={validateDuration}
+          />
+        </Col>
+        <Col xs={2}>
+          <FormattedMessage id={selectPlaceholder}>
+            {placeholder => (
+              <Field
+                data-test-period-interval
+                name={selectValuePath}
+                component={Select}
+                placeholder={placeholder}
+                onChange={onSelectChange}
+              >
+                {generateOptions()}
+              </Field>
+            )}
+          </FormattedMessage>
+        </Col>
+      </Row>
+    </>
+  );
+};
+
+Period.propTypes = {
+  fieldLabel: PropTypes.string.isRequired,
+  selectPlaceholder: PropTypes.string.isRequired,
+  dependentValuePath: PropTypes.string.isRequired,
+  inputValuePath: PropTypes.string.isRequired,
+  selectValuePath: PropTypes.string.isRequired,
+  entity: PropTypes.object.isRequired,
+  intervalPeriods: PropTypes.arrayOf(PropTypes.object),
+  changeFormValue: PropTypes.func.isRequired,
+};
 
 export default Period;
diff --git a/src/hooks/useCampusDetails.js b/src/hooks/useCampusDetails.js
new file mode 100644
index 00000000..5d1901b0
--- /dev/null
+++ b/src/hooks/useCampusDetails.js
@@ -0,0 +1,20 @@
+import { useNamespace, useOkapiKy } from '@folio/stripes/core';
+import { useQuery } from 'react-query';
+
+export const CAMPUS_DETAILS = 'CAMPUS_DETAILS';
+
+export const useCampusDetails = ({ id, searchParams }) => {
+  const ky = useOkapiKy();
+  const [namespaceKey] = useNamespace({ key: CAMPUS_DETAILS });
+
+  const { data, isLoading: isCampusLoading } = useQuery({
+    queryKey: [CAMPUS_DETAILS, namespaceKey, id, searchParams],
+    queryFn: () => ky.get(`location-units/campuses/${id}`, { searchParams }).json(),
+    enabled: !!id,
+  });
+
+  return {
+    campus: data,
+    isCampusLoading,
+  };
+};
diff --git a/src/hooks/useCampuses.js b/src/hooks/useCampuses.js
new file mode 100644
index 00000000..2b8c83a4
--- /dev/null
+++ b/src/hooks/useCampuses.js
@@ -0,0 +1,19 @@
+import { useNamespace, useOkapiKy } from '@folio/stripes/core';
+import { useQuery } from 'react-query';
+
+export const CAMPUSES = 'CAMPUSES';
+
+export const useCampuses = ({ searchParams }) => {
+  const ky = useOkapiKy();
+  const [namespaceKey] = useNamespace({ key: CAMPUSES });
+
+  const { data, isLoading: isCampusesLoading } = useQuery({
+    queryKey: [CAMPUSES, namespaceKey, searchParams],
+    queryFn: () => ky.get('location-units/campuses', { searchParams }).json(),
+  });
+
+  return {
+    campuses: data?.loccamps || [],
+    isCampusesLoading,
+  };
+};
diff --git a/src/hooks/useConfigurations.js b/src/hooks/useConfigurations.js
new file mode 100644
index 00000000..3718f7ab
--- /dev/null
+++ b/src/hooks/useConfigurations.js
@@ -0,0 +1,19 @@
+import { useNamespace, useOkapiKy } from '@folio/stripes/core';
+import { useQuery } from 'react-query';
+
+export const CONFIGURATIONS = 'CONFIGURATIONS';
+
+export const useConfigurations = ({ searchParams }) => {
+  const ky = useOkapiKy();
+  const [namespaceKey] = useNamespace({ key: CONFIGURATIONS });
+
+  const { data, isLoading: isConfigsLoading } = useQuery({
+    queryKey: [CONFIGURATIONS, namespaceKey, searchParams],
+    queryFn: () => ky.get('configurations/entries', { searchParams }).json(),
+  });
+
+  return {
+    configs: data?.configs || [],
+    isConfigsLoading,
+  };
+};
diff --git a/src/hooks/useConfigurationsCreate.js b/src/hooks/useConfigurationsCreate.js
new file mode 100644
index 00000000..7d767d97
--- /dev/null
+++ b/src/hooks/useConfigurationsCreate.js
@@ -0,0 +1,16 @@
+import { useMutation } from 'react-query';
+import { useOkapiKy } from '@folio/stripes/core';
+
+export const useConfigurationsCreate = (options) => {
+  const ky = useOkapiKy();
+
+  const { mutateAsync: createConfiguration, isLoading: isCreatingConfiguration } = useMutation({
+    mutationFn: ({ data }) => ky.post('configurations/entries', { json: data }).json(),
+    ...options,
+  });
+
+  return {
+    createConfiguration,
+    isCreatingConfiguration,
+  };
+};
diff --git a/src/hooks/useConfigurationsUpdate.js b/src/hooks/useConfigurationsUpdate.js
new file mode 100644
index 00000000..ce3054f9
--- /dev/null
+++ b/src/hooks/useConfigurationsUpdate.js
@@ -0,0 +1,16 @@
+import { useMutation } from 'react-query';
+import { useOkapiKy } from '@folio/stripes/core';
+
+export const useConfigurationsUpdate = (options) => {
+  const ky = useOkapiKy();
+
+  const { mutateAsync: updateConfiguration, isLoading: isUpdatingConfiguration } = useMutation({
+    mutationFn: ({ id, data }) => ky.put(`configurations/entries/${id}`, { json: data }).json(),
+    ...options,
+  });
+
+  return {
+    updateConfiguration,
+    isUpdatingConfiguration,
+  };
+};
diff --git a/src/hooks/useInstitutionDetails.js b/src/hooks/useInstitutionDetails.js
new file mode 100644
index 00000000..854cc7bc
--- /dev/null
+++ b/src/hooks/useInstitutionDetails.js
@@ -0,0 +1,20 @@
+import { useNamespace, useOkapiKy } from '@folio/stripes/core';
+import { useQuery } from 'react-query';
+
+export const INSTITUTION_DETAILS = 'INSTITUTION_DETAILS';
+
+export const useInstitutionDetails = ({ id, searchParams }) => {
+  const ky = useOkapiKy();
+  const [namespaceKey] = useNamespace({ key: INSTITUTION_DETAILS });
+
+  const { data, isLoading: isInstitutionLoading } = useQuery({
+    queryKey: [INSTITUTION_DETAILS, namespaceKey, id, searchParams],
+    queryFn: () => ky.get(`location-units/institutions/${id}`, { searchParams }).json(),
+    enabled: !!id,
+  });
+
+  return {
+    institution: data,
+    isInstitutionLoading,
+  };
+};
diff --git a/src/hooks/useInstitutions.js b/src/hooks/useInstitutions.js
new file mode 100644
index 00000000..8d45cfaf
--- /dev/null
+++ b/src/hooks/useInstitutions.js
@@ -0,0 +1,19 @@
+import { useNamespace, useOkapiKy } from '@folio/stripes/core';
+import { useQuery } from 'react-query';
+
+export const INSTITUTIONS = 'INSTITUTIONS';
+
+export const useInstitutions = ({ searchParams }) => {
+  const ky = useOkapiKy();
+  const [namespaceKey] = useNamespace({ key: INSTITUTIONS });
+
+  const { data, isLoading: isInstitutionsLoading } = useQuery({
+    queryKey: [INSTITUTIONS, namespaceKey, searchParams],
+    queryFn: () => ky.get('location-units/institutions', { searchParams }).json(),
+  });
+
+  return {
+    institutions: data?.locinsts || [],
+    isInstitutionsLoading,
+  };
+};
diff --git a/src/hooks/useLibraries.js b/src/hooks/useLibraries.js
new file mode 100644
index 00000000..5088f9a8
--- /dev/null
+++ b/src/hooks/useLibraries.js
@@ -0,0 +1,19 @@
+import { useNamespace, useOkapiKy } from '@folio/stripes/core';
+import { useQuery } from 'react-query';
+
+export const LIBRARIES = 'LIBRARIES';
+
+export const useLibraries = ({ searchParams }) => {
+  const ky = useOkapiKy();
+  const [namespaceKey] = useNamespace({ key: LIBRARIES });
+
+  const { data, isLoading: isLibrariesLoading } = useQuery({
+    queryKey: [LIBRARIES, namespaceKey, searchParams],
+    queryFn: () => ky.get('location-units/libraries', { searchParams }).json(),
+  });
+
+  return {
+    libraries: data?.loclibs || [],
+    isLibrariesLoading,
+  };
+};
diff --git a/src/hooks/useLibraryDetails.js b/src/hooks/useLibraryDetails.js
new file mode 100644
index 00000000..fcde282f
--- /dev/null
+++ b/src/hooks/useLibraryDetails.js
@@ -0,0 +1,20 @@
+import { useNamespace, useOkapiKy } from '@folio/stripes/core';
+import { useQuery } from 'react-query';
+
+export const LIBRARY_DETAILS = 'LIBRARY_DETAILS';
+
+export const useLibraryDetails = ({ id, searchParams }) => {
+  const ky = useOkapiKy();
+  const [namespaceKey] = useNamespace({ key: LIBRARY_DETAILS });
+
+  const { data, isLoading: isCampusLoading } = useQuery({
+    queryKey: [LIBRARY_DETAILS, namespaceKey, id, searchParams],
+    queryFn: () => ky.get(`location-units/libraries/${id}`, { searchParams }).json(),
+    enabled: !!id,
+  });
+
+  return {
+    library: data,
+    isCampusLoading,
+  };
+};
diff --git a/src/hooks/useLocationCreate.js b/src/hooks/useLocationCreate.js
new file mode 100644
index 00000000..9d2ecaf0
--- /dev/null
+++ b/src/hooks/useLocationCreate.js
@@ -0,0 +1,16 @@
+import { useMutation } from 'react-query';
+import { useOkapiKy } from '@folio/stripes/core';
+
+export const useLocationCreate = (options) => {
+  const ky = useOkapiKy();
+
+  const { mutateAsync: createLocation, isLoading: isCreatingLocation } = useMutation({
+    mutationFn: ({ data }) => ky.post('locations', { json: data }).json(),
+    ...options,
+  });
+
+  return {
+    createLocation,
+    isCreatingLocation,
+  };
+};
diff --git a/src/hooks/useLocationDelete.js b/src/hooks/useLocationDelete.js
new file mode 100644
index 00000000..4ab77069
--- /dev/null
+++ b/src/hooks/useLocationDelete.js
@@ -0,0 +1,16 @@
+import { useMutation } from 'react-query';
+import { useOkapiKy } from '@folio/stripes/core';
+
+export const useLocationDelete = (options) => {
+  const ky = useOkapiKy();
+
+  const { mutateAsync: deleteLocation, isLoading: isDeletingLocation } = useMutation({
+    mutationFn: ({ locationId }) => ky.delete(`locations/${locationId}`),
+    ...options,
+  });
+
+  return {
+    deleteLocation,
+    isDeletingLocation,
+  };
+};
diff --git a/src/hooks/useLocationUpdate.js b/src/hooks/useLocationUpdate.js
new file mode 100644
index 00000000..51bf595d
--- /dev/null
+++ b/src/hooks/useLocationUpdate.js
@@ -0,0 +1,16 @@
+import { useMutation } from 'react-query';
+import { useOkapiKy } from '@folio/stripes/core';
+
+export const useLocationUpdate = (options) => {
+  const ky = useOkapiKy();
+
+  const { mutateAsync: updateLocation, isLoading: isUpdatingLocation } = useMutation({
+    mutationFn: ({ locationId, data }) => ky.put(`locations/${locationId}`, { json: data }).json(),
+    ...options,
+  });
+
+  return {
+    updateLocation,
+    isUpdatingLocation,
+  };
+};
diff --git a/src/hooks/useLocations.js b/src/hooks/useLocations.js
new file mode 100644
index 00000000..94f2c033
--- /dev/null
+++ b/src/hooks/useLocations.js
@@ -0,0 +1,19 @@
+import { useNamespace, useOkapiKy } from '@folio/stripes/core';
+import { useQuery } from 'react-query';
+
+export const LOCATIONS = 'LOCATIONS';
+
+export const useLocations = ({ searchParams }) => {
+  const ky = useOkapiKy();
+  const [namespaceKey] = useNamespace({ key: LOCATIONS });
+
+  const { data, isLoading: isLocationsLoading } = useQuery({
+    queryKey: [LOCATIONS, namespaceKey, searchParams],
+    queryFn: () => ky.get('locations', { searchParams }).json(),
+  });
+
+  return {
+    locations: data?.locations || [],
+    isLocationsLoading,
+  };
+};
diff --git a/src/hooks/useRemoteStorageConfigurations.js b/src/hooks/useRemoteStorageConfigurations.js
new file mode 100644
index 00000000..8786c284
--- /dev/null
+++ b/src/hooks/useRemoteStorageConfigurations.js
@@ -0,0 +1,21 @@
+import { useNamespace, useOkapiKy } from '@folio/stripes/core';
+import { useQuery } from 'react-query';
+
+export const REMOTE_STORAGE_CONFIGURATIONS = 'REMOTE_STORAGE_CONFIGURATIONS';
+
+export const useRemoteStorageConfigurations = ({ searchParams, options = {} }) => {
+  const ky = useOkapiKy();
+  const [namespaceKey] = useNamespace({ key: REMOTE_STORAGE_CONFIGURATIONS });
+
+  const { data, isLoading: isConfigurationsLoading, isError: isConfigurationsError } = useQuery({
+    queryKey: [namespaceKey, searchParams],
+    queryFn: () => ky.get('remote-storage/configurations', { searchParams }).json(),
+    ...options,
+  });
+
+  return {
+    configurations: data?.configurations || [],
+    isConfigurationsLoading,
+    isConfigurationsError,
+  };
+};
diff --git a/src/hooks/useRemoteStorageMappingDelete.js b/src/hooks/useRemoteStorageMappingDelete.js
new file mode 100644
index 00000000..fc4dcc99
--- /dev/null
+++ b/src/hooks/useRemoteStorageMappingDelete.js
@@ -0,0 +1,16 @@
+import { useMutation } from 'react-query';
+import { useOkapiKy } from '@folio/stripes/core';
+
+export const useRemoteStorageMappingDelete = (options) => {
+  const ky = useOkapiKy();
+
+  const { mutateAsync: deleteMapping, isLoading: isDeletingMapping } = useMutation({
+    mutationFn: ({ folioLocationId }) => ky.delete(`remote-storage/mappings/${folioLocationId}`),
+    ...options,
+  });
+
+  return {
+    deleteMapping,
+    isDeletingMapping,
+  };
+};
diff --git a/src/hooks/useRemoteStorageMappingUpdate.js b/src/hooks/useRemoteStorageMappingUpdate.js
new file mode 100644
index 00000000..102c069a
--- /dev/null
+++ b/src/hooks/useRemoteStorageMappingUpdate.js
@@ -0,0 +1,16 @@
+import { useMutation } from 'react-query';
+import { useOkapiKy } from '@folio/stripes/core';
+
+export const useRemoteStorageMappingUpdate = (options) => {
+  const ky = useOkapiKy();
+
+  const { mutateAsync: updateMapping, isLoading: isUpdatingMapping } = useMutation({
+    mutationFn: ({ data }) => ky.post('remote-storage/mappings', { json: data }).json(),
+    ...options,
+  });
+
+  return {
+    updateMapping,
+    isUpdatingMapping,
+  };
+};
diff --git a/src/hooks/useRemoteStorageMappings.js b/src/hooks/useRemoteStorageMappings.js
new file mode 100644
index 00000000..c9198227
--- /dev/null
+++ b/src/hooks/useRemoteStorageMappings.js
@@ -0,0 +1,21 @@
+import { useNamespace, useOkapiKy } from '@folio/stripes/core';
+import { useQuery } from 'react-query';
+
+export const REMOTE_STORAGE_MAPPINGS = 'REMOTE_STORAGE_MAPPINGS';
+
+export const useRemoteStorageMappings = ({ searchParams, options = {} }) => {
+  const ky = useOkapiKy();
+  const [namespaceKey] = useNamespace({ key: REMOTE_STORAGE_MAPPINGS });
+
+  const { data, isLoading: isMappingsLoading, isError: isMappingsError } = useQuery({
+    queryKey: [namespaceKey, searchParams],
+    queryFn: () => ky.get('remote-storage/mappings', { searchParams }).json(),
+    ...options,
+  });
+
+  return {
+    mappings: data?.mappings || [],
+    isMappingsLoading,
+    isMappingsError,
+  };
+};
diff --git a/src/hooks/useSamlConfiguration.js b/src/hooks/useSamlConfiguration.js
new file mode 100644
index 00000000..acce413d
--- /dev/null
+++ b/src/hooks/useSamlConfiguration.js
@@ -0,0 +1,19 @@
+import { useNamespace, useOkapiKy } from '@folio/stripes/core';
+import { useQuery } from 'react-query';
+
+export const SAML_CONFIGURATION = 'SAML_CONFIGURATION';
+
+export const useSamlConfiguration = ({ searchParams } = {}) => {
+  const ky = useOkapiKy();
+  const [namespaceKey] = useNamespace({ key: SAML_CONFIGURATION });
+
+  const { data, isLoading: isSamlConfigurationLoading } = useQuery({
+    queryKey: [SAML_CONFIGURATION, namespaceKey, searchParams],
+    queryFn: () => ky.get('saml/configuration', { searchParams }).json(),
+  });
+
+  return {
+    samlConfig: data || {},
+    isSamlConfigurationLoading,
+  };
+};
diff --git a/src/hooks/useSamlConfigurationUpdate.js b/src/hooks/useSamlConfigurationUpdate.js
new file mode 100644
index 00000000..4f839271
--- /dev/null
+++ b/src/hooks/useSamlConfigurationUpdate.js
@@ -0,0 +1,16 @@
+import { useMutation } from 'react-query';
+import { useOkapiKy } from '@folio/stripes/core';
+
+export const useSamlConfigurationUpdate = (options) => {
+  const ky = useOkapiKy();
+
+  const { mutateAsync: updateSamlConfiguration, isLoading: isUpdatingSamlConfiguration } = useMutation({
+    mutationFn: ({ data }) => ky.put('saml/configuration', { json: data }).json(),
+    ...options,
+  });
+
+  return {
+    updateSamlConfiguration,
+    isUpdatingSamlConfiguration,
+  };
+};
diff --git a/src/hooks/useSamlDownload.js b/src/hooks/useSamlDownload.js
new file mode 100644
index 00000000..cd2c72ef
--- /dev/null
+++ b/src/hooks/useSamlDownload.js
@@ -0,0 +1,24 @@
+import { useNamespace, useOkapiKy } from '@folio/stripes/core';
+import { useQuery } from 'react-query';
+
+export const SAML_DOWNLOAD = 'SAML_DOWNLOAD';
+
+export const useSamlDownload = (options) => {
+  const ky = useOkapiKy();
+  const [namespaceKey] = useNamespace({ key: SAML_DOWNLOAD });
+
+  const { data, isLoading: isSamlDownloadLoading, refetch } = useQuery(
+    {
+      queryKey: [SAML_DOWNLOAD, namespaceKey],
+      queryFn: () => ky.get('saml/regenerate').json(),
+      enabled: false,
+      ...options
+    }
+  );
+
+  return {
+    fileData: data,
+    downloadFile: refetch,
+    isSamlDownloadLoading,
+  };
+};
diff --git a/src/hooks/useServicePoints.js b/src/hooks/useServicePoints.js
new file mode 100644
index 00000000..8b2e144c
--- /dev/null
+++ b/src/hooks/useServicePoints.js
@@ -0,0 +1,19 @@
+import { useNamespace, useOkapiKy } from '@folio/stripes/core';
+import { useQuery } from 'react-query';
+
+export const SERVICE_POINTS = 'SERVICE_POINTS';
+
+export const useServicePoints = ({ searchParams }) => {
+  const ky = useOkapiKy();
+  const [namespaceKey] = useNamespace({ key: SERVICE_POINTS });
+
+  const { data, isLoading: isServicePointsLoading } = useQuery({
+    queryKey: [SERVICE_POINTS, namespaceKey, searchParams],
+    queryFn: () => ky.get('service-points', { searchParams }).json(),
+  });
+
+  return {
+    servicePoints: data?.servicepoints || [],
+    isServicePointsLoading,
+  };
+};
diff --git a/src/settings/Addresses.js b/src/settings/Addresses.js
index 7db95b82..19752b3a 100644
--- a/src/settings/Addresses.js
+++ b/src/settings/Addresses.js
@@ -1,17 +1,14 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import {
-  FormattedMessage,
-  injectIntl,
-} from 'react-intl';
+import React from 'react';
+import { FormattedMessage, useIntl } from 'react-intl';
 import { Field } from 'redux-form';
 
 import { ControlledVocab } from '@folio/stripes/smart-components';
 import { TextArea, TextField } from '@folio/stripes/components';
+import { TitleManager, useStripes } from '@folio/stripes/core';
 
-import { TitleManager } from '@folio/stripes/core';
 import css from './Addresses.css';
 
+
 const moduleName = 'TENANT';
 const configName = 'tenant.addresses';
 
@@ -24,24 +21,12 @@ const translations = {
 };
 
 const fieldComponents = {
-  address: ({ fieldProps }) => {
-    return (
-      <Field
-        {...fieldProps}
-        component={TextArea}
-        fullWidth
-      />
-    );
-  },
-  name: ({ fieldProps }) => {
-    return (
-      <Field
-        {...fieldProps}
-        component={TextField}
-        fullWidth
-      />
-    );
-  },
+  address: ({ fieldProps }) => (
+    <Field {...fieldProps} component={TextArea} fullWidth />
+  ),
+  name: ({ fieldProps }) => (
+    <Field {...fieldProps} component={TextField} fullWidth />
+  ),
 };
 
 const parseRow = row => {
@@ -64,71 +49,19 @@ const formatter = {
   address: item => (<div className={css.addressWrapper}>{item.address}</div>),
 };
 
-class Addresses extends Component {
-  static manifest = Object.freeze({
-    values: {
-      type: 'okapi',
-      path: 'configurations/entries',
-      records: 'configs',
-      throwErrors: false,
-      clientGeneratePk: true,
-      PUT: {
-        path: 'configurations/entries/%{activeRecord.id}',
-      },
-      DELETE: {
-        path: 'configurations/entries/%{activeRecord.id}',
-      },
-      GET: {
-        params: {
-          query: `(module=${moduleName} and configName=${configName})`,
-          limit: '500',
-        },
-      },
-    },
-    updaterIds: [],
-    activeRecord: {},
-    updaters: {
-      type: 'okapi',
-      records: 'users',
-      path: 'users',
-      GET: {
-        params: {
-          query: (queryParams, pathComponents, resourceValues) => {
-            if (resourceValues.updaterIds && resourceValues.updaterIds.length) {
-              return `(${resourceValues.updaterIds.join(' or ')})`;
-            }
-            return null;
-          },
-        }
-      }
-    },
-  });
 
-  static propTypes = {
-    intl: PropTypes.object,
-    stripes: PropTypes.shape({
-      connect: PropTypes.func.isRequired,
-      hasPerm: PropTypes.func.isRequired,
-    }).isRequired,
-    resources: PropTypes.shape({
-      addresses: PropTypes.object,
-    }).isRequired,
-    mutator: PropTypes.shape({
-      values: PropTypes.object,
-      updaters: PropTypes.object,
-      activeRecord: PropTypes.object,
-      updaterIds: PropTypes.object,
-    }),
-  };
+const Addresses = (props) => {
+  const intl = useIntl();
+  const stripes = useStripes();
 
-  onCreate = item => ({
+  const onCreate = item => ({
     value: JSON.stringify(item),
     module: moduleName,
     configName,
     code: `ADDRESS_${(new Date()).valueOf()}`,
   });
 
-  onUpdate = item => ({
+  const onUpdate = item => ({
     code: item.code,
     id: item.id,
     module: item.module,
@@ -139,33 +72,70 @@ class Addresses extends Component {
     }),
   });
 
-  render() {
-    return (
-      <TitleManager page={this.props.intl.formatMessage({ id: 'ui-tenant-settings.settings.address.title' })}>
-        <ControlledVocab
-          {...this.props}
-          dataKey={undefined}
-          baseUrl="configurations/entries"
-          records="configs"
-          parseRow={parseRow}
-          label={this.props.intl.formatMessage({ id: 'ui-tenant-settings.settings.addresses.label' })}
-          translations={translations}
-          objectLabel={objectLabel}
-          visibleFields={visibleFields}
-          columnMapping={columnMapping}
-          hiddenFields={hiddenFields}
-          fieldComponents={fieldComponents}
-          nameKey="name"
-          id="addresses"
-          sortby="name"
-          preCreateHook={this.onCreate}
-          preUpdateHook={this.onUpdate}
-          formatter={formatter}
-          editable={this.props.stripes.hasPerm('ui-tenant-settings.settings.addresses')}
-        />
-      </TitleManager>
-    );
-  }
-}
+  return (
+    <TitleManager page={intl.formatMessage({ id: 'ui-tenant-settings.settings.address.title' })}>
+      <ControlledVocab
+        {...props}
+        dataKey={undefined}
+        baseUrl="configurations/entries"
+        records="configs"
+        parseRow={parseRow}
+        label={intl.formatMessage({ id: 'ui-tenant-settings.settings.addresses.label' })}
+        translations={translations}
+        objectLabel={objectLabel}
+        visibleFields={visibleFields}
+        columnMapping={columnMapping}
+        hiddenFields={hiddenFields}
+        fieldComponents={fieldComponents}
+        nameKey="name"
+        id="addresses"
+        sortby="name"
+        preCreateHook={onCreate}
+        preUpdateHook={onUpdate}
+        formatter={formatter}
+        editable={stripes.hasPerm('ui-tenant-settings.settings.addresses')}
+      />
+    </TitleManager>
+  );
+};
+
+Addresses.manifest = Object.freeze({
+  values: {
+    type: 'okapi',
+    path: 'configurations/entries',
+    records: 'configs',
+    throwErrors: false,
+    clientGeneratePk: true,
+    PUT: {
+      path: 'configurations/entries/%{activeRecord.id}',
+    },
+    DELETE: {
+      path: 'configurations/entries/%{activeRecord.id}',
+    },
+    GET: {
+      params: {
+        query: `(module=${moduleName} and configName=${configName})`,
+        limit: '500',
+      },
+    },
+  },
+  updaterIds: [],
+  activeRecord: {},
+  updaters: {
+    type: 'okapi',
+    records: 'users',
+    path: 'users',
+    GET: {
+      params: {
+        query: (queryParams, pathComponents, resourceValues) => {
+          if (resourceValues.updaterIds && resourceValues.updaterIds.length) {
+            return `(${resourceValues.updaterIds.join(' or ')})`;
+          }
+          return null;
+        },
+      },
+    },
+  },
+});
 
-export default injectIntl(Addresses);
+export default Addresses;
diff --git a/src/settings/Bindings/Bindings.js b/src/settings/Bindings/Bindings.js
index 577a643b..ef4d9d06 100644
--- a/src/settings/Bindings/Bindings.js
+++ b/src/settings/Bindings/Bindings.js
@@ -1,39 +1,33 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+
 import { ConfigManager } from '@folio/stripes/smart-components';
+import { useStripes } from '@folio/stripes/core';
 
 import BindingsForm from './BindingsForm';
 
-class Bindings extends React.Component {
-  static propTypes = {
-    stripes: PropTypes.shape({
-      setBindings: PropTypes.func.isRequired,
-      connect: PropTypes.func.isRequired,
-    }).isRequired,
-    label: PropTypes.node.isRequired,
+
+const Bindings = ({ label }) => {
+  const stripes = useStripes();
+  const ConnectedConfigManager = stripes.connect(ConfigManager);
+
+  const setBindings = (config) => {
+    stripes.setBindings(JSON.parse(config.value));
   };
 
-  constructor(props) {
-    super(props);
-    this.configManager = props.stripes.connect(ConfigManager);
-    this.setBindings = this.setBindings.bind(this);
-  }
-
-  setBindings(config) {
-    this.props.stripes.setBindings(JSON.parse(config.value));
-  }
-
-  render() {
-    return (
-      <this.configManager
-        label={this.props.label}
-        moduleName="ORG"
-        configName="bindings"
-        onAfterSave={this.setBindings}
-        configFormComponent={BindingsForm}
-      />
-    );
-  }
-}
+  return (
+    <ConnectedConfigManager
+      label={label}
+      moduleName="ORG"
+      configName="bindings"
+      onAfterSave={setBindings}
+      configFormComponent={BindingsForm}
+    />
+  );
+};
+
+Bindings.propTypes = {
+  label: PropTypes.node.isRequired,
+};
 
 export default Bindings;
diff --git a/src/settings/Bindings/BindingsForm.js b/src/settings/Bindings/BindingsForm.js
index bd046be5..4764d831 100644
--- a/src/settings/Bindings/BindingsForm.js
+++ b/src/settings/Bindings/BindingsForm.js
@@ -12,7 +12,7 @@ import {
   TextArea,
 } from '@folio/stripes/components';
 import stripesFinalForm from '@folio/stripes/final-form';
-import { stripesShape, withStripes } from '@folio/stripes/core';
+import { useStripes } from '@folio/stripes/core';
 
 import styles from './Bindings.css';
 
@@ -28,85 +28,80 @@ function validate(values) {
   return errors;
 }
 
-class BindingsForm extends React.Component {
-  getFooter() {
-    const { pristine, submitting } = this.props;
 
-    return (
-      <PaneFooter
-        renderEnd={(
-          <Button
-            type="submit"
-            disabled={(pristine || submitting)}
-            buttonStyle="primary"
-          >
-            <FormattedMessage id="stripes-core.button.save" />
-          </Button>
-        )}
-      />
-    );
-  }
+const BindingsForm = ({ handleSubmit, pristine, submitting, label }) => {
+  const stripes = useStripes();
+
+  const getFooter = () => (
+    <PaneFooter
+      renderEnd={(
+        <Button
+          type="submit"
+          disabled={pristine || submitting}
+          buttonStyle="primary"
+        >
+          <FormattedMessage id="stripes-core.button.save" />
+        </Button>
+      )}
+    />
+  );
 
-  render() {
-    const { handleSubmit, label, stripes } = this.props;
-    const actionList = stripes.actionNames.map((name, index) => (
-      <span key={name}>
-        <>
-          <tt>{name}</tt>
-          {index < stripes.actionNames.length - 1 ? ', ' : '.'}
-        </>
-      </span>
-    ));
+  const actionList = stripes.actionNames.map((name, index) => (
+    <span key={name}>
+      <>
+        <tt>{name}</tt>
+        {index < stripes.actionNames.length - 1 ? ', ' : '.'}
+      </>
+    </span>
+  ));
 
-    return (
-      <form
-        id="bindings-form"
-        onSubmit={handleSubmit}
-        className={styles.bindingsForm}
+  return (
+    <form
+      id="bindings-form"
+      onSubmit={handleSubmit}
+      className={styles.bindingsForm}
+    >
+      <Pane
+        defaultWidth="fill"
+        fluidContentWidth
+        paneTitle={label}
+        footer={getFooter()}
       >
-        <Pane
-          defaultWidth="fill"
-          fluidContentWidth
-          paneTitle={label}
-          footer={this.getFooter()}
-        >
-          <Row>
-            <Col xs={12}>
-              <div>
-                <FormattedMessage id="ui-tenant-settings.settings.keyBindings" />
-              </div>
-              <p>
-                <FormattedMessage
-                  id="ui-tenant-settings.settings.bindings.provide"
-                  values={{
-                    actionNames: <span>{actionList}</span>,
-                  }}
-                />
-              </p>
-              <p>
-                <a href="https://github.com/folio-org/ui-tenant-settings/blob/master/src/settings/Bindings/example-key-bindings.json">[example]</a>
-              </p>
-              <br />
-              <Field
-                label={label}
-                component={TextArea}
-                name="bindings"
-                id="bindings"
-                fullWidth
-                rows="12"
+        <Row>
+          <Col xs={12}>
+            <div>
+              <FormattedMessage id="ui-tenant-settings.settings.keyBindings" />
+            </div>
+            <p>
+              <FormattedMessage
+                id="ui-tenant-settings.settings.bindings.provide"
+                values={{
+                  actionNames: <span>{actionList}</span>,
+                }}
               />
-            </Col>
-          </Row>
-        </Pane>
-      </form>
-    );
-  }
-}
+            </p>
+            <p>
+              <a href="https://github.com/folio-org/ui-tenant-settings/blob/master/src/settings/Bindings/example-key-bindings.json">[example]</a>
+            </p>
+            <br />
+            <Field
+              label={label}
+              component={TextArea}
+              name="bindings"
+              id="bindings"
+              fullWidth
+              rows="12"
+            />
+          </Col>
+        </Row>
+      </Pane>
+    </form>
+  );
+};
 
 BindingsForm.propTypes = {
   handleSubmit: PropTypes.func.isRequired,
   pristine: PropTypes.bool,
-  stripes: stripesShape.isRequired,
   submitting: PropTypes.bool,
   label: PropTypes.node,
 };
@@ -114,4 +109,4 @@ BindingsForm.propTypes = {
 export default stripesFinalForm({
   validate,
   navigationCheck: true,
-})(withStripes(BindingsForm));
+})(BindingsForm);
diff --git a/src/settings/Locale.js b/src/settings/Locale.js
index 6a2505b7..d5fdfab5 100644
--- a/src/settings/Locale.js
+++ b/src/settings/Locale.js
@@ -1,56 +1,49 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+
 import { ConfigManager } from '@folio/stripes/smart-components';
+import { TitleManager, useStripes } from '@folio/stripes/core';
 
-import { injectIntl } from 'react-intl';
-import { TitleManager } from '@folio/stripes/core';
 import LocaleForm from './LocaleForm';
 import { parseSerializedLocale, serializeLocale } from './localeHelpers';
 
-class Locale extends React.Component {
-  static propTypes = {
-    stripes: PropTypes.shape({
-      setCurrency: PropTypes.func.isRequired,
-      setLocale: PropTypes.func.isRequired,
-      setTimezone: PropTypes.func.isRequired,
-      connect: PropTypes.func.isRequired,
-    }).isRequired,
-    label: PropTypes.node.isRequired,
-    intl: PropTypes.object,
-  };
 
-  constructor(props) {
-    super(props);
-    this.configManager = props.stripes.connect(ConfigManager);
-    this.afterSave = this.afterSave.bind(this);
-  }
+const Locale = ({ label, ...rest }) => {
+  const intl = useIntl();
+  const stripes = useStripes();
 
-  afterSave(setting) {
+  const ConnectedConfigManager = stripes.connect(ConfigManager);
+
+  const afterSave = (setting) => {
     const localeValues = JSON.parse(setting.value);
     const { locale, timezone, currency } = localeValues;
 
     setTimeout(() => {
-      if (locale) this.props.stripes.setLocale(locale);
-      if (timezone) this.props.stripes.setTimezone(timezone);
-      if (currency) this.props.stripes.setCurrency(currency);
+      if (locale) stripes.setLocale(locale);
+      if (timezone) stripes.setTimezone(timezone);
+      if (currency) stripes.setCurrency(currency);
     }, 500);
-  }
-
-  render() {
-    return (
-      <TitleManager page={this.props.intl.formatMessage({ id: 'ui-tenant-settings.settings.locale.title' })}>
-        <this.configManager
-          label={this.props.label}
-          moduleName="ORG"
-          configName="localeSettings"
-          onBeforeSave={serializeLocale}
-          onAfterSave={this.afterSave}
-          configFormComponent={LocaleForm}
-          getInitialValues={parseSerializedLocale}
-        />
-      </TitleManager>
-    );
-  }
-}
-
-export default injectIntl(Locale);
+  };
+
+  return (
+    <TitleManager page={intl.formatMessage({ id: 'ui-tenant-settings.settings.locale.title' })}>
+      <ConnectedConfigManager
+        label={label}
+        moduleName="ORG"
+        configName="localeSettings"
+        onBeforeSave={serializeLocale}
+        onAfterSave={afterSave}
+        configFormComponent={LocaleForm}
+        getInitialValues={parseSerializedLocale}
+        {...rest}
+      />
+    </TitleManager>
+  );
+};
+
+Locale.propTypes = {
+  label: PropTypes.node.isRequired,
+};
+
+export default Locale;
diff --git a/src/settings/LocaleForm.js b/src/settings/LocaleForm.js
index c5d263e0..5660e7a5 100644
--- a/src/settings/LocaleForm.js
+++ b/src/settings/LocaleForm.js
@@ -1,10 +1,9 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import {
   createIntl,
   createIntlCache,
-  FormattedMessage,
-  injectIntl,
+  FormattedMessage, useIntl,
 } from 'react-intl';
 import { Field } from 'react-final-form';
 
@@ -24,49 +23,24 @@ import {
   IfPermission,
   supportedLocales,
   supportedNumberingSystems,
-  withStripes,
+  useStripes,
 } from '@folio/stripes/core';
 
 import styles from './Locale.css';
 
-const timezoneOptions = timezones.map(timezone => (
-  {
-    value: timezone.value,
-    label: timezone.value,
-  }
-));
-
-/**
- * localesList: list of available locales suitable for a Select
- * label contains language in context's locale and in iteree's locale
- * e.g. given the context's locale is `en` and the keys `ar` and `zh-CN` show:
- *     Arabic / العربية
- *     Chinese (China) / 中文（中国）
- * e.g. given the context's locale is `ar` and the keys `ar` and `zh-CN` show:
- *     العربية / العربية
- *     الصينية (الصين) / 中文（中国）
- *
- * @param {object} intl react-intl object in the current context's locale
- * @returns {array} array of {value, label} suitable for a Select
- */
+
+const timezoneOptions = timezones.map(timezone => ({
+  value: timezone.value,
+  label: timezone.value,
+}));
+
 const localesList = (intl) => {
-  // This is optional but highly recommended
-  // since it prevents memory leak
   const cache = createIntlCache();
 
-  // error handler if an intl context cannot be created,
-  // i.e. if the browser is missing support for the requested locale
-  const logLocaleError = (e) => {
-    console.warn(e); // eslint-disable-line
-  };
-
-  // iterate through the locales list to build an array of { value, label } objects
   const locales = supportedLocales.map(l => {
-    // intl instance with locale of current iteree
     const lIntl = createIntl({
       locale: l,
       messages: {},
-      onError: logLocaleError,
     },
     cache);
 
@@ -79,24 +53,10 @@ const localesList = (intl) => {
   return locales.sort((a, b) => a.label.localeCompare(b.label));
 };
 
-/**
- * numberingSystemsList: list of available systems, suitable for a Select
- * label contains the name and the digits zero-nine in the given system
- * e.g. given the system is `latn` show:
- *     latn (0 1 2 3 4 5 6 7 8 9)
- * e.g. given the system is `arab` show:
- *     arab (٠ ١ ٢ ٣ ٤ ٥ ٦ ٧ ٨ ٩)
- * More info on numbering systems:
- * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/numberingSystem
-
- * @returns {array} array of {value, label} suitable for a Select
- */
 const numberingSystemsList = () => {
-  // This is optional but highly recommended
-  // since it prevents memory leak
   const cache = createIntlCache();
 
-  const formats = supportedNumberingSystems.map(f => {
+  return supportedNumberingSystems.map(f => {
     const lIntl = createIntl({
       locale: `en-u-nu-${f}`,
       messages: {},
@@ -108,136 +68,123 @@ const numberingSystemsList = () => {
       label: `${f} (${Array.from(Array(10).keys()).map(i => lIntl.formatNumber(i)).join(' ')})`,
     };
   });
-
-  return formats;
 };
-class LocaleForm extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.isReadOnly = !props.stripes.hasPerm('ui-tenant-settings.settings.locale');
-    this.localesOptions = localesList(props.intl);
-    this.numberingSystemOptions = [
-      { value: '', label: '---' },
-      ...numberingSystemsList()
-    ];
-  }
-
-  getFooter() {
-    const { pristine, submitting } = this.props;
-
-    return !this.isReadOnly && (
+
+const LocaleForm = ({ handleSubmit, pristine, submitting, label }) => {
+  const intl = useIntl();
+  const stripes = useStripes();
+
+  const isReadOnly = !stripes.hasPerm('ui-tenant-settings.settings.locale');
+  const localesOptions = useMemo(() => localesList(intl), [intl]);
+  const numberingSystemOptions = useMemo(() => [
+    { value: '', label: '---' },
+    ...numberingSystemsList(),
+  ], []);
+
+  const getFooter = () => (
+    !isReadOnly && (
       <PaneFooter
         renderEnd={(
           <Button
             type="submit"
-            disabled={(pristine || submitting)}
+            disabled={pristine || submitting}
             buttonStyle="primary"
           >
             <FormattedMessage id="stripes-core.button.save" />
           </Button>
         )}
       />
-    );
-  }
-
-  render() {
-    const { handleSubmit, label, intl: { formatMessage } } = this.props;
-
-    return (
-      <form
-        id="locale-form"
-        onSubmit={handleSubmit}
-        className={styles.localeForm}
+    )
+  );
+
+  return (
+    <form
+      id="locale-form"
+      onSubmit={handleSubmit}
+      className={styles.localeForm}
+    >
+      <Pane
+        defaultWidth="fill"
+        fluidContentWidth
+        paneTitle={label}
+        footer={getFooter()}
       >
-        <Pane
-          defaultWidth="fill"
-          fluidContentWidth
-          paneTitle={label}
-          footer={this.getFooter()}
-        >
-          <IfPermission perm="ui-developer.settings.locale">
-            <Row>
-              <Col xs={12}>
-                <p>
-                  <FormattedMessage id="ui-tenant-settings.settings.locale.localeWarning" values={{ label: <FormattedMessage id="ui-tenant-settings.settings.locale.changeSessionLocale" /> }} />
-                </p>
-                <div>
-                  <TextLink to="/settings/developer/locale">
-                    <FormattedMessage id="ui-tenant-settings.settings.locale.changeSessionLocale" />
-                  </TextLink>
-                </div>
-              </Col>
-            </Row>
-          </IfPermission>
-          <Row>
-            <Col xs={12} id="select-locale">
-              <Field
-                readOnly={this.isReadOnly}
-                component={Select}
-                id="locale"
-                name="locale"
-                placeholder="---"
-                dataOptions={this.localesOptions}
-                label={formatMessage({ id: 'ui-tenant-settings.settings.localization' })}
-              />
-            </Col>
-          </Row>
-          <Row>
-            <Col xs={12} id="select-numbering-system">
-              <Field
-                readOnly={this.isReadOnly}
-                component={Select}
-                id="numberingSystem"
-                name="numberingSystem"
-                dataOptions={this.numberingSystemOptions}
-                label={formatMessage({ id: 'ui-tenant-settings.settings.numberingSystem' })}
-              />
-            </Col>
-          </Row>
+        <IfPermission perm="ui-developer.settings.locale">
           <Row>
-            <Col xs={12} id="select-timezone">
-              <Field
-                readOnly={this.isReadOnly}
-                component={Select}
-                id="timezone"
-                name="timezone"
-                placeholder="---"
-                dataOptions={timezoneOptions}
-                label={formatMessage({ id: 'ui-tenant-settings.settings.timeZonePicker' })}
-              />
+            <Col xs={12}>
+              <p>
+                <FormattedMessage id="ui-tenant-settings.settings.locale.localeWarning" values={{ label: <FormattedMessage id="ui-tenant-settings.settings.locale.changeSessionLocale" /> }} />
+              </p>
+              <div>
+                <TextLink to="/settings/developer/locale">
+                  <FormattedMessage id="ui-tenant-settings.settings.locale.changeSessionLocale" />
+                </TextLink>
+              </div>
             </Col>
           </Row>
-          <Row>
-            <Col xs={12} id="select-currency">
-              <Field
-                readOnly={this.isReadOnly}
-                component={CurrencySelect}
-                id="currency"
-                name="currency"
-                placeholder="---"
-                label={formatMessage({ id: 'ui-tenant-settings.settings.primaryCurrency' })}
-              />
-            </Col>
-          </Row>
-
-        </Pane>
-      </form>
-    );
-  }
-}
+        </IfPermission>
+        <Row>
+          <Col xs={12} id="select-locale">
+            <Field
+              readOnly={isReadOnly}
+              component={Select}
+              id="locale"
+              name="locale"
+              placeholder="---"
+              dataOptions={localesOptions}
+              label={intl.formatMessage({ id: 'ui-tenant-settings.settings.localization' })}
+            />
+          </Col>
+        </Row>
+        <Row>
+          <Col xs={12} id="select-numbering-system">
+            <Field
+              readOnly={isReadOnly}
+              component={Select}
+              id="numberingSystem"
+              name="numberingSystem"
+              dataOptions={numberingSystemOptions}
+              label={intl.formatMessage({ id: 'ui-tenant-settings.settings.numberingSystem' })}
+            />
+          </Col>
+        </Row>
+        <Row>
+          <Col xs={12} id="select-timezone">
+            <Field
+              readOnly={isReadOnly}
+              component={Select}
+              id="timezone"
+              name="timezone"
+              placeholder="---"
+              dataOptions={timezoneOptions}
+              label={intl.formatMessage({ id: 'ui-tenant-settings.settings.timeZonePicker' })}
+            />
+          </Col>
+        </Row>
+        <Row>
+          <Col xs={12} id="select-currency">
+            <Field
+              readOnly={isReadOnly}
+              component={CurrencySelect}
+              id="currency"
+              name="currency"
+              placeholder="---"
+              label={intl.formatMessage({ id: 'ui-tenant-settings.settings.primaryCurrency' })}
+            />
+          </Col>
+        </Row>
+      </Pane>
+    </form>
+  );
+};
 
 LocaleForm.propTypes = {
   handleSubmit: PropTypes.func.isRequired,
   pristine: PropTypes.bool,
   submitting: PropTypes.bool,
   label: PropTypes.node,
-  intl: PropTypes.object,
-  stripes: PropTypes.shape({
-    hasPerm: PropTypes.func.isRequired,
-  })
 };
 
 export default stripesFinalForm({
   navigationCheck: true,
-})(withStripes(injectIntl(LocaleForm)));
+})(LocaleForm);
diff --git a/src/settings/LocationCampuses.js b/src/settings/LocationCampuses.js
index e8ba0f27..edd4f4fb 100644
--- a/src/settings/LocationCampuses.js
+++ b/src/settings/LocationCampuses.js
@@ -1,20 +1,17 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import {
-  FormattedMessage,
-  injectIntl,
-} from 'react-intl';
+import React, { useState, useCallback } from 'react';
+import { FormattedMessage, useIntl } from 'react-intl';
+
 import { ControlledVocab } from '@folio/stripes/smart-components';
-import {
-  Select,
-  TextLink,
-} from '@folio/stripes/components';
+import { Select, TextLink } from '@folio/stripes/components';
+import { TitleManager, useStripes } from '@folio/stripes/core';
 
-import { TitleManager } from '@folio/stripes/core';
 import locationCodeValidator from './locationCodeValidator';
 import composeValidators from '../util/composeValidators';
-import css from './LocationInstitutions.css';
 import { CAMPUS_ID_LIBRARIES, INSTITUTION_ID_CAMPUS, INSTITUTION_ID_LIBRARIES } from '../constants';
+import { useLibraries } from '../hooks/useLibraries';
+import { useInstitutions } from '../hooks/useInstitutions';
+import css from './LocationInstitutions.css';
+
 
 const translations = {
   cannotDeleteTermHeader: 'ui-tenant-settings.settings.location.campuses.cannotDeleteTermHeader',
@@ -24,89 +21,32 @@ const translations = {
   termWillBeDeleted: 'ui-tenant-settings.settings.location.campuses.termWillBeDeleted',
 };
 
-class LocationCampuses extends React.Component {
-  static manifest = {
-    institutions: {
-      type: 'okapi',
-      records: 'locinsts',
-      path: 'location-units/institutions?query=cql.allRecords=1 sortby name&limit=100',
-      accumulate: true,
-    },
-    libraries: {
-      type: 'okapi',
-      path: 'location-units/libraries',
-      params: {
-        query: 'cql.allRecords=1 sortby name',
-        limit: '1000',
-      },
-      records: 'loclibs',
-      accumulate: true,
+
+const LocationCampuses = (props) => {
+  const stripes = useStripes();
+  const { formatMessage } = useIntl();
+  const [institutionId, setInstitutionId] = useState(sessionStorage.getItem(INSTITUTION_ID_CAMPUS) || null);
+
+  const hasAllLocationPerms = stripes.hasPerm('ui-tenant-settings.settings.location');
+  const ConnectedControlledVocab = stripes.connect(ControlledVocab);
+
+  const { institutions } = useInstitutions({
+    searchParams: {
+      limit: 100,
+      query: 'cql.allRecords=1 sortby name',
     },
-  };
-
-  static propTypes = {
-    stripes: PropTypes.shape({
-      connect: PropTypes.func.isRequired,
-      hasPerm: PropTypes.func.isRequired
-    }).isRequired,
-    resources: PropTypes.shape({
-      institutions: PropTypes.shape({
-        records: PropTypes.arrayOf(PropTypes.object),
-      }),
-      locationsPerCampus: PropTypes.shape({
-        records: PropTypes.arrayOf(PropTypes.object),
-      }),
-      libraries: PropTypes.shape({
-        records: PropTypes.arrayOf(PropTypes.object),
-      })
-    }),
-    intl: PropTypes.object,
-    mutator: PropTypes.shape({
-      institutions: PropTypes.shape({
-        GET: PropTypes.func.isRequired,
-        reset: PropTypes.func.isRequired,
-      }),
-      locationsPerCampus: PropTypes.shape({
-        GET: PropTypes.func.isRequired,
-        reset: PropTypes.func.isRequired,
-      }),
-    }),
-  };
-
-  constructor(props) {
-    super(props);
-    this.connectedControlledVocab = props.stripes.connect(ControlledVocab);
-    this.hasAllLocationPerms = props.stripes.hasPerm('ui-tenant-settings.settings.location');
-    this.numberOfObjectsFormatter = this.numberOfObjectsFormatter.bind(this);
-
-    this.state = {
-      institutionId: null,
-    };
-  }
+  });
 
-  /**
-   * Refresh lookup tables when the component mounts. Fetches in the manifest
-   * will only run once (in the constructor) but because this object may be
-   * unmounted/remounted without being destroyed/recreated, the lookup tables
-   * will be stale if they change between unmounting/remounting.
-   */
-  componentDidMount() {
-    const institutionId = sessionStorage.getItem(INSTITUTION_ID_CAMPUS);
-    this.setState({ institutionId });
-    ['institutions', 'libraries'].forEach(i => {
-      this.props.mutator[i].reset();
-      this.props.mutator[i].GET();
-    });
-  }
+  const { libraries } = useLibraries({ searchParams: {
+    limit: 1000,
+    query: 'cql.allRecords=1 sortby name',
+  } });
 
-  numberOfObjectsFormatter = (item) => {
-    const records = (this.props.resources.libraries || {}).records || [];
-    const numberOfObjects = records.reduce((count, loc) => {
-      return loc.campusId === item.id ? count + 1 : count;
-    }, 0);
+  const numberOfObjectsFormatter = useCallback((item) => {
+    const numberOfObjects = libraries.reduce((count, loc) => (loc.campusId === item.id ? count + 1 : count), 0);
 
     const onNumberOfObjectsClick = () => {
-      sessionStorage.setItem(INSTITUTION_ID_LIBRARIES, this.state.institutionId);
+      sessionStorage.setItem(INSTITUTION_ID_LIBRARIES, institutionId);
       sessionStorage.setItem(CAMPUS_ID_LIBRARIES, item.id);
     };
 
@@ -118,81 +58,74 @@ class LocationCampuses extends React.Component {
         to="./location-libraries"
       >
         {numberOfObjects}
-      </TextLink>);
-  }
+      </TextLink>
+    );
+  }, [libraries, institutionId]);
 
-  onChangeInstitution = (e) => {
+  const onChangeInstitution = useCallback((e) => {
     const value = e.target.value;
-    this.setState({ institutionId: value });
-
+    setInstitutionId(value);
     sessionStorage.setItem(INSTITUTION_ID_CAMPUS, value);
-  }
+  }, []);
 
-  render() {
-    const institutions = [];
-    (((this.props.resources.institutions || {}).records || []).forEach(i => {
-      institutions.push(
-        <option value={i.id} key={i.id}>
-          {i.name}
-          {i.code ? ` (${i.code})` : ''}
-        </option>
-      );
-    }));
-
-    if (!institutions.length) {
-      return <div data-testid="institutuins-empty" />;
-    }
-
-    const rowFilter = (
-      <Select
-        label={<FormattedMessage id="ui-tenant-settings.settings.location.institutions.institution" />}
-        id="institutionSelect"
-        name="institutionSelect"
-        onChange={this.onChangeInstitution}
-        value={this.state.institutionId}
-      >
-        <FormattedMessage id="ui-tenant-settings.settings.location.institutions.selectInstitution">
-          {selectText => (
-            <option>{selectText}</option>
-          )}
-        </FormattedMessage>
-        {institutions}
-      </Select>
-    );
+  const institutionOptions = institutions.map(i => (
+    <option value={i.id} key={i.id}>
+      {i.name}
+      {i.code ? ` (${i.code})` : ''}
+    </option>
+  ));
 
-    return (
-      <TitleManager page={this.props.intl.formatMessage({ id: 'ui-tenant-settings.settings.location.campuses.title' })}>
-        <this.connectedControlledVocab
-          {...this.props}
-        // We have to unset the dataKey to prevent the props.resources in
-        // <ControlledVocab> from being overwritten by the props.resources here.
-          dataKey={undefined}
-          baseUrl="location-units/campuses"
-          records="loccamps"
-          rowFilter={rowFilter}
-          rowFilterFunction={(row) => row.institutionId === this.state.institutionId}
-          label={this.props.intl.formatMessage({ id: 'ui-tenant-settings.settings.location.campuses' })}
-          translations={translations}
-          objectLabel={<FormattedMessage id="ui-tenant-settings.settings.location.libraries" />}
-          visibleFields={['name', 'code']}
-          columnMapping={{
-            name: <FormattedMessage id="ui-tenant-settings.settings.location.campuses.campus" />,
-            code: <FormattedMessage id="ui-tenant-settings.settings.location.code" />,
-          }}
-          formatter={{ numberOfObjects: this.numberOfObjectsFormatter }}
-          nameKey="group"
-          id="campuses"
-          preCreateHook={(item) => ({ ...item, institutionId: this.state.institutionId })}
-          listSuppressor={() => !this.state.institutionId}
-          listSuppressorText={<FormattedMessage id="ui-tenant-settings.settings.location.campuses.missingSelection" />}
-          sortby="name"
-          validate={composeValidators(locationCodeValidator.validate)}
-          editable={this.hasAllLocationPerms}
-          canCreate={this.hasAllLocationPerms}
-        />
-      </TitleManager>
-    );
+  if (!institutionOptions.length) {
+    return <div data-testid="institutions-empty" />;
   }
-}
 
-export default injectIntl(LocationCampuses);
+  const rowFilter = (
+    <Select
+      label={<FormattedMessage id="ui-tenant-settings.settings.location.institutions.institution" />}
+      id="institutionSelect"
+      name="institutionSelect"
+      onChange={onChangeInstitution}
+      value={institutionId}
+    >
+      <FormattedMessage id="ui-tenant-settings.settings.location.institutions.selectInstitution">
+        {selectText => (
+          <option value="">{selectText}</option>
+        )}
+      </FormattedMessage>
+      {institutionOptions}
+    </Select>
+  );
+
+  return (
+    <TitleManager page={formatMessage({ id: 'ui-tenant-settings.settings.location.campuses.title' })}>
+      <ConnectedControlledVocab
+        {...props}
+        dataKey={undefined}
+        baseUrl="location-units/campuses"
+        records="loccamps"
+        rowFilter={rowFilter}
+        rowFilterFunction={(row) => row.institutionId === institutionId}
+        label={formatMessage({ id: 'ui-tenant-settings.settings.location.campuses' })}
+        translations={translations}
+        objectLabel={<FormattedMessage id="ui-tenant-settings.settings.location.libraries" />}
+        visibleFields={['name', 'code']}
+        columnMapping={{
+          name: <FormattedMessage id="ui-tenant-settings.settings.location.campuses.campus" />,
+          code: <FormattedMessage id="ui-tenant-settings.settings.location.code" />,
+        }}
+        formatter={{ numberOfObjects: numberOfObjectsFormatter }}
+        nameKey="group"
+        id="campuses"
+        preCreateHook={(item) => ({ ...item, institutionId })}
+        listSuppressor={() => !institutionId}
+        listSuppressorText={<FormattedMessage id="ui-tenant-settings.settings.location.campuses.missingSelection" />}
+        sortby="name"
+        validate={composeValidators(locationCodeValidator.validate)}
+        editable={hasAllLocationPerms}
+        canCreate={hasAllLocationPerms}
+      />
+    </TitleManager>
+  );
+};
+
+export default LocationCampuses;
diff --git a/src/settings/LocationCampuses.test.js b/src/settings/LocationCampuses.test.js
index 58905add..ca8727d2 100644
--- a/src/settings/LocationCampuses.test.js
+++ b/src/settings/LocationCampuses.test.js
@@ -1,14 +1,16 @@
 import React from 'react';
-
+import { QueryClient, QueryClientProvider } from 'react-query';
 import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-import '../../test/jest/__mocks__';
-import buildStripes from '../../test/jest/__new_mocks__/stripesCore.mock';
 import { renderWithRouter } from '../../test/jest/helpers';
-
 import LocationCampuses from './LocationCampuses';
 
+import '../../test/jest/__mocks__';
+import { useInstitutions } from '../hooks/useInstitutions';
+import { useLibraries } from '../hooks/useLibraries';
+
+
 jest.mock('@folio/stripes-smart-components/lib/ControlledVocab', () => jest.fn(({
   rowFilter,
   label,
@@ -40,78 +42,69 @@ jest.mock('@folio/stripes-smart-components/lib/ControlledVocab', () => jest.fn((
   </>
 )));
 
-const STRIPES = buildStripes();
-
-const resourcesMock = {
-  institutions: {
-    records: [
-      { code: 'KU',
+jest.mock('../hooks/useInstitutions', () => ({
+  useInstitutions: jest.fn(() => ({
+    institutions: [
+      {
+        code: 'KU',
         id: '40ee00ca-a518-4b49-be01-0638d0a4ac57',
-        name: 'Københavns Universitet' }
+        name: 'Københavns Universitet'
+      }
+    ],
+  })),
+}));
+
+jest.mock('../hooks/useLibraries', () => ({
+  useLibraries: jest.fn(() => ({
+    libraries: [
+      {
+        'id': '5d78803e-ca04-4b4a-aeae-2c63b924518b',
+        'name': 'Datalogisk Institut',
+        'code': 'DI',
+        'campusId': '62cf76b7-cca5-4d33-9217-edf42ce1a848',
+        'metadata': {
+          'createdDate': '2023-06-23T02:10:45.756+00:00',
+          'updatedDate': '2023-06-23T02:10:45.756+00:00'
+        }
+      },
+      {
+        'id': 'c2549bb4-19c7-4fcc-8b52-39e612fb7dbe',
+        'name': 'Online',
+        'code': 'E',
+        'campusId': '470ff1dd-937a-4195-bf9e-06bcfcd135df',
+        'metadata': {
+          'createdDate': '2023-06-23T02:10:45.756+00:00',
+          'updatedDate': '2023-06-23T02:10:45.756+00:00'
+        }
+      }
     ]
-  },
-  libraries: {
-    records:
-          [
-            {
-              'id': '5d78803e-ca04-4b4a-aeae-2c63b924518b',
-              'name': 'Datalogisk Institut',
-              'code': 'DI',
-              'campusId': '62cf76b7-cca5-4d33-9217-edf42ce1a848',
-              'metadata': {
-                'createdDate': '2023-06-23T02:10:45.756+00:00',
-                'updatedDate': '2023-06-23T02:10:45.756+00:00'
-              }
-            },
-            {
-              'id': 'c2549bb4-19c7-4fcc-8b52-39e612fb7dbe',
-              'name': 'Online',
-              'code': 'E',
-              'campusId': '470ff1dd-937a-4195-bf9e-06bcfcd135df',
-              'metadata': {
-                'createdDate': '2023-06-23T02:10:45.756+00:00',
-                'updatedDate': '2023-06-23T02:10:45.756+00:00'
-              }
-            }
-
-          ]
-  }
-};
-
-const mutatorMock = {
-  libraries: {
-    GET: jest.fn(() => Promise.resolve()),
-    reset: jest.fn(() => Promise.resolve()),
-  },
-  institutions: {
-    GET: jest.fn(() => Promise.resolve()),
-    reset: jest.fn(() => Promise.resolve()),
-  },
-};
-
-const renderLocationCampuses = (resources = {}) => renderWithRouter(
-  <LocationCampuses
-    mutator={mutatorMock}
-    resources={resources}
-    stripes={STRIPES}
-  />
+  })),
+}));
+
+const renderLocationCampuses = () => renderWithRouter(
+  <QueryClientProvider client={new QueryClient()}>
+    <LocationCampuses />
+  </QueryClientProvider>
 );
 
 
 describe('LocationCampuses', () => {
   it('should render LocationCampuses with empty resources', async () => {
+    useInstitutions.mockImplementationOnce(() => ({ institutions: [] }));
+    useLibraries.mockImplementationOnce(() => ({ libraries: [] }));
+
     renderLocationCampuses();
 
-    expect(screen.getByTestId('institutuins-empty')).toBeVisible();
+    expect(screen.getByTestId('institutions-empty')).toBeVisible();
   });
   it('should render LocationCampuses', async () => {
-    renderLocationCampuses(resourcesMock);
+    renderLocationCampuses();
 
     expect(renderLocationCampuses).toBeDefined();
   });
 
   it('should render LocationCampuses changed option value', async () => {
-    renderLocationCampuses(resourcesMock);
+    renderLocationCampuses();
 
     const checkboxInstitution = screen.getByRole('combobox');
 
@@ -123,7 +116,7 @@ describe('LocationCampuses', () => {
   });
 
   it('should render LocationCampuses changed option value and call click', async () => {
-    renderLocationCampuses(resourcesMock);
+    renderLocationCampuses();
 
     const checkboxInstitution = screen.getByRole('combobox');
 
diff --git a/src/settings/LocationInstitutions.js b/src/settings/LocationInstitutions.js
index 7f081385..aa609aaf 100644
--- a/src/settings/LocationInstitutions.js
+++ b/src/settings/LocationInstitutions.js
@@ -1,18 +1,15 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import {
-  FormattedMessage,
-  injectIntl,
-} from 'react-intl';
+import { FormattedMessage, useIntl } from 'react-intl';
 
 import { ControlledVocab } from '@folio/stripes/smart-components';
-
 import { TextLink } from '@folio/stripes/components';
-import { TitleManager } from '@folio/stripes/core';
+import { TitleManager, useStripes } from '@folio/stripes/core';
+
 import composeValidators from '../util/composeValidators';
 import locationCodeValidator from './locationCodeValidator';
-import css from './LocationInstitutions.css';
 import { INSTITUTION_ID_CAMPUS } from '../constants';
+import { useCampuses } from '../hooks/useCampuses';
+import css from './LocationInstitutions.css';
 
 const translations = {
   cannotDeleteTermHeader: 'ui-tenant-settings.settings.location.institutions.cannotDeleteTermHeader',
@@ -22,54 +19,20 @@ const translations = {
   termWillBeDeleted: 'ui-tenant-settings.settings.location.institutions.termWillBeDeleted',
 };
 
-class LocationInstitutions extends React.Component {
-  static manifest = Object.freeze({
-    campuses: {
-      type: 'okapi',
-      records: 'loccamps',
-      path: 'location-units/campuses?query=cql.allRecords=1 sortby name&limit=2000',
-      accumulate: true,
-    },
-  });
 
-  static propTypes = {
-    intl: PropTypes.object,
-    stripes: PropTypes.shape({
-      connect: PropTypes.func.isRequired,
-      hasPerm: PropTypes.func.isRequired,
-    }).isRequired,
-    resources: PropTypes.shape({
-      campuses: PropTypes.object,
-    }).isRequired,
-    mutator: PropTypes.shape({
-      campuses: PropTypes.shape({
-        GET: PropTypes.func.isRequired,
-        reset: PropTypes.func.isRequired,
-      }),
-    }),
-  };
-
-  constructor(props) {
-    super(props);
-    this.hasAllLocationPerms = props.stripes.hasPerm('ui-tenant-settings.settings.location');
-    this.connectedControlledVocab = props.stripes.connect(ControlledVocab);
-    this.numberOfObjectsFormatter = this.numberOfObjectsFormatter.bind(this);
-  }
+const LocationInstitutions = (props) => {
+  const stripes = useStripes();
+  const { formatMessage } = useIntl();
+  const hasAllLocationPerms = stripes.hasPerm('ui-tenant-settings.settings.location');
+  const ConnectedControlledVocab = stripes.connect(ControlledVocab);
 
-  /**
-   * Refresh lookup tables when the component mounts. Fetches in the manifest
-   * will only run once (in the constructor) but because this object may be
-   * unmounted/remounted without being destroyed/recreated, the lookup tables
-   * will be stale if they change between unmounting/remounting.
-   */
-  componentDidMount() {
-    this.props.mutator.campuses.reset();
-    this.props.mutator.campuses.GET();
-  }
+  const { campuses } = useCampuses({ searchParams: {
+    limit: 1000,
+    query: 'cql.allRecords=1 sortby name',
+  } });
 
-  numberOfObjectsFormatter = (item) => {
-    const records = (this.props.resources.campuses || {}).records || [];
-    const numberOfObjects = records.reduce((count, loc) => {
+  const numberOfObjectsFormatter = (item) => {
+    const numberOfObjects = campuses.reduce((count, loc) => {
       return loc.institutionId === item.id ? count + 1 : count;
     }, 0);
 
@@ -84,42 +47,42 @@ class LocationInstitutions extends React.Component {
         to="./location-campuses"
       >
         {numberOfObjects}
-      </TextLink>);
-  }
+      </TextLink>
+    );
+  };
 
-  render() {
-    const formatter = {
-      numberOfObjects: this.numberOfObjectsFormatter,
-    };
+  const formatter = {
+    numberOfObjects: numberOfObjectsFormatter,
+  };
 
-    return (
-      <TitleManager stripes={this.props.stripes} page={this.props.intl.formatMessage({ id: 'ui-tenant-settings.settings.location.institutions.title' })}>
-        <this.connectedControlledVocab
-          {...this.props}
-        // We have to unset the dataKey to prevent the props.resources in
-        // <ControlledVocab> from being overwritten by the props.resources here.
-          dataKey={undefined}
-          baseUrl="location-units/institutions"
-          records="locinsts"
-          label={this.props.intl.formatMessage({ id: 'ui-tenant-settings.settings.location.institutions' })}
-          translations={translations}
-          objectLabel={<FormattedMessage id="ui-tenant-settings.settings.location.campuses" />}
-          visibleFields={['name', 'code']}
-          columnMapping={{
-            name: <FormattedMessage id="ui-tenant-settings.settings.location.institutions.institution" />,
-            code: <FormattedMessage id="ui-tenant-settings.settings.location.code" />,
-          }}
-          formatter={formatter}
-          nameKey="name"
-          id="institutions"
-          sortby="name"
-          validate={composeValidators(locationCodeValidator.validate)}
-          editable={this.hasAllLocationPerms}
-          canCreate={this.hasAllLocationPerms}
-        />
-      </TitleManager>
-    );
-  }
-}
+  return (
+    <TitleManager
+      stripes={stripes}
+      page={formatMessage({ id: 'ui-tenant-settings.settings.location.institutions.title' })}
+    >
+      <ConnectedControlledVocab
+        {...props}
+        dataKey={undefined}
+        baseUrl="location-units/institutions"
+        records="locinsts"
+        label={formatMessage({ id: 'ui-tenant-settings.settings.location.institutions' })}
+        translations={translations}
+        objectLabel={<FormattedMessage id="ui-tenant-settings.settings.location.campuses" />}
+        visibleFields={['name', 'code']}
+        columnMapping={{
+          name: <FormattedMessage id="ui-tenant-settings.settings.location.institutions.institution" />,
+          code: <FormattedMessage id="ui-tenant-settings.settings.location.code" />,
+        }}
+        formatter={formatter}
+        nameKey="name"
+        id="institutions"
+        sortby="name"
+        validate={composeValidators(locationCodeValidator.validate)}
+        editable={hasAllLocationPerms}
+        canCreate={hasAllLocationPerms}
+      />
+    </TitleManager>
+  );
+};
 
-export default injectIntl(LocationInstitutions);
+export default LocationInstitutions;
diff --git a/src/settings/LocationInstitutions.test.js b/src/settings/LocationInstitutions.test.js
index 3a1c2402..696fb3c7 100644
--- a/src/settings/LocationInstitutions.test.js
+++ b/src/settings/LocationInstitutions.test.js
@@ -1,9 +1,19 @@
 import React from 'react';
 import { screen } from '@testing-library/react';
 
+import { QueryClient, QueryClientProvider } from 'react-query';
 import LocationInstitutions from './LocationInstitutions';
 import { renderWithRouter } from '../../test/jest/helpers';
 
+
+const mockCampuses = [
+  {
+    'id' : '1',
+    'name' : 'Københavns Universitet',
+    'code' : 'KU',
+  }
+];
+
 jest.mock('@folio/stripes-smart-components/lib/ControlledVocab', () => jest.fn(({
   formatter,
   label
@@ -11,17 +21,17 @@ jest.mock('@folio/stripes-smart-components/lib/ControlledVocab', () => jest.fn((
   <>
     <span>{label}</span>
     <span>
-      {formatter.numberOfObjects(
-        {
-          'id' : '1',
-          'name' : 'Københavns Universitet',
-          'code' : 'KU',
-        }
-      )}
+      {formatter.numberOfObjects(mockCampuses[0])}
     </span>
   </>
 )));
 
+jest.mock('../hooks/useCampuses', () => ({
+  useCampuses: jest.fn(() => ({
+    campuses: mockCampuses,
+  })),
+}));
+
 const stripesMock = {
   connect: component => component,
   hasPerm: jest.fn().mockResolvedValue(true),
@@ -30,39 +40,14 @@ const stripesMock = {
   },
 };
 
-const resourcesMock = {
-  locationsPerInstitution: {
-    records: [
-      {
-        'id' : '1',
-        'name' : 'Annex',
-        'code' : 'KU/CC/DI/A',
-        'isActive' : true,
-        'institutionId' : '1',
-        'campusId' : '1',
-        'libraryId' : '1',
-        'primaryServicePoint' : '1',
-        'servicePointIds' : ['1'],
-        'servicePoints' : [],
-      },
-    ]
-  },
-};
-
-const mutatorMock = {
-  campuses: {
-    GET: jest.fn(),
-    reset: jest.fn(),
-  }
-};
-
 const renderLocationInstitutions = () => (
   renderWithRouter(
-    <LocationInstitutions
-      mutator={mutatorMock}
-      stripes={stripesMock}
-      resources={resourcesMock}
-    />
+    <QueryClientProvider client={new QueryClient()}>
+      <LocationInstitutions
+        stripes={stripesMock}
+      />
+    </QueryClientProvider>
+
   )
 );
 
@@ -71,8 +56,6 @@ describe('LocationInstitutions', () => {
     renderLocationInstitutions();
     const numbersOfObjectsCells = screen.getAllByText('ui-tenant-settings.settings.location.institutions');
 
-    expect(mutatorMock.campuses.GET).toBeCalled();
-    expect(mutatorMock.campuses.reset).toBeCalled();
     numbersOfObjectsCells.forEach((el) => {
       expect(el).toBeVisible();
     });
diff --git a/src/settings/LocationLibraries.js b/src/settings/LocationLibraries.js
index 5c656976..aeeaefda 100644
--- a/src/settings/LocationLibraries.js
+++ b/src/settings/LocationLibraries.js
@@ -1,18 +1,10 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import {
-  FormattedMessage,
-  injectIntl,
-} from 'react-intl';
-import { get } from 'lodash';
+import React, { useState, useEffect, useCallback } from 'react';
+import { FormattedMessage, useIntl } from 'react-intl';
 
 import { ControlledVocab } from '@folio/stripes/smart-components';
-import {
-  Select,
-  TextLink
-} from '@folio/stripes/components';
+import { Select, TextLink } from '@folio/stripes/components';
+import { TitleManager, useStripes } from '@folio/stripes/core';
 
-import { TitleManager } from '@folio/stripes/core';
 import composeValidators from '../util/composeValidators';
 import locationCodeValidator from './locationCodeValidator';
 import {
@@ -23,6 +15,9 @@ import {
   LOCATION_LIBRARY_ID_KEY
 } from '../constants';
 import css from './LocationInstitutions.css';
+import { useInstitutions } from '../hooks/useInstitutions';
+import { useCampuses } from '../hooks/useCampuses';
+import { useLocations } from '../hooks/useLocations';
 
 const translations = {
   cannotDeleteTermHeader: 'ui-tenant-settings.settings.location.libraries.cannotDeleteTermHeader',
@@ -32,97 +27,43 @@ const translations = {
   termWillBeDeleted: 'ui-tenant-settings.settings.location.libraries.termWillBeDeleted',
 };
 
-class LocationLibraries extends React.Component {
-  static manifest = Object.freeze({
-    institutions: {
-      type: 'okapi',
-      records: 'locinsts',
-      path: 'location-units/institutions?query=cql.allRecords=1 sortby name&limit=100',
-      accumulate: true,
-    },
-    campuses: {
-      type: 'okapi',
-      records: 'loccamps',
-      path: 'location-units/campuses?query=cql.allRecords=1 sortby name&limit=100',
-      accumulate: true,
-    },
-    locationsPerLibrary: {
-      type: 'okapi',
-      records: 'locations',
-      path: 'locations',
-      params: {
-        query: 'cql.allRecords=1 sortby name',
-        limit: '10000',
-      },
-      accumulate: true,
-    },
-  });
 
-  static propTypes = {
-    intl: PropTypes.object,
-    stripes: PropTypes.shape({
-      connect: PropTypes.func.isRequired,
-      hasPerm: PropTypes.func.isRequired,
-    }).isRequired,
-    resources: PropTypes.shape({
-      institutions: PropTypes.object,
-      campuses: PropTypes.object,
-      locationsPerLibrary: PropTypes.object,
-    }).isRequired,
-    mutator: PropTypes.shape({
-      institutions: PropTypes.shape({
-        GET: PropTypes.func.isRequired,
-        reset: PropTypes.func.isRequired,
-      }),
-      campuses: PropTypes.shape({
-        GET: PropTypes.func.isRequired,
-        reset: PropTypes.func.isRequired,
-      }),
-      locationsPerLibrary: PropTypes.shape({
-        GET: PropTypes.func.isRequired,
-        reset: PropTypes.func.isRequired,
-      }),
-    }),
-  };
+const LocationLibraries = (props) => {
+  const stripes = useStripes();
+  const { formatMessage } = useIntl();
+  const [institutionId, setInstitutionId] = useState(sessionStorage.getItem(INSTITUTION_ID_LIBRARIES) || null);
+  const [campusId, setCampusId] = useState(sessionStorage.getItem(CAMPUS_ID_LIBRARIES) || null);
 
-  constructor(props) {
-    super(props);
-    this.connectedControlledVocab = props.stripes.connect(ControlledVocab);
-    this.hasAllLocationPerms = props.stripes.hasPerm('ui-tenant-settings.settings.location');
-    this.numberOfObjectsFormatter = this.numberOfObjectsFormatter.bind(this);
+  const hasAllLocationPerms = stripes.hasPerm('ui-tenant-settings.settings.location');
+  const ConnectedControlledVocab = stripes.connect(ControlledVocab);
 
-    this.state = {
-      institutionId: null,
-      campusId: null,
-    };
-  }
+  const { institutions } = useInstitutions({ searchParams: {
+    limit: 100,
+    query: 'cql.allRecords=1 sortby name',
+  } });
 
-  /**
-   * Refresh lookup tables when the component mounts. Fetches in the manifest
-   * will only run once (in the constructor) but because this object may be
-   * unmounted/remounted without being destroyed/recreated, the lookup tables
-   * will be stale if they change between unmounting/remounting.
-   */
-  componentDidMount() {
-    const institutionId = sessionStorage.getItem(INSTITUTION_ID_LIBRARIES);
-    const campusId = sessionStorage.getItem(CAMPUS_ID_LIBRARIES);
-    this.setState({ institutionId, campusId });
-    ['institutions', 'campuses', 'locationsPerLibrary'].forEach(i => {
-      this.props.mutator[i].reset();
-      this.props.mutator[i].GET();
-    });
-  }
+  const { campuses } = useCampuses({ searchParams: {
+    limit: 100,
+    query: 'cql.allRecords=1 sortby name',
+  } });
+
+  const { locations } = useLocations({ searchParams: {
+    limit: 10000,
+    query: 'cql.allRecords=1 sortby name',
+  } });
+
+  useEffect(() => {
+    sessionStorage.setItem(INSTITUTION_ID_LIBRARIES, institutionId);
+    sessionStorage.setItem(CAMPUS_ID_LIBRARIES, campusId);
+  }, [institutionId, campusId]);
 
-  numberOfObjectsFormatter = (item) => {
-    const records = (this.props.resources.locationsPerLibrary || {}).records || [];
-    const numberOfObjects = records.reduce((count, loc) => {
-      return loc.libraryId === item.id ? count + 1 : count;
-    }, 0);
+  const numberOfObjectsFormatter = useCallback((item) => {
+    const numberOfObjects = locations.reduce((count, loc) => (loc.libraryId === item.id ? count + 1 : count), 0);
 
     const onNumberOfObjectsClick = () => {
       sessionStorage.setItem(LOCATION_LIBRARY_ID_KEY, item.id);
-      sessionStorage.setItem(LOCATION_INSTITUTION_ID_KEY, this.state.institutionId);
-      sessionStorage.setItem(LOCATION_CAMPUS_ID_KEY, this.state.campusId);
+      sessionStorage.setItem(LOCATION_INSTITUTION_ID_KEY, institutionId);
+      sessionStorage.setItem(LOCATION_CAMPUS_ID_KEY, campusId);
     };
 
     return (
@@ -133,124 +74,104 @@ class LocationLibraries extends React.Component {
         to="./location-locations"
       >
         {numberOfObjects}
-      </TextLink>);
-  }
+      </TextLink>
+    );
+  }, [locations, institutionId, campusId]);
 
-  onChangeInstitution = (e) => {
+  const onChangeInstitution = useCallback((e) => {
     const value = e.target.value;
-    this.setState({ institutionId: value, campusId: null });
-
-    sessionStorage.setItem(INSTITUTION_ID_LIBRARIES, value);
-    sessionStorage.setItem(CAMPUS_ID_LIBRARIES, '');
-  }
+    setInstitutionId(value);
+    setCampusId(null);
+  }, []);
 
-  onChangeCampus = (e) => {
+  const onChangeCampus = useCallback((e) => {
     const value = e.target.value;
-    this.setState({ campusId: value });
-
-    sessionStorage.setItem(CAMPUS_ID_LIBRARIES, value);
+    setCampusId(value);
+  }, []);
+
+  const institutionOptions = institutions.map(i => (
+    <option value={i.id} key={i.id}>
+      {i.name}
+      {i.code ? ` (${i.code})` : ''}
+    </option>
+  ));
+
+  const campusOptions = campuses.filter(c => c.institutionId === institutionId).map(c => (
+    <option value={c.id} key={c.id}>
+      {c.name}
+      {c.code ? ` (${c.code})` : ''}
+    </option>
+  ));
+
+  if (!institutionOptions.length) {
+    return <div data-testid="libraries-empty" />;
   }
 
-  render() {
-    const { institutionId, campusId } = this.state;
-    const { resources } = this.props;
-
-    const institutions = get(resources, 'institutions.records', []).map(i => (
-      <option value={i.id} key={i.id}>
-        {i.name}
-        {i.code ? ` (${i.code})` : ''}
-      </option>
-    ));
-
-    if (!institutions.length) {
-      return <div data-testid="libraries-empty" />;
-    }
-
-    const campuses = [];
-
-    get(resources, 'campuses.records', []).forEach(c => {
-      if (c.institutionId === institutionId) {
-        campuses.push(
-          <option value={c.id} key={c.id}>
-            {c.name}
-            {c.code ? ` (${c.code})` : ''}
-          </option>
-        );
-      }
-    });
-
-    const formatter = {
-      numberOfObjects: this.numberOfObjectsFormatter,
-    };
-
-    const filterBlock = (
-      <>
+  const filterBlock = (
+    <>
+      <Select
+        label={<FormattedMessage id="ui-tenant-settings.settings.location.institutions.institution" />}
+        id="institutionSelect"
+        name="institutionSelect"
+        onChange={onChangeInstitution}
+        value={institutionId}
+      >
+        <FormattedMessage id="ui-tenant-settings.settings.location.institutions.selectInstitution">
+          {selectText => (
+            <option value="">{selectText}</option>
+          )}
+        </FormattedMessage>
+        {institutionOptions}
+      </Select>
+      {institutionId && (
         <Select
-          label={<FormattedMessage id="ui-tenant-settings.settings.location.institutions.institution" />}
-          id="institutionSelect"
-          name="institutionSelect"
-          onChange={this.onChangeInstitution}
-          value={this.state.institutionId}
+          label={<FormattedMessage id="ui-tenant-settings.settings.location.campuses.campus" />}
+          id="campusSelect"
+          name="campusSelect"
+          onChange={onChangeCampus}
+          value={campusId}
         >
-          <FormattedMessage id="ui-tenant-settings.settings.location.institutions.selectInstitution">
+          <FormattedMessage id="ui-tenant-settings.settings.location.campuses.selectCampus">
             {selectText => (
-              <option>{selectText}</option>
+              <option value="">{selectText}</option>
             )}
           </FormattedMessage>
-          {institutions}
+          {campusOptions}
         </Select>
-        {institutionId &&
-          <Select
-            label={<FormattedMessage id="ui-tenant-settings.settings.location.campuses.campus" />}
-            id="campusSelect"
-            name="campusSelect"
-            onChange={this.onChangeCampus}
-            value={this.state.campusId}
-          >
-            <FormattedMessage id="ui-tenant-settings.settings.location.campuses.selectCampus">
-              {selectText => (
-                <option>{selectText}</option>
-              )}
-            </FormattedMessage>
-            {campuses}
-          </Select>
-        }
-      </>
-    );
-
-    return (
-      <TitleManager stripes={this.props.stripes} page={this.props.intl.formatMessage({ id: 'ui-tenant-settings.settings.location.libraries.title' })}>
-        <this.connectedControlledVocab
-          {...this.props}
-        // We have to unset the dataKey to prevent the props.resources in
-        // <ControlledVocab> from being overwritten by the props.resources here.
-          dataKey={undefined}
-          baseUrl="location-units/libraries"
-          records="loclibs"
-          rowFilter={filterBlock}
-          rowFilterFunction={(row) => row.campusId === campusId}
-          label={this.props.intl.formatMessage({ id: 'ui-tenant-settings.settings.location.libraries' })}
-          translations={translations}
-          objectLabel={<FormattedMessage id="ui-tenant-settings.settings.location.locations" />}
-          visibleFields={['name', 'code']}
-          columnMapping={{
-            name: <FormattedMessage id="ui-tenant-settings.settings.location.libraries.library" />,
-            code: <FormattedMessage id="ui-tenant-settings.settings.location.code" />,
-          }}
-          formatter={formatter}
-          nameKey="group"
-          id="libraries"
-          preCreateHook={(item) => ({ ...item, campusId })}
-          listSuppressor={() => !(institutionId && campusId)}
-          listSuppressorText={<FormattedMessage id="ui-tenant-settings.settings.location.libraries.missingSelection" />}
-          sortby="name"
-          validate={composeValidators(locationCodeValidator.validate)}
-          editable={this.hasAllLocationPerms}
-          canCreate={this.hasAllLocationPerms}
-        />
-      </TitleManager>
-    );
-  }
-}
+      )}
+    </>
+  );
+
+  return (
+    <TitleManager page={formatMessage({ id: 'ui-tenant-settings.settings.location.libraries.title' })}>
+      <ConnectedControlledVocab
+        {...props}
+        dataKey={undefined}
+        baseUrl="location-units/libraries"
+        records="loclibs"
+        rowFilter={filterBlock}
+        rowFilterFunction={(row) => row.campusId === campusId}
+        label={formatMessage({ id: 'ui-tenant-settings.settings.location.libraries' })}
+        translations={translations}
+        objectLabel={<FormattedMessage id="ui-tenant-settings.settings.location.locations" />}
+        visibleFields={['name', 'code']}
+        columnMapping={{
+          name: <FormattedMessage id="ui-tenant-settings.settings.location.libraries.library" />,
+          code: <FormattedMessage id="ui-tenant-settings.settings.location.code" />,
+        }}
+        formatter={{ numberOfObjects: numberOfObjectsFormatter }}
+        nameKey="group"
+        id="libraries"
+        preCreateHook={(item) => ({ ...item, campusId })}
+        listSuppressor={() => !(institutionId && campusId)}
+        listSuppressorText={<FormattedMessage id="ui-tenant-settings.settings.location.libraries.missingSelection" />}
+        sortby="name"
+        validate={composeValidators(locationCodeValidator.validate)}
+        editable={hasAllLocationPerms}
+        canCreate={hasAllLocationPerms}
+      />
+    </TitleManager>
+  );
+};
 
-export default injectIntl(LocationLibraries);
+export default LocationLibraries;
diff --git a/src/settings/LocationLibraries.test.js b/src/settings/LocationLibraries.test.js
index faf18275..de698ca5 100644
--- a/src/settings/LocationLibraries.test.js
+++ b/src/settings/LocationLibraries.test.js
@@ -1,9 +1,12 @@
 import React from 'react';
 import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { QueryClient, QueryClientProvider } from 'react-query';
 
-import LocacationLibraries from './LocationLibraries';
+import LocationLibraries from './LocationLibraries';
 import { renderWithRouter } from '../../test/jest/helpers';
+import { useInstitutions } from '../hooks/useInstitutions';
+
 
 jest.mock('@folio/stripes-smart-components/lib/ControlledVocab', () => jest.fn(({
   rowFilter,
@@ -36,39 +39,40 @@ jest.mock('@folio/stripes-smart-components/lib/ControlledVocab', () => jest.fn((
   </>
 )));
 
-const stripesMock = {
-  connect: component => component,
-  hasPerm: jest.fn().mockResolvedValue(true),
-  config: {
-    platform: 'tenant-settings'
-  },
-};
-
-const mutatorMock = {
-  locationsPerLibrary: {
-    GET: jest.fn(() => Promise.resolve()),
-    reset: jest.fn(() => Promise.resolve()),
-  },
-  institutions: {
-    GET: jest.fn(() => Promise.resolve()),
-    reset: jest.fn(() => Promise.resolve()),
-  },
-  campuses: {
-    GET: jest.fn(() => Promise.resolve()),
-    reset: jest.fn(() => Promise.resolve()),
-  },
-};
-
-const resourcesMock = {
-  institutions: {
-    records: [
-      { code: 'KU',
+jest.mock('../hooks/useCampuses', () => ({
+  useCampuses: jest.fn(() => ({
+    campuses: [
+      {
+        code: 'CC',
+        id: '62cf76b7-cca5-4d33-9217-edf42ce1a848',
+        institutionId: '40ee00ca-a518-4b49-be01-0638d0a4ac57',
+        name: 'City Campus',
+      },
+      {
+        code: 'E',
+        id: '470ff1dd-937a-4195-bf9e-06bcfcd135df',
+        institutionId: '40ee00ca-a518-4b49-be01-0638d0a4ac57',
+        name: 'Online'
+      }
+    ],
+  })),
+}));
+
+jest.mock('../hooks/useInstitutions', () => ({
+  useInstitutions: jest.fn(() => ({
+    institutions: [
+      {
+        code: 'KU',
         id: '40ee00ca-a518-4b49-be01-0638d0a4ac57',
-        name: 'Københavns Universitet' }
+        name: 'Københavns Universitet'
+      }
     ]
-  },
-  locationsPerLibrary: {
-    records: [
+  })),
+}));
+
+jest.mock('../hooks/useLocations', () => ({
+  useLocations: jest.fn(() => ({
+    locations: [
       {
         campusId: '62cf76b7-cca5-4d33-9217-edf42ce1a848',
         code: 'KU/CC/DI/A',
@@ -87,49 +91,36 @@ const resourcesMock = {
         name: 'Dematic',
       }
     ]
-  },
-  campuses: {
-    records: [{
-      code: 'CC',
-      id: '62cf76b7-cca5-4d33-9217-edf42ce1a848',
-      institutionId: '40ee00ca-a518-4b49-be01-0638d0a4ac57',
-      name: 'City Campus',
-    },
-    {
-      code: 'E',
-      id: '470ff1dd-937a-4195-bf9e-06bcfcd135df',
-      institutionId: '40ee00ca-a518-4b49-be01-0638d0a4ac57',
-      name: 'Online'
-    }
-    ]
-  },
-};
-
-const renderLocationLibaries = (resources = {}) => renderWithRouter(
-  <LocacationLibraries
-    mutator={mutatorMock}
-    resources={resources}
-    stripes={stripesMock}
-  />
+  })),
+}));
+
+
+const renderLocationLibaries = () => renderWithRouter(
+  <QueryClientProvider client={new QueryClient()}>
+    <LocationLibraries />
+  </QueryClientProvider>
 );
 
 
 describe('LocationLibraries', () => {
   it('should render LocationLibraries with empty resources', async () => {
+    useInstitutions.mockImplementationOnce(() => ({ institutions: [] }));
+
     renderLocationLibaries();
 
     expect(screen.getByTestId('libraries-empty')).toBeVisible();
   });
+
   it('should render LocationLibraries with resourses', async () => {
-    renderLocationLibaries(resourcesMock);
+    renderLocationLibaries();
 
     expect(renderLocationLibaries).toBeDefined();
   });
 
   it('should render LocationLibraries changed option value', async () => {
-    renderLocationLibaries(resourcesMock);
+    renderLocationLibaries();
 
-    const checkboxInstitution = screen.getByRole('combobox');
+    const checkboxInstitution = screen.getAllByRole('combobox')[0];
 
     await userEvent.selectOptions(checkboxInstitution, 'Københavns Universitet (KU)');
 
@@ -139,7 +130,7 @@ describe('LocationLibraries', () => {
   });
 
   it('should render LocationLibraries with filled form', async () => {
-    renderLocationLibaries(resourcesMock);
+    renderLocationLibaries();
 
     const checkboxInstitution = screen.getByRole('combobox', { name: 'ui-tenant-settings.settings.location.institutions.institution' });
 
diff --git a/src/settings/LocationLocations/LocationDetail.js b/src/settings/LocationLocations/LocationDetail.js
index d54ee7b0..bab2ca1d 100644
--- a/src/settings/LocationLocations/LocationDetail.js
+++ b/src/settings/LocationLocations/LocationDetail.js
@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from 'react';
+import React, { useState } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
 import PropTypes from 'prop-types';
 import {
@@ -20,21 +20,21 @@ import {
 } from '@folio/stripes/components';
 import { ViewMetaData } from '@folio/stripes/smart-components';
 import {
-  stripesConnect,
-  IfPermission, useStripes, TitleManager,
+  IfPermission,
+  useStripes,
+  TitleManager,
 } from '@folio/stripes/core';
 
 import LocationInUseModal from './LocationInUseModal';
 import { useRemoteStorageApi } from './RemoteStorage';
 import RemoteStorageDetails from './RemoteStorageDetails';
+import { useCampusDetails } from '../../hooks/useCampusDetails';
+import { useInstitutionDetails } from '../../hooks/useInstitutionDetails';
+import { useLibraryDetails } from '../../hooks/useLibraryDetails';
+
 
 const LocationDetail = ({
   initialValues: loc,
-  resources: {
-    institutions,
-    campuses,
-    libraries,
-  },
   servicePointsById,
   onEdit,
   onClone,
@@ -51,11 +51,16 @@ const LocationDetail = ({
   const [isDeleteLocationModalOpened, setIsDeleteLocationModalOpened] = useState(false);
   const [isLocationInUseModalOpened, setIsLocationInUseModalOpened] = useState(false);
 
+  const { campus } = useCampusDetails({ id: loc.campusId });
+  const { institution } = useInstitutionDetails({ id: loc.institutionId });
+  const { library } = useLibraryDetails({ id: loc.libraryId });
   const { setMapping } = useRemoteStorageApi();
 
-  const handleExpandAll = setSections;
+  const handleExpandAll = (newSections) => {
+    setSections(newSections);
+  };
 
-  const renderServicePoint = useCallback((sp, index) => {
+  const renderServicePoint = (sp, index) => {
     return (
       index === 0 ?
         <li key={index}>
@@ -65,9 +70,9 @@ const LocationDetail = ({
           {sp}
         </li>
     );
-  }, []);
+  };
 
-  const renderServicePoints = useCallback(() => {
+  const renderServicePoints = () => {
     const itemsList = [];
     // as primary servicePoint surely exists and servicePointsById shouldn't be empty, its index would be at the 0th position of itemsList array
     if (!isEmpty(servicePointsById) && loc.servicePointIds.length !== 0) {
@@ -85,19 +90,19 @@ const LocationDetail = ({
         isEmptyMessage="No servicePoints found"
       />
     );
-  }, [loc, renderServicePoint, servicePointsById]);
+  };
 
-  const handleSectionToggle = useCallback(({ id }) => {
+  const handleSectionToggle = ({ id }) => {
     setSections(prevSections => ({ ...prevSections, [id]: !prevSections[id] }));
-  }, []);
+  };
 
-  const toggleDeleteLocationConfirmation = useCallback(() => {
+  const toggleDeleteLocationConfirmation = () => {
     setIsDeleteLocationModalOpened(prevState => !prevState);
-  }, []);
+  };
 
-  const toggleLocationInUseModal = useCallback(() => {
+  const toggleLocationInUseModal = () => {
     setIsLocationInUseModalOpened(prevState => !prevState);
-  }, []);
+  };
 
   const removeLocation = () => {
     toggleDeleteLocationConfirmation();
@@ -112,6 +117,7 @@ const LocationDetail = ({
       });
   };
 
+  // eslint-disable-next-line react/prop-types
   const renderActionMenu = item => ({ onToggle }) => {
     if (!hasAllLocationPerms) return null;
 
@@ -162,15 +168,6 @@ const LocationDetail = ({
     );
   };
 
-  const institutionList = institutions?.records || [];
-  const institution = institutionList.length === 1 ? institutionList[0] : null;
-
-  const campusList = campuses?.records || [];
-  const campus = campusList.length === 1 ? campusList[0] : null;
-
-  const libraryList = libraries?.records || [];
-  const library = libraryList.length === 1 ? libraryList[0] : null;
-
   // massage the "details" property which is represented in the API as
   // an object but displayed on the details page as an array of
   // key-value pairs sorted by key.
@@ -222,7 +219,7 @@ const LocationDetail = ({
                 <ViewMetaData metadata={loc.metadata} />
               </Col>
             </Row>
-        }
+          }
           <Row>
             <Col xs={12}>
               <KeyValue
@@ -308,54 +305,34 @@ const LocationDetail = ({
         </Accordion>
 
         {
-        isDeleteLocationModalOpened && (
-          <ConfirmationModal
-            id="deletelocation-confirmation"
-            open
-            heading={<FormattedMessage id="ui-tenant-settings.settings.location.locations.deleteLocation" />}
-            message={confirmationMessage}
-            onConfirm={removeLocation}
-            onCancel={toggleDeleteLocationConfirmation}
-            confirmLabel={<FormattedMessage id="stripes-core.button.delete" />}
-          />
-        )
-      }
+          isDeleteLocationModalOpened && (
+            <ConfirmationModal
+              id="deletelocation-confirmation"
+              open
+              heading={<FormattedMessage id="ui-tenant-settings.settings.location.locations.deleteLocation" />}
+              message={confirmationMessage}
+              onConfirm={removeLocation}
+              onCancel={toggleDeleteLocationConfirmation}
+              confirmLabel={<FormattedMessage id="stripes-core.button.delete" />}
+            />
+          )
+        }
 
         {
-        isLocationInUseModalOpened && (
-          <LocationInUseModal toggleModal={toggleLocationInUseModal} />
-        )
-      }
+          isLocationInUseModalOpened && (
+            <LocationInUseModal toggleModal={toggleLocationInUseModal} />
+          )
+        }
       </TitleManager>
     </Pane>
   );
 };
 
-LocationDetail.manifest = Object.freeze({
-  institutions: {
-    type: 'okapi',
-    path: 'location-units/institutions/!{initialValues.institutionId}',
-  },
-  campuses: {
-    type: 'okapi',
-    path: 'location-units/campuses/!{initialValues.campusId}',
-  },
-  libraries: {
-    type: 'okapi',
-    path: 'location-units/libraries/!{initialValues.libraryId}',
-  },
-});
-
 LocationDetail.propTypes = {
-  stripes: PropTypes.shape({
-    connect: PropTypes.func.isRequired,
-  }).isRequired,
   initialValues: PropTypes.object,
-  resources: PropTypes.shape({
-    institutions: PropTypes.object,
-    campuses: PropTypes.object,
-    libraries: PropTypes.object,
-  }).isRequired,
+  institutions: PropTypes.arrayOf(PropTypes.object),
+  campuses: PropTypes.arrayOf(PropTypes.object),
+  libraries: PropTypes.arrayOf(PropTypes.object),
   servicePointsById: PropTypes.object,
   onEdit: PropTypes.func.isRequired,
   onClone: PropTypes.func.isRequired,
@@ -363,4 +340,4 @@ LocationDetail.propTypes = {
   onRemove: PropTypes.func.isRequired,
 };
 
-export default stripesConnect(LocationDetail);
+export default LocationDetail;
diff --git a/src/settings/LocationLocations/LocationForm/DetailsField.js b/src/settings/LocationLocations/LocationForm/DetailsField.js
index 1628701e..1c2f3622 100644
--- a/src/settings/LocationLocations/LocationForm/DetailsField.js
+++ b/src/settings/LocationLocations/LocationForm/DetailsField.js
@@ -1,6 +1,5 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { FormattedMessage } from 'react-intl';
-import PropTypes from 'prop-types';
 
 import {
   AutoSuggest,
@@ -9,31 +8,16 @@ import {
 } from '@folio/stripes/components';
 
 import RepeatableField from '../../../components/RepeatableField';
+import { useLocations } from '../../../hooks/useLocations';
 
-class DetailsField extends React.Component {
-  static manifest = {
-    locations: {
-      type: 'okapi',
-      path: 'locations?query=(details=*)',
-    },
-  };
-
-  static propTypes = {
-    resources: PropTypes.shape({
-      locations: PropTypes.shape({
-        records: PropTypes.arrayOf(PropTypes.object),
-      }),
-    }).isRequired,
-  };
 
-  constructor(props) {
-    super(props);
-    this.getSuggestedTerms = this.getSuggestedTerms.bind(this);
-  }
+const DetailsField = () => {
+  const { locations } = useLocations({ searchParams: {
+    query: '(details=*)'
+  } });
 
-  getSuggestedTerms(locationsArray) {
+  const getSuggestedTerms = (locationsArray) => {
     const terms = [];
-    // eslint-disable-next-line no-unused-vars
     for (const item of locationsArray) {
       if (item.details) {
         Object.keys(item.details).forEach(name => {
@@ -44,44 +28,39 @@ class DetailsField extends React.Component {
       }
     }
     return terms;
-  }
-
-  render() {
-    const { locations } = this.props.resources;
-    const locationsArray = locations ? locations.records[0] ? locations.records[0].locations : [] : [];
-    const suggestedTerms = this.getSuggestedTerms(locationsArray);
-    const detailNames = suggestedTerms.length > 0 ? suggestedTerms.map(locationName => (
-      { value: locationName })) : [];
+  };
 
-    return (
-      <RepeatableField
-        name="detailsArray"
-        addLabel={
-          <Icon icon="plus-sign">
-            <FormattedMessage id="ui-tenant-settings.settings.location.locations.addDetails" />
-          </Icon>
-        }
-        addButtonId="clickable-add-location-details"
-        template={[
-          {
-            name: 'name',
-            label: <FormattedMessage id="ui-tenant-settings.settings.location.locations.detailsName" />,
-            component: AutoSuggest,
-            items: detailNames,
-            renderValue: item => item || '',
-            withFinalForm: true,
-          },
-          {
-            name: 'value',
-            label: <FormattedMessage id="ui-tenant-settings.settings.location.locations.detailsValue" />,
-            component: TextField,
-          },
-        ]}
-        newItemTemplate={{ name: '', value: '' }}
-      />
-    );
-  }
-}
+  const suggestedTerms = getSuggestedTerms(locations);
+  const detailNames = useMemo(() => (suggestedTerms.length > 0 ? suggestedTerms.map(locationName => (
+    { value: locationName })) : []), [suggestedTerms]);
 
+  return (
+    <RepeatableField
+      name="detailsArray"
+      addLabel={
+        <Icon icon="plus-sign">
+          <FormattedMessage id="ui-tenant-settings.settings.location.locations.addDetails" />
+        </Icon>
+      }
+      addButtonId="clickable-add-location-details"
+      template={[
+        {
+          name: 'name',
+          label: <FormattedMessage id="ui-tenant-settings.settings.location.locations.detailsName" />,
+          component: AutoSuggest,
+          items: detailNames,
+          renderValue: item => item || '',
+          withFinalForm: true,
+        },
+        {
+          name: 'value',
+          label: <FormattedMessage id="ui-tenant-settings.settings.location.locations.detailsValue" />,
+          component: TextField,
+        },
+      ]}
+      newItemTemplate={{ name: '', value: '' }}
+    />
+  );
+};
 
 export default DetailsField;
diff --git a/src/settings/LocationLocations/LocationForm/DetailsField.test.js b/src/settings/LocationLocations/LocationForm/DetailsField.test.js
index 943fbba6..90da0c3b 100644
--- a/src/settings/LocationLocations/LocationForm/DetailsField.test.js
+++ b/src/settings/LocationLocations/LocationForm/DetailsField.test.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import { QueryClientProvider, QueryClient } from 'react-query';
 
 import { render } from '@testing-library/react';
 
@@ -64,9 +65,11 @@ const renderDetailsField = () => render(
     onSubmit={() => {}}
     mutators={{ ...arrayMutators }}
     render={() => (
-      <DetailsField
-        resources={parentResourcesMock}
-      />
+      <QueryClientProvider client={new QueryClient()}>
+        <DetailsField
+          resources={parentResourcesMock}
+        />
+      </QueryClientProvider>
     )}
   />
 );
diff --git a/src/settings/LocationLocations/LocationForm/LocationForm.js b/src/settings/LocationLocations/LocationForm/LocationForm.js
index e41e2960..b7049c1c 100644
--- a/src/settings/LocationLocations/LocationForm/LocationForm.js
+++ b/src/settings/LocationLocations/LocationForm/LocationForm.js
@@ -1,12 +1,13 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { cloneDeep, sortBy } from 'lodash';
 import { Field } from 'react-final-form';
-import { FormattedMessage, injectIntl } from 'react-intl';
+import { FormattedMessage, useIntl } from 'react-intl';
 
 import {
   TitleManager,
-  withStripes,
+  useOkapiKy,
+  useStripes,
 } from '@folio/stripes/core';
 import {
   Accordion,
@@ -32,65 +33,61 @@ import ServicePointsFields from './ServicePointsFields';
 import DetailsField from './DetailsField';
 import { RemoteStorageField } from './RemoteStorageField';
 
-class LocationForm extends React.Component {
-  static propTypes = {
-    stripes: PropTypes.shape({
-      hasPerm: PropTypes.func.isRequired,
-      connect: PropTypes.func.isRequired,
-    }).isRequired,
-    locationResources: PropTypes.shape({
-      institutions: PropTypes.object,
-      campuses: PropTypes.object,
-      libraries: PropTypes.object,
-      servicePoints: PropTypes.object,
-    }),
-    parentMutator: PropTypes.object.isRequired,
-    initialValues: PropTypes.object,
-    intl: PropTypes.object,
-    handleSubmit: PropTypes.func.isRequired,
-    onCancel: PropTypes.func,
-    pristine: PropTypes.bool,
-    submitting: PropTypes.bool,
-    cloning: PropTypes.bool,
-    form: PropTypes.object.isRequired,
-  };
 
-  constructor(props) {
-    super(props);
+const LocationForm = ({
+  handleSubmit,
+  initialValues,
+  form,
+  onCancel,
+  pristine,
+  submitting,
+  cloning,
+  institutions,
+  campuses,
+  libraries,
+  servicePoints,
+  checkLocationHasHoldingsOrItems,
+}) => {
+  const stripes = useStripes();
+  const ky = useOkapiKy();
+  const { formatMessage } = useIntl();
 
-    this.handleExpandAll = this.handleExpandAll.bind(this);
-    this.handleSectionToggle = this.handleSectionToggle.bind(this);
-    this.cViewMetaData = props.stripes.connect(ViewMetaData);
-    this.cDetailsField = props.stripes.connect(DetailsField);
+  const [sections, setSections] = useState({
+    generalSection: true,
+    detailsSection: true,
+  });
 
-    this.state = {
-      sections: {
-        generalSection: true,
-        detailsSection: true,
-      },
-    };
-  }
+  const mappedInstitutions = institutions.map(i => ({ value: i.id, label: `${i.name} ${i.code ? `(${i.code})` : ''}` }));
+  const mappedServicePoints = sortBy(servicePoints, ['name']).map(i => ({ label: `${i.name}` }));
 
-  addFirstMenu() {
-    return (
-      <PaneMenu>
-        <FormattedMessage id="stripes-core.button.cancel">
-          {ariaLabel => (
-            <IconButton
-              id="clickable-close-locations-location"
-              onClick={this.props.onCancel}
-              icon="times"
-              aria-label={ariaLabel}
-            />
-          )}
-        </FormattedMessage>
-      </PaneMenu>
-    );
-  }
+  const handleExpandAll = (newSections) => {
+    setSections(newSections);
+  };
+
+  const handleSectionToggle = ({ id }) => {
+    setSections((curState) => {
+      const newState = cloneDeep(curState);
+      newState[id] = !newState[id];
+      return newState;
+    });
+  };
 
-  renderFooter() {
-    const { pristine, submitting, cloning, onCancel } = this.props;
+  const addFirstMenu = () => (
+    <PaneMenu>
+      <FormattedMessage id="stripes-core.button.cancel">
+        {ariaLabel => (
+          <IconButton
+            id="clickable-close-locations-location"
+            onClick={onCancel}
+            icon="times"
+            aria-label={ariaLabel}
+          />
+        )}
+      </FormattedMessage>
+    </PaneMenu>
+  );
 
+  const renderFooter = () => {
     const closeButton = (
       <Button
         id="clickable-footer-close-locations-location"
@@ -119,26 +116,9 @@ class LocationForm extends React.Component {
         renderStart={closeButton}
       />
     );
-  }
-
-  handleSectionToggle({ id }) {
-    this.setState((curState) => {
-      const newState = cloneDeep(curState);
-      newState.sections[id] = !newState.sections[id];
-      return newState;
-    });
-  }
-
-  handleExpandAll(sections) {
-    this.setState((curState) => {
-      const newState = cloneDeep(curState);
-      newState.sections = sections;
-      return newState;
-    });
-  }
+  };
 
-  renderPaneTitle() {
-    const { initialValues } = this.props;
+  const renderPaneTitle = () => {
     const loc = initialValues || {};
 
     if (loc.id) {
@@ -151,258 +131,222 @@ class LocationForm extends React.Component {
     }
 
     return <FormattedMessage id="ui-tenant-settings.settings.location.locations.new" />;
-  }
-
-  render() {
-    const {
-      stripes,
-      handleSubmit,
-      initialValues,
-      locationResources,
-      intl: { formatMessage },
-      form,
-      parentMutator
-    } = this.props;
-    const loc = initialValues || {};
-    const { sections } = this.state;
-    const disabled = !stripes.hasPerm('settings.tenant-settings.enabled');
-
-    const institutions = [];
-    ((locationResources.institutions || {}).records || []).forEach(i => {
-      institutions.push({ value: i.id, label: `${i.name} ${i.code ? `(${i.code})` : ''}` });
-    });
-
-    const servicePoints = [];
-    const entryList = sortBy((locationResources.servicePoints || {}).records || [], ['name']);
-    entryList.forEach(i => {
-      servicePoints.push({ label: `${i.name}` });
-    });
+  };
 
-    const formValues = form.getState().values;
+  const formValues = form.getState().values;
 
-    const titleManagerLabel = initialValues?.name && initialValues?.id ? formatMessage({ id:'ui-tenant-settings.settings.items.edit.title' }, { item: initialValues?.name })
-      :
-      formatMessage({ id:'ui-tenant-settings.settings.location.createNew.title' });
+  const titleManagerLabel = initialValues?.name && initialValues?.id
+    ? formatMessage({ id:'ui-tenant-settings.settings.items.edit.title' }, { item: initialValues?.name })
+    : formatMessage({ id:'ui-tenant-settings.settings.location.createNew.title' });
 
-    return (
-      <TitleManager page={titleManagerLabel}>
-        <form
-          id="form-locations"
-          onSubmit={handleSubmit}
-          noValidate
-        >
-          <Paneset isRoot>
-            <Pane
-              id="location-form-pane"
-              defaultWidth="100%"
-              firstMenu={this.addFirstMenu()}
-              footer={this.renderFooter()}
-              paneTitle={this.renderPaneTitle()}
+  return (
+    <TitleManager page={titleManagerLabel}>
+      <form
+        id="form-locations"
+        onSubmit={handleSubmit}
+        noValidate
+      >
+        <Paneset isRoot>
+          <Pane
+            id="location-form-pane"
+            defaultWidth="100%"
+            firstMenu={addFirstMenu()}
+            footer={renderFooter()}
+            paneTitle={renderPaneTitle()}
+          >
+            <Row end="xs">
+              <Col xs>
+                <ExpandAllButton accordionStatus={sections} onToggle={handleExpandAll} />
+              </Col>
+            </Row>
+            <Accordion
+              open={sections.generalSection}
+              id="generalSection"
+              onToggle={handleSectionToggle}
+              label={<FormattedMessage id="ui-tenant-settings.settings.location.locations.generalInformation" />}
             >
-              <Row end="xs">
-                <Col xs>
-                  <ExpandAllButton accordionStatus={sections} onToggle={this.handleExpandAll} />
-                </Col>
-              </Row>
-              <Accordion
-                open={sections.generalSection}
-                id="generalSection"
-                onToggle={this.handleSectionToggle}
-                label={<FormattedMessage id="ui-tenant-settings.settings.location.locations.generalInformation" />}
-              >
-                {loc.metadata && loc.metadata.createdDate &&
-                  <Row>
-                    <Col xs={12}>
-                      <this.cViewMetaData metadata={loc.metadata} />
-                    </Col>
-                  </Row>
-              }
+              {initialValues?.metadata?.createdDate &&
                 <Row>
                   <Col xs={12}>
-                    <Field
-                      label={
-                        <>
-                          <FormattedMessage id="ui-tenant-settings.settings.location.institutions.institution" />
-                        </>
-                    }
-                      name="institutionId"
-                      id="input-location-institution"
-                      component={Select}
-                      required
-                      disabled={disabled}
-                      dataOptions={[
-                        { label: formatMessage({ id: 'ui-tenant-settings.settings.location.institutions.selectInstitution' }) },
-                        ...institutions
-                      ]}
-                      onChange={form.mutators.changeInstitution}
-                    />
+                    <ViewMetaData metadata={initialValues.metadata} />
                   </Col>
                 </Row>
-                <Row>
-                  <Col xs={12}>
-                    <FilteredSelect
-                      list={(locationResources.campuses || {}).records || []}
-                      institutionId={formValues.institutionId}
-                      filterFieldId="institutionId"
-                      formatter={(i) => `${i.name}${i.code ? ` (${i.code})` : ''}`}
-                      initialOption={{ label: formatMessage({ id: 'ui-tenant-settings.settings.location.campuses.selectCampus' }) }}
-                      label={
-                        <>
-                          <FormattedMessage id="ui-tenant-settings.settings.location.campuses.campus" />
-                        </>
-                    }
-                      name="campusId"
-                      id="input-location-campus"
-                      component={Select}
-                      required
-                      disabled={disabled}
-                      onChange={form.mutators.changeCampus}
-                    />
-                  </Col>
-                </Row>
-                <Row>
-                  <Col xs={12}>
-                    <FilteredSelect
-                      list={(locationResources.libraries || {}).records || []}
-                      campusId={formValues.campusId}
-                      filterFieldId="campusId"
-                      formatter={(i) => `${i.name}${i.code ? ` (${i.code})` : ''}`}
-                      initialOption={{ label: formatMessage({ id: 'ui-tenant-settings.settings.location.libraries.selectLibrary' }) }}
-                      label={
-                        <>
-                          <FormattedMessage id="ui-tenant-settings.settings.location.libraries.library" />
-                        </>
-                    }
-                      name="libraryId"
-                      id="input-location-library"
-                      component={Select}
-                      required
-                      disabled={disabled}
-                    />
-                  </Col>
-                </Row>
-                <Row>
-                  <Col
-                    xs={8}
-                    data-test-location-name
+              }
+              <Row>
+                <Col xs={12}>
+                  <Field
+                    label={<FormattedMessage id="ui-tenant-settings.settings.location.institutions.institution" />}
+                    name="institutionId"
+                    id="input-location-institution"
+                    component={Select}
+                    required
+                    disabled={!stripes.hasPerm('settings.tenant-settings.enabled')}
+                    dataOptions={[
+                      { label: formatMessage({ id: 'ui-tenant-settings.settings.location.institutions.selectInstitution' }) },
+                      ...mappedInstitutions
+                    ]}
+                    onChange={form.mutators.changeInstitution}
+                  />
+                </Col>
+              </Row>
+              <Row>
+                <Col xs={12}>
+                  <FilteredSelect
+                    list={campuses}
+                    institutionId={formValues.institutionId}
+                    filterFieldId="institutionId"
+                    formatter={(i) => `${i.name}${i.code ? ` (${i.code})` : ''}`}
+                    initialOption={{ label: formatMessage({ id: 'ui-tenant-settings.settings.location.campuses.selectCampus' }) }}
+                    label={<FormattedMessage id="ui-tenant-settings.settings.location.campuses.campus" />}
+                    name="campusId"
+                    id="input-location-campus"
+                    component={Select}
+                    required
+                    disabled={!stripes.hasPerm('settings.tenant-settings.enabled')}
+                    onChange={form.mutators.changeCampus}
+                  />
+                </Col>
+              </Row>
+              <Row>
+                <Col xs={12}>
+                  <FilteredSelect
+                    list={libraries}
+                    campusId={formValues.campusId}
+                    filterFieldId="campusId"
+                    formatter={(i) => `${i.name}${i.code ? ` (${i.code})` : ''}`}
+                    initialOption={{ label: formatMessage({ id: 'ui-tenant-settings.settings.location.libraries.selectLibrary' }) }}
+                    label={<FormattedMessage id="ui-tenant-settings.settings.location.libraries.library" />}
+                    name="libraryId"
+                    id="input-location-library"
+                    component={Select}
+                    required
+                    disabled={!stripes.hasPerm('settings.tenant-settings.enabled')}
+                  />
+                </Col>
+              </Row>
+              <Row>
+                <Col xs={8} data-test-location-name>
+                  <Field
+                    label={<FormattedMessage id="ui-tenant-settings.settings.location.locations.name" />}
+                    name="name"
+                    id="input-location-name"
+                    component={TextField}
+                    required
+                    fullWidth
+                    disabled={!stripes.hasPerm('settings.tenant-settings.enabled')}
+                    validate={getUniquenessValidation('name', ky, initialValues?.id)}
+                    validateFields={[]}
+                  />
+                </Col>
+                <Col xs={4}>
+                  <RemoteStorageField
+                    initialValues={initialValues}
+                    checkLocationHasHoldingsOrItems={checkLocationHasHoldingsOrItems}
+                  />
+                </Col>
+              </Row>
+              <Row>
+                <Col xs={8}>
+                  <Field
+                    label={<FormattedMessage id="ui-tenant-settings.settings.location.code" />}
+                    name="code"
+                    id="input-location-code"
+                    component={TextField}
+                    required
+                    fullWidth
+                    disabled={!stripes.hasPerm('settings.tenant-settings.enabled')}
+                    validate={getUniquenessValidation('code', ky, initialValues?.id)}
+                    validateFields={[]}
+                  />
+                </Col>
+              </Row>
+              <Row>
+                <Col xs={8}>
+                  <Field
+                    label={<FormattedMessage id="ui-tenant-settings.settings.location.locations.discoveryDisplayName" />}
+                    name="discoveryDisplayName"
+                    id="input-location-discovery-display-name"
+                    component={TextField}
+                    required
+                    fullWidth
+                    disabled={!stripes.hasPerm('settings.tenant-settings.enabled')}
+                  />
+                </Col>
+              </Row>
+              <Row>
+                <Col xs={8}>
+                  <ServicePointsFields
+                    servicePoints={mappedServicePoints}
+                    formValues={formValues}
+                    changePrimary={form.mutators.changeServicePointPrimary}
+                  />
+                </Col>
+              </Row>
+              <Row>
+                <Col xs={12}>
+                  <Field
+                    label={<FormattedMessage id="ui-tenant-settings.settings.location.locations.status" />}
+                    name="isActive"
+                    id="input-location-status"
+                    component={Select}
+                    disabled={!stripes.hasPerm('settings.tenant-settings.enabled')}
+                    format={String}
                   >
-                    <Field
-                      label={
-                        <>
-                          <FormattedMessage id="ui-tenant-settings.settings.location.locations.name" />
-                        </>
-                    }
-                      name="name"
-                      id="input-location-name"
-                      component={TextField}
-                      required
-                      fullWidth
-                      disabled={disabled}
-                      validate={getUniquenessValidation('name', parentMutator.uniquenessValidator, initialValues?.id)}
-                      validateFields={[]}
-                    />
-                  </Col>
-                  <Col xs={4}>
-                    <RemoteStorageField {...this.props} />
-                  </Col>
-                </Row>
-                <Row>
-                  <Col xs={8}>
-                    <Field
-                      label={
-                        <>
-                          <FormattedMessage id="ui-tenant-settings.settings.location.code" />
-                        </>
-                    }
-                      name="code"
-                      id="input-location-code"
-                      component={TextField}
-                      required
-                      fullWidth
-                      disabled={disabled}
-                      validate={getUniquenessValidation('code', parentMutator.uniquenessValidator, initialValues?.id)}
-                      validateFields={[]}
-                    />
-                  </Col>
-                </Row>
-                <Row>
-                  <Col xs={8}>
-                    <Field
-                      label={
-                        <>
-                          <FormattedMessage id="ui-tenant-settings.settings.location.locations.discoveryDisplayName" />
-                        </>
-                    }
-                      name="discoveryDisplayName"
-                      id="input-location-discovery-display-name"
-                      component={TextField}
-                      required
-                      fullWidth
-                      disabled={disabled}
-                    />
-                  </Col>
-                </Row>
-                <Row>
-                  <Col xs={8}>
-                    <ServicePointsFields
-                      servicePoints={servicePoints}
-                      formValues={formValues}
-                      changePrimary={form.mutators.changeServicePointPrimary}
-                    />
-                  </Col>
-                </Row>
-                <Row>
-                  <Col xs={12}>
-                    <Field
-                      label={<FormattedMessage id="ui-tenant-settings.settings.location.locations.status" />}
-                      name="isActive"
-                      id="input-location-status"
-                      component={Select}
-                      disabled={disabled}
-                      format={String}
-                    >
-                      <FormattedMessage id="ui-tenant-settings.settings.location.locations.active">
-                        { label => (
-                          <option value="true">{label}</option>
-                        )}
-                      </FormattedMessage>
-                      <FormattedMessage id="ui-tenant-settings.settings.location.locations.inactive">
-                        { label => (
-                          <option value="false">{label}</option>
-                        )}
-                      </FormattedMessage>
-                    </Field>
-                  </Col>
-                </Row>
-                <Row>
-                  <Col xs={8}>
-                    <Field
-                      label={<FormattedMessage id="ui-tenant-settings.settings.location.locations.description" />}
-                      name="description"
-                      id="input-location-description"
-                      component={TextArea}
-                      fullWidth
-                      disabled={disabled}
-                    />
-                  </Col>
-                </Row>
-              </Accordion>
-              <Accordion
-                open={sections.detailsSection}
-                id="detailsSection"
-                onToggle={this.handleSectionToggle}
-                label={<FormattedMessage id="ui-tenant-settings.settings.location.locations.locationDetails" />}
-              >
-                <this.cDetailsField />
-              </Accordion>
-            </Pane>
-          </Paneset>
-        </form>
-      </TitleManager>
-    );
-  }
-}
+                    <FormattedMessage id="ui-tenant-settings.settings.location.locations.active">
+                      { label => (
+                        <option value="true">{label}</option>
+                      )}
+                    </FormattedMessage>
+                    <FormattedMessage id="ui-tenant-settings.settings.location.locations.inactive">
+                      { label => (
+                        <option value="false">{label}</option>
+                      )}
+                    </FormattedMessage>
+                  </Field>
+                </Col>
+              </Row>
+              <Row>
+                <Col xs={8}>
+                  <Field
+                    label={<FormattedMessage id="ui-tenant-settings.settings.location.locations.description" />}
+                    name="description"
+                    id="input-location-description"
+                    component={TextArea}
+                    fullWidth
+                    disabled={!stripes.hasPerm('settings.tenant-settings.enabled')}
+                  />
+                </Col>
+              </Row>
+            </Accordion>
+            <Accordion
+              open={sections.detailsSection}
+              id="detailsSection"
+              onToggle={handleSectionToggle}
+              label={<FormattedMessage id="ui-tenant-settings.settings.location.locations.locationDetails" />}
+            >
+              <DetailsField />
+            </Accordion>
+          </Pane>
+        </Paneset>
+      </form>
+    </TitleManager>
+  );
+};
 
+LocationForm.propTypes = {
+  institutions: PropTypes.arrayOf(PropTypes.object),
+  campuses: PropTypes.arrayOf(PropTypes.object),
+  libraries: PropTypes.arrayOf(PropTypes.object),
+  servicePoints: PropTypes.arrayOf(PropTypes.object),
+  initialValues: PropTypes.object,
+  handleSubmit: PropTypes.func.isRequired,
+  onCancel: PropTypes.func,
+  pristine: PropTypes.bool,
+  submitting: PropTypes.bool,
+  cloning: PropTypes.bool,
+  form: PropTypes.object.isRequired,
+  checkLocationHasHoldingsOrItems: PropTypes.func
+};
 
 export default stripesFinalForm({
   navigationCheck: true,
@@ -425,4 +369,4 @@ export default stripesFinalForm({
   },
   validate,
   validateOnBlur: true,
-})(withStripes(injectIntl(LocationForm)));
+})(LocationForm);
diff --git a/src/settings/LocationLocations/LocationForm/LocationFormContainer.js b/src/settings/LocationLocations/LocationForm/LocationFormContainer.js
index e1d0adfd..2853148c 100644
--- a/src/settings/LocationLocations/LocationForm/LocationFormContainer.js
+++ b/src/settings/LocationLocations/LocationForm/LocationFormContainer.js
@@ -1,31 +1,26 @@
-import React, {
-  useState,
-  useEffect,
-  useCallback,
-  useContext,
-} from 'react';
+import React, { useContext } from 'react';
 import { cloneDeep } from 'lodash';
 import { FormattedMessage } from 'react-intl';
+import PropTypes from 'prop-types';
+import { useQueryClient } from 'react-query';
 
 import { CalloutContext } from '@folio/stripes/core';
 
-import PropTypes from 'prop-types';
 import LocationForm from './LocationForm';
 import { useRemoteStorageApi } from '../RemoteStorage';
+import { useLocationCreate } from '../../../hooks/useLocationCreate';
+import { useLocationUpdate } from '../../../hooks/useLocationUpdate';
+import { LOCATIONS } from '../../../hooks/useLocations';
+import { SERVICE_POINTS } from '../../../hooks/useServicePoints';
 
 
 const LocationFormContainer = ({
   onSave,
   servicePointsByName,
   initialValues: location,
-  parentMutator,
   ...rest
 }) => {
-  const [initialValues, setInitialValues] = useState(location);
-
-  useEffect(() => {
-    setInitialValues(location);
-  }, [location?.id]);
+  const queryClient = useQueryClient();
 
   const callout = useContext(CalloutContext);
 
@@ -38,13 +33,27 @@ const LocationFormContainer = ({
 
   const { setMapping } = useRemoteStorageApi();
 
+  const { createLocation } = useLocationCreate({
+    onSuccess: () => {
+      queryClient.invalidateQueries(SERVICE_POINTS);
+      queryClient.invalidateQueries(LOCATIONS);
+    },
+  });
+
+  const { updateLocation } = useLocationUpdate({
+    onSuccess: () => {
+      queryClient.invalidateQueries(SERVICE_POINTS);
+      queryClient.invalidateQueries(LOCATIONS);
+    },
+  });
+
   const initiateSetMapping = (...args) => setMapping(...args).catch(showSubmitErrorCallout);
 
   const saveData = async (formData) => {
     const { remoteId: configurationId, ...locationData } = formData;
 
     if (locationData.id === undefined) {
-      const newLocation = await parentMutator.entries.POST(locationData);
+      const newLocation = await createLocation({ data: locationData });
       initiateSetMapping({ folioLocationId: newLocation?.id, configurationId });
 
       return newLocation;
@@ -52,10 +61,11 @@ const LocationFormContainer = ({
 
     initiateSetMapping({ folioLocationId: locationData.id, configurationId });
 
-    return parentMutator.entries.PUT(locationData);
+    return updateLocation({ locationId: locationData.id, data: locationData })
+      .then(() => locationData);
   };
 
-  const saveLocation = useCallback((updatedLocation) => {
+  const saveLocation = (updatedLocation) => {
     const data = cloneDeep(updatedLocation);
 
     const servicePointsObject = {};
@@ -83,13 +93,12 @@ const LocationFormContainer = ({
     saveData(data)
       .then(onSave)
       .catch(showSubmitErrorCallout);
-  }, [onSave, servicePointsByName, saveData]);
+  };
 
   return (
     <LocationForm
       {...rest}
-      parentMutator={parentMutator}
-      initialValues={initialValues}
+      initialValues={location}
       onSubmit={saveLocation}
     />
   );
@@ -101,12 +110,6 @@ LocationFormContainer.propTypes = {
   initialValues: PropTypes.shape({
     id: PropTypes.string,
   }),
-  parentMutator: PropTypes.shape({
-    entries: PropTypes.shape({
-      POST: PropTypes.func,
-      PUT: PropTypes.func,
-    })
-  }),
 };
 
 export default LocationFormContainer;
diff --git a/src/settings/LocationLocations/LocationForm/LocationFormContainer.test.js b/src/settings/LocationLocations/LocationForm/LocationFormContainer.test.js
index 6d9dcd06..47f766dd 100644
--- a/src/settings/LocationLocations/LocationForm/LocationFormContainer.test.js
+++ b/src/settings/LocationLocations/LocationForm/LocationFormContainer.test.js
@@ -1,13 +1,92 @@
 import React from 'react';
-
+import { QueryClient, QueryClientProvider } from 'react-query';
 import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import '../../../../test/jest/__mocks__';
-import buildStripes from '../../../../test/jest/__new_mocks__/stripesCore.mock';
 import { renderWithRouter } from '../../../../test/jest/helpers';
 
 import LocationFormContainer from './LocationFormContainer';
+import { mockUseOkapiKy } from '../../../../test/jest/__mocks__/stripesCore.mock';
+
+
+const mockCreateLocation = jest.fn(() => Promise.resolve());
+const mockUpdateLocation = jest.fn(() => Promise.resolve());
+
+
+jest.mock('../../../hooks/useLocationCreate', () => ({
+  useLocationCreate: jest.fn(() => ({
+    createLocation: mockCreateLocation,
+    isCreatingLocation: false,
+  })),
+}));
+
+jest.mock('../../../hooks/useLocationUpdate', () => ({
+  useLocationUpdate: jest.fn(() => ({
+    updateLocation: mockUpdateLocation,
+    isUpdatingLocation: false,
+  })),
+}));
+
+
+const institutions = [
+  {
+    code: 'KU',
+    id: '40ee00ca-a518-4b49-be01-0638d0a4ac57',
+    metadata: { createdDate: '2021-11-08T03:24:13.021+00:00', updatedDate: '2021-11-08T03:24:13.021+00:00' },
+    name: 'Københavns Universitet',
+  }
+];
+
+const campuses = [
+  {
+    code: 'DI',
+    id: '62cf76b7-cca5-4d33-9217-edf42ce1a848',
+    institutionId: '40ee00ca-a518-4b49-be01-0638d0a4ac57',
+    name: 'City Campus',
+  },
+  {
+    code: 'E',
+    id: '470ff1dd-937a-4195-bf9e-06bcfcd135df',
+    institutionId: '40ee00ca-a518-4b49-be01-0638d0a4ac57',
+    name: 'Online',
+  }
+];
+
+const libraries = [
+  {
+    campusId: '62cf76b7-cca5-4d33-9217-edf42ce1a848',
+    code: 'DI',
+    id: '5d78803e-ca04-4b4a-aeae-2c63b924518b',
+    name: 'Datalogisk Institut'
+  }
+];
+
+const servicePoints = [
+  {
+    code: 'cd1',
+    discoveryDisplayName: 'Circulation Desk -- Hallway',
+    holdShelfExpiryPeriod: { duration: 3, intervalId: 'Weeks' },
+    id: '3a40852d-49fd-4df2-a1f9-6e2641a6e91f',
+    name: 'Circ Desk 1',
+    pickupLocation: true,
+    staffSlips: [],
+  },
+  {
+    code: 'cd2',
+    discoveryDisplayName: 'Circulation Desk -- Back Entrance',
+    holdShelfExpiryPeriod: {
+      duration: 5,
+      intervalId: 'Days',
+    },
+
+    id: 'c4c90014-c8c9-4ade-8f24-b5e313319f4b',
+    name: 'Circ Desk 2',
+    pickupLocation: true,
+    staffSlips: []
+  }
+];
+
 
 jest.mock('./DetailsField', () => {
   return () => <span>DetaolsField</span>;
@@ -18,29 +97,18 @@ const mockSetMapping = jest.fn().mockResolvedValue(true);
 jest.mock('../RemoteStorage/Provider', () => ({
   ...jest.requireActual('../RemoteStorage/Provider'),
   useRemoteStorageApi: () => ({
-    remoteMap: {
-    },
-    mappings: {
-      failed: false,
-      hasLoaded: true,
-      isPending: false,
-      records: [
-        {
-          configurationId: 'de17bad7-2a30-4f1c-bee5-f653ded15629',
-          folioLocationId: '53cf956f-c1df-410b-8bea-27f712cca7c0'
-        },
-        {
-          configurationId: 'de17bad7-2a30-4f1c-bee5-f653ded15629',
-          folioLocationId: 'c0762159-8fe3-4cbc-ae64-fa274f7acc47'
-        }
-      ],
-    },
-    configurations: {
-      failed: false,
-      hasLoaded: true,
-      isPending: false,
-      records: [],
-    },
+    remoteMap: {},
+    mappings: [
+      {
+        configurationId: 'de17bad7-2a30-4f1c-bee5-f653ded15629',
+        folioLocationId: '53cf956f-c1df-410b-8bea-27f712cca7c0'
+      },
+      {
+        configurationId: 'de17bad7-2a30-4f1c-bee5-f653ded15629',
+        folioLocationId: 'c0762159-8fe3-4cbc-ae64-fa274f7acc47'
+      }
+    ],
+    configurations: [],
     translate: () => 'str',
     setMapping: mockSetMapping
   })
@@ -48,8 +116,6 @@ jest.mock('../RemoteStorage/Provider', () => ({
 
 const onSaveMock = jest.fn();
 
-const STRIPES = buildStripes();
-
 const initialValuesMock = {
   id: '1',
   name: 'Initial Value',
@@ -69,6 +135,7 @@ const initialValuesMock = {
     }
   ]
 };
+
 const servicePointsByNameMock = {
   CircDesk1: '3a40852d-49fd-4df2-a1f9-6e2641a6e91f',
   CircDesk2: 'c4c90014-c8c9-4ade-8f24-b5e313319f4b',
@@ -80,145 +147,28 @@ const restPropsMock = {
   pristine: false,
   submitting: false,
   cloning: true,
-  stripes: STRIPES,
-  locationResources: {
-    campuses: {
-      records: [
-        {
-          code: 'DI',
-          id: '62cf76b7-cca5-4d33-9217-edf42ce1a848',
-          institutionId: '40ee00ca-a518-4b49-be01-0638d0a4ac57',
-          name: 'City Campus',
-        },
-        {
-          code: 'E',
-          id: '470ff1dd-937a-4195-bf9e-06bcfcd135df',
-          institutionId: '40ee00ca-a518-4b49-be01-0638d0a4ac57',
-          name: 'Online',
-        }
-      ]
-    },
-    entries: {
-      records: [{
-        campusId: '62cf76b7-cca5-4d33-9217-edf42ce1a848',
-        code: 'KU/CC/DI/A',
-        id: '53cf956f-c1df-410b-8bea-27f712cca7c0',
-        institutionId: '40ee00ca-a518-4b49-be01-0638d0a4ac57',
-        isActive: true,
-        libraryId: '5d78803e-ca04-4b4a-aeae-2c63b924518b',
-        name: 'Annex',
-        primaryServicePoint: '3a40852d-49fd-4df2-a1f9-6e2641a6e91f',
-        servicePointIds: ['3a40852d-49fd-4df2-a1f9-6e2641a6e91f'],
-        servicePoints: [],
-      }
-      ]
-    },
-    institutions: {
-      records: [
-        {
-          code: 'KU',
-          id: '40ee00ca-a518-4b49-be01-0638d0a4ac57',
-          metadata: { createdDate: '2021-11-08T03:24:13.021+00:00', updatedDate: '2021-11-08T03:24:13.021+00:00' },
-          name: 'Københavns Universitet',
-        }
-      ]
-    },
-    libraries: {
-      dataKey: 'location-locations',
-      hasLoaded: true,
-      records: [
-        {
-          campusId: '62cf76b7-cca5-4d33-9217-edf42ce1a848',
-          code: 'DI',
-          id: '5d78803e-ca04-4b4a-aeae-2c63b924518b',
-          name: 'Datalogisk Institut'
-        }
-      ]
-    },
-    servicePoints: {
-      records: [
-        {
-          code: 'cd1',
-          discoveryDisplayName: 'Circulation Desk -- Hallway',
-          holdShelfExpiryPeriod: { duration: 3, intervalId: 'Weeks' },
-          id: '3a40852d-49fd-4df2-a1f9-6e2641a6e91f',
-          name: 'Circ Desk 1',
-          pickupLocation: true,
-          staffSlips: [],
-        },
-        {
-          code: 'cd2',
-          discoveryDisplayName: 'Circulation Desk -- Back Entrance',
-          holdShelfExpiryPeriod: {
-            duration: 5,
-            intervalId: 'Days',
-          },
-
-          id: 'c4c90014-c8c9-4ade-8f24-b5e313319f4b',
-          name: 'Circ Desk 2',
-          pickupLocation: true,
-          staffSlips: []
-        }
-      ]
-    },
-    locations: {
-      records: []
-    }
-  }
-};
-
-const mutatorMock = {
-  servicePoints: {
-    POST: jest.fn(() => Promise.resolve()),
-    PUT: jest.fn(() => Promise.resolve()),
-    DELETE: jest.fn(() => Promise.resolve()),
-  },
-  institutions: {
-    GET: jest.fn(() => Promise.resolve()),
-    reset: jest.fn(() => Promise.resolve()),
-  },
-  campuses: {
-    GET: jest.fn(() => Promise.resolve()),
-    reset: jest.fn(() => Promise.resolve()),
-  },
-  libraries: {
-    GET: jest.fn(() => Promise.resolve()),
-    reset: jest.fn(() => Promise.resolve()),
-  },
-  holdingsEntries: {
-    GET: jest.fn(() => Promise.resolve()),
-    reset: jest.fn(() => Promise.resolve()),
-  },
-  itemEntries: {
-    GET: jest.fn(() => Promise.resolve()),
-    reset: jest.fn(() => Promise.resolve()),
-  },
-  entries: {
-    DELETE: jest.fn(() => Promise.resolve()),
-    POST: jest.fn(() => Promise.resolve()),
-    PUT: jest.fn(() => Promise.resolve()),
-  },
-  uniquenessValidator: {
-    DELETE: jest.fn(() => Promise.resolve()),
-    GET: jest.fn(() => Promise.resolve()),
-    POST: jest.fn(() => Promise.resolve()),
-    PUT: jest.fn(() => Promise.resolve()),
-    cancel: jest.fn(() => Promise.resolve()),
-    reset: jest.fn(() => Promise.resolve()),
-  }
 };
 
 const renderLocationFormContainer = () => renderWithRouter(
-  <LocationFormContainer
-    onSave={onSaveMock}
-    servicePointsByName={servicePointsByNameMock}
-    initialValues={initialValuesMock}
-    parentMutator={mutatorMock}
-    {...restPropsMock}
-  />
+  <QueryClientProvider client={new QueryClient()}>
+    <LocationFormContainer
+      onSave={onSaveMock}
+      servicePointsByName={servicePointsByNameMock}
+      initialValues={initialValuesMock}
+      institutions={institutions}
+      campuses={campuses}
+      libraries={libraries}
+      servicePoints={servicePoints}
+      {...restPropsMock}
+    />
+  </QueryClientProvider>
 );
 
 describe('LocationFormContainer', () => {
+  mockUseOkapiKy.mockImplementation(() => ({
+    get: jest.fn(() => ({ json: jest.fn().mockResolvedValue(Promise.resolve()) })),
+  }));
+
   it('should render ServicePointManager titles', () => {
     renderLocationFormContainer();
 
diff --git a/src/settings/LocationLocations/LocationForm/RemoteStorageField.js b/src/settings/LocationLocations/LocationForm/RemoteStorageField.js
index 143d06fa..2a03c3f8 100644
--- a/src/settings/LocationLocations/LocationForm/RemoteStorageField.js
+++ b/src/settings/LocationLocations/LocationForm/RemoteStorageField.js
@@ -1,11 +1,12 @@
 import React, { useState, useEffect, useMemo } from 'react';
+import PropTypes from 'prop-types';
 import { useField } from 'react-final-form';
 
 import { useStripes } from '@folio/stripes/core';
 
-import PropTypes from 'prop-types';
 import { Control, useRemoteStorageApi } from '../RemoteStorage';
 
+
 export const RemoteStorageField = ({ initialValues, checkLocationHasHoldingsOrItems }) => {
   const stripes = useStripes();
   const noInterfaces = useMemo(
@@ -13,7 +14,7 @@ export const RemoteStorageField = ({ initialValues, checkLocationHasHoldingsOrIt
     [stripes]
   );
 
-  const { remoteMap, mappings, translate: t } = useRemoteStorageApi();
+  const { remoteMap, isMappingsError, isMappingsLoading, translate: t } = useRemoteStorageApi();
 
   const [isReadOnly, setIsReadOnly] = useState(true);
 
@@ -40,16 +41,14 @@ export const RemoteStorageField = ({ initialValues, checkLocationHasHoldingsOrIt
 
   if (noInterfaces) return null;
 
-  const message = (mappings.failed && t('failed')) || (mappings.isPending && t('loading')) || (isReadOnly && t('readonly'));
-
-  const isDisabled = !mappings.hasLoaded;
+  const message = (isMappingsError && t('failed')) || (isMappingsLoading && t('loading')) || (isReadOnly && t('readonly'));
 
   return (
     <Control
       label={t('remote')}
       required
-      disabled={isDisabled}
-      readOnly={isReadOnly && !isDisabled}
+      disabled={isMappingsLoading}
+      readOnly={isReadOnly && !isMappingsLoading}
       message={message}
       {...field}
     />
diff --git a/src/settings/LocationLocations/LocationForm/ServicePointsFields.js b/src/settings/LocationLocations/LocationForm/ServicePointsFields.js
index 14bf5568..b94561ee 100644
--- a/src/settings/LocationLocations/LocationForm/ServicePointsFields.js
+++ b/src/settings/LocationLocations/LocationForm/ServicePointsFields.js
@@ -4,6 +4,7 @@ import { Field } from 'react-final-form';
 import { FieldArray } from 'react-final-form-arrays';
 import PropTypes from 'prop-types';
 import { sortBy, cloneDeep, findIndex } from 'lodash';
+
 import {
   Icon,
   Layout,
@@ -11,8 +12,10 @@ import {
   RepeatableField,
   Select,
 } from '@folio/stripes/components';
+
 import css from './ServicePointsFields.css';
 
+
 const omitUsedOptions = (list, usedValues, key, id) => {
   const unUsedValues = cloneDeep(list);
   if (usedValues) {
@@ -30,24 +33,10 @@ const omitUsedOptions = (list, usedValues, key, id) => {
   return unUsedValues;
 };
 
-class ServicePointsFields extends React.Component {
-  static propTypes = {
-    servicePoints: PropTypes.arrayOf(PropTypes.object),
-    changePrimary: PropTypes.func.isRequired,
-    formValues: PropTypes.object.isRequired,
-  };
-
-  constructor(props) {
-    super(props);
-    this.singlePrimary = this.singlePrimary.bind(this);
-    this.renderFields = this.renderFields.bind(this);
-    this.radioButtonComp = this.radioButtonComp.bind(this);
-    this.list = {};
-  }
-
-  singlePrimary(id) {
-    const { changePrimary, formValues } = this.props;
+const ServicePointsFields = ({ servicePoints, changePrimary, formValues }) => {
+  const list = omitUsedOptions(servicePoints, formValues.servicePointIds, 'selectSP');
 
+  const singlePrimary = (id) => {
     formValues.servicePointIds.forEach((a, i) => {
       if (i === id) {
         changePrimary(i, true);
@@ -55,25 +44,22 @@ class ServicePointsFields extends React.Component {
         changePrimary(i, false);
       }
     });
-  }
+  };
 
-  radioButtonComp({ input, ...props }) {
+  const radioButtonComp = ({ input, fieldIndex }) => {
     return (
       <RadioButton
-        onChange={() => { this.singlePrimary(props.fieldIndex); }}
+        onChange={() => { singlePrimary(fieldIndex); }}
         checked={input.value}
         name={input.name}
-        aria-label={`servicePoint use as primary ${props.fieldIndex}`}
+        aria-label={`servicePoint use as primary ${fieldIndex}`}
       />
     );
-  }
-
-  renderFields(field, index) {
-    const { formValues } = this.props;
-
-    this.list = omitUsedOptions(this.props.servicePoints, formValues.servicePointIds, 'selectSP', index);
+  };
 
-    const sortedList = sortBy(this.list, ['label']);
+  const renderFields = (field, index) => {
+    const availableOptions = omitUsedOptions(servicePoints, formValues.servicePointIds, 'selectSP', index);
+    const sortedList = sortBy(availableOptions, ['label']);
     const options = [{ label: 'Select service point', value: '' }, ...sortedList];
 
     return (
@@ -95,52 +81,54 @@ class ServicePointsFields extends React.Component {
         </Layout>
         <Layout className={`display-flex ${css.radioButtonLayout}`}>
           <Field
-            component={this.radioButtonComp}
+            component={radioButtonComp}
             fieldIndex={index}
             name={`${field}.primary`}
           />
         </Layout>
       </Layout>
     );
-  }
-
-  render() {
-    const { formValues } = this.props;
+  };
 
-    // make the last existing service point to be the primary one
-    if (formValues.servicePointIds && formValues.servicePointIds.length === 1 && !formValues.servicePointIds[0].primary) {
-      this.singlePrimary(0);
-    }
+  // Make the last existing service point to be the primary one
+  if (formValues.servicePointIds && formValues.servicePointIds.length === 1 && !formValues.servicePointIds[0].primary) {
+    singlePrimary(0);
+  }
 
-    const legend = (
-      <Layout className="display-flex">
-        <Layout className={`${css.label} ${css.servicePointsLabel}`}>
-          <FormattedMessage id="ui-tenant-settings.settings.location.locations.servicePoints" />
-          <span className={css.asterisk}>*</span>
-        </Layout>
-        <Layout className={`${css.label} ${css.primaryLabel}`}>
-          <FormattedMessage id="ui-tenant-settings.settings.location.locations.primary" />
-        </Layout>
+  const legend = (
+    <Layout className="display-flex">
+      <Layout className={`${css.label} ${css.servicePointsLabel}`}>
+        <FormattedMessage id="ui-tenant-settings.settings.location.locations.servicePoints" />
+        <span className={css.asterisk}>*</span>
       </Layout>
-    );
+      <Layout className={`${css.label} ${css.primaryLabel}`}>
+        <FormattedMessage id="ui-tenant-settings.settings.location.locations.primary" />
+      </Layout>
+    </Layout>
+  );
 
-    return (
-      <>
-        <FieldArray
-          addLabel={
-            Object.keys(this.list).length > 1 ?
-              <Icon icon="plus-sign">Add service point</Icon> :
-              ''
-          }
-          legend={legend}
-          emptyMessage={<span className={css.emptyMessage}>Location must have at least one service point</span>}
-          component={RepeatableField}
-          name="servicePointIds"
-          renderField={this.renderFields}
-        />
-      </>
-    );
-  }
-}
+  return (
+    <>
+      <FieldArray
+        addLabel={
+          Object.keys(list).length > 1 ?
+            <Icon icon="plus-sign">Add service point</Icon> :
+            ''
+        }
+        legend={legend}
+        emptyMessage={<span className={css.emptyMessage}>Location must have at least one service point</span>}
+        component={RepeatableField}
+        name="servicePointIds"
+        renderField={renderFields}
+      />
+    </>
+  );
+};
+
+ServicePointsFields.propTypes = {
+  servicePoints: PropTypes.arrayOf(PropTypes.object),
+  changePrimary: PropTypes.func.isRequired,
+  formValues: PropTypes.object.isRequired,
+};
 
 export default ServicePointsFields;
diff --git a/src/settings/LocationLocations/LocationManager.js b/src/settings/LocationLocations/LocationManager.js
index 310f35a9..9ea9a294 100644
--- a/src/settings/LocationLocations/LocationManager.js
+++ b/src/settings/LocationLocations/LocationManager.js
@@ -1,20 +1,24 @@
-import React from 'react';
+import React, { useState, useRef } from 'react';
 import PropTypes from 'prop-types';
-import { Route } from 'react-router-dom';
-
+import {
+  Route,
+  useHistory,
+  useLocation,
+  useRouteMatch
+} from 'react-router-dom';
 import {
   FormattedMessage,
-  injectIntl,
+  useIntl,
 } from 'react-intl';
 import {
   cloneDeep,
   find,
   isEmpty,
   omit,
-  get,
   forEach,
 } from 'lodash';
 import queryString from 'query-string';
+import { useQueryClient } from 'react-query';
 
 import {
   SearchAndSortQuery,
@@ -32,8 +36,12 @@ import {
   Layer,
   Callout,
 } from '@folio/stripes/components';
+import {
+  TitleManager,
+  useOkapiKy,
+  useStripes
+} from '@folio/stripes/core';
 
-import { TitleManager } from '@folio/stripes/core';
 import {
   LOCATION_CAMPUS_ID_KEY,
   LOCATION_INSTITUTION_ID_KEY,
@@ -43,327 +51,181 @@ import {
 import LocationDetail from './LocationDetail';
 import EditForm from './LocationForm';
 import { RemoteStorageApiProvider } from './RemoteStorage';
-
-class LocationManager extends React.Component {
-  static manifest = Object.freeze({
-    entries: {
-      type: 'okapi',
-      records: 'locations',
-      path: 'locations',
-      params: {
-        query: 'cql.allRecords=1 sortby name',
-        limit: '3000',
-      },
-    },
-    uniquenessValidator: {
-      type: 'okapi',
-      records: 'locations',
-      accumulate: 'true',
-      path: 'locations',
-      fetch: false,
-    },
-    institutions: {
-      type: 'okapi',
-      path: 'location-units/institutions',
-      params: {
-        query: 'cql.allRecords=1 sortby name',
-        limit: '1000',
-      },
-      records: 'locinsts',
-      accumulate: true,
-    },
-    campuses: {
-      type: 'okapi',
-      path: 'location-units/campuses',
-      params: {
-        query: 'cql.allRecords=1 sortby name',
-        limit: '1000',
-      },
-      records: 'loccamps',
-      accumulate: true,
-    },
-    libraries: {
-      type: 'okapi',
-      path: 'location-units/libraries',
-      params: {
-        query: 'cql.allRecords=1 sortby name',
-        limit: '1000',
-      },
-      records: 'loclibs',
-      accumulate: true,
-    },
-    servicePoints: {
-      type: 'okapi',
-      records: 'servicepoints',
-      path: 'service-points',
-      params: {
-        query: 'cql.allRecords=1 sortby name',
-        limit: '1000',
-      },
-      resourceShouldRefresh: true,
-    },
-    holdingsEntries: {
-      type: 'okapi',
-      path: 'holdings-storage/holdings',
-      records: 'holdingsRecords',
-      accumulate: true,
-    },
-    itemEntries: {
-      type: 'okapi',
-      path: 'inventory/items',
-      records: 'items',
-      accumulate: true,
-    },
-  });
-
-  static propTypes = {
-    intl: PropTypes.object,
-    label: PropTypes.node.isRequired,
-    location: PropTypes.shape({
-      search: PropTypes.string,
-      pathname: PropTypes.string,
-    }).isRequired,
-    history: PropTypes.shape({ push: PropTypes.func.isRequired }).isRequired,
-    match: PropTypes.shape({ path: PropTypes.string.isRequired }).isRequired,
-    resources: PropTypes.shape({
-      entries: PropTypes.shape({ records: PropTypes.arrayOf(PropTypes.object) }),
-      servicePoints: PropTypes.shape({ records: PropTypes.arrayOf(PropTypes.object),
-        hasLoaded: PropTypes.bool }),
-      institutions: PropTypes.shape({ records: PropTypes.arrayOf(PropTypes.object) }),
-      campuses: PropTypes.shape({ records: PropTypes.arrayOf(PropTypes.object) }),
-      libraries: PropTypes.shape({ records: PropTypes.arrayOf(PropTypes.object) }),
-    }).isRequired,
-    mutator: PropTypes.shape({
-      entries: PropTypes.shape({
-        POST: PropTypes.func,
-        PUT: PropTypes.func,
-        DELETE: PropTypes.func,
-      }),
-      servicePoints: PropTypes.shape({
-        POST: PropTypes.func,
-        PUT: PropTypes.func,
-        DELETE: PropTypes.func,
-      }),
-      institutions: PropTypes.shape({
-        GET: PropTypes.func.isRequired,
-        reset: PropTypes.func.isRequired,
-      }),
-      campuses: PropTypes.shape({
-        GET: PropTypes.func.isRequired,
-        reset: PropTypes.func.isRequired,
-      }),
-      libraries: PropTypes.shape({
-        GET: PropTypes.func.isRequired,
-        reset: PropTypes.func.isRequired,
-      }),
-      holdingsEntries: PropTypes.shape({
-        GET: PropTypes.func.isRequired,
-        reset: PropTypes.func.isRequired,
-      }),
-      itemEntries: PropTypes.shape({
-        GET: PropTypes.func.isRequired,
-        reset: PropTypes.func.isRequired,
-      }),
-      uniquenessValidator: PropTypes.object,
-    }).isRequired,
-    stripes: PropTypes.shape({
-      hasPerm: PropTypes.func.isRequired,
-      connect: PropTypes.func.isRequired,
-      hasInterface: PropTypes.func.isRequired,
-    }),
+import { useInstitutions } from '../../hooks/useInstitutions';
+import { useLibraries } from '../../hooks/useLibraries';
+import { useCampuses } from '../../hooks/useCampuses';
+import { SERVICE_POINTS, useServicePoints } from '../../hooks/useServicePoints';
+import { LOCATIONS, useLocations } from '../../hooks/useLocations';
+import { useLocationDelete } from '../../hooks/useLocationDelete';
+
+
+const initialSelectedLocationId = (location) => {
+  const idFromPathnameRe = '/([^/]+)$';
+  const reMatches = new RegExp(idFromPathnameRe).exec(location.pathname);
+  return reMatches ? reMatches[1] : null;
+};
+
+const initialSort = (location) => {
+  const { sort = 'name', sortDir = SORT_TYPES.ASCENDING } = queryString.parse(location.search.slice(1));
+  return { sort, sortDir };
+};
+
+const LocationManager = ({ label }) => {
+  const intl = useIntl();
+  const stripes = useStripes();
+  const queryClient = useQueryClient();
+  const ky = useOkapiKy();
+  const callout = useRef(null);
+  const location = useLocation();
+  const history = useHistory();
+  const match = useRouteMatch();
+
+  const entryLabel = intl.formatMessage({ id: 'ui-tenant-settings.settings.location.locations.location' });
+  const locationListVisibleColumns = ['isActive', 'name', 'code'];
+  const locationListColumnMapping = {
+    isActive: intl.formatMessage({ id: 'ui-tenant-settings.settings.location.locations.status' }),
+    name: intl.formatMessage({ id: 'ui-tenant-settings.settings.location.locations.detailsName' }),
+    code: intl.formatMessage({ id: 'ui-tenant-settings.settings.location.code' }),
   };
-
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      institutionId: sessionStorage.getItem(LOCATION_INSTITUTION_ID_KEY) || '',
-      campusId: sessionStorage.getItem(LOCATION_CAMPUS_ID_KEY) || '',
-      libraryId: sessionStorage.getItem(LOCATION_LIBRARY_ID_KEY) || '',
-      servicePointsById: {},
-      servicePointsByName: {},
-      selectedId: this.initialSelectedLocationId,
-      ...this.initialSort,
-    };
-
-    this.callout = React.createRef();
-
-    const { formatMessage } = props.intl;
-
-    this.entryLabel = formatMessage({ id: 'ui-tenant-settings.settings.location.locations.location' });
-    this.locationListVisibleColumns = ['isActive', 'name', 'code'];
-    this.locationListColumnMapping = {
-      isActive: formatMessage({ id: 'ui-tenant-settings.settings.location.locations.status' }),
-      name: formatMessage({ id: 'ui-tenant-settings.settings.location.locations.detailsName' }),
-      code: formatMessage({ id: 'ui-tenant-settings.settings.location.code' }),
-    };
-    this.locationListFormatter = {
-      isActive: item => {
-        const locationId = item.isActive ? 'active' : 'inactive';
-
-        return formatMessage({ id: `ui-tenant-settings.settings.location.locations.${locationId}` });
-      }
-    };
-    this.hasAllLocationPerms = props.stripes.hasPerm('ui-tenant-settings.settings.location');
-  }
-
-  static getDerivedStateFromProps(nextProps) {
-    const { resources } = nextProps;
-    const servicePointsByName = {};
-    if (resources.servicePoints && resources.servicePoints.hasLoaded) {
-      const servicePointsById = ((resources.servicePoints || {}).records || []).reduce((map, item) => {
-        map[item.id] = item.name;
-        servicePointsByName[item.name] = item.id;
-        return map;
-      }, {});
-      return { servicePointsById, servicePointsByName };
+  const locationListFormatter = {
+    isActive: item => {
+      const locationId = item.isActive ? 'active' : 'inactive';
+      return intl.formatMessage({ id: `ui-tenant-settings.settings.location.locations.${locationId}` });
     }
-    return null;
-  }
-
-  /**
-   * Refresh lookup tables when the component mounts. Fetches in the manifest
-   * will only run once (in the constructor) but because this object may be
-   * unmounted/remounted without being destroyed/recreated, the lookup tables
-   * will be stale if they change between unmounting/remounting.
-   */
-  componentDidMount() {
-    ['institutions', 'campuses', 'libraries'].forEach(i => {
-      this.props.mutator[i].reset();
-      this.props.mutator[i].GET();
-    });
-  }
-
-  get initialSelectedLocationId() {
-    const { location } = this.props;
+  };
+  const hasAllLocationPerms = stripes.hasPerm('ui-tenant-settings.settings.location');
 
-    const idFromPathnameRe = '/([^/]+)$';
-    const reMatches = new RegExp(idFromPathnameRe).exec(location.pathname);
+  const showCalloutMessage = (name) => {
+    if (!callout.current) return;
+    const message = (
+      <FormattedMessage
+        id="stripes-core.successfullyDeleted"
+        values={{
+          entry: entryLabel,
+          name: name || '',
+        }}
+      />
+    );
+    callout.current.sendCallout({ message });
+  };
 
-    return reMatches ? reMatches[1] : null;
-  }
+  const [institutionId, setInstitutionId] = useState(sessionStorage.getItem(LOCATION_INSTITUTION_ID_KEY) || '');
+  const [campusId, setCampusId] = useState(sessionStorage.getItem(LOCATION_CAMPUS_ID_KEY) || '');
+  const [libraryId, setLibraryId] = useState(sessionStorage.getItem(LOCATION_LIBRARY_ID_KEY) || '');
+  const [selectedId, setSelectedId] = useState(initialSelectedLocationId(location));
+  const [sortState, setSortState] = useState(initialSort(location));
+
+  const { institutions } = useInstitutions({ searchParams: {
+    limit: 100,
+    query: 'cql.allRecords=1 sortby name',
+  } });
+
+  const { libraries } = useLibraries({ searchParams: {
+    limit: 1000,
+    query: 'cql.allRecords=1 sortby name',
+  } });
+
+  const { campuses } = useCampuses({ searchParams: {
+    limit: 1000,
+    query: 'cql.allRecords=1 sortby name',
+  } });
+
+  const { servicePoints } = useServicePoints({ searchParams: {
+    limit: 1000,
+    query: 'cql.allRecords=1 sortby name',
+  } });
+
+  const { locations: locationEntries } = useLocations({ searchParams: {
+    limit: 3000,
+    query: 'cql.allRecords=1 sortby name'
+  } });
+
+  const { deleteLocation } = useLocationDelete({
+    onSuccess: () => {
+      queryClient.invalidateQueries(SERVICE_POINTS);
+      queryClient.invalidateQueries(LOCATIONS);
+    }
+  });
 
-  get initialSort() {
-    const { location: { search } } = this.props;
+  const { servicePointsById, servicePointsByName } = servicePoints.reduce((acc, item) => {
+    acc.servicePointsById[item.id] = item.name;
+    acc.servicePointsByName[item.name] = item.id;
 
-    const {
-      sort = 'name',
-      sortDir = SORT_TYPES.ASCENDING,
-    } = queryString.parse(search.slice(1));
+    return acc;
+  }, { servicePointsById: {}, servicePointsByName: {} });
 
-    return {
-      sort,
-      sortDir,
-    };
-  }
+  const transitionToParams = (values) => {
+    const url = buildUrl(location, values);
+    history.push(url);
+  };
 
-  onSort = (e, { name: fieldName }) => {
-    const {
-      sort,
-      sortDir,
-    } = this.state;
+  const formatLocationDisplayName = (loc) => {
+    return `${loc.name}${loc.code ? ` (${loc.code})` : ''}`;
+  };
 
+  const onSort = (e, { name: fieldName }) => {
+    const { sort, sortDir } = sortState;
     const isSameField = sort === fieldName;
     let newSortDir = SORT_TYPES.ASCENDING;
-
     if (isSameField) {
       newSortDir = newSortDir === sortDir ? SORT_TYPES.DESCENDING : newSortDir;
     }
-
-    const sortState = {
-      sort: fieldName,
-      sortDir: newSortDir,
-    };
-
-    this.setState(sortState);
-    this.transitionToParams(sortState);
+    const newSortState = { sort: fieldName, sortDir: newSortDir };
+    setSortState(newSortState);
+    transitionToParams(newSortState);
   };
 
-  onSelectRow = (e, meta) => {
-    const { match: { path } } = this.props;
-
-    this.transitionToParams({ _path: `${path}/${meta.id}` });
-    this.setState({ selectedId: meta.id });
+  const onSelectRow = (e, meta) => {
+    transitionToParams({ _path: `${match.path}/${meta.id}` });
+    setSelectedId(meta.id);
   };
 
-  transitionToParams(values) {
-    const {
-      location,
-      history,
-    } = this.props;
-
-    const url = buildUrl(location, values);
-
-    history.push(url);
-  }
-
-  onChangeInstitution = (e) => {
-    const institutionId = e.target.value;
-
-    sessionStorage.setItem(LOCATION_INSTITUTION_ID_KEY, institutionId);
+  const onChangeInstitution = (e) => {
+    const newInstitutionId = e.target.value;
+    sessionStorage.setItem(LOCATION_INSTITUTION_ID_KEY, newInstitutionId);
     sessionStorage.setItem(LOCATION_CAMPUS_ID_KEY, '');
     sessionStorage.setItem(LOCATION_LIBRARY_ID_KEY, '');
-
-    this.setState({
-      institutionId,
-      campusId: '',
-      libraryId: '',
-    });
+    setInstitutionId(newInstitutionId);
+    setCampusId('');
+    setLibraryId('');
   };
 
-  onChangeCampus = (e) => {
-    const campusId = e.target.value;
-
-    sessionStorage.setItem(LOCATION_CAMPUS_ID_KEY, campusId);
-
-    this.setState({
-      campusId,
-      libraryId: '',
-    });
+  const onChangeCampus = (e) => {
+    const newCampusId = e.target.value;
+    sessionStorage.setItem(LOCATION_CAMPUS_ID_KEY, newCampusId);
+    setCampusId(newCampusId);
+    setLibraryId('');
   };
 
-  onChangeLibrary = (e) => {
-    const libraryId = e.target.value;
-
-    sessionStorage.setItem(LOCATION_LIBRARY_ID_KEY, libraryId);
-
-    this.setState({ libraryId });
+  const onChangeLibrary = (e) => {
+    const newLibraryId = e.target.value;
+    sessionStorage.setItem(LOCATION_LIBRARY_ID_KEY, newLibraryId);
+    setLibraryId(newLibraryId);
   };
 
-  renderFilter() {
-    const {
-      resources,
-      location,
-      intl: { formatMessage },
-    } = this.props;
-    const {
-      institutionId,
-      campusId,
-      libraryId,
-    } = this.state;
-
-    const institutions = get(resources.institutions, 'records', [])
+  const renderFilter = () => {
+    const formattedInstitutions = institutions
       .map(institution => ({
         value: institution.id,
-        label: this.formatLocationDisplayName(institution),
+        label: formatLocationDisplayName(institution),
       }));
 
-    if (isEmpty(institutions)) {
+    if (isEmpty(formattedInstitutions)) {
       return <div />;
     }
 
-    const campuses = get(resources.campuses, 'records', [])
+    const formattedCampuses = campuses
       .filter(campus => campus.institutionId === institutionId)
       .map(campus => ({
         value: campus.id,
-        label: this.formatLocationDisplayName(campus),
+        label: formatLocationDisplayName(campus),
       }));
 
-    const libraries = get(resources.libraries, 'records', [])
+    const formattedLibraries = libraries
       .filter(library => library.campusId === campusId)
       .map(library => ({
         value: library.id,
-        label: this.formatLocationDisplayName(library),
+        label: formatLocationDisplayName(library),
       }));
 
     return (
@@ -374,8 +236,8 @@ class LocationManager extends React.Component {
             id="institutionSelect"
             name="institutionSelect"
             value={institutionId}
-            dataOptions={[{ label: formatMessage({ id: 'ui-tenant-settings.settings.location.institutions.selectInstitution' }), value: '' }, ...institutions]}
-            onChange={this.onChangeInstitution}
+            dataOptions={[{ label: intl.formatMessage({ id: 'ui-tenant-settings.settings.location.institutions.selectInstitution' }), value: '' }, ...formattedInstitutions]}
+            onChange={onChangeInstitution}
           />
         </div>
         <div data-test-campus-select>
@@ -384,25 +246,25 @@ class LocationManager extends React.Component {
             id="campusSelect"
             name="campusSelect"
             value={campusId}
-            dataOptions={[{ label: formatMessage({ id: 'ui-tenant-settings.settings.location.campuses.selectCampus' }), value: '' }, ...campuses]}
-            onChange={this.onChangeCampus}
+            dataOptions={[{ label: intl.formatMessage({ id: 'ui-tenant-settings.settings.location.campuses.selectCampus' }), value: '' }, ...formattedCampuses]}
+            onChange={onChangeCampus}
           />}
         </div>
         <div data-test-library-select>
           {campusId && <Select
             label={<FormattedMessage id="ui-tenant-settings.settings.location.libraries.library" />}
             id="librarySelect"
-            name="campusSelect"
+            name="librarySelect"
             value={libraryId}
-            dataOptions={[{ label: formatMessage({ id: 'ui-tenant-settings.settings.location.libraries.selectLibrary' }), value: '' }, ...libraries]}
-            onChange={this.onChangeLibrary}
+            dataOptions={[{ label: intl.formatMessage({ id: 'ui-tenant-settings.settings.location.libraries.selectLibrary' }), value: '' }, ...formattedLibraries]}
+            onChange={onChangeLibrary}
           />}
         </div>
         <Row between="xs">
           <Col xs>
             <Headline size="medium" margin="none"><FormattedMessage id="ui-tenant-settings.settings.location.locations" /></Headline>
           </Col>
-          {this.hasAllLocationPerms && (
+          {hasAllLocationPerms && (
             <Col xs>
               <Row end="xs">
                 <Col xs>
@@ -426,249 +288,186 @@ class LocationManager extends React.Component {
         }
       </div>
     );
-  }
-
-  formatLocationDisplayName(location) {
-    return `${location.name}${location.code ? ` (${location.code})` : ''}`;
-  }
+  };
 
-  parseInitialValues(loc, cloning = false) {
+  const parseInitialValues = (loc, cloning = false) => {
     if (!loc) return loc;
-
-    loc.detailsArray = Object.keys(loc.details || []).map(name => {
-      return { name, value: loc.details[name] };
-    }).sort();
-
+    loc.detailsArray = Object.keys(loc.details || []).map(name => ({ name, value: loc.details[name] })).sort();
     return cloning ? omit(loc, 'id') : loc;
-  }
-
-  handleDetailClose = () => {
-    this.transitionToParams({ _path: this.props.match.path });
-    this.setState({ selectedId: null });
   };
 
-  prepareLocationsData() {
-    const { resources } = this.props;
-    const {
-      sort,
-      sortDir,
-    } = this.state;
+  const handleDetailClose = () => {
+    transitionToParams({ _path: match.path });
+    setSelectedId(null);
+  };
 
+  const prepareLocationsData = () => {
+    const { sort, sortDir } = sortState;
     const sortDirValue = sortDir === SORT_TYPES.ASCENDING ? 1 : -1;
-
-    return cloneDeep((resources.entries || {}).records || []).map(location => {
-      location.servicePointIds = (location.servicePointIds || []).map(id => ({
-        selectSP: this.state.servicePointsById[id],
-        primary: (location.primaryServicePoint === id),
+    return cloneDeep((locationEntries)).map(loc => {
+      loc.servicePointIds = (loc.servicePointIds || []).map(id => ({
+        selectSP: servicePointsById[id],
+        primary: (loc.primaryServicePoint === id),
       }));
 
-      return location;
+      return loc;
     }).sort((a, b) => sortDirValue * `${a[sort]}`.localeCompare(`${b[sort]}`));
-  }
+  };
 
-  onCancel = (e) => {
+  const onCancel = (e) => {
     if (e) {
       e.preventDefault();
     }
-
-    this.transitionToParams({ layer: null });
+    transitionToParams({ layer: null });
   };
 
-  handleDetailEdit = location => {
-    this.setState({ selectedId: location.id });
-    this.transitionToParams({ layer: 'edit' });
+  const handleDetailEdit = loc => {
+    setSelectedId(loc.id);
+    transitionToParams({ layer: 'edit' });
   };
 
-  handleDetailClone = location => {
-    this.setState({ selectedId: location.id });
-    this.transitionToParams({ layer: 'clone' });
+  const handleDetailClone = loc => {
+    setSelectedId(loc.id);
+    transitionToParams({ layer: 'clone' });
   };
 
-  checkLocationHasHoldingsOrItems = async (locationId) => {
-    const { mutator } = this.props;
+  const checkLocationHasHoldingsOrItems = async (locationId) => {
     const query = `permanentLocationId=="${locationId}" or temporaryLocationId=="${locationId}"`;
 
-    mutator.holdingsEntries.reset();
-    mutator.itemEntries.reset();
-
     const results = await Promise.all([
-      mutator.holdingsEntries.GET({ params: { query } }),
-      mutator.itemEntries.GET({ params: { query } }),
+      ky.get('inventory/items', { searchParams: { query } }).json(),
+      ky.get('holdings-storage/holdings', { searchParams: { query } }).json(),
     ]);
 
     return results.some(records => records.length > 0);
   };
 
-  onRemove = location => {
-    const {
-      match,
-      mutator,
-    } = this.props;
-
-    return this.checkLocationHasHoldingsOrItems(location.id)
-      .then(hasSomething => !hasSomething && mutator.entries.DELETE(location))
+  const onRemove = loc => {
+    return checkLocationHasHoldingsOrItems(loc.id)
+      .then(hasSomething => !hasSomething && deleteLocation({ locationId: loc.id }))
       .then(result => {
         const isRemoved = (result !== false);
-
         if (isRemoved) {
-          this.showCalloutMessage(location.name);
-          this.transitionToParams({
+          showCalloutMessage(loc.name);
+          transitionToParams({
             _path: `${match.path}`,
             layer: null
           });
         }
-
         return isRemoved;
       });
   };
 
-  updateSelected = location => {
-    this.transitionToParams({
-      _path: `${this.props.match.path}/${location.id}`,
+  const updateSelected = loc => {
+    transitionToParams({
+      _path: `${match.path}/${loc.id}`,
       layer: null,
     });
-    this.setState({ selectedId: location.id });
+    setSelectedId(loc.id);
   };
 
-  showCalloutMessage(name) {
-    if (!this.callout.current) return;
-
-    const message = (
-      <FormattedMessage
-        id="stripes-core.successfullyDeleted"
-        values={{
-          entry: this.entryLabel,
-          name: name || '',
-        }}
-      />
-    );
-
-    this.callout.current.sendCallout({ message });
-  }
-
-  render() {
-    const {
-      match,
-      label,
-      location: { search },
-      mutator,
-    } = this.props;
-    const {
-      institutionId,
-      campusId,
-      libraryId,
-      sort,
-      sortDir,
-      selectedId,
-      servicePointsById,
-      servicePointsByName,
-    } = this.state;
-
-    const locations = this.prepareLocationsData();
-    const contentData = locations.filter(row => row.libraryId === libraryId);
-    const query = queryString.parse(search);
-    const defaultEntry = { isActive: true, institutionId, campusId, libraryId, servicePointIds: [{ selectSP: '', primary: true }] };
-    const adding = search.match('layer=add');
-    const cloning = search.match('layer=clone');
-
-    // Providing default 'isActive' value is used here when the 'isActive' property is missing in the 'locations' loaded via the API.
-    forEach(contentData, location => {
-      if (location.isActive === undefined) {
-        location.isActive = false;
-      }
-    });
-
-    const selectedItem = (selectedId && !adding)
-      ? find(contentData, entry => entry.id === selectedId) : defaultEntry;
+  const locations = prepareLocationsData();
+  const contentData = locations.filter(row => row.libraryId === libraryId);
+  const query = queryString.parse(location.search);
+  const defaultEntry = { isActive: true, institutionId, campusId, libraryId, servicePointIds: [{ selectSP: '', primary: true }] };
+  const adding = location.search.match('layer=add');
+  const cloning = location.search.match('layer=clone');
 
-    const initialValues = this.parseInitialValues(selectedItem, cloning);
+  forEach(contentData, loc => {
+    if (loc.isActive === undefined) {
+      loc.isActive = false;
+    }
+  });
 
-    const container = document.getElementById('ModuleContainer');
+  const selectedItem = (selectedId && !adding) ? find(contentData, entry => entry.id === selectedId) : defaultEntry;
+  const initialValues = parseInitialValues(selectedItem, cloning);
 
-    if (!container) return (<div />);
+  const container = document.getElementById('ModuleContainer');
+  if (!container) return (<div />);
 
-    return (
-      <Paneset
+  return (
+    <Paneset
+      defaultWidth="fill"
+      data-test-entry-manager
+    >
+      <Pane
         defaultWidth="fill"
-        data-test-entry-manager
+        paneTitle={label}
       >
-        <Pane
-          defaultWidth="fill"
-          paneTitle={label}
-        >
-          <SearchAndSortQuery>
-            {() => (
-              <>
-                <TitleManager page={this.props.intl.formatMessage({ id: 'ui-tenant-settings.settings.location.locations.title' })}>
-                  {this.renderFilter()}
-                  <MultiColumnList
-                    id="locations-list"
-                    contentData={contentData}
-                    visibleColumns={this.locationListVisibleColumns}
-                    columnMapping={this.locationListColumnMapping}
-                    formatter={this.locationListFormatter}
-                    selectedRow={selectedItem}
-                    sortOrder={sort}
-                    sortDirection={sortDir}
-                    isEmptyMessage={null}
-                    onHeaderClick={this.onSort}
-                    onRowClick={this.onSelectRow}
-                  />
-                </TitleManager>
-              </>
-            )}
-          </SearchAndSortQuery>
-        </Pane>
-        <Route
-          path={`${match.path}/:id`}
-          render={
-            () => {
-              if (!selectedItem) return null;
-
-              return (
-                <RemoteStorageApiProvider>
-                  <LocationDetail
-                    initialValues={selectedItem}
-                    servicePointsById={servicePointsById}
-                    onEdit={this.handleDetailEdit}
-                    onClone={this.handleDetailClone}
-                    onClose={this.handleDetailClose}
-                    onRemove={this.onRemove}
-                  />
-                </RemoteStorageApiProvider>
-              );
-            }
-          }
-        />
-        <RemoteStorageApiProvider>
-          <FormattedMessage
-            id="stripes-core.label.editEntry"
-            values={{ entry: this.entryLabel }}
-          >
-            {contentLabelChunks => (
-              <Layer
-                isOpen={Boolean(query.layer)}
-                contentLabel={contentLabelChunks.join()}
-                container={container}
-              >
-                <EditForm
-                  parentMutator={mutator}
-                  locationResources={this.props.resources}
-                  servicePointsByName={servicePointsByName}
-                  initialValues={initialValues}
-                  onSave={this.updateSelected}
-                  onCancel={this.onCancel}
-                  checkLocationHasHoldingsOrItems={this.checkLocationHasHoldingsOrItems}
+        <SearchAndSortQuery>
+          {() => (
+            <>
+              <TitleManager page={intl.formatMessage({ id: 'ui-tenant-settings.settings.location.locations.title' })}>
+                {renderFilter()}
+                <MultiColumnList
+                  id="locations-list"
+                  contentData={contentData}
+                  visibleColumns={locationListVisibleColumns}
+                  columnMapping={locationListColumnMapping}
+                  formatter={locationListFormatter}
+                  selectedRow={selectedItem}
+                  sortOrder={sortState.sort}
+                  sortDirection={sortState.sortDir}
+                  isEmptyMessage={null}
+                  onHeaderClick={onSort}
+                  onRowClick={onSelectRow}
                 />
-              </Layer>
-            )}
-          </FormattedMessage>
-        </RemoteStorageApiProvider>
-        <Callout ref={this.callout} />
-      </Paneset>
-    );
-  }
-}
-
-export default injectIntl(LocationManager);
-// export default LocationManager;
+              </TitleManager>
+            </>
+          )}
+        </SearchAndSortQuery>
+      </Pane>
+      <Route
+        path={`${match.path}/:id`}
+        render={() => {
+          if (!selectedItem) return null;
+          return (
+            <RemoteStorageApiProvider>
+              <LocationDetail
+                initialValues={selectedItem}
+                servicePointsById={servicePointsById}
+                onEdit={handleDetailEdit}
+                onClone={handleDetailClone}
+                onClose={handleDetailClose}
+                onRemove={onRemove}
+              />
+            </RemoteStorageApiProvider>
+          );
+        }}
+      />
+      <RemoteStorageApiProvider>
+        <FormattedMessage
+          id="stripes-core.label.editEntry"
+          values={{ entry: entryLabel }}
+        >
+          {contentLabelChunks => (
+            <Layer
+              isOpen={Boolean(query.layer)}
+              contentLabel={contentLabelChunks.join()}
+              container={container}
+            >
+              <EditForm
+                servicePointsByName={servicePointsByName}
+                initialValues={initialValues}
+                onSave={updateSelected}
+                onCancel={onCancel}
+                checkLocationHasHoldingsOrItems={checkLocationHasHoldingsOrItems}
+                institutions={institutions}
+                campuses={campuses}
+                libraries={libraries}
+                servicePoints={servicePoints}
+              />
+            </Layer>
+          )}
+        </FormattedMessage>
+      </RemoteStorageApiProvider>
+      <Callout ref={callout} />
+    </Paneset>
+  );
+};
+
+LocationManager.propTypes = {
+  label: PropTypes.node.isRequired,
+};
+
+export default LocationManager;
diff --git a/src/settings/LocationLocations/LocationManager.test.js b/src/settings/LocationLocations/LocationManager.test.js
index ad106c6a..8f1a0b0e 100644
--- a/src/settings/LocationLocations/LocationManager.test.js
+++ b/src/settings/LocationLocations/LocationManager.test.js
@@ -1,51 +1,30 @@
 import React from 'react';
 import { screen } from '@testing-library/react';
 import { createMemoryHistory } from 'history';
-
-import '../../../test/jest/__mocks__';
+import { QueryClient, QueryClientProvider } from 'react-query';
 import userEvent from '@testing-library/user-event';
-import buildStripes from '../../../test/jest/__new_mocks__/stripesCore.mock';
+
 import {
   renderWithRouter
 } from '../../../test/jest/helpers';
-
 import LocationManager from './LocationManager';
 
+import '../../../test/jest/__mocks__';
+
+
 jest.mock('./RemoteStorage/Provider', () => ({
   ...jest.requireActual('./RemoteStorage/Provider'),
   useRemoteStorageApi: () => ({
     remoteMap: {},
-    mappings: {
-      failed: false,
-      hasLoaded: true,
-      isPending: false
-    },
-    configurations: {
-      failed: false,
-      hasLoaded: true,
-      isPending: false,
-      records: []
-    },
+    mappings: [],
+    configurations: [],
     translate: () => 'str'
   })
 }));
 
-const STRIPES = buildStripes();
-
-const history = createMemoryHistory();
-
-const locationMock = {
-  pathname: '/settings/tenant-settings/location-locations',
-  search: '',
-  hash: '',
-  key: '00ee83',
-};
-
-const resourcesMock = {
-  campuses: { hasLoaded: true,
-    resource: 'campuses',
-    dataKey: 'location-locations',
-    records:[
+jest.mock('../../hooks/useCampuses', () => ({
+  useCampuses: jest.fn(() => ({
+    campuses: [
       { code: 'DI',
         id: '40ee00ca-a518-4b49-be01-0638d0a4ac57ff',
         institutionId: '40ee00ca-a518-4b49-be01-0638d0a4ac57',
@@ -56,10 +35,38 @@ const resourcesMock = {
         institutionId: '40ee00ca-a518-4b49-be01-0638d0a4ac57',
         name: 'Online'
       }
-    ] },
-  entries:{
-    hasLoaded: true,
-    records:[
+    ],
+  })),
+}));
+
+jest.mock('../../hooks/useInstitutions', () => ({
+  useInstitutions: jest.fn(() => ({
+    institutions: [
+      {
+        code: 'KU',
+        id: '40ee00ca-a518-4b49-be01-0638d0a4ac57',
+        name: 'Københavns Universitet',
+      }
+    ],
+  })),
+}));
+
+jest.mock('../../hooks/useLibraries', () => ({
+  useLibraries: jest.fn(() => ({
+    libraries: [
+      {
+        campusId: '40ee00ca-a518-4b49-be01-0638d0a4ac57ff',
+        code: 'DI',
+        id: '5d78803e-ca04-4b4a-aeae-2c63b924518b',
+        name: 'Datalogisk Institut'
+      }
+    ],
+  })),
+}));
+
+jest.mock('../../hooks/useLocations', () => ({
+  useLocations: jest.fn(() => ({
+    locations: [
       {
         campusId: '62cf76b7-cca5-4d33-9217-edf42ce1a848',
         code: 'KU/CC/DI/2',
@@ -86,113 +93,59 @@ const resourcesMock = {
         servicePointIds: ['3a40852d-49fd-4df2-a1f9-6e2641a6e91f'],
         servicePoints: []
       }
-    ],
-    resource: 'entries'
-  },
-  institutions: {
-    hasLoaded: true,
-    records: [
-      {
-        code: 'KU',
-        id: '40ee00ca-a518-4b49-be01-0638d0a4ac57',
-        name: 'Københavns Universitet',
-      }
     ]
-  },
-  libraries:{
-    dataKey: 'location-locations',
-    hasLoaded: true,
-    records: [
+  })),
+}));
+
+jest.mock('../../hooks/useServicePoints', () => ({
+  useServicePoints: jest.fn(() => ({
+    servicePoints: [
       {
-        campusId: '40ee00ca-a518-4b49-be01-0638d0a4ac57ff',
-        code: 'DI',
-        id: '5d78803e-ca04-4b4a-aeae-2c63b924518b',
-        name: 'Datalogisk Institut'
+        code: 'cd1',
+        discoveryDisplayName: 'Circulation Desk -- Hallway',
+        holdShelfExpiryPeriod: { duration: 3, intervalId: 'Weeks' },
+        id: '3a40852d-49fd-4df2-a1f9-6e2641a6e91f',
+        name: 'Circ Desk 1',
+        pickupLocation: true,
+        staffSlips: [],
+      },
+      {
+        code: 'Online',
+        discoveryDisplayName: 'Online',
+        id: '7c5abc9f-f3d7-4856-b8d7-6712462ca007',
+        metadata: { createdDate: '2021-11-04T03:24:42.555+00:00', updatedDate: '2021-11-04T03:24:42.555+00:00' },
+        name: 'Online',
+        pickupLocation: false,
+        shelvingLagTime: 0,
+        staffSlips: [],
       }
     ]
-  },
-  servicePoints: {
-    hasLoaded: true,
-    records: [{
-      code: 'cd1',
-      discoveryDisplayName: 'Circulation Desk -- Hallway',
-      holdShelfExpiryPeriod: { duration: 3, intervalId: 'Weeks' },
-      id: '3a40852d-49fd-4df2-a1f9-6e2641a6e91f',
-      name: 'Circ Desk 1',
-      pickupLocation: true,
-      staffSlips: [],
-    },
-    {
-      code: 'Online',
-      discoveryDisplayName: 'Online',
-      id: '7c5abc9f-f3d7-4856-b8d7-6712462ca007',
-      metadata: { createdDate: '2021-11-04T03:24:42.555+00:00', updatedDate: '2021-11-04T03:24:42.555+00:00' },
-      name: 'Online',
-      pickupLocation: false,
-      shelvingLagTime: 0,
-      staffSlips: [],
-    }
-    ]
-  }
-};
-
-const mutatorMock = {
-  servicePoints: {
-    POST: jest.fn(() => Promise.resolve()),
-    PUT: jest.fn(() => Promise.resolve()),
-    DELETE: jest.fn(() => Promise.resolve()),
-  },
-  institutions: {
-    GET: jest.fn(() => Promise.resolve()),
-    reset: jest.fn(() => Promise.resolve()),
-  },
-  campuses: {
-    GET: jest.fn(() => Promise.resolve()),
-    reset: jest.fn(() => Promise.resolve()),
-  },
-  libraries: {
-    GET: jest.fn(() => Promise.resolve()),
-    reset: jest.fn(() => Promise.resolve()),
-  },
-  holdingsEntries: {
-    GET: jest.fn(() => Promise.resolve()),
-    reset: jest.fn(() => Promise.resolve()),
-  },
-  itemEntries: {
-    GET: jest.fn(() => Promise.resolve()),
-    reset: jest.fn(() => Promise.resolve()),
-  },
-  entries: {
-    DELETE: jest.fn(() => Promise.resolve()),
-    POST: jest.fn(() => Promise.resolve()),
-    PUT: jest.fn(() => Promise.resolve()),
-  },
-  uniquenessValidator: {
-    DELETE: jest.fn(() => Promise.resolve()),
-    GET: jest.fn(() => Promise.resolve()),
-    POST: jest.fn(() => Promise.resolve()),
-    PUT: jest.fn(() => Promise.resolve()),
-    cancel: jest.fn(() => Promise.resolve()),
-    reset: jest.fn(() => Promise.resolve()),
-  }
-};
-
-const matchMock = {
-  path: '/settings/tenant-settings/location-locations',
-  isExact: true,
-  params: {}
-};
-
-const renderLocationManager = (match = matchMock) => renderWithRouter(
-  <LocationManager
-    stripes={STRIPES}
-    resources={resourcesMock}
-    mutator={mutatorMock}
-    label={<span>ServicePointManager</span>}
-    location={locationMock}
-    history={history}
-    match={match}
-  />
+  })),
+}));
+
+jest.mock('../../hooks/useLocationCreate', () => ({
+  useLocationCreate: jest.fn(() => ({
+    createLocation: jest.fn(),
+    isCreatingLocation: false,
+  })),
+}));
+
+jest.mock('../../hooks/useLocationUpdate', () => ({
+  useLocationUpdate: jest.fn(() => ({
+    updateLocation: jest.fn(),
+    isUpdatingLocation: false,
+  })),
+}));
+
+
+const history = createMemoryHistory();
+
+const renderLocationManager = () => renderWithRouter(
+  <QueryClientProvider client={new QueryClient()}>
+    <LocationManager
+      label={<span>ServicePointManager</span>}
+    />
+  </QueryClientProvider>
 );
 
 describe('LocationManager', () => {
@@ -254,10 +207,6 @@ describe('LocationManager', () => {
     ));
 
     libraryOption.forEach((el) => expect(el.selected).toBe(true));
-    const rowButtons = screen.getAllByRole('button', { name: 'row button' });
-    const headerButton = screen.getByRole('cell', { name: 'ui-tenant-settings.settings.location.locations.status' });
-    userEvent.click(headerButton);
-    userEvent.click(rowButtons[0]);
   });
 
   it('should render select Service points', () => {
diff --git a/src/settings/LocationLocations/RemoteStorage/Control.js b/src/settings/LocationLocations/RemoteStorage/Control.js
index d335d9f3..18daf5b3 100644
--- a/src/settings/LocationLocations/RemoteStorage/Control.js
+++ b/src/settings/LocationLocations/RemoteStorage/Control.js
@@ -30,15 +30,20 @@ const CustomSelect = ({ message, ...rest }) => (
 );
 
 export const Control = ({ disabled, readOnly, message, ...rest }) => {
-  const { configurations, translate: t } = useRemoteStorageApi();
+  const {
+    configurations,
+    isConfigurationsLoading,
+    isConfigurationsError,
+    translate: t
+  } = useRemoteStorageApi();
 
-  const errorMessage = configurations.failed && t('failed');
-  const loadingMessage = configurations.isPending && t('loading');
-  const isDisabled = disabled || !configurations.hasLoaded;
+  const errorMessage = isConfigurationsError && t('failed');
+  const loadingMessage = isConfigurationsLoading && t('loading');
+  const isDisabled = disabled || isConfigurationsLoading;
 
-  const configurationOptions = configurations.records.map(c => ({ label: c.name, value: c.id }));
+  const configurationOptions = configurations.map(c => ({ label: c.name, value: c.id }));
   const defaultOption = { label: t('no'), value: '' };
-  const options = configurations.hasLoaded ? [defaultOption, ...configurationOptions] : undefined;
+  const options = !isConfigurationsLoading ? [defaultOption, ...configurationOptions] : undefined;
 
   return (
     <CustomSelect
diff --git a/src/settings/LocationLocations/RemoteStorage/Control.test.js b/src/settings/LocationLocations/RemoteStorage/Control.test.js
index b684a3f7..90816c2d 100644
--- a/src/settings/LocationLocations/RemoteStorage/Control.test.js
+++ b/src/settings/LocationLocations/RemoteStorage/Control.test.js
@@ -3,12 +3,11 @@ import React from 'react';
 import { screen, render } from '@testing-library/react';
 
 import '../../../../test/jest/__mocks__';
-import buildStripes from '../../../../test/jest/__new_mocks__/stripesCore.mock';
 
+import { QueryClientProvider, QueryClient } from 'react-query';
 import { RemoteStorageApiProvider } from './Provider';
 import { Control } from './Control';
 
-const STRIPES = buildStripes();
 
 const dataOptionsMock = [
   {
@@ -59,17 +58,18 @@ const resourcesMock = {
 };
 
 const renderControl = () => render(
-  <RemoteStorageApiProvider
-    stripes={STRIPES}
-    mutator={mutatorMock}
-    resources={resourcesMock}
-  >
-    <Control
-      label={<span>Control</span>}
-      sub={<span>SubControl</span>}
-      dataOptions={dataOptionsMock}
-    />
-  </RemoteStorageApiProvider>
+  <QueryClientProvider client={new QueryClient()}>
+    <RemoteStorageApiProvider
+      mutator={mutatorMock}
+      resources={resourcesMock}
+    >
+      <Control
+        label={<span>Control</span>}
+        sub={<span>SubControl</span>}
+        dataOptions={dataOptionsMock}
+      />
+    </RemoteStorageApiProvider>
+  </QueryClientProvider>
 );
 
 describe('Control', () => {
diff --git a/src/settings/LocationLocations/RemoteStorage/Provider.js b/src/settings/LocationLocations/RemoteStorage/Provider.js
index 64c1c094..cc55377e 100644
--- a/src/settings/LocationLocations/RemoteStorage/Provider.js
+++ b/src/settings/LocationLocations/RemoteStorage/Provider.js
@@ -1,37 +1,62 @@
 import React, {
-  useEffect,
-  useState,
   useContext,
   createContext,
   useMemo,
 } from 'react';
-import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 
-import { stripesConnect } from '@folio/stripes/core';
+import { useStripes } from '@folio/stripes/core';
+
+import { useRemoteStorageConfigurations } from '../../../hooks/useRemoteStorageConfigurations';
+import { useRemoteStorageMappingUpdate } from '../../../hooks/useRemoteStorageMappingUpdate';
+import { useRemoteStorageMappingDelete } from '../../../hooks/useRemoteStorageMappingDelete';
+import { useRemoteStorageMappings } from '../../../hooks/useRemoteStorageMappings';
+
 
 const Context = createContext({});
 
 export const useRemoteStorageApi = () => useContext(Context);
 
-const Provider = ({ resources, mutator, stripes, ...rest }) => {
-  const [persistentMutator] = useState(mutator);
+export const RemoteStorageApiProvider = (props) => {
+  const stripes = useStripes();
 
-  useEffect(() => {
-    if (stripes.hasInterface('remote-storage-configurations')) {
-      persistentMutator.configurations.reset();
-      persistentMutator.configurations.GET();
+  const {
+    configurations,
+    isConfigurationsLoading,
+    isConfigurationsError
+  } = useRemoteStorageConfigurations({
+    searchParams: {
+      limit: 10000
+    },
+    options: {
+      enabled: stripes.hasInterface('remote-storage-configurations'),
     }
-  }, [persistentMutator.configurations, stripes]);
+  });
+
+  const {
+    mappings,
+    isMappingsLoading,
+    isMappingsError
+  } = useRemoteStorageMappings({
+    searchParams: {
+      limit: 10000
+    },
+    options: {
+      enabled: stripes.hasInterface('remote-storage-mappings'),
+    }
+  });
+
+  const { updateMapping } = useRemoteStorageMappingUpdate();
+  const { deleteMapping } = useRemoteStorageMappingDelete();
 
   const { formatMessage } = useIntl();
   const translate = key => formatMessage({ id: `ui-tenant-settings.settings.location.remotes.${key}` });
 
   const remoteMap = useMemo(
-    () => Object.fromEntries(resources.mappings.records.map(
+    () => Object.fromEntries(mappings.map(
       ({ folioLocationId, configurationId }) => [folioLocationId, configurationId]
     )),
-    [resources.mappings.records]
+    [mappings]
   );
 
   const setMapping = ({ folioLocationId, configurationId }) => {
@@ -39,49 +64,26 @@ const Provider = ({ resources, mutator, stripes, ...rest }) => {
       return Promise.resolve();
     }
 
-    if (configurationId) return persistentMutator.mappings.POST({ folioLocationId, configurationId });
+    if (configurationId) {
+      return updateMapping({
+        data: { folioLocationId, configurationId }
+      });
+    }
 
-    return persistentMutator.mappings.DELETE({ folioLocationId });
+    return deleteMapping({ folioLocationId });
   };
 
   const context = {
-    ...resources,
     remoteMap,
+    mappings,
+    isMappingsLoading,
+    isMappingsError,
+    configurations,
+    isConfigurationsLoading,
+    isConfigurationsError,
     setMapping,
     translate,
   };
 
-  return <Context.Provider value={context} {...rest} />;
-};
-
-Provider.manifest = Object.freeze({
-  configurations: {
-    type: 'okapi',
-    path: 'remote-storage/configurations?limit=10000',
-    accumulate: true,
-    records: 'configurations',
-    throwErrors: false,
-  },
-  mappings: {
-    type: 'okapi',
-    path: 'remote-storage/mappings',
-    perRequest: 10000,
-    records: 'mappings',
-    pk: 'folioLocationId',
-    clientGeneratePk: false, // because we use POST instead of PUT for modification here (there's no PUT)
-    throwErrors: false,
-    fetch: ({ stripes }) => stripes.hasInterface('remote-storage-mappings'),
-  },
-});
-
-Provider.propTypes = {
-  mutator: PropTypes.object.isRequired,
-  stripes: PropTypes.object,
-  resources: PropTypes.shape({
-    mappings: PropTypes.shape({
-      records: PropTypes.arrayOf(PropTypes.object)
-    })
-  })
+  return <Context.Provider value={context} {...props} />;
 };
-
-export const RemoteStorageApiProvider = stripesConnect(Provider);
diff --git a/src/settings/LocationLocations/RemoteStorageDetails.js b/src/settings/LocationLocations/RemoteStorageDetails.js
index 900d5191..dc074ca5 100644
--- a/src/settings/LocationLocations/RemoteStorageDetails.js
+++ b/src/settings/LocationLocations/RemoteStorageDetails.js
@@ -10,10 +10,11 @@ import {
 
 import { useRemoteStorageApi } from './RemoteStorage';
 
+
 const RemoteStorageDetails = ({ locationId }) => {
   const { remoteMap, configurations } = useRemoteStorageApi();
 
-  const currentConfig = configurations?.records.find(config => remoteMap[locationId] === config.id);
+  const currentConfig = configurations.find(config => remoteMap[locationId] === config.id);
 
   return (
     <>
diff --git a/src/settings/LocationLocations/locationDetail.test.js b/src/settings/LocationLocations/locationDetail.test.js
index d1385d08..671b1fa7 100644
--- a/src/settings/LocationLocations/locationDetail.test.js
+++ b/src/settings/LocationLocations/locationDetail.test.js
@@ -1,10 +1,14 @@
 import React from 'react';
+import { QueryClient, QueryClientProvider } from 'react-query';
 import { render, screen, within } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
 import user from '@testing-library/user-event';
 
 import LocationDetail from './LocationDetail';
 
+import '../../../test/jest/__mocks__';
+
+
 const mockInitialValues = {
   id: '1',
   servicePointIds: [
@@ -15,21 +19,31 @@ const mockInitialValues = {
   ],
 };
 
-const mockSetMapping = jest.fn();
-
-jest.mock(
-  '@folio/stripes/core',
-  () => ({
-    stripesConnect: Component => props => <Component {...props} />,
-    IfPermission : ({ children }) => <>{children}</>,
-    useStripes: () => ({
-      hasPerm: () => true
-    }),
-    TitleManager: jest.fn(({ children, ...rest }) => (
-      <span {...rest}>{children}</span>
-    ))
+jest.mock('../../hooks/useCampusDetails', () => ({
+  useCampusDetails: jest.fn(() => ({
+    campus: {},
+  })),
+}));
+
+jest.mock('../../hooks/useLibraryDetails', () => ({
+  useLibraryDetails: jest.fn(() => ({
+    library: {},
+  })),
+}));
+
+jest.mock('../../hooks/useInstitutionDetails', () => ({
+  useInstitutionDetails: jest.fn(() => ({
+    institution: {},
+  })),
+}));
+
+jest.mock('./RemoteStorage', () => ({
+  useRemoteStorageApi: () => ({
+    remoteMap: {},
+    configurations: [],
+    setMapping: jest.fn(),
   }),
-);
+}));
 
 jest.mock(
   '@folio/stripes-components/lib/Icon',
@@ -38,20 +52,8 @@ jest.mock(
   },
 );
 
-jest.mock(
-  './RemoteStorage',
-  () => ({
-    useRemoteStorageApi: () => ({ setMapping: mockSetMapping }),
-  }),
-);
-
 const renderLocationDetail = ({
   initialValues = mockInitialValues,
-  resources = {
-    institutions: {},
-    campuses: {},
-    libraries: {},
-  },
   servicePointsById = {
     '1': 'Circ Desk 1'
   },
@@ -64,16 +66,17 @@ const renderLocationDetail = ({
   },
 } = {}) => (render(
   <MemoryRouter>
-    <LocationDetail
-      initialValues={initialValues}
-      resources={resources}
-      servicePointsById={servicePointsById}
-      onEdit={onEdit}
-      onClone={onClone}
-      onClose={onClose}
-      onRemove={onRemove}
-      stripes={stripes}
-    />
+    <QueryClientProvider client={new QueryClient()}>
+      <LocationDetail
+        initialValues={initialValues}
+        servicePointsById={servicePointsById}
+        onEdit={onEdit}
+        onClone={onClone}
+        onClose={onClose}
+        onRemove={onRemove}
+        stripes={stripes}
+      />
+    </QueryClientProvider>
   </MemoryRouter>
 ));
 
@@ -127,7 +130,6 @@ describe('LocationDetail', () => {
 
     user.click(editButton);
     expect(onEdit).toHaveBeenCalled();
-    expect(mockSetMapping).toHaveBeenCalled();
   });
 
   it('should call onClone when duplicate button in action menu clicked', () => {
diff --git a/src/settings/LocationLocations/remoteStorageDetails.test.js b/src/settings/LocationLocations/remoteStorageDetails.test.js
index acf27445..682ef81d 100644
--- a/src/settings/LocationLocations/remoteStorageDetails.test.js
+++ b/src/settings/LocationLocations/remoteStorageDetails.test.js
@@ -1,26 +1,31 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from 'react-query';
+
 import { useRemoteStorageApi } from './RemoteStorage';
 import RemoteStorageDetails from './RemoteStorageDetails';
 
-const mockConfigurations = {
-  records: [
-    { name: 'RS1', id: 1 },
-    { name: 'RS2', id: 2, returningWorkflowDetails: 'Scanned to folio' }
-  ]
-};
+
+const mockConfigurations = [
+  { name: 'RS1', id: 1 },
+  { name: 'RS2', id: 2, returningWorkflowDetails: 'Scanned to folio' }
+];
 
 const mockRemoteMap = {
   locationWithoutDetails: 1,
   locationWithDetails: 2,
 };
 
-jest.mock('./RemoteStorage');
+jest.mock('./RemoteStorage', () => ({
+  useRemoteStorageApi: jest.fn(),
+}));
 
 const renderRemoteStorageDetails = ({
   locationId
 }) => (render(
-  <RemoteStorageDetails locationId={locationId} />
+  <QueryClientProvider client={new QueryClient()}>
+    <RemoteStorageDetails locationId={locationId} />
+  </QueryClientProvider>
 ));
 
 describe('RemoteStorageDetails', () => {
@@ -47,7 +52,7 @@ describe('RemoteStorageDetails', () => {
 
     expect(screen.getByText('RS2')).toBeVisible();
 
-    useRemoteStorageApi.mockImplementation(() => ({ remoteMap: mockRemoteMap, configurations: undefined }));
+    useRemoteStorageApi.mockImplementation(() => ({ remoteMap: mockRemoteMap, configurations: [] }));
     sut.rerender(<RemoteStorageDetails locationId="locationWithDetails" />);
 
     expect(screen.queryByText('RS2')).not.toBeInTheDocument();
diff --git a/src/settings/LocationLocations/utils.js b/src/settings/LocationLocations/utils.js
index e8ac5c9d..6c188ee5 100644
--- a/src/settings/LocationLocations/utils.js
+++ b/src/settings/LocationLocations/utils.js
@@ -57,18 +57,16 @@ export const validate = values => {
   return errors;
 };
 
-export const getUniquenessValidation = (field, mutator, id) => {
+export const getUniquenessValidation = (field, ky, id) => {
   return (value, allValues, meta) => {
     if (!value) return Promise.resolve();
 
     if (id && !meta.dirty) return Promise.resolve();
 
-    mutator.reset();
-
     const query = `(${field}=="${value.replace(/"/gi, '\\"')}")`;
 
-    return mutator.GET({ params: { query } })
-      .then((locations) => {
+    return ky.get('locations', { searchParams: { query } }).json()
+      .then(({ locations }) => {
         if (locations.length !== 0) return Promise.reject();
 
         return undefined;
diff --git a/src/settings/Plugins/PluginForm.js b/src/settings/Plugins/PluginForm.js
index 7af6b959..a64b323b 100644
--- a/src/settings/Plugins/PluginForm.js
+++ b/src/settings/Plugins/PluginForm.js
@@ -17,32 +17,27 @@ import stripesFinalForm from '@folio/stripes/final-form';
 
 import styles from './Plugins.css';
 
-class PluginForm extends React.Component {
-  static propTypes = {
-    handleSubmit: PropTypes.func.isRequired,
-    pristine: PropTypes.bool,
-    submitting: PropTypes.bool,
-    label: PropTypes.node,
-    pluginTypes: PropTypes.object,
-    readOnly: PropTypes.bool,
-  };
-
-  constructor(props) {
-    super(props);
-    this.renderPlugins = this.renderPlugins.bind(this);
-  }
 
-  renderPlugin(field, plugin) {
-    const intl = useIntl();
-    const { pluginTypes, readOnly } = this.props;
+const PluginForm = ({
+  handleSubmit,
+  pristine,
+  submitting,
+  label,
+  pluginTypes,
+  readOnly,
+}) => {
+  const intl = useIntl();
 
+  const renderPlugin = (field, plugin) => {
     const pluginType = pluginTypes[plugin.configName];
 
     const options = [{ value: '@@', label: '(none)' }].concat(pluginType.map(p => ({
       value: p.module,
-      label: intl.formatMessage({ id: `ui-tenant-settings.settings.pluginNames.${p.pluginType}` }) + ` ${p.version}`,
+      label: `${intl.formatMessage({ id: `ui-tenant-settings.settings.pluginNames.${p.pluginType}` })} ${p.version}`,
     })));
-    const label = <FormattedMessage id={`ui-tenant-settings.settings.pluginNames.${plugin.configName}`} />;
+
+    const lbl = <FormattedMessage id={`ui-tenant-settings.settings.pluginNames.${plugin.configName}`} />;
+
     return (
       <Row key={plugin.configName}>
         <Col xs={12}>
@@ -50,7 +45,7 @@ class PluginForm extends React.Component {
             readOnly={readOnly}
             id={plugin.configName}
             data-testid={plugin.configName}
-            label={label}
+            label={lbl}
             name={`${field}.value`}
             placeholder="---"
             component={Select}
@@ -59,59 +54,54 @@ class PluginForm extends React.Component {
         </Col>
       </Row>
     );
-  }
-
-  renderPlugins({ fields }) {
-    const plugins = fields.map((field, index) => (
-      this.renderPlugin(field, fields.value[index])
-    ));
+  };
 
-    return (
-      <div>{plugins}</div>
-    );
-  }
+  const renderPlugins = ({ fields }) => {
+    const plugins = fields.map((field, index) => renderPlugin(field, fields.value[index]));
 
-  render() {
-    const {
-      handleSubmit,
-      pristine,
-      submitting,
-      label,
-      readOnly,
-    } = this.props;
+    return <div>{plugins}</div>;
+  };
 
-    const footer = !readOnly && (
-      <PaneFooter
-        renderEnd={(
-          <Button
-            type="submit"
-            disabled={(pristine || submitting)}
-            buttonStyle="primary"
-          >
-            <FormattedMessage id="stripes-core.button.save" />
-          </Button>
-        )}
-      />
-    );
+  const footer = !readOnly && (
+    <PaneFooter
+      renderEnd={(
+        <Button
+          type="submit"
+          disabled={pristine || submitting}
+          buttonStyle="primary"
+        >
+          <FormattedMessage id="stripes-core.button.save" />
+        </Button>
+      )}
+    />
+  );
 
-    return (
-      <form
-        id="plugin-form"
-        onSubmit={handleSubmit}
-        className={styles.pluginForm}
+  return (
+    <form
+      id="plugin-form"
+      onSubmit={handleSubmit}
+      className={styles.pluginForm}
+    >
+      <Pane
+        defaultWidth="fill"
+        fluidContentWidth
+        paneTitle={label}
+        footer={footer}
       >
-        <Pane
-          defaultWidth="fill"
-          fluidContentWidth
-          paneTitle={label}
-          footer={footer}
-        >
-          <FieldArray name="plugins" component={this.renderPlugins} />
-        </Pane>
-      </form>
-    );
-  }
-}
+        <FieldArray name="plugins" component={renderPlugins} />
+      </Pane>
+    </form>
+  );
+};
+
+PluginForm.propTypes = {
+  handleSubmit: PropTypes.func.isRequired,
+  pristine: PropTypes.bool,
+  submitting: PropTypes.bool,
+  label: PropTypes.node,
+  pluginTypes: PropTypes.object,
+  readOnly: PropTypes.bool,
+};
 
 export default stripesFinalForm({
   navigationCheck: true,
diff --git a/src/settings/Plugins/Plugins.js b/src/settings/Plugins/Plugins.js
index 62673216..2f2acb92 100644
--- a/src/settings/Plugins/Plugins.js
+++ b/src/settings/Plugins/Plugins.js
@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
-import { FormattedMessage, injectIntl } from 'react-intl';
+import { FormattedMessage, useIntl } from 'react-intl';
 import { map, omit } from 'lodash';
 
 import { modules } from 'stripes-config'; // eslint-disable-line import/no-unresolved, import/no-extraneous-dependencies
@@ -8,124 +8,97 @@ import {
   Callout,
   Layout,
 } from '@folio/stripes/components';
+import { TitleManager, useStripes } from '@folio/stripes/core';
 
-import { TitleManager } from '@folio/stripes/core';
 import PluginForm from './PluginForm';
+import { useConfigurationsCreate } from '../../hooks/useConfigurationsCreate';
+import { useConfigurationsUpdate } from '../../hooks/useConfigurationsUpdate';
+import { useConfigurations } from '../../hooks/useConfigurations';
 
-class Plugins extends React.Component {
-  static manifest = Object.freeze({
-    recordId: {},
-    settings: {
-      type: 'okapi',
-      records: 'configs',
-      path: 'configurations/entries?query=(module==PLUGINS) sortby configName&limit=1000',
-      POST: {
-        path: 'configurations/entries',
-      },
-      PUT: {
-        path: 'configurations/entries/%{recordId}',
-      },
-    },
-  });
 
-  static propTypes = {
-    label: PropTypes.node.isRequired,
-    stripes: PropTypes.shape({
-      logger: PropTypes.shape({
-        log: PropTypes.func.isRequired,
-      }).isRequired,
-      setSinglePlugin: PropTypes.func.isRequired,
-      hasPerm: PropTypes.func.isRequired,
-    }).isRequired,
-    resources: PropTypes.shape({
-      settings: PropTypes.shape({
-        records: PropTypes.arrayOf(PropTypes.object),
-      }),
-    }).isRequired,
-    mutator: PropTypes.shape({
-      recordId: PropTypes.shape({
-        replace: PropTypes.func,
-      }),
-      settings: PropTypes.shape({
-        POST: PropTypes.func.isRequired,
-        PUT: PropTypes.func.isRequired,
-      }),
-    }).isRequired,
-    intl: PropTypes.object,
-  };
+const Plugins = ({ label }) => {
+  const intl = useIntl();
+  const stripes = useStripes();
+  const callout = useRef(null);
 
-  constructor(props) {
-    super(props);
+  const { configs } = useConfigurations({
+    searchParams: {
+      query: '(module==PLUGINS) sortby configName',
+      limit: '1000',
+    },
+  });
+  const { createConfiguration } = useConfigurationsCreate();
+  const { updateConfiguration } = useConfigurationsUpdate();
 
+  const pluginTypes = (() => {
     const plugins = modules.plugin || [];
-    this.pluginTypes = plugins.reduce((pt, plugin) => {
+    return plugins.reduce((pt, plugin) => {
       const type = plugin.pluginType;
-      // eslint-disable-next-line no-param-reassign
       pt[type] = pt[type] || [];
       pt[type].push(plugin);
       return pt;
     }, {});
+  })();
 
-    this.save = this.save.bind(this);
-  }
-
-  getPlugins() {
-    const settings = ((this.props.resources.settings || {}).records || []);
+  const getPlugins = (settings) => {
     const pluginsByType = settings.reduce((memo, setting) => {
-      // eslint-disable-next-line no-param-reassign
       memo[setting.configName] = setting;
       return memo;
     }, {});
 
-    return map(this.pluginTypes, (types, key) => {
+    return map(pluginTypes, (types, key) => {
       const plugin = pluginsByType[key];
       return plugin || { configName: key };
     });
-  }
+  };
 
-  savePlugin(plugin) {
+  const savePlugin = (plugin) => {
     const value = plugin.value;
     if (plugin.id) {
-      // Setting has been set previously: replace it
-      this.props.mutator.recordId.replace(plugin.id);
-      this.props.mutator.settings.PUT(omit(plugin, ['metadata']));
+      updateConfiguration({
+        id: plugin.id,
+        data: omit(plugin, ['metadata']),
+      });
     } else {
-      // No setting: create a new one
-      this.props.mutator.settings.POST({
-        module: 'PLUGINS',
-        configName: plugin.configName,
-        value,
+      createConfiguration({
+        data: {
+          module: 'PLUGINS',
+          configName: plugin.configName,
+          value,
+        },
       });
     }
 
-    this.props.stripes.setSinglePlugin(plugin.configName, value);
-  }
+    stripes.setSinglePlugin(plugin.configName, value);
+  };
 
-  save(data) {
-    data.plugins.forEach(p => this.savePlugin(p));
+  const save = (data) => {
+    data.plugins.forEach(p => savePlugin(p));
     const updateMsg = <FormattedMessage id="ui-tenant-settings.settings.updated" />;
-    this.callout.sendCallout({ message: updateMsg });
-  }
+    callout.current.sendCallout({ message: updateMsg });
+  };
+
+  const plugins = getPlugins(configs);
+  const isReadOnly = !stripes.hasPerm('ui-tenant-settings.settings.plugins');
 
-  render() {
-    const plugins = this.getPlugins();
-    const isReadOnly = !this.props.stripes.hasPerm('ui-tenant-settings.settings.plugins');
+  return (
+    <Layout className="full">
+      <TitleManager page={intl.formatMessage({ id: 'ui-tenant-settings.settings.plugins.title' })}>
+        <PluginForm
+          label={label}
+          pluginTypes={pluginTypes}
+          initialValues={{ plugins }}
+          onSubmit={save}
+          readOnly={isReadOnly}
+        />
+      </TitleManager>
+      <Callout ref={callout} />
+    </Layout>
+  );
+};
 
-    return (
-      <Layout className="full">
-        <TitleManager page={this.props.intl.formatMessage({ id: 'ui-tenant-settings.settings.plugins.title' })}>
-          <PluginForm
-            label={this.props.label}
-            pluginTypes={this.pluginTypes}
-            initialValues={{ plugins }}
-            onSubmit={this.save}
-            readOnly={isReadOnly}
-          />
-        </TitleManager>
-        <Callout ref={(ref) => { this.callout = ref; }} />
-      </Layout>
-    );
-  }
-}
+Plugins.propTypes = {
+  label: PropTypes.node.isRequired,
+};
 
-export default injectIntl(Plugins);
+export default Plugins;
diff --git a/src/settings/Plugins/Plugins.test.js b/src/settings/Plugins/Plugins.test.js
index a7f3ab2b..655cb227 100644
--- a/src/settings/Plugins/Plugins.test.js
+++ b/src/settings/Plugins/Plugins.test.js
@@ -1,72 +1,53 @@
 import React from 'react';
-
+import { QueryClient, QueryClientProvider } from 'react-query';
 import { screen } from '@testing-library/react';
 import user from '@testing-library/user-event';
 
-import '../../../test/jest/__mocks__';
 import { renderWithRouter } from '../../../test/jest/helpers';
-
 import Plugins from './Plugins';
 
-const setSinglePlugin = jest.fn();
-const hasPermMock = jest.fn().mockReturnValue(true);
+import '../../../test/jest/__mocks__';
+import { mockHasPerm } from '../../../test/jest/__mocks__/stripesCore.mock';
 
-const renderPlugins = (props) => renderWithRouter(<Plugins {...props} />);
+const mockCreateConfiguration = jest.fn(() => Promise.resolve());
+
+jest.mock('../../hooks/useConfigurationsCreate', () => ({
+  useConfigurationsCreate: jest.fn(() => ({
+    createConfiguration: mockCreateConfiguration,
+    isCreatingConfiguration: false,
+  })),
+}));
+
+const renderPlugins = (props) => renderWithRouter(
+  <QueryClientProvider client={new QueryClient()}>
+    <Plugins {...props} />
+  </QueryClientProvider>
+);
 
 describe('Plugins', () => {
   afterEach(() => {
-    setSinglePlugin.mockClear();
-    hasPermMock.mockClear();
+    mockHasPerm.mockClear();
   });
 
   it('should render plugins', async () => {
-    const { findAllByText } = await renderPlugins({ label: 'plugins',
-      stripes: {
-        setSinglePlugin,
-        hasPerm: hasPermMock,
-        logger: {
-          log: jest.fn(),
-        },
-      },
-      resources: {} });
+    const { findAllByText } = await renderPlugins({ label: 'plugins' });
+
     expect(await findAllByText('plugins')).toBeDefined();
   });
 
   it('should choose and save plugin', async () => {
-    renderPlugins({ label: 'plugins',
-      stripes: {
-        setSinglePlugin,
-        hasPerm: hasPermMock,
-        logger: {
-          log: jest.fn(),
-        },
-      },
-      resources: {},
-      mutator: {
-        settings: { POST: jest.fn() }
-      } });
+    renderPlugins({ label: 'plugins' });
 
     user.selectOptions(screen.getByTestId('find-instance'), ['@folio/plugin-find-instance']);
     user.click(screen.getByRole('button', { type: /submit/i }));
 
-    expect(setSinglePlugin).toHaveBeenCalledTimes(1);
+    expect(mockCreateConfiguration).toHaveBeenCalledTimes(1);
   });
 
   it('submit button should not be present without permissions', async () => {
-    hasPermMock.mockReturnValueOnce(false);
+    mockHasPerm.mockReturnValueOnce(false);
 
-    renderPlugins({ label: 'plugins',
-      stripes: {
-        setSinglePlugin,
-        hasPerm: hasPermMock,
-        logger: {
-          log: jest.fn(),
-        },
-      },
-      resources: {},
-      mutator: {
-        settings: { POST: jest.fn() }
-      } });
+    renderPlugins({ label: 'plugins' });
 
     expect(screen.queryByRole('button', { type: /submit/i })).toBeNull();
   });
diff --git a/src/settings/ReadingRoomAccess/ReadingRoomAccess.js b/src/settings/ReadingRoomAccess/ReadingRoomAccess.js
index 8dc0e697..8ce07e89 100644
--- a/src/settings/ReadingRoomAccess/ReadingRoomAccess.js
+++ b/src/settings/ReadingRoomAccess/ReadingRoomAccess.js
@@ -5,8 +5,7 @@ import _ from 'lodash';
 
 import {
   TitleManager,
-  withStripes,
-  stripesShape
+  useStripes
 } from '@folio/stripes/core';
 import { Label } from '@folio/stripes/components';
 import { ControlledVocab } from '@folio/stripes/smart-components';
@@ -16,6 +15,7 @@ import { getFormatter } from './getFormatter';
 import { getFieldComponents } from './getFieldComponents';
 import { getValidators } from './getValidators';
 
+
 const hiddenFields = ['numberOfObjects', 'lastUpdated'];
 const translations = {
   cannotDeleteTermHeader: 'ui-tenant-settings.settings.reading-room-access.cannotDeleteTermHeader',
@@ -27,14 +27,15 @@ const translations = {
 
 const ReadingRoomAccess = (props) => {
   const intl = useIntl();
-  const { resources, stripes } = props;
+  const stripes = useStripes();
+  const { resources } = props;
 
   // service points defined in the tenant
   const servicePoints = _.get(resources, ['RRAServicePoints', 'records', 0, 'servicepoints'], []);
   /**
    * A reading room can have more than one service points assigned to it.
    * but a servicepoint cannot be mapped to more than one reading room
-  */
+   */
   const sps = [];
   const rrs = _.get(resources, ['values', 'records']);
   rrs.forEach(rr => {
@@ -78,7 +79,7 @@ const ReadingRoomAccess = (props) => {
   const formatter = useMemo(() => getFormatter({ fieldLabels }), [fieldLabels]);
 
   const validateItem = useCallback((item, items) => {
-    const errors = Object.values(readingRoomAccessColumns).reduce((acc, field) => {
+    return Object.values(readingRoomAccessColumns).reduce((acc, field) => {
       const error = getValidators(field)?.(item, items);
 
       if (error) {
@@ -87,8 +88,6 @@ const ReadingRoomAccess = (props) => {
 
       return acc;
     }, {});
-
-    return errors;
   }, []);
 
   const validate = (item, index, items) => validateItem(item, items) || {};
@@ -140,7 +139,6 @@ ReadingRoomAccess.manifest = Object.freeze({
 ReadingRoomAccess.propTypes = {
   resources: PropTypes.object,
   mutator: PropTypes.object,
-  stripes: stripesShape.isRequired,
 };
 
-export default withStripes(ReadingRoomAccess);
+export default ReadingRoomAccess;
diff --git a/src/settings/ReadingRoomAccess/ReadingRoomAccess.test.js b/src/settings/ReadingRoomAccess/ReadingRoomAccess.test.js
index 8b000d8d..f05c8e47 100644
--- a/src/settings/ReadingRoomAccess/ReadingRoomAccess.test.js
+++ b/src/settings/ReadingRoomAccess/ReadingRoomAccess.test.js
@@ -4,14 +4,11 @@ import { Form } from 'react-final-form';
 
 import { runAxeTest } from '@folio/stripes-testing';
 
-import '../../../test/jest/__mocks__';
-import buildStripes from '../../../test/jest/__new_mocks__/stripesCore.mock';
-
 import { renderWithRouter } from '../../../test/jest/helpers';
-
 import ReadingRoomAccess from './ReadingRoomAccess';
 
-const stripes = buildStripes();
+import '../../../test/jest/__mocks__';
+import { mockHasPerm } from '../../../test/jest/__mocks__/stripesCore.mock';
 
 const mutatorPutMock = jest.fn(() => Promise.resolve());
 const mutatorMock = {
@@ -28,7 +25,6 @@ const mutatorMock = {
     replace: jest.fn()
   },
 };
-
 const resourcesMock = {
   values: {
     dataKey: 'reading-room',
@@ -179,12 +175,11 @@ describe('Reading Room Access', () => {
   const props = {
     mutator: mutatorMock,
     resources: resourcesMock,
-    stripes,
   };
 
   describe('when all permissions are available', () => {
     beforeEach(() => {
-      stripes.hasPerm = jest.fn().mockReturnValue(true);
+      mockHasPerm.mockReturnValue(true);
       renderReadingRoomAccess(props);
     });
 
@@ -253,7 +248,7 @@ describe('Reading Room Access', () => {
 
   describe('when permissions are not available', () => {
     beforeEach(() => {
-      stripes.hasPerm = jest.fn().mockReturnValue(false);
+      mockHasPerm.mockReturnValue(false);
       renderReadingRoomAccess(props);
     });
 
diff --git a/src/settings/SSOSettings/SSOSettings.js b/src/settings/SSOSettings/SSOSettings.js
index 4bf532a8..ae9ebc67 100644
--- a/src/settings/SSOSettings/SSOSettings.js
+++ b/src/settings/SSOSettings/SSOSettings.js
@@ -1,103 +1,53 @@
-import _ from 'lodash';
-import React from 'react';
+import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
-import { FormattedMessage, injectIntl } from 'react-intl';
-import { stripesShape, TitleManager } from '@folio/stripes/core';
+import { FormattedMessage, useIntl } from 'react-intl';
+
+import { TitleManager, useOkapiKy, useStripes } from '@folio/stripes/core';
 import {
   Callout,
   Layout,
 } from '@folio/stripes/components';
 
 import { patronIdentifierTypes, samlBindingTypes } from '../../constants';
-
 import SamlForm from './SamlForm';
-
-class SSOSettings extends React.Component {
-  static manifest = Object.freeze({
-    recordId: {},
-    samlconfig: {
-      type: 'okapi',
-      path: 'saml/configuration',
-      PUT: {
-        path: 'saml/configuration',
-      },
-    },
-    downloadFile: {
-      accumulate: true,
-      type: 'okapi',
-      path: 'saml/regenerate',
-    },
-    urlValidator: {
-      type: 'okapi',
-      accumulate: 'true',
-      path: 'saml/validate',
-      fetch: false,
-      throwErrors: false,
-    },
+import { useSamlConfiguration } from '../../hooks/useSamlConfiguration';
+import { useSamlConfigurationUpdate } from '../../hooks/useSamlConfigurationUpdate';
+
+
+const SSOSettings = ({ label }) => {
+  const intl = useIntl();
+  const stripes = useStripes();
+  const ky = useOkapiKy();
+  const callout = useRef(null);
+  const downloadButton = useRef(null);
+  const isReadOnly = !stripes.hasPerm('ui-tenant-settings.settings.sso');
+
+  const { samlConfig } = useSamlConfiguration();
+  const { updateSamlConfiguration } = useSamlConfigurationUpdate({
+    onSuccess: () => {
+      callout.current.sendCallout({ message: <FormattedMessage id="ui-tenant-settings.settings.updated" /> });
+    }
   });
 
-  static propTypes = {
-    label: PropTypes.node.isRequired,
-    stripes: stripesShape.isRequired,
-    resources: PropTypes.shape({
-      samlconfig: PropTypes.object,
-    }).isRequired,
-    mutator: PropTypes.shape({
-      recordId: PropTypes.shape({
-        replace: PropTypes.func,
-      }),
-      samlconfig: PropTypes.shape({
-        PUT: PropTypes.func.isRequired,
-      }),
-      downloadFile: PropTypes.shape({
-        GET: PropTypes.func.isRequired,
-        reset: PropTypes.func.isRequired,
-      }),
-      urlValidator: PropTypes.shape({
-        GET: PropTypes.func.isRequired,
-        reset: PropTypes.func.isRequired,
-      }),
-    }).isRequired,
-    intl: PropTypes.object
-  };
-
-  constructor(props) {
-    super(props);
-
-    this.validateIdpUrl = this.validateIdpUrl.bind(this);
-    this.updateSettings = this.updateSettings.bind(this);
-  }
-
-  getConfig() {
-    const { resources } = this.props;
-    const config = (resources.samlconfig || {}).records || [];
-    const configValue = (config.length === 0) ? {} : config[0];
-    const configData = configValue ? _.cloneDeep(configValue) : configValue;
-    return configData;
-  }
-
-  updateSettings(settings) {
-    const updateMsg = <FormattedMessage id="ui-tenant-settings.settings.updated" />;
-    settings.okapiUrl = this.props.stripes.okapi.url;
-    this.props.mutator.samlconfig.PUT(settings).then(() => {
-      this.callout.sendCallout({ message: updateMsg });
+  const updateSettings = (settings) => {
+    updateSamlConfiguration({
+      data: {
+        ...settings,
+        okapiUrl: stripes.okapi.url,
+      }
     });
-  }
-
-  async validateIdpUrl(value) {
-    const { mutator: { urlValidator } } = this.props;
+  };
 
+  const validateIdpUrl = async (value) => {
     if (!value) {
       return <FormattedMessage id="ui-tenant-settings.settings.saml.validate.fillIn" />;
     }
 
     const error = <FormattedMessage id="ui-tenant-settings.settings.saml.validate.idpUrl" />;
-    const params = { type: 'idpurl', value };
-
-    urlValidator.reset();
+    const searchParams = { type: 'idpurl', value };
 
     try {
-      const result = await urlValidator.GET({ params });
+      const result = await ky.get('saml/validate', { searchParams }).json();
 
       if (!result?.valid) {
         return error;
@@ -107,36 +57,34 @@ class SSOSettings extends React.Component {
     }
 
     return '';
-  }
-
-  render() {
-    const samlFormData = this.getConfig();
-    const isReadOnly = !this.props.stripes.hasPerm('ui-tenant-settings.settings.sso');
-
-    return (
-      <TitleManager stripes={this.props.stripes} page={this.props.intl.formatMessage({ id: 'ui-tenant-settings.settings.sso.title' })}>
-        <Layout className="full">
-          <SamlForm
-            label={this.props.label}
-            initialValues={samlFormData}
-            onSubmit={(record) => { this.updateSettings(record); }}
-            optionLists={{ identifierOptions: patronIdentifierTypes, samlBindingOptions: samlBindingTypes }}
-            parentMutator={this.props.mutator}
-            validateIdpUrl={this.validateIdpUrl}
-            stripes={this.props.stripes}
-            readOnly={isReadOnly}
-          />
-          <a // eslint-disable-line jsx-a11y/anchor-is-valid
-            hidden
-            ref={(reference) => { this.downloadButton = reference; return reference; }}
-          >
-            <FormattedMessage id="ui-tenant-settings.settings.hiddenDownloadLink" />
-          </a>
-          <Callout ref={(ref) => { this.callout = ref; }} />
-        </Layout>
-      </TitleManager>
-    );
-  }
-}
+  };
 
-export default injectIntl(SSOSettings);
+  return (
+    <TitleManager stripes={stripes} page={intl.formatMessage({ id: 'ui-tenant-settings.settings.sso.title' })}>
+      <Layout className="full">
+        <SamlForm
+          label={label}
+          initialValues={samlConfig}
+          onSubmit={(record) => { updateSettings(record); }}
+          optionLists={{ identifierOptions: patronIdentifierTypes, samlBindingOptions: samlBindingTypes }}
+          validateIdpUrl={validateIdpUrl}
+          stripes={stripes}
+          readOnly={isReadOnly}
+        />
+        <a // eslint-disable-line jsx-a11y/anchor-is-valid
+          hidden
+          ref={downloadButton}
+        >
+          <FormattedMessage id="ui-tenant-settings.settings.hiddenDownloadLink" />
+        </a>
+        <Callout ref={callout} />
+      </Layout>
+    </TitleManager>
+  );
+};
+
+SSOSettings.propTypes = {
+  label: PropTypes.node.isRequired,
+};
+
+export default SSOSettings;
diff --git a/src/settings/SSOSettings/SSOSettings.test.js b/src/settings/SSOSettings/SSOSettings.test.js
index 78c9553c..b4b44a2b 100644
--- a/src/settings/SSOSettings/SSOSettings.test.js
+++ b/src/settings/SSOSettings/SSOSettings.test.js
@@ -1,70 +1,27 @@
 import React from 'react';
 import { act, screen, fireEvent, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { QueryClient, QueryClientProvider } from 'react-query';
+
 import SSOSettings from './SSOSettings';
-import buildStripes from '../../../test/jest/__new_mocks__/stripesCore.mock';
 import { renderWithRouter } from '../../../test/jest/helpers';
 
-
-const hasPermMock = jest.fn().mockReturnValue(true);
-
-const STRIPES = {
-  ...buildStripes(),
-  hasPerm: hasPermMock,
-  config: {
-    platform: 'tenant-settings'
-  },
-};
-
-const resourcesMock = {
-  values: {
-    failed: false,
-    hasLoaded: true,
-    httpStatus: 200,
-    isPending: false,
-    module: '@folio/tenant-settings',
-  },
-};
-
-const samlconfigCallback = jest.fn(() => Promise.resolve());
-const urlValidatorCallback = jest.fn(() => Promise.resolve({ valid: true }));
-
-const mutatorMock = {
-  recordId: {
-    replace: jest.fn(() => Promise.resolve()),
-  },
-  samlconfig: {
-    PUT: samlconfigCallback,
-  },
-  downloadFile: {
-    GET: jest.fn(() => Promise.resolve()),
-    reset: jest.fn(() => Promise.resolve()),
-  },
-  urlValidator: {
-    GET: urlValidatorCallback,
-    reset: jest.fn(() => Promise.resolve()),
-  }
-};
-
+import '../../../test/jest/__mocks__';
+import { mockHasPerm } from '../../../test/jest/__mocks__/stripesCore.mock';
 
 const SSOSettingsLabel = 'SSOSettings label';
 
 const renderSSOSettings = () => {
   renderWithRouter(
-    <SSOSettings
-      label={<h2>{SSOSettingsLabel}</h2>}
-      stripes={STRIPES}
-      resources={resourcesMock}
-      mutator={mutatorMock}
-    />
+    <QueryClientProvider client={new QueryClient()}>
+      <SSOSettings
+        label={<h2>{SSOSettingsLabel}</h2>}
+      />
+    </QueryClientProvider>
   );
 };
 
 describe('SSOSettings', () => {
-  afterEach(() => {
-    hasPermMock.mockClear();
-  });
-
   it('should render SSOSettings label', () => {
     renderSSOSettings();
 
@@ -152,7 +109,7 @@ describe('SSOSettings', () => {
     });
 
     it('should render SSOSettings form elements "read-only mode"', async () => {
-      hasPermMock.mockReturnValue(false);
+      mockHasPerm.mockReturnValue(false);
 
       renderSSOSettings();
 
diff --git a/src/settings/SSOSettings/SamlForm.js b/src/settings/SSOSettings/SamlForm.js
index 89c46004..ca0215a1 100644
--- a/src/settings/SSOSettings/SamlForm.js
+++ b/src/settings/SSOSettings/SamlForm.js
@@ -16,6 +16,8 @@ import stripesFinalForm from '@folio/stripes/final-form';
 import { IfPermission } from '@folio/stripes/core';
 
 import styles from './SSOSettings.css';
+import { useSamlDownload } from '../../hooks/useSamlDownload';
+
 
 const validate = (values) => {
   const errors = {};
@@ -32,169 +34,151 @@ const validate = (values) => {
   return errors;
 };
 
-class SamlForm extends React.Component {
-  static propTypes = {
-    validateIdpUrl: PropTypes.func.isRequired,
-    handleSubmit: PropTypes.func.isRequired,
-    reset: PropTypes.func,
-    pristine: PropTypes.bool,
-    submitting: PropTypes.bool,
-    initialValues: PropTypes.object.isRequired, // eslint-disable-line react/no-unused-prop-types
-    values: PropTypes.object,
-    optionLists: PropTypes.shape({
-      identifierOptions: PropTypes.arrayOf(PropTypes.object),
-      samlBindingOptions: PropTypes.arrayOf(PropTypes.object),
-    }),
-    parentMutator: PropTypes.shape({ // eslint-disable-line react/no-unused-prop-types
-      urlValidator: PropTypes.shape({
-        reset: PropTypes.func.isRequired,
-        GET: PropTypes.func.isRequired,
-      }).isRequired,
-      downloadFile: PropTypes.shape({
-        GET: PropTypes.func.isRequired,
-        reset: PropTypes.func.isRequired,
-      }),
-    }),
-    label: PropTypes.node,
-    readOnly: PropTypes.bool,
-  };
-
-  updateMetadataInvalidated = () => {
-    this.props.initialValues.metadataInvalidated = false;
-    this.forceUpdate();
-  }
 
-  downloadMetadata = () => {
-    this.props.parentMutator.downloadFile.reset();
-    this.props.parentMutator.downloadFile.GET().then((result) => {
+const SamlForm = ({
+  validateIdpUrl,
+  handleSubmit,
+  pristine,
+  submitting,
+  initialValues,
+  optionLists,
+  label,
+  values,
+  readOnly,
+}) => {
+  const { downloadFile } = useSamlDownload({
+    onSuccess: (result) => {
       const anchor = document.createElement('a');
-      anchor.href = `data:text/plain;base64,${result.fileContent}`;
+      anchor.href = `data:text/plain;base64,${result?.fileContent}`;
       anchor.download = 'sp-metadata.xml';
       anchor.click();
-      this.updateMetadataInvalidated();
-    });
-  }
 
-  render() {
-    const {
-      handleSubmit,
-      pristine,
-      submitting,
-      initialValues,
-      optionLists,
-      label,
-      validateIdpUrl,
-      values,
-      readOnly,
-    } = this.props;
+      initialValues.metadataInvalidated = false;
+    },
+  });
 
-    const identifierOptions = (optionLists.identifierOptions || []).map(i => (
-      { id: i.key, label: i.label, value: i.key, selected: initialValues.userProperty === i.key }
-    ));
-    const samlBindingOptions = optionLists.samlBindingOptions.map(i => (
-      { id: i.key, label: i.label, value: i.key, selected: initialValues.samlBinding === i.key }
-    ));
+  const identifierOptions = (optionLists.identifierOptions || []).map(i => (
+    { id: i.key, label: i.label, value: i.key, selected: initialValues.userProperty === i.key }
+  ));
 
-    const footer = !readOnly && (
-      <PaneFooter
-        renderEnd={(
-          <Button
-            type="submit"
-            buttonStyle="primary"
-            disabled={(pristine || submitting)}
-          >
-            <FormattedMessage id="stripes-core.button.save" />
-          </Button>
-        )}
-      />
-    );
+  const samlBindingOptions = optionLists.samlBindingOptions.map(i => (
+    { id: i.key, label: i.label, value: i.key, selected: initialValues.samlBinding === i.key }
+  ));
 
-    return (
-      <form
-        id="form-saml"
-        onSubmit={handleSubmit}
-        className={styles.samlForm}
-      >
-        <Pane
-          defaultWidth="fill"
-          fluidContentWidth
-          paneTitle={label}
-          footer={footer}
+  const footer = !readOnly && (
+    <PaneFooter
+      renderEnd={(
+        <Button
+          type="submit"
+          buttonStyle="primary"
+          disabled={(pristine || submitting)}
         >
-          <Row>
-            <Col xs={12} id="fill_idpUrl">
-              <Field
-                disabled={readOnly}
-                label={<FormattedMessage id="ui-tenant-settings.settings.saml.idpUrl" />}
-                name="idpUrl"
-                id="samlconfig_idpUrl"
-                component={TextField}
-                required
-                fullWidth
-                validate={validateIdpUrl}
-              />
-              <div hidden={!this.props.initialValues.metadataInvalidated}>
-                <FormattedMessage id="ui-tenant-settings.settings.saml.idpUrlChanged" />
-              </div>
-              <IfPermission perm="login-saml.all">
-                <Button
-                  id="download-metadata-button"
-                  onClick={this.downloadMetadata}
-                  disabled={!values.idpUrl || !pristine}
-                >
-                  <FormattedMessage id="ui-tenant-settings.settings.saml.downloadMetadata" />
-                </Button>
-              </IfPermission>
-            </Col>
-          </Row>
-          <Row>
-            <Col id="select_samlBinding">
-              <Field
-                disabled={readOnly}
-                label={<FormattedMessage id="ui-tenant-settings.settings.saml.binding" />}
-                name="samlBinding"
-                id="samlconfig_samlBinding"
-                placeholder="---"
-                component={Select}
-                dataOptions={samlBindingOptions}
-                fullWidth
-                required
-              />
-            </Col>
-          </Row>
-          <Row>
-            <Col id="fill_attribute">
-              <Field
-                disabled={readOnly}
-                label={<FormattedMessage id="ui-tenant-settings.settings.saml.attribute" />}
-                name="samlAttribute"
-                id="samlconfig_samlAttribute"
-                component={TextField}
-                required={!readOnly}
-                fullWidth
-              />
-            </Col>
-          </Row>
-          <Row>
-            <Col id="select_userProperty">
-              <Field
-                disabled={readOnly}
-                label={<FormattedMessage id="ui-tenant-settings.settings.saml.userProperty" />}
-                name="userProperty"
-                id="samlconfig_userProperty"
-                placeholder="---"
-                component={Select}
-                dataOptions={identifierOptions}
-                fullWidth
-                required
-              />
-            </Col>
-          </Row>
-        </Pane>
-      </form>
-    );
-  }
-}
+          <FormattedMessage id="stripes-core.button.save" />
+        </Button>
+      )}
+    />
+  );
+
+  return (
+    <form
+      id="form-saml"
+      onSubmit={handleSubmit}
+      className={styles.samlForm}
+    >
+      <Pane
+        defaultWidth="fill"
+        fluidContentWidth
+        paneTitle={label}
+        footer={footer}
+      >
+        <Row>
+          <Col xs={12} id="fill_idpUrl">
+            <Field
+              disabled={readOnly}
+              label={<FormattedMessage id="ui-tenant-settings.settings.saml.idpUrl" />}
+              name="idpUrl"
+              id="samlconfig_idpUrl"
+              component={TextField}
+              required
+              fullWidth
+              validate={validateIdpUrl}
+            />
+            <div hidden={!initialValues.metadataInvalidated}>
+              <FormattedMessage id="ui-tenant-settings.settings.saml.idpUrlChanged" />
+            </div>
+            <IfPermission perm="login-saml.all">
+              <Button
+                id="download-metadata-button"
+                onClick={downloadFile}
+                disabled={!values.idpUrl || !pristine}
+              >
+                <FormattedMessage id="ui-tenant-settings.settings.saml.downloadMetadata" />
+              </Button>
+            </IfPermission>
+          </Col>
+        </Row>
+        <Row>
+          <Col id="select_samlBinding">
+            <Field
+              disabled={readOnly}
+              label={<FormattedMessage id="ui-tenant-settings.settings.saml.binding" />}
+              name="samlBinding"
+              id="samlconfig_samlBinding"
+              placeholder="---"
+              component={Select}
+              dataOptions={samlBindingOptions}
+              fullWidth
+              required
+            />
+          </Col>
+        </Row>
+        <Row>
+          <Col id="fill_attribute">
+            <Field
+              disabled={readOnly}
+              label={<FormattedMessage id="ui-tenant-settings.settings.saml.attribute" />}
+              name="samlAttribute"
+              id="samlconfig_samlAttribute"
+              component={TextField}
+              required={!readOnly}
+              fullWidth
+            />
+          </Col>
+        </Row>
+        <Row>
+          <Col id="select_userProperty">
+            <Field
+              disabled={readOnly}
+              label={<FormattedMessage id="ui-tenant-settings.settings.saml.userProperty" />}
+              name="userProperty"
+              id="samlconfig_userProperty"
+              placeholder="---"
+              component={Select}
+              dataOptions={identifierOptions}
+              fullWidth
+              required
+            />
+          </Col>
+        </Row>
+      </Pane>
+    </form>
+  );
+};
+
+SamlForm.propTypes = {
+  validateIdpUrl: PropTypes.func.isRequired,
+  handleSubmit: PropTypes.func.isRequired,
+  pristine: PropTypes.bool,
+  submitting: PropTypes.bool,
+  initialValues: PropTypes.object.isRequired, // eslint-disable-line react/no-unused-prop-types
+  values: PropTypes.object,
+  optionLists: PropTypes.shape({
+    identifierOptions: PropTypes.arrayOf(PropTypes.object),
+    samlBindingOptions: PropTypes.arrayOf(PropTypes.object),
+  }),
+  label: PropTypes.node,
+  readOnly: PropTypes.bool,
+};
 
 export default stripesFinalForm({
   validate,
diff --git a/src/settings/ServicePoints/StaffSlipEditList.js b/src/settings/ServicePoints/StaffSlipEditList.js
index 03890df5..6d9e7512 100644
--- a/src/settings/ServicePoints/StaffSlipEditList.js
+++ b/src/settings/ServicePoints/StaffSlipEditList.js
@@ -6,13 +6,9 @@ import { FieldArray } from 'react-final-form-arrays';
 
 import { Col, Row, Checkbox } from '@folio/stripes/components';
 
-class StaffSlipEditList extends React.Component {
-  static propTypes = {
-    staffSlips: PropTypes.arrayOf(PropTypes.object),
-  };
 
-  renderList = () => {
-    const { staffSlips } = this.props;
+const StaffSlipEditList = ({ staffSlips }) => {
+  const renderList = () => {
     const items = staffSlips.map((staffSlip, index) => (
       <Row key={`staff-slip-row-${index}`}>
         <Col xs={12}>
@@ -30,24 +26,24 @@ class StaffSlipEditList extends React.Component {
     return (
       <>
         <p>
-          <FormattedMessage
-            id="ui-tenant-settings.settings.servicePoints.printByDefault"
-          />
+          <FormattedMessage id="ui-tenant-settings.settings.servicePoints.printByDefault" />
         </p>
         {items}
       </>
     );
-  }
+  };
 
-  render() {
-    return (
-      <FieldArray
-        data-test-staff-slip-edit-list
-        name="staffSlips"
-        component={this.renderList}
-      />
-    );
-  }
-}
+  return (
+    <FieldArray
+      data-test-staff-slip-edit-list
+      name="staffSlips"
+      component={renderList}
+    />
+  );
+};
+
+StaffSlipEditList.propTypes = {
+  staffSlips: PropTypes.arrayOf(PropTypes.object),
+};
 
 export default StaffSlipEditList;
diff --git a/src/settings/ServicePoints/StaffSlipList.js b/src/settings/ServicePoints/StaffSlipList.js
index 20bcb51a..ef70a0cc 100644
--- a/src/settings/ServicePoints/StaffSlipList.js
+++ b/src/settings/ServicePoints/StaffSlipList.js
@@ -2,15 +2,12 @@ import { keyBy, isUndefined } from 'lodash';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
+
 import { List, KeyValue } from '@folio/stripes/components';
 
-class StaffSlipList extends React.Component {
-  static propTypes = {
-    staffSlips: PropTypes.arrayOf(PropTypes.object),
-    servicePoint: PropTypes.object,
-  };
 
-  renderItem = (staffSlip, slipMap) => {
+const StaffSlipList = ({ staffSlips, servicePoint }) => {
+  const renderItem = (staffSlip, slipMap) => {
     const { id, name } = staffSlip;
     const { printByDefault } = (slipMap[id] || {});
     const yesNo = (printByDefault || isUndefined(printByDefault)) ? 'yes' : 'no';
@@ -23,27 +20,29 @@ class StaffSlipList extends React.Component {
         />
       </li>
     );
-  }
+  };
 
-  render() {
-    const { staffSlips, servicePoint } = this.props;
-    const slipMap = keyBy(servicePoint.staffSlips, 'id');
+  const slipMap = keyBy(servicePoint.staffSlips, 'id');
 
-    if (!staffSlips.length) return null;
+  if (!staffSlips.length) return null;
 
-    return (
-      <KeyValue
-        label={<FormattedMessage id="ui-tenant-settings.settings.servicePoints.printByDefault" />}
-      >
-        <div data-test-staff-slip-list>
-          <List
-            items={staffSlips}
-            itemFormatter={staffSlip => this.renderItem(staffSlip, slipMap)}
-          />
-        </div>
-      </KeyValue>
-    );
-  }
-}
+  return (
+    <KeyValue
+      label={<FormattedMessage id="ui-tenant-settings.settings.servicePoints.printByDefault" />}
+    >
+      <div data-test-staff-slip-list>
+        <List
+          items={staffSlips}
+          itemFormatter={staffSlip => renderItem(staffSlip, slipMap)}
+        />
+      </div>
+    </KeyValue>
+  );
+};
+
+StaffSlipList.propTypes = {
+  staffSlips: PropTypes.arrayOf(PropTypes.object),
+  servicePoint: PropTypes.object,
+};
 
 export default StaffSlipList;
diff --git a/src/settings/index.js b/src/settings/index.js
index 323ed55f..53107ec4 100644
--- a/src/settings/index.js
+++ b/src/settings/index.js
@@ -1,9 +1,9 @@
 import React from 'react';
-import { FormattedMessage, injectIntl } from 'react-intl';
+import { FormattedMessage, useIntl } from 'react-intl';
+
 import { Settings } from '@folio/stripes/smart-components';
-import { stripesShape, TitleManager } from '@folio/stripes/core';
+import { TitleManager, useStripes } from '@folio/stripes/core';
 
-import PropTypes from 'prop-types';
 import Addresses from './Addresses';
 import Locale from './Locale';
 import Plugins from './Plugins';
@@ -15,130 +15,108 @@ import LocationLibraries from './LocationLibraries';
 import LocationLocations from './LocationLocations';
 import ServicePoints from './ServicePoints';
 
-class Organization extends React.Component {
-  static propTypes = {
-    stripes: stripesShape.isRequired,
-    intl: PropTypes.object,
-  }
-
-  constructor(props) {
-    super(props);
 
-    this.sections = [
-      {
-        label:
-            (
-              <TitleManager page={this.props.intl.formatMessage({ id: 'ui-tenant-settings.settings.title' })}>
-                <FormattedMessage id="ui-tenant-settings.settings.general.label" />
-              </TitleManager>
-            ),
-        pages: [
-          {
-            route: 'addresses',
-            label: <FormattedMessage id="ui-tenant-settings.settings.addresses.label" />,
-            component: Addresses,
-            perm: 'ui-tenant-settings.settings.addresses.view',
-          },
-          {
-            route: 'locale',
-            label: <FormattedMessage id="ui-tenant-settings.settings.language.label" />,
-            component: Locale,
-            perm: 'ui-tenant-settings.settings.locale.view',
-          },
-          {
-            route: 'plugins',
-            label: <FormattedMessage id="ui-tenant-settings.settings.plugins.label" />,
-            component: Plugins,
-            perm: 'ui-tenant-settings.settings.plugins.view',
-          },
-          {
-            route: 'reading-room',
-            label: <FormattedMessage id="ui-tenant-settings.settings.reading-room-access.label" />,
-            component: ReadingRoomAccess,
-            perm: 'ui-tenant-settings.settings.reading-room-access.view',
-            iface: 'reading-room'
-          },
-          {
-            route: 'ssosettings',
-            label: <FormattedMessage id="ui-tenant-settings.settings.ssoSettings.label" />,
-            component: SSOSettings,
-            perm: 'ui-tenant-settings.settings.sso.view',
-            iface: 'login-saml'
-          },
-          {
-            route: 'servicePoints',
-            label: <FormattedMessage id="ui-tenant-settings.settings.servicePoints.label" />,
-            component: ServicePoints,
-            perm: 'ui-tenant-settings.settings.servicepoints.view',
-            iface: 'service-points',
-          },
-        ],
-      },
-      {
-        label: <FormattedMessage id="ui-tenant-settings.settings.location.label" />,
-        pages: [
-          {
-            route: 'location-institutions',
-            label: <FormattedMessage id="ui-tenant-settings.settings.location.institutions" />,
-            component: LocationInstitutions,
-            perm: 'ui-tenant-settings.settings.location.view',
-            iface: 'location-units',
-          },
-          {
-            route: 'location-campuses',
-            label: <FormattedMessage id="ui-tenant-settings.settings.location.campuses" />,
-            component: LocationCampuses,
-            perm: 'ui-tenant-settings.settings.location.view',
-            iface: 'location-units',
-          },
-          {
-            route: 'location-libraries',
-            label: <FormattedMessage id="ui-tenant-settings.settings.location.libraries" />,
-            component: LocationLibraries,
-            perm: 'ui-tenant-settings.settings.location.view',
-            iface: 'location-units',
-          },
-          {
-            route: 'location-locations',
-            label: <FormattedMessage id="ui-tenant-settings.settings.location.locations" />,
-            component: LocationLocations,
-            perm: 'ui-tenant-settings.settings.location.view',
-            iface: 'location-units',
-          },
-        ],
-      }
-    ];
-  }
-  /*
-  <NavList>
-    <NavListSection activeLink={activeLink} label="Settings">
-      {navLinks}
-    </NavListSection>
-  </NavList>
-  <br /><br />
-  <NavListSection label="System information" activeLink={activeLink}>
-    <NavListItem to="/settings/about"><FormattedMessage id="stripes-core.front.about" /></NavListItem>
-  </NavListSection>
+const Organization = (props) => {
+  const intl = useIntl();
+  const stripes = useStripes();
 
-  */
+  const sections = [
+    {
+      label: (
+        <TitleManager page={intl.formatMessage({ id: 'ui-tenant-settings.settings.title' })}>
+          <FormattedMessage id="ui-tenant-settings.settings.general.label" />
+        </TitleManager>
+      ),
+      pages: [
+        {
+          route: 'addresses',
+          label: <FormattedMessage id="ui-tenant-settings.settings.addresses.label" />,
+          component: Addresses,
+          perm: 'ui-tenant-settings.settings.addresses.view',
+        },
+        {
+          route: 'locale',
+          label: <FormattedMessage id="ui-tenant-settings.settings.language.label" />,
+          component: Locale,
+          perm: 'ui-tenant-settings.settings.locale.view',
+        },
+        {
+          route: 'plugins',
+          label: <FormattedMessage id="ui-tenant-settings.settings.plugins.label" />,
+          component: Plugins,
+          perm: 'ui-tenant-settings.settings.plugins.view',
+        },
+        {
+          route: 'reading-room',
+          label: <FormattedMessage id="ui-tenant-settings.settings.reading-room-access.label" />,
+          component: ReadingRoomAccess,
+          perm: 'ui-tenant-settings.settings.reading-room-access.view',
+          iface: 'reading-room'
+        },
+        {
+          route: 'ssosettings',
+          label: <FormattedMessage id="ui-tenant-settings.settings.ssoSettings.label" />,
+          component: SSOSettings,
+          perm: 'ui-tenant-settings.settings.sso.view',
+          iface: 'login-saml'
+        },
+        {
+          route: 'servicePoints',
+          label: <FormattedMessage id="ui-tenant-settings.settings.servicePoints.label" />,
+          component: ServicePoints,
+          perm: 'ui-tenant-settings.settings.servicepoints.view',
+          iface: 'service-points',
+        },
+      ],
+    },
+    {
+      label: <FormattedMessage id="ui-tenant-settings.settings.location.label" />,
+      pages: [
+        {
+          route: 'location-institutions',
+          label: <FormattedMessage id="ui-tenant-settings.settings.location.institutions" />,
+          component: LocationInstitutions,
+          perm: 'ui-tenant-settings.settings.location.view',
+          iface: 'location-units',
+        },
+        {
+          route: 'location-campuses',
+          label: <FormattedMessage id="ui-tenant-settings.settings.location.campuses" />,
+          component: LocationCampuses,
+          perm: 'ui-tenant-settings.settings.location.view',
+          iface: 'location-units',
+        },
+        {
+          route: 'location-libraries',
+          label: <FormattedMessage id="ui-tenant-settings.settings.location.libraries" />,
+          component: LocationLibraries,
+          perm: 'ui-tenant-settings.settings.location.view',
+          iface: 'location-units',
+        },
+        {
+          route: 'location-locations',
+          label: <FormattedMessage id="ui-tenant-settings.settings.location.locations" />,
+          component: LocationLocations,
+          perm: 'ui-tenant-settings.settings.location.view',
+          iface: 'location-units',
+        },
+      ],
+    }
+  ];
 
-  render() {
-    // If this PR is accepted, we will not need to do this filtering by hand:
-    // https://github.com/folio-org/stripes-smart-components/pull/1401#issuecomment-1771334495
-    // But for now ...
-    const sections = this.sections.map(section => ({
-      label: section.label,
-      pages: section.pages.filter(page => !page.iface || this.props.stripes.hasInterface(page.iface)),
-    }));
+  const filteredSections = sections.map(section => ({
+    label: section.label,
+    pages: section.pages.filter(page => !page.iface || stripes.hasInterface(page.iface)),
+  }));
 
-    return (
-      <Settings
-        {...this.props}
-        sections={sections}
-        paneTitle={<FormattedMessage id="ui-tenant-settings.settings.index.paneTitle" />}
-      />
-    );
-  }
-}
+  return (
+    <Settings
+      {...props}
+      stripes={stripes}
+      sections={filteredSections}
+      paneTitle={<FormattedMessage id="ui-tenant-settings.settings.index.paneTitle" />}
+    />
+  );
+};
 
-export default injectIntl(Organization);
+export default Organization;
diff --git a/src/settings/index.test.js b/src/settings/index.test.js
index d77e36c7..546f1236 100644
--- a/src/settings/index.test.js
+++ b/src/settings/index.test.js
@@ -1,22 +1,12 @@
 import React from 'react';
 
-import '../../test/jest/__mocks__';
-import {
-  renderWithRouter
-} from '../../test/jest/helpers';
-import buildStripes from '../../test/jest/__new_mocks__/stripesCore.mock';
-
+import { renderWithRouter } from '../../test/jest/helpers';
 import Organization from './index';
 
-const stripes = buildStripes();
-
-const intl = {
-  formatMessage: jest.fn()
-};
+import '../../test/jest/__mocks__';
+import { mockHasInterface, mockHasPerm } from '../../test/jest/__mocks__/stripesCore.mock';
 
 const props = {
-  stripes,
-  intl,
   history: {},
   location: {
     pathname: '/tenant-settings'
@@ -30,43 +20,34 @@ const props = {
 };
 
 describe('Organization', () => {
-  beforeEach(() => {
-    stripes.discovery = {
-      interfaces: {}
-    };
-    stripes.setIsAuthenticated = jest.fn();
-    stripes.hasInterface = jest.fn().mockReturnValue(false);
-    stripes.hasPerm = jest.fn().mockReturnValue(false);
-  });
-
   it('should render SSO Settings when login-saml interface is present', () => {
-    stripes.hasInterface = jest.fn().mockReturnValue(true);
-    stripes.hasPerm = jest.fn().mockReturnValue(true);
     const { queryByText } = renderWithRouter(<Organization {...props} />);
     expect(queryByText('ui-tenant-settings.settings.ssoSettings.label')).toBeTruthy();
   });
 
   it('should not render SSO Settings when login-saml interface is not present', () => {
-    const { queryByText } = renderWithRouter(<Organization {...props} />);
-    expect(queryByText('ui-tenant-settings.settings.ssoSettings.label')).toBeNull();
-  });
+    mockHasInterface.mockReturnValue(false);
+    mockHasPerm.mockReturnValue(false);
 
-  it('should render Reading room access when associated permission and interface are present', () => {
-    stripes.hasInterface = jest.fn().mockReturnValue(true);
-    stripes.hasPerm = jest.fn().mockReturnValue(true);
     const { queryByText } = renderWithRouter(<Organization {...props} />);
-    expect(queryByText('ui-tenant-settings.settings.reading-room-access.label')).toBeTruthy();
+    expect(queryByText('ui-tenant-settings.settings.ssoSettings.label')).toBeNull();
   });
 
   it('should not render Reading room access when ui-tenant-settings.settings.reading-room-access.view permission is not present', () => {
-    stripes.hasInterface = jest.fn().mockReturnValue(true);
     const { queryByText } = renderWithRouter(<Organization {...props} />);
     expect(queryByText('ui-tenant-settings.settings.reading-room-access.label')).toBeNull();
   });
 
   it('should not render Reading room access when reading-room interface is not present', () => {
-    stripes.hasPerm = jest.fn().mockReturnValue(true);
     const { queryByText } = renderWithRouter(<Organization {...props} />);
     expect(queryByText('ui-tenant-settings.settings.reading-room-access.label')).toBeNull();
   });
+
+  it('should render Reading room access when associated permission and interface are present', () => {
+    mockHasInterface.mockReturnValue(true);
+    mockHasPerm.mockReturnValue(true);
+
+    const { queryByText } = renderWithRouter(<Organization {...props} />);
+    expect(queryByText('ui-tenant-settings.settings.reading-room-access.label')).toBeTruthy();
+  });
 });
diff --git a/test/jest/__mocks__/stripesCore.mock.js b/test/jest/__mocks__/stripesCore.mock.js
index 096eb1ce..8dd4b970 100644
--- a/test/jest/__mocks__/stripesCore.mock.js
+++ b/test/jest/__mocks__/stripesCore.mock.js
@@ -1,47 +1,57 @@
-import React from 'react';
-
-jest.mock('@folio/stripes/core', () => {
-  const STRIPES = {
-    actionNames: [],
-    clone: () => ({ ...STRIPES }),
-    connect: (Component) => Component,
-    config: {},
-    currency: 'USD',
-    hasInterface: () => true,
-    hasPerm: jest.fn().mockReturnValue(true),
-    locale: 'en-US',
-    logger: {
-      log: () => { },
-    },
-    okapi: {
-      tenant: 'diku',
-      url: 'https://folio-testing-okapi.dev.folio.org',
-    },
-    plugins: {},
-    setBindings: () => { },
-    setCurrency: () => { },
-    setLocale: () => { },
-    setSinglePlugin: () => { },
-    setTimezone: () => { },
-    setToken: () => { },
-    store: {
-      getState: () => { },
-      dispatch: () => { },
-      subscribe: () => { },
-      replaceReducer: () => { },
-    },
-    timezone: 'UTC',
+export const mockHasPerm = jest.fn(() => true);
+export const mockHasInterface = jest.fn().mockReturnValue(true);
+export const mockUseOkapiKy = jest.fn();
+
+export const buildStripes = (otherProperties = {}) => ({
+  actionNames: [],
+  clone: buildStripes,
+  connect: Comp => Comp,
+  config: {
+    platformName: 'bulk-edit'
+  },
+  currency: 'USD',
+  hasInterface: jest.fn().mockReturnValue(true),
+  hasPerm: mockHasPerm,
+  locale: 'en-US',
+  logger: {
+    log: () => { },
+  },
+  okapi: {
+    tenant: 'diku',
+    url: 'https://folio-testing-okapi.dev.folio.org',
+  },
+  plugins: {},
+  setBindings: () => { },
+  setCurrency: () => { },
+  setLocale: () => { },
+  setSinglePlugin: () => { },
+  setTimezone: () => { },
+  setToken: () => { },
+  store: {
+    getState: () => { },
+    dispatch: () => { },
+    subscribe: () => { },
+    replaceReducer: () => { },
+  },
+  timezone: 'UTC',
+  user: {
+    perms: {},
     user: {
-      perms: {},
-      user: {
-        id: 'b1add99d-530b-5912-94f3-4091b4d87e2c',
-        username: 'diku_admin',
+      id: 'b1add99d-530b-5912-94f3-4091b4d87e2c',
+      username: 'diku_admin',
+      consortium: {
+        centralTenantId: 'consortia',
       },
     },
-    withOkapi: true,
-  };
+  },
+  withOkapi: true,
+  ...otherProperties,
+});
 
-  const stripesConnect = (Component, options) => ({ mutator, resources, stripes, ...rest }) => {
+const STRIPES = buildStripes();
+
+const mockStripesCore = {
+  stripesConnect: Component => ({ mutator, resources, stripes, ...rest }) => {
     const fakeMutator = mutator || Object.keys(Component.manifest).reduce((acc, mutatorName) => {
       const returnValue = Component.manifest[mutatorName].records ? [] : {};
 
@@ -51,59 +61,53 @@ jest.mock('@folio/stripes/core', () => {
         POST: jest.fn().mockReturnValue(Promise.resolve()),
         DELETE: jest.fn().mockReturnValue(Promise.resolve()),
         reset: jest.fn(),
+        update: jest.fn(),
+        replace: jest.fn(),
       };
 
       return acc;
     }, {});
 
     const fakeResources = resources || Object.keys(Component.manifest).reduce((acc, resourceName) => {
-      if (options?.resources?.[resourceName]) {
-        acc[resourceName] = options.resources[resourceName];
-      } else {
-        acc[resourceName] = {
-          records: [],
-        };
-      }
+      acc[resourceName] = {
+        records: [],
+      };
 
       return acc;
     }, {});
 
     const fakeStripes = stripes || STRIPES;
 
-    if (options?.stripes) {
-      Object.assign(fakeStripes, options.stripes);
-    }
-
     return <Component {...rest} mutator={fakeMutator} resources={fakeResources} stripes={fakeStripes} />;
-  };
+  },
 
-  const withStripes = (Component, options) => ({ stripes, ...rest }) => {
-    const fakeStripes = stripes || STRIPES;
+  useOkapiKy: mockUseOkapiKy,
 
-    fakeStripes.connect = Comp => stripesConnect(Comp, options);
+  useStripes: () => STRIPES,
 
-    if (options?.stripes) {
-      Object.assign(fakeStripes, options.stripes);
-    }
+  withStripes: Component => ({ stripes, ...rest }) => {
+    const fakeStripes = stripes || STRIPES;
 
     return <Component {...rest} stripes={fakeStripes} />;
-  };
-
-  const useStripes = ({ ...STRIPES, connect: Component => stripesConnect(Component) });
-  const TitleManager = jest.fn(({ children, ...rest }) => (
-    <span {...rest}>{children}</span>
-  ));
-
-  return {
-    ...jest.requireActual('@folio/stripes/core'),
-    stripesConnect,
-    useStripes,
-    withStripes,
-    // eslint-disable-next-line react/prop-types
-    Pluggable: props => <>{props.children}</>,
-    IfPermission: ({ children }) => <>{children}</>,
-    TitleManager,
-    supportedLocales: ['ar', 'en', 'fr-FR'],
-    supportedNumberingSystems: ['latn', 'arab'],
-  };
-}, { virtual: true });
+  },
+
+  // eslint-disable-next-line react/prop-types
+  Pluggable: props => <><button onClick={props.entityTypeDataSource}>Get query</button>
+    <button onClick={props.cancelQueryDataSource}>Cancel query</button>
+  </>,
+
+  // eslint-disable-next-line react/prop-types
+  IfPermission: jest.fn(props => <>{props.children}</>),
+
+  // eslint-disable-next-line react/prop-types
+  IfInterface: jest.fn(props => <>{props.children}</>),
+
+  useNamespace: ({ key }) => [`@folio/bulk-edit:${key}`],
+  TitleManager: ({ children }) => <>{children}</>,
+  checkIfUserInMemberTenant: () => true,
+};
+
+jest.mock('@folio/stripes/core', () => ({
+  ...jest.requireActual('@folio/stripes/core'),
+  ...mockStripesCore
+}), { virtual: true });

From 548cd3fa58e4e48e49b438c84957da915ef53027 Mon Sep 17 00:00:00 2001
From: vashjs <vadym.shchekotilin@gmail.com>
Date: Mon, 5 Aug 2024 23:25:36 +0200
Subject: [PATCH 2/7] update

---
 CHANGELOG.md                                    |  1 +
 .../LocationLocations/LocationDetail.js         |  3 ---
 .../LocationForm/LocationForm.js                |  8 +++++++-
 .../LocationForm/LocationFormContainer.js       | 17 ++++++-----------
 .../LocationLocations/LocationManager.js        | 11 +++++++++--
 src/settings/Plugins/PluginForm.js              |  2 +-
 src/settings/Plugins/Plugins.js                 | 15 ++++++++++++---
 src/settings/ServicePoints/LocationList.js      |  6 +++---
 src/settings/ServicePoints/constants.js         |  1 -
 9 files changed, 39 insertions(+), 25 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d889c0ca..0cae5387 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -15,6 +15,7 @@
 * [UITEN-298] (https://issues.folio.org/browse/UITEN-298) Update translation ids for reading room.
 * [UITEN-301] (https://issues.folio.org/browse/UITEN-301) Display Reading room access in alphabetical order on settings page.
 * [UITEN-212](https://folio-org.atlassian.net/browse/UITEN-212) Permission changes for service point management.
+* [UITEN-299](https://folio-org.atlassian.net/browse/UITEN-299) Rewrite class components to functional ones (ui-tenant-settings module).
 
 ## [8.1.0](https://github.com/folio-org/ui-tenant-settings/tree/v8.1.0)(2024-03-19)
 [Full Changelog](https://github.com/folio-org/ui-tenant-settings/compare/v8.0.0...v8.1.0)
diff --git a/src/settings/LocationLocations/LocationDetail.js b/src/settings/LocationLocations/LocationDetail.js
index bab2ca1d..e248e85b 100644
--- a/src/settings/LocationLocations/LocationDetail.js
+++ b/src/settings/LocationLocations/LocationDetail.js
@@ -330,9 +330,6 @@ const LocationDetail = ({
 
 LocationDetail.propTypes = {
   initialValues: PropTypes.object,
-  institutions: PropTypes.arrayOf(PropTypes.object),
-  campuses: PropTypes.arrayOf(PropTypes.object),
-  libraries: PropTypes.arrayOf(PropTypes.object),
   servicePointsById: PropTypes.object,
   onEdit: PropTypes.func.isRequired,
   onClone: PropTypes.func.isRequired,
diff --git a/src/settings/LocationLocations/LocationForm/LocationForm.js b/src/settings/LocationLocations/LocationForm/LocationForm.js
index b7049c1c..f8412ea0 100644
--- a/src/settings/LocationLocations/LocationForm/LocationForm.js
+++ b/src/settings/LocationLocations/LocationForm/LocationForm.js
@@ -57,7 +57,13 @@ const LocationForm = ({
     detailsSection: true,
   });
 
-  const mappedInstitutions = institutions.map(i => ({ value: i.id, label: `${i.name} ${i.code ? `(${i.code})` : ''}` }));
+  const mappedInstitutions = institutions.map(i => {
+    let label = i.name;
+    if (i.code) {
+      label += ` (${i.code})`;
+    }
+    return { value: i.id, label };
+  });
   const mappedServicePoints = sortBy(servicePoints, ['name']).map(i => ({ label: `${i.name}` }));
 
   const handleExpandAll = (newSections) => {
diff --git a/src/settings/LocationLocations/LocationForm/LocationFormContainer.js b/src/settings/LocationLocations/LocationForm/LocationFormContainer.js
index 2853148c..23aeba41 100644
--- a/src/settings/LocationLocations/LocationForm/LocationFormContainer.js
+++ b/src/settings/LocationLocations/LocationForm/LocationFormContainer.js
@@ -24,28 +24,23 @@ const LocationFormContainer = ({
 
   const callout = useContext(CalloutContext);
 
-  function showSubmitErrorCallout(error) {
+  const showSubmitErrorCallout = (error) => {
     callout.sendCallout({
       type: 'error',
       message: error.message || error.statusText || <FormattedMessage id="ui-tenant-settings.settings.save.error.network" />,
     });
-  }
+  };
 
   const { setMapping } = useRemoteStorageApi();
-
-  const { createLocation } = useLocationCreate({
+  const sharedOptions = {
     onSuccess: () => {
       queryClient.invalidateQueries(SERVICE_POINTS);
       queryClient.invalidateQueries(LOCATIONS);
     },
-  });
+  };
 
-  const { updateLocation } = useLocationUpdate({
-    onSuccess: () => {
-      queryClient.invalidateQueries(SERVICE_POINTS);
-      queryClient.invalidateQueries(LOCATIONS);
-    },
-  });
+  const { createLocation } = useLocationCreate(sharedOptions);
+  const { updateLocation } = useLocationUpdate(sharedOptions);
 
   const initiateSetMapping = (...args) => setMapping(...args).catch(showSubmitErrorCallout);
 
diff --git a/src/settings/LocationLocations/LocationManager.js b/src/settings/LocationLocations/LocationManager.js
index 9ea9a294..86b2f87e 100644
--- a/src/settings/LocationLocations/LocationManager.js
+++ b/src/settings/LocationLocations/LocationManager.js
@@ -160,7 +160,13 @@ const LocationManager = ({ label }) => {
   };
 
   const formatLocationDisplayName = (loc) => {
-    return `${loc.name}${loc.code ? ` (${loc.code})` : ''}`;
+    let lbl = loc.name;
+
+    if (loc.code) {
+      lbl += ` (${loc.code})`;
+    }
+
+    return lbl;
   };
 
   const onSort = (e, { name: fieldName }) => {
@@ -292,7 +298,8 @@ const LocationManager = ({ label }) => {
 
   const parseInitialValues = (loc, cloning = false) => {
     if (!loc) return loc;
-    loc.detailsArray = Object.keys(loc.details || []).map(name => ({ name, value: loc.details[name] })).sort();
+    loc.detailsArray = Object.keys(loc.details || []).map(name => ({ name, value: loc.details[name] }))
+      .sort((a, b) => a.name.localeCompare(b.name));
     return cloning ? omit(loc, 'id') : loc;
   };
 
diff --git a/src/settings/Plugins/PluginForm.js b/src/settings/Plugins/PluginForm.js
index a64b323b..8edfb919 100644
--- a/src/settings/Plugins/PluginForm.js
+++ b/src/settings/Plugins/PluginForm.js
@@ -33,7 +33,7 @@ const PluginForm = ({
 
     const options = [{ value: '@@', label: '(none)' }].concat(pluginType.map(p => ({
       value: p.module,
-      label: `${intl.formatMessage({ id: `ui-tenant-settings.settings.pluginNames.${p.pluginType}` })} ${p.version}`,
+      label: intl.formatMessage({ id: `ui-tenant-settings.settings.pluginNames.${p.pluginType}` }) + ' ' + p.version,
     })));
 
     const lbl = <FormattedMessage id={`ui-tenant-settings.settings.pluginNames.${plugin.configName}`} />;
diff --git a/src/settings/Plugins/Plugins.js b/src/settings/Plugins/Plugins.js
index 2f2acb92..f14061d4 100644
--- a/src/settings/Plugins/Plugins.js
+++ b/src/settings/Plugins/Plugins.js
@@ -2,6 +2,7 @@ import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage, useIntl } from 'react-intl';
 import { map, omit } from 'lodash';
+import { useQueryClient } from 'react-query';
 
 import { modules } from 'stripes-config'; // eslint-disable-line import/no-unresolved, import/no-extraneous-dependencies
 import {
@@ -13,12 +14,13 @@ import { TitleManager, useStripes } from '@folio/stripes/core';
 import PluginForm from './PluginForm';
 import { useConfigurationsCreate } from '../../hooks/useConfigurationsCreate';
 import { useConfigurationsUpdate } from '../../hooks/useConfigurationsUpdate';
-import { useConfigurations } from '../../hooks/useConfigurations';
+import { CONFIGURATIONS, useConfigurations } from '../../hooks/useConfigurations';
 
 
 const Plugins = ({ label }) => {
   const intl = useIntl();
   const stripes = useStripes();
+  const queryClient = useQueryClient();
   const callout = useRef(null);
 
   const { configs } = useConfigurations({
@@ -27,8 +29,15 @@ const Plugins = ({ label }) => {
       limit: '1000',
     },
   });
-  const { createConfiguration } = useConfigurationsCreate();
-  const { updateConfiguration } = useConfigurationsUpdate();
+
+  const sharedOptions = {
+    onSuccess: () => {
+      queryClient.invalidateQueries(CONFIGURATIONS);
+    },
+  };
+
+  const { createConfiguration } = useConfigurationsCreate(sharedOptions);
+  const { updateConfiguration } = useConfigurationsUpdate(sharedOptions);
 
   const pluginTypes = (() => {
     const plugins = modules.plugin || [];
diff --git a/src/settings/ServicePoints/LocationList.js b/src/settings/ServicePoints/LocationList.js
index effdb065..f1ba799e 100644
--- a/src/settings/ServicePoints/LocationList.js
+++ b/src/settings/ServicePoints/LocationList.js
@@ -8,7 +8,7 @@ import {
 const LocationList = ({ locations, expanded, servicePoint, onToggle }) => {
   const intl = useIntl();
 
-  const renderLocation = (location) => {
+  const renderLocation = (location, index) => {
     if (!location) return (<div />);
 
     const { name, code, primaryServicePoint } = location;
@@ -16,14 +16,14 @@ const LocationList = ({ locations, expanded, servicePoint, onToggle }) => {
       ? intl.formatMessage({ id: 'ui-tenant-settings.settings.servicePoints.primary' }) :
       '';
     const title = `${name} - ${code} ${primary}`;
-    return (<li key={title}>{title}</li>);
+    return (<li key={index}>{title}</li>);
   };
 
   const renderLocations = () => {
     return (
       <List
         items={locations}
-        itemFormatter={location => renderLocation(location)}
+        itemFormatter={renderLocation}
         isEmptyMessage={<FormattedMessage id="ui-tenant-settings.settings.servicePoints.noLocationsFound" />}
       />
     );
diff --git a/src/settings/ServicePoints/constants.js b/src/settings/ServicePoints/constants.js
index d0b1b2a5..f69fd268 100644
--- a/src/settings/ServicePoints/constants.js
+++ b/src/settings/ServicePoints/constants.js
@@ -1,5 +1,4 @@
 export const shortTermExpiryPeriod = ['Hours', 'Minutes'];
-export const longTermExpiryPeriod = ['Months', 'Weeks', 'Days'];
 
 export const closedLibraryDateManagementMapping = {
   Keep_the_current_due_date_time: 'keepTheOriginalDateTime',

From b3e77c8f4e2a73acb2e7e663e69ab33efcb28877 Mon Sep 17 00:00:00 2001
From: vashjs <vadym.shchekotilin@gmail.com>
Date: Tue, 6 Aug 2024 13:29:15 +0200
Subject: [PATCH 3/7] update

---
 .../LocationForm/ServicePointsFields.js       | 118 ++++++++++--------
 1 file changed, 65 insertions(+), 53 deletions(-)

diff --git a/src/settings/LocationLocations/LocationForm/ServicePointsFields.js b/src/settings/LocationLocations/LocationForm/ServicePointsFields.js
index b94561ee..14bf5568 100644
--- a/src/settings/LocationLocations/LocationForm/ServicePointsFields.js
+++ b/src/settings/LocationLocations/LocationForm/ServicePointsFields.js
@@ -4,7 +4,6 @@ import { Field } from 'react-final-form';
 import { FieldArray } from 'react-final-form-arrays';
 import PropTypes from 'prop-types';
 import { sortBy, cloneDeep, findIndex } from 'lodash';
-
 import {
   Icon,
   Layout,
@@ -12,10 +11,8 @@ import {
   RepeatableField,
   Select,
 } from '@folio/stripes/components';
-
 import css from './ServicePointsFields.css';
 
-
 const omitUsedOptions = (list, usedValues, key, id) => {
   const unUsedValues = cloneDeep(list);
   if (usedValues) {
@@ -33,10 +30,24 @@ const omitUsedOptions = (list, usedValues, key, id) => {
   return unUsedValues;
 };
 
-const ServicePointsFields = ({ servicePoints, changePrimary, formValues }) => {
-  const list = omitUsedOptions(servicePoints, formValues.servicePointIds, 'selectSP');
+class ServicePointsFields extends React.Component {
+  static propTypes = {
+    servicePoints: PropTypes.arrayOf(PropTypes.object),
+    changePrimary: PropTypes.func.isRequired,
+    formValues: PropTypes.object.isRequired,
+  };
+
+  constructor(props) {
+    super(props);
+    this.singlePrimary = this.singlePrimary.bind(this);
+    this.renderFields = this.renderFields.bind(this);
+    this.radioButtonComp = this.radioButtonComp.bind(this);
+    this.list = {};
+  }
+
+  singlePrimary(id) {
+    const { changePrimary, formValues } = this.props;
 
-  const singlePrimary = (id) => {
     formValues.servicePointIds.forEach((a, i) => {
       if (i === id) {
         changePrimary(i, true);
@@ -44,22 +55,25 @@ const ServicePointsFields = ({ servicePoints, changePrimary, formValues }) => {
         changePrimary(i, false);
       }
     });
-  };
+  }
 
-  const radioButtonComp = ({ input, fieldIndex }) => {
+  radioButtonComp({ input, ...props }) {
     return (
       <RadioButton
-        onChange={() => { singlePrimary(fieldIndex); }}
+        onChange={() => { this.singlePrimary(props.fieldIndex); }}
         checked={input.value}
         name={input.name}
-        aria-label={`servicePoint use as primary ${fieldIndex}`}
+        aria-label={`servicePoint use as primary ${props.fieldIndex}`}
       />
     );
-  };
+  }
+
+  renderFields(field, index) {
+    const { formValues } = this.props;
 
-  const renderFields = (field, index) => {
-    const availableOptions = omitUsedOptions(servicePoints, formValues.servicePointIds, 'selectSP', index);
-    const sortedList = sortBy(availableOptions, ['label']);
+    this.list = omitUsedOptions(this.props.servicePoints, formValues.servicePointIds, 'selectSP', index);
+
+    const sortedList = sortBy(this.list, ['label']);
     const options = [{ label: 'Select service point', value: '' }, ...sortedList];
 
     return (
@@ -81,54 +95,52 @@ const ServicePointsFields = ({ servicePoints, changePrimary, formValues }) => {
         </Layout>
         <Layout className={`display-flex ${css.radioButtonLayout}`}>
           <Field
-            component={radioButtonComp}
+            component={this.radioButtonComp}
             fieldIndex={index}
             name={`${field}.primary`}
           />
         </Layout>
       </Layout>
     );
-  };
-
-  // Make the last existing service point to be the primary one
-  if (formValues.servicePointIds && formValues.servicePointIds.length === 1 && !formValues.servicePointIds[0].primary) {
-    singlePrimary(0);
   }
 
-  const legend = (
-    <Layout className="display-flex">
-      <Layout className={`${css.label} ${css.servicePointsLabel}`}>
-        <FormattedMessage id="ui-tenant-settings.settings.location.locations.servicePoints" />
-        <span className={css.asterisk}>*</span>
-      </Layout>
-      <Layout className={`${css.label} ${css.primaryLabel}`}>
-        <FormattedMessage id="ui-tenant-settings.settings.location.locations.primary" />
-      </Layout>
-    </Layout>
-  );
+  render() {
+    const { formValues } = this.props;
 
-  return (
-    <>
-      <FieldArray
-        addLabel={
-          Object.keys(list).length > 1 ?
-            <Icon icon="plus-sign">Add service point</Icon> :
-            ''
-        }
-        legend={legend}
-        emptyMessage={<span className={css.emptyMessage}>Location must have at least one service point</span>}
-        component={RepeatableField}
-        name="servicePointIds"
-        renderField={renderFields}
-      />
-    </>
-  );
-};
+    // make the last existing service point to be the primary one
+    if (formValues.servicePointIds && formValues.servicePointIds.length === 1 && !formValues.servicePointIds[0].primary) {
+      this.singlePrimary(0);
+    }
 
-ServicePointsFields.propTypes = {
-  servicePoints: PropTypes.arrayOf(PropTypes.object),
-  changePrimary: PropTypes.func.isRequired,
-  formValues: PropTypes.object.isRequired,
-};
+    const legend = (
+      <Layout className="display-flex">
+        <Layout className={`${css.label} ${css.servicePointsLabel}`}>
+          <FormattedMessage id="ui-tenant-settings.settings.location.locations.servicePoints" />
+          <span className={css.asterisk}>*</span>
+        </Layout>
+        <Layout className={`${css.label} ${css.primaryLabel}`}>
+          <FormattedMessage id="ui-tenant-settings.settings.location.locations.primary" />
+        </Layout>
+      </Layout>
+    );
+
+    return (
+      <>
+        <FieldArray
+          addLabel={
+            Object.keys(this.list).length > 1 ?
+              <Icon icon="plus-sign">Add service point</Icon> :
+              ''
+          }
+          legend={legend}
+          emptyMessage={<span className={css.emptyMessage}>Location must have at least one service point</span>}
+          component={RepeatableField}
+          name="servicePointIds"
+          renderField={this.renderFields}
+        />
+      </>
+    );
+  }
+}
 
 export default ServicePointsFields;

From df21721d9619dbacf0dbe57b5a6d67242310a6ae Mon Sep 17 00:00:00 2001
From: vashjs <vadym.shchekotilin@gmail.com>
Date: Tue, 6 Aug 2024 13:50:55 +0200
Subject: [PATCH 4/7] update SSOSettings

---
 src/settings/SSOSettings/SSOSettings.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/settings/SSOSettings/SSOSettings.js b/src/settings/SSOSettings/SSOSettings.js
index ae9ebc67..934652ad 100644
--- a/src/settings/SSOSettings/SSOSettings.js
+++ b/src/settings/SSOSettings/SSOSettings.js
@@ -1,6 +1,7 @@
 import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage, useIntl } from 'react-intl';
+import { useQueryClient } from 'react-query';
 
 import { TitleManager, useOkapiKy, useStripes } from '@folio/stripes/core';
 import {
@@ -10,13 +11,14 @@ import {
 
 import { patronIdentifierTypes, samlBindingTypes } from '../../constants';
 import SamlForm from './SamlForm';
-import { useSamlConfiguration } from '../../hooks/useSamlConfiguration';
+import { SAML_CONFIGURATION, useSamlConfiguration } from '../../hooks/useSamlConfiguration';
 import { useSamlConfigurationUpdate } from '../../hooks/useSamlConfigurationUpdate';
 
 
 const SSOSettings = ({ label }) => {
   const intl = useIntl();
   const stripes = useStripes();
+  const queryClient = useQueryClient();
   const ky = useOkapiKy();
   const callout = useRef(null);
   const downloadButton = useRef(null);
@@ -26,6 +28,7 @@ const SSOSettings = ({ label }) => {
   const { updateSamlConfiguration } = useSamlConfigurationUpdate({
     onSuccess: () => {
       callout.current.sendCallout({ message: <FormattedMessage id="ui-tenant-settings.settings.updated" /> });
+      queryClient.invalidateQueries(SAML_CONFIGURATION);
     }
   });
 

From 20fc812182ff0a58ad84ddf4c6d50c541a023b6d Mon Sep 17 00:00:00 2001
From: vashjs <vadym.shchekotilin@gmail.com>
Date: Tue, 6 Aug 2024 16:26:22 +0200
Subject: [PATCH 5/7] fix layout problem

---
 src/hooks/useLocations.js                     |  3 +-
 .../LocationLocations/LocationManager.js      | 38 +++++++++++--------
 2 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/src/hooks/useLocations.js b/src/hooks/useLocations.js
index 94f2c033..d1ba8549 100644
--- a/src/hooks/useLocations.js
+++ b/src/hooks/useLocations.js
@@ -7,7 +7,7 @@ export const useLocations = ({ searchParams }) => {
   const ky = useOkapiKy();
   const [namespaceKey] = useNamespace({ key: LOCATIONS });
 
-  const { data, isLoading: isLocationsLoading } = useQuery({
+  const { data, isLoading: isLocationsLoading, refetch } = useQuery({
     queryKey: [LOCATIONS, namespaceKey, searchParams],
     queryFn: () => ky.get('locations', { searchParams }).json(),
   });
@@ -15,5 +15,6 @@ export const useLocations = ({ searchParams }) => {
   return {
     locations: data?.locations || [],
     isLocationsLoading,
+    refetch,
   };
 };
diff --git a/src/settings/LocationLocations/LocationManager.js b/src/settings/LocationLocations/LocationManager.js
index 86b2f87e..31de12b0 100644
--- a/src/settings/LocationLocations/LocationManager.js
+++ b/src/settings/LocationLocations/LocationManager.js
@@ -70,6 +70,21 @@ const initialSort = (location) => {
   return { sort, sortDir };
 };
 
+const locationListVisibleColumns = ['isActive', 'name', 'code'];
+
+const locationListColumnMapping = {
+  isActive: <FormattedMessage id="ui-tenant-settings.settings.location.locations.status" />,
+  name: <FormattedMessage id="ui-tenant-settings.settings.location.locations.detailsName" />,
+  code: <FormattedMessage id="ui-tenant-settings.settings.location.code" />,
+};
+
+const locationListFormatter = {
+  isActive: item => {
+    const locationId = item.isActive ? 'active' : 'inactive';
+    return <FormattedMessage id={`ui-tenant-settings.settings.location.locations.${locationId}`} />;
+  }
+};
+
 const LocationManager = ({ label }) => {
   const intl = useIntl();
   const stripes = useStripes();
@@ -81,18 +96,6 @@ const LocationManager = ({ label }) => {
   const match = useRouteMatch();
 
   const entryLabel = intl.formatMessage({ id: 'ui-tenant-settings.settings.location.locations.location' });
-  const locationListVisibleColumns = ['isActive', 'name', 'code'];
-  const locationListColumnMapping = {
-    isActive: intl.formatMessage({ id: 'ui-tenant-settings.settings.location.locations.status' }),
-    name: intl.formatMessage({ id: 'ui-tenant-settings.settings.location.locations.detailsName' }),
-    code: intl.formatMessage({ id: 'ui-tenant-settings.settings.location.code' }),
-  };
-  const locationListFormatter = {
-    isActive: item => {
-      const locationId = item.isActive ? 'active' : 'inactive';
-      return intl.formatMessage({ id: `ui-tenant-settings.settings.location.locations.${locationId}` });
-    }
-  };
   const hasAllLocationPerms = stripes.hasPerm('ui-tenant-settings.settings.location');
 
   const showCalloutMessage = (name) => {
@@ -135,10 +138,12 @@ const LocationManager = ({ label }) => {
     query: 'cql.allRecords=1 sortby name',
   } });
 
-  const { locations: locationEntries } = useLocations({ searchParams: {
-    limit: 3000,
-    query: 'cql.allRecords=1 sortby name'
-  } });
+  const { locations: locationEntries, refetch: refetchLocationEntries } = useLocations({
+    searchParams: {
+      limit: 3000,
+      query: 'cql.allRecords=1 sortby name'
+    },
+  });
 
   const { deleteLocation } = useLocationDelete({
     onSuccess: () => {
@@ -306,6 +311,7 @@ const LocationManager = ({ label }) => {
   const handleDetailClose = () => {
     transitionToParams({ _path: match.path });
     setSelectedId(null);
+    refetchLocationEntries();
   };
 
   const prepareLocationsData = () => {

From 4314f4fee837853a62540651ac8c94e59059f2c3 Mon Sep 17 00:00:00 2001
From: vashjs <vadym.shchekotilin@gmail.com>
Date: Tue, 6 Aug 2024 17:21:37 +0200
Subject: [PATCH 6/7] fix comments

---
 .../LocationForm/ServicePointsFields.js            | 14 ++++++++++----
 translations/ui-tenant-settings/en.json            |  1 +
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/settings/LocationLocations/LocationForm/ServicePointsFields.js b/src/settings/LocationLocations/LocationForm/ServicePointsFields.js
index 14bf5568..7745c1e2 100644
--- a/src/settings/LocationLocations/LocationForm/ServicePointsFields.js
+++ b/src/settings/LocationLocations/LocationForm/ServicePointsFields.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage, injectIntl } from 'react-intl';
 import { Field } from 'react-final-form';
 import { FieldArray } from 'react-final-form-arrays';
 import PropTypes from 'prop-types';
@@ -35,6 +35,7 @@ class ServicePointsFields extends React.Component {
     servicePoints: PropTypes.arrayOf(PropTypes.object),
     changePrimary: PropTypes.func.isRequired,
     formValues: PropTypes.object.isRequired,
+    intl: PropTypes.object,
   };
 
   constructor(props) {
@@ -74,7 +75,10 @@ class ServicePointsFields extends React.Component {
     this.list = omitUsedOptions(this.props.servicePoints, formValues.servicePointIds, 'selectSP', index);
 
     const sortedList = sortBy(this.list, ['label']);
-    const options = [{ label: 'Select service point', value: '' }, ...sortedList];
+    const options = [{
+      label: this.props.intl.formatMessage({ id: 'ui-tenant-settings.settings.servicePoints.placeholder' }),
+      value: ''
+    }, ...sortedList];
 
     return (
       <Layout className={`flex ${css.fieldsLayout}`} key={index}>
@@ -108,7 +112,9 @@ class ServicePointsFields extends React.Component {
     const { formValues } = this.props;
 
     // make the last existing service point to be the primary one
-    if (formValues.servicePointIds && formValues.servicePointIds.length === 1 && !formValues.servicePointIds[0].primary) {
+    const isPrimary = formValues.servicePointIds && formValues.servicePointIds.length === 1 && !formValues.servicePointIds[0].primary;
+
+    if (isPrimary) {
       this.singlePrimary(0);
     }
 
@@ -143,4 +149,4 @@ class ServicePointsFields extends React.Component {
   }
 }
 
-export default ServicePointsFields;
+export default injectIntl(ServicePointsFields);
diff --git a/translations/ui-tenant-settings/en.json b/translations/ui-tenant-settings/en.json
index 300476e6..3e456438 100644
--- a/translations/ui-tenant-settings/en.json
+++ b/translations/ui-tenant-settings/en.json
@@ -154,6 +154,7 @@
   "settings.servicePoints.assignedLocations": "Assigned locations",
   "settings.servicePoints.location": "Location",
   "settings.servicePoints.selectLocation": "Select location name or code",
+  "settings.servicePoints.placeholder": "Select service point",
   "settings.servicePoints.addLocation": "Add location",
   "settings.servicePoints.noLocationsFound": "No locations found",
   "settings.servicePoints.validation.required": "Please fill this in to continue",

From 77a7683d906ab345e235b975e6f5669e02446208 Mon Sep 17 00:00:00 2001
From: vashjs <vadym.shchekotilin@gmail.com>
Date: Tue, 6 Aug 2024 22:18:09 +0200
Subject: [PATCH 7/7] update Locale time

---
 src/settings/Locale.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/settings/Locale.js b/src/settings/Locale.js
index d5fdfab5..18d75407 100644
--- a/src/settings/Locale.js
+++ b/src/settings/Locale.js
@@ -23,7 +23,7 @@ const Locale = ({ label, ...rest }) => {
       if (locale) stripes.setLocale(locale);
       if (timezone) stripes.setTimezone(timezone);
       if (currency) stripes.setCurrency(currency);
-    }, 500);
+    }, 2000);
   };
 
   return (