fix(TAA-136): addresses type error, wires up now returning decision n…

…otes
zendesk · Feb 5, 2025 · c44cbc5 · c44cbc5
1 parent bd686d0
commit c44cbc5
Show file tree

Hide file tree

Showing 8 changed files with 107 additions and 26 deletions.
diff --git a/assets/approval-requests-bundle.js b/assets/approval-requests-bundle.js
diff --git a/src/modules/approval-requests/ApprovalRequestListPage.tsx b/src/modules/approval-requests/ApprovalRequestListPage.tsx
@@ -31,6 +31,7 @@ function ApprovalRequestListPage({
   const {
     approvalRequests,
     errorFetchingApprovalRequests: error,
+    approvalRequestStatus,
     setApprovalRequestStatus,
     isLoading,
   } = useSearchApprovalRequests();
@@ -60,6 +61,7 @@ function ApprovalRequestListPage({
     <Container>
       <XXL isBold>Approval requests</XXL>
       <ApprovalRequestListFilters
+        approvalRequestStatus={approvalRequestStatus}
         setApprovalRequestStatus={setApprovalRequestStatus}
         setSearchTerm={setSearchTerm}
       />

diff --git a/...modules/approval-requests/components/approval-request-list/ApprovalRequestListFilters.tsx b/...modules/approval-requests/components/approval-request-list/ApprovalRequestListFilters.tsx
@@ -42,14 +42,24 @@ const DropdownFilterField = styled(Field)`
   flex: 1;
 `;
 
+const ApprovalRequestStatusInputMap = {
+  any: "Any",
+  active: "Decision pending",
+  approved: "Approved",
+  rejected: "Denied",
+  withdrawn: "Withdrawn",
+};
+
 interface ApprovalRequestListFiltersProps {
+  approvalRequestStatus: ApprovalRequestDropdownStatus;
   setApprovalRequestStatus: Dispatch<
     SetStateAction<ApprovalRequestDropdownStatus>
   >;
   setSearchTerm: Dispatch<SetStateAction<string>>;
 }
 
 function ApprovalRequestListFilters({
+  approvalRequestStatus,
   setApprovalRequestStatus,
   setSearchTerm,
 }: ApprovalRequestListFiltersProps) {
@@ -91,8 +101,13 @@ function ApprovalRequestListFilters({
       </SearchField>
       <DropdownFilterField>
         <Label>Status:</Label>
-        <Combobox isEditable={false} onChange={handleChange}>
-          <Option value="any" isSelected label="Any" />
+        <Combobox
+          isEditable={false}
+          onChange={handleChange}
+          selectionValue={approvalRequestStatus}
+          inputValue={ApprovalRequestStatusInputMap[approvalRequestStatus]}
+        >
+          <Option value="any" label="Any" />
           <Option value="active" label="Decision pending" />
           {/* <Option value="clarification_requested" label="Info needed" /> */}
           <Option value="approved" label="Approved" />

diff --git a/src/modules/approval-requests/components/approval-request/ApprovalRequestDetails.tsx b/src/modules/approval-requests/components/approval-request/ApprovalRequestDetails.tsx
@@ -79,7 +79,31 @@ function ApprovalRequestDetails({
           </MD>
         </Col>
       </DetailRow>
-      {/* MKTODO: need to add decided at and decision notes when returning from the API */}
+      {approvalRequest.decided_at && (
+        <DetailRow>
+          <Col size={4}>
+            <FieldLabel>Decided</FieldLabel>
+          </Col>
+          <Col size={8}>
+            <MD>
+              {formatApprovalRequestDate(
+                approvalRequest.decided_at,
+                baseLocale
+              )}
+            </MD>
+          </Col>
+        </DetailRow>
+      )}
+      {approvalRequest.decision_notes.length > 0 && (
+        <DetailRow>
+          <Col size={4}>
+            <FieldLabel>Comment</FieldLabel>
+          </Col>
+          <Col size={8}>
+            <MD>{approvalRequest.decision_notes[0]}</MD>
+          </Col>
+        </DetailRow>
+      )}
     </Container>
   );
 }

diff --git a/src/modules/approval-requests/components/approval-request/ApprovalTicketDetails.tsx b/src/modules/approval-requests/components/approval-request/ApprovalTicketDetails.tsx
@@ -3,8 +3,8 @@ import styled from "styled-components";
 import { MD } from "@zendeskgarden/react-typography";
 import { getColorV8 } from "@zendeskgarden/react-theming";
 import { Grid } from "@zendeskgarden/react-grid";
-import type { MockTicket } from "../../types";
 import { Tag } from "@zendeskgarden/react-tags";
+import type { ApprovalRequestTicket } from "../../types";
 
 const TicketContainer = styled(Grid)`
   padding: ${(props) => props.theme.space.md}; /* 20px */
@@ -36,11 +36,16 @@ const CustomFieldsGrid = styled.div`
   }
 `;
 
+const NULL_VALUE_PLACEHOLDER = "-";
+
 function CustomFieldValue({
   value,
 }: {
   value: string | boolean | Array<string> | undefined;
 }) {
+  if (!value) {
+    return <MD>{NULL_VALUE_PLACEHOLDER}</MD>;
+  }
   if (Array.isArray(value)) {
     return (
       <MD>
@@ -61,7 +66,7 @@ function CustomFieldValue({
 }
 
 interface ApprovalTicketDetailsProps {
-  ticket: MockTicket;
+  ticket: ApprovalRequestTicket;
 }
 
 function ApprovalTicketDetails({ ticket }: ApprovalTicketDetailsProps) {