# Static settings pages

## Premise
A set of hooks and utilities for use in static settings pages.
The dynamic AppSettings pages are great for getting a system up and running, but lack any design, and have pretty poor UX.

Instead we often wish to replace these modular dynamic pages with ones statically designed and rendered.

## Usage
In the example below, one can see how the user might make use of the initialValues and onSubmit from the useStaticSettingsSection
in order to set up everything needed to handle a static settings section form
```javascript
import { Form, Field } from 'react-final-form';
import { FormattedMessage } from 'react-intl';
import { useQueryClient } from 'react-query';

import {
  Button,
  Label,
  RadioButton,
  RadioButtonGroup,
  Tooltip,
  IconButton,
  TextField,
  Pane,
  Row,
  Col
} from '@folio/stripes/components';

import {
  useStaticSettingsSection
} from '@k-int/stripes-kint-components';
import { SETTINGS_INSTITUTION_ENDPOINT, useILLRefdata } from '@k-int/stripes-ill';

// Some constants for refdata vocab names
const AUTO_RESPONDER = 'AutoResponder';
const AUTO_RESPONDER_LOCAL = 'AutoResponder_Local';
const AUTO_RESPONDER_CANCEL = 'AutoResponder_Cancel';
const YES_NO = 'YesNo';

const AutoResponderSettings = () => {
  const queryClient = useQueryClient();
  const refdataValues = useILLRefdata([AUTO_RESPONDER, AUTO_RESPONDER_LOCAL, AUTO_RESPONDER_CANCEL, YES_NO]);
  const queryNamespaceBase = ['ILL', 'Settings', 'AutoResponderSettings'];

  const {
    initialValues,
    onSubmit,
  } = useStaticSettingsSection({
    intlKey: 'ui-ill-ui', // FIXME it's kind of crazy that this isn't set up above in the main App...
    onSubmitComplete: () => queryClient.invalidateQueries(queryNamespaceBase), // Ensure it updates fields after submits
    sectionName: 'autoResponder',
    settingEndpoint: SETTINGS_INSTITUTION_ENDPOINT,
    getQueryNamespaceGenerator: ({ queryParams }) => [...queryNamespaceBase, queryParams]
  });

  const renderRefdataSetting = ({
    helpText,
    label,
    name,
    fieldRefdataValues = [],
  }) => (
    <Field
      component={RadioButtonGroup}
      label={
        <Label>
          {label}
          {helpText ?
            <Tooltip text={helpText}>
              {({ ref, ariaIds }) => (
                <IconButton
                  ref={ref}
                  aria-describedby={ariaIds.sub}
                  aria-labelledby={ariaIds.text}
                  icon="info"
                />
              )}
            </Tooltip> :
            null
          }
        </Label>
      }
      name={name}
    >
      {
        fieldRefdataValues.map(rdv => (
          <RadioButton
            key={`${name}-option-${rdv.value}`}
            label={rdv.label}
            value={rdv.value}
          />
        ))
      }
    </Field>
  );

  return (
    <Form
      initialValues={initialValues}
      onSubmit={onSubmit}
      render={({ handleSubmit, submitting, pristine, invalid }) => (
        <form onSubmit={handleSubmit}>
          <Pane
            defaultWidth="fill"
            lastMenu={
              <Button
                buttonStyle="primary"
                disabled={submitting || pristine || invalid}
                marginBottom0
                onClick={handleSubmit}
              >
                <FormattedMessage id="ui-ill-ui.save" />
              </Button>
          }
            paneTitle={<FormattedMessage id="ui-ill-ui.settings.settingsSection.autoResponder" />}
          >
            <Row>
              <Col xs={6}>
                {renderRefdataSetting({
                  helpText: <FormattedMessage id="ui-ill-ui.settings.autoResponder.autoResponderCancel.help" />,
                  label: <FormattedMessage id="ui-ill-ui.settings.autoResponder.autoResponderCancel" />,
                  name: 'auto_responder_cancel',
                  fieldRefdataValues: refdataValues.find(rdc => rdc.desc === AUTO_RESPONDER_CANCEL)?.values ?? []
                })}
              </Col>
              <Col xs={6}>
                {renderRefdataSetting({
                  helpText: <FormattedMessage id="ui-ill-ui.settings.autoResponder.autoResponderLocal.help" />,
                  label: <FormattedMessage id="ui-ill-ui.settings.autoResponder.autoResponderLocal" />,
                  name: 'auto_responder_local',
                  fieldRefdataValues: refdataValues.find(rdc => rdc.desc === AUTO_RESPONDER_LOCAL)?.values ?? []
                })}
              </Col>
            </Row>
            <Row>
              <Col xs={6}>
                {renderRefdataSetting({
                  helpText: <FormattedMessage id="ui-ill-ui.settings.autoResponder.autoResponderStatus.help" />,
                  label: <FormattedMessage id="ui-ill-ui.settings.autoResponder.autoResponderStatus" />,
                  name: 'auto_responder_status',
                  fieldRefdataValues: refdataValues.find(rdc => rdc.desc === AUTO_RESPONDER)?.values ?? []
                })}
              </Col>
              <Col xs={6}>
                {renderRefdataSetting({
                  label: <FormattedMessage id="ui-ill-ui.settings.autoResponder.enableLocalAvailabilityCheck" />,
                  name: 'enable_local_availability_check',
                  fieldRefdataValues: refdataValues.find(rdc => rdc.desc === YES_NO)?.values ?? []
                })}
              </Col>
            </Row>
            <Row>
              <Col xs={6}>
                <Field
                  component={TextField}
                  label={<FormattedMessage id="ui-ill-ui.settings.autoResponder.staleAfter" />}
                  name="stale_request_2_days"
                />
              </Col>
              <Col xs={6}>
                {renderRefdataSetting({
                  helpText: <FormattedMessage id="ui-ill-ui.settings.autoResponder.staleRequest3ExcludeWeekend.help" />,
                  label: <FormattedMessage id="ui-ill-ui.settings.autoResponder.staleRequest3ExcludeWeekend" />,
                  name: 'stale_request_3_exclude_weekend',
                  fieldRefdataValues: refdataValues.find(rdc => rdc.desc === YES_NO)?.values ?? []
                })}
              </Col>
            </Row>
            <Row>
              <Col xs={6}>
                {renderRefdataSetting({
                  helpText: <FormattedMessage id="ui-ill-ui.settings.autoResponder.staleRequest1Enabled.help" />,
                  label: <FormattedMessage id="ui-ill-ui.settings.autoResponder.staleRequest1Enabled" />,
                  name: 'stale_request_1_enabled',
                  fieldRefdataValues: refdataValues.find(rdc => rdc.desc === YES_NO)?.values ?? []
                })}
              </Col>
            </Row>
          </Pane>
        </form>
      )}
    />
  );
};

export default AutoResponderSettings;
```