feat: add benefit translations and remove unused JSON

components/MyPages/Blocks/Benefits/NextLevel/index.tsx

@@ -1,5 +1,6 @@
 import { Lock } from "react-feather"
 
+import { MembershipLevelEnum } from "@/constants/membershipLevels"
 import { serverClient } from "@/lib/trpc/server"
 
 import SectionContainer from "@/components/Section/Container"
@@ -9,6 +10,7 @@ import Grids from "@/components/TempDesignSystem/Grids"
 import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import { getIntl } from "@/i18n"
+import { getMembershipLevelObject } from "@/utils/membershipLevel"
 
 import styles from "./next.module.css"
 
@@ -17,16 +19,30 @@ import { AccountPageComponentProps } from "@/types/components/myPages/myPage/acc
 export default async function NextLevelBenefitsBlock({
   title,
   subtitle,
+  lang,
   link,
 }: AccountPageComponentProps) {
-  const { nextLevel, perks } = await serverClient().user.benefits.nextLevel()
   const { formatMessage } = await getIntl()
+  const user = await serverClient().user.get()
+  if (!user) {
+    return null
+  }
+  const nextLevel = getMembershipLevelObject(
+    user.memberships[0].membershipLevel as MembershipLevelEnum,
+    lang,
+    "nextLevel"
+  )
+  if (!nextLevel) {
+    //  TODO: handle this case, when missing or when user is top level?
+    return null
+  }
+  // TODO: how to handle different count of unlockable benefits?
   return (
     <SectionContainer>
       <Header title={title} subtitle={subtitle} link={link} />
       <Grids.Stackable>
-        {perks.map((perk) => (
-          <article key={perk.id} className={styles.card}>
+        {nextLevel.benefits.map((benefit) => (
+          <article key={benefit.title} className={styles.card}>
             <Chip>
               <Lock height={16} />
               {formatMessage({ id: "Level up to unlock" })}
@@ -38,10 +54,10 @@ export default async function NextLevelBenefitsBlock({
                 textAlign="center"
                 type="two"
               >
-                {formatMessage({ id: "As our" })} {nextLevel}
+                {formatMessage({ id: "As our" })} {nextLevel.name}
               </BiroScript>{" "}
               <Subtitle color="pale" textAlign="center">
-                {perk.explanation}
+                {benefit.title}
               </Subtitle>
             </div>
           </article>