diff --git a/apps/web/app/(app)/environments/[environmentId]/components/EnvironmentLayout.tsx b/apps/web/app/(app)/environments/[environmentId]/components/EnvironmentLayout.tsx
index 5d8a2789c5..d5d336c362 100644
--- a/apps/web/app/(app)/environments/[environmentId]/components/EnvironmentLayout.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/components/EnvironmentLayout.tsx
@@ -101,6 +101,7 @@ export const EnvironmentLayout = async ({ environmentId, session, children }: En
isPendingDowngrade={isPendingDowngrade ?? false}
active={active}
environmentId={environment.id}
+ locale={user.locale}
/>
diff --git a/apps/web/modules/ui/components/pending-downgrade-banner/index.tsx b/apps/web/modules/ui/components/pending-downgrade-banner/index.tsx
index f23b2ac353..c83ad5c16d 100644
--- a/apps/web/modules/ui/components/pending-downgrade-banner/index.tsx
+++ b/apps/web/modules/ui/components/pending-downgrade-banner/index.tsx
@@ -4,12 +4,14 @@ import { useTranslate } from "@tolgee/react";
import { TriangleAlertIcon, XIcon } from "lucide-react";
import Link from "next/link";
import { useState } from "react";
+import { TUserLocale } from "@formbricks/types/user";
interface PendingDowngradeBannerProps {
lastChecked: Date;
active: boolean;
isPendingDowngrade: boolean;
environmentId: string;
+ locale: TUserLocale;
}
export const PendingDowngradeBanner = ({
@@ -17,6 +19,7 @@ export const PendingDowngradeBanner = ({
active,
isPendingDowngrade,
environmentId,
+ locale,
}: PendingDowngradeBannerProps) => {
const threeDaysInMillis = 3 * 24 * 60 * 60 * 1000;
const { t } = useTranslate();
@@ -25,7 +28,11 @@ export const PendingDowngradeBanner = ({
: false;
const scheduledDowngradeDate = new Date(lastChecked.getTime() + threeDaysInMillis);
- const formattedDate = `${scheduledDowngradeDate.getMonth() + 1}/${scheduledDowngradeDate.getDate()}/${scheduledDowngradeDate.getFullYear()}`;
+ const formattedDate = scheduledDowngradeDate.toLocaleDateString(locale, {
+ year: "numeric",
+ month: "long",
+ day: "numeric",
+ });
const [show, setShow] = useState(true);
@@ -47,8 +54,7 @@ export const PendingDowngradeBanner = ({
{t(
"common.we_were_unable_to_verify_your_license_because_the_license_server_is_unreachable"
- )}
- .{" "}
+ )}{" "}
{isLastCheckedWithin72Hours
? t("common.you_will_be_downgraded_to_the_community_edition_on_date", {
date: formattedDate,