[99786] Appoint a Rep add submission types to search results

src/applications/representative-appoint/components/SearchResult.jsx

@@ -1,15 +1,18 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { setData } from '~/platform/forms-system/src/js/actions';
 import { VaButton } from '@department-of-veterans-affairs/component-library/dist/react-bindings';
 import { parsePhoneNumber } from '../utilities/parsePhoneNumber';
+import { getFormNumberFromEntity } from '../utilities/helpers';
+import useV2FeatureToggle from '../hooks/useV2FeatureVisibility';
 
 const SearchResult = ({
   representative,
   query,
   handleSelectRepresentative,
   loadingPOA,
+  userIsDigitalSubmitEligible,
 }) => {
   const { id } = representative.data;
   const {
@@ -26,6 +29,9 @@
     accreditedOrganizations,
   } = representative.data.attributes;
 
+  const formNumber = getFormNumberFromEntity(representative.data);
+  const v2IsEnabled = useV2FeatureToggle();
+
   const representativeName = name || fullName;
 
   const { contact, extension } = parsePhoneNumber(phone);
@@ -43,6 +49,13 @@
     (stateCode ? ` ${stateCode}` : '') +
     (zipCode ? ` ${zipCode}` : '');
 
+  const submissionTypeContent = v2IsEnabled &&
+    userIsDigitalSubmitEligible && (
+      <p data-testid="submission-methods">
+        Accepts VA Form {formNumber} online, by mail, and in person
+      </p>
+    );
+
   return (
     <va-card class="vads-u-padding--4 vads-u-margin-bottom--4">
       <div className="representative-result-card-content">
@@ -82,7 +95,7 @@
             </va-additional-info>
           </div>
         )}
-
+        {submissionTypeContent}
         <div className="representative-contact-section vads-u-margin-top--3">
           {addressExists && (
             <div className="address-link vads-u-display--flex">
@@ -181,6 +194,7 @@
   router: PropTypes.object,
   routes: PropTypes.array,
   stateCode: PropTypes.string,
+  userIsDigitalSubmitEligible: PropTypes.bool,
   zipCode: PropTypes.string,
 };
 

src/applications/representative-appoint/components/SelectAccreditedRepresentative.jsx

@@ -1,4 +1,4 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { connect } from 'react-redux';
 import { setData } from '~/platform/forms-system/src/js/actions';
 import PropTypes from 'prop-types';
@@ -204,6 +204,7 @@
             currentSelectedRep={currentSelectedRep.current}
             goToPath={goToPath}
             handleSelectRepresentative={handleSelectRepresentative}
+            userIsDigitalSubmitEligible={formData?.userIsDigitalSubmitEligible}
           />
         ))}
       <p className="vads-u-margin-y--4">

src/applications/representative-appoint/config/prefillTransformer.js

@@ -1,4 +1,4 @@
 import { preparerIsVeteran } from '../utilities/helpers';
 
 export default function prefillTransformer(formData) {
   const newFormData = {
@@ -70,5 +70,9 @@
     newFormData['Branch of Service'] = undefined;
   }
 
+  newFormData.userIsDigitalSubmitEligible =
+    formData?.identityValidation?.hasIcn &&
+    formData?.identityValidation?.hasParticipantId;
+
   return newFormData;
 }

src/applications/representative-appoint/tests/components/SearchResult.unit.spec.jsx

@@ -1,7 +1,9 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import { expect } from 'chai';
+import sinon from 'sinon';
 import { SearchResult } from '../../components/SearchResult';
+import * as useV2FeatureToggle from '../../hooks/useV2FeatureVisibility';
 
 describe('SearchResult Component', () => {
   it('evaluates addressExists correctly', () => {
@@ -16,6 +18,10 @@
       },
     };
 
+    const useV2FeatureVisibilityStub = sinon
+      .stub(useV2FeatureToggle, 'default')
+      .returns(false);
+
     const { container } = render(
       <SearchResult
         representative={representative}
@@ -28,6 +34,8 @@
     const addressAnchor = container.querySelector('.address-anchor');
     expect(addressAnchor).to.exist;
     expect(addressAnchor.textContent).to.contain('123 Main St');
+
+    useV2FeatureVisibilityStub.restore();
   });
 
   it('evaluates addressExists correctly when only city, stateCode, and zipCode exist', () => {
@@ -41,6 +49,10 @@
       },
     };
 
+    const useV2FeatureVisibilityStub = sinon
+      .stub(useV2FeatureToggle, 'default')
+      .returns(false);
+
     const { container } = render(
       <SearchResult
         representative={representative}
@@ -53,6 +65,8 @@
     const addressAnchor = container.querySelector('.address-anchor');
     expect(addressAnchor).to.exist;
     expect(addressAnchor.textContent).to.contain('Anytown, CT');
+
+    useV2FeatureVisibilityStub.restore();
   });
 
   it('includes the representative name in the select button text', () => {
@@ -69,6 +83,10 @@
       },
     };
 
+    const useV2FeatureVisibilityStub = sinon
+      .stub(useV2FeatureToggle, 'default')
+      .returns(false);
+
     const { container } = render(
       <SearchResult
         representative={representative}
@@ -83,5 +101,132 @@
     );
     expect(selectButton).to.exist;
     expect(selectButton.getAttribute('text')).to.contain('Robert Smith');
+
+    useV2FeatureVisibilityStub.restore();
+  });
+
+  context('when v2 is enabled', () => {
+    context('when the user is userIsDigitalSubmitEligible', () => {
+      it('displays submission methods', () => {
+        const representative = {
+          data: {
+            id: 1,
+            type: 'individual',
+            attributes: {
+              addressLine1: '123 Main St',
+              city: '',
+              stateCode: '',
+              zipCode: '',
+              fullName: 'Robert Smith',
+              individualType: 'representative',
+            },
+          },
+        };
+
+        const useV2FeatureVisibilityStub = sinon
+          .stub(useV2FeatureToggle, 'default')
+          .returns(true);
+
+        const { container } = render(
+          <SearchResult
+            representative={representative}
+            query={{}}
+            handleSelectRepresentative={() => {}}
+            loadingPOA={false}
+            userIsDigitalSubmitEligible
+          />,
+        );
+
+        const submissionMethods = container.querySelector(
+          '[data-testid="submission-methods"]',
+        );
+
+        expect(submissionMethods).to.exist;
+
+        useV2FeatureVisibilityStub.restore();
+      });
+    });
+
+    context('when the user is not userIsDigitalSubmitEligible', () => {
+      it('does not display submission methods', () => {
+        const representative = {
+          data: {
+            id: 1,
+            type: 'individual',
+            attributes: {
+              addressLine1: '123 Main St',
+              city: '',
+              stateCode: '',
+              zipCode: '',
+              fullName: 'Robert Smith',
+              individualType: 'representative',
+            },
+          },
+        };
+
+        const useV2FeatureVisibilityStub = sinon
+          .stub(useV2FeatureToggle, 'default')
+          .returns(true);
+
+        const { container } = render(
+          <SearchResult
+            representative={representative}
+            query={{}}
+            handleSelectRepresentative={() => {}}
+            loadingPOA={false}
+            userIsDigitalSubmitEligible={false}
+          />,
+        );
+
+        const submissionMethods = container.querySelector(
+          '[data-testid="submission-methods"]',
+        );
+
+        expect(submissionMethods).not.to.exist;
+
+        useV2FeatureVisibilityStub.restore();
+      });
+    });
+  });
+
+  context('when v2 is not enabled', () => {
+    it('does not display submission methods', () => {
+      const representative = {
+        data: {
+          id: 1,
+          type: 'individual',
+          attributes: {
+            addressLine1: '123 Main St',
+            city: '',
+            stateCode: '',
+            zipCode: '',
+            fullName: 'Robert Smith',
+            individualType: 'representative',
+          },
+        },
+      };
+
+      const useV2FeatureVisibilityStub = sinon
+        .stub(useV2FeatureToggle, 'default')
+        .returns(false);
+
+      const { container } = render(
+        <SearchResult
+          representative={representative}
+          query={{}}
+          handleSelectRepresentative={() => {}}
+          loadingPOA={false}
+          userIsDigitalSubmitEligible
+        />,
+      );
+
+      const submissionMethods = container.querySelector(
+        '[data-testid="submission-methods"]',
+      );
+
+      expect(submissionMethods).not.to.exist;
+
+      useV2FeatureVisibilityStub.restore();
+    });
   });
 });

src/applications/representative-appoint/tests/config/prefillTransformer.unit.spec.js

@@ -1,4 +1,4 @@
 import { expect } from 'chai';
 import prefill from '../fixtures/data/prefill.json';
 import prefillTransformer from '../../config/prefillTransformer';
 
@@ -120,4 +120,40 @@
       expect(result.veteranSocialSecurityNumber).to.be.undefined;
     });
   });
+
+  context('when the user does not have an ICN', () => {
+    it('sets userIsDigitalSubmitEligible to false', () => {
+      const data = {
+        ...prefill,
+        identityValidation: { hasIcn: false, hasParticipantId: true },
+      };
+
+      const result = prefillTransformer(data);
+
+      expect(result.userIsDigitalSubmitEligible).to.be.false;
+    });
+  });
+
+  context('when the user does not have a participant id', () => {
+    it('sets userIsDigitalSubmitEligible to false', () => {
+      const data = {
+        ...prefill,
+        identityValidation: { hasIcn: true, hasParticipantId: false },
+      };
+
+      const result = prefillTransformer(data);
+
+      expect(result.userIsDigitalSubmitEligible).to.be.false;
+    });
+  });
+
+  context('when the user has an ICN and a participant id', () => {
+    it('sets userIsDigitalSubmitEligible to true', () => {
+      const data = { ...prefill };
+
+      const result = prefillTransformer(data);
+
+      expect(result.userIsDigitalSubmitEligible).to.be.true;
+    });
+  });
 });

src/applications/representative-appoint/tests/utilities/getFormNumberFromEntity.unit.spec.jsx

@@ -0,0 +1,38 @@
+import { expect } from 'chai';
+
+import { getFormNumberFromEntity } from '../../utilities/helpers';
+
+describe('getFormNumberFromEntity', () => {
+  it('should return "21-22" when entity type is organization', () => {
+    const mockFormData = { type: 'organization' };
+    const result = getFormNumberFromEntity(mockFormData);
+    expect(result).to.equal('21-22');
+  });
+
+  it('should return "21-22a" when individual type is attorney', () => {
+    const mockFormData = {
+      type: 'individual',
+      attributes: { individualType: 'attorney' },
+    };
+    const result = getFormNumberFromEntity(mockFormData);
+    expect(result).to.equal('21-22a');
+  });
+
+  it('should return "21-22a" when individual type is claimsAgent', () => {
+    const mockFormData = {
+      type: 'individual',
+      attributes: { individualType: 'claimsAgent' },
+    };
+    const result = getFormNumberFromEntity(mockFormData);
+    expect(result).to.equal('21-22a');
+  });
+
+  it('should return "21-22" when individual type is representative', () => {
+    const mockFormData = {
+      type: 'individual',
+      attributes: { individualType: 'representative' },
+    };
+    const result = getFormNumberFromEntity(mockFormData);
+    expect(result).to.equal('21-22');
+  });
+});

src/applications/representative-appoint/utilities/helpers.js

@@ -1,4 +1,4 @@
 import React from 'react';
 import moment from 'moment';
 import { DATE_FORMAT } from '../definitions/constants';
 
@@ -26,7 +26,7 @@
 );
 
 export const formatDate = (date, format = DATE_FORMAT) => {
   const m = moment(date);
   return date && m.isValid() ? m.format(format) : 'Unknown';
 };
 
@@ -115,6 +115,14 @@
   return 'VSO Representative';
 };
 
+export const getFormNumberFromEntity = entity => {
+  const repType = getRepType(entity);
+
+  return ['Organization', 'VSO Representative'].includes(repType)
+    ? '21-22'
+    : '21-22a';
+};
+
 export const getFormNumber = formData => {
   const entity = formData['view:selectedRepresentative'];
   const entityType = entity?.type;
@@ -144,7 +152,7 @@
  * Takes representative object (rather than formData object)
  */
 export const isVSORepresentative = rep => {
   if (rep?.attributes?.accreditedOrganizations?.data?.length > 0) {
     return true;
   }