feat: refactor translation key management (#6717)

Co-authored-by: Piyush Gupta <piyushguptaa2z123@gmail.com>
Co-authored-by: Piyush Gupta <56182734+gupta-piyush19@users.noreply.github.com>
Co-authored-by: Victor Hugo dos Santos <115753265+victorvhs017@users.noreply.github.com>
Co-authored-by: pandeymangg <anshuman.pandey9999@gmail.com>
Co-authored-by: Matti Nannt <matti@formbricks.com>
Co-authored-by: Matti Nannt <mail@matthiasnannt.com>
Co-authored-by: Johannes <johannes@formbricks.com>
Co-authored-by: Johannes <72809645+jobenjada@users.noreply.github.com>

apps/web/modules/setup/(fresh-instance)/intro/page.tsx

@@ -1,8 +1,7 @@
 import { Metadata } from "next";
 import Link from "next/link";
+import { getTranslate } from "@/lingodotdev/server";
 import { Button } from "@/modules/ui/components/button";
-import { getTranslate } from "@/tolgee/server";
-import { T } from "@/tolgee/server";
 
 export const metadata: Metadata = {
   title: "Intro",
@@ -15,9 +14,9 @@ export const IntroPage = async () => {
     <div className="flex flex-col items-center">
       <h2 className="mb-6 text-xl font-medium">{t("setup.intro.welcome_to_formbricks")}</h2>
       <div className="mx-auto max-w-sm space-y-4 text-sm leading-6 text-slate-600">
-        <T keyName="setup.intro.paragraph_1" params={{ b: <b /> }} />
-        <T keyName="setup.intro.paragraph_2" params={{ b: <b /> }} />
-        <T keyName="setup.intro.paragraph_3" params={{ b: <b /> }} />
+        <p dangerouslySetInnerHTML={{ __html: t("setup.intro.paragraph_1") }} />
+        <p dangerouslySetInnerHTML={{ __html: t("setup.intro.paragraph_2") }} />
+        <p dangerouslySetInnerHTML={{ __html: t("setup.intro.paragraph_3") }} />
       </div>
       <Button className="mt-6" asChild>
         <Link href="/setup/signup">{t("setup.intro.get_started")}</Link>

apps/web/modules/setup/(fresh-instance)/signup/page.tsx

@@ -17,9 +17,9 @@ import {
   WEBAPP_URL,
 } from "@/lib/constants";
 import { findMatchingLocale } from "@/lib/utils/locale";
+import { getTranslate } from "@/lingodotdev/server";
 import { SignupForm } from "@/modules/auth/signup/components/signup-form";
 import { getIsSamlSsoEnabled, getIsSsoEnabled } from "@/modules/ee/license-check/lib/utils";
-import { getTranslate } from "@/tolgee/server";
 
 export const metadata: Metadata = {
   title: "Sign up",

apps/web/modules/setup/organization/[organizationId]/invite/components/invite-members.tsx

@@ -1,12 +1,12 @@
 "use client";
 
 import { zodResolver } from "@hookform/resolvers/zod";
-import { useTranslate } from "@tolgee/react";
 import { PlusIcon } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "react-hot-toast";
+import { useTranslation } from "react-i18next";
 import { getFormattedErrorMessage } from "@/lib/utils/helper";
 import { inviteOrganizationMemberAction } from "@/modules/setup/organization/[organizationId]/invite/actions";
 import {
@@ -24,7 +24,7 @@ interface InviteMembersProps {
 }
 
 export const InviteMembers = ({ IS_SMTP_CONFIGURED, organizationId }: InviteMembersProps) => {
-  const { t } = useTranslate();
+  const { t } = useTranslation();
   const [membersCount, setMembersCount] = useState(1);
   const router = useRouter();
 

apps/web/modules/setup/organization/[organizationId]/invite/page.tsx

@@ -4,9 +4,9 @@ import { notFound } from "next/navigation";
 import { AuthenticationError } from "@formbricks/types/errors";
 import { SMTP_HOST, SMTP_PASSWORD, SMTP_PORT, SMTP_USER } from "@/lib/constants";
 import { verifyUserRoleAccess } from "@/lib/organization/auth";
+import { getTranslate } from "@/lingodotdev/server";
 import { authOptions } from "@/modules/auth/lib/authOptions";
 import { InviteMembers } from "@/modules/setup/organization/[organizationId]/invite/components/invite-members";
-import { getTranslate } from "@/tolgee/server";
 
 export const metadata: Metadata = {
   title: "Invite",

apps/web/modules/setup/organization/create/components/create-organization.tsx

@@ -1,11 +1,11 @@
 "use client";
 
 import { zodResolver } from "@hookform/resolvers/zod";
-import { useTranslate } from "@tolgee/react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { SubmitHandler, useForm } from "react-hook-form";
 import { toast } from "react-hot-toast";
+import { useTranslation } from "react-i18next";
 import { z } from "zod";
 import { ZOrganization } from "@formbricks/types/organizations";
 import { createOrganizationAction } from "@/app/setup/organization/create/actions";
@@ -17,7 +17,7 @@ const ZCreateOrganizationFormSchema = ZOrganization.pick({ name: true });
 type TCreateOrganizationForm = z.infer<typeof ZCreateOrganizationFormSchema>;
 
 export const CreateOrganization = () => {
-  const { t } = useTranslate();
+  const { t } = useTranslation();
   const router = useRouter();
   const [isSubmitting, setIsSubmitting] = useState(false);
 

apps/web/modules/setup/organization/create/components/removed-from-organization.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import { useTranslate } from "@tolgee/react";
 import { useState } from "react";
+import { useTranslation } from "react-i18next";
 import { TUser } from "@formbricks/types/user";
 import { DeleteAccountModal } from "@/modules/account/components/DeleteAccountModal";
 import { Alert, AlertDescription, AlertTitle } from "@/modules/ui/components/alert";
@@ -13,7 +13,7 @@ interface RemovedFromOrganizationProps {
 }
 
 export const RemovedFromOrganization = ({ user, isFormbricksCloud }: RemovedFromOrganizationProps) => {
-  const { t } = useTranslate();
+  const { t } = useTranslation();
   const [isModalOpen, setIsModalOpen] = useState(false);
   return (
     <div className="space-y-4">

apps/web/modules/setup/organization/create/page.tsx

@@ -6,11 +6,11 @@ import { IS_FORMBRICKS_CLOUD } from "@/lib/constants";
 import { gethasNoOrganizations } from "@/lib/instance/service";
 import { getOrganizationsByUserId } from "@/lib/organization/service";
 import { getUser } from "@/lib/user/service";
+import { getTranslate } from "@/lingodotdev/server";
 import { authOptions } from "@/modules/auth/lib/authOptions";
 import { getIsMultiOrgEnabled } from "@/modules/ee/license-check/lib/utils";
 import { RemovedFromOrganization } from "@/modules/setup/organization/create/components/removed-from-organization";
 import { ClientLogout } from "@/modules/ui/components/client-logout";
-import { getTranslate } from "@/tolgee/server";
 import { CreateOrganization } from "./components/create-organization";
 
 export const metadata: Metadata = {