mirror/formbricks
1
0
Fork 0
mirror of https://github.com/formbricks/formbricks.git synced 2026-04-19 19:21:15 -05:00
Code Issues Packages Projects Releases 162 Wiki Activity

moves button label settings to the block level

Browse Source
This commit is contained in:
pandeymangg
2025-11-14 17:48:12 +05:30
parent b1a7b929bd
commit 2258699156
12 changed files with 183 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/web/locales/de-DE.json
View File

@@ -1405,6 +1405,7 @@
"hide_advanced_settings": "Erweiterte Einstellungen ausblenden",
"hide_back_button": "'Zurück'-Button ausblenden",
"hide_back_button_description": "Den Zurück-Button in der Umfrage nicht anzeigen",
"hide_block_settings": "Block-Einstellungen ausblenden",
"hide_logo": "Logo verstecken",
"hide_progress_bar": "Fortschrittsbalken ausblenden",
"hide_the_logo_in_this_specific_survey": "Logo in dieser speziellen Umfrage verstecken",
@@ -1571,6 +1572,7 @@
"settings_saved_successfully": "Einstellungen erfolgreich gespeichert",
"seven_points": "7 Punkte",
"show_advanced_settings": "Erweiterte Einstellungen anzeigen",
"show_block_settings": "Block-Einstellungen anzeigen",
"show_button": "Button anzeigen",
"show_language_switch": "Sprachwechsel anzeigen",
"show_multiple_times": "Mehrfach anzeigen",

2
apps/web/locales/en-US.json
View File

@@ -1405,6 +1405,7 @@
"hide_advanced_settings": "Hide advanced settings",
"hide_back_button": "Hide 'Back' button",
"hide_back_button_description": "Do not display the back button in the survey",
"hide_block_settings": "Hide Block settings",
"hide_logo": "Hide logo",
"hide_progress_bar": "Hide progress bar",
"hide_the_logo_in_this_specific_survey": "Hide the logo in this specific survey",
@@ -1571,6 +1572,7 @@
"settings_saved_successfully": "Settings saved successfully.",
"seven_points": "7 points",
"show_advanced_settings": "Show Advanced settings",
"show_block_settings": "Show Block settings",
"show_button": "Show Button",
"show_language_switch": "Show language switch",
"show_multiple_times": "Show multiple times",

2
apps/web/locales/fr-FR.json
View File

@@ -1405,6 +1405,7 @@
"hide_advanced_settings": "Cacher les paramètres avancés",
"hide_back_button": "Masquer le bouton 'Retour'",
"hide_back_button_description": "Ne pas afficher le bouton retour dans l'enquête",
"hide_block_settings": "Masquer les paramètres du bloc",
"hide_logo": "Cacher le logo",
"hide_progress_bar": "Cacher la barre de progression",
"hide_the_logo_in_this_specific_survey": "Cacher le logo dans cette enquête spécifique",
@@ -1571,6 +1572,7 @@
"settings_saved_successfully": "Paramètres enregistrés avec succès",
"seven_points": "7 points",
"show_advanced_settings": "Afficher les paramètres avancés",
"show_block_settings": "Afficher les paramètres du bloc",
"show_button": "Afficher le bouton",
"show_language_switch": "Afficher le changement de langue",
"show_multiple_times": "Afficher plusieurs fois",

2
apps/web/locales/ja-JP.json
View File

@@ -1405,6 +1405,7 @@
"hide_advanced_settings": "詳細設定を非表示",
"hide_back_button": "「戻る」ボタンを非表示",
"hide_back_button_description": "フォームに「戻る」ボタンを表示しない",
"hide_block_settings": "ブロック設定を非表示",
"hide_logo": "ロゴを非表示",
"hide_progress_bar": "プログレスバーを非表示",
"hide_the_logo_in_this_specific_survey": "この特定のフォームでロゴを非表示にする",
@@ -1571,6 +1572,7 @@
"settings_saved_successfully": "設定を正常に保存しました。",
"seven_points": "7点",
"show_advanced_settings": "詳細設定を表示",
"show_block_settings": "ブロック設定を表示",
"show_button": "ボタンを表示",
"show_language_switch": "言語切り替えを表示",
"show_multiple_times": "複数回表示",

2
apps/web/locales/pt-BR.json
View File

@@ -1405,6 +1405,7 @@
"hide_advanced_settings": "Ocultar configurações avançadas",
"hide_back_button": "Ocultar botão 'Voltar'",
"hide_back_button_description": "Não exibir o botão de voltar na pesquisa",
"hide_block_settings": "Ocultar configurações do bloco",
"hide_logo": "Esconder logo",
"hide_progress_bar": "Esconder barra de progresso",
"hide_the_logo_in_this_specific_survey": "Esconder o logo nessa pesquisa específica",
@@ -1571,6 +1572,7 @@
"settings_saved_successfully": "Configurações salvas com sucesso",
"seven_points": "7 pontos",
"show_advanced_settings": "Mostrar configurações avançadas",
"show_block_settings": "Mostrar configurações do bloco",
"show_button": "Mostrar Botão",
"show_language_switch": "Mostrar troca de idioma",
"show_multiple_times": "Mostrar várias vezes",

2
apps/web/locales/pt-PT.json
View File

@@ -1405,6 +1405,7 @@
"hide_advanced_settings": "Ocultar definições avançadas",
"hide_back_button": "Ocultar botão 'Retroceder'",
"hide_back_button_description": "Não mostrar o botão de retroceder no inquérito",
"hide_block_settings": "Ocultar definições do bloco",
"hide_logo": "Esconder logótipo",
"hide_progress_bar": "Ocultar barra de progresso",
"hide_the_logo_in_this_specific_survey": "Ocultar o logótipo neste inquérito específico",
@@ -1571,6 +1572,7 @@
"settings_saved_successfully": "Definições guardadas com sucesso",
"seven_points": "7 pontos",
"show_advanced_settings": "Mostrar definições avançadas",
"show_block_settings": "Mostrar definições do bloco",
"show_button": "Mostrar Botão",
"show_language_switch": "Mostrar alternador de idioma",
"show_multiple_times": "Mostrar várias vezes",

2
apps/web/locales/ro-RO.json
View File

@@ -1405,6 +1405,7 @@
"hide_advanced_settings": "Ascunde setări avansate",
"hide_back_button": "Ascunde butonul 'Înapoi'",
"hide_back_button_description": "Nu afișa butonul Înapoi în sondaj",
"hide_block_settings": "Ascunde setările blocului",
"hide_logo": "Ascunde logo",
"hide_progress_bar": "Ascunde bara de progres",
"hide_the_logo_in_this_specific_survey": "Ascunde logo-ul în acest chestionar specific",
@@ -1571,6 +1572,7 @@
"settings_saved_successfully": "Setările au fost salvate cu succes.",
"seven_points": "7 puncte",
"show_advanced_settings": "Afișați setările avansate",
"show_block_settings": "Afișează setările blocului",
"show_button": "Afișează butonul",
"show_language_switch": "Afișează comutatorul de limbă",
"show_multiple_times": "Afișează de mai multe ori",

2
apps/web/locales/zh-Hans-CN.json
View File

@@ -1405,6 +1405,7 @@
"hide_advanced_settings": "隐藏 高级设置",
"hide_back_button": "隐藏 \"返回\" 按钮",
"hide_back_button_description": "不 显示 调查 中 的 返回 按钮",
"hide_block_settings": "隐藏区块设置",
"hide_logo": "隐藏 徽标",
"hide_progress_bar": "隐藏 进度 条",
"hide_the_logo_in_this_specific_survey": "隐藏此特定调查中的 logo",
@@ -1571,6 +1572,7 @@
"settings_saved_successfully": "设置 保存 成功",
"seven_points": "7 分",
"show_advanced_settings": "显示 高级设置",
"show_block_settings": "显示区块设置",
"show_button": "显示 按钮",
"show_language_switch": "显示 语言 切换",
"show_multiple_times": "显示 多次",

2
apps/web/locales/zh-Hant-TW.json
View File

@@ -1405,6 +1405,7 @@
"hide_advanced_settings": "隱藏進階設定",
"hide_back_button": "隱藏「Back」按鈕",
"hide_back_button_description": "不要在問卷中顯示返回按鈕",
"hide_block_settings": "隱藏區塊設定",
"hide_logo": "隱藏標誌",
"hide_progress_bar": "隱藏進度列",
"hide_the_logo_in_this_specific_survey": "在此特定問卷中隱藏標誌",
@@ -1571,6 +1572,7 @@
"settings_saved_successfully": "設定已成功儲存",
"seven_points": "7 分",
"show_advanced_settings": "顯示進階設定",
"show_block_settings": "顯示區塊設定",
"show_button": "顯示按鈕",
"show_language_switch": "顯示語言切換",
"show_multiple_times": "多次顯示",

93
apps/web/modules/survey/editor/components/block-card.tsx
View File

@@ -16,11 +16,11 @@ import { getTextContent } from "@formbricks/types/surveys/validation";
import { TUserLocale } from "@formbricks/types/user";
import { cn } from "@/lib/cn";
import { recallToHeadline } from "@/lib/utils/recall";
import { QuestionFormInput } from "@/modules/survey/components/question-form-input";
import { AddQuestionToBlockButton } from "@/modules/survey/editor/components/add-question-to-block-button";
import { AddressQuestionForm } from "@/modules/survey/editor/components/address-question-form";
import { AdvancedSettings } from "@/modules/survey/editor/components/advanced-settings";
import { BlockMenu } from "@/modules/survey/editor/components/block-menu";
import { BlockSettings } from "@/modules/survey/editor/components/block-settings";
import { CalQuestionForm } from "@/modules/survey/editor/components/cal-question-form";
import { ConsentQuestionForm } from "@/modules/survey/editor/components/consent-question-form";
import { ContactInfoQuestionForm } from "@/modules/survey/editor/components/contact-info-question-form";
@@ -131,25 +131,6 @@ export const BlockCard = ({
const [openAdvanced, setOpenAdvanced] = useState(blockLogic.length > 0);
const [parent] = useAutoAnimate();
// Get button labels from the block
const blockButtonLabel = block.buttonLabel;
const blockBackButtonLabel = block.backButtonLabel;
const updateEmptyButtonLabels = (
labelKey: "buttonLabel" | "backButtonLabel",
labelValue: TI18nString,
skipBlockIndex: number
) => {
// Update button labels for all blocks except the one at skipBlockIndex
localSurvey.blocks.forEach((block, index) => {
if (index === skipBlockIndex) return;
const currentLabel = block[labelKey];
if (!currentLabel || currentLabel[selectedLanguageCode]?.trim() === "") {
updateBlockButtonLabel(index, labelKey, labelValue);
}
});
};
const style = {
transition: transition ?? "transform 100ms ease",
transform: CSS.Translate.toString(transform),
@@ -266,14 +247,7 @@ export const BlockCard = ({
};
const handleRequiredToggle = () => {
// Fix for NPS and Rating element having missing translations when buttonLabel is not removed
if (!element.required && (element.type === "nps" || element.type === "rating")) {
// Remove buttonLabel from the block when making NPS/Rating required
updateBlockButtonLabel(blockIdx, "buttonLabel", undefined);
updateQuestion(questionIdx, { required: true });
} else {
updateQuestion(questionIdx, { required: !element.required });
}
updateQuestion(questionIdx, { required: !element.required });
};
return (
@@ -422,14 +396,12 @@ export const BlockCard = ({
question={element}
questionIdx={questionIdx}
updateQuestion={updateQuestion}
lastQuestion={lastQuestion}
selectedLanguageCode={selectedLanguageCode}
setSelectedLanguageCode={setSelectedLanguageCode}
isInvalid={isInvalid}
locale={locale}
isStorageConfigured={isStorageConfigured}
isExternalUrlsAllowed={isExternalUrlsAllowed}
buttonLabel={blockButtonLabel}
/>
) : element.type === TSurveyElementTypeEnum.CTA ? (
<CTAQuestionForm
@@ -600,41 +572,7 @@ export const BlockCard = ({
element.type !== TSurveyElementTypeEnum.Rating &&
element.type !== TSurveyElementTypeEnum.CTA ? (
<div className="mt-2 flex space-x-2">
{questionIdx !== 0 && (
<QuestionFormInput
id="backButtonLabel"
value={blockBackButtonLabel}
label={t("environments.surveys.edit.back_button_label")}
localSurvey={localSurvey}
questionIdx={questionIdx}
maxLength={48}
placeholder={t("common.back")}
isInvalid={isInvalid}
updateQuestion={updateQuestion}
selectedLanguageCode={selectedLanguageCode}
setSelectedLanguageCode={setSelectedLanguageCode}
locale={locale}
onBlur={(e) => {
if (!blockBackButtonLabel) return;
let translatedBackButtonLabel = {
...blockBackButtonLabel,
[selectedLanguageCode]: e.target.value,
};
updateBlockButtonLabel(
blockIdx,
"backButtonLabel",
translatedBackButtonLabel
);
updateEmptyButtonLabels(
"backButtonLabel",
translatedBackButtonLabel,
blockIdx
);
}}
isStorageConfigured={isStorageConfigured}
/>
)}
<div className="w-full">
{/* <div className="w-full">
<QuestionFormInput
id="buttonLabel"
value={blockButtonLabel}
@@ -666,11 +604,11 @@ export const BlockCard = ({
}}
locale={locale}
isStorageConfigured={isStorageConfigured}
/>
</div>
/> */}
{/* </div> */}
</div>
) : null}
{(element.type === TSurveyElementTypeEnum.Rating ||
{/* {(element.type === TSurveyElementTypeEnum.Rating ||
element.type === TSurveyElementTypeEnum.NPS) &&
questionIdx !== 0 && (
<div className="mt-4">
@@ -707,7 +645,7 @@ export const BlockCard = ({
isStorageConfigured={isStorageConfigured}
/>
</div>
)}
)} */}
<AdvancedSettings
// TODO -- We should remove this when we can confirm that everything works fine with the survey editor, not changing this right now in this file because it would require changing the question type to the respective element type in all the question forms.
@@ -764,9 +702,24 @@ export const BlockCard = ({
);
})}
{/* Block Settings */}
<div className="px-4 pb-4">
<BlockSettings
localSurvey={localSurvey}
block={block}
blockIndex={blockIdx}
selectedLanguageCode={selectedLanguageCode}
setSelectedLanguageCode={setSelectedLanguageCode}
updateBlockButtonLabel={updateBlockButtonLabel}
locale={locale}
isStorageConfigured={isStorageConfigured}
isLastBlock={blockIdx === totalBlocks - 1}
/>
</div>
{/* Add Question to Block button */}
<div className="p-4">
<div className="p-4 pt-0">
<AddQuestionToBlockButton
localSurvey={localSurvey}
setLocalSurvey={setLocalSurvey}

142
apps/web/modules/survey/editor/components/block-settings.tsx Normal file
View File

@@ -0,0 +1,142 @@
"use client";
import * as Collapsible from "@radix-ui/react-collapsible";
import { ChevronDownIcon, ChevronRightIcon } from "lucide-react";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { TI18nString } from "@formbricks/types/i18n";
import { TSurveyBlock } from "@formbricks/types/surveys/blocks";
import { TSurvey } from "@formbricks/types/surveys/types";
import { TUserLocale } from "@formbricks/types/user";
import { QuestionFormInput } from "@/modules/survey/components/question-form-input";
interface BlockSettingsProps {
localSurvey: TSurvey;
block: TSurveyBlock;
blockIndex: number;
selectedLanguageCode: string;
setSelectedLanguageCode: (languageCode: string) => void;
updateBlockButtonLabel: (
blockIndex: number,
labelKey: "buttonLabel" | "backButtonLabel",
labelValue: TI18nString | undefined
) => void;
locale: TUserLocale;
isStorageConfigured: boolean;
isLastBlock: boolean;
}
export const BlockSettings = ({
localSurvey,
block,
blockIndex,
selectedLanguageCode,
setSelectedLanguageCode,
updateBlockButtonLabel,
locale,
isStorageConfigured,
isLastBlock,
}: BlockSettingsProps) => {
const { t } = useTranslation();
const [open, setOpen] = useState(false);
const updateEmptyButtonLabels = (
labelKey: "buttonLabel" | "backButtonLabel",
labelValue: TI18nString,
skipBlockIndex: number
) => {
// Update button labels for all blocks except the one at skipBlockIndex
localSurvey.blocks.forEach((block, index) => {
if (index === skipBlockIndex) return;
const currentLabel = block[labelKey];
if (!currentLabel || currentLabel[selectedLanguageCode]?.trim() === "") {
updateBlockButtonLabel(index, labelKey, labelValue);
}
});
};
return (
<Collapsible.Root open={open} onOpenChange={setOpen} className="w-full rounded-lg">
<Collapsible.CollapsibleTrigger
className="flex items-center text-sm text-slate-700"
aria-label="Toggle advanced settings">
{open ? <ChevronDownIcon className="mr-1 h-4 w-3" /> : <ChevronRightIcon className="mr-2 h-4 w-3" />}
{open
? t("environments.surveys.edit.hide_block_settings")
: t("environments.surveys.edit.show_block_settings")}
</Collapsible.CollapsibleTrigger>
<Collapsible.CollapsibleContent>
<div className="mt-2 flex space-x-2">
{blockIndex !== 0 && (
<QuestionFormInput
id="backButtonLabel"
value={block.backButtonLabel}
label={t("environments.surveys.edit.back_button_label")}
localSurvey={localSurvey}
questionIdx={blockIndex}
isInvalid={false}
updateQuestion={(_, updatedAttributes) => {
if ("backButtonLabel" in updatedAttributes) {
const backButtonLabel = updatedAttributes.backButtonLabel as TI18nString;
updateBlockButtonLabel(blockIndex, "backButtonLabel", {
...block.backButtonLabel,
[selectedLanguageCode]: backButtonLabel[selectedLanguageCode],
});
}
}}
selectedLanguageCode={selectedLanguageCode}
setSelectedLanguageCode={setSelectedLanguageCode}
placeholder={t("common.back")}
locale={locale}
isStorageConfigured={isStorageConfigured}
onBlur={(e) => {
if (!block.backButtonLabel) return;
const translatedBackButtonLabel = {
...block.backButtonLabel,
[selectedLanguageCode]: e.target.value,
};
updateBlockButtonLabel(blockIndex, "backButtonLabel", translatedBackButtonLabel);
updateEmptyButtonLabels("backButtonLabel", translatedBackButtonLabel, blockIndex);
}}
/>
)}
<QuestionFormInput
id="buttonLabel"
value={block.buttonLabel}
label={t("environments.surveys.edit.button_label")}
localSurvey={localSurvey}
questionIdx={blockIndex}
isInvalid={false}
updateQuestion={(_, updatedAttributes) => {
if ("buttonLabel" in updatedAttributes) {
const buttonLabel = updatedAttributes.buttonLabel as TI18nString;
updateBlockButtonLabel(blockIndex, "buttonLabel", {
...block.buttonLabel,
[selectedLanguageCode]: buttonLabel[selectedLanguageCode],
});
}
}}
selectedLanguageCode={selectedLanguageCode}
setSelectedLanguageCode={setSelectedLanguageCode}
placeholder={t("common.next")}
locale={locale}
isStorageConfigured={isStorageConfigured}
onBlur={(e) => {
if (!block.buttonLabel) return;
const translatedNextButtonLabel = {
...block.buttonLabel,
[selectedLanguageCode]: e.target.value,
};
updateBlockButtonLabel(blockIndex, "buttonLabel", translatedNextButtonLabel);
// Don't propagate to last block
const lastBlockIndex = localSurvey.blocks.length - 1;
if (blockIndex !== lastBlockIndex && !isLastBlock) {
updateEmptyButtonLabels("buttonLabel", translatedNextButtonLabel, lastBlockIndex);
}
}}
/>
</div>
</Collapsible.CollapsibleContent>
</Collapsible.Root>
);
};

25
apps/web/modules/survey/editor/components/nps-question-form.tsx
View File

@@ -4,7 +4,6 @@ import { useAutoAnimate } from "@formkit/auto-animate/react";
import { PlusIcon } from "lucide-react";
import { type JSX } from "react";
import { useTranslation } from "react-i18next";
import { TI18nString } from "@formbricks/types/i18n";
import { TSurveyNPSElement } from "@formbricks/types/surveys/elements";
import { TSurvey } from "@formbricks/types/surveys/types";
import { TUserLocale } from "@formbricks/types/user";
@@ -18,21 +17,18 @@ interface NPSQuestionFormProps {
question: TSurveyNPSElement;
questionIdx: number;
updateQuestion: (questionIdx: number, updatedAttributes: Partial<TSurveyNPSElement>) => void;
lastQuestion: boolean;
selectedLanguageCode: string;
setSelectedLanguageCode: (languageCode: string) => void;
isInvalid: boolean;
locale: TUserLocale;
isStorageConfigured: boolean;
isExternalUrlsAllowed?: boolean;
buttonLabel?: TI18nString;
}
export const NPSQuestionForm = ({
question,
questionIdx,
updateQuestion,
lastQuestion,
isInvalid,
localSurvey,
selectedLanguageCode,
@@ -40,7 +36,6 @@ export const NPSQuestionForm = ({
locale,
isStorageConfigured = true,
isExternalUrlsAllowed,
buttonLabel,
}: NPSQuestionFormProps): JSX.Element => {
const { t } = useTranslation();
const surveyLanguageCodes = extractLanguageCodes(localSurvey.languages);
@@ -136,26 +131,6 @@ export const NPSQuestionForm = ({
</div>
</div>
{!question.required && (
<div className="mt-3">
<QuestionFormInput
id="buttonLabel"
value={buttonLabel}
label={t("environments.surveys.edit.next_button_label")}
localSurvey={localSurvey}
questionIdx={questionIdx}
maxLength={48}
placeholder={lastQuestion ? t("common.finish") : t("common.next")}
isInvalid={isInvalid}
updateQuestion={updateQuestion}
selectedLanguageCode={selectedLanguageCode}
setSelectedLanguageCode={setSelectedLanguageCode}
locale={locale}
isStorageConfigured={isStorageConfigured}
/>
</div>
)}
<AdvancedOptionToggle
isChecked={question.isColorCodingEnabled}
onToggle={() => updateQuestion(questionIdx, { isColorCodingEnabled: !question.isColorCodingEnabled })}