feat(WEB-220): label translations

app/[lang]/(live)/(protected)/my-pages/[...path]/page.module.css

@@ -1,11 +1,3 @@
-.content {
-  display: grid;
-  padding-bottom: var(--Spacing-x9);
-  padding-left: var(--Spacing-x0);
-  padding-right: var(--Spacing-x0);
-  position: relative;
-}
-
 .blocks {
   display: grid;
   gap: var(--Spacing-x5);
@@ -14,16 +6,9 @@
 }
 
 @media screen and (min-width: 1367px) {
-  .content {
-    gap: var(--Spacing-x9);
-    grid-template-columns: 25rem 1fr;
-    padding-left: var(--Spacing-x3);
-    padding-right: var(--Spacing-x3);
-  }
-
   .blocks {
     gap: var(--Spacing-x7);
     padding-left: var(--Spacing-x0);
     padding-right: var(--Spacing-x0);
   }
-}
+}

app/[lang]/(live)/(protected)/my-pages/[...path]/page.tsx

@@ -1,8 +1,7 @@
-import { _ } from "@/lib/translation"
 import { serverClient } from "@/lib/trpc/server"
 
 import Content from "@/components/MyPages/AccountPage/Content"
-import Sidebar from "@/components/MyPages/Sidebar"
+import { getIntl } from "@/i18n"
 
 import styles from "./page.module.css"
 
@@ -12,17 +11,14 @@ export default async function MyPages({
   params,
 }: PageArgs<LangParams & { path: string[] }>) {
   const accountPage = await serverClient().contentstack.accountPage.get()
-
+  const { formatMessage } = await getIntl()
   return (
-    <section className={styles.content}>
-      <Sidebar lang={params.lang} />
-      <main className={styles.blocks}>
-        {accountPage.content.length ? (
-          <Content lang={params.lang} content={accountPage.content} />
-        ) : (
-          <p>{_("No content published")}</p>
-        )}
-      </main>
-    </section>
+    <main className={styles.blocks}>
+      {accountPage.content.length ? (
+        <Content lang={params.lang} content={accountPage.content} />
+      ) : (
+        <p>{formatMessage({ id: "No content published" })}</p>
+      )}
+    </main>
   )
 }

app/[lang]/(live)/(protected)/my-pages/layout.module.css

@@ -8,3 +8,20 @@
   grid-template-rows: auto 1fr;
   min-height: 100dvh;
 }
+
+.content {
+  display: grid;
+  padding-bottom: var(--Spacing-x9);
+  padding-left: var(--Spacing-x0);
+  padding-right: var(--Spacing-x0);
+  position: relative;
+}
+
+@media screen and (min-width: 1367px) {
+  .content {
+    gap: var(--Spacing-x9);
+    grid-template-columns: 25rem 1fr;
+    padding-left: var(--Spacing-x3);
+    padding-right: var(--Spacing-x3);
+  }
+}

app/[lang]/(live)/(protected)/my-pages/layout.tsx

@@ -1,3 +1,5 @@
+import Sidebar from "@/components/MyPages/Sidebar"
+
 import styles from "./layout.module.css"
 
 import { LangParams, LayoutArgs } from "@/types/params"
@@ -5,13 +7,17 @@ import { LangParams, LayoutArgs } from "@/types/params"
 export default async function MyPagesLayout({
   breadcrumbs,
   children,
+  params,
 }: React.PropsWithChildren<LayoutArgs<LangParams>> & {
   breadcrumbs: React.ReactNode
 }) {
   return (
     <section className={styles.layout}>
       {breadcrumbs}
-      {children}
+      <section className={styles.content}>
+        <Sidebar lang={params.lang} />
+        {children}
+      </section>
     </section>
   )
 }

app/[lang]/(live)/(protected)/my-pages/profile/@edit/edit/page.tsx

@@ -1,6 +1,7 @@
 "use client"
+import { useIntl } from "react-intl"
+
 import { profile } from "@/constants/routes/myPages"
-import { _ } from "@/lib/translation"
 import { useProfileStore } from "@/stores/edit-profile"
 
 import Button from "@/components/TempDesignSystem/Button"
@@ -9,26 +10,31 @@ import Link from "@/components/TempDesignSystem/Link"
 import type { LangParams, PageArgs } from "@/types/params"
 
 export default function EditProfile({ params }: PageArgs<LangParams>) {
+  const { formatMessage } = useIntl()
   const isPending = useProfileStore((store) => store.pending)
   const isValid = useProfileStore((store) => store.valid)
+
+  const cancel = formatMessage({ id: "Cancel" })
+  const save = formatMessage({ id: "Save" })
   return (
     <>
       <Button
-        aria-label="Cancel"
+        aria-label={cancel}
         asChild
         form="edit-profile"
         size="small"
         type="reset"
       >
-        <Link href={profile[params.lang]}>{_("Cancel")}</Link>
+        <Link href={profile[params.lang]}>{cancel}</Link>
       </Button>
       <Button
+        aria-label={save}
         disabled={!isValid || isPending}
         form="edit-profile"
         size="small"
         type="submit"
       >
-        {_("Save")}
+        {save}
       </Button>
     </>
   )

app/[lang]/(live)/(protected)/my-pages/profile/@view/page.tsx

@@ -1,15 +1,18 @@
 import { profileEdit } from "@/constants/routes/myPages"
-import { _ } from "@/lib/translation"
 
 import Button from "@/components/TempDesignSystem/Button"
 import Link from "@/components/TempDesignSystem/Link"
+import { getIntl } from "@/i18n"
 
 import type { LangParams, PageArgs } from "@/types/params"
 
-export default function ProfileView({ params }: PageArgs<LangParams>) {
+export default async function ProfileView({ params }: PageArgs<LangParams>) {
+  const { formatMessage } = await getIntl()
   return (
     <Button asChild size="small">
-      <Link href={profileEdit[params.lang]}>{_("Edit")}</Link>
+      <Link href={profileEdit[params.lang]}>
+        {formatMessage({ id: "Edit" })}
+      </Link>
     </Button>
   )
 }