feat(WEB-220): label translations

components/MyPages/Blocks/Points/EarnAndBurn/index.tsx

@@ -1,11 +1,10 @@
 "use client"
+import { useIntl } from "react-intl"
 
 import { dt } from "@/lib/dt"
-import { _ } from "@/lib/translation"
 import { trpc } from "@/lib/trpc/client"
 
 import Header from "@/components/MyPages/Blocks/Header"
-import Button from "@/components/TempDesignSystem/Button"
 
 import styles from "./earnAndBurn.module.css"
 
@@ -13,11 +12,11 @@ import { AccountPageComponentProps } from "@/types/components/myPages/myPage/acc
 import { Page, RowProps } from "@/types/components/myPages/myPage/earnAndBurn"
 
 const tableHeadings = [
-  _("Arrival date"),
-  _("Description"),
-  _("Booking number"),
-  _("Transaction date"),
-  _("Points"),
+  "Arrival date",
+  "Description",
+  "Booking number",
+  "Transaction date",
+  "Points",
 ]
 
 function EarnAndBurn({
@@ -26,7 +25,8 @@ function EarnAndBurn({
   subtitle,
   link,
 }: AccountPageComponentProps) {
-  const { data, hasNextPage, isFetching, fetchNextPage } =
+  const intl = useIntl()
+  const { data, hasNextPage, fetchNextPage } =
     trpc.user.transaction.friendTransactions.useInfiniteQuery(
       { limit: 5 },
       {
@@ -49,8 +49,12 @@ function EarnAndBurn({
         <table className={styles.mobileTable}>
           <thead className={styles.mobileThead}>
             <tr>
-              <th className={styles.mobileTh}>{_("Transactions")}</th>
-              <th className={styles.mobileTh}>{_("Points")}</th>
+              <th className={styles.mobileTh}>
+                {intl.formatMessage({ id: "Transactions" })}
+              </th>
+              <th className={styles.mobileTh}>
+                {intl.formatMessage({ id: "Points" })}
+              </th>
             </tr>
           </thead>
           <tbody>
@@ -72,7 +76,7 @@ function EarnAndBurn({
                       <span>{`${transaction.hotelName}, ${transaction.city}`}</span>
                     ) : null}
                     <span>
-                      {`${transaction.nights} ${_(transaction.nights === 1 ? "night" : "nights")}`}
+                      {`${transaction.nights} ${intl.formatMessage({ id: transaction.nights === 1 ? "night" : "nights" })}`}
                     </span>
                   </td>
                   <td
@@ -85,7 +89,7 @@ function EarnAndBurn({
             ) : (
               <tr>
                 <td className={styles.mobilePlaceholder} colSpan={2}>
-                  Empty
+                  {intl.formatMessage({ id: "Empty" })}
                 </td>
               </tr>
             )}
@@ -99,7 +103,7 @@ function EarnAndBurn({
               <tr>
                 {tableHeadings.map((heading) => (
                   <th key={heading} className={styles.th}>
-                    {heading}
+                    {intl.formatMessage({ id: heading })}
                   </th>
                 ))}
               </tr>
@@ -123,7 +127,7 @@ function EarnAndBurn({
           // type="button"
           // onClick={loadMoreData}
           // >
-          // {_("See more transactions")}
+          // {intl.formatMessage({id:"See more transactions"})}
           // </Button>
           <table className={styles.table}>
             <thead className={styles.thead}>
@@ -141,7 +145,7 @@ function EarnAndBurn({
                   colSpan={tableHeadings.length}
                   className={styles.placeholder}
                 >
-                  {_("No transactions available")}
+                  {intl.formatMessage({ id: "No transactions available" })}
                 </td>
               </tr>
             </tbody>
@@ -153,10 +157,11 @@ function EarnAndBurn({
 }
 
 function Row({ transaction, lang }: RowProps) {
+  const intl = useIntl()
   const description =
     transaction.hotelName && transaction.city
-      ? `${_(transaction.hotelName)}, ${transaction.city} ${transaction.nights} ${_("nights")}`
-      : `${transaction.nights} ${_("nights")}`
+      ? `${intl.formatMessage({ id: transaction.hotelName })}, ${transaction.city} ${transaction.nights} ${intl.formatMessage({ id: "nights" })}`
+      : `${transaction.nights} ${intl.formatMessage({ id: "nights" })}`
   const arrival = dt(transaction.checkinDate).locale(lang).format("DD MMM YYYY")
   const departure = dt(transaction.checkoutDate)
     .locale(lang)