Skip to content

Commit 2d37191

Browse files
krishnan-aotpraju-aot
krishnan-aot
and
praju-aot
authored
ORV2-4368 Adding EGARMS error code to credit account screen (#2160)
Co-authored-by: Praveen Raju <80779423+praju-aot@users.noreply.github.com> Co-authored-by: praju-aot <praveen.raju@aot-technologies.com>
1 parent 729651c commit 2d37191

File tree

6 files changed

+295
-172
lines changed

6 files changed

+295
-172
lines changed

‎frontend/src/features/settings/components/creditAccount/AccountDetails.tsx‎

Lines changed: 152 additions & 124 deletions
Original file line numberDiff line numberDiff line change
@@ -21,14 +21,18 @@ import {
2121
CREDIT_ACCOUNT_USER_TYPE,
2222
CreditAccountMetadata,
2323
CreditAccountStatusType,
24+
EGARMS_ERROR_CODE_TYPE,
2425
UPDATE_STATUS_ACTIONS,
2526
UpdateStatusData,
27+
EGARMS_SUCCESS_CODE,
28+
EGARMS_ERROR_CODE,
2629
} from "../../types/creditAccount";
2730
import "./AccountDetails.scss";
2831
import { CloseCreditAccountModal } from "./CloseCreditAccountModal";
2932
import { HoldCreditAccountModal } from "./HoldCreditAccountModal";
3033
import { useQueryClient } from "@tanstack/react-query";
3134
import { VerifyCreditAccountModal } from "./VerifyCreditAccountModal";
35+
import { AccountDetailsError } from "./AccountDetailsError";
3236

3337
/**
3438
* Component that displays credit limit, available balance etc.
@@ -54,11 +58,27 @@ export const AccountDetails = ({
5458
const isMenuOpen = Boolean(anchorEl);
5559
const queryClient = useQueryClient();
5660

57-
const { data: creditAccountLimitData } = useGetCreditAccountLimitsQuery({
61+
const {
62+
data: creditAccountLimitData,
63+
isError: isCreditAccountLimitError,
64+
isPending: isCreditAccountLimitPending,
65+
} = useGetCreditAccountLimitsQuery({
5866
companyId,
5967
creditAccountId,
6068
});
6169

70+
const shouldDisplayEGARMSError =
71+
!isCreditAccountLimitPending &&
72+
(creditAccountLimitData?.egarmsReturnCode !== EGARMS_SUCCESS_CODE.I0001 ||
73+
isCreditAccountLimitError);
74+
75+
const shouldDisplayCreditLimit =
76+
!isCreditAccountLimitPending &&
77+
(creditAccountLimitData?.egarmsReturnCode === EGARMS_SUCCESS_CODE.I0001 ||
78+
creditAccountLimitData?.egarmsReturnCode === EGARMS_ERROR_CODE.E0003 ||
79+
creditAccountLimitData?.egarmsReturnCode === EGARMS_ERROR_CODE.E0004 ||
80+
creditAccountLimitData?.egarmsReturnCode === EGARMS_ERROR_CODE.E1739);
81+
6282
const { mutateAsync, isPending } = useUpdateCreditAccountStatusMutation();
6383

6484
const {
@@ -153,132 +173,140 @@ export const AccountDetails = ({
153173

154174
return (
155175
<div className="account-details">
156-
<Box className="account-details__table">
157-
<Box className="account-details__header">
158-
<Typography className="account-details__text account-details__text--white">
159-
Credit Account Details
160-
</Typography>
161-
162-
<RenderIf
163-
component={
164-
<Box>
165-
<Tooltip title="Actions">
166-
<Button
167-
className="account-details__button"
168-
id="actions-button"
169-
aria-label="Expand credit account details actions menu"
170-
aria-controls={isMenuOpen ? "actions menu" : undefined}
171-
aria-haspopup="true"
172-
aria-expanded={isMenuOpen ? "true" : undefined}
173-
onClick={handleMenuOpen}
174-
>
175-
<FontAwesomeIcon
176-
icon={faEllipsisV}
177-
className="button__icon"
178-
/>
179-
</Button>
180-
</Tooltip>
181-
<Menu
182-
className="account-details__menu"
183-
id="actions-menu"
184-
anchorEl={anchorEl}
185-
open={isMenuOpen}
186-
onClose={handleMenuClose}
187-
MenuListProps={{
188-
"aria-labelledby": "actions-button",
189-
}}
190-
>
191-
{!isCreditAccountVerified && (
192-
<MenuItem
193-
onClick={() => setShowVerifyCreditAccountModal(true)}
194-
disabled={isPendingVerifyCreditAccount}
195-
>
196-
Verify Account
197-
</MenuItem>
198-
)}
199-
{creditAccountStatus ===
200-
CREDIT_ACCOUNT_STATUS_TYPE.ACTIVE && (
201-
<MenuItem
202-
onClick={() => setShowHoldCreditAccountModal(true)}
203-
disabled={isPending}
204-
>
205-
Put On Hold
206-
</MenuItem>
207-
)}
208-
{creditAccountStatus ===
209-
CREDIT_ACCOUNT_STATUS_TYPE.ONHOLD && (
210-
<MenuItem
211-
onClick={() =>
212-
handleUpdateCreditAccountStatus({
213-
updateStatusAction:
214-
UPDATE_STATUS_ACTIONS.UNHOLD_CREDIT_ACCOUNT,
215-
})
216-
}
217-
disabled={isPending}
218-
>
219-
Remove Hold
220-
</MenuItem>
221-
)}
222-
{creditAccountStatus !==
223-
CREDIT_ACCOUNT_STATUS_TYPE.CLOSED && (
224-
<MenuItem
225-
onClick={() => setShowCloseCreditAccountModal(true)}
226-
>
227-
Close Credit Account
228-
</MenuItem>
229-
)}
230-
{creditAccountStatus ===
231-
CREDIT_ACCOUNT_STATUS_TYPE.CLOSED && (
232-
<MenuItem
233-
onClick={() =>
234-
handleUpdateCreditAccountStatus({
235-
updateStatusAction:
236-
UPDATE_STATUS_ACTIONS.REOPEN_CREDIT_ACCOUNT,
237-
})
238-
}
239-
disabled={isPending}
176+
{shouldDisplayEGARMSError && (
177+
<AccountDetailsError
178+
eGARMSReturnCode={
179+
creditAccountLimitData?.egarmsReturnCode as EGARMS_ERROR_CODE_TYPE
180+
}
181+
/>
182+
)}
183+
{shouldDisplayCreditLimit && (
184+
<Box className="account-details__table">
185+
<Box className="account-details__header">
186+
<Typography className="account-details__text account-details__text--white">
187+
Credit Account Details
188+
</Typography>
189+
<RenderIf
190+
component={
191+
<Box>
192+
<Tooltip title="Actions">
193+
<Button
194+
className="account-details__button"
195+
id="actions-button"
196+
aria-label="Expand credit account details actions menu"
197+
aria-controls={isMenuOpen ? "actions menu" : undefined}
198+
aria-haspopup="true"
199+
aria-expanded={isMenuOpen ? "true" : undefined}
200+
onClick={handleMenuOpen}
240201
>
241-
Reopen Credit Account
242-
</MenuItem>
243-
)}
244-
</Menu>
202+
<FontAwesomeIcon
203+
icon={faEllipsisV}
204+
className="button__icon"
205+
/>
206+
</Button>
207+
</Tooltip>
208+
<Menu
209+
className="account-details__menu"
210+
id="actions-menu"
211+
anchorEl={anchorEl}
212+
open={isMenuOpen}
213+
onClose={handleMenuClose}
214+
MenuListProps={{
215+
"aria-labelledby": "actions-button",
216+
}}
217+
>
218+
{!isCreditAccountVerified && (
219+
<MenuItem
220+
onClick={() => setShowVerifyCreditAccountModal(true)}
221+
disabled={isPendingVerifyCreditAccount}
222+
>
223+
Verify Account
224+
</MenuItem>
225+
)}
226+
{creditAccountStatus ===
227+
CREDIT_ACCOUNT_STATUS_TYPE.ACTIVE && (
228+
<MenuItem
229+
onClick={() => setShowHoldCreditAccountModal(true)}
230+
disabled={isPending}
231+
>
232+
Put On Hold
233+
</MenuItem>
234+
)}
235+
{creditAccountStatus ===
236+
CREDIT_ACCOUNT_STATUS_TYPE.ONHOLD && (
237+
<MenuItem
238+
onClick={() =>
239+
handleUpdateCreditAccountStatus({
240+
updateStatusAction:
241+
UPDATE_STATUS_ACTIONS.UNHOLD_CREDIT_ACCOUNT,
242+
})
243+
}
244+
disabled={isPending}
245+
>
246+
Remove Hold
247+
</MenuItem>
248+
)}
249+
{creditAccountStatus !==
250+
CREDIT_ACCOUNT_STATUS_TYPE.CLOSED && (
251+
<MenuItem
252+
onClick={() => setShowCloseCreditAccountModal(true)}
253+
>
254+
Close Credit Account
255+
</MenuItem>
256+
)}
257+
{creditAccountStatus ===
258+
CREDIT_ACCOUNT_STATUS_TYPE.CLOSED && (
259+
<MenuItem
260+
onClick={() =>
261+
handleUpdateCreditAccountStatus({
262+
updateStatusAction:
263+
UPDATE_STATUS_ACTIONS.REOPEN_CREDIT_ACCOUNT,
264+
})
265+
}
266+
disabled={isPending}
267+
>
268+
Reopen Credit Account
269+
</MenuItem>
270+
)}
271+
</Menu>
272+
</Box>
273+
}
274+
permissionMatrixKeys={{
275+
permissionMatrixFeatureKey: "MANAGE_SETTINGS",
276+
permissionMatrixFunctionKey:
277+
"PERFORM_CREDIT_ACCOUNT_DETAIL_ACTIONS_ACCOUNT_HOLDER",
278+
}}
279+
additionalConditionToCheck={() => isAccountHolder}
280+
/>
281+
</Box>
282+
<Box className="account-details__body">
283+
{creditAccountLimitData?.creditLimit !== undefined && (
284+
<Box className="account-details__row">
285+
<dt className="account-details__text">Credit Limit</dt>
286+
<dd className="account-details__text">
287+
{renderValue(creditAccountLimitData.creditLimit)}
288+
</dd>
245289
</Box>
246-
}
247-
permissionMatrixKeys={{
248-
permissionMatrixFeatureKey: "MANAGE_SETTINGS",
249-
permissionMatrixFunctionKey:
250-
"PERFORM_CREDIT_ACCOUNT_DETAIL_ACTIONS_ACCOUNT_HOLDER",
251-
}}
252-
additionalConditionToCheck={() => isAccountHolder}
253-
/>
254-
</Box>
255-
<Box className="account-details__body">
256-
{creditAccountLimitData?.creditLimit !== undefined && (
257-
<Box className="account-details__row">
258-
<dt className="account-details__text">Credit Limit</dt>
259-
<dd className="account-details__text">
260-
{renderValue(creditAccountLimitData.creditLimit)}
261-
</dd>
262-
</Box>
263-
)}
264-
{creditAccountLimitData?.creditBalance !== undefined && (
265-
<Box className="account-details__row">
266-
<dt className="account-details__text">Credit Balance</dt>
267-
<dd className="account-details__text">
268-
{renderValue(creditAccountLimitData.creditBalance)}
269-
</dd>
270-
</Box>
271-
)}
272-
{creditAccountLimitData?.availableCredit !== undefined && (
273-
<Box className="account-details__row">
274-
<dt className="account-details__text">Available Credit</dt>
275-
<dd className="account-details__text">
276-
{renderValue(creditAccountLimitData.availableCredit)}
277-
</dd>
278-
</Box>
279-
)}
290+
)}
291+
{creditAccountLimitData?.creditBalance !== undefined && (
292+
<Box className="account-details__row">
293+
<dt className="account-details__text">Credit Balance</dt>
294+
<dd className="account-details__text">
295+
{renderValue(creditAccountLimitData.creditBalance)}
296+
</dd>
297+
</Box>
298+
)}
299+
{creditAccountLimitData?.availableCredit !== undefined && (
300+
<Box className="account-details__row">
301+
<dt className="account-details__text">Available Credit</dt>
302+
<dd className="account-details__text">
303+
{renderValue(creditAccountLimitData.availableCredit)}
304+
</dd>
305+
</Box>
306+
)}
307+
</Box>
280308
</Box>
281-
</Box>
309+
)}
282310
{showVerifyCreditAccountModal && (
283311
<VerifyCreditAccountModal
284312
showModal={showVerifyCreditAccountModal}

‎frontend/src/features/settings/components/creditAccount/AccountDetailsError.scss‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
@import "../../../../themes/orbcStyles";
2+
3+
.account-details-error {
4+
&__container {
5+
border: 1px solid;
6+
border-radius: 0.25rem;
7+
border-color: $bc-messages-red-text;
8+
}
9+
10+
&__banner {
11+
width: 100%;
12+
background-color: $bc-messages-red-background;
13+
}
14+
15+
&__info {
16+
background-color: $bc-white;
17+
color: $bc-black;
18+
margin: 1.5rem;
19+
font-size: 1rem;
20+
}
21+
}

‎frontend/src/features/settings/components/creditAccount/AccountDetailsError.tsx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import { Box } from "@mui/material";
2+
import {
3+
EGARMS_CODE_ERROR_MESSAGES,
4+
EGARMS_ERROR_CODE_TYPE,
5+
} from "../../types/creditAccount";
6+
import "./AccountDetailsError.scss";
7+
import { ErrorAltBcGovBanner } from "../../../../common/components/banners/ErrorAltBcGovBanner";
8+
9+
/**
10+
* Component that displays eGARMS error status if credit limit cannot be displayed.
11+
*/
12+
export const AccountDetailsError = ({
13+
eGARMSReturnCode,
14+
}: {
15+
eGARMSReturnCode?: EGARMS_ERROR_CODE_TYPE;
16+
}) => {
17+
let headerErrorMessage;
18+
let errorMessage;
19+
if (eGARMSReturnCode && eGARMSReturnCode in EGARMS_CODE_ERROR_MESSAGES) {
20+
headerErrorMessage = `eGARMS return code ${eGARMSReturnCode}`;
21+
errorMessage = EGARMS_CODE_ERROR_MESSAGES[eGARMSReturnCode];
22+
} else {
23+
headerErrorMessage = "eGARMS error";
24+
errorMessage = EGARMS_CODE_ERROR_MESSAGES["DEFAULT"];
25+
}
26+
27+
return (
28+
<Box className="account-details-error__container">
29+
<div className="account-details-error__banner">
30+
<ErrorAltBcGovBanner msg={headerErrorMessage} />
31+
</div>
32+
<div className="account-details-error__info">
33+
<span>{errorMessage}</span>
34+
</div>
35+
</Box>
36+
);
37+
};

0 commit comments

Comments
 (0)