From 4af490d992eb47b3a92708b5561f2ff4469482f2 Mon Sep 17 00:00:00 2001
From: Sami Lafrance <sami.lepays@gmail.com>
Date: Tue, 13 Aug 2024 09:54:31 +0200
Subject: [PATCH] fix(ds): translate

---
 ...saction.utils.ts => card-transaction.utils.tsx} | 14 +++++++++-----
 .../translations/card-transaction.en.json          |  7 +++++++
 .../translations/card-transaction.translate.ts     |  5 +++++
 shared/translation/en.ts                           |  4 ++++
 4 files changed, 25 insertions(+), 5 deletions(-)
 rename design-system/molecules/cards/card-transaction/{card-transaction.utils.ts => card-transaction.utils.tsx} (62%)
 create mode 100644 design-system/molecules/cards/card-transaction/translations/card-transaction.en.json
 create mode 100644 design-system/molecules/cards/card-transaction/translations/card-transaction.translate.ts

diff --git a/design-system/molecules/cards/card-transaction/card-transaction.utils.ts b/design-system/molecules/cards/card-transaction/card-transaction.utils.tsx
similarity index 62%
rename from design-system/molecules/cards/card-transaction/card-transaction.utils.ts
rename to design-system/molecules/cards/card-transaction/card-transaction.utils.tsx
index 523c81871..51a80828c 100644
--- a/design-system/molecules/cards/card-transaction/card-transaction.utils.ts
+++ b/design-system/molecules/cards/card-transaction/card-transaction.utils.tsx
@@ -1,32 +1,36 @@
+import { ReactNode } from "react";
+
 import { IconPort } from "@/design-system/atoms/icon";
 
+import { Translate } from "@/shared/translation/components/translate/translate";
+
 import { CardTransactionStatus } from "./card-transaction.types";
 
 export function getComponentsVariants(status: CardTransactionStatus): {
   icon: IconPort;
-  statusName: string;
+  statusName: ReactNode;
 } {
-  const map: Record<CardTransactionStatus, { icon: IconPort; statusName: string }> = {
+  const map: Record<CardTransactionStatus, { icon: IconPort; statusName: ReactNode }> = {
     granted: {
       icon: {
         name: "ri-arrow-right-line",
         className: "text-label-blue",
       },
-      statusName: "Granted",
+      statusName: <Translate token="cards:cardTransaction.status.granted" />,
     },
     allocated: {
       icon: {
         name: "ri-arrow-down-line",
         className: "text-label-green",
       },
-      statusName: "Allocated",
+      statusName: <Translate token="cards:cardTransaction.status.allocated" />,
     },
     returned: {
       icon: {
         name: "ri-arrow-turn-forward-line",
         className: "text-label-red",
       },
-      statusName: "Returned",
+      statusName: <Translate token="cards:cardTransaction.status.returned" />,
     },
   };
 
diff --git a/design-system/molecules/cards/card-transaction/translations/card-transaction.en.json b/design-system/molecules/cards/card-transaction/translations/card-transaction.en.json
new file mode 100644
index 000000000..678a84b22
--- /dev/null
+++ b/design-system/molecules/cards/card-transaction/translations/card-transaction.en.json
@@ -0,0 +1,7 @@
+{
+  "status": {
+    "granted": "Granted",
+    "allocated": "Allocated",
+    "returned": "Returned"
+  }
+}
diff --git a/design-system/molecules/cards/card-transaction/translations/card-transaction.translate.ts b/design-system/molecules/cards/card-transaction/translations/card-transaction.translate.ts
new file mode 100644
index 000000000..77900aa10
--- /dev/null
+++ b/design-system/molecules/cards/card-transaction/translations/card-transaction.translate.ts
@@ -0,0 +1,5 @@
+import enCardTransaction from "./card-transaction.en.json";
+
+export const enCardTransactionTranslation = {
+  cardTransaction: enCardTransaction,
+};
diff --git a/shared/translation/en.ts b/shared/translation/en.ts
index f45498498..0f56e17bb 100644
--- a/shared/translation/en.ts
+++ b/shared/translation/en.ts
@@ -1,6 +1,7 @@
 import { enProgramsTranslation } from "@/app/programs/_translations/programs.translate";
 import { enTestTranslation } from "@/app/test/_translations/test.translate";
 
+import { enCardTransactionTranslation } from "@/design-system/molecules/cards/card-transaction/translations/card-transaction.translate";
 import { enTableFilterTranslation } from "@/design-system/molecules/table-filter/translations/table-filter.translate";
 
 import { enFeedbackDrawerTranslate } from "@/shared/features/feedback-drawer/_translations/feedback-drawer.translate";
@@ -14,4 +15,7 @@ export const en = {
   ...enFeedbackDrawerTranslate,
   ...enProgramsTranslation,
   ...enTableFilterTranslation,
+  cards: {
+    ...enCardTransactionTranslation,
+  },
 };