fix: back button label updation and onboarding container layout (#3868)

Co-authored-by: Johannes <johannes@formbricks.com>
This commit is contained in:
Dhruwang Jariwala
2024-10-24 05:34:53 +05:30
committed by GitHub
parent 9538c2e6e3
commit e7fbdb4d00
4 changed files with 25 additions and 28 deletions
+1 -1
View File
@@ -9,7 +9,7 @@ export const TwitterIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => {
width="1em"
xmlns="http://www.w3.org/2000/svg"
{...props}>
<path d="M403.229 0h78.506L310.219 196.04 512 462.799H354.002L230.261 301.007 88.669 462.799h-78.56l183.455-209.683L0 0h161.999l111.856 147.88L403.229 0zm-27.556 415.805h43.505L138.363 44.527h-46.68l283.99 371.278z"/>
<path d="M403.229 0h78.506L310.219 196.04 512 462.799H354.002L230.261 301.007 88.669 462.799h-78.56l183.455-209.683L0 0h161.999l111.856 147.88L403.229 0zm-27.556 415.805h43.505L138.363 44.527h-46.68l283.99 371.278z" />
</svg>
);
};
@@ -86,11 +86,16 @@ export const QuestionCard = ({
const open = activeQuestionId === question.id;
const [openAdvanced, setOpenAdvanced] = useState(question.logic && question.logic.length > 0);
const updateEmptyNextButtonLabels = (labelValue: TI18nString) => {
const updateEmptyButtonLabels = (
labelKey: "buttonLabel" | "backButtonLabel",
labelValue: TI18nString,
skipIndex: number
) => {
localSurvey.questions.forEach((q, index) => {
if (index === localSurvey.questions.length - 1) return;
if (!q.buttonLabel || q.buttonLabel[selectedLanguageCode]?.trim() === "") {
updateQuestion(index, { buttonLabel: labelValue });
if (index === skipIndex) return;
const currentLabel = q[labelKey];
if (!currentLabel || currentLabel[selectedLanguageCode]?.trim() === "") {
updateQuestion(index, { [labelKey]: labelValue });
}
});
};
@@ -444,7 +449,11 @@ export const QuestionCard = ({
};
if (questionIdx === localSurvey.questions.length - 1) return;
updateEmptyNextButtonLabels(translatedNextButtonLabel);
updateEmptyButtonLabels(
"buttonLabel",
translatedNextButtonLabel,
localSurvey.questions.length - 1
);
}}
attributeClasses={attributeClasses}
/>
@@ -463,6 +472,14 @@ export const QuestionCard = ({
selectedLanguageCode={selectedLanguageCode}
setSelectedLanguageCode={setSelectedLanguageCode}
attributeClasses={attributeClasses}
onBlur={(e) => {
if (!question.backButtonLabel) return;
let translatedBackButtonLabel = {
...question.backButtonLabel,
[selectedLanguageCode]: e.target.value,
};
updateEmptyButtonLabels("backButtonLabel", translatedBackButtonLabel, 0);
}}
/>
)}
</div>
@@ -13,7 +13,7 @@ import {
} from "@dnd-kit/core";
import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
import { createId } from "@paralleldrive/cuid2";
import React, { SetStateAction, useEffect, useMemo, useState } from "react";
import React, { SetStateAction, useEffect, useMemo } from "react";
import toast from "react-hot-toast";
import { MultiLanguageCard } from "@formbricks/ee/multi-language/components/multi-language-card";
import { addMultiLanguageLabels, extractLanguageCodes } from "@formbricks/lib/i18n/utils";
@@ -86,7 +86,6 @@ export const QuestionsView = ({
}, [localSurvey.questions]);
const surveyLanguages = localSurvey.languages;
const [backButtonLabel, setbackButtonLabel] = useState(null);
const handleQuestionLogicChange = (survey: TSurvey, compareId: string, updatedId: string): TSurvey => {
const updateConditions = (conditions: TConditionGroup): TConditionGroup => {
@@ -238,22 +237,6 @@ export const QuestionsView = ({
...updatedAttributes,
};
if ("backButtonLabel" in updatedAttributes) {
const backButtonLabel = updatedSurvey.questions[questionIdx].backButtonLabel;
// If the value of backbuttonLabel is equal to {default:""}, then delete backButtonLabel key
if (
backButtonLabel &&
Object.keys(backButtonLabel).length === 1 &&
backButtonLabel["default"].trim() === ""
) {
delete updatedSurvey.questions[questionIdx].backButtonLabel;
} else {
updatedSurvey.questions.forEach((question) => {
question.backButtonLabel = updatedAttributes.backButtonLabel;
});
setbackButtonLabel(updatedAttributes.backButtonLabel);
}
}
const attributesToCheck = ["buttonLabel", "upperLabel", "lowerLabel"];
// If the value of buttonLabel, lowerLabel or upperLabel is equal to {default:""}, then delete buttonLabel key
@@ -332,9 +315,6 @@ export const QuestionsView = ({
const addQuestion = (question: TSurveyQuestion, index?: number) => {
const updatedSurvey = { ...localSurvey };
if (backButtonLabel) {
question.backButtonLabel = backButtonLabel;
}
const languageSymbols = extractLanguageCodes(localSurvey.languages);
const updatedQuestion = addMultiLanguageLabels(question, languageSymbols);
@@ -163,7 +163,7 @@ const EnterCode = ({ setCurrentStep, setOpen, refreshData }: TEnableCodeProps) =
// refresh data to update the UI
refreshData();
}else{
} else {
toast.error("The 2FA OTP is incorrect. Please try again.");
}
} catch (err) {