Core localization

examples/core/src/app/(auth)/actions.ts → examples/core/src/app/[lang]/(auth)/actions.ts

@@ -3,13 +3,13 @@
 import { z } from "zod";
 import { cookies } from "next/headers";
 import { redirect } from "next/navigation";
-import { ACCOUNT_MEMBER_TOKEN_COOKIE_NAME } from "../../lib/cookie-constants";
-import { retrieveAccountMemberCredentials } from "../../lib/retrieve-account-member-credentials";
+import { ACCOUNT_MEMBER_TOKEN_COOKIE_NAME } from "src/lib/cookie-constants";
+import { retrieveAccountMemberCredentials } from "src/lib/retrieve-account-member-credentials";
 import { revalidatePath, revalidateTag } from "next/cache";
-import { getErrorMessage } from "../../lib/get-error-message";
-import { createElasticPathClient } from "../../lib/create-elastic-path-client";
+import { getErrorMessage } from "src/lib/get-error-message";
+import { createElasticPathClient } from "src/lib/create-elastic-path-client";
 import { postV2AccountMembersTokens } from "@epcc-sdk/sdks-shopper";
-import { createCookieFromGenerateTokenResponse } from "../../lib/create-cookie-from-generate-token-response";
+import { createCookieFromGenerateTokenResponse } from "src/lib/create-cookie-from-generate-token-response";
 
 const loginSchema = z.object({
   email: z.string().email(),
@@ -32,7 +32,7 @@ const PASSWORD_PROFILE_ID = process.env.NEXT_PUBLIC_PASSWORD_PROFILE_ID!;
 const loginErrorMessage =
   "Failed to login, make sure your email and password are correct";
 
-export async function login(props: FormData) {
+export async function login(props: FormData, lang: string) {
   const client = createElasticPathClient();
 
   const rawEntries = Object.fromEntries(props.entries());
@@ -77,15 +77,15 @@ export async function login(props: FormData) {
     };
   }
 
-  redirect(returnUrl ?? "/");
+  redirect(returnUrl ?? (lang ? `/${lang}/` : "/"));
 }
 
-export async function logout() {
+export async function logout(lang?: string) {
   const cookieStore = await cookies();
 
   cookieStore.delete(ACCOUNT_MEMBER_TOKEN_COOKIE_NAME);
 
-  redirect("/");
+  redirect(lang ? `/${lang}/` : "/");
 }
 
 export async function selectedAccount(args: FormData) {
@@ -106,8 +106,9 @@ export async function selectedAccount(args: FormData) {
     ACCOUNT_MEMBER_TOKEN_COOKIE_NAME,
   );
 
+  const lang = args?.get("lang")?.toString();
   if (!accountMemberCredentials) {
-    redirect("/login");
+    redirect(lang ? `/${lang}/login` : "/login");
     return;
   }
 
@@ -141,7 +142,7 @@ export async function selectedAccount(args: FormData) {
   await Promise.all(promises);
 }
 
-export async function register(data: FormData) {
+export async function register(data: FormData, lang: string) {
   const client = await createElasticPathClient();
 
   const validatedProps = registerSchema.safeParse(
@@ -178,5 +179,5 @@ export async function register(data: FormData) {
 
   cookieStore.set(createCookieFromGenerateTokenResponse(result.data));
 
-  redirect("/");
+  redirect(lang ? `/${lang}/` : "/");
 }

examples/core/src/app/(auth)/layout.tsx → examples/core/src/app/[lang]/(auth)/layout.tsx

@@ -1,9 +1,9 @@
 import localFont from "next/font/local";
 import { ReactNode } from "react";
-import { getStoreInitialState } from "../../lib/get-store-initial-state";
+import { getStoreInitialState } from "src/lib/get-store-initial-state";
 import { Providers } from "../providers";
 import clsx from "clsx";
-import { createElasticPathClient } from "../../lib/create-elastic-path-client";
+import { createElasticPathClient } from "src/lib/create-elastic-path-client";
 
 const SITE_NAME = process.env.NEXT_PUBLIC_SITE_NAME;
 const baseUrl = process.env.NEXT_PUBLIC_VERCEL_URL
@@ -23,7 +23,7 @@ export const metadata = {
 };
 
 const inter = localFont({
-  src: "../../../public/fonts/Inter-VariableFont_opsz,wght.ttf",
+  src: "../../../../public/fonts/Inter-VariableFont_opsz,wght.ttf",
   display: "swap",
   variable: "--font-inter",
 });

examples/core/src/app/(auth)/login/LoginForm.tsx → examples/core/src/app/[lang]/(auth)/login/LoginForm.tsx

@@ -1,16 +1,18 @@
 "use client";
 
 import { login } from "../actions";
-import { Label } from "../../../components/label/Label";
-import { Input } from "../../../components/input/Input";
-import { FormStatusButton } from "../../../components/button/FormStatusButton";
+import { Label } from "src/components/label/Label";
+import { Input } from "src/components/input/Input";
+import { FormStatusButton } from "src/components/button/FormStatusButton";
 import { useState } from "react";
+import { useParams } from "next/navigation";
 
 export function LoginForm({ returnUrl }: { returnUrl?: string }) {
+  const { lang } = useParams();
   const [error, setError] = useState<string | undefined>(undefined);
 
   async function loginAction(formData: FormData) {
-    const result = await login(formData);
+    const result = await login(formData, lang as string);
 
     if ("error" in result) {
       setError(result.error);

examples/core/src/app/(auth)/login/page.tsx → examples/core/src/app/[lang]/(auth)/login/page.tsx

@@ -1,31 +1,35 @@
-import EpLogo from "../../../components/icons/ep-logo";
+import EpLogo from "src/components/icons/ep-logo";
 import { cookies } from "next/headers";
-import { isAccountMemberAuthenticated } from "../../../lib/is-account-member-authenticated";
+import { isAccountMemberAuthenticated } from "src/lib/is-account-member-authenticated";
 import { redirect } from "next/navigation";
-import Link from "next/link";
+import { LocaleLink } from "src/components/LocaleLink";
 import { LoginForm } from "./LoginForm";
 
 export default async function Login(
   props: {
     searchParams: Promise<{ returnUrl?: string }>;
+    params: Promise<{ lang?: string }>;
   }
 ) {
   const searchParams = await props.searchParams;
   const { returnUrl } = searchParams;
 
+  const params = await props.params;
+  const { lang } = params;
+
   const cookieStore = await cookies();
 
   if (isAccountMemberAuthenticated(cookieStore)) {
-    redirect("/account/summary");
+    redirect(lang ? `/${lang}/account/summary` : "/account/summary");
   }
 
   return (
     <>
       <div className="flex min-h-full flex-1 flex-col justify-center px-6 py-12 lg:px-8">
         <div className="sm:mx-auto sm:w-full sm:max-w-sm">
-          <Link href="/">
+          <LocaleLink href="/">
             <EpLogo className="h-10 w-auto mx-auto" />
-          </Link>
+          </LocaleLink>
           <h2 className="mt-10 text-center text-2xl font-medium leading-9 tracking-tight text-gray-900">
             Sign in to your account
           </h2>
@@ -36,12 +40,12 @@ export default async function Login(
 
           <p className="mt-10 text-center text-sm text-gray-500">
             Not a member?{" "}
-            <a
+            <LocaleLink
               href="/register"
               className="leading-6 text-brand-primary hover:text-brand-highlight"
             >
               Register now!
-            </a>
+            </LocaleLink>
           </p>
         </div>
       </div>

examples/core/src/app/not-found.tsx → examples/core/src/app/[lang]/(auth)/not-found.tsx

@@ -1,13 +1,13 @@
-import Link from "next/link";
+import { LocaleLink } from "src/components/LocaleLink";
 export default function NotFound() {
   return (
     <div className="flex h-[36rem] flex-col items-center justify-center gap-4 p-8">
       <span className="text-center text-xl md:text-3xl">
         404 - The page could not be found.
       </span>
-      <Link href="/" className="font-md md:font-lg text-brand-primary">
+      <LocaleLink href="/" className="font-md md:font-lg text-brand-primary">
         Back to home
-      </Link>
+      </LocaleLink>
     </div>
   );
 }