From 971053c90d6967078c5922367fcd54a24d538f93 Mon Sep 17 00:00:00 2001
From: Dhruwang Jariwala <67850763+Dhruwang@users.noreply.github.com>
Date: Mon, 16 Dec 2024 13:19:47 +0530
Subject: [PATCH] fix: i18n issues in date picker (#4469)

---
 .../edit/components/CTAQuestionForm.tsx         | 17 ++++++++---------
 .../edit/components/OpenQuestionForm.tsx        | 15 +++++++--------
 .../modules/ui/components/file-input/index.tsx  |  8 ++++----
 .../ui/components/options-switch/index.tsx      |  4 +---
 4 files changed, 20 insertions(+), 24 deletions(-)

diff --git a/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/CTAQuestionForm.tsx b/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/CTAQuestionForm.tsx
index b6e8412744..6592a06758 100644
--- a/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/CTAQuestionForm.tsx
+++ b/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/CTAQuestionForm.tsx
@@ -12,14 +12,6 @@ import { TContactAttributeKey } from "@formbricks/types/contact-attribute-key";
 import { TSurvey, TSurveyCTAQuestion } from "@formbricks/types/surveys/types";
 import { TUserLocale } from "@formbricks/types/user";
 
-const options = [
-  {
-    value: "internal",
-    label: "environments.surveys.edit.button_to_continue_in_survey",
-  },
-  { value: "external", label: "environments.surveys.edit.button_to_link_to_external_url" },
-];
-
 interface CTAQuestionFormProps {
   localSurvey: TSurvey;
   question: TSurveyCTAQuestion;
@@ -45,8 +37,15 @@ export const CTAQuestionForm = ({
   contactAttributeKeys,
   locale,
 }: CTAQuestionFormProps): JSX.Element => {
-  const [firstRender, setFirstRender] = useState(true);
   const t = useTranslations();
+  const options = [
+    {
+      value: "internal",
+      label: t("environments.surveys.edit.button_to_continue_in_survey"),
+    },
+    { value: "external", label: t("environments.surveys.edit.button_to_link_to_external_url") },
+  ];
+  const [firstRender, setFirstRender] = useState(true);
   const [parent] = useAutoAnimate();
   return (
     <form ref={parent}>
diff --git a/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/OpenQuestionForm.tsx b/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/OpenQuestionForm.tsx
index bc87235e28..3b01e0a9fb 100644
--- a/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/OpenQuestionForm.tsx
+++ b/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/OpenQuestionForm.tsx
@@ -19,14 +19,6 @@ import {
 } from "@formbricks/types/surveys/types";
 import { TUserLocale } from "@formbricks/types/user";
 
-const questionTypes = [
-  { value: "text", label: "common.text", icon: <MessageSquareTextIcon className="h-4 w-4" /> },
-  { value: "email", label: "common.email", icon: <MailIcon className="h-4 w-4" /> },
-  { value: "url", label: "common.url", icon: <LinkIcon className="h-4 w-4" /> },
-  { value: "number", label: "common.number", icon: <HashIcon className="h-4 w-4" /> },
-  { value: "phone", label: "common.phone", icon: <PhoneIcon className="h-4 w-4" /> },
-];
-
 interface OpenQuestionFormProps {
   localSurvey: TSurvey;
   question: TSurveyOpenTextQuestion;
@@ -52,6 +44,13 @@ export const OpenQuestionForm = ({
   locale,
 }: OpenQuestionFormProps): JSX.Element => {
   const t = useTranslations();
+  const questionTypes = [
+    { value: "text", label: t("common.text"), icon: <MessageSquareTextIcon className="h-4 w-4" /> },
+    { value: "email", label: t("common.email"), icon: <MailIcon className="h-4 w-4" /> },
+    { value: "url", label: t("common.url"), icon: <LinkIcon className="h-4 w-4" /> },
+    { value: "number", label: t("common.number"), icon: <HashIcon className="h-4 w-4" /> },
+    { value: "phone", label: t("common.phone"), icon: <PhoneIcon className="h-4 w-4" /> },
+  ];
   const defaultPlaceholder = getPlaceholderByInputType(question.inputType ?? "text");
   const surveyLanguageCodes = extractLanguageCodes(localSurvey.languages ?? []);
 
diff --git a/apps/web/modules/ui/components/file-input/index.tsx b/apps/web/modules/ui/components/file-input/index.tsx
index 984e345cff..2181583715 100644
--- a/apps/web/modules/ui/components/file-input/index.tsx
+++ b/apps/web/modules/ui/components/file-input/index.tsx
@@ -17,10 +17,6 @@ const allowedFileTypesForPreview = ["png", "jpeg", "jpg", "webp"];
 const isImage = (name: string) => {
   return allowedFileTypesForPreview.includes(name.split(".").pop() as TAllowedFileExtension);
 };
-const options = [
-  { value: "image", label: "common.image" },
-  { value: "video", label: "common.video" },
-];
 
 interface FileInputProps {
   id: string;
@@ -56,6 +52,10 @@ export const FileInput = ({
   disabled = false,
 }: FileInputProps) => {
   const t = useTranslations();
+  const options = [
+    { value: "image", label: t("common.image") },
+    { value: "video", label: t("common.video") },
+  ];
   const [selectedFiles, setSelectedFiles] = useState<SelectedFile[]>([]);
   const [uploadedVideoUrl, setUploadedVideoUrl] = useState(videoUrl ?? "");
   const [activeTab, setActiveTab] = useState(videoUrl ? "video" : "image");
diff --git a/apps/web/modules/ui/components/options-switch/index.tsx b/apps/web/modules/ui/components/options-switch/index.tsx
index d12ac38557..4e8bec81fa 100644
--- a/apps/web/modules/ui/components/options-switch/index.tsx
+++ b/apps/web/modules/ui/components/options-switch/index.tsx
@@ -1,4 +1,3 @@
-import { useTranslations } from "next-intl";
 import React, { useEffect, useRef, useState } from "react";
 
 interface TOption {
@@ -21,7 +20,6 @@ export const OptionsSwitch = ({
 }: OptionsSwitchProps) => {
   const [highlightStyle, setHighlightStyle] = useState({});
   const containerRef = useRef<HTMLDivElement>(null);
-  const t = useTranslations();
   useEffect(() => {
     if (containerRef.current) {
       const activeElement = containerRef.current.querySelector(`[data-value="${currentOption}"]`);
@@ -56,7 +54,7 @@ export const OptionsSwitch = ({
                 : "cursor-pointer hover:bg-slate-50"
           }`}>
           <div className="flex items-center justify-center space-x-2">
-            <span className="text-sm text-slate-900">{t(type.label)}</span>
+            <span className="text-sm text-slate-900">{type.label}</span>
             {type.icon && <div className="h-4 w-4 text-slate-600 hover:text-slate-800">{type.icon}</div>}
           </div>
         </div>