-
+
+ {CHECK_SPECIAL_ORDERS_TYPES(row.orderType) ? (
+ {SPECIAL_ORDERS_TYPES[`${row.orderType}`]}
+ ) : null}
+ {`${row.customer.last_name}, ${row.customer.first_name}`}
);
- }
- return null;
- },
- {
- id: 'lock',
- },
- ),
- createHeader('ID', 'id', { id: 'id' }),
- createHeader(
- 'Customer name',
- (row) => {
- return (
-
- {CHECK_SPECIAL_ORDERS_TYPES(row.orderType) ? (
- {SPECIAL_ORDERS_TYPES[`${row.orderType}`]}
- ) : null}
- {`${row.customer.last_name}, ${row.customer.first_name}`}
-
- );
- },
- {
- id: 'lastName',
+ },
+ {
+ id: 'lastName',
+ isFilterable: true,
+ exportValue: (row) => {
+ return `${row.customer.last_name}, ${row.customer.first_name}`;
+ },
+ },
+ ),
+ createHeader('DoD ID', 'customer.dodID', {
+ id: 'dodID',
isFilterable: true,
exportValue: (row) => {
- return `${row.customer.last_name}, ${row.customer.first_name}`;
+ return row.customer.dodID;
},
- },
- ),
- createHeader('DoD ID', 'customer.dodID', {
- id: 'dodID',
- isFilterable: true,
- exportValue: (row) => {
- return row.customer.dodID;
- },
- }),
- createHeader('EMPLID', 'customer.emplid', {
- id: 'emplid',
- isFilterable: true,
- }),
- createHeader(
- 'Status',
- (row) => {
- return row.status !== PAYMENT_REQUEST_STATUS.PAYMENT_REQUESTED ? paymentRequestStatusReadable(row.status) : null;
- },
- {
- id: 'status',
- disableSortBy: true,
- },
- ),
- createHeader(
- 'Age',
- (row) => {
- return formatAgeToDays(row.age);
- },
- { id: 'age' },
- ),
- createHeader(
- 'Submitted',
- (row) => {
- return formatDateFromIso(row.submittedAt, 'DD MMM YYYY');
- },
- {
- id: 'submittedAt',
+ }),
+ createHeader('EMPLID', 'customer.emplid', {
+ id: 'emplid',
isFilterable: true,
- // eslint-disable-next-line react/jsx-props-no-spreading
- Filter: (props) =>
,
- },
- ),
- createHeader('Move Code', 'locator', {
- id: 'locator',
- isFilterable: true,
- }),
- createHeader(
- 'Branch',
- (row) => {
- return serviceMemberAgencyLabel(row.customer.agency);
- },
- {
- id: 'branch',
- isFilterable: showBranchFilter,
- Filter: (props) => (
+ }),
+ createHeader(
+ 'Status',
+ (row) => {
+ return row.status !== PAYMENT_REQUEST_STATUS.PAYMENT_REQUESTED
+ ? paymentRequestStatusReadable(row.status)
+ : null;
+ },
+ {
+ id: 'status',
+ disableSortBy: true,
+ },
+ ),
+ createHeader(
+ 'Age',
+ (row) => {
+ return formatAgeToDays(row.age);
+ },
+ { id: 'age' },
+ ),
+ createHeader(
+ 'Submitted',
+ (row) => {
+ return formatDateFromIso(row.submittedAt, 'DD MMM YYYY');
+ },
+ {
+ id: 'submittedAt',
+ isFilterable: true,
// eslint-disable-next-line react/jsx-props-no-spreading
-
+ Filter: (props) =>
,
+ },
+ ),
+ createHeader('Move Code', 'locator', {
+ id: 'locator',
+ isFilterable: true,
+ }),
+ createHeader(
+ 'Branch',
+ (row) => {
+ return serviceMemberAgencyLabel(row.customer.agency);
+ },
+ {
+ id: 'branch',
+ isFilterable: showBranchFilter,
+ Filter: (props) => (
+ // eslint-disable-next-line react/jsx-props-no-spreading
+
+ ),
+ },
+ ),
+ createHeader('Origin GBLOC', 'originGBLOC', { disableSortBy: true }),
+ createHeader('Origin Duty Location', 'originDutyLocation.name', {
+ id: 'originDutyLocation',
+ isFilterable: true,
+ exportValue: (row) => {
+ return row.originDutyLocation?.name;
+ },
+ }),
+ ];
+
+ if (isQueueManagementEnabled)
+ cols.push(
+ createHeader(
+ 'Assigned',
+ (row) => {
+ return !row?.assignable ? (
+
{`${row.assignedTo?.lastName}, ${row.assignedTo?.firstName}`}
+ ) : (
+
+ {
+ handleQueueAssignment(row.moveID, e.target.value, roleTypes.TIO);
+ }}
+ title="Assigned dropdown"
+ >
+
+ {row.availableOfficeUsers.map(({ lastName, firstName, officeUserId }) => {
+ return (
+
+ );
+ })}
+
+
+ );
+ },
+ {
+ id: 'assignedTo',
+ isFilterable: true,
+ },
),
- },
- ),
- createHeader('Origin GBLOC', 'originGBLOC', { disableSortBy: true }),
- createHeader('Origin Duty Location', 'originDutyLocation.name', {
- id: 'originDutyLocation',
- isFilterable: true,
- exportValue: (row) => {
- return row.originDutyLocation?.name;
- },
- }),
-];
+ );
+
+ return cols;
+};
-const PaymentRequestQueue = () => {
+const PaymentRequestQueue = ({ isQueueManagementFFEnabled }) => {
const { queueType } = useParams();
const navigate = useNavigate();
const [search, setSearch] = useState({ moveCode: null, dodID: null, customerName: null, paymentRequestCode: null });
@@ -185,8 +228,14 @@ const PaymentRequestQueue = () => {
// eslint-disable-next-line camelcase
const showBranchFilter = office_user?.transportation_office?.gbloc !== GBLOC.USMC;
- const handleClick = (values) => {
- navigate(`/moves/${values.locator}/payment-requests`);
+ const handleClick = (values, e) => {
+ const assignedSelect = e.target.closest('div[data-label="assignedSelect"]');
+
+ if (assignedSelect) {
+ // do nothing when clicking on the assignedSelect column
+ } else {
+ navigate(`/moves/${values.locator}/payment-requests`);
+ }
};
if (isLoading) return
;
@@ -260,7 +309,7 @@ const PaymentRequestQueue = () => {
defaultSortedColumns={[{ id: 'age', desc: true }]}
disableMultiSort
disableSortBy={false}
- columns={columns(moveLockFlag, showBranchFilter)}
+ columns={columns(moveLockFlag, isQueueManagementFFEnabled, showBranchFilter)}
title="Payment requests"
handleClick={handleClick}
useQueries={usePaymentRequestQueueQueries}
diff --git a/src/pages/Office/PaymentRequestQueue/PaymentRequestQueue.module.scss b/src/pages/Office/PaymentRequestQueue/PaymentRequestQueue.module.scss
index 8aeef2d9a11..130ed0ae499 100644
--- a/src/pages/Office/PaymentRequestQueue/PaymentRequestQueue.module.scss
+++ b/src/pages/Office/PaymentRequestQueue/PaymentRequestQueue.module.scss
@@ -19,3 +19,7 @@
display: block;
color: red;
}
+
+.assignedToCol {
+ width: 10vw;
+}
diff --git a/src/pages/Office/PaymentRequestQueue/PaymentRequestQueue.test.jsx b/src/pages/Office/PaymentRequestQueue/PaymentRequestQueue.test.jsx
index f86a76369ee..19ec5edea22 100644
--- a/src/pages/Office/PaymentRequestQueue/PaymentRequestQueue.test.jsx
+++ b/src/pages/Office/PaymentRequestQueue/PaymentRequestQueue.test.jsx
@@ -37,6 +37,11 @@ jest.mock('hooks/queries', () => ({
data: [
{
age: 0.8477863,
+ assignedTo: {
+ firstName: 'Alice',
+ lastName: 'Bob',
+ officeUserId: '404011d1-052a-4c34-b2e0-71dd5082718a',
+ },
customer: {
agency: 'COAST_GUARD',
dodID: '3305957632',
@@ -62,8 +67,47 @@ jest.mock('hooks/queries', () => ({
lockExpiresAt: '2099-10-15T23:48:35.420Z',
lockedByOfficeUserID: '2744435d-7ba8-4cc5-bae5-f302c72c966e',
},
+ {
+ age: 0.8477863,
+ availableOfficeUsers: [
+ {
+ firstName: 'Alice',
+ lastName: 'Bob',
+ officeUserId: '404011d1-052a-4c34-b2e0-71dd5082718a',
+ },
+ ],
+ customer: {
+ agency: 'NAVY',
+ cacValidated: true,
+ eTag: 'MjAyNC0xMC0xMFQyMjoyNDo1My4xNjYxNjNa',
+ dodID: '1234567890',
+ edipi: '1234567',
+ email: '20241010222310-ae019978709c@example.com',
+ first_name: 'Ooga',
+ id: 'f23b5293-8ef0-453d-bd51-7c21d9730fcb',
+ last_name: 'Booga',
+ middle_name: '',
+ phone: '211-111-1111',
+ phoneIsPreferred: true,
+ secondaryTelephone: '',
+ suffix: '',
+ userID: 'e9d421af-b598-4ff1-b102-d8b14d414129',
+ },
+ departmentIndicator: 'COAST_GUARD',
+ id: '32b90458-2171-4451-bb0a-c5c0db897e34',
+ locator: '0OOGAB',
+ moveID: '8f29e53d-e816-4476-bfee-f38d07b94f2d',
+ originGBLOC: 'LKNQ',
+ status: 'PENDING',
+ submittedAt: '2020-10-17T23:48:35.420Z',
+ originDutyLocation: {
+ name: 'Scott AFB',
+ },
+ lockExpiresAt: '2099-10-15T23:48:35.420Z',
+ lockedByOfficeUserID: '2744435d-7ba8-4cc5-bae5-f302c72c966e',
+ },
],
- totalCount: 1,
+ totalCount: 2,
},
isLoading: false,
isError: false,
@@ -121,26 +165,62 @@ describe('PaymentRequestQueue', () => {
,
);
- expect(screen.queryByText('Payment requests (1)')).toBeInTheDocument();
+ expect(screen.queryByText('Payment requests (2)')).toBeInTheDocument();
});
- it('renders the table with data and expected values', () => {
+ it('renders the table with data and expected values without queue management ff', async () => {
reactRouterDom.useParams.mockReturnValue({ queueType: tioRoutes.PAYMENT_REQUEST_QUEUE });
+ const wrapper = mount(
+
+ {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+
+ ,
+ );
render(
,
);
- expect(screen.getByRole('cell', { name: 'Spacemen, Leo' })).toBeInTheDocument();
- expect(screen.getByRole('cell', { name: '3305957632' })).toBeInTheDocument();
- expect(screen.getByRole('cell', { name: '1253694' })).toBeInTheDocument();
- expect(screen.getByRole('cell', { name: 'Payment requested' })).toBeInTheDocument();
- expect(screen.getByRole('cell', { name: 'Less than 1 day' })).toBeInTheDocument();
- expect(screen.getByRole('cell', { name: '15 Oct 2020' })).toBeInTheDocument();
- expect(screen.getByRole('cell', { name: 'R993T7' })).toBeInTheDocument();
- expect(screen.getByRole('cell', { name: 'Coast Guard' })).toBeInTheDocument();
- expect(screen.getByRole('cell', { name: 'LKNQ' })).toBeInTheDocument();
- expect(screen.getByRole('cell', { name: 'Scott AFB' })).toBeInTheDocument();
+
+ const paymentRequests = wrapper.find('tbody tr');
+ const firstPaymentRequest = paymentRequests.at(0);
+
+ expect(firstPaymentRequest.find('td.lastName').text()).toBe('Spacemen, Leo');
+ expect(firstPaymentRequest.find('td.dodID').text()).toBe('3305957632');
+ expect(firstPaymentRequest.find('td.emplid').text()).toBe('1253694');
+ expect(firstPaymentRequest.find('td.status').text()).toBe('Payment requested');
+ expect(firstPaymentRequest.find('td.age').text()).toBe('Less than 1 day');
+ expect(firstPaymentRequest.find('td.submittedAt').text()).toBe('15 Oct 2020');
+ expect(firstPaymentRequest.find('td.locator').text()).toBe('R993T7');
+ expect(firstPaymentRequest.find('td.branch').text()).toBe('Coast Guard');
+ expect(firstPaymentRequest.find('td.originGBLOC').text()).toBe('LKNQ');
+ expect(firstPaymentRequest.find('td.originDutyLocation').text()).toBe('Scott AFB');
+
+ const secondPaymentRequest = paymentRequests.at(1);
+ expect(secondPaymentRequest.find('td.lastName').text()).toBe('Booga, Ooga');
+ expect(secondPaymentRequest.find('td.dodID').text()).toBe('1234567890');
+ expect(secondPaymentRequest.find('td.emplid').text()).toBe('');
+ expect(secondPaymentRequest.find('td.status').text()).toBe('Payment requested');
+ expect(secondPaymentRequest.find('td.age').text()).toBe('Less than 1 day');
+ expect(secondPaymentRequest.find('td.submittedAt').text()).toBe('17 Oct 2020');
+ expect(secondPaymentRequest.find('td.locator').text()).toBe('0OOGAB');
+ expect(secondPaymentRequest.find('td.branch').text()).toBe('Navy');
+ expect(secondPaymentRequest.find('td.originGBLOC').text()).toBe('LKNQ');
+ expect(secondPaymentRequest.find('td.originDutyLocation').text()).toBe('Scott AFB');
+ });
+
+ it('renders the table with data and expected values with queue management ff', async () => {
+ reactRouterDom.useParams.mockReturnValue({ queueType: tioRoutes.PAYMENT_REQUEST_QUEUE });
+ render(
+
+
+ ,
+ );
+
+ await waitFor(() => {
+ const assignedSelect = screen.queryAllByTestId('assigned-col')[0];
+ expect(assignedSelect).toBeInTheDocument();
+ });
});
it('applies the sort to the age column in descending direction', () => {
@@ -336,7 +416,7 @@ describe('PaymentRequestQueue', () => {
,
);
// expect Payment requested status to appear in the TIO queue
- expect(screen.queryByText('Payment requested')).toBeInTheDocument();
+ expect(screen.getAllByText('Payment requested')).toHaveLength(2);
// expect other statuses NOT to appear in the TIO queue
expect(screen.queryByText('Deprecated')).not.toBeInTheDocument();
expect(screen.queryByText('Error')).not.toBeInTheDocument();
@@ -363,7 +443,7 @@ describe('PaymentRequestQueue', () => {
,
);
await waitFor(() => {
- const lockIcon = screen.queryByTestId('lock-icon');
+ const lockIcon = screen.queryAllByTestId('lock-icon')[0];
expect(lockIcon).toBeInTheDocument();
});
});
@@ -381,4 +461,30 @@ describe('PaymentRequestQueue', () => {
expect(lockIcon).not.toBeInTheDocument();
});
});
+ it('renders assignedTo columns when the queue management flag is on', async () => {
+ reactRouterDom.useParams.mockReturnValue({ queueType: tioRoutes.PAYMENT_REQUEST_QUEUE });
+
+ render(
+
+
+ ,
+ );
+ await waitFor(() => {
+ const assignedToColumn = screen.queryByText('Assigned');
+ expect(assignedToColumn).toBeInTheDocument();
+ });
+ });
+ it('does NOT render assignedTo columns when the queue management flag is on', async () => {
+ reactRouterDom.useParams.mockReturnValue({ queueType: tioRoutes.PAYMENT_REQUEST_QUEUE });
+
+ render(
+
+
+ ,
+ );
+ await waitFor(() => {
+ const assignedToColumn = screen.queryByText('Assigned');
+ expect(assignedToColumn).not.toBeInTheDocument();
+ });
+ });
});
diff --git a/src/pages/Office/index.jsx b/src/pages/Office/index.jsx
index e6e14b521ef..65d51d03671 100644
--- a/src/pages/Office/index.jsx
+++ b/src/pages/Office/index.jsx
@@ -282,7 +282,7 @@ export class OfficeApp extends Component {
path="/invoicing/queue"
element={
-
+
}
/>
@@ -340,7 +340,7 @@ export class OfficeApp extends Component {
end
element={
-
+
}
/>
@@ -572,7 +572,13 @@ export class OfficeApp extends Component {
} />
{/* ROOT */}
- {activeRole === roleTypes.TIO &&
} />}
+ {activeRole === roleTypes.TIO && (
+
}
+ />
+ )}
{activeRole === roleTypes.TOO &&
} />}
{activeRole === roleTypes.HQ && !hqRoleFlag && (
} />
diff --git a/swagger-def/ghc.yaml b/swagger-def/ghc.yaml
index 5dddb4f87bc..10a610a0168 100644
--- a/swagger-def/ghc.yaml
+++ b/swagger-def/ghc.yaml
@@ -3581,7 +3581,7 @@ paths:
- in: query
name: sort
type: string
- enum: [lastName, locator, submittedAt, branch, status, dodID, emplid, age, originDutyLocation]
+ enum: [lastName, locator, submittedAt, branch, status, dodID, emplid, age, originDutyLocation, assignedTo]
description: field that results should be sorted by
- in: query
name: order
@@ -3622,6 +3622,11 @@ paths:
- in: query
name: originDutyLocation
type: string
+ - in: query
+ name: assignedTo
+ type: string
+ description: |
+ Used to illustrate which user is assigned to this payment request.
- in: query
name: status
type: array
@@ -6928,8 +6933,13 @@ definitions:
type: string
format: date-time
x-nullable: true
+ assignedTo:
+ $ref: '#/definitions/AssignedOfficeUser'
+ x-nullable: true
availableOfficeUsers:
$ref: '#/definitions/AvailableOfficeUsers'
+ assignable:
+ type: boolean
QueuePaymentRequests:
type: array
items:
diff --git a/swagger/ghc.yaml b/swagger/ghc.yaml
index 37d14b07416..2f9350b5897 100644
--- a/swagger/ghc.yaml
+++ b/swagger/ghc.yaml
@@ -3746,6 +3746,7 @@ paths:
- emplid
- age
- originDutyLocation
+ - assignedTo
description: field that results should be sorted by
- in: query
name: order
@@ -3790,6 +3791,11 @@ paths:
- in: query
name: originDutyLocation
type: string
+ - in: query
+ name: assignedTo
+ type: string
+ description: |
+ Used to illustrate which user is assigned to this payment request.
- in: query
name: status
type: array
@@ -7225,8 +7231,13 @@ definitions:
type: string
format: date-time
x-nullable: true
+ assignedTo:
+ $ref: '#/definitions/AssignedOfficeUser'
+ x-nullable: true
availableOfficeUsers:
$ref: '#/definitions/AvailableOfficeUsers'
+ assignable:
+ type: boolean
QueuePaymentRequests:
type: array
items: