feat(WEB-220): label translations

components/Loyalty/Blocks/CardsGrid/index.tsx

@@ -1,5 +1,3 @@
-import { _ } from "@/lib/translation"
-
 import Header from "@/components/MyPages/Blocks/Header"
 import Card from "@/components/TempDesignSystem/Card"
 import CardGrid from "@/components/TempDesignSystem/CardGrid"

components/Loyalty/Blocks/DynamicContent/HowItWorks/index.tsx

@@ -1,13 +1,13 @@
-import { _ } from "@/lib/translation"
-
 import Title from "@/components/TempDesignSystem/Text/Title"
+import { getIntl } from "@/i18n"
 
 import styles from "./howItWorks.module.css"
 
-export default function HowItWorks() {
+export default async function HowItWorks() {
+  const { formatMessage } = await getIntl()
   return (
     <section className={styles.container}>
-      <Title level="h3">{_("How it works Placeholder")}</Title>
+      <Title level="h3">{formatMessage({ id: "How it works" })}</Title>
     </section>
   )
 }

components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/index.tsx

@@ -2,9 +2,9 @@
 
 import { useParams } from "next/navigation"
 import { Check } from "react-feather"
+import { useIntl } from "react-intl"
 
 import { Lang } from "@/constants/languages"
-import { _ } from "@/lib/translation"
 
 import Image from "@/components/Image"
 import Button from "@/components/TempDesignSystem/Button"
@@ -18,31 +18,38 @@ import styles from "./loyaltyLevels.module.css"
 import type { Level, LevelCardProps } from "@/types/components/loyalty/blocks"
 
 export default function LoyaltyLevels() {
-  const { lang } = useParams()
+  const params = useParams()
+  const lang = params.lang as Lang
+  const { formatMessage } = useIntl()
 
-  const { levels } = levelsData[lang as Lang]
+  const { levels } = levelsData[lang]
   return (
     <section className={styles.container}>
       <div className={styles.cardContainer}>
         {levels.map((level: Level) => (
-          <LevelCard key={level.tier} level={level} />
+          <LevelCard
+            key={level.tier}
+            formatMessage={formatMessage}
+            lang={lang}
+            level={level}
+          />
         ))}
       </div>
       <div className={styles.buttonContainer}>
         <Button intent="primary" asChild>
-          <Link href={"/compare-all-levels"}>{_("Compare all levels")}</Link>
+          <Link href={`/${lang}/compare-all-levels`}>
+            {formatMessage({ id: "Compare all levels" })}
+          </Link>
         </Button>
       </div>
     </section>
   )
 }
 
-function LevelCard({ level }: LevelCardProps) {
-  const { lang } = useParams()
-
+function LevelCard({ formatMessage, lang, level }: LevelCardProps) {
   const pointsString = `${level.requiredPoints.toLocaleString(lang)}p`
   const qualifications = level.requiredNights
-    ? `${pointsString} ${_("or")} ${level.requiredNights} ${_("nights")}`
+    ? `${pointsString} ${formatMessage({ id: "or" })} ${level.requiredNights} ${formatMessage({ id: "nights" })}`
     : pointsString
   return (
     <article className={styles.card}>

components/Loyalty/Blocks/DynamicContent/OverviewTable/index.tsx

@@ -2,9 +2,9 @@
 
 import { Dispatch, SetStateAction, useState } from "react"
 import { type Key } from "react-aria-components"
+import { useIntl } from "react-intl"
 
 import { Lang } from "@/constants/languages"
-import { _ } from "@/lib/translation"
 
 import Select from "@/components/TempDesignSystem/Form/Select"
 
@@ -53,6 +53,7 @@ function getLevelByTier(tier: number) {
 }
 
 export default function OverviewTable() {
+  const intl = useIntl()
   const [selectedLevelA, setSelectedLevelA] = useState(getLevelByTier(1))
   const [selectedLevelB, setSelectedLevelB] = useState(getLevelByTier(2))
   const [selectedLevelC, setSelectedLevelC] = useState(getLevelByTier(3))
@@ -89,8 +90,8 @@ export default function OverviewTable() {
         <div className={styles.columnHeaderContainer}>
           <div className={styles.columnHeader}>
             <Select
-              name={"benefitA"}
-              label={"Level"}
+              name="benefitA"
+              label={intl.formatMessage({ id: "Level" })}
               items={levelOptions}
               defaultSelectedKey={selectedLevelA.tier}
               onSelect={handleSelectChange(setSelectedLevelA)}
@@ -105,8 +106,8 @@ export default function OverviewTable() {
           </div>
           <div className={styles.columnHeader}>
             <Select
-              name={"benefitB"}
-              label={"Level"}
+              name="benefitB"
+              label={intl.formatMessage({ id: "Level" })}
               items={levelOptions}
               defaultSelectedKey={selectedLevelB.tier}
               onSelect={handleSelectChange(setSelectedLevelB)}
@@ -126,8 +127,8 @@ export default function OverviewTable() {
         <div className={styles.columnHeaderContainer}>
           <div className={styles.columnHeader}>
             <Select
-              name={"benefitA"}
-              label={"Level"}
+              name="benefitA"
+              label={intl.formatMessage({ id: "Level" })}
               items={levelOptions}
               defaultSelectedKey={selectedLevelA.tier}
               onSelect={handleSelectChange(setSelectedLevelA)}
@@ -142,8 +143,8 @@ export default function OverviewTable() {
           </div>
           <div className={styles.columnHeader}>
             <Select
-              name={"benefitB"}
-              label={"Level"}
+              name="benefitB"
+              label={intl.formatMessage({ id: "Level" })}
               items={levelOptions}
               defaultSelectedKey={selectedLevelB.tier}
               onSelect={handleSelectChange(setSelectedLevelB)}
@@ -158,8 +159,8 @@ export default function OverviewTable() {
           </div>
           <div className={styles.columnHeader}>
             <Select
-              name={"benefitC"}
-              label={"Level"}
+              name="benefitC"
+              label={intl.formatMessage({ id: "Level" })}
               items={levelOptions}
               defaultSelectedKey={selectedLevelC.tier}
               onSelect={handleSelectChange(setSelectedLevelC)}

components/Loyalty/Sidebar/JoinLoyalty/Contact/ContactRow/index.tsx

@@ -1,4 +1,3 @@
-import { Lang } from "@/constants/languages"
 import { serverClient } from "@/lib/trpc/server"
 
 import { getValueFromContactConfig } from "@/utils/contactConfig"

components/Loyalty/Sidebar/JoinLoyalty/Contact/index.tsx

@@ -1,6 +1,5 @@
-import { _ } from "@/lib/translation"
-
 import Title from "@/components/TempDesignSystem/Text/Title"
+import { getIntl } from "@/i18n"
 
 import ContactRow from "./ContactRow"
 
@@ -10,9 +9,10 @@ import { JoinLoyaltyContactTypenameEnum } from "@/types/components/loyalty/enums
 import type { ContactProps } from "@/types/components/loyalty/sidebar"
 
 export default async function Contact({ contactBlock }: ContactProps) {
+  const { formatMessage } = await getIntl()
   return (
     <div className={styles.contactContainer}>
-      <Title level="h5">{_("Contact us")}</Title>
+      <Title level="h5">{formatMessage({ id: "Contact us" })}</Title>
       <section>
         {contactBlock.map(({ contact, __typename }, i) => {
           switch (__typename) {

components/Loyalty/Sidebar/JoinLoyalty/index.tsx

@@ -1,9 +1,8 @@
-import { _ } from "@/lib/translation"
-
 import Image from "@/components/Image"
 import Button from "@/components/TempDesignSystem/Button"
 import Link from "@/components/TempDesignSystem/Link"
 import Title from "@/components/TempDesignSystem/Text/Title"
+import { getIntl } from "@/i18n"
 
 import Contact from "./Contact"
 
@@ -11,7 +10,10 @@ import styles from "./joinLoyalty.module.css"
 
 import type { JoinLoyaltyContactProps } from "@/types/components/loyalty/sidebar"
 
-export default function JoinLoyaltyContact({ block }: JoinLoyaltyContactProps) {
+export default async function JoinLoyaltyContact({
+  block,
+}: JoinLoyaltyContactProps) {
+  const { formatMessage } = await getIntl()
   return (
     <div className={styles.container}>
       <div className={styles.wrapper}>
@@ -25,12 +27,12 @@ export default function JoinLoyaltyContact({ block }: JoinLoyaltyContactProps) {
         />
         {block.preamble && <p className={styles.preamble}>{block.preamble}</p>}
         <Button intent="primary">
-          <span>{_("Join Scandic Friends")}</span>
+          <span>{formatMessage({ id: "Join Scandic Friends" })}</span>
         </Button>
         <div className={styles.linkContainer}>
           <Link href="/login" className={styles.loginLink}>
-            {_("Already a friend?")} <br />
-            {_("Click here to log in")}
+            {formatMessage({ id: "Already a friend?" })} <br />
+            {formatMessage({ id: "Click here to log in" })}
           </Link>
         </div>
       </div>