feat(WEB-220): label translations

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>