ORV2-4031 BE: Interim GARMS/TPS Show Credit Account Information (#1966)

Author: praju-aot

frontend/src/common/authentication/PermissionMatrix.ts

@@ -230,6 +230,13 @@ const MANAGE_PROFILE = {
   VIEW_CREDIT_ACCOUNT_DETAILS_ACCOUNT_HOLDER: {
     allowedBCeIDRoles: [CA],
   },
+
+  /**
+   * View Credit Account info banner - Account holder
+   */
+  VIEW_CREDIT_ACCOUNT_INFO_BANNER_ACCOUNT_HOLDER: {
+    allowedBCeIDRoles: [CA],
+  },
 } as const;
 
 const MANAGE_SETTINGS = {

frontend/src/common/constants/bannerMessages.ts

@@ -49,6 +49,8 @@ export const BANNER_MESSAGES = {
     "This tool only calculates Bridge Formula, which is a mathematical equation that is used to calculate the maximum allowable weight allowed by permit for various axle groups in a combination. This tool is not confirming compliance with the CTR or CTPM.\n\nThe image on the right is for illustration purposes only.",
   NON_FINANCE_USER:
     "For Credit Accounts, please contact CVSE Revenue. ",
+  CREDIT_ACCOUNT_CVSE_INFO:
+    "Please contact CVSE Revenue. ",    
   CLIENT_NAME_MUST_BE_REGISTERED_OWNER:
     "Client name must be the registered owner (company or individual) of the vehicles being permitted.",
 };

frontend/src/features/settings/components/creditAccount/ActivityTable.tsx

@@ -12,12 +12,10 @@ import {
 } from "../../../../common/helpers/tableHelper";
 import { getDefaultRequiredVal } from "../../../../common/helpers/util";
 import { CompanyProfile } from "../../../manageProfile/types/manageProfile.d";
-import {
-  useGetCreditAccountHistoryQuery
-} from "../../hooks/creditAccount";
+import { useGetCreditAccountHistoryQuery } from "../../hooks/creditAccount";
 import {
   CREDIT_ACCOUNT_ACTIVITY_TYPE,
-  CreditAccountActivity
+  CreditAccountActivity,
 } from "../../types/creditAccount";
 import { CreditAccountActivityColumnsDefinition } from "../../types/CreditAccountActivityColumns";
 import "./ActivityTable.scss";
@@ -38,10 +36,7 @@ export const ActivityTable = ({
     isError: fetchCreditAccountError,
   } = useGetCreditAccountHistoryQuery({ companyId, creditAccountId });
 
-  const dataToBeShown = getDefaultRequiredVal(
-    [],
-    creditAccountActivities,
-  )
+  const dataToBeShown = getDefaultRequiredVal([], creditAccountActivities)
     .filter(
       (activity: CreditAccountActivity) =>
         activity.creditAccountActivityType !==
@@ -83,7 +78,7 @@ export const ActivityTable = ({
       () => (
         <Box className="toolbar__inner">
           <Typography variant="h3" className="activity-table__heading">
-            Hold / Close History
+            Account History
           </Typography>
         </Box>
       ),

frontend/src/features/settings/components/creditAccount/StatusChip.scss

@@ -1,9 +1,9 @@
 @import "../../../../themes/orbcStyles";
 
 .status-chip {
-  border-radius: .25rem;
+  border-radius: 0.25rem;
   font-size: 0.9rem;
-  padding: .25rem .75rem;
+  padding: 0.25rem 0.75rem;
   text-transform: capitalize;
 
   &--on-hold {
@@ -20,4 +20,9 @@
     background-color: $bc-messages-red-text;
     color: $white;
   }
-}
+
+  &--unverified {
+    background-color: $bc-messages-red-text;
+    color: $white;
+  }
+}

frontend/src/features/settings/components/creditAccount/StatusChip.tsx

@@ -6,12 +6,13 @@ import {
 import "./StatusChip.scss";
 
 interface StatusChipProps {
-  status: CreditAccountStatusType | "SUSPENDED";
+  status: CreditAccountStatusType | "SUSPENDED" | "UNVERIFIED";
 }
 
 export const StatusChip = ({ status }: StatusChipProps) => {
   const classModifier =
     status !== "SUSPENDED" &&
+    status !== "UNVERIFIED" &&
     CreditAccountStatusDisplayValues[status].toLowerCase().replace(" ", "-");
 
   if (status === CREDIT_ACCOUNT_STATUS_TYPE.ACTIVE) {
@@ -24,6 +25,14 @@ export const StatusChip = ({ status }: StatusChipProps) => {
       </span>
     );
   }
+  if (status === "UNVERIFIED") {
+    return (
+      <span role="status" className="status-chip status-chip--unverified">
+        Unverified
+      </span>
+    );
+  }
+
   return (
     <span role="status" className={`status-chip status-chip--${classModifier}`}>
       {CreditAccountStatusDisplayValues[status]}

frontend/src/features/settings/pages/CreditAccount.scss

@@ -37,6 +37,19 @@
       &__user-designation {
         text-transform: capitalize;
       }
+
+      &__info-banner {
+        padding-top: 1.5rem;
+        padding-bottom: .75rem;
+        &__banner {
+          font-weight: normal;
+        }
+      
+        &__contact {
+          font-weight: bold;
+          margin-left: 0.25rem;
+        }
+      }      
     }
   }
 }

frontend/src/features/settings/pages/ViewCreditAccount.tsx

@@ -13,6 +13,12 @@ import {
   CreditAccountMetadata,
 } from "../types/creditAccount";
 import "./CreditAccount.scss";
+import { InfoBcGovBanner } from "../../../common/components/banners/InfoBcGovBanner";
+import { BANNER_MESSAGES } from "../../../common/constants/bannerMessages";
+import {
+  CVSE_REVENUE_EMAIL,
+  CVSE_REVENUE_PHONE,
+} from "../../../common/constants/constants";
 
 export const ViewCreditAccount = ({
   companyId,
@@ -43,12 +49,41 @@ export const ViewCreditAccount = ({
                 <Typography variant="h3" className="overview__title">
                   Credit Account No: {creditAccount.creditAccountNumber}
                 </Typography>
-
+                {!creditAccount?.isVerified && (
+                  <StatusChip status="UNVERIFIED" />
+                )}
                 <StatusChip status={creditAccount.creditAccountStatusType} />
               </Box>
               <Typography className="overview__user-designation">
                 {isAccountHolder ? "Account Holder" : "Account User"}
               </Typography>
+              <RenderIf
+                component={
+                  <Box className="overview__info-banner">
+                    <InfoBcGovBanner
+                      msg={
+                        <div className="overview__info-banner__banner">
+                          {BANNER_MESSAGES.CREDIT_ACCOUNT_CVSE_INFO}
+                          Phone:
+                          <span className="overview__info-banner__contact">
+                            {CVSE_REVENUE_PHONE}{" "}
+                          </span>
+                          Email:
+                          <span className="overview__info-banner__contact">
+                            {CVSE_REVENUE_EMAIL}
+                          </span>
+                        </div>
+                      }
+                    />
+                  </Box>
+                }
+                permissionMatrixKeys={{
+                  permissionMatrixFeatureKey: "MANAGE_PROFILE",
+                  permissionMatrixFunctionKey:
+                    "VIEW_CREDIT_ACCOUNT_INFO_BANNER_ACCOUNT_HOLDER",
+                }}
+                additionalConditionToCheck={() => isAccountHolder}
+              />
             </Box>
             <RenderIf
               component={
@@ -105,9 +140,8 @@ export const ViewCreditAccount = ({
               additionalConditionToCheck={() =>
                 fromTab === "MANAGE_SETTINGS" ||
                 (fromTab === "MANAGE_PROFILE" &&
-                  creditAccount?.creditAccountStatusType !==
-                    CREDIT_ACCOUNT_STATUS_TYPE.CLOSED &&
-                  isAccountHolder)
+                  isAccountHolder &&
+                  creditAccount?.isVerified)
               }
             />
           </Box>
@@ -139,7 +173,8 @@ export const ViewCreditAccount = ({
               fromTab === "MANAGE_SETTINGS" ||
               (fromTab === "MANAGE_PROFILE" &&
                 creditAccount.creditAccountStatusType ===
-                  CREDIT_ACCOUNT_STATUS_TYPE.ACTIVE)
+                  CREDIT_ACCOUNT_STATUS_TYPE.ACTIVE &&
+                creditAccount?.isVerified)
             }
           />
         </Box>

frontend/src/features/settings/types/creditAccount.ts

@@ -17,6 +17,7 @@ export interface CreditAccountData {
   availableCredit: string;
   creditLimit: CreditAccountLimitType;
   creditBalance: number;
+  isVerified: boolean;
 }
 
 export interface CreditAccountUser

vehicles/src/modules/credit-account/credit-account.controller.ts

@@ -30,6 +30,7 @@ import {
 } from '../../common/enum/user-role.enum';
 import { ReadCreditAccountMetadataDto } from './dto/response/read-credit-account-metadata.dto';
 import { ReadCreditAccountLimitDto } from './dto/response/read-credit-account-limit.dto';
+import { UpdateCreditAccountVerificationDto } from './dto/request/update-credit-account-verification.dto';
 
 @ApiBearerAuth()
 @ApiTags('Credit Accounts')
@@ -192,6 +193,8 @@ export class CreditAccountController {
       IDIRUserRole.FINANCE,
       IDIRUserRole.HQ_ADMINISTRATOR,
       IDIRUserRole.SYSTEM_ADMINISTRATOR,
+      IDIRUserRole.PPC_CLERK,
+      IDIRUserRole.CTPO,
     ],
   })
   async getCreditAccountLimit(
@@ -277,4 +280,36 @@ export class CreditAccountController {
       },
     );
   }
+
+  /**
+   * Verifies a credit account.
+   *
+   * @param {string} companyId - The companyId path parameter.
+   * @param {string} creditAccountId - The creditAccountId path parameter.
+   * @param {string} comment - The comment to update during verification.
+   * @returns {Promise<ReadCreditAccountDto>} The result of the verification operation.
+   */
+  @ApiOperation({
+    summary: 'Verifies a credit account.',
+    description:
+      'Verifies the status of a credit account user, enforcing authentication.',
+  })
+  @ApiOkResponse({
+    description: 'The verified credit account status details.',
+    type: ReadCreditAccountDto,
+  })
+  @Put(':creditAccountId/verification')
+  @Permissions({ allowedIdirRoles: [IDIRUserRole.FINANCE] })
+  async verifyCreditAccount(
+    @Req() request: Request,
+    @Param() { companyId, creditAccountId }: CreditAccountIdPathParamDto,
+    @Body() { comment }: UpdateCreditAccountVerificationDto,
+  ): Promise<ReadCreditAccountDto> {
+    const currentUser = request.user as IUserJWT;
+    return await this.creditAccountService.verifyCreditAccount(currentUser, {
+      creditAccountHolderId: companyId,
+      creditAccountId,
+      comment: comment,
+    });
+  }
 }