app/

Author: adambarath

src/app/[countryCode]/(checkout)/checkout/page.tsx

@@ -1,7 +1,9 @@
 import { Metadata } from "next"
 import { cookies } from "next/headers"
 import { notFound } from "next/navigation"
-import { LineItem } from "@medusajs/medusa"
+import { Cart, LineItem } from "@medusajs/medusa"
+
+import { getI18n } from "../../../../locales/server"
 
 import { enrichLineItems } from "@modules/cart/actions"
 import Wrapper from "@modules/checkout/components/payment-wrapper"
@@ -31,6 +33,9 @@ const fetchCart = async () => {
 }
 
 export default async function Checkout() {
+  const t = await getI18n()
+  metadata.title = t("checkout.title")
+
   const cart = await fetchCart()
 
   if (!cart) {

src/app/[countryCode]/(checkout)/layout.tsx

@@ -2,11 +2,15 @@ import LocalizedClientLink from "@modules/common/components/localized-client-lin
 import ChevronDown from "@modules/common/icons/chevron-down"
 import MedusaCTA from "@modules/layout/components/medusa-cta"
 
-export default function CheckoutLayout({
+import { getI18n } from "../../../locales/server"
+
+export default async function CheckoutLayout({
   children,
 }: {
   children: React.ReactNode
 }) {
+  const t = await getI18n()
+
   return (
     <div className="w-full bg-white relative small:min-h-screen">
       <div className="h-16 bg-white border-b ">
@@ -18,23 +22,25 @@ export default function CheckoutLayout({
           >
             <ChevronDown className="rotate-90" size={16} />
             <span className="mt-px hidden small:block txt-compact-plus text-ui-fg-subtle hover:text-ui-fg-base ">
-              Back to shopping cart
+              {t("checkout.back")}
             </span>
             <span className="mt-px block small:hidden txt-compact-plus text-ui-fg-subtle hover:text-ui-fg-base">
-              Back
+              {t("generic.back")}
             </span>
           </LocalizedClientLink>
           <LocalizedClientLink
             href="/"
             className="txt-compact-xlarge-plus text-ui-fg-subtle hover:text-ui-fg-base uppercase"
             data-testid="store-link"
           >
-            Medusa Store
+            {t("store.name")}
           </LocalizedClientLink>
           <div className="flex-1 basis-0" />
         </nav>
       </div>
-      <div className="relative" data-testid="checkout-container">{children}</div>
+      <div className="relative" data-testid="checkout-container">
+        {children}
+      </div>
       <div className="py-4 w-full flex items-center justify-center">
         <MedusaCTA />
       </div>

src/app/[countryCode]/(checkout)/not-found.tsx

@@ -1,19 +1,26 @@
+import { getI18n } from "../../../locales/server"
 import InteractiveLink from "@modules/common/components/interactive-link"
 import { Metadata } from "next"
 
 export const metadata: Metadata = {
   title: "404",
-  description: "Something went wrong",
+  description: "generic.somethingwrong",
 }
 
 export default async function NotFound() {
+  const t = await getI18n()
+
+  metadata.description = t("generic.somethingwrong")
+
   return (
     <div className="flex flex-col gap-4 items-center justify-center min-h-[calc(100vh-64px)]">
-      <h1 className="text-2xl-semi text-ui-fg-base">Page not found</h1>
+      <h1 className="text-2xl-semi text-ui-fg-base">
+        {t("generic.notfound_title")}
+      </h1>
       <p className="text-small-regular text-ui-fg-base">
-        The page you tried to access does not exist.
+        {t("generic.notfound_desc")}
       </p>
-      <InteractiveLink href="/">Go to frontpage</InteractiveLink>
+      <InteractiveLink href="/">{t("generic.notfound_link")}</InteractiveLink>
     </div>
   )
 }

src/app/[countryCode]/(main)/account/@dashboard/addresses/page.tsx

@@ -1,18 +1,24 @@
 import { Metadata } from "next"
 import { notFound } from "next/navigation"
 
+import { getI18n } from "../../../../../../locales/server"
+
 import AddressBook from "@modules/account/components/address-book"
 
 import { getCustomer, getRegion } from "@lib/data"
 
 import { headers } from "next/headers"
 
 export const metadata: Metadata = {
-  title: "Addresses",
-  description: "View your addresses",
+  title: "page.adresses.title",
+  description: "page.adresses.desc",
 }
 
 export default async function Addresses() {
+  const t = await getI18n()
+  metadata.title = t("page.adresses.title")
+  metadata.description = t("page.adresses.desc")
+
   const nextHeaders = headers()
   const countryCode = nextHeaders.get("next-url")?.split("/")[1] || ""
   const customer = await getCustomer()
@@ -25,10 +31,11 @@ export default async function Addresses() {
   return (
     <div className="w-full" data-testid="addresses-page-wrapper">
       <div className="mb-8 flex flex-col gap-y-4">
-        <h1 className="text-2xl-semi">Shipping Addresses</h1>
+        <h1 className="text-2xl-semi">
+          {t("page.adresses.shipping.title")}
+        </h1>
         <p className="text-base-regular">
-          View and update your shipping addresses, you can add as many as you
-          like. Saving your addresses will make them available during checkout.
+          {t("page.adresses.shipping.desc")}
         </p>
       </div>
       <AddressBook customer={customer} region={region} />

src/app/[countryCode]/(main)/account/@dashboard/orders/details/[id]/page.tsx

@@ -1,6 +1,8 @@
 import { Metadata } from "next"
 import { notFound } from "next/navigation"
 
+import { getI18n } from "../../../../../../../../locales/server"
+
 import { retrieveOrder } from "@lib/data"
 import OrderDetailsTemplate from "@modules/order/templates/order-details-template"
 
@@ -9,15 +11,16 @@ type Props = {
 }
 
 export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const t = await getI18n()
   const order = await retrieveOrder(params.id).catch(() => null)
 
   if (!order) {
     notFound()
   }
 
   return {
-    title: `Order #${order.display_id}`,
-    description: `View your order`,
+    title: t("page.order.title") + ` #${order.display_id}`,
+    description: t("page.order.desc"),
   }
 }
 

src/app/[countryCode]/(main)/account/@dashboard/orders/page.tsx

@@ -1,15 +1,21 @@
 import { Metadata } from "next"
 
+import { getI18n } from "../../../../../../locales/server"
+
 import OrderOverview from "@modules/account/components/order-overview"
 import { listCustomerOrders } from "@lib/data"
 import { notFound } from "next/navigation"
 
 export const metadata: Metadata = {
-  title: "Orders",
-  description: "Overview of your previous orders.",
+  title: "page.orders.title",
+  description: "page.orders.desc",
 }
 
 export default async function Orders() {
+  const t = await getI18n()
+  metadata.title = t("page.orders.title")
+  metadata.description = t("page.orders.desc")
+
   const orders = await listCustomerOrders()
 
   if (!orders) {
@@ -19,11 +25,8 @@ export default async function Orders() {
   return (
     <div className="w-full" data-testid="orders-page-wrapper">
       <div className="mb-8 flex flex-col gap-y-4">
-        <h1 className="text-2xl-semi">Orders</h1>
-        <p className="text-base-regular">
-          View your previous orders and their status. You can also create
-          returns or exchanges for your orders if needed.
-        </p>
+        <h1 className="text-2xl-semi">{t("page.orders.title")}</h1>
+        <p className="text-base-regular">{t("page.orders.details")}</p>
       </div>
       <div>
         <OrderOverview orders={orders} />

src/app/[countryCode]/(main)/account/@dashboard/page.tsx

@@ -1,15 +1,21 @@
 import { Metadata } from "next"
 
+import { getI18n } from "../../../../../locales/server"
+
 import { getCustomer, listCustomerOrders } from "@lib/data"
 import Overview from "@modules/account/components/overview"
 import { notFound } from "next/navigation"
 
 export const metadata: Metadata = {
-  title: "Account",
-  description: "Overview of your account activity.",
+  title: "page.account.title",
+  description: "page.account.desc",
 }
 
 export default async function OverviewTemplate() {
+  const t = await getI18n()
+  metadata.title = t("page.account.title")
+  metadata.description = t("page.account.desc")
+
   const customer = await getCustomer().catch(() => null)
   const orders = (await listCustomerOrders().catch(() => null)) || null
 

src/app/[countryCode]/(main)/account/@dashboard/profile/page.tsx

@@ -1,5 +1,7 @@
 import { Metadata } from "next"
 
+import { getI18n } from "../../../../../../locales/server"
+
 import ProfilePhone from "@modules/account//components/profile-phone"
 import ProfileBillingAddress from "@modules/account/components/profile-billing-address"
 import ProfileEmail from "@modules/account/components/profile-email"
@@ -10,11 +12,15 @@ import { getCustomer, listRegions } from "@lib/data"
 import { notFound } from "next/navigation"
 
 export const metadata: Metadata = {
-  title: "Profile",
-  description: "View and edit your Medusa Store profile.",
+  title: "page.profile.title",
+  description: "page.profile.desc",
 }
 
 export default async function Profile() {
+  const t = await getI18n()
+  metadata.title = t("page.profile.title")
+  metadata.description = t("page.profile.desc")
+
   const customer = await getCustomer()
   const regions = await listRegions()
 
@@ -25,12 +31,8 @@ export default async function Profile() {
   return (
     <div className="w-full" data-testid="profile-page-wrapper">
       <div className="mb-8 flex flex-col gap-y-4">
-        <h1 className="text-2xl-semi">Profile</h1>
-        <p className="text-base-regular">
-          View and update your profile information, including your name, email,
-          and phone number. You can also update your billing address, or change
-          your password.
-        </p>
+        <h1 className="text-2xl-semi">{metadata.title}</h1>
+        <p className="text-base-regular">{t("page.profile.details")}</p>
       </div>
       <div className="flex flex-col gap-y-8 w-full">
         <ProfileName customer={customer} />

src/app/[countryCode]/(main)/account/@login/page.tsx

@@ -1,12 +1,18 @@
 import { Metadata } from "next"
 
+import { getI18n } from "../../../../../locales/server"
+
 import LoginTemplate from "@modules/account/templates/login-template"
 
 export const metadata: Metadata = {
-  title: "Sign in",
-  description: "Sign in to your Medusa Store account.",
+  title: "page.login.title",
+  description: "page.login.desc",
 }
 
-export default function Login() {
+export default async function Login() {
+  const t = await getI18n()
+  metadata.title = t("page.login.title")
+  metadata.description = t("page.login.desc")
+
   return <LoginTemplate />
 }

src/app/[countryCode]/(main)/cart/not-found.tsx

@@ -1,21 +1,28 @@
 import { Metadata } from "next"
 
+import { getI18n } from "../../../../locales/server"
+
 import InteractiveLink from "@modules/common/components/interactive-link"
 
 export const metadata: Metadata = {
   title: "404",
-  description: "Something went wrong",
+  description: "generic.somethingwrong",
 }
 
-export default function NotFound() {
+export default async function NotFound() {
+  const t = await getI18n()
+
+  metadata.description = t("generic.somethingwrong")
+
   return (
     <div className="flex flex-col items-center justify-center min-h-[calc(100vh-64px)]">
-      <h1 className="text-2xl-semi text-ui-fg-base">Page not found</h1>
+      <h1 className="text-2xl-semi text-ui-fg-base">
+        {t("generic.notfound_title")}
+      </h1>
       <p className="text-small-regular text-ui-fg-base">
-        The cart you tried to access does not exist. Clear your cookies and try
-        again.
+        {t("generic.notfound_desc_cart")}
       </p>
-      <InteractiveLink href="/">Go to frontpage</InteractiveLink>
+      <InteractiveLink href="/">{t("generic.notfound_link")}</InteractiveLink>
     </div>
   )
 }

src/app/[countryCode]/(main)/cart/page.tsx

@@ -2,6 +2,8 @@ import { LineItem } from "@medusajs/medusa"
 import { Metadata } from "next"
 import { cookies } from "next/headers"
 
+import { getI18n } from "../../../../locales/server"
+
 import CartTemplate from "@modules/cart/templates"
 
 import { enrichLineItems } from "@modules/cart/actions"
@@ -10,8 +12,8 @@ import { CartWithCheckoutStep } from "types/global"
 import { getCart, getCustomer } from "@lib/data"
 
 export const metadata: Metadata = {
-  title: "Cart",
-  description: "View your cart",
+  title: "cart.title",
+  description: "cart.desc",
 }
 
 const fetchCart = async () => {
@@ -40,6 +42,10 @@ const fetchCart = async () => {
 }
 
 export default async function Cart() {
+  const t = await getI18n()
+  metadata.title = t("cart.title")
+  metadata.description = t("cart.desc")
+
   const cart = await fetchCart()
   const customer = await getCustomer()
 

src/app/[countryCode]/(main)/categories/[...category]/page.tsx

@@ -1,6 +1,8 @@
 import { Metadata } from "next"
 import { notFound } from "next/navigation"
 
+import { getI18n } from "../../../../../locales/server"
+
 import { getCategoryByHandle, listCategories, listRegions } from "@lib/data"
 import CategoryTemplate from "@modules/categories/templates"
 import { SortOptions } from "@modules/store/components/refinement-list/sort-products"
@@ -52,8 +54,11 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
       product_categories[product_categories.length - 1].description ??
       `${title} category.`
 
+    const t = await getI18n()
+    const storeName = t("store.name")
+
     return {
-      title: `${title} | Medusa Store`,
+      title: `${title} | ${storeName}`,
       description,
       alternates: {
         canonical: `${params.category.join("/")}`,