feat(WEB-220): label translations

components/MyPages/Blocks/Stays/Previous/EmptyPreviousStays/index.tsx

@@ -1,14 +1,15 @@
-import { _ } from "@/lib/translation"
+import { useIntl } from "react-intl"
 
 import Title from "@/components/TempDesignSystem/Text/Title"
 
 import styles from "./emptyPreviousStays.module.css"
 
 export default function EmptyPreviousStaysBlock() {
+  const { formatMessage } = useIntl()
   return (
     <section className={styles.container}>
       <Title as="h5" level="h3">
-        {_("You have no previous stays.")}
+        {formatMessage({ id: "You have no previous stays." })}
       </Title>
     </section>
   )

components/MyPages/Blocks/Stays/ShowMoreButton/index.tsx

@@ -1,3 +1,7 @@
+"use client"
+
+import { useIntl } from "react-intl"
+
 import Button from "@/components/TempDesignSystem/Button"
 
 import styles from "./button.module.css"
@@ -8,16 +12,17 @@ export default function ShowMoreButton({
   disabled,
   loadMoreData,
 }: ShowMoreButtonParams) {
+  const { formatMessage } = useIntl()
   return (
     <div className={styles.container}>
       <Button
         disabled={disabled}
         intent="primary"
-        theme="primaryDark"
-        type="button"
         onClick={loadMoreData}
+        theme="secondaryDark"
+        type="button"
       >
-        Show more
+        {formatMessage({ id: "Show more" })}
       </Button>
     </div>
   )

components/MyPages/Blocks/Stays/Soonest/EmptyUpcomingStays/index.tsx

@@ -1,24 +1,24 @@
-import { _ } from "@/lib/translation"
-
 import Button from "@/components/TempDesignSystem/Button"
 import Link from "@/components/TempDesignSystem/Link"
 import Title from "@/components/TempDesignSystem/Text/Title"
+import { getIntl } from "@/i18n"
 
 import styles from "./emptyUpcomingStays.module.css"
 
-export default function EmptyUpcomingStaysBlock() {
+export default async function EmptyUpcomingStaysBlock() {
+  const { formatMessage } = await getIntl()
   return (
     <section className={styles.container}>
       <Title as="h5" level="h3">
-        {_("You have no upcoming stays.")}
+        {formatMessage({ id: "You have no upcoming stays." })}
         <span className={styles.grayTitle}>
           {" "}
-          {_("Where should you go next?")}
+          {formatMessage({ id: "Where should you go next?" })}
         </span>
       </Title>
-      <Button intent="primary" asChild type="button">
+      <Button asChild intent="primary" type="button">
         <Link className={styles.link} href="#" key="getInspired">
-          {_("Get inspired")}
+          {formatMessage({ id: "Get inspired" })}
         </Link>
       </Button>
     </section>

components/MyPages/Blocks/Stays/Soonest/index.tsx

@@ -1,6 +1,5 @@
 import { serverClient } from "@/lib/trpc/server"
 
-import MaxWidth from "@/components/MaxWidth"
 import CardGrid from "@/components/TempDesignSystem/CardGrid"
 
 import Header from "../../Header"

components/MyPages/Blocks/Stays/Upcoming/EmptyUpcomingStays/index.tsx

@@ -1,4 +1,4 @@
-import { _ } from "@/lib/translation"
+import { useIntl } from "react-intl"
 
 import Button from "@/components/TempDesignSystem/Button"
 import Link from "@/components/TempDesignSystem/Link"
@@ -7,18 +7,19 @@ import Title from "@/components/TempDesignSystem/Text/Title"
 import styles from "./emptyUpcomingStays.module.css"
 
 export default function EmptyUpcomingStaysBlock() {
+  const { formatMessage } = useIntl()
   return (
     <section className={styles.container}>
       <Title as="h5" level="h3">
-        {_("You have no upcoming stays.")}
+        {formatMessage({ id: "You have no upcoming stays." })}
         <span className={styles.grayTitle}>
           {" "}
-          {_("Where should you go next?")}
+          {formatMessage({ id: "Where should you go next?" })}
         </span>
       </Title>
-      <Button intent="primary" asChild type="button">
+      <Button asChild intent="primary" type="button">
         <Link className={styles.link} href="#" key="getInspired">
-          {_("Get inspired")}
+          {formatMessage({ id: "Get inspired" })}
         </Link>
       </Button>
     </section>

components/MyPages/Blocks/Stays/Upcoming/index.tsx

@@ -1,6 +1,5 @@
 "use client"
 
-import { _ } from "@/lib/translation"
 import { trpc } from "@/lib/trpc/client"
 
 import LoadingSpinner from "@/components/LoadingSpinner"