refactor: query key and checkbox component

folio-org · Oct 27, 2023 · 81f4927 · 81f4927
1 parent fcd0434
commit 81f4927
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 53 deletions.
diff --git a/src/Settings/BankingInformationSettings/BankingInformationSettings.test.js b/src/Settings/BankingInformationSettings/BankingInformationSettings.test.js
@@ -35,13 +35,6 @@ describe('BankingInformationSettings component', () => {
     expect(paneTitle).toHaveLength(2);
   });
 
-  it('should display radio buttons', async () => {
-    renderBankingInformationSettings();
-
-    expect(screen.getByText('ui-organizations.settings.bankingInformation.enabled')).toBeInTheDocument();
-    expect(screen.getByText('ui-organizations.settings.bankingInformation.disabled')).toBeInTheDocument();
-  });
-
   it('should render Loading component', () => {
     useBankingInformation.mockReturnValue({
       isLoading: true,
@@ -71,11 +64,11 @@ describe('BankingInformationSettings component', () => {
 
     renderBankingInformationSettings();
 
-    const disabledButton = screen.getByText('ui-organizations.settings.bankingInformation.disabled');
+    const checkbox = screen.getByRole('checkbox', { name: 'ui-organizations.settings.bankingInformation' });
     const saveButton = screen.getByText('ui-organizations.settings.accountTypes.save.button');
 
     await act(async () => {
-      await user.click(disabledButton);
+      await user.click(checkbox);
       await user.click(saveButton);
     });
 

diff --git a/src/Settings/BankingInformationSettings/BankingInformationSettingsForm.js b/src/Settings/BankingInformationSettings/BankingInformationSettingsForm.js
@@ -5,13 +5,11 @@ import { Field } from 'react-final-form';
 
 import {
   Button,
+  Checkbox,
   Col,
-  Headline,
   Pane,
   PaneFooter,
   PaneHeader,
-  RadioButton,
-  RadioButtonGroup,
   Row,
 } from '@folio/stripes/components';
 import stripesForm from '@folio/stripes/final-form';
@@ -21,24 +19,21 @@ const BankingInformationSettingsForm = ({
   pristine,
   submitting,
 }) => {
-  const paneFooter = useMemo(
-    () => {
-      const end = (
-        <Button
-          id="clickable-save-contact-person-footer"
-          type="submit"
-          buttonStyle="primary mega"
-          disabled={pristine || submitting}
-          onClick={handleSubmit}
-        >
-          <FormattedMessage id="ui-organizations.settings.accountTypes.save.button" />
-        </Button>
-      );
+  const paneFooter = useMemo(() => {
+    const end = (
+      <Button
+        id="clickable-save-contact-person-footer"
+        type="submit"
+        buttonStyle="primary mega"
+        disabled={pristine || submitting}
+        onClick={handleSubmit}
+      >
+        <FormattedMessage id="ui-organizations.settings.accountTypes.save.button" />
+      </Button>
+    );
 
-      return <PaneFooter renderEnd={end} />;
-    },
-    [handleSubmit, pristine, submitting],
-  );
+    return <PaneFooter renderEnd={end} />;
+  }, [handleSubmit, pristine, submitting]);
 
   const paneTitle = <FormattedMessage id="ui-organizations.settings.bankingInformation" />;
 
@@ -50,27 +45,14 @@ const BankingInformationSettingsForm = ({
       footer={paneFooter}
     >
       <Row>
-        <Col xs={12}>
-          <Headline margin="none">
-            <FormattedMessage id="ui-organizations.settings.bankingInformation" />
-          </Headline>
-        </Col>
         <Col xs={12}>
           <Field
+            component={Checkbox}
+            label={<FormattedMessage id="ui-organizations.settings.bankingInformation" />}
             name="value"
-            component={RadioButtonGroup}
-          >
-            <RadioButton
-              label={<FormattedMessage id="ui-organizations.settings.bankingInformation.enabled" />}
-              id="enabled"
-              value="true"
-            />
-            <RadioButton
-              label={<FormattedMessage id="ui-organizations.settings.bankingInformation.disabled" />}
-              id="disabled"
-              value="false"
-            />
-          </Field>
+            type="checkbox"
+            vertical
+          />
         </Col>
       </Row>
     </Pane>

diff --git a/src/Settings/BankingInformationSettings/BankingInformationSettingsForm.test.js b/src/Settings/BankingInformationSettings/BankingInformationSettingsForm.test.js
@@ -19,21 +19,20 @@ const renderBankingInformationSettingsForm = (props = DEFAULT_PROPS) => render(
 );
 
 describe('BankingInformationSettingsForm component', () => {
-  it('should display radio buttons', async () => {
+  it('should render component', async () => {
     renderBankingInformationSettingsForm();
 
-    expect(screen.getByText('ui-organizations.settings.bankingInformation.enabled')).toBeInTheDocument();
-    expect(screen.getByText('ui-organizations.settings.bankingInformation.disabled')).toBeInTheDocument();
+    expect(screen.getAllByLabelText('ui-organizations.settings.bankingInformation')).toHaveLength(2);
   });
 
   it('should save banking options', async () => {
     renderBankingInformationSettingsForm();
 
-    const disabledButton = screen.getByText('ui-organizations.settings.bankingInformation.disabled');
+    const checkbox = screen.getByRole('checkbox', { name: 'ui-organizations.settings.bankingInformation' });
     const saveButton = screen.getByText('ui-organizations.settings.accountTypes.save.button');
 
     await act(async () => {
-      await user.click(disabledButton);
+      await user.click(checkbox);
       await user.click(saveButton);
     });
 

diff --git a/src/Settings/constants.js b/src/Settings/constants.js
@@ -1,7 +1,8 @@
 export const SETTINGS_API = 'organizations-storage/settings';
 export const BANKING_ACCOUNT_TYPES_API = 'organizations-storage/banking-account-types';
 
+export const BANKING_INFORMATION_ENABLED_QUERY_KEY = 'key=BANKING_INFORMATION_ENABLED';
 export const BANKING_INFORMATION_SEARCH_QUERY = {
-  query: 'key=BANKING_INFORMATION_ENABLED',
+  query: BANKING_INFORMATION_ENABLED_QUERY_KEY,
   limit: 1,
 };