Merge pull request #359 from scientist-softserv/345-disable-request-form

Show disabled form for logged out users

Author: alishaevn

pages/requests/new/[ware].js

@@ -31,6 +31,7 @@ const NewRequest = ({ session }) => {
   const { ware } = useOneWare(wareID, accessToken)
   const { dynamicForm, isLoadingInitialRequest, isInitialRequestError } = useInitializeRequest(wareID, accessToken)
   const oneWeekFromNow = addDays((new Date()), 7).toISOString().slice(0, 10)
+  const disabled = session === null ? true : false
   const initialFormData = { 'suppliers_identified': 'Yes' }
   const initialState = {
     billingSameAsShipping: false,
@@ -83,7 +84,6 @@ const NewRequest = ({ session }) => {
    * using a guard clause with an early return inside the api methods also violates the react-hooks/rules-of-hooks rule.
    */
   if (session === undefined) return pageLoading
-  if (session === null) return unauthorizedUser
 
   /**
    * @param {object} event onChange event
@@ -172,52 +172,61 @@ const NewRequest = ({ session }) => {
   }
 
   return(
-    <div className='container'>
-      <Title title={dynamicForm.name || ''} addClass='my-4' />
-      {dynamicForm.schema ? (
-        <>
-          <TextBox 
-            text={ware.snippet}
-            size='large'
-            style={{ fontWeight: '550' }}
-          />
-          <Form
-            formData={formData}
-            onChange={e => setFormData(e.formData)}
+    <>
+      {disabled &&
+        <SignInRequired />
+      }
+      <div className='container'>
+        <Title title={dynamicForm.name || ''} addClass='my-4' />
+        {dynamicForm.schema ? (
+          <>
+            <TextBox
+              text={ware.snippet}
+              size='large'
+              style={{ fontWeight: '550' }}
+            />
+            <Form
+              formData={formData}
+              onChange={e => setFormData(e.formData)}
+              onSubmit={handleSubmit}
+              schema={dynamicForm.schema}
+              uiSchema={dynamicForm.uiSchema}
+              validator={validator}
+              disabled={disabled}
+            >
+              <StandardRequestOptions
+                defaultRequiredDate={oneWeekFromNow}
+                requestForm={requestForm}
+                updateRequestForm={updateRequestForm}
+                buttonDisabled={buttonDisabled || disabled}
+                disabled={disabled}
+              />
+            </Form>
+          </>
+        ) : (
+          <BsForm
             onSubmit={handleSubmit}
-            schema={dynamicForm.schema}
-            uiSchema={dynamicForm.uiSchema}
-            validator={validator}
+            id={`new-${wareID}-request-form`}
+            noValidate
+            validated={validated}
+            disabled={disabled}
           >
+            <BlankRequestForm updateRequestForm={updateRequestForm} />
             <StandardRequestOptions
               defaultRequiredDate={oneWeekFromNow}
               requestForm={requestForm}
               updateRequestForm={updateRequestForm}
-              buttonDisabled={buttonDisabled}
+              buttonDisabled={buttonDisabled || disabled}
+              disabled={disabled}
             />
-          </Form>
-        </>
-      ) : (
-        <BsForm
-          onSubmit={handleSubmit}
-          id={`new-${wareID}-request-form`}
-          noValidate
-          validated={validated}
-        >
-          <BlankRequestForm updateRequestForm={updateRequestForm} />
-          <StandardRequestOptions
-            defaultRequiredDate={oneWeekFromNow}
-            requestForm={requestForm}
-            updateRequestForm={updateRequestForm}
-            buttonDisabled={buttonDisabled}
-          />
-        </BsForm>
-      )}
-    </div>
+          </BsForm>
+        )}
+      </div>
+    </>
   )
 }
 
-const StandardRequestOptions = ({ buttonDisabled, defaultRequiredDate, requestForm, updateRequestForm, }) => {
+const StandardRequestOptions = ({ buttonDisabled, defaultRequiredDate, requestForm, updateRequestForm, disabled }) => {
   return (
     <>
       <div className='row'>
@@ -227,20 +236,22 @@ const StandardRequestOptions = ({ buttonDisabled, defaultRequiredDate, requestFo
             billingCountry={requestForm.billing.country}
             shippingCountry={requestForm.shipping.country}
             updateRequestForm={updateRequestForm}
+            disabled={disabled}
           />
         </div>
         <div className='col'>
           <AdditionalInfo
             updateRequestForm={updateRequestForm}
             defaultRequiredDate={defaultRequiredDate}
             backgroundColor={requestFormHeaderBg}
+            disabled={disabled}
           />
         </div>
       </div>
       <Button
         addClass='btn btn-primary my-4 ms-auto d-block'
         backgroundColor={buttonBg}
-        disabled={buttonDisabled}
+        disabled={buttonDisabled || disabled}
         label='Initiate Request'
         type='submit'
         size='large'
@@ -251,12 +262,12 @@ const StandardRequestOptions = ({ buttonDisabled, defaultRequiredDate, requestFo
 
 const pageLoading = <Loading wrapperClass='item-page mt-5' />
 
-const unauthorizedUser = (
+const SignInRequired = () => (
   <Notice
-    addClass='my-5'
+    addClass='mt-5'
     alert={{
-      body: ['Please log in to make new requests.'],
-      title: 'Unauthorized',
+      body: ['To proceed with making a request, please log in to your account.'],
+      title: 'Sign in required',
       variant: 'info'
     }}
     dismissible={false}

utils/api/requests.js

@@ -119,7 +119,7 @@ export const useFiles = (id, accessToken) => {
 }
 
 export const useInitializeRequest = (id, accessToken) => {
-  const { data, error } = useSWR(accessToken ? [`/wares/${id}/quote_groups/new.json`, accessToken] : null)
+  const { data, error } = useSWR(id ? [`/wares/${id}/quote_groups/new.json`, accessToken] : null)
   let dynamicForm = { name: data?.name }
   let dynamicFormInfo = data?.dynamic_forms[0]
 

utils/theme/theme.module.scss

@@ -5,7 +5,7 @@ $secondary: #936AAA;
 $light: #F2F2F2;
 $dark: #070818;
 $success: #B0E298;
-$info: #FFFBA6;
+$info: #8eb3fc;
 $warning: #E9DF00;
 $danger: #D20000;
 $black: #000000;