msteele/APPEALS-24727

client/COPY.json

@@ -661,6 +661,9 @@
   "CREATE_MAIL_TASK_TITLE": "Create new mail task",
   "MAIL_TASK_DROPDOWN_TYPE_SELECTOR_LABEL": "Select correspondence type",
   "MAIL_TASK_CREATION_SUCCESS_MESSAGE": "Created %s task",
+  "EFOLDER_DOCUMENT_NOT_FOUND": "This document could not be found in eFolder.",
+  "EFOLDER_INVALID_LINK_FORMAT": "This link format is invalid.",
+  "EFOLDER_CONNECTION_ERROR": "Error contacting VBMS, please click 'Retry'",
   "SELF_ASSIGNED_MAIL_TASK_CREATION_SUCCESS_TITLE": "You have successfully created a new %s mail task",
   "SELF_ASSIGNED_MAIL_TASK_CREATION_SUCCESS_MESSAGE": "This task will remain in your Queue. Assign or take action on this at any time through your actions dropdown.",
   "CASE_TIMELINE_HEADER": "Below is the history of this case.",

client/app/components/TextField.jsx

@@ -39,6 +39,7 @@ export const TextField = (props) => {
     inputStyling,
     inputProps,
     inputRef,
+    loading
   } = props;
 
   const textInputClass = className.
@@ -78,27 +79,37 @@ export const TextField = (props) => {
       {props.fixedInput ? (
         <p>{value}</p>
       ) : (
-        <input
-          ref={inputRef}
-          className={className}
-          name={name}
-          id={name}
-          onChange={handleChange}
-          onKeyPress={onKeyPress}
-          onBlur={handleBlur}
-          type={type}
-          defaultValue={defaultValue}
-          value={adjustedVal}
-          readOnly={readOnly}
-          placeholder={placeholder}
-          title={title}
-          maxLength={maxLength}
-          max={max}
-          autoComplete={autoComplete}
-          {...inputProps}
-          {...ariaLabelObj}
-          {...inputStyling}
-        />
+        <div className="input-container">
+          <input
+            ref={inputRef}
+            className={className}
+            name={name}
+            id={name}
+            onChange={handleChange}
+            onKeyPress={onKeyPress}
+            onBlur={handleBlur}
+            type={type}
+            defaultValue={defaultValue}
+            value={adjustedVal}
+            readOnly={readOnly}
+            placeholder={placeholder}
+            title={title}
+            maxLength={maxLength}
+            max={max}
+            autoComplete={autoComplete}
+            {...inputProps}
+            {...ariaLabelObj}
+            {...inputStyling}
+          />
+
+          { loading &&
+              <span className="cf-loading-icon-container">
+                <span className="cf-loading-icon-front">
+                  <span className="cf-loading-icon-back" />
+                </span>
+              </span>
+          }
+        </div>
       )}
 
       {validationError && (
@@ -181,6 +192,7 @@ TextField.propTypes = {
   optional: PropTypes.bool.isRequired,
   type: PropTypes.string,
   validationError: PropTypes.string,
+  loading: PropTypes.bool,
 
   /**
    * The value of the `input` element; required for a controlled component

client/app/queue/CreateMailTaskDialog.jsx

@@ -35,15 +35,16 @@ export class CreateMailTaskDialog extends React.Component {
     this.state = {
       selectedValue: null,
       instructions: '',
-      eFolderUrl: ''
+      eFolderUrl: '',
+      eFolderUrlValid: false
     };
   }
 
   validateForm = () => {
     const instructionsAndValue = () => this.state.selectedValue !== null && this.state.instructions !== '';
 
     if (this.isHearingRequestMailTask()) {
-      return instructionsAndValue() && this.state.eFolderUrl !== '';
+      return instructionsAndValue() && this.state.eFolderUrlValid === true;
     }
 
     return instructionsAndValue();
@@ -132,9 +133,9 @@ export class CreateMailTaskDialog extends React.Component {
         {
           this.isHearingRequestMailTask() &&
           <EfolderUrlField
+            appealId={this.props.appealId}
             requestType={this.state.selectedValue}
-            onChange={(value) => this.setState({ eFolderUrl: value })}
-            value={this.state.eFolderUrl}
+            onChange={(value, valid) => this.setState({ eFolderUrl: value, eFolderUrlValid: valid })}
           />
         }
         <TextareaField

client/app/queue/components/EfolderUrlField.jsx

@@ -1,37 +1,123 @@
-import React, {
-  useCallback,
-  useState,
-  useTransition
-} from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import PropTypes from 'prop-types';
+import { debounce } from 'lodash';
 
+import COPY from '../../../COPY';
+import Button from '../../components/Button';
 import TextField from '../../components/TextField';
+import ApiUtil from '../../util/ApiUtil';
 
 const EfolderUrlField = (props) => {
 
+  const [url, setUrl] = useState('');
+  const [valid, setValid] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+  const valueRef = useRef(url);
+
   const extractRequestType = () => (
     props.requestType.replace('Hearing', '').replace('RequestMailTask', '').
       toLowerCase()
   );
 
-  const handleChange = (value) => {
-    props?.onChange?.(value);
+  const efolderLinkRegexMatch = (inputValue) => {
+    return inputValue.match(/https:\/\/vefs-claimevidence.*\.bip\.va\.gov\/file\/\S{8}-\S{4}-\S{4}-\S{4}-\S{12}/)?.[0] === inputValue.split('?')[0]; // eslint-disable-line
+  };
+
+  const captureDocumentSeriesId = (validUrl) => {
+    return validUrl.match(/\S{8}-\S{4}-\S{4}-\S{4}-\S{12}/)?.[0];
+  };
+
+  const checkIfDocumentExists = async () => {
+    setLoading(true);
+    const seriesId = captureDocumentSeriesId(url);
+    const appealId = props.appealId;
+
+    let apiValidity = false;
+
+    await ApiUtil.get(`/appeals/${appealId}/document/${seriesId}`).
+      then((response) => {
+        if (response.body.document_presence === true) {
+          apiValidity = true;
+          setError('');
+        } else {
+          apiValidity = false;
+          setValid(false);
+          setError(COPY.EFOLDER_DOCUMENT_NOT_FOUND);
+        }
+      }).
+      catch(() => {
+        apiValidity = false;
+        setError(COPY.EFOLDER_CONNECTION_ERROR);
+      }).
+      finally(() => {
+        setLoading(false);
+      });
+
+    return apiValidity;
+  };
+
+  const handleDebounce = debounce(async (value) => {
+    if (valueRef.current === value) {
+      props?.onChange?.(url, valid);
+
+      return;
+    }
+
+    let newValidity;
+
+    if (efolderLinkRegexMatch(value)) {
+      newValidity = await checkIfDocumentExists();
+    } else {
+      newValidity = false;
+      setError(COPY.EFOLDER_INVALID_LINK_FORMAT);
+    }
+    valueRef.current = value;
+    props?.onChange?.(url, newValidity);
+    setValid(newValidity);
+  }, 500);
+
+  const retryOnClick = async () => {
+    const retryValidity = await checkIfDocumentExists();
+
+    setValid(retryValidity);
+    props?.onChange?.(url, retryValidity);
   };
 
+  useEffect(() => {
+    props?.onChange?.(url, false);
+    handleDebounce(url);
+
+    return () => {
+      handleDebounce.cancel();
+    };
+  }, [url, valid]);
+
   return <>
     <TextField
-      label={`Include Caseflow Reader document hyperlink to request a hearing ${extractRequestType()}`}
+      label={`Include eFolder document hyperlink to request a hearing ${extractRequestType()}`}
       name="eFolderUrlField"
-      value={props.value}
-      onChange={handleChange}
-      errorMessage={props.errorMessage}
+      value={url}
+      onChange={(newUrl) => setUrl(newUrl)}
+      errorMessage={error}
+      loading={loading}
     />
+
+    {
+      error === COPY.EFOLDER_CONNECTION_ERROR &&
+      <Button
+        onClick={retryOnClick}
+        linkStyling
+        classNames={['cf-push-right', 'cf-retry']}>
+          Retry
+      </Button>
+    }
   </>;
 };
 
 EfolderUrlField.propTypes = {
+  appealId: PropTypes.string.isRequired,
   requestType: PropTypes.string,
-  value: PropTypes.string,
   errorMessage: PropTypes.string
 };
 

client/app/styles/_commons.scss

@@ -508,6 +508,10 @@ svg title {
   table {
     margin: 0 0 2em;
   }
+
+  .cf-retry {
+    margin-top: -1.5em;
+  }
 }
 
 .cf-modal-close {
@@ -1254,6 +1258,46 @@ button {
   }
 }
 
+.input-container {
+  display: inline-block;
+  position: relative;
+  width: 100%;
+
+  .cf-loading-icon-container {
+    position: absolute;
+    padding-right: 23px;
+    top: 30%;
+    left: 90%;
+
+    .cf-loading-icon-back,
+    .cf-loading-icon-front {
+      &::after {
+        content: ' ';
+        // container for preloaded images was 0x0, but now...
+        // scss-lint:disable ImportantRule
+        width: 20px !important;
+        height: 20px !important;
+        // scss-lint:enable ImportantRule
+        box-sizing: border-box;
+        font-size: 99em;
+        position: absolute;
+        right: 0;
+        top: -0.1rem;
+        @include animation(spin 5s linear infinite);
+        background: url(#{$image-url}/icons/loading-pill.svg) center center no-repeat;
+      }
+    }
+
+    .cf-loading-icon-front {
+      &::after {
+        @include animation(backwardspin 5s linear infinite);
+        background: url(#{$image-url}/icons/loading-pill.svg) center center no-repeat;
+        opacity: 0.5;
+      }
+    }
+  }
+}
+
 .usa-accordion-button {
   background-image: url(#{$image-path}/minus.svg);