[DUOS-2797] Create Request LC page (#2414)

Co-authored-by: Gregory Rushton <rushtong@users.noreply.github.com>
DataBiosphere · Dec 5, 2023 · 49778d9 · 49778d9
1 parent bcbbb7f
commit 49778d9
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 30 deletions.
diff --git a/src/Routes.js b/src/Routes.js
@@ -15,7 +15,7 @@ import NIHICWebform from './pages/NIHicWebform';
 import PrivacyPolicy from './pages/PrivacyPolicy';
 import ResearcherConsole from './pages/researcher_console/ResearcherConsole';
 import UserProfile from './pages/user_profile/UserProfile';
-import RequestRole from './pages/user_profile/RequestRole';
+import RequestForm from './pages/user_profile/RequestForm';
 import SigningOfficialResearchers from './pages/signing_official_console/SigningOfficialResearchers';
 import SigningOfficialDarRequests from './pages/signing_official_console/SigningOfficialDarRequests';
 import SigningOfficialDataSubmitters from './pages/signing_official_console/SigningOfficialDataSubmitters';
@@ -66,7 +66,8 @@ const Routes = (props) => (
     <Route path="/nih_dms_policy" component={NIHDMSPolicyInfo} />
     <Route path="/anvil_dms_policy" component={AnVILDMSPolicyInfo} />
     <AuthenticatedRoute path="/profile" component={UserProfile} props={props} rolesAllowed={[USER_ROLES.all]} />
-    <AuthenticatedRoute path="/request_role" component={RequestRole} props={props} rolesAllowed={[USER_ROLES.all]} />
+    <AuthenticatedRoute path="/request_role" component={RequestForm} props={Object.assign({}, props, {isRequestRolePage: true})} rolesAllowed={[USER_ROLES.all]} />
+    <AuthenticatedRoute path="/request_lc" component={RequestForm} props={Object.assign({}, props, {isRequestLCPage: true})} rolesAllowed={[USER_ROLES.all]} />
     <AuthenticatedRoute path="/admin_review_collection/:collectionId" component={DarCollectionReview} props={Object.assign({adminPage: true}, props)} rolesAllowed={[USER_ROLES.admin]} />
     <AuthenticatedRoute path="/admin_manage_users" component={AdminManageUsers} props={props} rolesAllowed={[USER_ROLES.admin]} />
     <AuthenticatedRoute path="/admin_edit_user/:userId" component={AdminEditUser} props={props} rolesAllowed={[USER_ROLES.admin]} />

diff --git a/src/pages/user_profile/LibraryCard.js b/src/pages/user_profile/LibraryCard.js
@@ -9,8 +9,8 @@ export default function LibraryCard(props) {
 
   return <div style={{ display: 'flex' }}>
     <div style={{
-      height: '40px',
-      width: '60px',
+      height: '50px',
+      width: '160px',
       background: '#00A097',
       borderRadius: '4px',
       boxShadow: '0px 4px 4px 0px rgba(0, 0, 0, 0.25) inset',
@@ -20,7 +20,7 @@ export default function LibraryCard(props) {
         fontFamily: 'Montserrat',
         fontSize: '16px',
         fontWeight: '500',
-        lineHeight: '20px',
+        lineHeight: '30px',
         letterSpacing: '0em',
         textAlign: 'center',
         color: 'rgba(255, 255, 255, 1)'

diff --git a/src/pages/user_profile/RequestRole.js → src/pages/user_profile/RequestForm.js b/src/pages/user_profile/RequestRole.js → src/pages/user_profile/RequestForm.js
@@ -4,7 +4,7 @@ import { Notifications } from '../../libs/utils';
 import { isNil } from 'lodash';
 import { FormField, FormFieldTypes } from '../../components/forms/forms';
 
-export default function RequestRole(props) {
+export default function SupportRequestsPage(props) {
 
   const profile = props.location.state?.data || undefined;
 
@@ -16,29 +16,55 @@ export default function RequestRole(props) {
     marginBottom: '1rem'
   };
 
-  const possibleSupportRequests = [
-    {
-      key: 'checkRegisterDataset',
-      label: 'Register a dataset'
-    },
-    {
-      key: 'checkSOPermissions',
-      label: `I am a Signing Official and I want to issue permissions to my institution's users`
-    },
-    {
-      key: 'checkJoinDac',
-      label: 'I am looking to join a DAC'
-    }
-  ];
+  var possibleSupportRequests;
+  var hasSupportRequestsCond;
+  var supportRequestsCond;
+
+  if (props.isRequestRolePage) {
+    possibleSupportRequests = [
+      {
+        key: 'checkRegisterDataset',
+        label: 'Register a dataset'
+      },
+      {
+        key: 'checkSOPermissions',
+        label: `I am a Signing Official and I want to issue permissions to my institution's users`
+      },
+      {
+        key: 'checkJoinDac',
+        label: 'I am looking to join a DAC'
+      }
+    ];
+    hasSupportRequestsCond = false;
+    supportRequestsCond = {
+      checkRegisterDataset: false,
+      checkRequestDataAccess: false,
+      checkSOPermissions: false,
+      checkJoinDac: false,
+      extraRequest: undefined
+    };
+  }
+  else if (props.isRequestLCPage) {
+    possibleSupportRequests = [
+      {
+        key: 'requestNewLC',
+        label: 'Request a new library card',
+        isDefaultOption: true,
+      }
+    ];
+    hasSupportRequestsCond = true;
+    supportRequestsCond = {
+      requestNewLC: true,
+    };
+  }
+  else {
+    possibleSupportRequests = [];
+    hasSupportRequestsCond = false;
+    supportRequestsCond = {};
+  }
 
-  const [hasSupportRequests, setHasSupportRequests] = useState(false);
-  const [supportRequests, setSupportRequests] = useState({
-    checkRegisterDataset: false,
-    checkRequestDataAccess: false,
-    checkSOPermissions: false,
-    checkJoinDac: false,
-    extraRequest: undefined
-  });
+  const [hasSupportRequests, setHasSupportRequests] = useState(hasSupportRequestsCond);
+  const [supportRequests, setSupportRequests] = useState(supportRequestsCond);
 
   const goToPrevPage = async (event) => {
     event.preventDefault();
@@ -119,7 +145,7 @@ export default function RequestRole(props) {
         fontWeight: '600',
         marginTop: 10
       }}>
-      Request a New Role in DUOS
+      {props.isRequestRolePage ? 'Request a New Role' : (props.isRequestLCPage ? 'Request Library Card' : '')}
     </p>
     <div
       style={{
@@ -135,6 +161,8 @@ export default function RequestRole(props) {
       {possibleSupportRequests.map((supportRequest) => {
         return <FormField
           toggleText={supportRequest.label}
+          defaultValue={supportRequest?.isDefaultOption}
+          disabled={supportRequest?.isDefaultOption}
           type={FormFieldTypes.CHECKBOX}
           key={supportRequest.key}
           id={supportRequest.key}

diff --git a/src/pages/user_profile/ResearcherStatus.js b/src/pages/user_profile/ResearcherStatus.js
@@ -19,7 +19,7 @@ export default function ResearcherStatus(props) {
 
   const goToRequestRole = () => {
     pageProps.history.push({
-      pathname: '/request_role',
+      pathname: '/request_lc',
       state: { data: profile }
     });
   };