From 605bf45414e6ebbc4cdd921e87ad5d8309225c35 Mon Sep 17 00:00:00 2001
From: yu-zhen <wlphg010688@gmail.com>
Date: Thu, 5 Dec 2024 02:53:36 +0900
Subject: [PATCH] fix: information display on the application review page

---
 .../features/applications/components/ApplicationSteps.tsx  | 2 +-
 .../applications/components/ReviewApplicationDetails.tsx   | 7 +++++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/interface/src/features/applications/components/ApplicationSteps.tsx b/packages/interface/src/features/applications/components/ApplicationSteps.tsx
index b86cfaf3..62a9aa1f 100644
--- a/packages/interface/src/features/applications/components/ApplicationSteps.tsx
+++ b/packages/interface/src/features/applications/components/ApplicationSteps.tsx
@@ -22,7 +22,7 @@ const StepCategory = ({ title, progress }: IStepCategoryProps): JSX.Element => (
       <Image alt="circle-check-blue" height="22" src="/circle-check-blue.svg" width="22" />
     )}
 
-    {progress === EStepState.DONE && (
+    {progress >= EStepState.DONE && (
       <Image alt="circle-check-blue-filled" height="22" src="/circle-check-blue-filled.svg" width="22" />
     )}
 
diff --git a/packages/interface/src/features/applications/components/ReviewApplicationDetails.tsx b/packages/interface/src/features/applications/components/ReviewApplicationDetails.tsx
index c0fb1d05..d7977eaa 100644
--- a/packages/interface/src/features/applications/components/ReviewApplicationDetails.tsx
+++ b/packages/interface/src/features/applications/components/ReviewApplicationDetails.tsx
@@ -4,6 +4,7 @@ import { useFormContext } from "react-hook-form";
 
 import { Heading } from "~/components/ui/Heading";
 import { Tag } from "~/components/ui/Tag";
+import { impactCategories } from "~/config";
 
 import type { Application } from "../types";
 
@@ -22,7 +23,7 @@ const ValueField = ({ title, body = undefined, required = false }: IValueFieldPr
     <div className="flex flex-col gap-2 text-xs sm:text-sm">
       <b className={clsx(required && "after:text-blue-400 after:content-['*']")}>{title}</b>
 
-      <div className="text-light flex flex-wrap gap-2 text-gray-400">
+      <div className="text-light flex flex-wrap gap-2 break-all text-gray-400">
         {body === undefined && emptyPlaceholder}
 
         {Array.isArray(body) && body.length === 0 && emptyPlaceholder}
@@ -101,7 +102,9 @@ export const ReviewApplicationDetails = (): JSX.Element => {
           required
           body={application.impactCategory?.map((tag) => (
             <Tag key={tag} selected size="sm">
-              {tag}
+              {Object.keys(impactCategories).includes(tag) && (
+                <span>{impactCategories[tag as keyof typeof impactCategories].label}</span>
+              )}
             </Tag>
           ))}
           title="Impact categories"