Show disabled form for logged out users

pages/requests/new/[ware].js

@@ -28,6 +28,7 @@ const NewRequest = ({ session }) => {
   const wareID = router.query.id
   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,
@@ -80,7 +81,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
@@ -169,45 +169,62 @@ const NewRequest = ({ session }) => {
   }
 
   return(
-    <div className='container'>
-      <Title title={dynamicForm.name || ''} addClass='my-4' />
-      {dynamicForm.schema ? (
-        <Form
-          formData={formData}
-          onChange={e => setFormData(e.formData)}
-          onSubmit={handleSubmit}
-          schema={dynamicForm.schema}
-          uiSchema={dynamicForm.uiSchema}
-          validator={validator}
-        >
-          <StandardRequestOptions
-            defaultRequiredDate={oneWeekFromNow}
-            requestForm={requestForm}
-            updateRequestForm={updateRequestForm}
-            buttonDisabled={buttonDisabled}
-          />
-        </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>
+    <>
+      {disabled &&
+        <Notice
+          addClass='mt-5'
+          alert={{
+            body: ['To proceed with making a request, please log in to your account.'],
+            title: 'Sign in required',
+            variant: 'info'
+          }}
+          dismissible={false}
+        />
+      }
+      <div className='container'>
+        <Title title={dynamicForm.name || ''} addClass='my-4' />
+        {dynamicForm.schema ? (
+          <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}
+            id={`new-${wareID}-request-form`}
+            noValidate
+            validated={validated}
+            disabled={disabled}
+          >
+            <BlankRequestForm updateRequestForm={updateRequestForm} />
+            <StandardRequestOptions
+              defaultRequiredDate={oneWeekFromNow}
+              requestForm={requestForm}
+              updateRequestForm={updateRequestForm}
+              buttonDisabled={buttonDisabled || disabled}
+              disabled={disabled}
+            />
+          </BsForm>
+        )}
+      </div>
+    </>
   )
 }
 
-const StandardRequestOptions = ({ buttonDisabled, defaultRequiredDate, requestForm, updateRequestForm, }) => {
+const StandardRequestOptions = ({ buttonDisabled, defaultRequiredDate, requestForm, updateRequestForm, disabled }) => {
   return (
     <>
       <div className='row'>
@@ -217,20 +234,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'
@@ -241,16 +260,5 @@ const StandardRequestOptions = ({ buttonDisabled, defaultRequiredDate, requestFo
 
 const pageLoading = <Loading wrapperClass='item-page mt-5' />
 
-const unauthorizedUser = (
-  <Notice
-    addClass='my-5'
-    alert={{
-      body: ['Please log in to make new requests.'],
-      title: 'Unauthorized',
-      variant: 'info'
-    }}
-    dismissible={false}
-  />
-)
 
 export default NewRequest

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;