5430 other petitioners ui

web-api/storage/fixtures/seed/101-20.json

@@ -24,6 +24,99 @@
       "countryType": "domestic",
       "email": "petitioner"
     },
+    "otherPetitioners": [
+      {
+        "city": "Philadelphia",
+        "phone": "1234567890",
+        "serviceIndicator": "None",
+        "address1": "453 Electric Ave",
+        "postalCode": "99999",
+        "name": "Rachael Ray",
+        "additionalName": "Rachael Ray, Petitioner",
+        "state": "PA",
+        "countryType": "domestic",
+        "email": "mayor@flavortown.gov",
+        "title": "Petitioner"
+      },
+      {
+        "city": "Philadelphia",
+        "phone": "1234567890",
+        "serviceIndicator": "None",
+        "address1": "453 Electric Ave",
+        "postalCode": "99999",
+        "name": "Guy Fieri",
+        "additionalName": "Guy Fieri",
+        "state": "PA",
+        "countryType": "domestic",
+        "email": "mayor@flavortown.gov",
+        "title": "Petitioner"
+      },
+      {
+        "city": "Philadelphia",
+        "phone": "1234567890",
+        "serviceIndicator": "None",
+        "address1": "453 Electric Ave",
+        "postalCode": "99999",
+        "name": "Bobby Flay",
+        "additionalName": "Bobby Flay",
+        "state": "PA",
+        "countryType": "domestic",
+        "email": "mayor@flavortown.gov",
+        "title": "Petitioner"
+      },
+      {
+        "city": "Philadelphia",
+        "phone": "1234567890",
+        "serviceIndicator": "None",
+        "address1": "453 Electric Ave",
+        "postalCode": "99999",
+        "name": "Kid Rock",
+        "additionalName": "Kid Rock",
+        "state": "PA",
+        "countryType": "domestic",
+        "email": "mayor@flavortown.gov",
+        "title": "Petitioner"
+      },
+      {
+        "city": "Philadelphia",
+        "phone": "1234567890",
+        "serviceIndicator": "None",
+        "address1": "453 Electric Ave",
+        "postalCode": "99999",
+        "name": "Bill Burr",
+        "additionalName": "Bill Burr",
+        "state": "PA",
+        "countryType": "domestic",
+        "email": "mayor@flavortown.gov",
+        "title": "Petitioner"
+      },
+      {
+        "city": "Philadelphia",
+        "phone": "1234567890",
+        "serviceIndicator": "None",
+        "address1": "453 Electric Ave",
+        "postalCode": "99999",
+        "name": "Bill Burr",
+        "additionalName": "Bill Burr",
+        "state": "PA",
+        "countryType": "domestic",
+        "email": "mayor@flavortown.gov",
+        "title": "Petitioner"
+      },
+      {
+        "city": "Philadelphia",
+        "phone": "1234567890",
+        "serviceIndicator": "None",
+        "address1": "453 Electric Ave",
+        "postalCode": "99999",
+        "name": "Bill Burr",
+        "additionalName": "Bill Burr",
+        "state": "PA",
+        "countryType": "domestic",
+        "email": "mayor@flavortown.gov",
+        "title": "Petitioner"
+      }
+    ],
     "createdAt": "2020-01-02T16:05:45.978Z",
     "noticeOfAttachments": false,
     "trialTime": "10:00",

web-client/src/app.jsx

@@ -11,6 +11,7 @@ import {
   router,
 } from './router';
 
+import { faAddressCard } from '@fortawesome/free-regular-svg-icons/faAddressCard';
 import { faArrowAltCircleLeft as faArrowAltCircleLeftRegular } from '@fortawesome/free-regular-svg-icons/faArrowAltCircleLeft';
 import { faCheckCircle as faCheckCircleRegular } from '@fortawesome/free-regular-svg-icons/faCheckCircle';
 import { faClock } from '@fortawesome/free-regular-svg-icons/faClock';
@@ -149,6 +150,7 @@ const app = {
     library.add(
       faArrowAltCircleLeftRegular,
       faArrowAltCircleLeftSolid,
+      faAddressCard,
       faCalculator,
       faCalendarAlt,
       faCalendarCheck,

web-client/src/presenter/actions/CaseDetail/toggleShowAdditionalPetitionersAction.js

@@ -0,0 +1,15 @@
+import { state } from 'cerebral';
+
+/**
+ * sets state.showingAdditionalPetitioners its negated stored value (default false)
+ *
+ * @param {object} providers the providers object
+ * @param {object} providers.get the cerebral get function
+ * @param {Function} providers.store the cerebral store function
+ */
+export const toggleShowAdditionalPetitionersAction = ({ get, store }) => {
+  const showingAdditionalPetitioners =
+    get(state.showingAdditionalPetitioners) || false;
+
+  store.set(state.showingAdditionalPetitioners, !showingAdditionalPetitioners);
+};

web-client/src/presenter/actions/CaseDetail/toggleShowAdditionalPetitionersAction.test.js

@@ -0,0 +1,30 @@
+import { runAction } from 'cerebral/test';
+import { toggleShowAdditionalPetitionersAction } from './toggleShowAdditionalPetitionersAction';
+
+describe('toggleShowAdditionalPetitionersAction', () => {
+  it('should default to true for the first run', async () => {
+    const result = await runAction(toggleShowAdditionalPetitionersAction);
+
+    expect(result.state.showingAdditionalPetitioners).toEqual(true);
+  });
+
+  it('should be true if the state value is false', async () => {
+    const result = await runAction(toggleShowAdditionalPetitionersAction, {
+      state: {
+        showingAdditionalPetitioners: false,
+      },
+    });
+
+    expect(result.state.showingAdditionalPetitioners).toEqual(true);
+  });
+
+  it('should be false if the state value is true', async () => {
+    const result = await runAction(toggleShowAdditionalPetitionersAction, {
+      state: {
+        showingAdditionalPetitioners: true,
+      },
+    });
+
+    expect(result.state.showingAdditionalPetitioners).toEqual(false);
+  });
+});

web-client/src/presenter/computeds/caseInformationHelper.js

@@ -14,11 +14,24 @@ export const caseInformationHelper = get => {
     !!caseDetail.irsPractitioners.length;
   const showAddCounsel = permissions.ASSOCIATE_USER_WITH_CASE;
   const showSealCaseButton = permissions.SEAL_CASE && !caseDetail.isSealed;
+  const showingAdditionalPetitioners =
+    get(state.showingAdditionalPetitioners) || false;
+  const toggleAdditionalPetitionersDisplay = showingAdditionalPetitioners
+    ? 'Hide'
+    : 'View';
+  const otherPetitioners = [...(caseDetail.otherPetitioners || [])];
+  const showOtherPetitioners = !!otherPetitioners.length;
+  const formattedOtherPetitioners = showingAdditionalPetitioners
+    ? otherPetitioners || []
+    : otherPetitioners.slice(0, 4);
 
   return {
+    formattedOtherPetitioners,
     showAddCounsel,
     showEditIrsPractitioners: showEditIrsPractitionersButton,
     showEditPrivatePractitioners: showEditPrivatePractitionersButton,
+    showOtherPetitioners,
     showSealCaseButton,
+    toggleAdditionalPetitionersDisplay,
   };
 };

web-client/src/presenter/computeds/caseInformationHelper.test.js

@@ -138,4 +138,96 @@ describe('case information helper', () => {
     });
     expect(result.showSealCaseButton).toBeFalsy();
   });
+
+  describe('other petitioners', () => {
+    let baseState;
+
+    beforeEach(() => {
+      const user = {
+        role: ROLES.docketClerk, // has SEAL_CASE permission
+        userId: '789',
+      };
+
+      baseState = {
+        ...getBaseState(user),
+        caseDetail: {},
+        form: {},
+      };
+    });
+
+    it('shows "Hide" display if showingAdditionalPetitioners is true', () => {
+      const result = runCompute(caseInformationHelper, {
+        state: {
+          ...baseState,
+          showingAdditionalPetitioners: true,
+        },
+      });
+
+      expect(result.toggleAdditionalPetitionersDisplay).toEqual('Hide');
+    });
+
+    it('shows "View" display if showingAdditionalPetitioners is false', () => {
+      const result = runCompute(caseInformationHelper, {
+        state: {
+          ...baseState,
+          showingAdditionalPetitioners: false,
+        },
+      });
+
+      expect(result.toggleAdditionalPetitionersDisplay).toEqual('View');
+    });
+
+    it('does not paginate (or show) other petitioners if it is non-existent', () => {
+      const result = runCompute(caseInformationHelper, {
+        state: {
+          ...baseState,
+        },
+      });
+
+      expect(result.formattedOtherPetitioners).toEqual([]);
+      expect(result.showOtherPetitioners).toEqual(false);
+    });
+
+    it('paginates if showingAdditionalPetitioners is false', () => {
+      const result = runCompute(caseInformationHelper, {
+        state: {
+          ...baseState,
+          caseDetail: {
+            otherPetitioners: [
+              { a: '1' },
+              { a: '1' },
+              { a: '1' },
+              { a: '1' },
+              { a: '1' },
+            ],
+          },
+          showingAdditionalPetitioners: false,
+        },
+      });
+
+      expect(result.formattedOtherPetitioners.length).toEqual(4);
+      expect(result.showOtherPetitioners).toEqual(true);
+    });
+
+    it('does not paginate (shows all) if showingAdditionalPetitioners is true', () => {
+      const result = runCompute(caseInformationHelper, {
+        state: {
+          ...baseState,
+          caseDetail: {
+            otherPetitioners: [
+              { a: '1' },
+              { a: '1' },
+              { a: '1' },
+              { a: '1' },
+              { a: '1' },
+            ],
+          },
+          showingAdditionalPetitioners: true,
+        },
+      });
+
+      expect(result.formattedOtherPetitioners.length).toEqual(5);
+      expect(result.showOtherPetitioners).toEqual(true);
+    });
+  });
 });

web-client/src/presenter/presenter.js

@@ -317,6 +317,7 @@ import { toggleCaseDifferenceSequence } from './sequences/toggleCaseDifferenceSe
 import { toggleMenuSequence } from './sequences/toggleMenuSequence';
 import { toggleMobileDocketSortSequence } from './sequences/toggleMobileDocketSortSequence';
 import { toggleMobileMenuSequence } from './sequences/toggleMobileMenuSequence';
+import { toggleShowAdditionalPetitionersSequence } from './sequences/toggleShowAdditionalPetitionersSequence';
 import { toggleUsaBannerDetailsSequence } from './sequences/toggleUsaBannerDetailsSequence';
 import { toggleWorkingCopySortSequence } from './sequences/toggleWorkingCopySortSequence';
 import { unauthorizedErrorSequence } from './sequences/unauthorizedErrorSequence';
@@ -738,6 +739,7 @@ export const presenter = {
     toggleMenuSequence,
     toggleMobileDocketSortSequence,
     toggleMobileMenuSequence,
+    toggleShowAdditionalPetitionersSequence,
     toggleUsaBannerDetailsSequence,
     toggleWorkingCopySortSequence,
     unauthorizedErrorSequence,

web-client/src/presenter/sequences/toggleShowAdditionalPetitionersSequence.js

@@ -0,0 +1,5 @@
+import { toggleShowAdditionalPetitionersAction } from '../actions/CaseDetail/toggleShowAdditionalPetitionersAction';
+
+export const toggleShowAdditionalPetitionersSequence = [
+  toggleShowAdditionalPetitionersAction,
+];

web-client/src/styles/cards.scss

@@ -147,7 +147,8 @@
   }
 
   @media only screen and (max-width: $medium-screen) {
-    .counsel-information {
+    .counsel-information,
+    .other-petitioners-information {
       margin-bottom: 2rem;
     }
 

web-client/src/views/CaseDetail/AddressDisplay.jsx

@@ -0,0 +1,46 @@
+import { connect } from '@cerebral/react';
+import { props, state } from 'cerebral';
+import React from 'react';
+
+export const AddressDisplay = connect(
+  {
+    constants: state.constants,
+    contact: props.contact,
+    nameOverride: props.nameOverride || {},
+  },
+  function AddressDisplay({ constants, contact, nameOverride }) {
+    return (
+      <>
+        <p className="margin-top-0 address-name">
+          {nameOverride || contact.name}{' '}
+          {contact.barNumber && `(${contact.barNumber})`}
+          {contact.inCareOf && (
+            <span>
+              <br />
+              c/o {contact.inCareOf}
+            </span>
+          )}
+        </p>
+        <p>
+          <span className="address-line">{contact.address1}</span>
+          {contact.address2 && (
+            <span className="address-line">{contact.address2}</span>
+          )}
+          {contact.address3 && (
+            <span className="address-line">{contact.address3}</span>
+          )}
+          <span className="address-line">
+            {contact.city && `${contact.city}, `}
+            {contact.state} {contact.postalCode}
+          </span>
+          {contact.countryType === constants.COUNTRY_TYPES.INTERNATIONAL && (
+            <span className="address-line">{contact.country}</span>
+          )}
+          {contact.phone && (
+            <span className="address-line margin-top-1">{contact.phone}</span>
+          )}
+        </p>
+      </>
+    );
+  },
+);