Simplifying GetThisOptions.

src/modules/getthis/components/GetThisOptions/index.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import { Alert } from '../../../reusable';
+import GetThisOption from '../GetThisOption';
+import { Authentication } from '../../../profile';
+import PropTypes from 'prop-types';
+
+function GetThisOptions ({ record }) {
+  if (!record?.getthis) {
+    return (
+      <Alert>
+        <p>Loading holding options...</p>
+      </Alert>
+    );
+  }
+
+  const { status, options } = record.getthis;
+
+  if (status === 'Not logged in') {
+    return (
+      <Authentication button>
+        <span className='strong'>Log in</span> to view request options
+      </Authentication>
+    );
+  }
+
+  if (status === 'Success') {
+    return options?.length
+      ? (
+        <>
+          {options.map((option, index) => {
+            return (
+              <GetThisOption option={option} key={index} />
+            );
+          })}
+        </>
+        )
+      : (
+        <Alert type='error'>
+          No options available.
+        </Alert>
+        );
+  }
+
+  return (
+    <Alert>
+      <p>Sorry, something unexpected happened.</p>
+      <p><span className='strong'>Status:</span> {status}</p>
+    </Alert>
+  );
+}
+
+GetThisOptions.propTypes = {
+  record: PropTypes.object.isRequired
+};
+
+export default GetThisOptions;

src/modules/getthis/components/GetThisPage/index.js

@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
 import { useSelector } from 'react-redux';
 import { useParams, useLocation } from 'react-router-dom';
 import { requestRecord, requestGetThis } from '../../../pride';
-import { GetThisOptionList, GetThisRecord } from '../../../getthis';
+import { GetThisOptions, GetThisRecord } from '../../../getthis';
 import { Alert, Breadcrumb, H1 } from '../../../reusable';
 
 const GetThisPage = () => {
@@ -43,7 +43,12 @@ const GetThisPage = () => {
         : (
           <>
             <GetThisRecord barcode={barcode} />
-            <GetThisOptionList record={record} />
+            <section className='card get-this-section y-spacing'>
+              <h2 className='fieldset-label margin-top__none'>
+                How would you like to get this item?
+              </h2>
+              <GetThisOptions record={record} />
+            </section>
           </>
           )}
     </article>

src/modules/getthis/index.js

@@ -1,11 +1,11 @@
+import GetThisForm from './components/GetThisForm';
+import GetThisOptions from './components/GetThisOptions';
 import GetThisPage from './components/GetThisPage';
-import GetThisOptionList from './components/GetThisOptionList';
 import GetThisRecord from './components/GetThisRecord';
-import GetThisForm from './components/GetThisForm';
 
 export {
+  GetThisForm,
+  GetThisOptions,
   GetThisPage,
-  GetThisOptionList,
-  GetThisRecord,
-  GetThisForm
+  GetThisRecord
 };