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,
From 8c7f36d496b5527383a381b4598e8fb09cb6395b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nathana=C3=ABl?=
<7300309+nathanael-h@users.noreply.github.com>
Date: Wed, 9 Jul 2025 17:39:58 +0200
Subject: [PATCH 09/29] chore: Update docker-compose.yml, fix syntax (#6158)
---
docker/docker-compose.yml | 14 +++++++-------
1 file changed, 7 insertions(+), 7 deletions(-)
diff --git a/docker/docker-compose.yml b/docker/docker-compose.yml
index 8e32a42f9c..f7a6ceb398 100644
--- a/docker/docker-compose.yml
+++ b/docker/docker-compose.yml
@@ -97,7 +97,7 @@ x-environment: &environment
# S3_BUCKET_NAME:
# Set a third party S3 compatible storage service endpoint like StorJ leave empty if you use Amazon S3
- # S3_ENDPOINT_URL=
+ # S3_ENDPOINT_URL:
# Force path style for S3 compatible storage (0 for disabled, 1 for enabled)
S3_FORCE_PATH_STYLE: 0
@@ -109,8 +109,8 @@ x-environment: &environment
# TURNSTILE_SECRET_KEY:
# Set the below keys to enable recaptcha V3 for survey responses bot protection(only available in the Enterprise Edition)
- # RECAPTCHA_SITE_KEY=
- # RECAPTCHA_SECRET_KEY=
+ # RECAPTCHA_SITE_KEY:
+ # RECAPTCHA_SECRET_KEY:
# Set the below from GitHub if you want to enable GitHub OAuth
# GITHUB_ID:
@@ -192,16 +192,16 @@ x-environment: &environment
############################################# OPTIONAL (OTHER) #############################################
# signup is disabled by default for self-hosted instances, users can only signup using an invite link, in order to allow signup from SSO(without invite), set the below to 1
- # AUTH_SKIP_INVITE_FOR_SSO=1
+ # AUTH_SKIP_INVITE_FOR_SSO: 1
# Set the below to automatically assign new users to a specific team, insert an existing team id
# (Role Management is an Enterprise feature)
- # AUTH_SSO_DEFAULT_TEAM_ID=
+ # AUTH_SSO_DEFAULT_TEAM_ID:
# Configure the minimum role for user management from UI(owner, manager, disabled)
- # USER_MANAGEMENT_MINIMUM_ROLE="manager"
+ # USER_MANAGEMENT_MINIMUM_ROLE: "manager"
# Configure the maximum age for the session in seconds. Default is 86400 (24 hours)
- # SESSION_MAX_AGE=86400
+ # SESSION_MAX_AGE: 86400
services:
postgres:
From 7fa95cd74a461bf485a3353c95faf0b3fff22218 Mon Sep 17 00:00:00 2001
From: Abhishek Sharma <130081473+SkilledSparrow@users.noreply.github.com>
Date: Wed, 9 Jul 2025 21:21:27 +0530
Subject: [PATCH 10/29] =?UTF-8?q?fix:=20recall=20fallback=20input=20to=20b?=
=?UTF-8?q?e=20displayed=20on=20top=20of=20other=20contai=E2=80=A6=20(#612?=
=?UTF-8?q?4)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Co-authored-by: Victor Santos
---
apps/web/locales/de-DE.json | 3 +
apps/web/locales/en-US.json | 3 +
apps/web/locales/fr-FR.json | 3 +
apps/web/locales/pt-BR.json | 3 +
apps/web/locales/pt-PT.json | 3 +
apps/web/locales/zh-Hant-TW.json | 3 +
.../components/webhook-detail-modal.tsx | 4 +-
.../components/fallback-input.test.tsx | 117 +++-----
.../components/fallback-input.tsx | 117 ++++----
.../components/recall-wrapper.test.tsx | 276 +++++++++++-------
.../components/recall-wrapper.tsx | 4 +-
.../components/end-screen-form.test.tsx | 12 +-
.../card-styling-settings/index.test.tsx | 1 -
.../card-styling-settings/index.tsx | 2 -
.../androidTest/resources/Environment.json | 12 +-
.../Mock/Response/Environment.json | 12 +-
.../surveys/src/components/general/survey.tsx | 4 +-
packages/surveys/src/lib/styles.ts | 2 -
18 files changed, 325 insertions(+), 256 deletions(-)
diff --git a/apps/web/locales/de-DE.json b/apps/web/locales/de-DE.json
index 363622024c..60f12b63ff 100644
--- a/apps/web/locales/de-DE.json
+++ b/apps/web/locales/de-DE.json
@@ -1248,6 +1248,8 @@
"add_description": "Beschreibung hinzufügen",
"add_ending": "Abschluss hinzufügen",
"add_ending_below": "Abschluss unten hinzufügen",
+ "add_fallback": "Hinzufügen",
+ "add_fallback_placeholder": "Hinzufügen eines Platzhalters, der angezeigt wird, wenn die Frage übersprungen wird:",
"add_hidden_field_id": "Verstecktes Feld ID hinzufügen",
"add_highlight_border": "Rahmen hinzufügen",
"add_highlight_border_description": "Füge deiner Umfragekarte einen äußeren Rahmen hinzu.",
@@ -1386,6 +1388,7 @@
"error_saving_changes": "Fehler beim Speichern der Änderungen",
"even_after_they_submitted_a_response_e_g_feedback_box": "Sogar nachdem sie eine Antwort eingereicht haben (z.B. Feedback-Box)",
"everyone": "Jeder",
+ "fallback_for": "Ersatz für",
"fallback_missing": "Fehlender Fallback",
"fieldId_is_used_in_logic_of_question_please_remove_it_from_logic_first": "{fieldId} wird in der Logik der Frage {questionIndex} verwendet. Bitte entferne es zuerst aus der Logik.",
"field_name_eg_score_price": "Feldname z.B. Punktzahl, Preis",
diff --git a/apps/web/locales/en-US.json b/apps/web/locales/en-US.json
index 5de5332725..d5b65652e2 100644
--- a/apps/web/locales/en-US.json
+++ b/apps/web/locales/en-US.json
@@ -1248,6 +1248,8 @@
"add_description": "Add description",
"add_ending": "Add ending",
"add_ending_below": "Add ending below",
+ "add_fallback": "Add",
+ "add_fallback_placeholder": "Add a placeholder to show if the question gets skipped:",
"add_hidden_field_id": "Add hidden field ID",
"add_highlight_border": "Add highlight border",
"add_highlight_border_description": "Add an outer border to your survey card.",
@@ -1386,6 +1388,7 @@
"error_saving_changes": "Error saving changes",
"even_after_they_submitted_a_response_e_g_feedback_box": "Even after they submitted a response (e.g. Feedback Box)",
"everyone": "Everyone",
+ "fallback_for": "Fallback for ",
"fallback_missing": "Fallback missing",
"fieldId_is_used_in_logic_of_question_please_remove_it_from_logic_first": "{fieldId} is used in logic of question {questionIndex}. Please remove it from logic first.",
"field_name_eg_score_price": "Field name e.g, score, price",
diff --git a/apps/web/locales/fr-FR.json b/apps/web/locales/fr-FR.json
index ad6d440d05..56f767e873 100644
--- a/apps/web/locales/fr-FR.json
+++ b/apps/web/locales/fr-FR.json
@@ -1248,6 +1248,8 @@
"add_description": "Ajouter une description",
"add_ending": "Ajouter une fin",
"add_ending_below": "Ajouter une fin ci-dessous",
+ "add_fallback": "Ajouter",
+ "add_fallback_placeholder": "Ajouter un espace réservé pour montrer si la question est ignorée :",
"add_hidden_field_id": "Ajouter un champ caché ID",
"add_highlight_border": "Ajouter une bordure de surlignage",
"add_highlight_border_description": "Ajoutez une bordure extérieure à votre carte d'enquête.",
@@ -1386,6 +1388,7 @@
"error_saving_changes": "Erreur lors de l'enregistrement des modifications",
"even_after_they_submitted_a_response_e_g_feedback_box": "Même après avoir soumis une réponse (par exemple, la boîte de feedback)",
"everyone": "Tout le monde",
+ "fallback_for": "Solution de repli pour ",
"fallback_missing": "Fallback manquant",
"fieldId_is_used_in_logic_of_question_please_remove_it_from_logic_first": "{fieldId} est utilisé dans la logique de la question {questionIndex}. Veuillez d'abord le supprimer de la logique.",
"field_name_eg_score_price": "Nom du champ par exemple, score, prix",
diff --git a/apps/web/locales/pt-BR.json b/apps/web/locales/pt-BR.json
index 1054781490..7dca442ed8 100644
--- a/apps/web/locales/pt-BR.json
+++ b/apps/web/locales/pt-BR.json
@@ -1248,6 +1248,8 @@
"add_description": "Adicionar Descrição",
"add_ending": "Adicionar final",
"add_ending_below": "Adicione o final abaixo",
+ "add_fallback": "Adicionar",
+ "add_fallback_placeholder": "Adicionar um texto padrão para mostrar se a pergunta for ignorada:",
"add_hidden_field_id": "Adicionar campo oculto ID",
"add_highlight_border": "Adicionar borda de destaque",
"add_highlight_border_description": "Adicione uma borda externa ao seu cartão de pesquisa.",
@@ -1386,6 +1388,7 @@
"error_saving_changes": "Erro ao salvar alterações",
"even_after_they_submitted_a_response_e_g_feedback_box": "Mesmo depois de eles enviarem uma resposta (por exemplo, Caixa de Feedback)",
"everyone": "Todo mundo",
+ "fallback_for": "Alternativa para",
"fallback_missing": "Faltando alternativa",
"fieldId_is_used_in_logic_of_question_please_remove_it_from_logic_first": "{fieldId} é usado na lógica da pergunta {questionIndex}. Por favor, remova-o da lógica primeiro.",
"field_name_eg_score_price": "Nome do campo, por exemplo, pontuação, preço",
diff --git a/apps/web/locales/pt-PT.json b/apps/web/locales/pt-PT.json
index e402985c97..a717e73684 100644
--- a/apps/web/locales/pt-PT.json
+++ b/apps/web/locales/pt-PT.json
@@ -1248,6 +1248,8 @@
"add_description": "Adicionar descrição",
"add_ending": "Adicionar encerramento",
"add_ending_below": "Adicionar encerramento abaixo",
+ "add_fallback": "Adicionar",
+ "add_fallback_placeholder": "Adicionar um espaço reservado para mostrar se a pergunta for ignorada:",
"add_hidden_field_id": "Adicionar ID do campo oculto",
"add_highlight_border": "Adicionar borda de destaque",
"add_highlight_border_description": "Adicione uma borda externa ao seu cartão de inquérito.",
@@ -1386,6 +1388,7 @@
"error_saving_changes": "Erro ao guardar alterações",
"even_after_they_submitted_a_response_e_g_feedback_box": "Mesmo depois de terem enviado uma resposta (por exemplo, Caixa de Feedback)",
"everyone": "Todos",
+ "fallback_for": "Alternativa para ",
"fallback_missing": "Substituição em falta",
"fieldId_is_used_in_logic_of_question_please_remove_it_from_logic_first": "{fieldId} é usado na lógica da pergunta {questionIndex}. Por favor, remova-o da lógica primeiro.",
"field_name_eg_score_price": "Nome do campo, por exemplo, pontuação, preço",
diff --git a/apps/web/locales/zh-Hant-TW.json b/apps/web/locales/zh-Hant-TW.json
index 42505b2424..d887222709 100644
--- a/apps/web/locales/zh-Hant-TW.json
+++ b/apps/web/locales/zh-Hant-TW.json
@@ -1248,6 +1248,8 @@
"add_description": "新增描述",
"add_ending": "新增結尾",
"add_ending_below": "在下方新增結尾",
+ "add_fallback": "新增",
+ "add_fallback_placeholder": "新增用于顯示問題被跳過時的佔位符",
"add_hidden_field_id": "新增隱藏欄位 ID",
"add_highlight_border": "新增醒目提示邊框",
"add_highlight_border_description": "在您的問卷卡片新增外邊框。",
@@ -1386,6 +1388,7 @@
"error_saving_changes": "儲存變更時發生錯誤",
"even_after_they_submitted_a_response_e_g_feedback_box": "即使他們提交回應之後（例如，意見反應方塊）",
"everyone": "所有人",
+ "fallback_for": "備用 用於 ",
"fallback_missing": "遺失的回退",
"fieldId_is_used_in_logic_of_question_please_remove_it_from_logic_first": "'{'fieldId'}' 用於問題 '{'questionIndex'}' 的邏輯中。請先從邏輯中移除。",
"field_name_eg_score_price": "欄位名稱，例如：分數、價格",
diff --git a/apps/web/modules/integrations/webhooks/components/webhook-detail-modal.tsx b/apps/web/modules/integrations/webhooks/components/webhook-detail-modal.tsx
index 0bd7d671bb..9a940eeba1 100644
--- a/apps/web/modules/integrations/webhooks/components/webhook-detail-modal.tsx
+++ b/apps/web/modules/integrations/webhooks/components/webhook-detail-modal.tsx
@@ -41,6 +41,8 @@ export const WebhookModal = ({ open, setOpen, webhook, surveys, isReadOnly }: We
},
];
+ const webhookName = webhook.name || t("common.webhook"); // NOSONAR // We want to check for empty strings
+
const handleTabClick = (index: number) => {
setActiveTab(index);
};
@@ -56,7 +58,7 @@ export const WebhookModal = ({ open, setOpen, webhook, surveys, isReadOnly }: We
{webhook.name || t("common.webhook")} {" "} {/* NOSONAR // We want to check for empty strings */}
+ {webhookName} {/* NOSONAR // We want to check for empty strings */}
{webhook.url}
diff --git a/apps/web/modules/survey/components/question-form-input/components/fallback-input.test.tsx b/apps/web/modules/survey/components/question-form-input/components/fallback-input.test.tsx
index b37a31f7e9..c97274d036 100644
--- a/apps/web/modules/survey/components/question-form-input/components/fallback-input.test.tsx
+++ b/apps/web/modules/survey/components/question-form-input/components/fallback-input.test.tsx
@@ -12,6 +12,21 @@ vi.mock("react-hot-toast", () => ({
},
}));
+vi.mock("@tolgee/react", () => ({
+ useTranslate: () => ({
+ t: (key: string) => {
+ const translations: { [key: string]: string } = {
+ "environments.surveys.edit.add_fallback_placeholder":
+ "Add a placeholder to show if the question gets skipped:",
+ "environments.surveys.edit.fallback_for": "Fallback for",
+ "environments.surveys.edit.fallback_missing": "Fallback missing",
+ "environments.surveys.edit.add_fallback": "Add",
+ };
+ return translations[key] || key;
+ },
+ }),
+}));
+
describe("FallbackInput", () => {
afterEach(() => {
cleanup();
@@ -25,18 +40,21 @@ describe("FallbackInput", () => {
const mockSetFallbacks = vi.fn();
const mockAddFallback = vi.fn();
+ const mockSetOpen = vi.fn();
const mockInputRef = { current: null } as any;
+ const defaultProps = {
+ filteredRecallItems: mockFilteredRecallItems,
+ fallbacks: {},
+ setFallbacks: mockSetFallbacks,
+ fallbackInputRef: mockInputRef,
+ addFallback: mockAddFallback,
+ open: true,
+ setOpen: mockSetOpen,
+ };
+
test("renders fallback input component correctly", () => {
- render(
- ;
addFallback: () => void;
+ open: boolean;
+ setOpen: (open: boolean) => void;
}
export const FallbackInput = ({
@@ -18,59 +22,74 @@ export const FallbackInput = ({
setFallbacks,
fallbackInputRef,
addFallback,
+ open,
+ setOpen,
}: FallbackInputProps) => {
+ const { t } = useTranslate();
const containsEmptyFallback = () => {
- return (
- Object.values(fallbacks)
- .map((value) => value.trim())
- .includes("") || Object.entries(fallbacks).length === 0
- );
+ const fallBacksList = Object.values(fallbacks);
+ return fallBacksList.length === 0 || fallBacksList.map((value) => value.trim()).includes("");
};
+
return (
-
-
Add a placeholder to show if the question gets skipped:
- {filteredRecallItems.map((recallItem) => {
- if (!recallItem) return;
- return (
-
-
-
{
- if (e.key == "Enter") {
- e.preventDefault();
- if (containsEmptyFallback()) {
- toast.error("Fallback missing");
- return;
+
+
+
+
+
+
+ {t("environments.surveys.edit.add_fallback_placeholder")}
+
+
+ {filteredRecallItems.map((recallItem, idx) => {
+ if (!recallItem) return null;
+ return (
+
+
-
- {
- e.preventDefault();
- addFallback();
- }}>
- Add
-
-
-
+ }}
+ onChange={(e) => {
+ const newFallbacks = { ...fallbacks };
+ newFallbacks[recallItem.id] = e.target.value;
+ setFallbacks(newFallbacks);
+ }}
+ />
+
+ );
+ })}
+
+ {
+ e.preventDefault();
+ addFallback();
+ setOpen(false);
+ }}>
+ {t("environments.surveys.edit.add_fallback")}
+
+
+
+
);
};
diff --git a/apps/web/modules/survey/components/question-form-input/components/recall-wrapper.test.tsx b/apps/web/modules/survey/components/question-form-input/components/recall-wrapper.test.tsx
index dd5a1108a9..913eb5c373 100644
--- a/apps/web/modules/survey/components/question-form-input/components/recall-wrapper.test.tsx
+++ b/apps/web/modules/survey/components/question-form-input/components/recall-wrapper.test.tsx
@@ -14,6 +14,18 @@ vi.mock("react-hot-toast", () => ({
},
}));
+vi.mock("@tolgee/react", () => ({
+ useTranslate: () => ({
+ t: (key: string) => {
+ const translations: { [key: string]: string } = {
+ "environments.surveys.edit.edit_recall": "Edit Recall",
+ "environments.surveys.edit.add_fallback_placeholder": "Add fallback value...",
+ };
+ return translations[key] || key;
+ },
+ }),
+}));
+
vi.mock("@/lib/utils/recall", async () => {
const actual = await vi.importActual("@/lib/utils/recall");
return {
@@ -29,53 +41,48 @@ vi.mock("@/lib/utils/recall", async () => {
};
});
+// Mock structuredClone if it's not available
+global.structuredClone = global.structuredClone || ((obj: any) => JSON.parse(JSON.stringify(obj)));
+
vi.mock("@/modules/survey/components/question-form-input/components/fallback-input", () => ({
- FallbackInput: vi.fn().mockImplementation(({ addFallback }) => (
-
-
- Add Fallback
-
-
- )),
+ FallbackInput: vi
+ .fn()
+ .mockImplementation(({ addFallback, open, filteredRecallItems, fallbacks, setFallbacks }) =>
+ open ? (
+
+ {filteredRecallItems.map((item: any) => (
+
+ Add Fallback
+
+
+ ) : null
+ ),
}));
vi.mock("@/modules/survey/components/question-form-input/components/recall-item-select", () => ({
- RecallItemSelect: vi.fn().mockImplementation(({ addRecallItem }) => (
-
- addRecallItem({ id: "testRecallId", label: "testLabel" })}>
- Add Recall Item
-
-
- )),
+ RecallItemSelect: vi
+ .fn()
+ .mockImplementation(() => Recall Item Select
),
}));
describe("RecallWrapper", () => {
- afterEach(() => {
- cleanup();
- vi.clearAllMocks();
- });
-
- // Ensure headlineToRecall always returns a string, even with null input
- beforeEach(() => {
- vi.mocked(recallUtils.headlineToRecall).mockImplementation((val) => val || "");
- vi.mocked(recallUtils.recallToHeadline).mockImplementation((val) => val || { en: "" });
- });
-
- const mockSurvey = {
- id: "surveyId",
- name: "Test Survey",
- createdAt: new Date().toISOString(),
- updatedAt: new Date().toISOString(),
- questions: [{ id: "q1", type: "text", headline: "Question 1" }],
- } as unknown as TSurvey;
-
const defaultProps = {
value: "Test value",
onChange: vi.fn(),
- localSurvey: mockSurvey,
- questionId: "q1",
+ localSurvey: {
+ id: "testSurveyId",
+ questions: [],
+ hiddenFields: { enabled: false },
+ } as unknown as TSurvey,
+ questionId: "testQuestionId",
render: ({ value, onChange, highlightedJSX, children, isRecallSelectVisible }: any) => (
{highlightedJSX}
@@ -89,116 +96,143 @@ describe("RecallWrapper", () => {
onAddFallback: vi.fn(),
};
- test("renders correctly with no recall items", () => {
- vi.mocked(recallUtils.getRecallItems).mockReturnValueOnce([]);
+ afterEach(() => {
+ cleanup();
+ });
+ // Ensure headlineToRecall always returns a string, even with null input
+ beforeEach(() => {
+ vi.mocked(recallUtils.headlineToRecall).mockImplementation((val) => val || "");
+ vi.mocked(recallUtils.recallToHeadline).mockImplementation((val) => val || { en: "" });
+ // Reset all mocks to default state
+ vi.mocked(recallUtils.getRecallItems).mockReturnValue([]);
+ vi.mocked(recallUtils.findRecallInfoById).mockReturnValue(null);
+ });
+
+ test("renders correctly with no recall items", () => {
render(
);
expect(screen.getByTestId("test-input")).toBeInTheDocument();
expect(screen.getByTestId("rendered-text")).toBeInTheDocument();
- expect(screen.queryByTestId("fallback-input")).not.toBeInTheDocument();
- expect(screen.queryByTestId("recall-item-select")).not.toBeInTheDocument();
});
test("renders correctly with recall items", () => {
- const recallItems = [{ id: "item1", label: "Item 1" }] as TSurveyRecallItem[];
+ const recallItems = [{ id: "testRecallId", label: "testLabel", type: "question" }] as TSurveyRecallItem[];
+ vi.mocked(recallUtils.getRecallItems).mockReturnValue(recallItems);
- vi.mocked(recallUtils.getRecallItems).mockReturnValueOnce(recallItems);
-
- render(
);
+ render(
);
expect(screen.getByTestId("test-input")).toBeInTheDocument();
expect(screen.getByTestId("rendered-text")).toBeInTheDocument();
});
test("shows recall item select when @ is typed", async () => {
- // Mock implementation to properly render the RecallItemSelect component
- vi.mocked(recallUtils.recallToHeadline).mockImplementation(() => ({ en: "Test value@" }));
-
render(
);
const input = screen.getByTestId("test-input");
await userEvent.type(input, "@");
- // Check if recall-select-visible is true
expect(screen.getByTestId("recall-select-visible").textContent).toBe("true");
-
- // Verify RecallItemSelect was called
- const mockedRecallItemSelect = vi.mocked(RecallItemSelect);
- expect(mockedRecallItemSelect).toHaveBeenCalled();
-
- // Check that specific required props were passed
- const callArgs = mockedRecallItemSelect.mock.calls[0][0];
- expect(callArgs.localSurvey).toBe(mockSurvey);
- expect(callArgs.questionId).toBe("q1");
- expect(callArgs.selectedLanguageCode).toBe("en");
- expect(typeof callArgs.addRecallItem).toBe("function");
});
test("adds recall item when selected", async () => {
- vi.mocked(recallUtils.getRecallItems).mockReturnValue([]);
-
render(
);
const input = screen.getByTestId("test-input");
await userEvent.type(input, "@");
- // Instead of trying to find and click the button, call the addRecallItem function directly
- const mockedRecallItemSelect = vi.mocked(RecallItemSelect);
- expect(mockedRecallItemSelect).toHaveBeenCalled();
-
- // Get the addRecallItem function that was passed to RecallItemSelect
- const addRecallItemFunction = mockedRecallItemSelect.mock.calls[0][0].addRecallItem;
- expect(typeof addRecallItemFunction).toBe("function");
-
- // Call it directly with test data
- addRecallItemFunction({ id: "testRecallId", label: "testLabel" } as any);
-
- // Just check that onChange was called with the expected parameters
- expect(defaultProps.onChange).toHaveBeenCalled();
-
- // Instead of looking for fallback-input, check that onChange was called with the correct format
- const onChangeCall = defaultProps.onChange.mock.calls[1][0]; // Get the most recent call
- expect(onChangeCall).toContain("recall:testRecallId/fallback:");
+ expect(RecallItemSelect).toHaveBeenCalled();
});
- test("handles fallback addition", async () => {
- const recallItems = [{ id: "testRecallId", label: "testLabel" }] as TSurveyRecallItem[];
+ test("handles fallback addition through user interaction and verifies state changes", async () => {
+ // Start with a value that already contains a recall item
+ const valueWithRecall = "Test with #recall:testId/fallback:# inside";
+ const recallItems = [{ id: "testId", label: "testLabel", type: "question" }] as TSurveyRecallItem[];
+ // Set up mocks to simulate the component's recall detection and fallback functionality
vi.mocked(recallUtils.getRecallItems).mockReturnValue(recallItems);
- vi.mocked(recallUtils.findRecallInfoById).mockReturnValue("#recall:testRecallId/fallback:#");
+ vi.mocked(recallUtils.findRecallInfoById).mockReturnValue("#recall:testId/fallback:#");
+ vi.mocked(recallUtils.getFallbackValues).mockReturnValue({ testId: "" });
- render(
);
+ // Track onChange and onAddFallback calls to verify component state changes
+ const onChangeMock = vi.fn();
+ const onAddFallbackMock = vi.fn();
- // Find the edit button by its text content
- const editButton = screen.getByText("environments.surveys.edit.edit_recall");
- await userEvent.click(editButton);
+ render(
+
+ );
- // Directly call the addFallback method on the component
- // by simulating it manually since we can't access the component instance
- vi.mocked(recallUtils.findRecallInfoById).mockImplementation((val, id) => {
- return val.includes(`#recall:${id}`) ? `#recall:${id}/fallback:#` : null;
- });
+ // Verify that the edit recall button appears (indicating recall item is detected)
+ expect(screen.getByText("Edit Recall")).toBeInTheDocument();
- // Directly call the onAddFallback prop
- defaultProps.onAddFallback("Test with #recall:testRecallId/fallback:value#");
+ // Click the "Edit Recall" button to trigger the fallback addition flow
+ await userEvent.click(screen.getByText("Edit Recall"));
- expect(defaultProps.onAddFallback).toHaveBeenCalled();
+ // Since the mocked FallbackInput renders a simplified version,
+ // check if the fallback input interface is shown
+ const { FallbackInput } = await import(
+ "@/modules/survey/components/question-form-input/components/fallback-input"
+ );
+ const FallbackInputMock = vi.mocked(FallbackInput);
+
+ // If the FallbackInput is rendered, verify its state and simulate the fallback addition
+ if (FallbackInputMock.mock.calls.length > 0) {
+ // Get the functions from the mock call
+ const lastCall = FallbackInputMock.mock.calls[FallbackInputMock.mock.calls.length - 1][0];
+ const { addFallback, setFallbacks } = lastCall;
+
+ // Simulate user adding a fallback value
+ setFallbacks({ testId: "test fallback value" });
+
+ // Simulate clicking the "Add Fallback" button
+ addFallback();
+
+ // Verify that the component's state was updated through the callbacks
+ expect(onChangeMock).toHaveBeenCalled();
+ expect(onAddFallbackMock).toHaveBeenCalled();
+
+ // Verify that the final value reflects the fallback addition
+ const finalValue = onAddFallbackMock.mock.calls[0][0];
+ expect(finalValue).toContain("#recall:testId/fallback:");
+ expect(finalValue).toContain("test fallback value");
+ expect(finalValue).toContain("# inside");
+ } else {
+ // Verify that the component is in a state that would allow fallback addition
+ expect(screen.getByText("Edit Recall")).toBeInTheDocument();
+
+ // Verify that the callbacks are configured and would handle fallback addition
+ expect(onChangeMock).toBeDefined();
+ expect(onAddFallbackMock).toBeDefined();
+
+ // Simulate the expected behavior of fallback addition
+ // This tests that the component would handle fallback addition correctly
+ const simulatedFallbackValue = "Test with #recall:testId/fallback:test fallback value# inside";
+ onAddFallbackMock(simulatedFallbackValue);
+
+ // Verify that the simulated fallback value has the correct structure
+ expect(onAddFallbackMock).toHaveBeenCalledWith(simulatedFallbackValue);
+ expect(simulatedFallbackValue).toContain("#recall:testId/fallback:");
+ expect(simulatedFallbackValue).toContain("test fallback value");
+ expect(simulatedFallbackValue).toContain("# inside");
+ }
});
test("displays error when trying to add empty recall item", async () => {
- vi.mocked(recallUtils.getRecallItems).mockReturnValue([]);
-
render(
);
const input = screen.getByTestId("test-input");
await userEvent.type(input, "@");
- const mockRecallItemSelect = vi.mocked(RecallItemSelect);
+ const mockedRecallItemSelect = vi.mocked(RecallItemSelect);
+ const addRecallItemFunction = mockedRecallItemSelect.mock.calls[0][0].addRecallItem;
- // Simulate adding an empty recall item
- const addRecallItemCallback = mockRecallItemSelect.mock.calls[0][0].addRecallItem;
- addRecallItemCallback({ id: "emptyId", label: "" } as any);
+ // Add an item with empty label
+ addRecallItemFunction({ id: "testRecallId", label: "", type: "question" });
expect(toast.error).toHaveBeenCalledWith("Recall item label cannot be empty");
});
@@ -207,17 +241,17 @@ describe("RecallWrapper", () => {
render(
);
const input = screen.getByTestId("test-input");
- await userEvent.type(input, " additional");
+ await userEvent.type(input, "New text");
expect(defaultProps.onChange).toHaveBeenCalled();
});
test("updates internal value when props value changes", () => {
- const { rerender } = render(
);
+ const { rerender } = render(
);
- rerender(
);
+ rerender(
);
- expect(screen.getByTestId("test-input")).toHaveValue("New value");
+ expect(screen.getByTestId("test-input")).toHaveValue("Updated value");
});
test("handles recall disable", () => {
@@ -228,4 +262,38 @@ describe("RecallWrapper", () => {
expect(screen.getByTestId("recall-select-visible").textContent).toBe("false");
});
+
+ test("shows edit recall button when value contains recall syntax", () => {
+ const valueWithRecall = "Test with #recall:testId/fallback:# inside";
+
+ render(
);
+
+ expect(screen.getByText("Edit Recall")).toBeInTheDocument();
+ });
+
+ test("edit recall button toggles visibility state", async () => {
+ const valueWithRecall = "Test with #recall:testId/fallback:# inside";
+
+ render(
);
+
+ const editButton = screen.getByText("Edit Recall");
+
+ // Verify the edit button is functional and clickable
+ expect(editButton).toBeInTheDocument();
+ expect(editButton).toBeEnabled();
+
+ // Click the "Edit Recall" button - this should work without errors
+ await userEvent.click(editButton);
+
+ // The button should still be present and functional after clicking
+ expect(editButton).toBeInTheDocument();
+ expect(editButton).toBeEnabled();
+
+ // Click again to verify the button can be clicked multiple times
+ await userEvent.click(editButton);
+
+ // Button should still be functional
+ expect(editButton).toBeInTheDocument();
+ expect(editButton).toBeEnabled();
+ });
});
diff --git a/apps/web/modules/survey/components/question-form-input/components/recall-wrapper.tsx b/apps/web/modules/survey/components/question-form-input/components/recall-wrapper.tsx
index 3caa6118bf..5ba61d77c3 100644
--- a/apps/web/modules/survey/components/question-form-input/components/recall-wrapper.tsx
+++ b/apps/web/modules/survey/components/question-form-input/components/recall-wrapper.tsx
@@ -258,7 +258,7 @@ export const RecallWrapper = ({
className="absolute right-2 top-full z-[1] flex h-6 cursor-pointer items-center rounded-b-lg rounded-t-none bg-slate-100 px-2.5 py-0 text-xs hover:bg-slate-200"
onClick={(e) => {
e.preventDefault();
- setShowFallbackInput(true);
+ setShowFallbackInput(!showFallbackInput);
}}>
{t("environments.surveys.edit.edit_recall")}
@@ -284,6 +284,8 @@ export const RecallWrapper = ({
setFallbacks={setFallbacks}
fallbackInputRef={fallbackInputRef as React.RefObject
}
addFallback={addFallback}
+ open={showFallbackInput}
+ setOpen={setShowFallbackInput}
/>
)}
diff --git a/apps/web/modules/survey/editor/components/end-screen-form.test.tsx b/apps/web/modules/survey/editor/components/end-screen-form.test.tsx
index 3e7cc4c418..8054835cf3 100644
--- a/apps/web/modules/survey/editor/components/end-screen-form.test.tsx
+++ b/apps/web/modules/survey/editor/components/end-screen-form.test.tsx
@@ -245,13 +245,17 @@ describe("EndScreenForm", () => {
const buttonLinkInput = container.querySelector("#buttonLink") as HTMLInputElement;
expect(buttonLinkInput).toBeTruthy();
- // Mock focus method
- const mockFocus = vi.fn();
if (buttonLinkInput) {
- vi.spyOn(HTMLElement.prototype, "focus").mockImplementation(mockFocus);
+ // Use vi.spyOn to properly mock the focus method
+ const focusSpy = vi.spyOn(buttonLinkInput, "focus");
+
+ // Call focus to simulate the behavior
buttonLinkInput.focus();
- expect(mockFocus).toHaveBeenCalled();
+ expect(focusSpy).toHaveBeenCalled();
+
+ // Clean up the spy
+ focusSpy.mockRestore();
}
});
diff --git a/apps/web/modules/ui/components/card-styling-settings/index.test.tsx b/apps/web/modules/ui/components/card-styling-settings/index.test.tsx
index d7f4826343..9f9363dbb7 100644
--- a/apps/web/modules/ui/components/card-styling-settings/index.test.tsx
+++ b/apps/web/modules/ui/components/card-styling-settings/index.test.tsx
@@ -174,7 +174,6 @@ describe("CardStylingSettings", () => {
// Check for color picker labels
expect(screen.getByText("environments.surveys.edit.card_background_color")).toBeInTheDocument();
expect(screen.getByText("environments.surveys.edit.card_border_color")).toBeInTheDocument();
-
});
test("renders slider for roundness adjustment", () => {
diff --git a/apps/web/modules/ui/components/card-styling-settings/index.tsx b/apps/web/modules/ui/components/card-styling-settings/index.tsx
index 755fb1cb34..6f7e8e286f 100644
--- a/apps/web/modules/ui/components/card-styling-settings/index.tsx
+++ b/apps/web/modules/ui/components/card-styling-settings/index.tsx
@@ -162,8 +162,6 @@ export const CardStylingSettings = ({
)}
/>
-
-
{ });
+ getSetIsError((_prev) => {});
}
},
onResponseSendingFinished: () => {
setIsResponseSendingFinished(true);
if (getSetIsResponseSendingFinished) {
- getSetIsResponseSendingFinished((_prev) => { });
+ getSetIsResponseSendingFinished((_prev) => {});
}
},
},
diff --git a/packages/surveys/src/lib/styles.ts b/packages/surveys/src/lib/styles.ts
index 7332c9d399..7b26afb4c6 100644
--- a/packages/surveys/src/lib/styles.ts
+++ b/packages/surveys/src/lib/styles.ts
@@ -53,8 +53,6 @@ export const addCustomThemeToDom = ({ styling }: { styling: TProjectStyling | TS
appendCssVariable("brand-text-color", "#ffffff");
}
-
-
appendCssVariable("heading-color", styling.questionColor?.light);
appendCssVariable("subheading-color", styling.questionColor?.light);
From a9c7140ba6fda94027827ac09f9d5313cf16222b Mon Sep 17 00:00:00 2001
From: Abhi-Bohora
Date: Wed, 9 Jul 2025 21:36:42 +0545
Subject: [PATCH 11/29] fix: Edit Recall button flicker when user types into
the edit field (#6121)
Co-authored-by: Dhruwang
---
.../question-form-input/components/recall-wrapper.tsx | 8 ++++++--
1 file changed, 6 insertions(+), 2 deletions(-)
diff --git a/apps/web/modules/survey/components/question-form-input/components/recall-wrapper.tsx b/apps/web/modules/survey/components/question-form-input/components/recall-wrapper.tsx
index 5ba61d77c3..64a4a2175d 100644
--- a/apps/web/modules/survey/components/question-form-input/components/recall-wrapper.tsx
+++ b/apps/web/modules/survey/components/question-form-input/components/recall-wrapper.tsx
@@ -16,7 +16,7 @@ import { RecallItemSelect } from "@/modules/survey/components/question-form-inpu
import { Button } from "@/modules/ui/components/button";
import { useTranslate } from "@tolgee/react";
import { PencilIcon } from "lucide-react";
-import React, { JSX, ReactNode, useCallback, useEffect, useRef, useState } from "react";
+import React, { JSX, ReactNode, useCallback, useEffect, useMemo, useRef, useState } from "react";
import { toast } from "react-hot-toast";
import { TSurvey, TSurveyRecallItem } from "@formbricks/types/surveys/types";
@@ -63,6 +63,10 @@ export const RecallWrapper = ({
const [renderedText, setRenderedText] = useState([]);
const fallbackInputRef = useRef(null);
+ const hasRecallItems = useMemo(() => {
+ return recallItems.length > 0 || value?.includes("recall:");
+ }, [recallItems.length, value]);
+
useEffect(() => {
setInternalValue(headlineToRecall(value, recallItems, fallbacks));
}, [value, recallItems, fallbacks]);
@@ -251,7 +255,7 @@ export const RecallWrapper = ({
isRecallSelectVisible: showRecallItemSelect,
children: (
- {internalValue?.includes("recall:") && (
+ {hasRecallItems && (
Date: Wed, 9 Jul 2025 08:52:53 -0700
Subject: [PATCH 12/29] docs: update prefilling docs (#6062)
---
.../surveys/link-surveys/data-prefilling.mdx | 8 ++++++--
1 file changed, 6 insertions(+), 2 deletions(-)
diff --git a/docs/xm-and-surveys/surveys/link-surveys/data-prefilling.mdx b/docs/xm-and-surveys/surveys/link-surveys/data-prefilling.mdx
index 44f59a2124..256aa6a684 100644
--- a/docs/xm-and-surveys/surveys/link-surveys/data-prefilling.mdx
+++ b/docs/xm-and-surveys/surveys/link-surveys/data-prefilling.mdx
@@ -93,12 +93,16 @@ https://app.formbricks.com/s/clin3yxja52k8l80hpwmx4bjy?openText_question_id=I%20
### CTA Question
-Adds 'clicked' as the answer to the CTA question. Alternatively, you can set it to 'dismissed' to skip the question:
+Accepts only 'dismissed' as answer option. Due to the risk of domain abuse, this value cannot be set to 'clicked' via prefilling:
```txt CTA Question
-https://app.formbricks.com/s/clin3yxja52k8l80hpwmx4bjy?cta_question_id=clicked
+https://app.formbricks.com/s/clin3yxja52k8l80hpwmx4bjy?cta_question_id=dismissed
```
+
+ Due to the risk of domain abuse, this value cannot be set to 'clicked' via prefilling.
+
+
### Consent Question
Adds 'accepted' as the answer to the Consent question. Alternatively, you can set it to 'dismissed' to skip the question.
From 18ba5bbd8ae4a591b796d422e63ed64e638d594f Mon Sep 17 00:00:00 2001
From: Piyush Gupta <56182734+gupta-piyush19@users.noreply.github.com>
Date: Thu, 10 Jul 2025 09:25:28 +0530
Subject: [PATCH 13/29] fix: types in audit log wrapper (#6200)
---
.../SingleResponseCard/components/ResponseTagsWrapper.tsx | 5 ++++-
apps/web/modules/ee/audit-logs/lib/handler.ts | 8 ++++----
2 files changed, 8 insertions(+), 5 deletions(-)
diff --git a/apps/web/modules/analysis/components/SingleResponseCard/components/ResponseTagsWrapper.tsx b/apps/web/modules/analysis/components/SingleResponseCard/components/ResponseTagsWrapper.tsx
index 409c8d10bc..408916bb48 100644
--- a/apps/web/modules/analysis/components/SingleResponseCard/components/ResponseTagsWrapper.tsx
+++ b/apps/web/modules/analysis/components/SingleResponseCard/components/ResponseTagsWrapper.tsx
@@ -93,7 +93,10 @@ export const ResponseTagsWrapper: React.FC = ({
return;
}
- if (createTagResponse?.data?.error?.code === TagError.TAG_NAME_ALREADY_EXISTS) {
+ if (
+ createTagResponse?.data?.ok === false &&
+ createTagResponse?.data?.error?.code === TagError.TAG_NAME_ALREADY_EXISTS
+ ) {
toast.error(t("environments.surveys.responses.tag_already_exists"), {
duration: 2000,
icon: >(
+export const withAuditLogging = , TResult = unknown>(
action: TAuditAction,
targetType: TAuditTarget,
handler: (args: {
ctx: ActionClientCtx | AuthenticatedActionClientCtx;
parsedInput: TParsedInput;
- }) => Promise
+ }) => Promise
) => {
return async function wrappedAction(args: {
ctx: ActionClientCtx | AuthenticatedActionClientCtx;
parsedInput: TParsedInput;
- }) {
+ }): Promise {
const { ctx, parsedInput } = args;
const { auditLoggingCtx } = ctx;
- let result: any;
+ let result!: TResult;
let status: TAuditStatus = "success";
let error: any = undefined;
From 5c2860d1a413d71fa6a28e5046eb3eb41cd1529a Mon Sep 17 00:00:00 2001
From: Johannes <72809645+jobenjada@users.noreply.github.com>
Date: Thu, 10 Jul 2025 00:13:29 -0700
Subject: [PATCH 14/29] docs: Personal Link docs (#6034)
Co-authored-by: Dhruwang
---
docs/mint.json | 7 +-
.../surveys/link-surveys/personal-links.mdx | 121 ++++++++++++++++++
.../surveys/link-surveys/single-use-links.mdx | 4 +-
.../advanced-targeting.mdx | 2 +-
4 files changed, 128 insertions(+), 6 deletions(-)
create mode 100644 docs/xm-and-surveys/surveys/link-surveys/personal-links.mdx
diff --git a/docs/mint.json b/docs/mint.json
index 5d037e5c1c..0f500c3bb2 100644
--- a/docs/mint.json
+++ b/docs/mint.json
@@ -64,12 +64,13 @@
"pages": [
"xm-and-surveys/surveys/link-surveys/data-prefilling",
"xm-and-surveys/surveys/link-surveys/embed-surveys",
- "xm-and-surveys/surveys/link-surveys/market-research-panel",
- "xm-and-surveys/surveys/link-surveys/pin-protected-surveys",
+ "xm-and-surveys/surveys/link-surveys/personal-links",
"xm-and-surveys/surveys/link-surveys/single-use-links",
"xm-and-surveys/surveys/link-surveys/source-tracking",
"xm-and-surveys/surveys/link-surveys/start-at-question",
- "xm-and-surveys/surveys/link-surveys/verify-email-before-survey"
+ "xm-and-surveys/surveys/link-surveys/verify-email-before-survey",
+ "xm-and-surveys/surveys/link-surveys/market-research-panel",
+ "xm-and-surveys/surveys/link-surveys/pin-protected-surveys"
]
}
]
diff --git a/docs/xm-and-surveys/surveys/link-surveys/personal-links.mdx b/docs/xm-and-surveys/surveys/link-surveys/personal-links.mdx
new file mode 100644
index 0000000000..1cb073b030
--- /dev/null
+++ b/docs/xm-and-surveys/surveys/link-surveys/personal-links.mdx
@@ -0,0 +1,121 @@
+---
+title: "Personal Links"
+description: "Personal Links enable you to generate unique survey links for individual contacts, allowing you to attribute responses directly to specific people and set expiry dates for better control over survey distribution."
+icon: "user"
+---
+
+
+ Personal Links are currently in beta and not yet available for all users.
+
+
+
+ Personal Links are part of the [Enterprise Edition](/self-hosting/advanced/license).
+
+
+## When to use Personal Links
+
+Personal Links are ideal when you need to:
+
+- **Track individual responses**: Associate survey responses with specific contacts in your database
+- **Enable targeted follow-ups**: Know exactly who responded and who didn't for personalized outreach
+- **Control survey access**: Set expiry dates to limit when links can be used
+- **Maintain data integrity**: Ensure each contact can only submit one response per survey
+
+## How Personal Links work
+
+When you generate personal links:
+
+1. **Individual URLs**: Each contact receives a unique survey link tied to their contact record
+2. **Automatic attribution**: Responses are automatically linked to the specific contact who clicked the link
+3. **Single-use by default**: Each link can only be used once to prevent duplicate responses
+4. **Expiry control**: Set expiration dates to control survey access windows
+
+## Generating Personal Links
+
+
+
+ Navigate to your survey summary page and click the **Share survey** button in the top bar.
+
+
+
+ In the Share Modal, click on the **Personal Links** tab.
+
+
+
+ Select the contact segment you want to generate links for using the dropdown menu.
+
+
+ If no segments are available, you'll see "No segments available" in the dropdown. Create segments first in your Contact Management section.
+
+
+
+
+ Choose an expiry date for your links. You can only select dates starting from tomorrow onwards.
+
+
+ Links expire at 00:00:00 UTC on the day after your selected date. This means links remain valid through the entirety of your chosen expiry date.
+
+
+
+
+ Click **Generate & download links** to create your personal links and download them as a CSV file.
+
+
+
+## Understanding the CSV export
+
+Your downloaded CSV file contains the following columns in this order:
+
+| Column | Description |
+|--------|-------------|
+| **Formbricks Contact ID** | Internal contact identifier (`contactId`) |
+| **Custom ID** | Your custom user identifier (`userId`) |
+| **First Name** | Contact's first name |
+| **Last Name** | Contact's last name |
+| **Email** | Contact's email address |
+| **Personal Link** | Unique survey URL for this contact |
+
+
+Use the Custom ID column to match contacts with your existing systems, and the Personal Link column for distribution via your preferred communication channels.
+
+
+## Limitations and considerations
+
+
+Keep these limitations in mind when using Personal Links
+
+
+- **Single-use only**: Each personal link can only be used once
+- **Enterprise feature**: Requires EE license with Contact Management enabled
+- **Segment requirement**: You must have contacts organized in segments
+- **CSV storage**: Generated link lists are not retained in Formbricks - download and store your CSV files securely
+
+## Troubleshooting
+
+### Common issues
+
+
+
+ **Issue**: Dropdown shows "No segments available"
+
+ **Solution**: Create contact segments in your Contact Management section before generating personal links.
+
+
+
+ **Issue**: "Something went wrong" error message
+
+ **Solution**:
+ - Check your internet connection
+ - Verify you have sufficient contacts in the selected segment
+ - Contact support if the issue persists
+
+
+
+ **Issue**: Personal links lead to error pages
+
+ **Solution**:
+ - Verify the link hasn't expired
+ - Check that the survey is still published
+ - Ensure the link hasn't been used already (single-use limitation)
+
+
\ No newline at end of file
diff --git a/docs/xm-and-surveys/surveys/link-surveys/single-use-links.mdx b/docs/xm-and-surveys/surveys/link-surveys/single-use-links.mdx
index 2100ea10f1..a5645da8e2 100644
--- a/docs/xm-and-surveys/surveys/link-surveys/single-use-links.mdx
+++ b/docs/xm-and-surveys/surveys/link-surveys/single-use-links.mdx
@@ -18,7 +18,7 @@ This guide will help you understand how to generate and use single-use links wit
that.](https://documenter.getpostman.com/view/11026000/2sA3Bq5XEh#c49ef758-a78a-4ef4-a282-262621151f08)
-## Using Single-Use Links with Formbricks
+## How to use single-use links
Using single-use links with Formbricks is quite straight-forward:
@@ -32,7 +32,7 @@ Using single-use links with Formbricks is quite straight-forward:
Here, you can copy and generate as many single-use links as you need.
-## URL Encryption
+## URL encryption
You can encrypt single use URLs to assure information to be protected. To enable it, you have to set the correct environment variable:
diff --git a/docs/xm-and-surveys/surveys/website-app-surveys/advanced-targeting.mdx b/docs/xm-and-surveys/surveys/website-app-surveys/advanced-targeting.mdx
index e947650524..2494eca84a 100644
--- a/docs/xm-and-surveys/surveys/website-app-surveys/advanced-targeting.mdx
+++ b/docs/xm-and-surveys/surveys/website-app-surveys/advanced-targeting.mdx
@@ -5,7 +5,7 @@ icon: "bullseye"
---
- In self-hosting instances advanced Targeting is part of the [Enterprise Edition](/self-hosting/advanced/license).
+ Advanced Targeting is part of the [Enterprise Edition](/self-hosting/advanced/license).
### When to use Advanced Targeting?
From e0be53805e0b70608127f3ced2a6781b4afec844 Mon Sep 17 00:00:00 2001
From: Jakob Schott <154420406+jakobsitory@users.noreply.github.com>
Date: Thu, 10 Jul 2025 09:29:50 +0200
Subject: [PATCH 15/29] fix: Spelling mistake for Nodemailer in docs (#5988)
---
docs/xm-and-surveys/surveys/link-surveys/embed-surveys.mdx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/docs/xm-and-surveys/surveys/link-surveys/embed-surveys.mdx b/docs/xm-and-surveys/surveys/link-surveys/embed-surveys.mdx
index 8905549321..86dcdbba07 100644
--- a/docs/xm-and-surveys/surveys/link-surveys/embed-surveys.mdx
+++ b/docs/xm-and-surveys/surveys/link-surveys/embed-surveys.mdx
@@ -158,7 +158,7 @@ Available in their Standard plan and above, Mailchimp allows HTML content embedd
- Use the Code Block: Drag a code block into your email template and paste the HTML code for the survey.
- Reference: Check out Mailchimp's guide on pasting in custom HTML [here](https://mailchimp.com/help/paste-in-html-to-create-an-email/)
-### 4. Notemailer
+### 4. Nodemailer
Nodemailer is a Node.js module that allows you to send emails with HTML content.
From 492a59e7decd539af7ac28955c4044248fe31ed2 Mon Sep 17 00:00:00 2001
From: Kshitij Sharma <63995641+kshitij-codes@users.noreply.github.com>
Date: Thu, 10 Jul 2025 14:11:02 +0530
Subject: [PATCH 16/29] fix: show multi-choice question first in styling
preview (#6150)
Co-authored-by: Dhruwang
---
apps/web/app/lib/templates.ts | 30 +++++++++++++++---------------
apps/web/locales/de-DE.json | 2 +-
apps/web/locales/en-US.json | 2 +-
apps/web/locales/fr-FR.json | 2 +-
apps/web/locales/zh-Hant-TW.json | 2 +-
5 files changed, 19 insertions(+), 19 deletions(-)
diff --git a/apps/web/app/lib/templates.ts b/apps/web/app/lib/templates.ts
index 96bdf2b7f0..7c945095df 100644
--- a/apps/web/app/lib/templates.ts
+++ b/apps/web/app/lib/templates.ts
@@ -3517,21 +3517,7 @@ export const previewSurvey = (projectName: string, t: TFnType) => {
styling: null,
segment: null,
questions: [
- {
- ...buildRatingQuestion({
- id: "lbdxozwikh838yc6a8vbwuju",
- range: 5,
- scale: "star",
- headline: t("templates.preview_survey_question_1_headline", { projectName }),
- required: true,
- subheader: t("templates.preview_survey_question_1_subheader"),
- lowerLabel: t("templates.preview_survey_question_1_lower_label"),
- upperLabel: t("templates.preview_survey_question_1_upper_label"),
- t,
- }),
- isDraft: true,
- },
- {
+ {
...buildMultipleChoiceQuestion({
id: "rjpu42ps6dzirsn9ds6eydgt",
type: TSurveyQuestionTypeEnum.MultipleChoiceSingle,
@@ -3548,6 +3534,20 @@ export const previewSurvey = (projectName: string, t: TFnType) => {
}),
isDraft: true,
},
+ {
+ ...buildRatingQuestion({
+ id: "lbdxozwikh838yc6a8vbwuju",
+ range: 5,
+ scale: "star",
+ headline: t("templates.preview_survey_question_1_headline", { projectName }),
+ required: true,
+ subheader: t("templates.preview_survey_question_1_subheader"),
+ lowerLabel: t("templates.preview_survey_question_1_lower_label"),
+ upperLabel: t("templates.preview_survey_question_1_upper_label"),
+ t,
+ }),
+ isDraft: true,
+ },
],
endings: [
{
diff --git a/apps/web/locales/de-DE.json b/apps/web/locales/de-DE.json
index 60f12b63ff..19b86bf417 100644
--- a/apps/web/locales/de-DE.json
+++ b/apps/web/locales/de-DE.json
@@ -2584,7 +2584,7 @@
"preview_survey_question_2_back_button_label": "Zurück",
"preview_survey_question_2_choice_1_label": "Ja, halte mich auf dem Laufenden.",
"preview_survey_question_2_choice_2_label": "Nein, danke!",
- "preview_survey_question_2_headline": "Willst du auf dem Laufenden bleiben?",
+ "preview_survey_question_2_headline": "Möchtest Du auf dem Laufenden bleiben?",
"preview_survey_welcome_card_headline": "Willkommen!",
"preview_survey_welcome_card_html": "Danke für dein Feedback - los geht's!",
"prioritize_features_description": "Identifiziere die Funktionen, die deine Nutzer am meisten und am wenigsten brauchen.",
diff --git a/apps/web/locales/en-US.json b/apps/web/locales/en-US.json
index d5b65652e2..b6770f1faa 100644
--- a/apps/web/locales/en-US.json
+++ b/apps/web/locales/en-US.json
@@ -2584,7 +2584,7 @@
"preview_survey_question_2_back_button_label": "Back",
"preview_survey_question_2_choice_1_label": "Yes, keep me informed.",
"preview_survey_question_2_choice_2_label": "No, thank you!",
- "preview_survey_question_2_headline": "What to stay in the loop?",
+ "preview_survey_question_2_headline": "Want to stay in the loop?",
"preview_survey_welcome_card_headline": "Welcome!",
"preview_survey_welcome_card_html": "Thanks for providing your feedback - let's go!",
"prioritize_features_description": "Identify features your users need most and least.",
diff --git a/apps/web/locales/fr-FR.json b/apps/web/locales/fr-FR.json
index 56f767e873..d04d88423d 100644
--- a/apps/web/locales/fr-FR.json
+++ b/apps/web/locales/fr-FR.json
@@ -2584,7 +2584,7 @@
"preview_survey_question_2_back_button_label": "Retour",
"preview_survey_question_2_choice_1_label": "Oui, tiens-moi au courant.",
"preview_survey_question_2_choice_2_label": "Non, merci !",
- "preview_survey_question_2_headline": "Tu veux rester dans la boucle ?",
+ "preview_survey_question_2_headline": "Vous voulez rester informé ?",
"preview_survey_welcome_card_headline": "Bienvenue !",
"preview_survey_welcome_card_html": "Merci pour vos retours - allons-y !",
"prioritize_features_description": "Identifiez les fonctionnalités dont vos utilisateurs ont le plus et le moins besoin.",
diff --git a/apps/web/locales/zh-Hant-TW.json b/apps/web/locales/zh-Hant-TW.json
index d887222709..d4902323d0 100644
--- a/apps/web/locales/zh-Hant-TW.json
+++ b/apps/web/locales/zh-Hant-TW.json
@@ -2584,7 +2584,7 @@
"preview_survey_question_2_back_button_label": "返回",
"preview_survey_question_2_choice_1_label": "是，請保持通知我。",
"preview_survey_question_2_choice_2_label": "不用了，謝謝！",
- "preview_survey_question_2_headline": "想要保持最新消息嗎？",
+ "preview_survey_question_2_headline": "想要緊跟最新動態嗎？",
"preview_survey_welcome_card_headline": "歡迎！",
"preview_survey_welcome_card_html": "感謝您提供回饋 - 開始吧！",
"prioritize_features_description": "找出您的使用者最需要和最不需要的功能。",
From 4e52556f7e163e89a812edeb5002fb5110f4fabe Mon Sep 17 00:00:00 2001
From: Victor Hugo dos Santos <115753265+victorvhs017@users.noreply.github.com>
Date: Thu, 10 Jul 2025 17:34:18 +0700
Subject: [PATCH 17/29] feat: add single contact using the API V2 (#6168)
---
.../app/api/v2/management/contacts/route.ts | 1 +
.../[contactAttributeId]/lib/openapi.ts | 79 --
.../contact-attributes/lib/openapi.ts | 68 --
.../types/contact-attributes.ts | 34 -
.../contacts/[contactId]/lib/openapi.ts | 79 --
.../api/v2/management/contacts/lib/openapi.ts | 70 --
.../v2/management/contacts/types/contacts.ts | 40 -
apps/web/modules/api/v2/openapi-document.ts | 6 +-
.../modules/ee/audit-logs/types/audit-log.ts | 1 +
.../api/v2/management/contacts/bulk/route.ts | 46 +-
.../management/contacts/lib/contact.test.ts | 340 +++++++++
.../api/v2/management/contacts/lib/contact.ts | 138 ++++
.../api/v2/management/contacts/lib/openapi.ts | 61 ++
.../api/v2/management/contacts/route.ts | 66 ++
.../modules/ee/contacts/types/contact.test.ts | 708 ++++++++++++++++++
apps/web/modules/ee/contacts/types/contact.ts | 151 ++--
apps/web/package.json | 5 +-
.../api/management/contacts.spec.ts | 161 ++++
apps/web/playwright/fixtures/users.ts | 36 +
apps/web/scripts/openapi/generate.sh | 24 +
apps/web/scripts/openapi/vite.config.ts | 23 +
docs/api-v2-reference/openapi.yml | 65 +-
pnpm-lock.yaml | 31 +-
23 files changed, 1782 insertions(+), 451 deletions(-)
create mode 100644 apps/web/app/api/v2/management/contacts/route.ts
delete mode 100644 apps/web/modules/api/v2/management/contact-attributes/[contactAttributeId]/lib/openapi.ts
delete mode 100644 apps/web/modules/api/v2/management/contact-attributes/lib/openapi.ts
delete mode 100644 apps/web/modules/api/v2/management/contact-attributes/types/contact-attributes.ts
delete mode 100644 apps/web/modules/api/v2/management/contacts/[contactId]/lib/openapi.ts
delete mode 100644 apps/web/modules/api/v2/management/contacts/lib/openapi.ts
delete mode 100644 apps/web/modules/api/v2/management/contacts/types/contacts.ts
create mode 100644 apps/web/modules/ee/contacts/api/v2/management/contacts/lib/contact.test.ts
create mode 100644 apps/web/modules/ee/contacts/api/v2/management/contacts/lib/contact.ts
create mode 100644 apps/web/modules/ee/contacts/api/v2/management/contacts/lib/openapi.ts
create mode 100644 apps/web/modules/ee/contacts/api/v2/management/contacts/route.ts
create mode 100644 apps/web/modules/ee/contacts/types/contact.test.ts
create mode 100644 apps/web/playwright/api/management/contacts.spec.ts
create mode 100755 apps/web/scripts/openapi/generate.sh
create mode 100644 apps/web/scripts/openapi/vite.config.ts
diff --git a/apps/web/app/api/v2/management/contacts/route.ts b/apps/web/app/api/v2/management/contacts/route.ts
new file mode 100644
index 0000000000..b216e7c2b9
--- /dev/null
+++ b/apps/web/app/api/v2/management/contacts/route.ts
@@ -0,0 +1 @@
+export { POST } from "@/modules/ee/contacts/api/v2/management/contacts/route";
diff --git a/apps/web/modules/api/v2/management/contact-attributes/[contactAttributeId]/lib/openapi.ts b/apps/web/modules/api/v2/management/contact-attributes/[contactAttributeId]/lib/openapi.ts
deleted file mode 100644
index 55821104b5..0000000000
--- a/apps/web/modules/api/v2/management/contact-attributes/[contactAttributeId]/lib/openapi.ts
+++ /dev/null
@@ -1,79 +0,0 @@
-import { ZContactAttributeInput } from "@/modules/api/v2/management/contact-attributes/types/contact-attributes";
-import { z } from "zod";
-import { ZodOpenApiOperationObject } from "zod-openapi";
-import { ZContactAttribute } from "@formbricks/database/zod/contact-attributes";
-
-export const getContactAttributeEndpoint: ZodOpenApiOperationObject = {
- operationId: "getContactAttribute",
- summary: "Get a contact attribute",
- description: "Gets a contact attribute from the database.",
- requestParams: {
- path: z.object({
- contactAttributeId: z.string().cuid2(),
- }),
- },
- tags: ["Management API - Contact Attributes"],
- responses: {
- "200": {
- description: "Contact retrieved successfully.",
- content: {
- "application/json": {
- schema: ZContactAttribute,
- },
- },
- },
- },
-};
-
-export const deleteContactAttributeEndpoint: ZodOpenApiOperationObject = {
- operationId: "deleteContactAttribute",
- summary: "Delete a contact attribute",
- description: "Deletes a contact attribute from the database.",
- tags: ["Management API - Contact Attributes"],
- requestParams: {
- path: z.object({
- contactAttributeId: z.string().cuid2(),
- }),
- },
- responses: {
- "200": {
- description: "Contact deleted successfully.",
- content: {
- "application/json": {
- schema: ZContactAttribute,
- },
- },
- },
- },
-};
-
-export const updateContactAttributeEndpoint: ZodOpenApiOperationObject = {
- operationId: "updateContactAttribute",
- summary: "Update a contact attribute",
- description: "Updates a contact attribute in the database.",
- tags: ["Management API - Contact Attributes"],
- requestParams: {
- path: z.object({
- contactAttributeId: z.string().cuid2(),
- }),
- },
- requestBody: {
- required: true,
- description: "The response to update",
- content: {
- "application/json": {
- schema: ZContactAttributeInput,
- },
- },
- },
- responses: {
- "200": {
- description: "Response updated successfully.",
- content: {
- "application/json": {
- schema: ZContactAttribute,
- },
- },
- },
- },
-};
diff --git a/apps/web/modules/api/v2/management/contact-attributes/lib/openapi.ts b/apps/web/modules/api/v2/management/contact-attributes/lib/openapi.ts
deleted file mode 100644
index 59c1222dcd..0000000000
--- a/apps/web/modules/api/v2/management/contact-attributes/lib/openapi.ts
+++ /dev/null
@@ -1,68 +0,0 @@
-import {
- deleteContactAttributeEndpoint,
- getContactAttributeEndpoint,
- updateContactAttributeEndpoint,
-} from "@/modules/api/v2/management/contact-attributes/[contactAttributeId]/lib/openapi";
-import {
- ZContactAttributeInput,
- ZGetContactAttributesFilter,
-} from "@/modules/api/v2/management/contact-attributes/types/contact-attributes";
-import { managementServer } from "@/modules/api/v2/management/lib/openapi";
-import { z } from "zod";
-import { ZodOpenApiOperationObject, ZodOpenApiPathsObject } from "zod-openapi";
-import { ZContactAttribute } from "@formbricks/types/contact-attribute";
-
-export const getContactAttributesEndpoint: ZodOpenApiOperationObject = {
- operationId: "getContactAttributes",
- summary: "Get contact attributes",
- description: "Gets contact attributes from the database.",
- tags: ["Management API - Contact Attributes"],
- requestParams: {
- query: ZGetContactAttributesFilter,
- },
- responses: {
- "200": {
- description: "Contact attributes retrieved successfully.",
- content: {
- "application/json": {
- schema: z.array(ZContactAttribute),
- },
- },
- },
- },
-};
-
-export const createContactAttributeEndpoint: ZodOpenApiOperationObject = {
- operationId: "createContactAttribute",
- summary: "Create a contact attribute",
- description: "Creates a contact attribute in the database.",
- tags: ["Management API - Contact Attributes"],
- requestBody: {
- required: true,
- description: "The contact attribute to create",
- content: {
- "application/json": {
- schema: ZContactAttributeInput,
- },
- },
- },
- responses: {
- "201": {
- description: "Contact attribute created successfully.",
- },
- },
-};
-
-export const contactAttributePaths: ZodOpenApiPathsObject = {
- "/contact-attributes": {
- servers: managementServer,
- get: getContactAttributesEndpoint,
- post: createContactAttributeEndpoint,
- },
- "/contact-attributes/{id}": {
- servers: managementServer,
- get: getContactAttributeEndpoint,
- put: updateContactAttributeEndpoint,
- delete: deleteContactAttributeEndpoint,
- },
-};
diff --git a/apps/web/modules/api/v2/management/contact-attributes/types/contact-attributes.ts b/apps/web/modules/api/v2/management/contact-attributes/types/contact-attributes.ts
deleted file mode 100644
index c3f3ca4fe8..0000000000
--- a/apps/web/modules/api/v2/management/contact-attributes/types/contact-attributes.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { z } from "zod";
-import { ZContactAttribute } from "@formbricks/database/zod/contact-attributes";
-
-export const ZGetContactAttributesFilter = z
- .object({
- limit: z.coerce.number().positive().min(1).max(100).optional().default(10),
- skip: z.coerce.number().nonnegative().optional().default(0),
- sortBy: z.enum(["createdAt", "updatedAt"]).optional().default("createdAt"),
- order: z.enum(["asc", "desc"]).optional().default("desc"),
- startDate: z.coerce.date().optional(),
- endDate: z.coerce.date().optional(),
- })
- .refine(
- (data) => {
- if (data.startDate && data.endDate && data.startDate > data.endDate) {
- return false;
- }
- return true;
- },
- {
- message: "startDate must be before endDate",
- }
- );
-
-export const ZContactAttributeInput = ZContactAttribute.pick({
- attributeKeyId: true,
- contactId: true,
- value: true,
-}).openapi({
- ref: "contactAttributeInput",
- description: "Input data for creating or updating a contact attribute",
-});
-
-export type TContactAttributeInput = z.infer;
diff --git a/apps/web/modules/api/v2/management/contacts/[contactId]/lib/openapi.ts b/apps/web/modules/api/v2/management/contacts/[contactId]/lib/openapi.ts
deleted file mode 100644
index bdcc05648a..0000000000
--- a/apps/web/modules/api/v2/management/contacts/[contactId]/lib/openapi.ts
+++ /dev/null
@@ -1,79 +0,0 @@
-import { ZContactInput } from "@/modules/api/v2/management/contacts/types/contacts";
-import { z } from "zod";
-import { ZodOpenApiOperationObject } from "zod-openapi";
-import { ZContact } from "@formbricks/database/zod/contact";
-
-export const getContactEndpoint: ZodOpenApiOperationObject = {
- operationId: "getContact",
- summary: "Get a contact",
- description: "Gets a contact from the database.",
- requestParams: {
- path: z.object({
- contactId: z.string().cuid2(),
- }),
- },
- tags: ["Management API - Contacts"],
- responses: {
- "200": {
- description: "Contact retrieved successfully.",
- content: {
- "application/json": {
- schema: ZContact,
- },
- },
- },
- },
-};
-
-export const deleteContactEndpoint: ZodOpenApiOperationObject = {
- operationId: "deleteContact",
- summary: "Delete a contact",
- description: "Deletes a contact from the database.",
- tags: ["Management API - Contacts"],
- requestParams: {
- path: z.object({
- contactId: z.string().cuid2(),
- }),
- },
- responses: {
- "200": {
- description: "Contact deleted successfully.",
- content: {
- "application/json": {
- schema: ZContact,
- },
- },
- },
- },
-};
-
-export const updateContactEndpoint: ZodOpenApiOperationObject = {
- operationId: "updateContact",
- summary: "Update a contact",
- description: "Updates a contact in the database.",
- tags: ["Management API - Contacts"],
- requestParams: {
- path: z.object({
- contactId: z.string().cuid2(),
- }),
- },
- requestBody: {
- required: true,
- description: "The response to update",
- content: {
- "application/json": {
- schema: ZContactInput,
- },
- },
- },
- responses: {
- "200": {
- description: "Response updated successfully.",
- content: {
- "application/json": {
- schema: ZContact,
- },
- },
- },
- },
-};
diff --git a/apps/web/modules/api/v2/management/contacts/lib/openapi.ts b/apps/web/modules/api/v2/management/contacts/lib/openapi.ts
deleted file mode 100644
index 0d4dddc070..0000000000
--- a/apps/web/modules/api/v2/management/contacts/lib/openapi.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-import {
- deleteContactEndpoint,
- getContactEndpoint,
- updateContactEndpoint,
-} from "@/modules/api/v2/management/contacts/[contactId]/lib/openapi";
-import { ZContactInput, ZGetContactsFilter } from "@/modules/api/v2/management/contacts/types/contacts";
-import { managementServer } from "@/modules/api/v2/management/lib/openapi";
-import { z } from "zod";
-import { ZodOpenApiOperationObject, ZodOpenApiPathsObject } from "zod-openapi";
-import { ZContact } from "@formbricks/database/zod/contact";
-
-export const getContactsEndpoint: ZodOpenApiOperationObject = {
- operationId: "getContacts",
- summary: "Get contacts",
- description: "Gets contacts from the database.",
- requestParams: {
- query: ZGetContactsFilter,
- },
- tags: ["Management API - Contacts"],
- responses: {
- "200": {
- description: "Contacts retrieved successfully.",
- content: {
- "application/json": {
- schema: z.array(ZContact),
- },
- },
- },
- },
-};
-
-export const createContactEndpoint: ZodOpenApiOperationObject = {
- operationId: "createContact",
- summary: "Create a contact",
- description: "Creates a contact in the database.",
- tags: ["Management API - Contacts"],
- requestBody: {
- required: true,
- description: "The contact to create",
- content: {
- "application/json": {
- schema: ZContactInput,
- },
- },
- },
- responses: {
- "201": {
- description: "Contact created successfully.",
- content: {
- "application/json": {
- schema: ZContact,
- },
- },
- },
- },
-};
-
-export const contactPaths: ZodOpenApiPathsObject = {
- "/contacts": {
- servers: managementServer,
- get: getContactsEndpoint,
- post: createContactEndpoint,
- },
- "/contacts/{id}": {
- servers: managementServer,
- get: getContactEndpoint,
- put: updateContactEndpoint,
- delete: deleteContactEndpoint,
- },
-};
diff --git a/apps/web/modules/api/v2/management/contacts/types/contacts.ts b/apps/web/modules/api/v2/management/contacts/types/contacts.ts
deleted file mode 100644
index acc5b7a930..0000000000
--- a/apps/web/modules/api/v2/management/contacts/types/contacts.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { z } from "zod";
-import { extendZodWithOpenApi } from "zod-openapi";
-import { ZContact } from "@formbricks/database/zod/contact";
-
-extendZodWithOpenApi(z);
-
-export const ZGetContactsFilter = z
- .object({
- limit: z.coerce.number().positive().min(1).max(100).optional().default(10),
- skip: z.coerce.number().nonnegative().optional().default(0),
- sortBy: z.enum(["createdAt", "updatedAt"]).optional().default("createdAt"),
- order: z.enum(["asc", "desc"]).optional().default("desc"),
- startDate: z.coerce.date().optional(),
- endDate: z.coerce.date().optional(),
- })
- .refine(
- (data) => {
- if (data.startDate && data.endDate && data.startDate > data.endDate) {
- return false;
- }
- return true;
- },
- {
- message: "startDate must be before endDate",
- }
- );
-
-export const ZContactInput = ZContact.pick({
- userId: true,
- environmentId: true,
-})
- .partial({
- userId: true,
- })
- .openapi({
- ref: "contactCreate",
- description: "A contact to create",
- });
-
-export type TContactInput = z.infer;
diff --git a/apps/web/modules/api/v2/openapi-document.ts b/apps/web/modules/api/v2/openapi-document.ts
index a754323d97..f67c6a3e1d 100644
--- a/apps/web/modules/api/v2/openapi-document.ts
+++ b/apps/web/modules/api/v2/openapi-document.ts
@@ -1,6 +1,4 @@
import { contactAttributeKeyPaths } from "@/modules/api/v2/management/contact-attribute-keys/lib/openapi";
-// import { contactAttributePaths } from "@/modules/api/v2/management/contact-attributes/lib/openapi";
-// import { contactPaths } from "@/modules/api/v2/management/contacts/lib/openapi";
import { responsePaths } from "@/modules/api/v2/management/responses/lib/openapi";
import { surveyContactLinksBySegmentPaths } from "@/modules/api/v2/management/surveys/[surveyId]/contact-links/segments/lib/openapi";
import { surveyPaths } from "@/modules/api/v2/management/surveys/lib/openapi";
@@ -11,6 +9,7 @@ import { teamPaths } from "@/modules/api/v2/organizations/[organizationId]/teams
import { userPaths } from "@/modules/api/v2/organizations/[organizationId]/users/lib/openapi";
import { rolePaths } from "@/modules/api/v2/roles/lib/openapi";
import { bulkContactPaths } from "@/modules/ee/contacts/api/v2/management/contacts/bulk/lib/openapi";
+import { contactPaths } from "@/modules/ee/contacts/api/v2/management/contacts/lib/openapi";
import * as yaml from "yaml";
import { z } from "zod";
import { createDocument, extendZodWithOpenApi } from "zod-openapi";
@@ -40,8 +39,7 @@ const document = createDocument({
...mePaths,
...responsePaths,
...bulkContactPaths,
- // ...contactPaths,
- // ...contactAttributePaths,
+ ...contactPaths,
...contactAttributeKeyPaths,
...surveyPaths,
...surveyContactLinksBySegmentPaths,
diff --git a/apps/web/modules/ee/audit-logs/types/audit-log.ts b/apps/web/modules/ee/audit-logs/types/audit-log.ts
index 862475117f..f2b70de95f 100644
--- a/apps/web/modules/ee/audit-logs/types/audit-log.ts
+++ b/apps/web/modules/ee/audit-logs/types/audit-log.ts
@@ -51,6 +51,7 @@ export const ZAuditAction = z.enum([
"emailVerificationAttempted",
"userSignedOut",
"passwordReset",
+ "bulkCreated",
]);
export const ZActor = z.enum(["user", "api", "system"]);
export const ZAuditStatus = z.enum(["success", "failure"]);
diff --git a/apps/web/modules/ee/contacts/api/v2/management/contacts/bulk/route.ts b/apps/web/modules/ee/contacts/api/v2/management/contacts/bulk/route.ts
index d030a433a6..10419c38d9 100644
--- a/apps/web/modules/ee/contacts/api/v2/management/contacts/bulk/route.ts
+++ b/apps/web/modules/ee/contacts/api/v2/management/contacts/bulk/route.ts
@@ -12,30 +12,48 @@ export const PUT = async (request: Request) =>
schemas: {
body: ZContactBulkUploadRequest,
},
- handler: async ({ authentication, parsedInput }) => {
+ handler: async ({ authentication, parsedInput, auditLog }) => {
const isContactsEnabled = await getIsContactsEnabled();
if (!isContactsEnabled) {
- return handleApiError(request, {
- type: "forbidden",
- details: [{ field: "error", issue: "Contacts are not enabled for this environment." }],
- });
+ return handleApiError(
+ request,
+ {
+ type: "forbidden",
+ details: [{ field: "error", issue: "Contacts are not enabled for this environment." }],
+ },
+ auditLog
+ );
}
const environmentId = parsedInput.body?.environmentId;
if (!environmentId) {
- return handleApiError(request, {
- type: "bad_request",
- details: [{ field: "environmentId", issue: "missing" }],
- });
+ return handleApiError(
+ request,
+ {
+ type: "bad_request",
+ details: [{ field: "environmentId", issue: "missing" }],
+ },
+ auditLog
+ );
}
const { contacts } = parsedInput.body ?? { contacts: [] };
if (!hasPermission(authentication.environmentPermissions, environmentId, "PUT")) {
- return handleApiError(request, {
- type: "unauthorized",
- });
+ return handleApiError(
+ request,
+ {
+ type: "forbidden",
+ details: [
+ {
+ field: "environmentId",
+ issue: "insufficient permissions to create contact in this environment",
+ },
+ ],
+ },
+ auditLog
+ );
}
const emails = contacts.map(
@@ -45,7 +63,7 @@ export const PUT = async (request: Request) =>
const upsertBulkContactsResult = await upsertBulkContacts(contacts, environmentId, emails);
if (!upsertBulkContactsResult.ok) {
- return handleApiError(request, upsertBulkContactsResult.error);
+ return handleApiError(request, upsertBulkContactsResult.error, auditLog);
}
const { contactIdxWithConflictingUserIds } = upsertBulkContactsResult.data;
@@ -73,4 +91,6 @@ export const PUT = async (request: Request) =>
},
});
},
+ action: "bulkCreated",
+ targetType: "contact",
});
diff --git a/apps/web/modules/ee/contacts/api/v2/management/contacts/lib/contact.test.ts b/apps/web/modules/ee/contacts/api/v2/management/contacts/lib/contact.test.ts
new file mode 100644
index 0000000000..2c6b9e8e68
--- /dev/null
+++ b/apps/web/modules/ee/contacts/api/v2/management/contacts/lib/contact.test.ts
@@ -0,0 +1,340 @@
+import { TContactCreateRequest } from "@/modules/ee/contacts/types/contact";
+import { beforeEach, describe, expect, test, vi } from "vitest";
+import { prisma } from "@formbricks/database";
+import { TContactAttributeKey } from "@formbricks/types/contact-attribute-key";
+import { createContact } from "./contact";
+
+// Mock prisma
+vi.mock("@formbricks/database", () => ({
+ prisma: {
+ contact: {
+ findFirst: vi.fn(),
+ create: vi.fn(),
+ },
+ contactAttributeKey: {
+ findMany: vi.fn(),
+ },
+ },
+}));
+
+describe("contact.ts", () => {
+ beforeEach(() => {
+ vi.clearAllMocks();
+ });
+
+ describe("createContact", () => {
+ test("returns bad_request error when email attribute is missing", async () => {
+ const contactData: TContactCreateRequest = {
+ environmentId: "env123",
+ attributes: {
+ firstName: "John",
+ },
+ };
+
+ const result = await createContact(contactData);
+
+ expect(result.ok).toBe(false);
+ if (!result.ok) {
+ expect(result.error.type).toBe("bad_request");
+ expect(result.error.details).toEqual([{ field: "attributes", issue: "email attribute is required" }]);
+ }
+ });
+
+ test("returns bad_request error when email attribute value is empty", async () => {
+ const contactData: TContactCreateRequest = {
+ environmentId: "env123",
+ attributes: {
+ email: "",
+ },
+ };
+
+ const result = await createContact(contactData);
+
+ expect(result.ok).toBe(false);
+ if (!result.ok) {
+ expect(result.error.type).toBe("bad_request");
+ expect(result.error.details).toEqual([{ field: "attributes", issue: "email attribute is required" }]);
+ }
+ });
+
+ test("returns bad_request error when attribute keys do not exist", async () => {
+ const contactData: TContactCreateRequest = {
+ environmentId: "env123",
+ attributes: {
+ email: "john@example.com",
+ nonExistentKey: "value",
+ },
+ };
+
+ vi.mocked(prisma.contactAttributeKey.findMany).mockResolvedValue([
+ { id: "attr1", key: "email", name: "Email", type: "default", environmentId: "env123" },
+ ] as TContactAttributeKey[]);
+
+ const result = await createContact(contactData);
+
+ expect(result.ok).toBe(false);
+ if (!result.ok) {
+ expect(result.error.type).toBe("bad_request");
+ expect(result.error.details).toEqual([
+ { field: "attributes", issue: "attribute keys not found: nonExistentKey. " },
+ ]);
+ }
+ });
+
+ test("returns conflict error when contact with same email already exists", async () => {
+ const contactData: TContactCreateRequest = {
+ environmentId: "env123",
+ attributes: {
+ email: "john@example.com",
+ },
+ };
+
+ vi.mocked(prisma.contact.findFirst).mockResolvedValueOnce({
+ id: "existing-contact-id",
+ environmentId: "env123",
+ userId: null,
+ createdAt: new Date(),
+ updatedAt: new Date(),
+ });
+
+ const result = await createContact(contactData);
+
+ expect(result.ok).toBe(false);
+ if (!result.ok) {
+ expect(result.error.type).toBe("conflict");
+ expect(result.error.details).toEqual([
+ { field: "email", issue: "contact with this email already exists" },
+ ]);
+ }
+ });
+
+ test("returns conflict error when contact with same userId already exists", async () => {
+ const contactData: TContactCreateRequest = {
+ environmentId: "env123",
+ attributes: {
+ email: "john@example.com",
+ userId: "user123",
+ },
+ };
+
+ vi.mocked(prisma.contact.findFirst)
+ .mockResolvedValueOnce(null) // No existing contact by email
+ .mockResolvedValueOnce({
+ id: "existing-contact-id",
+ environmentId: "env123",
+ userId: "user123",
+ createdAt: new Date(),
+ updatedAt: new Date(),
+ }); // Existing contact by userId
+
+ const result = await createContact(contactData);
+
+ expect(result.ok).toBe(false);
+ if (!result.ok) {
+ expect(result.error.type).toBe("conflict");
+ expect(result.error.details).toEqual([
+ { field: "userId", issue: "contact with this userId already exists" },
+ ]);
+ }
+ });
+
+ test("successfully creates contact with existing attribute keys", async () => {
+ const contactData: TContactCreateRequest = {
+ environmentId: "env123",
+ attributes: {
+ email: "john@example.com",
+ firstName: "John",
+ },
+ };
+
+ const existingAttributeKeys = [
+ { id: "attr1", key: "email", name: "Email", type: "default", environmentId: "env123" },
+ { id: "attr2", key: "firstName", name: "First Name", type: "custom", environmentId: "env123" },
+ ] as TContactAttributeKey[];
+
+ const contactWithAttributes = {
+ id: "contact123",
+ environmentId: "env123",
+ createdAt: new Date("2023-01-01T00:00:00.000Z"),
+ updatedAt: new Date("2023-01-01T00:00:00.000Z"),
+ userId: null,
+ attributes: [
+ {
+ attributeKey: existingAttributeKeys[0],
+ value: "john@example.com",
+ },
+ {
+ attributeKey: existingAttributeKeys[1],
+ value: "John",
+ },
+ ],
+ };
+
+ vi.mocked(prisma.contact.findFirst).mockResolvedValue(null);
+ vi.mocked(prisma.contactAttributeKey.findMany).mockResolvedValue(existingAttributeKeys);
+ vi.mocked(prisma.contact.create).mockResolvedValue(contactWithAttributes);
+
+ const result = await createContact(contactData);
+
+ expect(result.ok).toBe(true);
+ if (result.ok) {
+ expect(result.data).toEqual({
+ id: "contact123",
+ createdAt: new Date("2023-01-01T00:00:00.000Z"),
+ environmentId: "env123",
+ attributes: {
+ email: "john@example.com",
+ firstName: "John",
+ },
+ });
+ }
+ });
+
+ test("returns internal_server_error when contact creation returns null", async () => {
+ const contactData: TContactCreateRequest = {
+ environmentId: "env123",
+ attributes: {
+ email: "john@example.com",
+ },
+ };
+
+ const existingAttributeKeys = [
+ { id: "attr1", key: "email", name: "Email", type: "default", environmentId: "env123" },
+ ] as TContactAttributeKey[];
+
+ vi.mocked(prisma.contact.findFirst).mockResolvedValue(null);
+ vi.mocked(prisma.contactAttributeKey.findMany).mockResolvedValue(existingAttributeKeys);
+ vi.mocked(prisma.contact.create).mockResolvedValue(null as any);
+
+ const result = await createContact(contactData);
+
+ expect(result.ok).toBe(false);
+ if (!result.ok) {
+ expect(result.error.type).toBe("internal_server_error");
+ expect(result.error.details).toEqual([
+ { field: "contact", issue: "Cannot read properties of null (reading 'attributes')" },
+ ]);
+ }
+ });
+
+ test("returns internal_server_error when database error occurs", async () => {
+ const contactData: TContactCreateRequest = {
+ environmentId: "env123",
+ attributes: {
+ email: "john@example.com",
+ },
+ };
+
+ vi.mocked(prisma.contact.findFirst).mockRejectedValue(new Error("Database connection failed"));
+
+ const result = await createContact(contactData);
+
+ expect(result.ok).toBe(false);
+ if (!result.ok) {
+ expect(result.error.type).toBe("internal_server_error");
+ expect(result.error.details).toEqual([{ field: "contact", issue: "Database connection failed" }]);
+ }
+ });
+
+ test("does not check for userId conflict when userId is not provided", async () => {
+ const contactData: TContactCreateRequest = {
+ environmentId: "env123",
+ attributes: {
+ email: "john@example.com",
+ },
+ };
+
+ const existingAttributeKeys = [
+ { id: "attr1", key: "email", name: "Email", type: "default", environmentId: "env123" },
+ ] as TContactAttributeKey[];
+
+ const contactWithAttributes = {
+ id: "contact123",
+ environmentId: "env123",
+ createdAt: new Date("2023-01-01T00:00:00.000Z"),
+ updatedAt: new Date("2023-01-01T00:00:00.000Z"),
+ userId: null,
+ attributes: [
+ {
+ attributeKey: existingAttributeKeys[0],
+ value: "john@example.com",
+ },
+ ],
+ };
+
+ vi.mocked(prisma.contact.findFirst).mockResolvedValueOnce(null); // No existing contact by email
+ vi.mocked(prisma.contactAttributeKey.findMany).mockResolvedValue(existingAttributeKeys);
+ vi.mocked(prisma.contact.create).mockResolvedValue(contactWithAttributes);
+
+ const result = await createContact(contactData);
+
+ expect(result.ok).toBe(true);
+ expect(prisma.contact.findFirst).toHaveBeenCalledTimes(1); // Only called once for email check
+ });
+
+ test("returns bad_request error when multiple attribute keys are missing", async () => {
+ const contactData: TContactCreateRequest = {
+ environmentId: "env123",
+ attributes: {
+ email: "john@example.com",
+ nonExistentKey1: "value1",
+ nonExistentKey2: "value2",
+ },
+ };
+
+ vi.mocked(prisma.contactAttributeKey.findMany).mockResolvedValue([
+ { id: "attr1", key: "email", name: "Email", type: "default", environmentId: "env123" },
+ ] as TContactAttributeKey[]);
+
+ const result = await createContact(contactData);
+
+ expect(result.ok).toBe(false);
+ if (!result.ok) {
+ expect(result.error.type).toBe("bad_request");
+ expect(result.error.details).toEqual([
+ { field: "attributes", issue: "attribute keys not found: nonExistentKey1, nonExistentKey2. " },
+ ]);
+ }
+ });
+
+ test("correctly handles userId extraction from attributes", async () => {
+ const contactData: TContactCreateRequest = {
+ environmentId: "env123",
+ attributes: {
+ email: "john@example.com",
+ userId: "user123",
+ firstName: "John",
+ },
+ };
+
+ const existingAttributeKeys = [
+ { id: "attr1", key: "email", name: "Email", type: "default", environmentId: "env123" },
+ { id: "attr2", key: "userId", name: "User ID", type: "default", environmentId: "env123" },
+ { id: "attr3", key: "firstName", name: "First Name", type: "custom", environmentId: "env123" },
+ ] as TContactAttributeKey[];
+
+ vi.mocked(prisma.contact.findFirst).mockResolvedValue(null);
+ vi.mocked(prisma.contactAttributeKey.findMany).mockResolvedValue(existingAttributeKeys);
+
+ const contactWithAttributes = {
+ id: "contact123",
+ environmentId: "env123",
+ createdAt: new Date("2023-01-01T00:00:00.000Z"),
+ updatedAt: new Date("2023-01-01T00:00:00.000Z"),
+ userId: null,
+ attributes: [
+ { attributeKey: existingAttributeKeys[0], value: "john@example.com" },
+ { attributeKey: existingAttributeKeys[1], value: "user123" },
+ { attributeKey: existingAttributeKeys[2], value: "John" },
+ ],
+ };
+
+ vi.mocked(prisma.contact.create).mockResolvedValue(contactWithAttributes);
+
+ const result = await createContact(contactData);
+
+ expect(result.ok).toBe(true);
+ expect(prisma.contact.findFirst).toHaveBeenCalledTimes(2); // Called once for email check and once for userId check
+ });
+ });
+});
diff --git a/apps/web/modules/ee/contacts/api/v2/management/contacts/lib/contact.ts b/apps/web/modules/ee/contacts/api/v2/management/contacts/lib/contact.ts
new file mode 100644
index 0000000000..d61960e0ff
--- /dev/null
+++ b/apps/web/modules/ee/contacts/api/v2/management/contacts/lib/contact.ts
@@ -0,0 +1,138 @@
+import { ApiErrorResponseV2 } from "@/modules/api/v2/types/api-error";
+import { TContactCreateRequest, TContactResponse } from "@/modules/ee/contacts/types/contact";
+import { prisma } from "@formbricks/database";
+import { Result, err, ok } from "@formbricks/types/error-handlers";
+
+export const createContact = async (
+ contactData: TContactCreateRequest
+): Promise> => {
+ const { environmentId, attributes } = contactData;
+
+ try {
+ const emailValue = attributes.email;
+ if (!emailValue) {
+ return err({
+ type: "bad_request",
+ details: [{ field: "attributes", issue: "email attribute is required" }],
+ });
+ }
+
+ // Extract userId if present
+ const userId = attributes.userId;
+
+ // Check for existing contact with same email
+ const existingContactByEmail = await prisma.contact.findFirst({
+ where: {
+ environmentId,
+ attributes: {
+ some: {
+ attributeKey: { key: "email" },
+ value: emailValue,
+ },
+ },
+ },
+ });
+
+ if (existingContactByEmail) {
+ return err({
+ type: "conflict",
+ details: [{ field: "email", issue: "contact with this email already exists" }],
+ });
+ }
+
+ // Check for existing contact with same userId (if provided)
+ if (userId) {
+ const existingContactByUserId = await prisma.contact.findFirst({
+ where: {
+ environmentId,
+ attributes: {
+ some: {
+ attributeKey: { key: "userId" },
+ value: userId,
+ },
+ },
+ },
+ });
+
+ if (existingContactByUserId) {
+ return err({
+ type: "conflict",
+ details: [{ field: "userId", issue: "contact with this userId already exists" }],
+ });
+ }
+ }
+
+ // Get all attribute keys that need to exist
+ const attributeKeys = Object.keys(attributes);
+
+ // Check which attribute keys exist in the environment
+ const existingAttributeKeys = await prisma.contactAttributeKey.findMany({
+ where: {
+ environmentId,
+ key: { in: attributeKeys },
+ },
+ });
+
+ const existingKeySet = new Set(existingAttributeKeys.map((key) => key.key));
+
+ // Identify missing attribute keys
+ const missingKeys = attributeKeys.filter((key) => !existingKeySet.has(key));
+
+ // If any keys are missing, return an error
+ if (missingKeys.length > 0) {
+ return err({
+ type: "bad_request",
+ details: [{ field: "attributes", issue: `attribute keys not found: ${missingKeys.join(", ")}. ` }],
+ });
+ }
+
+ const attributeData = Object.entries(attributes).map(([key, value]) => {
+ const attributeKey = existingAttributeKeys.find((ak) => ak.key === key)!;
+ return {
+ attributeKeyId: attributeKey.id,
+ value,
+ };
+ });
+
+ const result = await prisma.contact.create({
+ data: {
+ environmentId,
+ attributes: {
+ createMany: {
+ data: attributeData,
+ },
+ },
+ },
+ select: {
+ id: true,
+ createdAt: true,
+ environmentId: true,
+ attributes: {
+ include: {
+ attributeKey: true,
+ },
+ },
+ },
+ });
+
+ // Format the response with flattened attributes
+ const flattenedAttributes: Record = {};
+ result.attributes.forEach((attr) => {
+ flattenedAttributes[attr.attributeKey.key] = attr.value;
+ });
+
+ const response: TContactResponse = {
+ id: result.id,
+ createdAt: result.createdAt,
+ environmentId: result.environmentId,
+ attributes: flattenedAttributes,
+ };
+
+ return ok(response);
+ } catch (error) {
+ return err({
+ type: "internal_server_error",
+ details: [{ field: "contact", issue: error.message }],
+ });
+ }
+};
diff --git a/apps/web/modules/ee/contacts/api/v2/management/contacts/lib/openapi.ts b/apps/web/modules/ee/contacts/api/v2/management/contacts/lib/openapi.ts
new file mode 100644
index 0000000000..30f7ac0436
--- /dev/null
+++ b/apps/web/modules/ee/contacts/api/v2/management/contacts/lib/openapi.ts
@@ -0,0 +1,61 @@
+import { managementServer } from "@/modules/api/v2/management/lib/openapi";
+import { makePartialSchema } from "@/modules/api/v2/types/openapi-response";
+import { ZContactCreateRequest, ZContactResponse } from "@/modules/ee/contacts/types/contact";
+import { ZodOpenApiOperationObject, ZodOpenApiPathsObject } from "zod-openapi";
+
+export const createContactEndpoint: ZodOpenApiOperationObject = {
+ operationId: "createContact",
+ summary: "Create a contact",
+ description:
+ "Creates a contact in the database. Each contact must have a valid email address in the attributes. All attribute keys must already exist in the environment. The email is used as the unique identifier along with the environment.",
+ tags: ["Management API - Contacts"],
+
+ requestBody: {
+ required: true,
+ description:
+ "The contact to create. Must include an email attribute and all attribute keys must already exist in the environment.",
+ content: {
+ "application/json": {
+ schema: ZContactCreateRequest,
+ example: {
+ environmentId: "env_01h2xce9q8p3w4x5y6z7a8b9c0",
+ attributes: {
+ email: "john.doe@example.com",
+ firstName: "John",
+ lastName: "Doe",
+ userId: "h2xce9q8p3w4x5y6z7a8b9c1",
+ },
+ },
+ },
+ },
+ },
+
+ responses: {
+ "201": {
+ description: "Contact created successfully.",
+ content: {
+ "application/json": {
+ schema: makePartialSchema(ZContactResponse),
+ example: {
+ id: "ctc_01h2xce9q8p3w4x5y6z7a8b9c2",
+ createdAt: "2023-01-01T12:00:00.000Z",
+ environmentId: "env_01h2xce9q8p3w4x5y6z7a8b9c0",
+ attributes: {
+ email: "john.doe@example.com",
+ firstName: "John",
+ lastName: "Doe",
+ userId: "h2xce9q8p3w4x5y6z7a8b9c1",
+ },
+ },
+ },
+ },
+ },
+ },
+};
+
+export const contactPaths: ZodOpenApiPathsObject = {
+ "/contacts": {
+ servers: managementServer,
+ post: createContactEndpoint,
+ },
+};
diff --git a/apps/web/modules/ee/contacts/api/v2/management/contacts/route.ts b/apps/web/modules/ee/contacts/api/v2/management/contacts/route.ts
new file mode 100644
index 0000000000..bd7f0097ce
--- /dev/null
+++ b/apps/web/modules/ee/contacts/api/v2/management/contacts/route.ts
@@ -0,0 +1,66 @@
+import { authenticatedApiClient } from "@/modules/api/v2/auth/authenticated-api-client";
+import { responses } from "@/modules/api/v2/lib/response";
+import { handleApiError } from "@/modules/api/v2/lib/utils";
+import { createContact } from "@/modules/ee/contacts/api/v2/management/contacts/lib/contact";
+import { ZContactCreateRequest } from "@/modules/ee/contacts/types/contact";
+import { getIsContactsEnabled } from "@/modules/ee/license-check/lib/utils";
+import { hasPermission } from "@/modules/organization/settings/api-keys/lib/utils";
+import { NextRequest } from "next/server";
+
+export const POST = async (request: NextRequest) =>
+ authenticatedApiClient({
+ request,
+ schemas: {
+ body: ZContactCreateRequest,
+ },
+
+ handler: async ({ authentication, parsedInput, auditLog }) => {
+ const { body } = parsedInput;
+ const isContactsEnabled = await getIsContactsEnabled();
+ if (!isContactsEnabled) {
+ return handleApiError(
+ request,
+ {
+ type: "forbidden",
+ details: [{ field: "contacts", issue: "Contacts feature is not enabled for this environment" }],
+ },
+ auditLog
+ );
+ }
+
+ const { environmentId } = body;
+
+ if (!hasPermission(authentication.environmentPermissions, environmentId, "POST")) {
+ return handleApiError(
+ request,
+ {
+ type: "forbidden",
+ details: [
+ {
+ field: "environmentId",
+ issue: "insufficient permissions to create contact in this environment",
+ },
+ ],
+ },
+ auditLog
+ );
+ }
+
+ const createContactResult = await createContact(body);
+
+ if (!createContactResult.ok) {
+ return handleApiError(request, createContactResult.error, auditLog);
+ }
+
+ const createdContact = createContactResult.data;
+
+ if (auditLog) {
+ auditLog.targetId = createdContact.id;
+ auditLog.newObject = createdContact;
+ }
+
+ return responses.createdResponse(createContactResult);
+ },
+ action: "created",
+ targetType: "contact",
+ });
diff --git a/apps/web/modules/ee/contacts/types/contact.test.ts b/apps/web/modules/ee/contacts/types/contact.test.ts
new file mode 100644
index 0000000000..92e3debd1d
--- /dev/null
+++ b/apps/web/modules/ee/contacts/types/contact.test.ts
@@ -0,0 +1,708 @@
+import { describe, expect, test } from "vitest";
+import { ZodError } from "zod";
+import {
+ ZContact,
+ ZContactBulkUploadRequest,
+ ZContactCSVAttributeMap,
+ ZContactCSVUploadResponse,
+ ZContactCreateRequest,
+ ZContactResponse,
+ ZContactTableData,
+ ZContactWithAttributes,
+ validateEmailAttribute,
+ validateUniqueAttributeKeys,
+} from "./contact";
+
+describe("ZContact", () => {
+ test("should validate valid contact data", () => {
+ const validContact = {
+ id: "cld1234567890abcdef123456",
+ createdAt: new Date(),
+ updatedAt: new Date(),
+ environmentId: "cld1234567890abcdef123456",
+ };
+ const result = ZContact.parse(validContact);
+ expect(result).toEqual(validContact);
+ });
+
+ test("should reject invalid contact data", () => {
+ const invalidContact = {
+ id: "invalid-id",
+ createdAt: "invalid-date",
+ updatedAt: new Date(),
+ environmentId: "cld1234567890abcdef123456",
+ };
+ expect(() => ZContact.parse(invalidContact)).toThrow(ZodError);
+ });
+});
+
+describe("ZContactTableData", () => {
+ test("should validate valid contact table data", () => {
+ const validData = {
+ id: "cld1234567890abcdef123456",
+ userId: "user123",
+ email: "test@example.com",
+ firstName: "John",
+ lastName: "Doe",
+ attributes: [
+ {
+ key: "attr1",
+ name: "Attribute 1",
+ value: "value1",
+ },
+ ],
+ };
+ const result = ZContactTableData.parse(validData);
+ expect(result).toEqual(validData);
+ });
+
+ test("should handle nullable names and values in attributes", () => {
+ const validData = {
+ id: "cld1234567890abcdef123456",
+ userId: "user123",
+ email: "test@example.com",
+ firstName: "John",
+ lastName: "Doe",
+ attributes: [
+ {
+ key: "attr1",
+ name: null,
+ value: null,
+ },
+ ],
+ };
+ const result = ZContactTableData.parse(validData);
+ expect(result).toEqual(validData);
+ });
+});
+
+describe("ZContactWithAttributes", () => {
+ test("should validate contact with attributes", () => {
+ const validData = {
+ id: "cld1234567890abcdef123456",
+ createdAt: new Date(),
+ updatedAt: new Date(),
+ environmentId: "cld1234567890abcdef123456",
+ attributes: {
+ email: "test@example.com",
+ firstName: "John",
+ },
+ };
+ const result = ZContactWithAttributes.parse(validData);
+ expect(result).toEqual(validData);
+ });
+});
+
+describe("ZContactCSVUploadResponse", () => {
+ test("should validate valid CSV upload data", () => {
+ const validData = [
+ {
+ email: "test1@example.com",
+ firstName: "John",
+ lastName: "Doe",
+ },
+ {
+ email: "test2@example.com",
+ firstName: "Jane",
+ lastName: "Smith",
+ },
+ ];
+ const result = ZContactCSVUploadResponse.parse(validData);
+ expect(result).toEqual(validData);
+ });
+
+ test("should reject data without email field", () => {
+ const invalidData = [
+ {
+ firstName: "John",
+ lastName: "Doe",
+ },
+ ];
+ expect(() => ZContactCSVUploadResponse.parse(invalidData)).toThrow(ZodError);
+ });
+
+ test("should reject data with empty email", () => {
+ const invalidData = [
+ {
+ email: "",
+ firstName: "John",
+ lastName: "Doe",
+ },
+ ];
+ expect(() => ZContactCSVUploadResponse.parse(invalidData)).toThrow(ZodError);
+ });
+
+ test("should reject data with duplicate emails", () => {
+ const invalidData = [
+ {
+ email: "test@example.com",
+ firstName: "John",
+ lastName: "Doe",
+ },
+ {
+ email: "test@example.com",
+ firstName: "Jane",
+ lastName: "Smith",
+ },
+ ];
+ expect(() => ZContactCSVUploadResponse.parse(invalidData)).toThrow(ZodError);
+ });
+
+ test("should reject data with duplicate userIds", () => {
+ const invalidData = [
+ {
+ email: "test1@example.com",
+ userId: "user123",
+ firstName: "John",
+ lastName: "Doe",
+ },
+ {
+ email: "test2@example.com",
+ userId: "user123",
+ firstName: "Jane",
+ lastName: "Smith",
+ },
+ ];
+ expect(() => ZContactCSVUploadResponse.parse(invalidData)).toThrow(ZodError);
+ });
+
+ test("should reject data exceeding 10000 records", () => {
+ const invalidData = Array.from({ length: 10001 }, (_, i) => ({
+ email: `test${i}@example.com`,
+ firstName: "John",
+ lastName: "Doe",
+ }));
+ expect(() => ZContactCSVUploadResponse.parse(invalidData)).toThrow(ZodError);
+ });
+});
+
+describe("ZContactCSVAttributeMap", () => {
+ test("should validate valid attribute map", () => {
+ const validMap = {
+ firstName: "first_name",
+ lastName: "last_name",
+ email: "email_address",
+ };
+ const result = ZContactCSVAttributeMap.parse(validMap);
+ expect(result).toEqual(validMap);
+ });
+
+ test("should reject attribute map with duplicate values", () => {
+ const invalidMap = {
+ firstName: "name",
+ lastName: "name",
+ email: "email",
+ };
+ expect(() => ZContactCSVAttributeMap.parse(invalidMap)).toThrow(ZodError);
+ });
+});
+
+describe("ZContactBulkUploadRequest", () => {
+ test("should validate valid bulk upload request", () => {
+ const validRequest = {
+ environmentId: "cld1234567890abcdef123456",
+ contacts: [
+ {
+ attributes: [
+ {
+ attributeKey: {
+ key: "email",
+ name: "Email",
+ },
+ value: "test@example.com",
+ },
+ ],
+ },
+ ],
+ };
+ const result = ZContactBulkUploadRequest.parse(validRequest);
+ expect(result).toEqual(validRequest);
+ });
+
+ test("should reject request without email attribute", () => {
+ const invalidRequest = {
+ environmentId: "cld1234567890abcdef123456",
+ contacts: [
+ {
+ attributes: [
+ {
+ attributeKey: {
+ key: "firstName",
+ name: "First Name",
+ },
+ value: "John",
+ },
+ ],
+ },
+ ],
+ };
+ expect(() => ZContactBulkUploadRequest.parse(invalidRequest)).toThrow(ZodError);
+ });
+
+ test("should reject request with empty email value", () => {
+ const invalidRequest = {
+ environmentId: "cld1234567890abcdef123456",
+ contacts: [
+ {
+ attributes: [
+ {
+ attributeKey: {
+ key: "email",
+ name: "Email",
+ },
+ value: "",
+ },
+ ],
+ },
+ ],
+ };
+ expect(() => ZContactBulkUploadRequest.parse(invalidRequest)).toThrow(ZodError);
+ });
+
+ test("should reject request with invalid email format", () => {
+ const invalidRequest = {
+ environmentId: "cld1234567890abcdef123456",
+ contacts: [
+ {
+ attributes: [
+ {
+ attributeKey: {
+ key: "email",
+ name: "Email",
+ },
+ value: "invalid-email",
+ },
+ ],
+ },
+ ],
+ };
+ expect(() => ZContactBulkUploadRequest.parse(invalidRequest)).toThrow(ZodError);
+ });
+
+ test("should reject request with duplicate emails across contacts", () => {
+ const invalidRequest = {
+ environmentId: "cld1234567890abcdef123456",
+ contacts: [
+ {
+ attributes: [
+ {
+ attributeKey: {
+ key: "email",
+ name: "Email",
+ },
+ value: "test@example.com",
+ },
+ ],
+ },
+ {
+ attributes: [
+ {
+ attributeKey: {
+ key: "email",
+ name: "Email",
+ },
+ value: "test@example.com",
+ },
+ ],
+ },
+ ],
+ };
+ expect(() => ZContactBulkUploadRequest.parse(invalidRequest)).toThrow(ZodError);
+ });
+
+ test("should reject request with duplicate userIds across contacts", () => {
+ const invalidRequest = {
+ environmentId: "cld1234567890abcdef123456",
+ contacts: [
+ {
+ attributes: [
+ {
+ attributeKey: {
+ key: "email",
+ name: "Email",
+ },
+ value: "test1@example.com",
+ },
+ {
+ attributeKey: {
+ key: "userId",
+ name: "User ID",
+ },
+ value: "user123",
+ },
+ ],
+ },
+ {
+ attributes: [
+ {
+ attributeKey: {
+ key: "email",
+ name: "Email",
+ },
+ value: "test2@example.com",
+ },
+ {
+ attributeKey: {
+ key: "userId",
+ name: "User ID",
+ },
+ value: "user123",
+ },
+ ],
+ },
+ ],
+ };
+ expect(() => ZContactBulkUploadRequest.parse(invalidRequest)).toThrow(ZodError);
+ });
+
+ test("should reject request with duplicate attribute keys within same contact", () => {
+ const invalidRequest = {
+ environmentId: "cld1234567890abcdef123456",
+ contacts: [
+ {
+ attributes: [
+ {
+ attributeKey: {
+ key: "email",
+ name: "Email",
+ },
+ value: "test@example.com",
+ },
+ {
+ attributeKey: {
+ key: "email",
+ name: "Email Duplicate",
+ },
+ value: "test2@example.com",
+ },
+ ],
+ },
+ ],
+ };
+ expect(() => ZContactBulkUploadRequest.parse(invalidRequest)).toThrow(ZodError);
+ });
+
+ test("should reject request exceeding 250 contacts", () => {
+ const invalidRequest = {
+ environmentId: "cld1234567890abcdef123456",
+ contacts: Array.from({ length: 251 }, (_, i) => ({
+ attributes: [
+ {
+ attributeKey: {
+ key: "email",
+ name: "Email",
+ },
+ value: `test${i}@example.com`,
+ },
+ ],
+ })),
+ };
+ expect(() => ZContactBulkUploadRequest.parse(invalidRequest)).toThrow(ZodError);
+ });
+});
+
+describe("ZContactCreateRequest", () => {
+ test("should validate valid create request with simplified flat attributes", () => {
+ const validRequest = {
+ environmentId: "cld1234567890abcdef123456",
+ attributes: {
+ email: "test@example.com",
+ firstName: "John",
+ lastName: "Doe",
+ },
+ };
+ const result = ZContactCreateRequest.parse(validRequest);
+ expect(result).toEqual(validRequest);
+ });
+
+ test("should validate create request with only email attribute", () => {
+ const validRequest = {
+ environmentId: "cld1234567890abcdef123456",
+ attributes: {
+ email: "test@example.com",
+ },
+ };
+ const result = ZContactCreateRequest.parse(validRequest);
+ expect(result).toEqual(validRequest);
+ });
+
+ test("should reject create request without email attribute", () => {
+ const invalidRequest = {
+ environmentId: "cld1234567890abcdef123456",
+ attributes: {
+ firstName: "John",
+ lastName: "Doe",
+ },
+ };
+ expect(() => ZContactCreateRequest.parse(invalidRequest)).toThrow(ZodError);
+ });
+
+ test("should reject create request with invalid email format", () => {
+ const invalidRequest = {
+ environmentId: "cld1234567890abcdef123456",
+ attributes: {
+ email: "invalid-email",
+ firstName: "John",
+ },
+ };
+ expect(() => ZContactCreateRequest.parse(invalidRequest)).toThrow(ZodError);
+ });
+
+ test("should reject create request with empty email", () => {
+ const invalidRequest = {
+ environmentId: "cld1234567890abcdef123456",
+ attributes: {
+ email: "",
+ firstName: "John",
+ },
+ };
+ expect(() => ZContactCreateRequest.parse(invalidRequest)).toThrow(ZodError);
+ });
+
+ test("should reject create request with invalid environmentId", () => {
+ const invalidRequest = {
+ environmentId: "invalid-id",
+ attributes: {
+ email: "test@example.com",
+ },
+ };
+ expect(() => ZContactCreateRequest.parse(invalidRequest)).toThrow(ZodError);
+ });
+});
+
+describe("ZContactResponse", () => {
+ test("should validate valid contact response with flat string attributes", () => {
+ const validResponse = {
+ id: "cld1234567890abcdef123456",
+ createdAt: new Date(),
+ environmentId: "cld1234567890abcdef123456",
+ attributes: {
+ email: "test@example.com",
+ firstName: "John",
+ lastName: "Doe",
+ },
+ };
+ const result = ZContactResponse.parse(validResponse);
+ expect(result).toEqual(validResponse);
+ });
+
+ test("should validate contact response with only email attribute", () => {
+ const validResponse = {
+ id: "cld1234567890abcdef123456",
+ createdAt: new Date(),
+ environmentId: "cld1234567890abcdef123456",
+ attributes: {
+ email: "test@example.com",
+ },
+ };
+ const result = ZContactResponse.parse(validResponse);
+ expect(result).toEqual(validResponse);
+ });
+
+ test("should reject contact response with null attribute values", () => {
+ const invalidResponse = {
+ id: "cld1234567890abcdef123456",
+ createdAt: new Date(),
+ environmentId: "cld1234567890abcdef123456",
+ attributes: {
+ email: "test@example.com",
+ firstName: "John",
+ lastName: null,
+ },
+ };
+ expect(() => ZContactResponse.parse(invalidResponse)).toThrow(ZodError);
+ });
+
+ test("should reject contact response with invalid id format", () => {
+ const invalidResponse = {
+ id: "invalid-id",
+ createdAt: new Date(),
+ environmentId: "cld1234567890abcdef123456",
+ attributes: {
+ email: "test@example.com",
+ },
+ };
+ expect(() => ZContactResponse.parse(invalidResponse)).toThrow(ZodError);
+ });
+
+ test("should reject contact response with invalid environmentId format", () => {
+ const invalidResponse = {
+ id: "cld1234567890abcdef123456",
+ createdAt: new Date(),
+ environmentId: "invalid-env-id",
+ attributes: {
+ email: "test@example.com",
+ },
+ };
+ expect(() => ZContactResponse.parse(invalidResponse)).toThrow(ZodError);
+ });
+});
+
+describe("validateEmailAttribute", () => {
+ test("should validate email attribute successfully", () => {
+ const attributes = [
+ {
+ attributeKey: {
+ key: "email",
+ name: "Email",
+ },
+ value: "test@example.com",
+ },
+ ];
+ const mockCtx = {
+ addIssue: () => {},
+ } as any;
+ const result = validateEmailAttribute(attributes, mockCtx);
+ expect(result.isValid).toBe(true);
+ expect(result.emailAttr).toEqual(attributes[0]);
+ });
+
+ test("should fail validation when email attribute is missing", () => {
+ const attributes = [
+ {
+ attributeKey: {
+ key: "firstName",
+ name: "First Name",
+ },
+ value: "John",
+ },
+ ];
+ const mockCtx = {
+ addIssue: () => {},
+ } as any;
+ const result = validateEmailAttribute(attributes, mockCtx);
+ expect(result.isValid).toBe(false);
+ expect(result.emailAttr).toBeUndefined();
+ });
+
+ test("should fail validation when email value is empty", () => {
+ const attributes = [
+ {
+ attributeKey: {
+ key: "email",
+ name: "Email",
+ },
+ value: "",
+ },
+ ];
+ const mockCtx = {
+ addIssue: () => {},
+ } as any;
+ const result = validateEmailAttribute(attributes, mockCtx);
+ expect(result.isValid).toBe(false);
+ });
+
+ test("should fail validation when email format is invalid", () => {
+ const attributes = [
+ {
+ attributeKey: {
+ key: "email",
+ name: "Email",
+ },
+ value: "invalid-email",
+ },
+ ];
+ const mockCtx = {
+ addIssue: () => {},
+ } as any;
+ const result = validateEmailAttribute(attributes, mockCtx);
+ expect(result.isValid).toBe(false);
+ });
+
+ test("should include contact index in error messages when provided", () => {
+ const attributes = [
+ {
+ attributeKey: {
+ key: "firstName",
+ name: "First Name",
+ },
+ value: "John",
+ },
+ ];
+ const mockCtx = {
+ addIssue: () => {},
+ } as any;
+ const result = validateEmailAttribute(attributes, mockCtx, 5);
+ expect(result.isValid).toBe(false);
+ });
+});
+
+describe("validateUniqueAttributeKeys", () => {
+ test("should pass validation for unique attribute keys", () => {
+ const attributes = [
+ {
+ attributeKey: {
+ key: "email",
+ name: "Email",
+ },
+ value: "test@example.com",
+ },
+ {
+ attributeKey: {
+ key: "firstName",
+ name: "First Name",
+ },
+ value: "John",
+ },
+ ];
+ const mockCtx = {
+ addIssue: () => {},
+ } as any;
+ // Should not throw or call addIssue
+ validateUniqueAttributeKeys(attributes, mockCtx);
+ });
+
+ test("should fail validation for duplicate attribute keys", () => {
+ const attributes = [
+ {
+ attributeKey: {
+ key: "email",
+ name: "Email",
+ },
+ value: "test@example.com",
+ },
+ {
+ attributeKey: {
+ key: "email",
+ name: "Email Duplicate",
+ },
+ value: "test2@example.com",
+ },
+ ];
+ let issueAdded = false;
+ const mockCtx = {
+ addIssue: () => {
+ issueAdded = true;
+ },
+ } as any;
+ validateUniqueAttributeKeys(attributes, mockCtx);
+ expect(issueAdded).toBe(true);
+ });
+
+ test("should include contact index in error messages when provided", () => {
+ const attributes = [
+ {
+ attributeKey: {
+ key: "email",
+ name: "Email",
+ },
+ value: "test@example.com",
+ },
+ {
+ attributeKey: {
+ key: "email",
+ name: "Email Duplicate",
+ },
+ value: "test2@example.com",
+ },
+ ];
+ let issueAdded = false;
+ const mockCtx = {
+ addIssue: () => {
+ issueAdded = true;
+ },
+ } as any;
+ validateUniqueAttributeKeys(attributes, mockCtx, 3);
+ expect(issueAdded).toBe(true);
+ });
+});
diff --git a/apps/web/modules/ee/contacts/types/contact.ts b/apps/web/modules/ee/contacts/types/contact.ts
index d3bf5fb0fa..e400ad281f 100644
--- a/apps/web/modules/ee/contacts/types/contact.ts
+++ b/apps/web/modules/ee/contacts/types/contact.ts
@@ -122,6 +122,68 @@ export const ZContactBulkUploadContact = z.object({
export type TContactBulkUploadContact = z.infer;
+// Helper functions for common validation logic
+export const validateEmailAttribute = (
+ attributes: z.infer[],
+ ctx: z.RefinementCtx,
+ contactIndex?: number
+): { emailAttr?: z.infer; isValid: boolean } => {
+ const emailAttr = attributes.find((attr) => attr.attributeKey.key === "email");
+ const indexSuffix = contactIndex !== undefined ? ` for contact at index ${contactIndex}` : "";
+
+ if (!emailAttr?.value) {
+ ctx.addIssue({
+ code: z.ZodIssueCode.custom,
+ message: `Email attribute is required${indexSuffix}`,
+ });
+ return { isValid: false };
+ }
+
+ // Check email format
+ const parsedEmail = z.string().email().safeParse(emailAttr.value);
+ if (!parsedEmail.success) {
+ ctx.addIssue({
+ code: z.ZodIssueCode.custom,
+ message: `Invalid email format${indexSuffix}`,
+ });
+ return { emailAttr, isValid: false };
+ }
+
+ return { emailAttr, isValid: true };
+};
+
+export const validateUniqueAttributeKeys = (
+ attributes: z.infer[],
+ ctx: z.RefinementCtx,
+ contactIndex?: number
+) => {
+ const keyOccurrences = new Map();
+ const duplicateKeys: string[] = [];
+
+ attributes.forEach((attr) => {
+ const key = attr.attributeKey.key;
+ const count = (keyOccurrences.get(key) ?? 0) + 1;
+ keyOccurrences.set(key, count);
+
+ // If this is the second occurrence, add to duplicates
+ if (count === 2) {
+ duplicateKeys.push(key);
+ }
+ });
+
+ if (duplicateKeys.length > 0) {
+ const indexSuffix = contactIndex !== undefined ? ` for contact at index ${contactIndex}` : "";
+ ctx.addIssue({
+ code: z.ZodIssueCode.custom,
+ message: `Duplicate attribute keys found${indexSuffix}. Please ensure each attribute key is unique`,
+ params: {
+ duplicateKeys,
+ ...(contactIndex !== undefined && { contactIndex }),
+ },
+ });
+ }
+};
+
export const ZContactBulkUploadRequest = z.object({
environmentId: z.string().cuid2(),
contacts: z
@@ -133,28 +195,14 @@ export const ZContactBulkUploadRequest = z.object({
const duplicateEmails = new Set();
const seenUserIds = new Set();
const duplicateUserIds = new Set();
- const contactsWithDuplicateKeys: { idx: number; duplicateKeys: string[] }[] = [];
// Process each contact in a single pass
contacts.forEach((contact, idx) => {
- // 1. Check email existence and validity
- const emailAttr = contact.attributes.find((attr) => attr.attributeKey.key === "email");
- if (!emailAttr?.value) {
- ctx.addIssue({
- code: z.ZodIssueCode.custom,
- message: `Missing email attribute for contact at index ${idx}`,
- });
- } else {
- // Check email format
- const parsedEmail = z.string().email().safeParse(emailAttr.value);
- if (!parsedEmail.success) {
- ctx.addIssue({
- code: z.ZodIssueCode.custom,
- message: `Invalid email for contact at index ${idx}`,
- });
- }
+ // 1. Check email existence and validity using helper function
+ const { emailAttr, isValid } = validateEmailAttribute(contact.attributes, ctx, idx);
- // Check for duplicate emails
+ if (isValid && emailAttr) {
+ // Check for duplicate emails across contacts
if (seenEmails.has(emailAttr.value)) {
duplicateEmails.add(emailAttr.value);
} else {
@@ -172,24 +220,8 @@ export const ZContactBulkUploadRequest = z.object({
}
}
- // 3. Check for duplicate attribute keys within the same contact
- const keyOccurrences = new Map();
- const duplicateKeysForContact: string[] = [];
-
- contact.attributes.forEach((attr) => {
- const key = attr.attributeKey.key;
- const count = (keyOccurrences.get(key) || 0) + 1;
- keyOccurrences.set(key, count);
-
- // If this is the second occurrence, add to duplicates
- if (count === 2) {
- duplicateKeysForContact.push(key);
- }
- });
-
- if (duplicateKeysForContact.length > 0) {
- contactsWithDuplicateKeys.push({ idx, duplicateKeys: duplicateKeysForContact });
- }
+ // 3. Check for duplicate attribute keys within the same contact using helper function
+ validateUniqueAttributeKeys(contact.attributes, ctx, idx);
});
// Report all validation issues after the single pass
@@ -212,17 +244,6 @@ export const ZContactBulkUploadRequest = z.object({
},
});
}
-
- if (contactsWithDuplicateKeys.length > 0) {
- ctx.addIssue({
- code: z.ZodIssueCode.custom,
- message:
- "Duplicate attribute keys found in the records, please ensure each attribute key is unique.",
- params: {
- contactsWithDuplicateKeys,
- },
- });
- }
}),
});
@@ -243,3 +264,39 @@ export type TContactBulkUploadResponseSuccess = TContactBulkUploadResponseBase &
processed: number;
failed: number;
};
+
+// Schema for single contact creation - simplified with flat attributes
+export const ZContactCreateRequest = z.object({
+ environmentId: z.string().cuid2(),
+ attributes: z.record(z.string(), z.string()).superRefine((attributes, ctx) => {
+ // Check if email attribute exists and is valid
+ const email = attributes.email;
+ if (!email) {
+ ctx.addIssue({
+ code: z.ZodIssueCode.custom,
+ message: "Email attribute is required",
+ });
+ } else {
+ // Check email format
+ const parsedEmail = z.string().email().safeParse(email);
+ if (!parsedEmail.success) {
+ ctx.addIssue({
+ code: z.ZodIssueCode.custom,
+ message: "Invalid email format",
+ });
+ }
+ }
+ }),
+});
+
+export type TContactCreateRequest = z.infer;
+
+// Type for contact response with flattened attributes
+export const ZContactResponse = z.object({
+ id: z.string().cuid2(),
+ createdAt: z.date(),
+ environmentId: z.string().cuid2(),
+ attributes: z.record(z.string(), z.string()),
+});
+
+export type TContactResponse = z.infer;
diff --git a/apps/web/package.json b/apps/web/package.json
index 969c9b9c70..8d9cdadba7 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -13,9 +13,9 @@
"lint": "next lint",
"test": "dotenv -e ../../.env -- vitest run",
"test:coverage": "dotenv -e ../../.env -- vitest run --coverage",
- "generate-api-specs": "dotenv -e ../../.env tsx ./modules/api/v2/openapi-document.ts > ../../docs/api-v2-reference/openapi.yml",
+ "generate-api-specs": "./scripts/openapi/generate.sh",
"merge-client-endpoints": "tsx ./scripts/openapi/merge-client-endpoints.ts",
- "generate-and-merge-api-specs": "npm run generate-api-specs && npm run merge-client-endpoints"
+ "generate-and-merge-api-specs": "pnpm run generate-api-specs && pnpm run merge-client-endpoints"
},
"dependencies": {
"@aws-sdk/client-s3": "3.804.0",
@@ -160,6 +160,7 @@
"@vitest/coverage-v8": "3.1.3",
"autoprefixer": "10.4.21",
"dotenv": "16.5.0",
+ "esbuild": "0.25.4",
"postcss": "8.5.3",
"resize-observer-polyfill": "1.5.1",
"ts-node": "10.9.2",
diff --git a/apps/web/playwright/api/management/contacts.spec.ts b/apps/web/playwright/api/management/contacts.spec.ts
new file mode 100644
index 0000000000..a0673d4a95
--- /dev/null
+++ b/apps/web/playwright/api/management/contacts.spec.ts
@@ -0,0 +1,161 @@
+import { expect } from "@playwright/test";
+import { test } from "../../lib/fixtures";
+import { loginAndGetApiKey } from "../../lib/utils";
+
+test.describe("API Tests for Single Contact Creation", () => {
+ test("Create and Test Contact Creation via API", async ({ page, users, request }) => {
+ let environmentId, apiKey;
+
+ try {
+ ({ environmentId, apiKey } = await loginAndGetApiKey(page, users));
+ } catch (error) {
+ console.error("Error during login and getting API key:", error);
+ throw error;
+ }
+
+ const baseEmail = `test-${Date.now()}`;
+
+ await test.step("Create contact successfully with email only", async () => {
+ const uniqueEmail = `${baseEmail}-single@example.com`;
+
+ const response = await request.post("/api/v2/management/contacts", {
+ headers: { "x-api-key": apiKey },
+ data: {
+ environmentId,
+ attributes: {
+ email: uniqueEmail,
+ },
+ },
+ });
+
+ expect(response.status()).toBe(201);
+
+ const contactData = await response.json();
+ expect(contactData.data).toBeDefined();
+ expect(contactData.data.id).toMatch(/^[a-z0-9]{25}$/); // CUID2 format
+ expect(contactData.data.environmentId).toBe(environmentId);
+ expect(contactData.data.attributes.email).toBe(uniqueEmail);
+ expect(contactData.data.createdAt).toBeDefined();
+ });
+
+ await test.step("Create contact successfully with multiple attributes", async () => {
+ const uniqueEmail = `${baseEmail}-multi@example.com`;
+ const uniqueUserId = `usr_${Date.now()}`;
+
+ const response = await request.post("/api/v2/management/contacts", {
+ headers: { "x-api-key": apiKey },
+ data: {
+ environmentId,
+ attributes: {
+ email: uniqueEmail,
+ firstName: "John",
+ lastName: "Doe",
+ userId: uniqueUserId,
+ },
+ },
+ });
+
+ expect(response.status()).toBe(201);
+
+ const contactData = await response.json();
+ expect(contactData.data.attributes.email).toBe(uniqueEmail);
+ expect(contactData.data.attributes.firstName).toBe("John");
+ expect(contactData.data.attributes.lastName).toBe("Doe");
+ expect(contactData.data.attributes.userId).toBe(uniqueUserId);
+ });
+
+ await test.step("Return error for missing attribute keys", async () => {
+ const uniqueEmail = `${baseEmail}-newkey@example.com`;
+ const customKey = `customAttribute_${Date.now()}`;
+
+ const response = await request.post("/api/v2/management/contacts", {
+ headers: { "x-api-key": apiKey },
+ data: {
+ environmentId,
+ attributes: {
+ email: uniqueEmail,
+ [customKey]: "custom value",
+ },
+ },
+ });
+
+ expect(response.status()).toBe(400);
+
+ const errorData = await response.json();
+ expect(errorData.error.details[0].field).toBe("attributes");
+ expect(errorData.error.details[0].issue).toContain("attribute keys not found");
+ expect(errorData.error.details[0].issue).toContain(customKey);
+ });
+
+ await test.step("Prevent duplicate email addresses", async () => {
+ const duplicateEmail = `${baseEmail}-duplicate@example.com`;
+
+ // Create first contact
+ const firstResponse = await request.post("/api/v2/management/contacts", {
+ headers: { "x-api-key": apiKey },
+ data: {
+ environmentId,
+ attributes: {
+ email: duplicateEmail,
+ },
+ },
+ });
+ expect(firstResponse.status()).toBe(201);
+
+ // Try to create second contact with same email
+ const secondResponse = await request.post("/api/v2/management/contacts", {
+ headers: { "x-api-key": apiKey },
+ data: {
+ environmentId,
+ attributes: {
+ email: duplicateEmail,
+ },
+ },
+ });
+
+ expect(secondResponse.status()).toBe(409);
+
+ const errorData = await secondResponse.json();
+
+ expect(errorData.error.details[0].field).toBe("email");
+ expect(errorData.error.details[0].issue).toContain("already exists");
+ });
+
+ await test.step("Prevent duplicate userId", async () => {
+ const duplicateUserId = `usr_duplicate_${Date.now()}`;
+ const email1 = `${baseEmail}-userid1@example.com`;
+ const email2 = `${baseEmail}-userid2@example.com`;
+
+ // Create first contact
+ const firstResponse = await request.post("/api/v2/management/contacts", {
+ headers: { "x-api-key": apiKey },
+ data: {
+ environmentId,
+ attributes: {
+ email: email1,
+ userId: duplicateUserId,
+ },
+ },
+ });
+ expect(firstResponse.status()).toBe(201);
+
+ // Try to create second contact with same userId but different email
+ const secondResponse = await request.post("/api/v2/management/contacts", {
+ headers: { "x-api-key": apiKey },
+ data: {
+ environmentId,
+ attributes: {
+ email: email2,
+ userId: duplicateUserId,
+ },
+ },
+ });
+
+ expect(secondResponse.status()).toBe(409);
+
+ const errorData = await secondResponse.json();
+ expect(errorData.error.details[0].field).toBe("userId");
+ expect(errorData.error.details[0].issue).toContain("already exists");
+ });
+ });
+});
diff --git a/apps/web/playwright/fixtures/users.ts b/apps/web/playwright/fixtures/users.ts
index 87457792ff..95b0b11046 100644
--- a/apps/web/playwright/fixtures/users.ts
+++ b/apps/web/playwright/fixtures/users.ts
@@ -95,6 +95,24 @@ export const createUsersFixture = (page: Page, workerInfo: TestInfo): UsersFixtu
type: "development",
attributeKeys: {
create: [
+ {
+ name: "Email",
+ key: "email",
+ isUnique: true,
+ type: "default",
+ },
+ {
+ name: "First Name",
+ key: "firstName",
+ isUnique: false,
+ type: "default",
+ },
+ {
+ name: "Last Name",
+ key: "lastName",
+ isUnique: false,
+ type: "default",
+ },
{
name: "userId",
key: "userId",
@@ -108,6 +126,24 @@ export const createUsersFixture = (page: Page, workerInfo: TestInfo): UsersFixtu
type: "production",
attributeKeys: {
create: [
+ {
+ name: "Email",
+ key: "email",
+ isUnique: true,
+ type: "default",
+ },
+ {
+ name: "First Name",
+ key: "firstName",
+ isUnique: false,
+ type: "default",
+ },
+ {
+ name: "Last Name",
+ key: "lastName",
+ isUnique: false,
+ type: "default",
+ },
{
name: "userId",
key: "userId",
diff --git a/apps/web/scripts/openapi/generate.sh b/apps/web/scripts/openapi/generate.sh
new file mode 100755
index 0000000000..6d9688cdd4
--- /dev/null
+++ b/apps/web/scripts/openapi/generate.sh
@@ -0,0 +1,24 @@
+#!/bin/bash
+
+# Script to generate OpenAPI documentation
+# This builds the TypeScript file first to avoid module resolution issues
+
+set -e # Exit on any error
+
+# Get script directory and compute project root
+SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)"
+PROJECT_ROOT="$(cd "$SCRIPT_DIR/../../../.." && pwd)"
+APPS_WEB_DIR="$PROJECT_ROOT/apps/web"
+
+echo "Building OpenAPI document generator..."
+
+# Build using the permanent vite config (from apps/web directory)
+cd "$APPS_WEB_DIR"
+vite build --config scripts/openapi/vite.config.ts
+
+echo "Generating OpenAPI YAML..."
+
+# Run the built file and output to YAML
+dotenv -e "$PROJECT_ROOT/.env" -- node dist/openapi-document.js > "$PROJECT_ROOT/docs/api-v2-reference/openapi.yml"
+
+echo "OpenAPI documentation generated successfully at docs/api-v2-reference/openapi.yml"
\ No newline at end of file
diff --git a/apps/web/scripts/openapi/vite.config.ts b/apps/web/scripts/openapi/vite.config.ts
new file mode 100644
index 0000000000..9441b483f6
--- /dev/null
+++ b/apps/web/scripts/openapi/vite.config.ts
@@ -0,0 +1,23 @@
+import { resolve } from "node:path";
+import { defineConfig } from "vite";
+import tsconfigPaths from "vite-tsconfig-paths";
+
+export default defineConfig({
+ build: {
+ lib: {
+ entry: resolve(__dirname, "../../modules/api/v2/openapi-document.ts"),
+ name: "openapiDocument",
+ fileName: "openapi-document",
+ formats: ["cjs"],
+ },
+ rollupOptions: {
+ external: ["@prisma/client", "yaml", "zod", "zod-openapi"],
+ output: {
+ exports: "named",
+ },
+ },
+ outDir: "dist",
+ emptyOutDir: true,
+ },
+ plugins: [tsconfigPaths()],
+});
diff --git a/docs/api-v2-reference/openapi.yml b/docs/api-v2-reference/openapi.yml
index de25cd17e7..810585d4b4 100644
--- a/docs/api-v2-reference/openapi.yml
+++ b/docs/api-v2-reference/openapi.yml
@@ -1658,6 +1658,69 @@ paths:
- skippedContacts
required:
- data
+ /contacts:
+ servers: *a6
+ post:
+ operationId: createContact
+ summary: Create a contact
+ description: Creates a contact in the database. Each contact must have a valid
+ email address in the attributes. All attribute keys must already exist
+ in the environment. The email is used as the unique identifier along
+ with the environment.
+ tags:
+ - Management API - Contacts
+ requestBody:
+ required: true
+ description: The contact to create. Must include an email attribute and all
+ attribute keys must already exist in the environment.
+ content:
+ application/json:
+ schema:
+ type: object
+ properties:
+ environmentId:
+ type: string
+ attributes:
+ type: object
+ additionalProperties:
+ type: string
+ required:
+ - environmentId
+ - attributes
+ example:
+ environmentId: env_01h2xce9q8p3w4x5y6z7a8b9c0
+ attributes:
+ email: john.doe@example.com
+ firstName: John
+ lastName: Doe
+ userId: h2xce9q8p3w4x5y6z7a8b9c1
+ responses:
+ "201":
+ description: Contact created successfully.
+ content:
+ application/json:
+ schema:
+ type: object
+ properties:
+ id:
+ type: string
+ createdAt:
+ type: string
+ environmentId:
+ type: string
+ attributes:
+ type: object
+ additionalProperties:
+ type: string
+ example:
+ id: ctc_01h2xce9q8p3w4x5y6z7a8b9c2
+ createdAt: 2023-01-01T12:00:00.000Z
+ environmentId: env_01h2xce9q8p3w4x5y6z7a8b9c0
+ attributes:
+ email: john.doe@example.com
+ firstName: John
+ lastName: Doe
+ userId: h2xce9q8p3w4x5y6z7a8b9c1
/contact-attribute-keys:
servers: *a6
get:
@@ -4017,7 +4080,6 @@ components:
type: string
buttonLink:
type: string
- format: uri
imageUrl:
type: string
videoUrl:
@@ -4297,7 +4359,6 @@ components:
pattern: ^#(?:[A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$
required:
- light
-
highlightBorderColor:
type:
- object
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6665ac667e..99f655c6a6 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -255,7 +255,7 @@ importers:
version: 0.0.38(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
'@sentry/nextjs':
specifier: 9.22.0
- version: 9.22.0(@opentelemetry/context-async-hooks@1.30.1(@opentelemetry/api@1.9.0))(@opentelemetry/core@1.30.1(@opentelemetry/api@1.9.0))(@opentelemetry/instrumentation@0.200.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@1.30.1(@opentelemetry/api@1.9.0))(encoding@0.1.13)(next@15.3.1(@opentelemetry/api@1.9.0)(@playwright/test@1.52.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react@19.1.0)(webpack@5.99.8)
+ version: 9.22.0(@opentelemetry/context-async-hooks@1.30.1(@opentelemetry/api@1.9.0))(@opentelemetry/core@1.30.1(@opentelemetry/api@1.9.0))(@opentelemetry/instrumentation@0.200.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@1.30.1(@opentelemetry/api@1.9.0))(encoding@0.1.13)(next@15.3.1(@opentelemetry/api@1.9.0)(@playwright/test@1.52.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react@19.1.0)(webpack@5.99.8(esbuild@0.25.4))
'@t3-oss/env-nextjs':
specifier: 0.13.4
version: 0.13.4(arktype@2.1.20)(typescript@5.8.3)(zod@3.24.4)
@@ -312,7 +312,7 @@ importers:
version: 4.1.0
file-loader:
specifier: 6.2.0
- version: 6.2.0(webpack@5.99.8)
+ version: 6.2.0(webpack@5.99.8(esbuild@0.25.4))
framer-motion:
specifier: 12.10.0
version: 12.10.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
@@ -444,7 +444,7 @@ importers:
version: 11.1.0
webpack:
specifier: 5.99.8
- version: 5.99.8
+ version: 5.99.8(esbuild@0.25.4)
xlsx:
specifier: 0.18.5
version: 0.18.5
@@ -515,6 +515,9 @@ importers:
dotenv:
specifier: 16.5.0
version: 16.5.0
+ esbuild:
+ specifier: 0.25.4
+ version: 0.25.4
postcss:
specifier: 8.5.3
version: 8.5.3
@@ -13268,7 +13271,7 @@ snapshots:
'@sentry/core@9.22.0': {}
- '@sentry/nextjs@9.22.0(@opentelemetry/context-async-hooks@1.30.1(@opentelemetry/api@1.9.0))(@opentelemetry/core@1.30.1(@opentelemetry/api@1.9.0))(@opentelemetry/instrumentation@0.200.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@1.30.1(@opentelemetry/api@1.9.0))(encoding@0.1.13)(next@15.3.1(@opentelemetry/api@1.9.0)(@playwright/test@1.52.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react@19.1.0)(webpack@5.99.8)':
+ '@sentry/nextjs@9.22.0(@opentelemetry/context-async-hooks@1.30.1(@opentelemetry/api@1.9.0))(@opentelemetry/core@1.30.1(@opentelemetry/api@1.9.0))(@opentelemetry/instrumentation@0.200.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@1.30.1(@opentelemetry/api@1.9.0))(encoding@0.1.13)(next@15.3.1(@opentelemetry/api@1.9.0)(@playwright/test@1.52.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react@19.1.0)(webpack@5.99.8(esbuild@0.25.4))':
dependencies:
'@opentelemetry/api': 1.9.0
'@opentelemetry/semantic-conventions': 1.34.0
@@ -13279,7 +13282,7 @@ snapshots:
'@sentry/opentelemetry': 9.22.0(@opentelemetry/api@1.9.0)(@opentelemetry/context-async-hooks@1.30.1(@opentelemetry/api@1.9.0))(@opentelemetry/core@1.30.1(@opentelemetry/api@1.9.0))(@opentelemetry/instrumentation@0.200.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@1.30.1(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.34.0)
'@sentry/react': 9.22.0(react@19.1.0)
'@sentry/vercel-edge': 9.22.0
- '@sentry/webpack-plugin': 3.3.1(encoding@0.1.13)(webpack@5.99.8)
+ '@sentry/webpack-plugin': 3.3.1(encoding@0.1.13)(webpack@5.99.8(esbuild@0.25.4))
chalk: 3.0.0
next: 15.3.1(@opentelemetry/api@1.9.0)(@playwright/test@1.52.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
resolve: 1.22.8
@@ -13366,12 +13369,12 @@ snapshots:
'@opentelemetry/api': 1.9.0
'@sentry/core': 9.22.0
- '@sentry/webpack-plugin@3.3.1(encoding@0.1.13)(webpack@5.99.8)':
+ '@sentry/webpack-plugin@3.3.1(encoding@0.1.13)(webpack@5.99.8(esbuild@0.25.4))':
dependencies:
'@sentry/bundler-plugin-core': 3.3.1(encoding@0.1.13)
unplugin: 1.0.1
uuid: 9.0.1
- webpack: 5.99.8
+ webpack: 5.99.8(esbuild@0.25.4)
transitivePeerDependencies:
- encoding
- supports-color
@@ -16430,11 +16433,11 @@ snapshots:
dependencies:
flat-cache: 3.2.0
- file-loader@6.2.0(webpack@5.99.8):
+ file-loader@6.2.0(webpack@5.99.8(esbuild@0.25.4)):
dependencies:
loader-utils: 2.0.4
schema-utils: 3.3.0
- webpack: 5.99.8
+ webpack: 5.99.8(esbuild@0.25.4)
file-uri-to-path@1.0.0: {}
@@ -19511,14 +19514,16 @@ snapshots:
transitivePeerDependencies:
- supports-color
- terser-webpack-plugin@5.3.14(webpack@5.99.8):
+ terser-webpack-plugin@5.3.14(esbuild@0.25.4)(webpack@5.99.8(esbuild@0.25.4)):
dependencies:
'@jridgewell/trace-mapping': 0.3.29
jest-worker: 27.5.1
schema-utils: 4.3.2
serialize-javascript: 6.0.2
terser: 5.39.1
- webpack: 5.99.8
+ webpack: 5.99.8(esbuild@0.25.4)
+ optionalDependencies:
+ esbuild: 0.25.4
terser@5.39.1:
dependencies:
@@ -20074,7 +20079,7 @@ snapshots:
webpack-virtual-modules@0.6.2: {}
- webpack@5.99.8:
+ webpack@5.99.8(esbuild@0.25.4):
dependencies:
'@types/eslint-scope': 3.7.7
'@types/estree': 1.0.8
@@ -20097,7 +20102,7 @@ snapshots:
neo-async: 2.6.2
schema-utils: 4.3.2
tapable: 2.2.2
- terser-webpack-plugin: 5.3.14(webpack@5.99.8)
+ terser-webpack-plugin: 5.3.14(esbuild@0.25.4)(webpack@5.99.8(esbuild@0.25.4))
watchpack: 2.4.4
webpack-sources: 3.3.3
transitivePeerDependencies:
From 599e847686255a6ce0731e0d70fc2bbbe109e752 Mon Sep 17 00:00:00 2001
From: Dhruwang Jariwala <67850763+Dhruwang@users.noreply.github.com>
Date: Thu, 10 Jul 2025 16:13:57 +0530
Subject: [PATCH 18/29] chore: removed integrity hash chain from audit logging
(#6202)
---
.env.example | 2 +-
apps/web/lib/constants.ts | 7 +-
.../modules/ee/audit-logs/lib/cache.test.ts | 113 -----------------
apps/web/modules/ee/audit-logs/lib/cache.ts | 67 ----------
.../modules/ee/audit-logs/lib/handler.test.ts | 29 +----
apps/web/modules/ee/audit-logs/lib/handler.ts | 22 +---
.../modules/ee/audit-logs/lib/service.test.ts | 3 -
.../modules/ee/audit-logs/lib/utils.test.ts | 115 ------------------
apps/web/modules/ee/audit-logs/lib/utils.ts | 36 ------
.../modules/ee/audit-logs/types/audit-log.ts | 3 -
docker/docker-compose.yml | 4 +-
.../enterprise-features/audit-logging.mdx | 28 ++---
12 files changed, 23 insertions(+), 406 deletions(-)
delete mode 100644 apps/web/modules/ee/audit-logs/lib/cache.test.ts
delete mode 100644 apps/web/modules/ee/audit-logs/lib/cache.ts
diff --git a/.env.example b/.env.example
index b3ed82c802..2064d9ec69 100644
--- a/.env.example
+++ b/.env.example
@@ -219,7 +219,7 @@ UNKEY_ROOT_KEY=
# Configure the maximum age for the session in seconds. Default is 86400 (24 hours)
# SESSION_MAX_AGE=86400
-# Audit logs options. Requires REDIS_URL env varibale. Default 0.
+# Audit logs options. Default 0.
# AUDIT_LOG_ENABLED=0
# If the ip should be added in the log or not. Default 0
# AUDIT_LOG_GET_USER_IP=0
diff --git a/apps/web/lib/constants.ts b/apps/web/lib/constants.ts
index fc344e5243..e68cbca10d 100644
--- a/apps/web/lib/constants.ts
+++ b/apps/web/lib/constants.ts
@@ -297,11 +297,6 @@ export const PROMETHEUS_ENABLED = env.PROMETHEUS_ENABLED === "1";
export const USER_MANAGEMENT_MINIMUM_ROLE = env.USER_MANAGEMENT_MINIMUM_ROLE ?? "manager";
-export const AUDIT_LOG_ENABLED =
- env.AUDIT_LOG_ENABLED === "1" &&
- env.REDIS_URL &&
- env.REDIS_URL !== "" &&
- env.ENCRYPTION_KEY &&
- env.ENCRYPTION_KEY !== ""; // The audit log requires Redis to be configured
+export const AUDIT_LOG_ENABLED = env.AUDIT_LOG_ENABLED === "1";
export const AUDIT_LOG_GET_USER_IP = env.AUDIT_LOG_GET_USER_IP === "1";
export const SESSION_MAX_AGE = Number(env.SESSION_MAX_AGE) || 86400;
diff --git a/apps/web/modules/ee/audit-logs/lib/cache.test.ts b/apps/web/modules/ee/audit-logs/lib/cache.test.ts
deleted file mode 100644
index a52c648990..0000000000
--- a/apps/web/modules/ee/audit-logs/lib/cache.test.ts
+++ /dev/null
@@ -1,113 +0,0 @@
-import redis from "@/modules/cache/redis";
-import { afterAll, beforeEach, describe, expect, test, vi } from "vitest";
-import {
- AUDIT_LOG_HASH_KEY,
- getPreviousAuditLogHash,
- runAuditLogHashTransaction,
- setPreviousAuditLogHash,
-} from "./cache";
-
-// Mock redis module
-vi.mock("@/modules/cache/redis", () => {
- let store: Record = {};
- return {
- default: {
- del: vi.fn(async (key: string) => {
- store[key] = null;
- return 1;
- }),
- quit: vi.fn(async () => {
- return "OK";
- }),
- get: vi.fn(async (key: string) => {
- return store[key] ?? null;
- }),
- set: vi.fn(async (key: string, value: string) => {
- store[key] = value;
- return "OK";
- }),
- watch: vi.fn(async (_key: string) => {
- return "OK";
- }),
- unwatch: vi.fn(async () => {
- return "OK";
- }),
- multi: vi.fn(() => {
- return {
- set: vi.fn(function (key: string, value: string) {
- store[key] = value;
- return this;
- }),
- exec: vi.fn(async () => {
- return [[null, "OK"]];
- }),
- } as unknown as import("ioredis").ChainableCommander;
- }),
- },
- };
-});
-
-describe("audit log cache utils", () => {
- beforeEach(async () => {
- await redis?.del(AUDIT_LOG_HASH_KEY);
- });
-
- afterAll(async () => {
- await redis?.quit();
- });
-
- test("should get and set the previous audit log hash", async () => {
- expect(await getPreviousAuditLogHash()).toBeNull();
- await setPreviousAuditLogHash("testhash");
- expect(await getPreviousAuditLogHash()).toBe("testhash");
- });
-
- test("should run a successful audit log hash transaction", async () => {
- let logCalled = false;
- await runAuditLogHashTransaction(async (previousHash) => {
- expect(previousHash).toBeNull();
- return {
- auditEvent: async () => {
- logCalled = true;
- },
- integrityHash: "hash1",
- };
- });
- expect(await getPreviousAuditLogHash()).toBe("hash1");
- expect(logCalled).toBe(true);
- });
-
- test("should retry and eventually throw if the hash keeps changing", async () => {
- // Simulate another process changing the hash every time
- let callCount = 0;
- const originalMulti = redis?.multi;
- (redis?.multi as any).mockImplementation(() => {
- return {
- set: vi.fn(function () {
- return this;
- }),
- exec: vi.fn(async () => {
- callCount++;
- return null; // Simulate transaction failure
- }),
- } as unknown as import("ioredis").ChainableCommander;
- });
- let errorCaught = false;
- try {
- await runAuditLogHashTransaction(async () => {
- return {
- auditEvent: async () => {},
- integrityHash: "conflict-hash",
- };
- });
- throw new Error("Error was not thrown by runAuditLogHashTransaction");
- } catch (e) {
- errorCaught = true;
- expect((e as Error).message).toContain("Failed to update audit log hash after multiple retries");
- }
- expect(errorCaught).toBe(true);
- expect(callCount).toBe(5);
- // Restore
- (redis?.multi as any).mockImplementation(originalMulti);
- });
-});
diff --git a/apps/web/modules/ee/audit-logs/lib/cache.ts b/apps/web/modules/ee/audit-logs/lib/cache.ts
deleted file mode 100644
index c38aaa3066..0000000000
--- a/apps/web/modules/ee/audit-logs/lib/cache.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-import redis from "@/modules/cache/redis";
-import { logger } from "@formbricks/logger";
-
-export const AUDIT_LOG_HASH_KEY = "audit:lastHash";
-
-export async function getPreviousAuditLogHash(): Promise {
- if (!redis) {
- logger.error("Redis is not initialized");
- return null;
- }
-
- return (await redis.get(AUDIT_LOG_HASH_KEY)) ?? null;
-}
-
-export async function setPreviousAuditLogHash(hash: string): Promise {
- if (!redis) {
- logger.error("Redis is not initialized");
- return;
- }
-
- await redis.set(AUDIT_LOG_HASH_KEY, hash);
-}
-
-/**
- * Runs a concurrency-safe Redis transaction for the audit log hash chain.
- * The callback receives the previous hash and should return the audit event to log.
- * Handles retries and atomicity.
- */
-export async function runAuditLogHashTransaction(
- buildAndLogEvent: (previousHash: string | null) => Promise<{ auditEvent: any; integrityHash: string }>
-): Promise {
- let retry = 0;
- while (retry < 5) {
- if (!redis) {
- logger.error("Redis is not initialized");
- throw new Error("Redis is not initialized");
- }
-
- let result;
- let auditEvent;
- try {
- await redis.watch(AUDIT_LOG_HASH_KEY);
- const previousHash = await getPreviousAuditLogHash();
- const buildResult = await buildAndLogEvent(previousHash);
- auditEvent = buildResult.auditEvent;
- const integrityHash = buildResult.integrityHash;
-
- const tx = redis.multi();
- tx.set(AUDIT_LOG_HASH_KEY, integrityHash);
-
- result = await tx.exec();
- } finally {
- await redis.unwatch();
- }
- if (result) {
- // Success: now log the audit event
- await auditEvent();
- return;
- }
- // Retry if the hash was changed by another process
- retry++;
- }
- // Debug log for test diagnostics
- // eslint-disable-next-line no-console
- console.error("runAuditLogHashTransaction: throwing after 5 retries");
- throw new Error("Failed to update audit log hash after multiple retries (concurrency issue)");
-}
diff --git a/apps/web/modules/ee/audit-logs/lib/handler.test.ts b/apps/web/modules/ee/audit-logs/lib/handler.test.ts
index aafd2442ef..06ec53ed95 100644
--- a/apps/web/modules/ee/audit-logs/lib/handler.test.ts
+++ b/apps/web/modules/ee/audit-logs/lib/handler.test.ts
@@ -5,8 +5,6 @@ import * as OriginalHandler from "./handler";
// Use 'var' for all mock handles used in vi.mock factories to avoid hoisting/TDZ issues
var serviceLogAuditEventMockHandle: ReturnType; // NOSONAR / test code
-var cacheRunAuditLogHashTransactionMockHandle: ReturnType; // NOSONAR / test code
-var utilsComputeAuditLogHashMockHandle: ReturnType; // NOSONAR / test code
var loggerErrorMockHandle: ReturnType; // NOSONAR / test code
// Use 'var' for mutableConstants due to hoisting issues with vi.mock factories
@@ -23,7 +21,6 @@ vi.mock("@/lib/constants", () => ({
return mutableConstants ? mutableConstants.AUDIT_LOG_ENABLED : true; // Default to true if somehow undefined
},
AUDIT_LOG_GET_USER_IP: true,
- ENCRYPTION_KEY: "testsecret",
}));
vi.mock("@/lib/utils/client-ip", () => ({
getClientIpFromHeaders: vi.fn().mockResolvedValue("127.0.0.1"),
@@ -35,19 +32,10 @@ vi.mock("@/modules/ee/audit-logs/lib/service", () => {
return { logAuditEvent: mock };
});
-vi.mock("./cache", () => {
- const mock = vi.fn((fn) => fn(null).then((res: any) => res.auditEvent())); // Keep original mock logic
- cacheRunAuditLogHashTransactionMockHandle = mock;
- return { runAuditLogHashTransaction: mock };
-});
-
vi.mock("./utils", async () => {
const actualUtils = await vi.importActual("./utils");
- const mock = vi.fn();
- utilsComputeAuditLogHashMockHandle = mock;
return {
...(actualUtils as object),
- computeAuditLogHash: mock, // This is the one we primarily care about controlling
redactPII: vi.fn((obj) => obj), // Keep others as simple mocks or actuals if needed
deepDiff: vi.fn((a, b) => ({ diff: true })),
};
@@ -139,12 +127,6 @@ const mockCtxBase = {
// Helper to clear all mock handles
function clearAllMockHandles() {
if (serviceLogAuditEventMockHandle) serviceLogAuditEventMockHandle.mockClear().mockResolvedValue(undefined);
- if (cacheRunAuditLogHashTransactionMockHandle)
- cacheRunAuditLogHashTransactionMockHandle
- .mockClear()
- .mockImplementation((fn) => fn(null).then((res: any) => res.auditEvent()));
- if (utilsComputeAuditLogHashMockHandle)
- utilsComputeAuditLogHashMockHandle.mockClear().mockReturnValue("testhash");
if (loggerErrorMockHandle) loggerErrorMockHandle.mockClear();
if (mutableConstants) {
// Check because it's a var and could be re-assigned (though not in this code)
@@ -164,25 +146,23 @@ describe("queueAuditEvent", () => {
await OriginalHandler.queueAuditEvent(baseEventParams);
// Now, OriginalHandler.queueAuditEvent will call the REAL OriginalHandler.buildAndLogAuditEvent
// We expect the MOCKED dependencies of buildAndLogAuditEvent to be called.
- expect(cacheRunAuditLogHashTransactionMockHandle).toHaveBeenCalled();
expect(serviceLogAuditEventMockHandle).toHaveBeenCalled();
// Add more specific assertions on what serviceLogAuditEventMockHandle was called with if necessary
// This would be similar to the direct tests for buildAndLogAuditEvent
const logCall = serviceLogAuditEventMockHandle.mock.calls[0][0];
expect(logCall.action).toBe(baseEventParams.action);
- expect(logCall.integrityHash).toBe("testhash");
});
test("handles errors from buildAndLogAuditEvent dependencies", async () => {
- const testError = new Error("DB hash error in test");
- cacheRunAuditLogHashTransactionMockHandle.mockImplementationOnce(() => {
+ const testError = new Error("Service error in test");
+ serviceLogAuditEventMockHandle.mockImplementationOnce(() => {
throw testError;
});
await OriginalHandler.queueAuditEvent(baseEventParams);
// queueAuditEvent should catch errors from buildAndLogAuditEvent and log them
// buildAndLogAuditEvent in turn logs errors from its dependencies
expect(loggerErrorMockHandle).toHaveBeenCalledWith(testError, "Failed to create audit log event");
- expect(serviceLogAuditEventMockHandle).not.toHaveBeenCalled();
+ expect(serviceLogAuditEventMockHandle).toHaveBeenCalled();
});
});
@@ -197,11 +177,9 @@ describe("queueAuditEventBackground", () => {
test("correctly processes event in background and dependencies are called", async () => {
await OriginalHandler.queueAuditEventBackground(baseEventParams);
await new Promise(setImmediate); // Wait for setImmediate to run
- expect(cacheRunAuditLogHashTransactionMockHandle).toHaveBeenCalled();
expect(serviceLogAuditEventMockHandle).toHaveBeenCalled();
const logCall = serviceLogAuditEventMockHandle.mock.calls[0][0];
expect(logCall.action).toBe(baseEventParams.action);
- expect(logCall.integrityHash).toBe("testhash");
});
});
@@ -226,7 +204,6 @@ describe("withAuditLogging", () => {
expect(callArgs.action).toBe("created");
expect(callArgs.status).toBe("success");
expect(callArgs.target.id).toBe("t1");
- expect(callArgs.integrityHash).toBe("testhash");
});
test("logs audit event for failed handler and throws", async () => {
diff --git a/apps/web/modules/ee/audit-logs/lib/handler.ts b/apps/web/modules/ee/audit-logs/lib/handler.ts
index 54bc6ab928..8c2a68e8e9 100644
--- a/apps/web/modules/ee/audit-logs/lib/handler.ts
+++ b/apps/web/modules/ee/audit-logs/lib/handler.ts
@@ -13,12 +13,11 @@ import {
} from "@/modules/ee/audit-logs/types/audit-log";
import { getIsAuditLogsEnabled } from "@/modules/ee/license-check/lib/utils";
import { logger } from "@formbricks/logger";
-import { runAuditLogHashTransaction } from "./cache";
-import { computeAuditLogHash, deepDiff, redactPII } from "./utils";
+import { deepDiff, redactPII } from "./utils";
/**
* Builds an audit event and logs it.
- * Redacts sensitive data from the old and new objects and computes the hash of the event before logging it.
+ * Redacts sensitive data from the old and new objects before logging.
*/
export const buildAndLogAuditEvent = async ({
action,
@@ -63,7 +62,7 @@ export const buildAndLogAuditEvent = async ({
changes = redactPII(oldObject);
}
- const eventBase: Omit = {
+ const auditEvent: TAuditLogEvent = {
actor: { id: userId, type: userType },
action,
target: { id: targetId, type: targetType },
@@ -76,20 +75,7 @@ export const buildAndLogAuditEvent = async ({
...(status === "failure" && eventId ? { eventId } : {}),
};
- await runAuditLogHashTransaction(async (previousHash) => {
- const isChainStart = !previousHash;
- const integrityHash = computeAuditLogHash(eventBase, previousHash);
- const auditEvent: TAuditLogEvent = {
- ...eventBase,
- integrityHash,
- previousHash,
- ...(isChainStart ? { chainStart: true } : {}),
- };
- return {
- auditEvent: async () => await logAuditEvent(auditEvent),
- integrityHash,
- };
- });
+ await logAuditEvent(auditEvent);
} catch (logError) {
logger.error(logError, "Failed to create audit log event");
}
diff --git a/apps/web/modules/ee/audit-logs/lib/service.test.ts b/apps/web/modules/ee/audit-logs/lib/service.test.ts
index 6dfb30aa9f..3f2d2eca69 100644
--- a/apps/web/modules/ee/audit-logs/lib/service.test.ts
+++ b/apps/web/modules/ee/audit-logs/lib/service.test.ts
@@ -19,9 +19,6 @@ const validEvent = {
status: "success" as const,
timestamp: new Date().toISOString(),
organizationId: "org-1",
- integrityHash: "hash",
- previousHash: null,
- chainStart: true,
};
describe("logAuditEvent", () => {
diff --git a/apps/web/modules/ee/audit-logs/lib/utils.test.ts b/apps/web/modules/ee/audit-logs/lib/utils.test.ts
index df72705169..6dffdd8b98 100644
--- a/apps/web/modules/ee/audit-logs/lib/utils.test.ts
+++ b/apps/web/modules/ee/audit-logs/lib/utils.test.ts
@@ -183,118 +183,3 @@ describe("withAuditLogging", () => {
expect(handler).toHaveBeenCalled();
});
});
-
-describe("runtime config checks", () => {
- test("throws if AUDIT_LOG_ENABLED is true and ENCRYPTION_KEY is missing", async () => {
- // Unset the secret and reload the module
- process.env.ENCRYPTION_KEY = "";
- vi.resetModules();
- vi.doMock("@/lib/constants", () => ({
- AUDIT_LOG_ENABLED: true,
- AUDIT_LOG_GET_USER_IP: true,
- ENCRYPTION_KEY: undefined,
- }));
- await expect(import("./utils")).rejects.toThrow(
- /ENCRYPTION_KEY must be set when AUDIT_LOG_ENABLED is enabled/
- );
- // Restore for other tests
- process.env.ENCRYPTION_KEY = "testsecret";
- vi.resetModules();
- vi.doMock("@/lib/constants", () => ({
- AUDIT_LOG_ENABLED: true,
- AUDIT_LOG_GET_USER_IP: true,
- ENCRYPTION_KEY: "testsecret",
- }));
- });
-});
-
-describe("computeAuditLogHash", () => {
- let utils: any;
- beforeEach(async () => {
- vi.unmock("crypto");
- utils = await import("./utils");
- });
- test("produces deterministic hash for same input", () => {
- const event = {
- actor: { id: "u1", type: "user" },
- action: "survey.created",
- target: { id: "t1", type: "survey" },
- timestamp: "2024-01-01T00:00:00.000Z",
- organizationId: "org1",
- status: "success",
- ipAddress: "127.0.0.1",
- apiUrl: "/api/test",
- };
- const hash1 = utils.computeAuditLogHash(event, null);
- const hash2 = utils.computeAuditLogHash(event, null);
- expect(hash1).toBe(hash2);
- });
- test("hash changes if previous hash changes", () => {
- const event = {
- actor: { id: "u1", type: "user" },
- action: "survey.created",
- target: { id: "t1", type: "survey" },
- timestamp: "2024-01-01T00:00:00.000Z",
- organizationId: "org1",
- status: "success",
- ipAddress: "127.0.0.1",
- apiUrl: "/api/test",
- };
- const hash1 = utils.computeAuditLogHash(event, "prev1");
- const hash2 = utils.computeAuditLogHash(event, "prev2");
- expect(hash1).not.toBe(hash2);
- });
-});
-
-describe("buildAndLogAuditEvent", () => {
- let buildAndLogAuditEvent: any;
- let redis: any;
- let logAuditEvent: any;
- beforeEach(async () => {
- vi.resetModules();
- (globalThis as any).__logAuditEvent = vi.fn().mockResolvedValue(undefined);
- vi.mock("@/modules/cache/redis", () => ({
- default: {
- watch: vi.fn().mockResolvedValue("OK"),
- multi: vi.fn().mockReturnValue({
- set: vi.fn(),
- exec: vi.fn().mockResolvedValue([["OK"]]),
- }),
- get: vi.fn().mockResolvedValue(null),
- },
- }));
- vi.mock("@/lib/constants", () => ({
- AUDIT_LOG_ENABLED: true,
- AUDIT_LOG_GET_USER_IP: true,
- ENCRYPTION_KEY: "testsecret",
- }));
- ({ buildAndLogAuditEvent } = await import("./handler"));
- redis = (await import("@/modules/cache/redis")).default;
- logAuditEvent = (globalThis as any).__logAuditEvent;
- });
- afterEach(() => {
- delete (globalThis as any).__logAuditEvent;
- });
-
- test("retries and logs error if hash update fails", async () => {
- redis.multi.mockReturnValue({
- set: vi.fn(),
- exec: vi.fn().mockResolvedValue(null),
- });
- await buildAndLogAuditEvent({
- actionType: "survey.created",
- targetType: "survey",
- userId: "u1",
- userType: "user",
- targetId: "t1",
- organizationId: "org1",
- ipAddress: "127.0.0.1",
- status: "success",
- oldObject: { foo: "bar" },
- newObject: { foo: "baz" },
- apiUrl: "/api/test",
- });
- expect(logAuditEvent).not.toHaveBeenCalled();
- // The error is caught and logged, not thrown
- });
-});
diff --git a/apps/web/modules/ee/audit-logs/lib/utils.ts b/apps/web/modules/ee/audit-logs/lib/utils.ts
index 507dfb1fec..e907ccef2a 100644
--- a/apps/web/modules/ee/audit-logs/lib/utils.ts
+++ b/apps/web/modules/ee/audit-logs/lib/utils.ts
@@ -1,8 +1,3 @@
-import { AUDIT_LOG_ENABLED, ENCRYPTION_KEY } from "@/lib/constants";
-import { TAuditLogEvent } from "@/modules/ee/audit-logs/types/audit-log";
-import { createHash } from "crypto";
-import { logger } from "@formbricks/logger";
-
const SENSITIVE_KEYS = [
"email",
"name",
@@ -41,31 +36,6 @@ const SENSITIVE_KEYS = [
"fileName",
];
-/**
- * Computes the hash of the audit log event using the SHA256 algorithm.
- * @param event - The audit log event.
- * @param prevHash - The previous hash of the audit log event.
- * @returns The hash of the audit log event. The hash is computed by concatenating the secret, the previous hash, and the event and then hashing the result.
- */
-export const computeAuditLogHash = (
- event: Omit,
- prevHash: string | null
-): string => {
- let secret = ENCRYPTION_KEY;
-
- if (!secret) {
- // Log an error but don't throw an error to avoid blocking the main request
- logger.error(
- "ENCRYPTION_KEY is not set, creating audit log hash without it. Please set ENCRYPTION_KEY in the environment variables to avoid security issues."
- );
- secret = "";
- }
-
- const hash = createHash("sha256");
- hash.update(secret + (prevHash ?? "") + JSON.stringify(event));
- return hash.digest("hex");
-};
-
/**
* Redacts sensitive data from the object by replacing the sensitive keys with "********".
* @param obj - The object to redact.
@@ -120,9 +90,3 @@ export const deepDiff = (oldObj: any, newObj: any): any => {
}
return Object.keys(diff).length > 0 ? diff : undefined;
};
-
-if (AUDIT_LOG_ENABLED && !ENCRYPTION_KEY) {
- throw new Error(
- "ENCRYPTION_KEY must be set when AUDIT_LOG_ENABLED is enabled. Refusing to start for security reasons."
- );
-}
diff --git a/apps/web/modules/ee/audit-logs/types/audit-log.ts b/apps/web/modules/ee/audit-logs/types/audit-log.ts
index f2b70de95f..57184f6e86 100644
--- a/apps/web/modules/ee/audit-logs/types/audit-log.ts
+++ b/apps/web/modules/ee/audit-logs/types/audit-log.ts
@@ -79,9 +79,6 @@ export const ZAuditLogEventSchema = z.object({
changes: z.record(z.any()).optional(),
eventId: z.string().optional(),
apiUrl: z.string().url().optional(),
- integrityHash: z.string(),
- previousHash: z.string().nullable(),
- chainStart: z.boolean().optional(),
});
export type TAuditLogEvent = z.infer;
diff --git a/docker/docker-compose.yml b/docker/docker-compose.yml
index f7a6ceb398..005726cc20 100644
--- a/docker/docker-compose.yml
+++ b/docker/docker-compose.yml
@@ -183,8 +183,8 @@ x-environment: &environment
########################################## OPTIONAL (AUDIT LOGGING) ###########################################
- # Set the below to 1 to enable audit logging. The audit log requires Redis to be configured with the REDIS_URL env variable.
- # AUDIT_LOG_ENABLED: 1
+ # Set the below to 1 to enable audit logging.
+ # AUDIT_LOG_ENABLED: 1
# Set the below to get the ip address of the user from the request headers
# AUDIT_LOG_GET_USER_IP: 1
diff --git a/docs/self-hosting/advanced/enterprise-features/audit-logging.mdx b/docs/self-hosting/advanced/enterprise-features/audit-logging.mdx
index c06fd739f0..b20bed2160 100644
--- a/docs/self-hosting/advanced/enterprise-features/audit-logging.mdx
+++ b/docs/self-hosting/advanced/enterprise-features/audit-logging.mdx
@@ -1,7 +1,7 @@
---
title: Audit Logging
sidebarTitle: Audit Logging
-description: Enable and use tamper‑evident audit logs for your Formbricks instance.
+description: Enable comprehensive audit logs for your Formbricks instance.
icon: file-shield
---
@@ -16,15 +16,7 @@ Audit logs record **who** did **what**, **when**, **from where**, and **with wha
- **Compliance readiness** — Many regulatory frameworks such as GDPR and SOC 2 require immutable records of user activity.
- **Security investigation support** — Audit logs provide clear visibility into user and system actions, helping teams respond quickly and confidently during security incidents.
-- **Operational accountability** — Track changes across the system to answer common questions like "_who modified this?_” or "_when was this deleted?_".
-
----
-
-## Prerequisites
-
-| Requirement | Notes |
-|-------------|-------|
-| **`redis`** | Used internally to guarantee integrity under concurrency. |
+- **Operational accountability** — Track changes across the system to answer common questions like "_who modified this?_" or "_when was this deleted?_".
---
@@ -35,8 +27,6 @@ Audit logs record **who** did **what**, **when**, **from where**, and **with wha
```bash title=".env"
# --- Audit logging ---
AUDIT_LOG_ENABLED=1
-ENCRYPTION_KEY=your_encryption_key_here # required for integrity hashes and authentication logs
-REDIS_URL=redis://`redis`:6379 # existing `redis` instance
AUDIT_LOG_GET_USER_IP=1 # set to 1 to include user IP address in audit logs, 0 to omit (default: 0)
```
@@ -52,7 +42,7 @@ Audit logs are printed to **stdout** as JSON Lines format, making them easily ac
Audit logs are **JSON Lines** (one JSON object per line). A typical entry looks like this:
```json
-{"level":"audit","time":1749207302158,"pid":20023,"hostname":"Victors-MacBook-Pro.local","name":"formbricks","actor":{"id":"cm90t4t7l0000vrws5hpo5ta5","type":"api"},"action":"created","target":{"id":"cmbkov4dn0000vrg72i7oznqv","type":"webhook"},"timestamp":"2025-06-06T10:55:02.145Z","organizationId":"cm8zovtbm0001vr3efa4n03ms","status":"success","ipAddress":"unknown","apiUrl":"http://localhost:3000/api/v1/webhooks","changes":{"id":"cmbkov4dn0000vrg72i7oznqv","name":"********","createdAt":"2025-06-06T10:55:02.123Z","updatedAt":"2025-06-06T10:55:02.123Z","url":"https://eoy8o887lmsqmhz.m.pipedream.net","source":"user","environmentId":"cm8zowv0b0009vr3ec56w2qf3","triggers":["responseCreated","responseUpdated","responseFinished"],"surveyIds":[]},"integrityHash":"eefa760bf03572c32d8caf7d5012d305bcea321d08b1929781b8c7e537f22aed","previousHash":"f6bc014e835be5499f2b3a0475ed6ec8b97903085059ff8482b16ab5bfd34062"}
+{"level":"audit","time":1749207302158,"pid":20023,"hostname":"Victors-MacBook-Pro.local","name":"formbricks","actor":{"id":"cm90t4t7l0000vrws5hpo5ta5","type":"api"},"action":"created","target":{"id":"cmbkov4dn0000vrg72i7oznqv","type":"webhook"},"timestamp":"2025-06-06T10:55:02.145Z","organizationId":"cm8zovtbm0001vr3efa4n03ms","status":"success","ipAddress":"unknown","apiUrl":"http://localhost:3000/api/v1/webhooks","changes":{"id":"cmbkov4dn0000vrg72i7oznqv","name":"********","createdAt":"2025-06-06T10:55:02.123Z","updatedAt":"2025-06-06T10:55:02.123Z","url":"https://eoy8o887lmsqmhz.m.pipedream.net","source":"user","environmentId":"cm8zowv0b0009vr3ec56w2qf3","triggers":["responseCreated","responseUpdated","responseFinished"],"surveyIds":[]}}
```
Key fields:
@@ -74,12 +64,18 @@ Key fields:
| `apiUrl` | (Optional) API endpoint URL if the logs was generated through an API call |
| `eventId` | (Optional) Available on error logs. You can use it to refer to the system log with this eventId for more details on the error |
| `changes` | (Optional) Only the fields that actually changed (sensitive values redacted) |
-| `integrityHash` | SHA‑256 hash chaining the entry to the previous one |
-| `previousHash` | SHA‑256 hash of the previous audit log entry for chain integrity |
-| `chainStart` | (Optional) Boolean indicating if this is the start of a new audit chain |
---
+## Centralized logging and compliance
+
+Formbricks audit logs are designed to work with modern centralized logging architectures:
+
+- **Stdout delivery**: Logs are written to stdout for immediate collection by log forwarding agents
+- **Centralized integrity**: Log integrity and immutability are handled by your centralized logging platform (ELK Stack, Splunk, CloudWatch, etc.)
+- **Platform-level security**: Access controls and tamper detection are provided by your logging infrastructure
+- **SOC2 compliance**: Most SOC2 auditors accept centralized logging without application-level integrity mechanisms
+
## Additional details
- **Redacted secrets:** Sensitive fields (e‑mails, access tokens, passwords…) are replaced with `"********"` before being written.
From d6ecafbc238d8653d8b6274754345af95e3461e7 Mon Sep 17 00:00:00 2001
From: Johannes <72809645+jobenjada@users.noreply.github.com>
Date: Thu, 10 Jul 2025 07:35:09 -0700
Subject: [PATCH 19/29] docs: add hidden fields for SDK note (#6215)
---
.../surveys/general-features/hidden-fields.mdx | 18 +++++++++++++-----
1 file changed, 13 insertions(+), 5 deletions(-)
diff --git a/docs/xm-and-surveys/surveys/general-features/hidden-fields.mdx b/docs/xm-and-surveys/surveys/general-features/hidden-fields.mdx
index 8f5832ef4d..6c7330991c 100644
--- a/docs/xm-and-surveys/surveys/general-features/hidden-fields.mdx
+++ b/docs/xm-and-surveys/surveys/general-features/hidden-fields.mdx
@@ -20,22 +20,30 @@ icon: "eye-slash"
-### Set Hidden Field in Link Surveys
+## Set Hidden Field via URL
Single Hidden Field:
```
- sh https://formbricks.com/clin3dxja02k8l80hpwmx4bjy?screen=pricing
+https://formbricks.com/s/clin34bjy?screen=pricing
```
Multiple Hidden Fields:
```
- sh https://formbricks.com/clin3dxja02k8l80hpwmx4bjy?screen=landing_page&job=Founder
+https://formbricks.com/s/clin34bjy?screen=landing_page&job=Founder
+```
+
+## Set Hidden Fields via SDK
+
+
+ We are reworking how to add Hidden Fields via SDK moving away from binding them to Actions over to Context. Until then, we will **continue to support the current approach for the JS SDK**. However, we don't support Hidden Fields for the Android and iOS SDKs.
+
+
+```js
+formbricks.track("action_name", {hiddenFields: {myField: "value"}})
```
-### Website & App Surveys
-We're reworking our approach to setting hidden fields in Website & App Surveys.
## View Hidden Fields in Responses
From 17d60eb1e77ebd23843fad47893ac1840f8a9cf9 Mon Sep 17 00:00:00 2001
From: Piyush Gupta <56182734+gupta-piyush19@users.noreply.github.com>
Date: Fri, 11 Jul 2025 09:47:43 +0530
Subject: [PATCH 20/29] feat: revamp sharing modal shell (#6190)
Co-authored-by: Dhruwang
---
.../summary/components/ShareEmbedSurvey.tsx | 199 -----
.../summary/components/SurveyAnalysisCTA.tsx | 65 +-
...y.test.tsx => share-survey-modal.test.tsx} | 113 ++-
.../summary/components/share-survey-modal.tsx | 161 ++++
.../shareEmbedModal/EmbedView.test.tsx | 181 -----
.../components/shareEmbedModal/EmbedView.tsx | 125 ----
.../shareEmbedModal/share-view.test.tsx | 376 ++++++++++
.../components/shareEmbedModal/share-view.tsx | 174 +++++
.../shareEmbedModal/success-view.tsx | 83 +++
apps/web/locales/de-DE.json | 1 +
apps/web/locales/en-US.json | 1 +
apps/web/locales/fr-FR.json | 1 +
apps/web/locales/pt-BR.json | 1 +
apps/web/locales/pt-PT.json | 1 +
apps/web/locales/zh-Hant-TW.json | 1 +
.../components/SurveyLinkDisplay.tsx | 5 +-
.../components/ShareSurveyLink/index.tsx | 4 +-
.../ui/components/badge/index.test.tsx | 12 +-
.../web/modules/ui/components/badge/index.tsx | 6 +-
.../modules/ui/components/dialog/index.tsx | 2 +-
.../ui/components/separator/index.test.tsx | 219 ++++++
.../modules/ui/components/separator/index.tsx | 25 +
.../ui/components/sheet/index.test.tsx | 514 +++++++++++++
.../web/modules/ui/components/sheet/index.tsx | 119 +++
.../ui/components/sidebar/index.test.tsx | 586 +++++++++++++++
.../modules/ui/components/sidebar/index.tsx | 691 ++++++++++++++++++
apps/web/modules/ui/hooks/use-mobile.test.tsx | 258 +++++++
apps/web/modules/ui/hooks/use-mobile.tsx | 19 +
apps/web/vitestSetup.ts | 5 +
29 files changed, 3322 insertions(+), 626 deletions(-)
delete mode 100644 apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/ShareEmbedSurvey.tsx
rename apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/{ShareEmbedSurvey.test.tsx => share-survey-modal.test.tsx} (67%)
create mode 100644 apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/share-survey-modal.tsx
delete mode 100644 apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedModal/EmbedView.test.tsx
delete mode 100644 apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedModal/EmbedView.tsx
create mode 100644 apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedModal/share-view.test.tsx
create mode 100644 apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedModal/share-view.tsx
create mode 100644 apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedModal/success-view.tsx
create mode 100644 apps/web/modules/ui/components/separator/index.test.tsx
create mode 100644 apps/web/modules/ui/components/separator/index.tsx
create mode 100644 apps/web/modules/ui/components/sheet/index.test.tsx
create mode 100644 apps/web/modules/ui/components/sheet/index.tsx
create mode 100644 apps/web/modules/ui/components/sidebar/index.test.tsx
create mode 100644 apps/web/modules/ui/components/sidebar/index.tsx
create mode 100644 apps/web/modules/ui/hooks/use-mobile.test.tsx
create mode 100644 apps/web/modules/ui/hooks/use-mobile.tsx
diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/ShareEmbedSurvey.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/ShareEmbedSurvey.tsx
deleted file mode 100644
index ac9006e1c1..0000000000
--- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/ShareEmbedSurvey.tsx
+++ /dev/null
@@ -1,199 +0,0 @@
-"use client";
-
-import { ShareSurveyLink } from "@/modules/analysis/components/ShareSurveyLink";
-import { getSurveyUrl } from "@/modules/analysis/utils";
-import { Badge } from "@/modules/ui/components/badge";
-import { Dialog, DialogContent, DialogDescription, DialogTitle } from "@/modules/ui/components/dialog";
-import { useTranslate } from "@tolgee/react";
-import {
- BellRing,
- BlocksIcon,
- Code2Icon,
- LinkIcon,
- MailIcon,
- SmartphoneIcon,
- UserIcon,
- UsersRound,
-} from "lucide-react";
-import Link from "next/link";
-import { useRouter } from "next/navigation";
-import { useEffect, useMemo, useState } from "react";
-import { TSegment } from "@formbricks/types/segment";
-import { TSurvey } from "@formbricks/types/surveys/types";
-import { TUser } from "@formbricks/types/user";
-import { EmbedView } from "./shareEmbedModal/EmbedView";
-
-interface ShareEmbedSurveyProps {
- survey: TSurvey;
- publicDomain: string;
- open: boolean;
- modalView: "start" | "embed" | "panel";
- setOpen: React.Dispatch>;
- user: TUser;
- segments: TSegment[];
- isContactsEnabled: boolean;
- isFormbricksCloud: boolean;
-}
-
-export const ShareEmbedSurvey = ({
- survey,
- publicDomain,
- open,
- modalView,
- setOpen,
- user,
- segments,
- isContactsEnabled,
- isFormbricksCloud,
-}: ShareEmbedSurveyProps) => {
- const router = useRouter();
- const environmentId = survey.environmentId;
- const isSingleUseLinkSurvey = survey.singleUse?.enabled ?? false;
- const { email } = user;
- const { t } = useTranslate();
- const tabs = useMemo(
- () =>
- [
- {
- id: "link",
- label: `${isSingleUseLinkSurvey ? t("environments.surveys.summary.single_use_links") : t("environments.surveys.summary.share_the_link")}`,
- icon: LinkIcon,
- },
- { id: "personal-links", label: t("environments.surveys.summary.personal_links"), icon: UserIcon },
- { id: "email", label: t("environments.surveys.summary.embed_in_an_email"), icon: MailIcon },
- { id: "webpage", label: t("environments.surveys.summary.embed_on_website"), icon: Code2Icon },
-
- { id: "app", label: t("environments.surveys.summary.embed_in_app"), icon: SmartphoneIcon },
- ].filter((tab) => !(survey.type === "link" && tab.id === "app")),
- [t, isSingleUseLinkSurvey, survey.type]
- );
-
- const [activeId, setActiveId] = useState(survey.type === "link" ? tabs[0].id : tabs[4].id);
- const [showView, setShowView] = useState<"start" | "embed" | "panel" | "personal-links">("start");
- const [surveyUrl, setSurveyUrl] = useState("");
-
- useEffect(() => {
- const fetchSurveyUrl = async () => {
- try {
- const url = await getSurveyUrl(survey, publicDomain, "default");
- setSurveyUrl(url);
- } catch (error) {
- console.error("Failed to fetch survey URL:", error);
- // Fallback to a default URL if fetching fails
- setSurveyUrl(`${publicDomain}/s/${survey.id}`);
- }
- };
- fetchSurveyUrl();
- }, [survey, publicDomain]);
-
- useEffect(() => {
- if (survey.type !== "link") {
- setActiveId(tabs[4].id);
- }
- }, [survey.type, tabs]);
-
- useEffect(() => {
- if (open) {
- setShowView(modalView);
- } else {
- setShowView("start");
- }
- }, [open, modalView]);
-
- const handleOpenChange = (open: boolean) => {
- setActiveId(survey.type === "link" ? tabs[0].id : tabs[4].id);
- setOpen(open);
- if (!open) {
- setShowView("start");
- }
- router.refresh();
- };
-
- return (
-
-
- {showView === "start" ? (
-
- {survey.type === "link" && (
-
-
-
- {t("environments.surveys.summary.your_survey_is_public")} 🎉
-
-
-
-
-
- )}
-
-
{t("environments.surveys.summary.whats_next")}
-
- setShowView("embed")}
- className="flex flex-col items-center gap-3 rounded-lg border border-slate-100 bg-white p-4 text-sm text-slate-500 hover:border-slate-200 md:p-8">
-
- setShowView("panel")}
- className="relative flex flex-col items-center gap-3 rounded-lg border border-slate-100 bg-white p-4 text-sm text-slate-500 hover:border-slate-200 md:p-8">
-
-
-
-
{t("environments.surveys.summary.embed_survey")}
- {t("environments.surveys.summary.send_to_panel")}
-
- ) : null}
-
-
- );
-};
diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SurveyAnalysisCTA.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SurveyAnalysisCTA.tsx
index 3de84da281..2c13f1cdb4 100644
--- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SurveyAnalysisCTA.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SurveyAnalysisCTA.tsx
@@ -1,7 +1,7 @@
"use client";
-import { ShareEmbedSurvey } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/ShareEmbedSurvey";
import { SuccessMessage } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SuccessMessage";
+import { ShareSurveyModal } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/share-survey-modal";
import { SurveyStatusDropdown } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/SurveyStatusDropdown";
import { getFormattedErrorMessage } from "@/lib/utils/helper";
import { EditPublicSurveyAlertDialog } from "@/modules/survey/components/edit-public-survey-alert-dialog";
@@ -32,10 +32,8 @@ interface SurveyAnalysisCTAProps {
}
interface ModalState {
+ start: boolean;
share: boolean;
- embed: boolean;
- panel: boolean;
- dropdown: boolean;
}
export const SurveyAnalysisCTA = ({
@@ -56,10 +54,8 @@ export const SurveyAnalysisCTA = ({
const [loading, setLoading] = useState(false);
const [modalState, setModalState] = useState({
- share: searchParams.get("share") === "true",
- embed: false,
- panel: false,
- dropdown: false,
+ start: searchParams.get("share") === "true",
+ share: false,
});
const surveyUrl = useMemo(() => `${publicDomain}/s/${survey.id}`, [survey.id, publicDomain]);
@@ -69,7 +65,7 @@ export const SurveyAnalysisCTA = ({
useEffect(() => {
setModalState((prev) => ({
...prev,
- share: searchParams.get("share") === "true",
+ start: searchParams.get("share") === "true",
}));
}, [searchParams]);
@@ -81,7 +77,7 @@ export const SurveyAnalysisCTA = ({
params.delete("share");
}
router.push(`${pathname}?${params.toString()}`);
- setModalState((prev) => ({ ...prev, share: open }));
+ setModalState((prev) => ({ ...prev, start: open }));
};
const duplicateSurveyAndRoute = async (surveyId: string) => {
@@ -107,19 +103,6 @@ export const SurveyAnalysisCTA = ({
return `${surveyUrl}${separator}preview=true`;
};
- const handleModalState = (modalView: keyof Omit) => {
- return (open: boolean | ((prevState: boolean) => boolean)) => {
- const newValue = typeof open === "function" ? open(modalState[modalView]) : open;
- setModalState((prev) => ({ ...prev, [modalView]: newValue }));
- };
- };
-
- const shareEmbedViews = [
- { key: "share", modalView: "start" as const, setOpen: handleShareModalToggle },
- { key: "embed", modalView: "embed" as const, setOpen: handleModalState("embed") },
- { key: "panel", modalView: "panel" as const, setOpen: handleModalState("panel") },
- ];
-
const [isCautionDialogOpen, setIsCautionDialogOpen] = useState(false);
const iconActions = [
@@ -166,30 +149,30 @@ export const SurveyAnalysisCTA = ({
{
- setModalState((prev) => ({ ...prev, embed: true }));
+ setModalState((prev) => ({ ...prev, share: true }));
}}>
{t("environments.surveys.summary.share_survey")}
{user && (
- <>
- {shareEmbedViews.map(({ key, modalView, setOpen }) => (
- {
+ if (!open) {
+ handleShareModalToggle(false);
+ setModalState((prev) => ({ ...prev, share: false }));
+ }
+ }}
+ user={user}
+ modalView={modalState.start ? "start" : "share"}
+ segments={segments}
+ isContactsEnabled={isContactsEnabled}
+ isFormbricksCloud={isFormbricksCloud}
+ />
)}
+ ({
- useRouter: () => ({
- refresh: mockRouterRefresh,
- }),
-}));
-
vi.mock("@tolgee/react", () => ({
useTranslate: () => ({
t: (str: string) => str,
@@ -112,9 +104,9 @@ vi.mock("@/modules/ui/components/badge", () => ({
Badge: vi.fn(({ text }) => {text} ),
}));
-const mockEmbedViewComponent = vi.fn();
-vi.mock("./shareEmbedModal/EmbedView", () => ({
- EmbedView: (props: any) => mockEmbedViewComponent(props),
+const mockShareViewComponent = vi.fn();
+vi.mock("./shareEmbedModal/share-view", () => ({
+ ShareView: (props: any) => mockShareViewComponent(props),
}));
// Mock getSurveyUrl to return a predictable URL
@@ -149,7 +141,7 @@ describe("ShareEmbedSurvey", () => {
survey: mockSurveyWeb,
publicDomain: "https://public-domain.com",
open: true,
- modalView: "start" as "start" | "embed" | "panel",
+ modalView: "start" as "start" | "share",
setOpen: mockSetOpen,
user: mockUser,
segments: [],
@@ -158,81 +150,70 @@ describe("ShareEmbedSurvey", () => {
};
beforeEach(() => {
- mockEmbedViewComponent.mockImplementation(
+ mockShareViewComponent.mockImplementation(
({ tabs, activeId, survey, email, surveyUrl, publicDomain, locale }) => (
-
{JSON.stringify(tabs)}
-
{activeId}
-
{survey.id}
-
{email}
-
{surveyUrl}
-
{publicDomain}
-
{locale}
+
{JSON.stringify(tabs)}
+
{activeId}
+
{survey.id}
+
{email}
+
{surveyUrl}
+
{publicDomain}
+
{locale}
>;
+ user: TUser;
+ segments: TSegment[];
+ isContactsEnabled: boolean;
+ isFormbricksCloud: boolean;
+}
+
+export const ShareSurveyModal = ({
+ survey,
+ publicDomain,
+ open,
+ modalView,
+ setOpen,
+ user,
+ segments,
+ isContactsEnabled,
+ isFormbricksCloud,
+}: ShareSurveyModalProps) => {
+ const environmentId = survey.environmentId;
+ const isSingleUseLinkSurvey = survey.singleUse?.enabled ?? false;
+ const { email } = user;
+ const { t } = useTranslate();
+ const linkTabs: { id: ShareViewType; label: string; icon: React.ElementType }[] = useMemo(
+ () => [
+ {
+ id: ShareViewType.LINK,
+ label: `${isSingleUseLinkSurvey ? t("environments.surveys.summary.single_use_links") : t("environments.surveys.summary.share_the_link")}`,
+ icon: LinkIcon,
+ },
+ {
+ id: ShareViewType.PERSONAL_LINKS,
+ label: t("environments.surveys.summary.personal_links"),
+ icon: UserIcon,
+ },
+ {
+ id: ShareViewType.EMAIL,
+ label: t("environments.surveys.summary.embed_in_an_email"),
+ icon: MailIcon,
+ },
+ {
+ id: ShareViewType.WEBPAGE,
+ label: t("environments.surveys.summary.embed_on_website"),
+ icon: Code2Icon,
+ },
+ ],
+ [t, isSingleUseLinkSurvey]
+ );
+
+ const appTabs = [
+ {
+ id: ShareViewType.APP,
+ label: t("environments.surveys.summary.embed_in_app"),
+ icon: SmartphoneIcon,
+ },
+ ];
+
+ const [activeId, setActiveId] = useState(survey.type === "link" ? ShareViewType.LINK : ShareViewType.APP);
+ const [showView, setShowView] = useState(modalView);
+ const [surveyUrl, setSurveyUrl] = useState("");
+
+ useEffect(() => {
+ const fetchSurveyUrl = async () => {
+ try {
+ const url = await getSurveyUrl(survey, publicDomain, "default");
+ setSurveyUrl(url);
+ } catch (error) {
+ logger.error("Failed to fetch survey URL:", error);
+ // Fallback to a default URL if fetching fails
+ setSurveyUrl(`${publicDomain}/s/${survey.id}`);
+ }
+ };
+ fetchSurveyUrl();
+ }, [survey, publicDomain]);
+
+ useEffect(() => {
+ if (open) {
+ setShowView(modalView);
+ }
+ }, [open, modalView]);
+
+ const handleOpenChange = (open: boolean) => {
+ setActiveId(survey.type === "link" ? ShareViewType.LINK : ShareViewType.APP);
+ setOpen(open);
+ if (!open) {
+ setShowView("start");
+ }
+ };
+
+ const handleViewChange = (view: ModalView) => {
+ setShowView(view);
+ };
+
+ const handleEmbedViewWithTab = (tabId: ShareViewType) => {
+ setShowView("share");
+ setActiveId(tabId);
+ };
+
+ return (
+
+
+ {showView === "start" ? (
+
+
+ );
+};
diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedModal/EmbedView.test.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedModal/EmbedView.test.tsx
deleted file mode 100644
index 1bf3cce6aa..0000000000
--- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedModal/EmbedView.test.tsx
+++ /dev/null
@@ -1,181 +0,0 @@
-import { cleanup, render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { afterEach, describe, expect, test, vi } from "vitest";
-import { EmbedView } from "./EmbedView";
-
-// Mock child components
-vi.mock("./AppTab", () => ({
- AppTab: () => AppTab Content
,
-}));
-vi.mock("./EmailTab", () => ({
- EmailTab: (props: { surveyId: string; email: string }) => (
-
- EmailTab Content for {props.surveyId} with {props.email}
-
- ),
-}));
-vi.mock("./LinkTab", () => ({
- LinkTab: (props: { survey: any; surveyUrl: string }) => (
-
- LinkTab Content for {props.survey.id} at {props.surveyUrl}
-
- ),
-}));
-vi.mock("./WebsiteTab", () => ({
- WebsiteTab: (props: { surveyUrl: string; environmentId: string }) => (
-
- WebsiteTab Content for {props.surveyUrl} in {props.environmentId}
-
- ),
-}));
-
-vi.mock("./personal-links-tab", () => ({
- PersonalLinksTab: (props: { segments: any[]; surveyId: string; environmentId: string }) => (
-
- PersonalLinksTab Content for {props.surveyId} in {props.environmentId}
-
- ),
-}));
-
-vi.mock("@/modules/ui/components/upgrade-prompt", () => ({
- UpgradePrompt: (props: { title: string; description: string; buttons: any[] }) => (
-
- {props.title} - {props.description}
-
- ),
-}));
-
-// Mock @tolgee/react
-vi.mock("@tolgee/react", () => ({
- useTranslate: () => ({
- t: (key: string) => key,
- }),
-}));
-
-// Mock lucide-react
-vi.mock("lucide-react", () => ({
- ArrowLeftIcon: () => ArrowLeftIcon
,
- MailIcon: () => MailIcon
,
- LinkIcon: () => LinkIcon
,
- GlobeIcon: () => GlobeIcon
,
- SmartphoneIcon: () => SmartphoneIcon
,
- AlertCircle: ({ className }: { className?: string }) => (
-
- AlertCircle
-
- ),
- AlertTriangle: ({ className }: { className?: string }) => (
-
- AlertTriangle
-
- ),
- Info: ({ className }: { className?: string }) => (
-
- Info
-
- ),
-}));
-
-const mockTabs = [
- { id: "email", label: "Email", icon: () =>
},
- { id: "webpage", label: "Web Page", icon: () =>
},
- { id: "link", label: "Link", icon: () =>
},
- { id: "app", label: "App", icon: () =>
},
-];
-
-const mockSurveyLink = { id: "survey1", type: "link" };
-const mockSurveyWeb = { id: "survey2", type: "web" };
-
-const defaultProps = {
- tabs: mockTabs,
- activeId: "email",
- setActiveId: vi.fn(),
- environmentId: "env1",
- survey: mockSurveyLink,
- email: "test@example.com",
- surveyUrl: "http://example.com/survey1",
- publicDomain: "http://example.com",
- setSurveyUrl: vi.fn(),
- locale: "en" as any,
- segments: [],
- isContactsEnabled: true,
- isFormbricksCloud: false,
-};
-
-describe("EmbedView", () => {
- afterEach(() => {
- cleanup();
- vi.clearAllMocks();
- });
-
- test("does not render desktop tabs for non-link survey type", () => {
- render(>;
- environmentId: string;
- survey: any;
- email: string;
- surveyUrl: string;
- publicDomain: string;
- setSurveyUrl: React.Dispatch>;
- locale: TUserLocale;
- segments: TSegment[];
- isContactsEnabled: boolean;
- isFormbricksCloud: boolean;
-}
-
-export const EmbedView = ({
- tabs,
- activeId,
- setActiveId,
- environmentId,
- survey,
- email,
- surveyUrl,
- publicDomain,
- setSurveyUrl,
- locale,
- segments,
- isContactsEnabled,
- isFormbricksCloud,
-}: EmbedViewProps) => {
- const renderActiveTab = () => {
- switch (activeId) {
- case "email":
- return
-
- {survey.type === "link" && (
-
- {tabs.map((tab) => (
- setActiveId(tab.id)}
- autoFocus={tab.id === activeId}
- className={cn(
- "flex justify-start rounded-md border px-4 py-2 text-slate-600",
- // "focus:ring-0 focus:ring-offset-0", // enable these classes to remove the focus rings on buttons
- tab.id === activeId
- ? "border-slate-200 bg-slate-100 font-semibold text-slate-900"
- : "border-transparent text-slate-500 hover:text-slate-700"
- )}
- aria-current={tab.id === activeId ? "page" : undefined}>
-
- ))}
-
- )}
-
- {renderActiveTab()}
-
- {tabs.slice(0, 2).map((tab) => (
- setActiveId(tab.id)}
- className={cn(
- "rounded-md px-4 py-2",
- tab.id === activeId
- ? "bg-white text-slate-900 shadow-sm"
- : "border-transparent text-slate-700 hover:text-slate-900"
- )}>
- {tab.label}
-
- ))}
-
-
-
-
AppTab Content
,
+}));
+vi.mock("./EmailTab", () => ({
+ EmailTab: (props: { surveyId: string; email: string }) => (
+
+ EmailTab Content for {props.surveyId} with {props.email}
+
+ ),
+}));
+vi.mock("./LinkTab", () => ({
+ LinkTab: (props: { survey: any; surveyUrl: string }) => (
+
+ LinkTab Content for {props.survey.id} at {props.surveyUrl}
+
+ ),
+}));
+vi.mock("./WebsiteTab", () => ({
+ WebsiteTab: (props: { surveyUrl: string; environmentId: string }) => (
+
+ WebsiteTab Content for {props.surveyUrl} in {props.environmentId}
+
+ ),
+}));
+
+vi.mock("./personal-links-tab", () => ({
+ PersonalLinksTab: (props: { segments: any[]; surveyId: string; environmentId: string }) => (
+
+ PersonalLinksTab Content for {props.surveyId} in {props.environmentId}
+
+ ),
+}));
+
+vi.mock("@/modules/ui/components/upgrade-prompt", () => ({
+ UpgradePrompt: (props: { title: string; description: string; buttons: any[] }) => (
+
+ {props.title} - {props.description}
+
+ ),
+}));
+
+// Mock lucide-react
+vi.mock("lucide-react", () => ({
+ ArrowLeftIcon: () => ArrowLeftIcon
,
+ MailIcon: () => MailIcon
,
+ LinkIcon: () => LinkIcon
,
+ GlobeIcon: () => GlobeIcon
,
+ SmartphoneIcon: () => SmartphoneIcon
,
+ AlertCircle: ({ className }: { className?: string }) => (
+
+ AlertCircle
+
+ ),
+ AlertTriangle: ({ className }: { className?: string }) => (
+
+ AlertTriangle
+
+ ),
+ Info: ({ className }: { className?: string }) => (
+
+ Info
+
+ ),
+}));
+
+// Mock sidebar components
+vi.mock("@/modules/ui/components/sidebar", () => ({
+ SidebarProvider: ({ children }: { children: React.ReactNode }) => {children}
,
+ Sidebar: ({ children }: { children: React.ReactNode }) => {children}
,
+ SidebarContent: ({ children }: { children: React.ReactNode }) => {children}
,
+ SidebarGroup: ({ children }: { children: React.ReactNode }) => {children}
,
+ SidebarGroupContent: ({ children }: { children: React.ReactNode }) => {children}
,
+ SidebarGroupLabel: ({ children }: { children: React.ReactNode }) => {children}
,
+ SidebarMenu: ({ children }: { children: React.ReactNode }) => {children}
,
+ SidebarMenuItem: ({ children }: { children: React.ReactNode }) => {children}
,
+ SidebarMenuButton: ({
+ children,
+ onClick,
+ tooltip,
+ className,
+ }: {
+ children: React.ReactNode;
+ onClick: () => void;
+ tooltip: string;
+ className?: string;
+ }) => (
+
+ {children}
+
+ ),
+}));
+
+// Mock tooltip and typography components
+vi.mock("@/modules/ui/components/tooltip", () => ({
+ TooltipRenderer: ({ children }: { children: React.ReactNode }) => {children}
,
+}));
+
+vi.mock("@/modules/ui/components/typography", () => ({
+ Small: ({ children }: { children: React.ReactNode }) => {children} ,
+}));
+
+// Mock button component
+vi.mock("@/modules/ui/components/button", () => ({
+ Button: ({
+ children,
+ onClick,
+ className,
+ variant,
+ }: {
+ children: React.ReactNode;
+ onClick: () => void;
+ className?: string;
+ variant?: string;
+ }) => (
+
+ {children}
+
+ ),
+}));
+
+// Mock cn utility
+vi.mock("@/lib/cn", () => ({
+ cn: (...args: any[]) => args.filter(Boolean).join(" "),
+}));
+
+const mockTabs = [
+ { id: "email", label: "Email", icon: () =>
},
+ { id: "webpage", label: "Web Page", icon: () =>
},
+ { id: "link", label: "Link", icon: () =>
},
+ { id: "app", label: "App", icon: () =>
},
+];
+
+// Create proper mock survey objects
+const createMockSurvey = (type: "link" | "app", id = "survey1"): TSurvey => ({
+ id,
+ createdAt: new Date(),
+ updatedAt: new Date(),
+ name: `Test Survey ${id}`,
+ type,
+ environmentId: "env1",
+ createdBy: "user123",
+ status: "inProgress",
+ displayOption: "displayOnce",
+ autoClose: null,
+ triggers: [],
+ recontactDays: null,
+ displayLimit: null,
+ welcomeCard: {
+ enabled: false,
+ headline: { default: "" },
+ html: { default: "" },
+ fileUrl: undefined,
+ buttonLabel: { default: "" },
+ timeToFinish: false,
+ showResponseCount: false,
+ },
+ questions: [
+ {
+ id: "q1",
+ type: TSurveyQuestionTypeEnum.OpenText,
+ headline: { default: "Test Question" },
+ subheader: { default: "" },
+ required: true,
+ inputType: "text",
+ placeholder: { default: "" },
+ longAnswer: false,
+ logic: [],
+ charLimit: { enabled: false },
+ buttonLabel: { default: "" },
+ backButtonLabel: { default: "" },
+ },
+ ],
+ endings: [
+ {
+ id: "end1",
+ type: "endScreen",
+ headline: { default: "Thank you!" },
+ subheader: { default: "" },
+ buttonLabel: { default: "" },
+ buttonLink: undefined,
+ },
+ ],
+ hiddenFields: { enabled: false, fieldIds: [] },
+ variables: [],
+ followUps: [],
+ delay: 0,
+ autoComplete: null,
+ runOnDate: null,
+ closeOnDate: null,
+ projectOverwrites: null,
+ styling: null,
+ showLanguageSwitch: null,
+ surveyClosedMessage: null,
+ segment: null,
+ singleUse: null,
+ isVerifyEmailEnabled: false,
+ recaptcha: null,
+ isSingleResponsePerEmailEnabled: false,
+ isBackButtonHidden: false,
+ pin: null,
+ resultShareKey: null,
+ displayPercentage: null,
+ languages: [
+ {
+ enabled: true,
+ default: true,
+ language: {
+ id: "lang1",
+ createdAt: new Date(),
+ updatedAt: new Date(),
+ code: "en",
+ alias: "English",
+ projectId: "project1",
+ },
+ },
+ ],
+});
+
+const mockSurveyLink = createMockSurvey("link", "survey1");
+const mockSurveyApp = createMockSurvey("app", "survey2");
+
+const defaultProps = {
+ tabs: mockTabs,
+ activeId: "email",
+ setActiveId: vi.fn(),
+ environmentId: "env1",
+ survey: mockSurveyLink,
+ email: "test@example.com",
+ surveyUrl: "http://example.com/survey1",
+ publicDomain: "http://example.com",
+ setSurveyUrl: vi.fn(),
+ locale: "en" as any,
+ segments: [],
+ isContactsEnabled: true,
+ isFormbricksCloud: false,
+};
+
+describe("ShareView", () => {
+ afterEach(() => {
+ cleanup();
+ vi.clearAllMocks();
+ });
+
+ test("does not render desktop tabs for non-link survey type", () => {
+ render(>;
+ environmentId: string;
+ survey: TSurvey;
+ email: string;
+ surveyUrl: string;
+ publicDomain: string;
+ setSurveyUrl: React.Dispatch>;
+ locale: TUserLocale;
+ segments: TSegment[];
+ isContactsEnabled: boolean;
+ isFormbricksCloud: boolean;
+}
+
+export const ShareView = ({
+ tabs,
+ activeId,
+ setActiveId,
+ environmentId,
+ survey,
+ email,
+ surveyUrl,
+ publicDomain,
+ setSurveyUrl,
+ locale,
+ segments,
+ isContactsEnabled,
+ isFormbricksCloud,
+}: ShareViewProps) => {
+ const [isLargeScreen, setIsLargeScreen] = useState(true);
+
+ useEffect(() => {
+ const checkScreenSize = () => {
+ setIsLargeScreen(window.innerWidth >= 1024);
+ };
+
+ checkScreenSize();
+
+ window.addEventListener("resize", checkScreenSize);
+
+ return () => window.removeEventListener("resize", checkScreenSize);
+ }, []);
+
+ const renderActiveTab = () => {
+ switch (activeId) {
+ case "email":
+ return
+
+ {survey.type === "link" && (
+
+
+
+
+
+ Share via
+
+
+
+ {tabs.map((tab) => (
+
+ setActiveId(tab.id)}
+ className={cn(
+ "flex w-full justify-start rounded-md p-2 text-slate-600 hover:bg-slate-100 hover:text-slate-900",
+ tab.id === activeId
+ ? "bg-slate-100 font-medium text-slate-900"
+ : "text-slate-700"
+ )}
+ tooltip={tab.label}
+ isActive={tab.id === activeId}>
+ {tab.label}
+
+
+ ))}
+
+
+
+
+
+
+ )}
+
+ {renderActiveTab()}
+
+ {tabs.map((tab) => (
+
+ setActiveId(tab.id)}
+ className={cn(
+ "rounded-md px-4 py-2",
+ tab.id === activeId
+ ? "bg-white text-slate-900 shadow-sm hover:bg-white"
+ : "border-transparent text-slate-700 hover:text-slate-900"
+ )}>
+
+
+ ))}
+
+
+
+
= ({
+ survey,
+ surveyUrl,
+ publicDomain,
+ setSurveyUrl,
+ user,
+ tabs,
+ handleViewChange,
+ handleEmbedViewWithTab,
+}) => {
+ const { t } = useTranslate();
+ const environmentId = survey.environmentId;
+ return (
+
+ {survey.type === "link" && (
+
+
+ {t("environments.surveys.summary.your_survey_is_public")} 🎉
+
+
+
+ )}
+
+
{t("environments.surveys.summary.whats_next")}
+
+ handleViewChange("share")}
+ className="flex flex-col items-center gap-3 rounded-lg border border-slate-100 bg-white p-4 text-center text-sm text-slate-900 hover:border-slate-200 md:p-8">
+
+ handleEmbedViewWithTab(tabs[1].id)}
+ className="relative flex flex-col items-center gap-3 rounded-lg border border-slate-100 bg-white p-4 text-center text-sm text-slate-900 hover:border-slate-200 md:p-8">
+
+
+
+
+ className="h-9 w-full min-w-96 animate-pulse rounded-lg bg-slate-100 px-3 py-1 text-slate-800 caret-transparent"
+ />
)}
);
diff --git a/apps/web/modules/analysis/components/ShareSurveyLink/index.tsx b/apps/web/modules/analysis/components/ShareSurveyLink/index.tsx
index 1e7855a5e8..378dbcd3a5 100644
--- a/apps/web/modules/analysis/components/ShareSurveyLink/index.tsx
+++ b/apps/web/modules/analysis/components/ShareSurveyLink/index.tsx
@@ -59,9 +59,9 @@ export const ShareSurveyLink = ({
return (
+ className={`flex max-w-full flex-col items-center justify-center gap-2 ${survey.singleUse?.enabled ? "flex-col" : "lg:flex-row"}`}>
-
+
{
expect(screen.getByText("Warning")).toHaveClass("text-amber-800");
rerender( = ({ text, type, size, className, role }) => {
const bgColor = {
warning: "bg-amber-100",
- success: "bg-emerald-100",
+ success: "bg-green-50",
error: "bg-red-100",
gray: "bg-slate-100",
};
const borderColor = {
warning: "border-amber-200",
- success: "border-emerald-200",
+ success: "border-green-600",
error: "border-red-200",
gray: "border-slate-200",
};
const textColor = {
warning: "text-amber-800",
- success: "text-emerald-800",
+ success: "text-green-800",
error: "text-red-800",
gray: "text-slate-600",
};
diff --git a/apps/web/modules/ui/components/dialog/index.tsx b/apps/web/modules/ui/components/dialog/index.tsx
index 9eba5561ae..252c52cc07 100644
--- a/apps/web/modules/ui/components/dialog/index.tsx
+++ b/apps/web/modules/ui/components/dialog/index.tsx
@@ -83,7 +83,7 @@ const DialogContent = React.forwardRef<
{...props}>
{children}
{!hideCloseButton && (
-
+
Close
diff --git a/apps/web/modules/ui/components/separator/index.test.tsx b/apps/web/modules/ui/components/separator/index.test.tsx
new file mode 100644
index 0000000000..a9ca7b41bf
--- /dev/null
+++ b/apps/web/modules/ui/components/separator/index.test.tsx
@@ -0,0 +1,219 @@
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import "@testing-library/jest-dom/vitest";
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, test, vi } from "vitest";
+import { Separator } from ".";
+
+// Mock Radix UI Separator component
+vi.mock("@radix-ui/react-separator", () => {
+ const Root = vi.fn(({ className, orientation, decorative, ...props }) => (
+
+ )) as any;
+ Root.displayName = "SeparatorRoot";
+
+ return {
+ Root,
+ };
+});
+
+describe("Separator Component", () => {
+ afterEach(() => {
+ cleanup();
+ });
+
+ test("renders correctly with default props", () => {
+ render(,
+ React.ComponentPropsWithoutRef
+>(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => (
+ {children}
) as any;
+ Root.displayName = "SheetRoot";
+
+ const Trigger = vi.fn(({ children }) => {children} ) as any;
+ Trigger.displayName = "SheetTrigger";
+
+ const Portal = vi.fn(({ children }) => {children}
) as any;
+ Portal.displayName = "SheetPortal";
+
+ const Overlay = vi.fn(({ className, ...props }) => (
+
+ )) as any;
+ Overlay.displayName = "SheetOverlay";
+
+ const Content = vi.fn(({ className, children, ...props }) => (
+
+ {children}
+
+ )) as any;
+ Content.displayName = "SheetContent";
+
+ const Close = vi.fn(({ className, children }) => (
+
+ {children}
+
+ )) as any;
+ Close.displayName = "SheetClose";
+
+ const Title = vi.fn(({ className, children, ...props }) => (
+
+ {children}
+
+ )) as any;
+ Title.displayName = "SheetTitle";
+
+ const Description = vi.fn(({ className, children, ...props }) => (
+
+ {children}
+
+ )) as any;
+ Description.displayName = "SheetDescription";
+
+ return {
+ Root,
+ Trigger,
+ Portal,
+ Overlay,
+ Content,
+ Close,
+ Title,
+ Description,
+ };
+});
+
+// Mock Lucide React
+vi.mock("lucide-react", () => ({
+ XIcon: ({ className }: { className?: string }) => (
+
+ X Icon
+
+ ),
+}));
+
+describe("Sheet Components", () => {
+ afterEach(() => {
+ cleanup();
+ });
+
+ test("Sheet renders correctly", () => {
+ render(
+
+ Sheet Content
+
+ );
+
+ expect(screen.getByTestId("sheet-root")).toBeInTheDocument();
+ expect(screen.getByText("Sheet Content")).toBeInTheDocument();
+ });
+
+ test("SheetTrigger renders correctly", () => {
+ render(
+
+ Open Sheet
+
+ );
+
+ expect(screen.getByTestId("sheet-trigger")).toBeInTheDocument();
+ expect(screen.getByText("Open Sheet")).toBeInTheDocument();
+ });
+
+ test("SheetClose renders correctly", () => {
+ render(
+
+ Close Sheet
+
+ );
+
+ expect(screen.getByTestId("sheet-close")).toBeInTheDocument();
+ expect(screen.getByText("Close Sheet")).toBeInTheDocument();
+ });
+
+ test("SheetPortal renders correctly", () => {
+ render(
+
+ Portal Content
+
+ );
+
+ expect(screen.getByTestId("sheet-portal")).toBeInTheDocument();
+ expect(screen.getByText("Portal Content")).toBeInTheDocument();
+ });
+
+ test("SheetOverlay renders with correct classes", () => {
+ render(
+ Test Content
+
+ );
+
+ expect(screen.getByTestId("sheet-portal")).toBeInTheDocument();
+ expect(screen.getByTestId("sheet-overlay")).toBeInTheDocument();
+ expect(screen.getByTestId("sheet-content")).toBeInTheDocument();
+ expect(screen.getByTestId("sheet-close")).toBeInTheDocument();
+ expect(screen.getByTestId("x-icon")).toBeInTheDocument();
+ expect(screen.getByText("Test Content")).toBeInTheDocument();
+ expect(screen.getByText("Close")).toBeInTheDocument();
+ });
+
+ test("SheetContent applies correct variant classes", () => {
+ const { rerender } = render(
+
+ Top Content
+
+ );
+
+ let content = screen.getByTestId("sheet-content");
+ expect(content).toHaveClass("inset-x-0");
+ expect(content).toHaveClass("top-0");
+ expect(content).toHaveClass("border-b");
+ expect(content).toHaveClass("data-[state=closed]:slide-out-to-top");
+ expect(content).toHaveClass("data-[state=open]:slide-in-from-top");
+
+ rerender(
+
+ Bottom Content
+
+ );
+
+ content = screen.getByTestId("sheet-content");
+ expect(content).toHaveClass("inset-x-0");
+ expect(content).toHaveClass("bottom-0");
+ expect(content).toHaveClass("border-t");
+ expect(content).toHaveClass("data-[state=closed]:slide-out-to-bottom");
+ expect(content).toHaveClass("data-[state=open]:slide-in-from-bottom");
+
+ rerender(
+
+ Left Content
+
+ );
+
+ content = screen.getByTestId("sheet-content");
+ expect(content).toHaveClass("inset-y-0");
+ expect(content).toHaveClass("left-0");
+ expect(content).toHaveClass("h-full");
+ expect(content).toHaveClass("w-3/4");
+ expect(content).toHaveClass("border-r");
+ expect(content).toHaveClass("data-[state=closed]:slide-out-to-left");
+ expect(content).toHaveClass("data-[state=open]:slide-in-from-left");
+ expect(content).toHaveClass("sm:max-w-sm");
+
+ rerender(
+
+ Right Content
+
+ );
+
+ content = screen.getByTestId("sheet-content");
+ expect(content).toHaveClass("inset-y-0");
+ expect(content).toHaveClass("right-0");
+ expect(content).toHaveClass("h-full");
+ expect(content).toHaveClass("w-3/4");
+ expect(content).toHaveClass("border-l");
+ expect(content).toHaveClass("data-[state=closed]:slide-out-to-right");
+ expect(content).toHaveClass("data-[state=open]:slide-in-from-right");
+ expect(content).toHaveClass("sm:max-w-sm");
+ });
+
+ test("SheetContent applies custom className", () => {
+ render(
+
+ Custom Content
+
+ );
+
+ const content = screen.getByTestId("sheet-content");
+ expect(content).toHaveClass("custom-class");
+ });
+
+ test("SheetContent has correct base classes", () => {
+ render(
+
+ Base Content
+
+ );
+
+ const content = screen.getByTestId("sheet-content");
+ expect(content).toHaveClass("fixed");
+ expect(content).toHaveClass("z-50");
+ expect(content).toHaveClass("gap-4");
+ expect(content).toHaveClass("bg-background");
+ expect(content).toHaveClass("p-6");
+ expect(content).toHaveClass("shadow-lg");
+ expect(content).toHaveClass("transition");
+ expect(content).toHaveClass("ease-in-out");
+ expect(content).toHaveClass("data-[state=closed]:duration-300");
+ expect(content).toHaveClass("data-[state=open]:duration-500");
+ });
+
+ test("SheetContent close button has correct styling", () => {
+ render(
+
+ Content
+
+ );
+
+ const closeButton = screen.getByTestId("sheet-close");
+ expect(closeButton).toHaveClass("ring-offset-background");
+ expect(closeButton).toHaveClass("focus:ring-ring");
+ expect(closeButton).toHaveClass("data-[state=open]:bg-secondary");
+ expect(closeButton).toHaveClass("absolute");
+ expect(closeButton).toHaveClass("right-4");
+ expect(closeButton).toHaveClass("top-4");
+ expect(closeButton).toHaveClass("rounded-sm");
+ expect(closeButton).toHaveClass("opacity-70");
+ expect(closeButton).toHaveClass("transition-opacity");
+ expect(closeButton).toHaveClass("hover:opacity-100");
+ });
+
+ test("SheetContent close button icon has correct styling", () => {
+ render(
+
+ Content
+
+ );
+
+ const icon = screen.getByTestId("x-icon");
+ expect(icon).toBeInTheDocument();
+ expect(icon).toHaveClass("h-4");
+ expect(icon).toHaveClass("w-4");
+ });
+
+ test("SheetHeader renders correctly", () => {
+ render(
+
+ Header Content
+
+ );
+
+ const header = screen.getByText("Header Content").parentElement;
+ expect(header).toBeInTheDocument();
+ expect(header).toHaveClass("test-class");
+ expect(header).toHaveClass("flex");
+ expect(header).toHaveClass("flex-col");
+ expect(header).toHaveClass("space-y-2");
+ expect(header).toHaveClass("text-center");
+ expect(header).toHaveClass("sm:text-left");
+ });
+
+ test("SheetFooter renders correctly", () => {
+ render(
+
+ OK
+
+ );
+
+ const footer = screen.getByText("OK").parentElement;
+ expect(footer).toBeInTheDocument();
+ expect(footer).toHaveClass("test-class");
+ expect(footer).toHaveClass("flex");
+ expect(footer).toHaveClass("flex-col-reverse");
+ expect(footer).toHaveClass("sm:flex-row");
+ expect(footer).toHaveClass("sm:justify-end");
+ expect(footer).toHaveClass("sm:space-x-2");
+ });
+
+ test("SheetTitle renders correctly", () => {
+ render(Sheet Title );
+
+ const title = screen.getByTestId("sheet-title");
+ expect(title).toBeInTheDocument();
+ expect(title).toHaveClass("test-class");
+ expect(title).toHaveClass("text-foreground");
+ expect(title).toHaveClass("text-lg");
+ expect(title).toHaveClass("font-semibold");
+ expect(screen.getByText("Sheet Title")).toBeInTheDocument();
+ });
+
+ test("SheetDescription renders correctly", () => {
+ render(Sheet Description );
+
+ const description = screen.getByTestId("sheet-description");
+ expect(description).toBeInTheDocument();
+ expect(description).toHaveClass("test-class");
+ expect(description).toHaveClass("text-muted-foreground");
+ expect(description).toHaveClass("text-sm");
+ expect(screen.getByText("Sheet Description")).toBeInTheDocument();
+ });
+
+ test("SheetContent forwards props correctly", () => {
+ render(
+
+ Custom Content
+
+ );
+
+ const content = screen.getByTestId("custom-sheet");
+ expect(content).toHaveAttribute("aria-label", "Custom Sheet");
+ });
+
+ test("SheetTitle forwards props correctly", () => {
+ render(Custom Title );
+
+ const title = screen.getByTestId("custom-title");
+ expect(title).toHaveAttribute("data-testid", "custom-title");
+ });
+
+ test("SheetDescription forwards props correctly", () => {
+ render(Custom Description );
+
+ const description = screen.getByTestId("custom-description");
+ expect(description).toHaveAttribute("data-testid", "custom-description");
+ });
+
+ test("SheetHeader forwards props correctly", () => {
+ render(
+
+ Header
+
+ );
+
+ const header = screen.getByText("Header").parentElement;
+ expect(header).toHaveAttribute("data-testid", "custom-header");
+ });
+
+ test("SheetFooter forwards props correctly", () => {
+ render(
+
+ Footer
+
+ );
+
+ const footer = screen.getByText("Footer").parentElement;
+ expect(footer).toHaveAttribute("data-testid", "custom-footer");
+ });
+
+ test("SheetHeader handles dangerouslySetInnerHTML", () => {
+ const htmlContent = "Dangerous HTML ";
+ render(Dangerous Footer HTML ";
+ render(
+ Content
+
+ );
+
+ const closeButton = screen.getByTestId("sheet-close");
+ expect(closeButton).toHaveClass("focus:outline-none");
+ expect(closeButton).toHaveClass("focus:ring-2");
+ expect(closeButton).toHaveClass("focus:ring-offset-2");
+ expect(closeButton).toHaveClass("disabled:pointer-events-none");
+
+ // Check for screen reader text
+ expect(screen.getByText("Close")).toBeInTheDocument();
+ expect(screen.getByText("Close")).toHaveClass("sr-only");
+ });
+
+ test("SheetContent ref forwarding works", () => {
+ const ref = vi.fn();
+ render(
+
+ Content
+
+ );
+
+ expect(ref).toHaveBeenCalled();
+ });
+
+ test("SheetTitle ref forwarding works", () => {
+ const ref = vi.fn();
+ render(Title );
+
+ expect(ref).toHaveBeenCalled();
+ });
+
+ test("SheetDescription ref forwarding works", () => {
+ const ref = vi.fn();
+ render(Description );
+
+ expect(ref).toHaveBeenCalled();
+ });
+
+ test("SheetOverlay ref forwarding works", () => {
+ const ref = vi.fn();
+ render(
+
+ Open Sheet
+
+
+
+ Sheet Title
+ Sheet Description
+
+ Sheet Body Content
+
+ Cancel
+ Submit
+
+
+
+ );
+
+ expect(screen.getByTestId("sheet-root")).toBeInTheDocument();
+ expect(screen.getByTestId("sheet-trigger")).toBeInTheDocument();
+ expect(screen.getByTestId("sheet-portal")).toBeInTheDocument();
+ expect(screen.getByTestId("sheet-overlay")).toBeInTheDocument();
+ expect(screen.getByTestId("sheet-content")).toBeInTheDocument();
+ expect(screen.getByTestId("sheet-close")).toBeInTheDocument();
+ expect(screen.getByTestId("sheet-title")).toBeInTheDocument();
+ expect(screen.getByTestId("sheet-description")).toBeInTheDocument();
+ expect(screen.getByText("Open Sheet")).toBeInTheDocument();
+ expect(screen.getByText("Sheet Title")).toBeInTheDocument();
+ expect(screen.getByText("Sheet Description")).toBeInTheDocument();
+ expect(screen.getByText("Sheet Body Content")).toBeInTheDocument();
+ expect(screen.getByText("Cancel")).toBeInTheDocument();
+ expect(screen.getByText("Submit")).toBeInTheDocument();
+ });
+});
diff --git a/apps/web/modules/ui/components/sheet/index.tsx b/apps/web/modules/ui/components/sheet/index.tsx
new file mode 100644
index 0000000000..387a2816c1
--- /dev/null
+++ b/apps/web/modules/ui/components/sheet/index.tsx
@@ -0,0 +1,119 @@
+"use client";
+
+import { cn } from "@/modules/ui/lib/utils";
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { type VariantProps, cva } from "class-variance-authority";
+import { XIcon } from "lucide-react";
+import * as React from "react";
+
+const Sheet = SheetPrimitive.Root;
+
+const SheetTrigger = SheetPrimitive.Trigger;
+
+const SheetClose = SheetPrimitive.Close;
+
+const SheetPortal = SheetPrimitive.Portal;
+
+const SheetOverlay = React.forwardRef<
+ React.ComponentRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ VariantProps {}
+
+const SheetContent = React.forwardRef, SheetContentProps>(
+ ({ side = "right", className, children, ...props }, ref) => (
+
+
+
+ Close
+
+ {children}
+
+
+ )
+);
+SheetContent.displayName = SheetPrimitive.Content.displayName;
+
+const SheetHeader = ({ className, ...props }: React.HTMLAttributes) => (
+
+);
+SheetHeader.displayName = "SheetHeader";
+
+const SheetFooter = ({ className, ...props }: React.HTMLAttributes) => (
+
+);
+SheetFooter.displayName = "SheetFooter";
+
+const SheetTitle = React.forwardRef<
+ React.ComponentRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ (({ children, onClick, ...props }, ref) => (
+
+ {children}
+
+ ));
+ MockButton.displayName = "MockButton";
+
+ return {
+ Button: MockButton,
+ };
+});
+
+// Mock Input component
+vi.mock("@/modules/ui/components/input", () => {
+ const MockInput = React.forwardRef((props, ref) => ((props, ref) => (
+
+ ));
+ MockSeparator.displayName = "MockSeparator";
+
+ return {
+ Separator: MockSeparator,
+ };
+});
+
+// Mock Sheet components
+vi.mock("@/modules/ui/components/sheet", () => ({
+ Sheet: ({ children, open, onOpenChange }: any) => (
+ onOpenChange?.(!open)}>
+ {children}
+
+ ),
+ SheetContent: ({ children, side, ...props }: any) => (
+
+ {children}
+
+ ),
+ SheetHeader: ({ children }: any) => {children}
,
+ SheetTitle: ({ children }: any) => {children}
,
+ SheetDescription: ({ children }: any) => {children}
,
+}));
+
+// Mock Skeleton component
+vi.mock("@/modules/ui/components/skeleton", () => ({
+ Skeleton: ({ className, style, ...props }: any) => (
+
+ ),
+}));
+
+// Mock Tooltip components
+vi.mock("@/modules/ui/components/tooltip", () => ({
+ Tooltip: ({ children }: any) => {children}
,
+ TooltipContent: ({ children, hidden, ...props }: any) => (
+
+ {children}
+
+ ),
+ TooltipProvider: ({ children }: any) => {children}
,
+ TooltipTrigger: ({ children }: any) => {children}
,
+}));
+
+// Mock Slot from @radix-ui/react-slot
+vi.mock("@radix-ui/react-slot", () => {
+ const MockSlot = React.forwardRef(({ children, ...props }, ref) => (
+
+ {children}
+
+ ));
+ MockSlot.displayName = "MockSlot";
+
+ return {
+ Slot: MockSlot,
+ };
+});
+
+// Mock Lucide icons
+vi.mock("lucide-react", () => ({
+ Columns2Icon: () =>
,
+}));
+
+// Mock cn utility
+vi.mock("@/modules/ui/lib/utils", () => ({
+ cn: (...args: any[]) => args.filter(Boolean).flat().join(" "),
+}));
+
+// Test component that uses useSidebar hook
+const TestComponent = () => {
+ const sidebar = useSidebar();
+ return (
+
+
{sidebar?.state || "unknown"}
+
{sidebar?.open?.toString() || "unknown"}
+
{sidebar?.isMobile?.toString() || "unknown"}
+
{sidebar?.openMobile?.toString() || "unknown"}
+
+ Toggle
+
+
sidebar?.setOpen?.(true)}>
+ Set Open
+
+
sidebar?.setOpenMobile?.(true)}>
+ Set Open Mobile
+
+
Test
;
+ };
+
+ expect(() => render(
+
+ );
+
+ expect(screen.getByTestId("sidebar-state")).toHaveTextContent("expanded");
+ expect(screen.getByTestId("sidebar-open")).toHaveTextContent("true");
+
+ // Test toggle functionality
+ await user.click(screen.getByTestId("toggle-button"));
+ expect(document.cookie).toContain("sidebar_state=false");
+
+ // Test with controlled state
+ rerender(
+
+
+ );
+
+ expect(screen.getByTestId("sidebar-open")).toHaveTextContent("false");
+ await user.click(screen.getByTestId("set-open-button"));
+ expect(onOpenChange).toHaveBeenCalledWith(true);
+
+ // Test mobile functionality
+ await user.click(screen.getByTestId("set-open-mobile-button"));
+ expect(screen.getByTestId("sidebar-open-mobile")).toHaveTextContent("true");
+ });
+
+ test("SidebarProvider handles keyboard shortcuts and cleanup", () => {
+ const preventDefault = vi.fn();
+
+ const { unmount } = render(
+
+
+ );
+
+ // Test keyboard shortcut registration
+ expect(global.addEventListener).toHaveBeenCalledWith("keydown", expect.any(Function));
+
+ // Test keyboard shortcut handling
+ const [[, eventHandler]] = vi.mocked(global.addEventListener).mock.calls;
+
+ // Valid shortcut
+ (eventHandler as (event: any) => void)({
+ key: "b",
+ ctrlKey: true,
+ preventDefault,
+ });
+ expect(preventDefault).toHaveBeenCalled();
+
+ // Invalid shortcut
+ preventDefault.mockClear();
+ (eventHandler as (event: any) => void)({
+ key: "a",
+ ctrlKey: true,
+ preventDefault,
+ });
+ expect(preventDefault).not.toHaveBeenCalled();
+
+ // Test cleanup
+ unmount();
+ expect(global.removeEventListener).toHaveBeenCalledWith("keydown", expect.any(Function));
+ });
+ });
+
+ describe("Interactive Components", () => {
+ test("SidebarTrigger and SidebarRail toggle sidebar functionality", async () => {
+ const user = userEvent.setup();
+ const customOnClick = vi.fn();
+
+ render(
+
+
+ );
+
+ const trigger = screen.getByTestId("columns2-icon").closest("button");
+ expect(trigger).not.toBeNull();
+ await user.click(trigger as HTMLButtonElement);
+ expect(customOnClick).toHaveBeenCalled();
+ expect(screen.getByTestId("sidebar-state")).toHaveTextContent("collapsed");
+
+ // Test SidebarRail
+ const rail = screen.getByLabelText("Toggle Sidebar");
+ expect(rail).toHaveAttribute("aria-label", "Toggle Sidebar");
+ await user.click(rail);
+ expect(screen.getByTestId("sidebar-state")).toHaveTextContent("expanded");
+ });
+
+ test("Sidebar renders with different configurations", () => {
+ const { rerender } = render(
+
+
+ Sidebar Content
+
+
+ );
+
+ expect(screen.getByText("Sidebar Content")).toBeInTheDocument();
+
+ // Test different variants
+ rerender(
+
+
+ Sidebar Content
+
+
+ );
+
+ expect(screen.getByText("Sidebar Content")).toBeInTheDocument();
+ });
+ });
+
+ describe("Layout Components", () => {
+ test("basic layout components render correctly with custom classes", () => {
+ const layoutComponents = [
+ { Component: SidebarInset, content: "Main Content", selector: "main" },
+ { Component: SidebarInput, content: null, selector: "input", props: { placeholder: "Search..." } },
+ { Component: SidebarHeader, content: "Header Content", selector: '[data-sidebar="header"]' },
+ { Component: SidebarFooter, content: "Footer Content", selector: '[data-sidebar="footer"]' },
+ { Component: SidebarSeparator, content: null, selector: '[role="separator"]' },
+ { Component: SidebarContent, content: "Content", selector: '[data-sidebar="content"]' },
+ ];
+
+ layoutComponents.forEach(({ Component, content, selector, props = {} }) => {
+ const testProps = { className: "custom-class", ...props };
+
+ render(
+
+ {content && {content}
}
+
+ );
+
+ if (content) {
+ expect(screen.getByText(content)).toBeInTheDocument();
+ const element = screen.getByText(content).closest(selector);
+ expect(element).toHaveClass("custom-class");
+ } else if (selector === "input") {
+ expect(screen.getByRole("textbox")).toHaveClass("custom-class");
+ } else {
+ expect(screen.getByRole("separator")).toHaveClass("custom-class");
+ }
+
+ cleanup();
+ });
+ });
+ });
+
+ describe("Group Components", () => {
+ test("sidebar group components render and handle interactions", async () => {
+ const user = userEvent.setup();
+
+ render(
+
+
+ Group Label
+
+ Action
+
+
+ Group Content
+
+
+
+ );
+
+ // Test all components render
+ expect(screen.getByText("Group Label")).toBeInTheDocument();
+ expect(screen.getByText("Group Content")).toBeInTheDocument();
+
+ // Test action button
+ const actionButton = screen.getByRole("button");
+ expect(actionButton).toBeInTheDocument();
+ await user.click(actionButton);
+
+ // Test custom classes
+ expect(screen.getByText("Group Label")).toHaveClass("label-class");
+ expect(screen.getByText("Group Content").closest('[data-sidebar="group-content"]')).toHaveClass(
+ "content-class"
+ );
+ expect(actionButton).toHaveClass("action-class");
+ });
+
+ test("sidebar group components handle asChild prop", () => {
+ render(
+
+
+ Group Label
+
+
+ Action
+
+
+ );
+
+ expect(screen.getByText("Group Label")).toBeInTheDocument();
+ expect(screen.getByText("Action")).toBeInTheDocument();
+ });
+ });
+
+ describe("Menu Components", () => {
+ test("basic menu components render with custom classes", () => {
+ render(
+
+
+
+ Menu Item
+
+
+ 5
+
+ );
+
+ expect(screen.getByText("Menu Item")).toBeInTheDocument();
+ expect(screen.getByText("5")).toBeInTheDocument();
+
+ const menu = screen.getByText("Menu Item").closest("ul");
+ const menuItem = screen.getByText("Menu Item").closest("li");
+
+ expect(menu).toHaveClass("menu-class");
+ expect(menuItem).toHaveClass("item-class");
+ expect(screen.getByText("5")).toHaveClass("badge-class");
+ });
+
+ test("SidebarMenuButton handles all variants and interactions", async () => {
+ const { rerender } = render(
+
+
+ Menu Button
+
+
+ );
+
+ const button = screen.getByText("Menu Button").closest("button");
+ expect(button).toHaveAttribute("data-active", "true");
+ expect(button).toHaveAttribute("data-size", "sm");
+ expect(button).toHaveClass("button-class");
+ expect(screen.getByTestId("tooltip")).toBeInTheDocument();
+
+ // Test tooltip object
+ rerender(
+
+
+ Menu Button
+
+
+ );
+
+ expect(screen.getByTestId("tooltip-content")).toBeInTheDocument();
+
+ // Test asChild
+ rerender(
+
+
+ Menu Button
+
+
+ );
+
+ expect(screen.getByText("Menu Button")).toBeInTheDocument();
+ });
+
+ test("SidebarMenuAction handles showOnHover and asChild", () => {
+ const { rerender } = render(
+
+
+ Action
+
+
+ );
+
+ expect(screen.getByText("Action")).toBeInTheDocument();
+
+ rerender(
+
+
+ Action
+
+
+ );
+
+ expect(screen.getByText("Action")).toBeInTheDocument();
+ });
+
+ test("SidebarMenuSkeleton renders with icon option", () => {
+ const { rerender } = render(
+
+
+ );
+
+ expect(screen.getByTestId("skeleton")).toBeInTheDocument();
+
+ const skeleton = screen.getAllByTestId("skeleton")[0].parentElement;
+ expect(skeleton).toHaveClass("skeleton-class");
+
+ rerender(
+
+
+ );
+
+ expect(screen.getAllByTestId("skeleton")).toHaveLength(2);
+ });
+ });
+
+ describe("Sub Menu Components", () => {
+ test("sub menu components render and handle all props", () => {
+ const { rerender } = render(
+
+
+
+
+ Sub Button
+
+
+
+
+ );
+
+ expect(screen.getByText("Sub Button")).toBeInTheDocument();
+
+ const subMenu = screen.getByText("Sub Button").closest("ul");
+ const subButton = screen.getByText("Sub Button").closest("a");
+
+ expect(subMenu).toHaveClass("sub-menu-class");
+ expect(subButton).toHaveAttribute("data-active", "true");
+ expect(subButton).toHaveAttribute("data-size", "sm");
+ expect(subButton).toHaveClass("sub-button-class");
+
+ // Test asChild
+ rerender(
+
+
+ Sub Button
+
+
+ );
+
+ expect(screen.getByText("Sub Button")).toBeInTheDocument();
+ });
+ });
+
+ describe("Provider Configuration", () => {
+ test("SidebarProvider handles custom props and styling", () => {
+ render(
+
+
+ );
+
+ expect(screen.getByTestId("sidebar-state")).toHaveTextContent("collapsed");
+ expect(screen.getByTestId("sidebar-open")).toHaveTextContent("false");
+
+ const wrapper = screen.getByText("collapsed").closest(".group\\/sidebar-wrapper");
+ expect(wrapper).toHaveClass("custom-class");
+ });
+
+ test("function callback handling for setOpen", async () => {
+ const user = userEvent.setup();
+
+ const TestComponentWithCallback = () => {
+ const { setOpen } = useSidebar();
+ return (
+ setOpen(false)}>
+ Set False
+
+ );
+ };
+
+ render(
+
+
+ );
+
+ expect(screen.getByTestId("sidebar-open")).toHaveTextContent("true");
+ await user.click(screen.getByTestId("function-callback-button"));
+ expect(screen.getByTestId("sidebar-open")).toHaveTextContent("false");
+ });
+ });
+});
diff --git a/apps/web/modules/ui/components/sidebar/index.tsx b/apps/web/modules/ui/components/sidebar/index.tsx
new file mode 100644
index 0000000000..d2bee1f12c
--- /dev/null
+++ b/apps/web/modules/ui/components/sidebar/index.tsx
@@ -0,0 +1,691 @@
+"use client";
+
+import { Button } from "@/modules/ui/components/button";
+import { Input } from "@/modules/ui/components/input";
+import { Separator } from "@/modules/ui/components/separator";
+import {
+ Sheet,
+ SheetContent,
+ SheetDescription,
+ SheetHeader,
+ SheetTitle,
+} from "@/modules/ui/components/sheet";
+import { Skeleton } from "@/modules/ui/components/skeleton";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/modules/ui/components/tooltip";
+import { useIsMobile } from "@/modules/ui/hooks/use-mobile";
+import { cn } from "@/modules/ui/lib/utils";
+import { Slot } from "@radix-ui/react-slot";
+import { VariantProps, cva } from "class-variance-authority";
+import { Columns2Icon } from "lucide-react";
+import * as React from "react";
+
+const SIDEBAR_COOKIE_NAME = "sidebar_state";
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+const SIDEBAR_WIDTH = "16rem";
+const SIDEBAR_WIDTH_MOBILE = "18rem";
+const SIDEBAR_WIDTH_ICON = "3rem";
+const SIDEBAR_KEYBOARD_SHORTCUT = "b";
+
+type SidebarContextProps = {
+ state: "expanded" | "collapsed";
+ open: boolean;
+ setOpen: (open: boolean) => void;
+ openMobile: boolean;
+ setOpenMobile: (open: boolean) => void;
+ isMobile: boolean;
+ toggleSidebar: () => void;
+};
+
+const SidebarContext = React.createContext(null);
+
+function useSidebar() {
+ const context = React.useContext(SidebarContext);
+ if (!context) {
+ throw new Error("useSidebar must be used within a SidebarProvider.");
+ }
+
+ return context;
+}
+
+const SidebarProvider = React.forwardRef<
+ HTMLDivElement,
+ React.ComponentProps<"div"> & {
+ defaultOpen?: boolean;
+ open?: boolean;
+ onOpenChange?: (open: boolean) => void;
+ }
+>(
+ (
+ { defaultOpen = true, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props },
+ ref
+ ) => {
+ const isMobile = useIsMobile();
+ const [openMobile, setOpenMobile] = React.useState(false);
+
+ // This is the internal state of the sidebar.
+ // We use openProp and setOpenProp for control from outside the component.
+ const [_open, _setOpen] = React.useState(defaultOpen);
+ const open = openProp ?? _open;
+ const setOpen = React.useCallback(
+ (value: boolean | ((value: boolean) => boolean)) => {
+ const openState = typeof value === "function" ? value(open) : value;
+ if (setOpenProp) {
+ setOpenProp(openState);
+ } else {
+ _setOpen(openState);
+ }
+
+ // This sets the cookie to keep the sidebar state.
+ document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+ },
+ [setOpenProp, open]
+ );
+
+ // Helper to toggle the sidebar.
+ const toggleSidebar = React.useCallback(() => {
+ return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
+ }, [isMobile, setOpen, setOpenMobile]);
+
+ // Adds a keyboard shortcut to toggle the sidebar.
+ React.useEffect(() => {
+ const handleKeyDown = (event: KeyboardEvent) => {
+ if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
+ event.preventDefault();
+ toggleSidebar();
+ }
+ };
+
+ window.addEventListener("keydown", handleKeyDown);
+ return () => window.removeEventListener("keydown", handleKeyDown);
+ }, [toggleSidebar]);
+
+ // We add a state so that we can do data-state="expanded" or "collapsed".
+ // This makes it easier to style the sidebar with Tailwind classes.
+ const state = open ? "expanded" : "collapsed";
+
+ const contextValue = React.useMemo(
+ () => ({
+ state,
+ open,
+ setOpen,
+ isMobile,
+ openMobile,
+ setOpenMobile,
+ toggleSidebar,
+ }),
+ [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
+ );
+
+ return (
+
+
+
+ {children}
+
+
+
+ );
+ }
+);
+SidebarProvider.displayName = "SidebarProvider";
+
+const Sidebar = React.forwardRef<
+ HTMLDivElement,
+ React.ComponentProps<"div"> & {
+ side?: "left" | "right";
+ variant?: "sidebar" | "floating" | "inset";
+ collapsible?: "offcanvas" | "icon" | "none";
+ }
+>(({ side = "left", variant = "sidebar", collapsible = "offcanvas", className, children, ...props }, ref) => {
+ const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+
+ if (collapsible === "none") {
+ return (
+
+ {children}
+
+ );
+ }
+
+ if (isMobile) {
+ return (
+
+
+
+ Sidebar
+ Displays the mobile sidebar.
+
+ {children}
+
+
+ );
+ }
+
+ return (
+
+ {/* This is what handles the sidebar gap on desktop */}
+
+
+
,
+ React.ComponentProps
+>(({ className, onClick, ...props }, ref) => {
+ const { toggleSidebar } = useSidebar();
+
+ return (
+ {
+ onClick?.(event);
+ toggleSidebar();
+ }}
+ {...props}>
+ Toggle Sidebar
+
+ );
+});
+SidebarTrigger.displayName = "SidebarTrigger";
+
+const SidebarRail = React.forwardRef>(
+ ({ className, ...props }, ref) => {
+ const { toggleSidebar } = useSidebar();
+
+ return (
+ >(
+ ({ className, ...props }, ref) => {
+ return (
+ , React.ComponentProps>(
+ ({ className, ...props }, ref) => {
+ return (
+ >(
+ ({ className, ...props }, ref) => {
+ return (
+
+ );
+ }
+);
+SidebarHeader.displayName = "SidebarHeader";
+
+const SidebarFooter = React.forwardRef>(
+ ({ className, ...props }, ref) => {
+ return (
+
+ );
+ }
+);
+SidebarFooter.displayName = "SidebarFooter";
+
+const SidebarSeparator = React.forwardRef<
+ React.ComponentRef,
+ React.ComponentProps
+>(({ className, ...props }, ref) => {
+ return (
+ >(
+ ({ className, ...props }, ref) => {
+ return (
+
+ );
+ }
+);
+SidebarContent.displayName = "SidebarContent";
+
+const SidebarGroup = React.forwardRef>(
+ ({ className, ...props }, ref) => {
+ return (
+
+ );
+ }
+);
+SidebarGroup.displayName = "SidebarGroup";
+
+const SidebarGroupLabel = React.forwardRef<
+ HTMLDivElement,
+ React.ComponentProps<"div"> & { asChild?: boolean }
+>(({ className, asChild = false, ...props }, ref) => {
+ const Comp = asChild ? Slot : "div";
+
+ return (
+ svg]:size-4 [&>svg]:shrink-0",
+ "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
+ className
+ )}
+ {...props}
+ />
+ );
+});
+SidebarGroupLabel.displayName = "SidebarGroupLabel";
+
+const SidebarGroupAction = React.forwardRef<
+ HTMLButtonElement,
+ React.ComponentProps<"button"> & { asChild?: boolean }
+>(({ className, asChild = false, ...props }, ref) => {
+ const Comp = asChild ? Slot : "button";
+
+ return (
+ svg]:size-4 [&>svg]:shrink-0",
+ // Increases the hit area of the button on mobile.
+ "after:absolute after:-inset-2 after:md:hidden",
+ "group-data-[collapsible=icon]:hidden",
+ className
+ )}
+ {...props}
+ />
+ );
+});
+SidebarGroupAction.displayName = "SidebarGroupAction";
+
+const SidebarGroupContent = React.forwardRef>(
+ ({ className, ...props }, ref) => (
+
+ )
+);
+SidebarGroupContent.displayName = "SidebarGroupContent";
+
+const SidebarMenu = React.forwardRef>(
+ ({ className, ...props }, ref) => (
+
+ )
+);
+SidebarMenu.displayName = "SidebarMenu";
+
+const SidebarMenuItem = React.forwardRef>(
+ ({ className, ...props }, ref) => (
+ ;
+ } & VariantProps
+>(
+ (
+ {
+ asChild = false,
+ isActive = false,
+ variant = "default",
+ size = "default",
+ tooltip,
+ className,
+ ...props
+ },
+ ref
+ ) => {
+ const Comp = asChild ? Slot : "button";
+ const { isMobile, state } = useSidebar();
+
+ const button = (
+
+ {button}
+
+ );
+ }
+);
+SidebarMenuButton.displayName = "SidebarMenuButton";
+
+const SidebarMenuAction = React.forwardRef<
+ HTMLButtonElement,
+ React.ComponentProps<"button"> & {
+ asChild?: boolean;
+ showOnHover?: boolean;
+ }
+>(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
+ const Comp = asChild ? Slot : "button";
+
+ return (
+ svg]:size-4 [&>svg]:shrink-0",
+ // Increases the hit area of the button on mobile.
+ "after:absolute after:-inset-2 after:md:hidden",
+ "peer-data-[size=sm]/menu-button:top-1",
+ "peer-data-[size=default]/menu-button:top-1.5",
+ "peer-data-[size=lg]/menu-button:top-2.5",
+ "group-data-[collapsible=icon]:hidden",
+ showOnHover &&
+ "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0",
+ className
+ )}
+ {...props}
+ />
+ );
+});
+SidebarMenuAction.displayName = "SidebarMenuAction";
+
+const SidebarMenuBadge = React.forwardRef>(
+ ({ className, ...props }, ref) => (
+
+ )
+);
+SidebarMenuBadge.displayName = "SidebarMenuBadge";
+
+const SidebarMenuSkeleton = React.forwardRef<
+ HTMLDivElement,
+ React.ComponentProps<"div"> & {
+ showIcon?: boolean;
+ }
+>(({ className, showIcon = false, ...props }, ref) => {
+ // Random width between 50 to 90%.
+ const width = React.useMemo(() => {
+ return `${Math.floor(Math.random() * 40) + 50}%`;
+ }, []);
+
+ return (
+
+ {showIcon &&
+ );
+});
+SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton";
+
+const SidebarMenuSub = React.forwardRef>(
+ ({ className, ...props }, ref) => (
+
+ )
+);
+SidebarMenuSub.displayName = "SidebarMenuSub";
+
+const SidebarMenuSubItem = React.forwardRef>(
+ ({ ...props }, ref) => svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+ "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+ size === "sm" && "text-xs",
+ size === "md" && "text-sm",
+ "group-data-[collapsible=icon]:hidden",
+ className
+ )}
+ {...props}
+ />
+ );
+});
+SidebarMenuSubButton.displayName = "SidebarMenuSubButton";
+
+export {
+ Sidebar,
+ SidebarContent,
+ SidebarFooter,
+ SidebarGroup,
+ SidebarGroupAction,
+ SidebarGroupContent,
+ SidebarGroupLabel,
+ SidebarHeader,
+ SidebarInput,
+ SidebarInset,
+ SidebarMenu,
+ SidebarMenuAction,
+ SidebarMenuBadge,
+ SidebarMenuButton,
+ SidebarMenuItem,
+ SidebarMenuSkeleton,
+ SidebarMenuSub,
+ SidebarMenuSubButton,
+ SidebarMenuSubItem,
+ SidebarProvider,
+ SidebarRail,
+ SidebarSeparator,
+ SidebarTrigger,
+ useSidebar,
+};
diff --git a/apps/web/modules/ui/hooks/use-mobile.test.tsx b/apps/web/modules/ui/hooks/use-mobile.test.tsx
new file mode 100644
index 0000000000..279c078cba
--- /dev/null
+++ b/apps/web/modules/ui/hooks/use-mobile.test.tsx
@@ -0,0 +1,258 @@
+import "@testing-library/jest-dom/vitest";
+import { act, cleanup, renderHook } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
+
+// Unmock the hook to test the actual implementation
+vi.unmock("@/modules/ui/hooks/use-mobile");
+const { useIsMobile } = await import("./use-mobile");
+
+// Mock window.matchMedia
+const mockMatchMedia = vi.fn();
+const mockAddEventListener = vi.fn();
+const mockRemoveEventListener = vi.fn();
+
+Object.defineProperty(window, "matchMedia", {
+ writable: true,
+ value: mockMatchMedia,
+});
+
+Object.defineProperty(window, "innerWidth", {
+ writable: true,
+ value: 1024,
+});
+
+describe("useIsMobile", () => {
+ afterEach(() => {
+ cleanup();
+ });
+
+ beforeEach(() => {
+ vi.clearAllMocks();
+
+ // Reset window.innerWidth to desktop size
+ Object.defineProperty(window, "innerWidth", {
+ writable: true,
+ value: 1024,
+ });
+
+ // Default mock setup
+ mockMatchMedia.mockReturnValue({
+ addEventListener: mockAddEventListener,
+ removeEventListener: mockRemoveEventListener,
+ });
+ });
+
+ test("should return false initially when window width is above mobile breakpoint", () => {
+ Object.defineProperty(window, "innerWidth", {
+ writable: true,
+ value: 1024,
+ });
+
+ const { result } = renderHook(() => useIsMobile());
+
+ expect(result.current).toBe(false);
+ });
+
+ test("should return true initially when window width is below mobile breakpoint", () => {
+ Object.defineProperty(window, "innerWidth", {
+ writable: true,
+ value: 600,
+ });
+
+ const { result } = renderHook(() => useIsMobile());
+
+ expect(result.current).toBe(true);
+ });
+
+ test("should return true when window width equals mobile breakpoint - 1", () => {
+ Object.defineProperty(window, "innerWidth", {
+ writable: true,
+ value: 767,
+ });
+
+ const { result } = renderHook(() => useIsMobile());
+
+ expect(result.current).toBe(true);
+ });
+
+ test("should return false when window width equals mobile breakpoint", () => {
+ Object.defineProperty(window, "innerWidth", {
+ writable: true,
+ value: 768,
+ });
+
+ const { result } = renderHook(() => useIsMobile());
+
+ expect(result.current).toBe(false);
+ });
+
+ test("should setup media query with correct breakpoint", () => {
+ renderHook(() => useIsMobile());
+
+ expect(mockMatchMedia).toHaveBeenCalledWith("(max-width: 767px)");
+ });
+
+ test("should add event listener for media query changes", () => {
+ renderHook(() => useIsMobile());
+
+ expect(mockAddEventListener).toHaveBeenCalledWith("change", expect.any(Function));
+ });
+
+ test("should update state when media query changes", () => {
+ let changeHandler: () => void;
+
+ mockAddEventListener.mockImplementation((event, handler) => {
+ if (event === "change") {
+ changeHandler = handler;
+ }
+ });
+
+ Object.defineProperty(window, "innerWidth", {
+ writable: true,
+ value: 1024,
+ });
+
+ const { result } = renderHook(() => useIsMobile());
+
+ expect(result.current).toBe(false);
+
+ // Simulate window resize to mobile
+ act(() => {
+ Object.defineProperty(window, "innerWidth", {
+ writable: true,
+ value: 600,
+ });
+ changeHandler();
+ });
+
+ expect(result.current).toBe(true);
+ });
+
+ test("should update state when window resizes from mobile to desktop", () => {
+ let changeHandler: () => void;
+
+ mockAddEventListener.mockImplementation((event, handler) => {
+ if (event === "change") {
+ changeHandler = handler;
+ }
+ });
+
+ Object.defineProperty(window, "innerWidth", {
+ writable: true,
+ value: 600,
+ });
+
+ const { result } = renderHook(() => useIsMobile());
+
+ expect(result.current).toBe(true);
+
+ // Simulate window resize to desktop
+ act(() => {
+ Object.defineProperty(window, "innerWidth", {
+ writable: true,
+ value: 1024,
+ });
+ changeHandler();
+ });
+
+ expect(result.current).toBe(false);
+ });
+
+ test("should handle multiple rapid changes", () => {
+ let changeHandler: () => void;
+
+ mockAddEventListener.mockImplementation((event, handler) => {
+ if (event === "change") {
+ changeHandler = handler;
+ }
+ });
+
+ Object.defineProperty(window, "innerWidth", {
+ writable: true,
+ value: 1024,
+ });
+
+ const { result } = renderHook(() => useIsMobile());
+
+ expect(result.current).toBe(false);
+
+ // Multiple rapid changes
+ act(() => {
+ Object.defineProperty(window, "innerWidth", {
+ writable: true,
+ value: 600,
+ });
+ changeHandler();
+
+ Object.defineProperty(window, "innerWidth", {
+ writable: true,
+ value: 1024,
+ });
+ changeHandler();
+
+ Object.defineProperty(window, "innerWidth", {
+ writable: true,
+ value: 400,
+ });
+ changeHandler();
+ });
+
+ expect(result.current).toBe(true);
+ });
+
+ test("should remove event listener on unmount", () => {
+ const { unmount } = renderHook(() => useIsMobile());
+
+ expect(mockAddEventListener).toHaveBeenCalledWith("change", expect.any(Function));
+
+ const addEventListenerCall = mockAddEventListener.mock.calls.find((call) => call[0] === "change");
+ const changeHandler = addEventListenerCall?.[1];
+
+ unmount();
+
+ expect(mockRemoveEventListener).toHaveBeenCalledWith("change", changeHandler);
+ });
+
+ test("should handle edge case where window.innerWidth is exactly breakpoint boundary", () => {
+ const testCases = [
+ { width: 767, expected: true },
+ { width: 768, expected: false },
+ { width: 769, expected: false },
+ ];
+
+ testCases.forEach(({ width, expected }) => {
+ Object.defineProperty(window, "innerWidth", {
+ writable: true,
+ value: width,
+ });
+
+ const { result, unmount } = renderHook(() => useIsMobile());
+
+ expect(result.current).toBe(expected);
+
+ unmount();
+ });
+ });
+
+ test("should work with zero width", () => {
+ Object.defineProperty(window, "innerWidth", {
+ writable: true,
+ value: 0,
+ });
+
+ const { result } = renderHook(() => useIsMobile());
+
+ expect(result.current).toBe(true);
+ });
+
+ test("should work with very large width", () => {
+ Object.defineProperty(window, "innerWidth", {
+ writable: true,
+ value: 9999,
+ });
+
+ const { result } = renderHook(() => useIsMobile());
+
+ expect(result.current).toBe(false);
+ });
+});
diff --git a/apps/web/modules/ui/hooks/use-mobile.tsx b/apps/web/modules/ui/hooks/use-mobile.tsx
new file mode 100644
index 0000000000..502fd32393
--- /dev/null
+++ b/apps/web/modules/ui/hooks/use-mobile.tsx
@@ -0,0 +1,19 @@
+import * as React from "react";
+
+const MOBILE_BREAKPOINT = 768;
+
+export function useIsMobile() {
+ const [isMobile, setIsMobile] = React.useState(undefined);
+
+ React.useEffect(() => {
+ const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+ const onChange = () => {
+ setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+ };
+ mql.addEventListener("change", onChange);
+ setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+ return () => mql.removeEventListener("change", onChange);
+ }, []);
+
+ return !!isMobile;
+}
diff --git a/apps/web/vitestSetup.ts b/apps/web/vitestSetup.ts
index cd80f697f9..10ac6df6f6 100644
--- a/apps/web/vitestSetup.ts
+++ b/apps/web/vitestSetup.ts
@@ -33,6 +33,11 @@ if (!global.ResizeObserver) {
global.ResizeObserver = ResizeObserver;
}
+// Mock useIsMobile hook that depends on window.matchMedia
+vi.mock("@/modules/ui/hooks/use-mobile", () => ({
+ useIsMobile: vi.fn().mockReturnValue(false),
+}));
+
// mock react toast
vi.mock("react-hot-toast", () => ({
From 8af6c1599808f112c4dd7bbc8afaf1b45d745d2b Mon Sep 17 00:00:00 2001
From: Victor Hugo dos Santos <115753265+victorvhs017@users.noreply.github.com>
Date: Fri, 11 Jul 2025 19:45:42 +0700
Subject: [PATCH 21/29] feat: new share modal website embed and pop out (#6217)
---
.../settings/components/SettingsCard.tsx | 7 +-
.../components/share-survey-modal.test.tsx | 36 ++-
.../summary/components/share-survey-modal.tsx | 20 +-
.../shareEmbedModal/DynamicPopupTab.test.tsx | 178 ++++++++++++
.../shareEmbedModal/DynamicPopupTab.tsx | 76 ++++++
.../shareEmbedModal/TabContainer.test.tsx | 75 ++++++
.../shareEmbedModal/TabContainer.tsx | 21 ++
.../shareEmbedModal/WebsiteEmbedTab.test.tsx | 192 +++++++++++++
.../shareEmbedModal/WebsiteEmbedTab.tsx | 57 ++++
.../shareEmbedModal/WebsiteTab.test.tsx | 254 ------------------
.../components/shareEmbedModal/WebsiteTab.tsx | 118 --------
.../shareEmbedModal/share-view.test.tsx | 74 +++--
.../components/shareEmbedModal/share-view.tsx | 24 +-
apps/web/locales/de-DE.json | 23 +-
apps/web/locales/en-US.json | 25 +-
apps/web/locales/fr-FR.json | 23 +-
apps/web/locales/pt-BR.json | 23 +-
apps/web/locales/pt-PT.json | 23 +-
apps/web/locales/zh-Hant-TW.json | 23 +-
.../ui/components/alert/index.test.tsx | 64 +++++
.../web/modules/ui/components/alert/index.tsx | 8 +-
.../ui/components/code-block/index.test.tsx | 35 +++
.../ui/components/code-block/index.tsx | 4 +-
.../ui/components/typography/index.test.tsx | 19 +-
.../ui/components/typography/index.tsx | 48 +++-
.../embed-surveys/embed-mode-toggle.webp | Bin 43938 -> 18744 bytes
.../surveys/link-surveys/embed-surveys.mdx | 2 +-
27 files changed, 1011 insertions(+), 441 deletions(-)
create mode 100644 apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedModal/DynamicPopupTab.test.tsx
create mode 100644 apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedModal/DynamicPopupTab.tsx
create mode 100644 apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedModal/TabContainer.test.tsx
create mode 100644 apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedModal/TabContainer.tsx
create mode 100644 apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedModal/WebsiteEmbedTab.test.tsx
create mode 100644 apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedModal/WebsiteEmbedTab.tsx
delete mode 100644 apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedModal/WebsiteTab.test.tsx
delete mode 100644 apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedModal/WebsiteTab.tsx
diff --git a/apps/web/app/(app)/environments/[environmentId]/settings/components/SettingsCard.tsx b/apps/web/app/(app)/environments/[environmentId]/settings/components/SettingsCard.tsx
index dfb1f2107e..0885289369 100644
--- a/apps/web/app/(app)/environments/[environmentId]/settings/components/SettingsCard.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/settings/components/SettingsCard.tsx
@@ -2,6 +2,7 @@
import { cn } from "@/lib/cn";
import { Badge } from "@/modules/ui/components/badge";
+import { H3, Small } from "@/modules/ui/components/typography";
import { useTranslate } from "@tolgee/react";
export const SettingsCard = ({
@@ -31,7 +32,7 @@ export const SettingsCard = ({
id={title}>
-
{title}
+
{title}
{beta &&
-
{description}
+
+ {description}
+
{children}
diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/share-survey-modal.test.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/share-survey-modal.test.tsx
index 33cfd44518..66cd1e6ae7 100644
--- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/share-survey-modal.test.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/share-survey-modal.test.tsx
@@ -217,8 +217,10 @@ describe("ShareEmbedSurvey", () => {
tabs: { id: string; label: string; icon: LucideIcon }[];
activeId: string;
};
- expect(embedViewProps.tabs.length).toBe(4);
+ expect(embedViewProps.tabs.length).toBe(5);
expect(embedViewProps.tabs.find((tab) => tab.id === "app")).toBeUndefined();
+ expect(embedViewProps.tabs.find((tab) => tab.id === "dynamic-popup")).toBeDefined();
+ expect(embedViewProps.tabs.find((tab) => tab.id === "website-embed")).toBeDefined();
expect(embedViewProps.tabs[0].id).toBe("link");
expect(embedViewProps.activeId).toBe("link");
});
@@ -230,7 +232,9 @@ describe("ShareEmbedSurvey", () => {
activeId: string;
};
expect(embedViewProps.tabs.length).toBe(1);
- expect(embedViewProps.tabs[0].id).toBe("app");
+ expect(embedViewProps.tabs.find((tab) => tab.id === "app")).toBeDefined();
+ expect(embedViewProps.tabs.find((tab) => tab.id === "website-embed")).toBeUndefined();
+ expect(embedViewProps.tabs.find((tab) => tab.id === "dynamic-popup")).toBeUndefined();
expect(embedViewProps.activeId).toBe("app");
});
@@ -285,4 +289,32 @@ describe("ShareEmbedSurvey", () => {
linkTab = embedViewProps.tabs.find((tab) => tab.id === "link");
expect(linkTab?.label).toBe("environments.surveys.summary.single_use_links");
});
+
+ test("dynamic popup tab is only visible for link surveys", () => {
+ // Test link survey includes dynamic popup tab
+ render(
);
+ let embedViewProps = vi.mocked(mockShareViewComponent).mock.calls[0][0] as {
+ tabs: { id: string; label: string }[];
+ };
+ expect(embedViewProps.tabs.find((tab) => tab.id === "dynamic-popup")).toBeDefined();
+ cleanup();
+ vi.mocked(mockShareViewComponent).mockClear();
+
+ // Test web survey excludes dynamic popup tab
+ render(
);
+ embedViewProps = vi.mocked(mockShareViewComponent).mock.calls[0][0] as {
+ tabs: { id: string; label: string }[];
+ };
+ expect(embedViewProps.tabs.find((tab) => tab.id === "dynamic-popup")).toBeUndefined();
+ });
+
+ test("website-embed and dynamic-popup tabs replace old webpage tab", () => {
+ render(
);
+ const embedViewProps = vi.mocked(mockShareViewComponent).mock.calls[0][0] as {
+ tabs: { id: string; label: string }[];
+ };
+ expect(embedViewProps.tabs.find((tab) => tab.id === "webpage")).toBeUndefined();
+ expect(embedViewProps.tabs.find((tab) => tab.id === "website-embed")).toBeDefined();
+ expect(embedViewProps.tabs.find((tab) => tab.id === "dynamic-popup")).toBeDefined();
+ });
});
diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/share-survey-modal.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/share-survey-modal.tsx
index f960272e9a..3188f284cd 100644
--- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/share-survey-modal.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/share-survey-modal.tsx
@@ -1,9 +1,10 @@
"use client";
import { getSurveyUrl } from "@/modules/analysis/utils";
-import { Dialog, DialogContent } from "@/modules/ui/components/dialog";
+import { Dialog, DialogContent, DialogTitle } from "@/modules/ui/components/dialog";
+import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
import { useTranslate } from "@tolgee/react";
-import { Code2Icon, LinkIcon, MailIcon, SmartphoneIcon, UserIcon } from "lucide-react";
+import { Code2Icon, LinkIcon, MailIcon, SmartphoneIcon, SquareStack, UserIcon } from "lucide-react";
import { useEffect, useMemo, useState } from "react";
import { logger } from "@formbricks/logger";
import { TSegment } from "@formbricks/types/segment";
@@ -18,7 +19,8 @@ enum ShareViewType {
LINK = "link",
PERSONAL_LINKS = "personal-links",
EMAIL = "email",
- WEBPAGE = "webpage",
+ WEBSITE_EMBED = "website-embed",
+ DYNAMIC_POPUP = "dynamic-popup",
APP = "app",
}
@@ -67,10 +69,15 @@ export const ShareSurveyModal = ({
icon: MailIcon,
},
{
- id: ShareViewType.WEBPAGE,
+ id: ShareViewType.WEBSITE_EMBED,
label: t("environments.surveys.summary.embed_on_website"),
icon: Code2Icon,
},
+ {
+ id: ShareViewType.DYNAMIC_POPUP,
+ label: t("environments.surveys.summary.dynamic_popup"),
+ icon: SquareStack,
+ },
],
[t, isSingleUseLinkSurvey]
);
@@ -126,7 +133,10 @@ export const ShareSurveyModal = ({
return (
-
+
+
+
{showView === "start" ? (
({
+ Alert: (props: { variant?: string; size?: string; children: React.ReactNode }) => (
+
+ {props.children}
+
+ ),
+ AlertButton: (props: { asChild?: boolean; children: React.ReactNode }) => (
+
+ {props.children}
+
+ ),
+ AlertDescription: (props: { children: React.ReactNode }) => (
+ {props.children}
+ ),
+ AlertTitle: (props: { children: React.ReactNode }) => {props.children}
,
+}));
+
+vi.mock("@/modules/ui/components/button", () => ({
+ Button: (props: { variant?: string; asChild?: boolean; children: React.ReactNode }) => (
+
+ {props.children}
+
+ ),
+}));
+
+vi.mock("@/modules/ui/components/typography", () => ({
+ H4: (props: { children: React.ReactNode }) => {props.children}
,
+}));
+
+vi.mock("@tolgee/react", () => ({
+ useTranslate: () => ({
+ t: (key: string) => key,
+ }),
+}));
+
+vi.mock("lucide-react", () => ({
+ ExternalLinkIcon: (props: { className?: string }) => (
+
+ ExternalLinkIcon
+
+ ),
+}));
+
+// Mock Next.js Link
+vi.mock("next/link", () => ({
+ default: (props: { href: string; target?: string; className?: string; children: React.ReactNode }) => (
+
+ {props.children}
+
+ ),
+}));
+
+describe("DynamicPopupTab", () => {
+ afterEach(() => {
+ cleanup();
+ });
+
+ const defaultProps = {
+ environmentId: "env-123",
+ surveyId: "survey-123",
+ };
+
+ test("renders alert with correct props", () => {
+ render(
+
+ {title}
+
+ {readDocsText}
+
+
+ );
+};
+
+export const DynamicPopupTab = ({ environmentId, surveyId }: DynamicPopupTabProps) => {
+ const { t } = useTranslate();
+
+ return (
+
+
+ {t("environments.surveys.summary.dynamic_popup.alert_title")}
+
+ {t("environments.surveys.summary.dynamic_popup.alert_description")}
+
+
+
+
+
+
+
{t("environments.surveys.summary.dynamic_popup.title")}
+
+
{props.children} ,
+ Small: (props: { color?: string; margin?: string; children: React.ReactNode }) => (
+
+ {props.children}
+
+ ),
+}));
+
+describe("TabContainer", () => {
+ afterEach(() => {
+ cleanup();
+ });
+
+ const defaultProps = {
+ title: "Test Tab Title",
+ description: "Test tab description",
+ children: Tab content
,
+ };
+
+ test("renders title with correct props", () => {
+ render(
+
+
{title}
+
+ {description}
+
+
+ {children}
+
+ {props.title}
+ {props.description}
+ {props.customContainerClass && (
+ {props.customContainerClass}
+ )}
+
+ ),
+}));
+
+vi.mock("@/modules/ui/components/button", () => ({
+ Button: (props: {
+ title?: string;
+ "aria-label"?: string;
+ onClick?: () => void;
+ children: React.ReactNode;
+ type?: "button" | "submit" | "reset";
+ }) => (
+
+ {props.children}
+
+ ),
+}));
+
+vi.mock("@/modules/ui/components/code-block", () => ({
+ CodeBlock: (props: {
+ language: string;
+ showCopyToClipboard: boolean;
+ noMargin?: boolean;
+ children: string;
+ }) => (
+
+
{props.language}
+
{props.showCopyToClipboard.toString()}
+ {props.noMargin &&
true }
+
{props.children}
+
CopyIcon
,
+}));
+
+// Mock react-hot-toast
+vi.mock("react-hot-toast", () => ({
+ default: {
+ success: vi.fn(),
+ },
+}));
+
+// Mock clipboard API
+Object.assign(navigator, {
+ clipboard: {
+ writeText: vi.fn().mockImplementation(() => Promise.resolve()),
+ },
+});
+
+describe("WebsiteEmbedTab", () => {
+ afterEach(() => {
+ cleanup();
+ vi.clearAllMocks();
+ });
+
+ const defaultProps = {
+ surveyUrl: "https://example.com/survey/123",
+ };
+
+ test("renders all components correctly", () => {
+ render( {
+ render(
+
+
`;
+
+ return (
+ <>
+
+
+ {iframeCode}
+
+
+ {
+ navigator.clipboard.writeText(iframeCode);
+ toast.success(t("environments.surveys.summary.embed_code_copied_to_clipboard"));
+ }}>
+ {t("common.copy_code")}
+
+
+ );
+};
diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedModal/WebsiteTab.test.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedModal/WebsiteTab.test.tsx
deleted file mode 100644
index 9902d1bb3b..0000000000
--- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedModal/WebsiteTab.test.tsx
+++ /dev/null
@@ -1,254 +0,0 @@
-import { cleanup, render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import toast from "react-hot-toast";
-import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
-import { WebsiteTab } from "./WebsiteTab";
-
-// Mock child components and hooks
-const mockAdvancedOptionToggle = vi.fn();
-vi.mock("@/modules/ui/components/advanced-option-toggle", () => ({
- AdvancedOptionToggle: (props: any) => {
- mockAdvancedOptionToggle(props);
- return (
-
- {props.title}
-
- );
- },
-}));
-
-vi.mock("@/modules/ui/components/button", () => ({
- Button: ({ children, onClick, ...props }: any) => (
-
- {children}
-
- ),
-}));
-
-const mockCodeBlock = vi.fn();
-vi.mock("@/modules/ui/components/code-block", () => ({
- CodeBlock: (props: any) => {
- mockCodeBlock(props);
- return (
-
- {props.children}
-
- );
- },
-}));
-
-const mockOptionsSwitch = vi.fn();
-vi.mock("@/modules/ui/components/options-switch", () => ({
- OptionsSwitch: (props: any) => {
- mockOptionsSwitch(props);
- return (
-
- {props.options.map((opt: { value: string; label: string }) => (
- props.handleOptionChange(opt.value)}>
- {opt.label}
-
- ))}
-
- );
- },
-}));
-
-vi.mock("lucide-react", () => ({
- CopyIcon: () =>
,
-}));
-
-vi.mock("next/link", () => ({
- default: ({ children, href, target }: { children: React.ReactNode; href: string; target?: string }) => (
-
- {children}
-
- ),
-}));
-
-const mockWriteText = vi.fn();
-Object.defineProperty(navigator, "clipboard", {
- value: {
- writeText: mockWriteText,
- },
- configurable: true,
-});
-
-const surveyUrl = "https://app.formbricks.com/s/survey123";
-const environmentId = "env456";
-
-describe("WebsiteTab", () => {
- afterEach(() => {
- cleanup();
- vi.clearAllMocks();
- });
-
- test("renders OptionsSwitch and StaticTab by default", () => {
- render( \n \n
`;
- const normalizedBaseCode = `
`;
-
- const formattedEmbedCode = ` \n \n
`;
- const normalizedEmbedCode = `
`;
-
- test("renders correctly with initial iframe code and embed mode toggle", () => {
- render(
-
setSelectedTab(value)}
- />
-
-
- {selectedTab === "static" ? (
-
- ) : (
-
- )}
-
-
-
`;
-
- return (
-
-
-
-
{
- navigator.clipboard.writeText(iframeCode);
- toast.success(t("environments.surveys.summary.embed_code_copied_to_clipboard"));
- }}>
- {t("common.copy_code")}
-
-
-
-
- {iframeCode}
-
-
-
-
-
- {t("environments.surveys.summary.embed_pop_up_survey_title")}
-
-
-
- {t("common.follow_these")}{" "}
-
-
- {t("environments.surveys.summary.make_sure_the_survey_type_is_set_to")}{" "}
- {t("common.website_survey")}
-
- {t("environments.surveys.summary.define_when_and_where_the_survey_should_pop_up")}
-
-
-
-
-
-
),
}));
-vi.mock("./WebsiteTab", () => ({
- WebsiteTab: (props: { surveyUrl: string; environmentId: string }) => (
-
- WebsiteTab Content for {props.surveyUrl} in {props.environmentId}
+vi.mock("./WebsiteEmbedTab", () => ({
+ WebsiteEmbedTab: (props: { surveyUrl: string }) => (
+
WebsiteEmbedTab Content for {props.surveyUrl}
+ ),
+}));
+vi.mock("./DynamicPopupTab", () => ({
+ DynamicPopupTab: (props: { environmentId: string; surveyId: string }) => (
+
+ DynamicPopupTab Content for {props.surveyId} in {props.environmentId}
+
+ ),
+}));
+vi.mock("./TabContainer", () => ({
+ TabContainer: (props: { children: React.ReactNode; title: string; description: string }) => (
+
+
{props.title}
+
{props.description}
+ {props.children}
),
}));
vi.mock("./personal-links-tab", () => ({
- PersonalLinksTab: (props: { segments: any[]; surveyId: string; environmentId: string }) => (
+ PersonalLinksTab: (props: { surveyId: string; environmentId: string }) => (
PersonalLinksTab Content for {props.surveyId} in {props.environmentId}
@@ -39,7 +53,7 @@ vi.mock("./personal-links-tab", () => ({
}));
vi.mock("@/modules/ui/components/upgrade-prompt", () => ({
- UpgradePrompt: (props: { title: string; description: string; buttons: any[] }) => (
+ UpgradePrompt: (props: { title: string; description: string }) => (
{props.title} - {props.description}
@@ -53,6 +67,7 @@ vi.mock("lucide-react", () => ({
LinkIcon: () =>
LinkIcon
,
GlobeIcon: () =>
GlobeIcon
,
SmartphoneIcon: () =>
SmartphoneIcon
,
+ CheckCircle2Icon: () =>
CheckCircle2Icon
,
AlertCircle: ({ className }: { className?: string }) => (
AlertCircle
@@ -132,7 +147,8 @@ vi.mock("@/lib/cn", () => ({
const mockTabs = [
{ id: "email", label: "Email", icon: () =>
},
- { id: "webpage", label: "Web Page", icon: () =>
},
+ { id: "website-embed", label: "Website Embed", icon: () =>
},
+ { id: "dynamic-popup", label: "Dynamic Popup", icon: () =>
},
{ id: "link", label: "Link", icon: () =>
},
{ id: "app", label: "App", icon: () =>
},
];
@@ -268,9 +284,9 @@ describe("ShareView", () => {
test("calls setActiveId when a tab is clicked (desktop)", async () => {
render(
);
- const webpageTabButton = screen.getByLabelText("Web Page");
- await userEvent.click(webpageTabButton);
- expect(defaultProps.setActiveId).toHaveBeenCalledWith("webpage");
+ const websiteEmbedTabButton = screen.getByLabelText("Website Embed");
+ await userEvent.click(websiteEmbedTabButton);
+ expect(defaultProps.setActiveId).toHaveBeenCalledWith("website-embed");
});
test("renders EmailTab when activeId is 'email'", () => {
@@ -281,11 +297,21 @@ describe("ShareView", () => {
).toBeInTheDocument();
});
- test("renders WebsiteTab when activeId is 'webpage'", () => {
- render(
);
- expect(screen.getByTestId("website-tab")).toBeInTheDocument();
+ test("renders WebsiteEmbedTab when activeId is 'website-embed'", () => {
+ render(
);
+ expect(screen.getByTestId("tab-container")).toBeInTheDocument();
+ expect(screen.getByTestId("website-embed-tab")).toBeInTheDocument();
+ expect(screen.getByText(`WebsiteEmbedTab Content for ${defaultProps.surveyUrl}`)).toBeInTheDocument();
+ });
+
+ test("renders DynamicPopupTab when activeId is 'dynamic-popup'", () => {
+ render(
);
+ expect(screen.getByTestId("tab-container")).toBeInTheDocument();
+ expect(screen.getByTestId("dynamic-popup-tab")).toBeInTheDocument();
expect(
- screen.getByText(`WebsiteTab Content for ${defaultProps.surveyUrl} in ${defaultProps.environmentId}`)
+ screen.getByText(
+ `DynamicPopupTab Content for ${defaultProps.survey.id} in ${defaultProps.environmentId}`
+ )
).toBeInTheDocument();
});
@@ -316,7 +342,7 @@ describe("ShareView", () => {
render(
);
// Get responsive buttons - these are Button components containing icons
- const responsiveButtons = screen.getAllByTestId("webpage-tab-icon");
+ const responsiveButtons = screen.getAllByTestId("website-embed-tab-icon");
// The responsive button should be the one inside the md:hidden container
const responsiveButton = responsiveButtons
.find((icon) => {
@@ -327,7 +353,7 @@ describe("ShareView", () => {
if (responsiveButton) {
await userEvent.click(responsiveButton);
- expect(defaultProps.setActiveId).toHaveBeenCalledWith("webpage");
+ expect(defaultProps.setActiveId).toHaveBeenCalledWith("website-embed");
}
});
@@ -339,9 +365,9 @@ describe("ShareView", () => {
expect(emailTabButton).toHaveClass("font-medium");
expect(emailTabButton).toHaveClass("text-slate-900");
- const webpageTabButton = screen.getByLabelText("Web Page");
- expect(webpageTabButton).not.toHaveClass("bg-slate-100");
- expect(webpageTabButton).not.toHaveClass("font-medium");
+ const websiteEmbedTabButton = screen.getByLabelText("Website Embed");
+ expect(websiteEmbedTabButton).not.toHaveClass("bg-slate-100");
+ expect(websiteEmbedTabButton).not.toHaveClass("font-medium");
});
test("applies active styles to the active tab (responsive)", () => {
@@ -361,16 +387,18 @@ describe("ShareView", () => {
expect(responsiveEmailButton).toHaveClass("bg-white text-slate-900 shadow-sm hover:bg-white");
}
- const responsiveWebpageButtons = screen.getAllByTestId("webpage-tab-icon");
- const responsiveWebpageButton = responsiveWebpageButtons
+ const responsiveWebsiteEmbedButtons = screen.getAllByTestId("website-embed-tab-icon");
+ const responsiveWebsiteEmbedButton = responsiveWebsiteEmbedButtons
.find((icon) => {
const button = icon.closest("button");
return button && button.getAttribute("data-variant") === "ghost";
})
?.closest("button");
- if (responsiveWebpageButton) {
- expect(responsiveWebpageButton).toHaveClass("border-transparent text-slate-700 hover:text-slate-900");
+ if (responsiveWebsiteEmbedButton) {
+ expect(responsiveWebsiteEmbedButton).toHaveClass(
+ "border-transparent text-slate-700 hover:text-slate-900"
+ );
}
});
});
diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedModal/share-view.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedModal/share-view.tsx
index 955e42c08b..8163c0ce23 100644
--- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedModal/share-view.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedModal/share-view.tsx
@@ -1,5 +1,7 @@
"use client";
+import { DynamicPopupTab } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedModal/DynamicPopupTab";
+import { TabContainer } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedModal/TabContainer";
import { cn } from "@/lib/cn";
import { Button } from "@/modules/ui/components/button";
import {
@@ -15,6 +17,7 @@ import {
} from "@/modules/ui/components/sidebar";
import { TooltipRenderer } from "@/modules/ui/components/tooltip";
import { Small } from "@/modules/ui/components/typography";
+import { useTranslate } from "@tolgee/react";
import { useEffect, useState } from "react";
import { TSegment } from "@formbricks/types/segment";
import { TSurvey } from "@formbricks/types/surveys/types";
@@ -22,7 +25,7 @@ import { TUserLocale } from "@formbricks/types/user";
import { AppTab } from "./AppTab";
import { EmailTab } from "./EmailTab";
import { LinkTab } from "./LinkTab";
-import { WebsiteTab } from "./WebsiteTab";
+import { WebsiteEmbedTab } from "./WebsiteEmbedTab";
import { PersonalLinksTab } from "./personal-links-tab";
interface ShareViewProps {
@@ -57,6 +60,7 @@ export const ShareView = ({
isFormbricksCloud,
}: ShareViewProps) => {
const [isLargeScreen, setIsLargeScreen] = useState(true);
+ const { t } = useTranslate();
useEffect(() => {
const checkScreenSize = () => {
@@ -74,8 +78,22 @@ export const ShareView = ({
switch (activeId) {
case "email":
return
;
- case "webpage":
- return
;
+ case "website-embed":
+ return (
+
+
+ );
+ case "dynamic-popup":
+ return (
+
+
+ );
case "link":
return (
{
const alertElement = screen.getByRole("alert");
expect(alertElement).toHaveClass("my-custom-class");
});
+
+ test("applies correct styles to anchor tags inside alert variants", () => {
+ render(
+
+ Info Alert with Link
+ This alert has a link
+
+ Test Link
+
+
+ );
+
+ const alertElement = screen.getByRole("alert");
+ expect(alertElement).toHaveClass("text-info-foreground");
+ expect(alertElement).toHaveClass("border-info/50");
+
+ const linkElement = screen.getByRole("link", { name: "Test Link" });
+ expect(linkElement).toBeInTheDocument();
+ });
+
+ test("applies correct styles to anchor tags in AlertButton with asChild", () => {
+ render(
+
+ Error Alert
+ This alert has a button link
+
+ Take Action
+
+
+ );
+
+ const alertElement = screen.getByRole("alert");
+ expect(alertElement).toHaveClass("text-error-foreground");
+ expect(alertElement).toHaveClass("border-error/50");
+
+ const linkElement = screen.getByRole("link", { name: "Take Action" });
+ expect(linkElement).toBeInTheDocument();
+ });
+
+ test("applies styles for all alert variants with anchor tags", () => {
+ const variants = ["error", "warning", "info", "success"] as const;
+
+ variants.forEach((variant) => {
+ const { unmount } = render(
+
+ {variant} Alert
+ Alert with anchor tag
+
+ Link
+
+
+ );
+
+ const alertElement = screen.getByRole("alert");
+ expect(alertElement).toHaveClass(`text-${variant}-foreground`);
+ expect(alertElement).toHaveClass(`border-${variant}/50`);
+
+ const linkElement = screen.getByTestId(`${variant}-link`);
+ expect(linkElement).toBeInTheDocument();
+
+ unmount();
+ });
+ });
});
diff --git a/apps/web/modules/ui/components/alert/index.tsx b/apps/web/modules/ui/components/alert/index.tsx
index 7f84e11968..b40ec6f95d 100644
--- a/apps/web/modules/ui/components/alert/index.tsx
+++ b/apps/web/modules/ui/components/alert/index.tsx
@@ -26,12 +26,12 @@ const alertVariants = cva("relative w-full rounded-lg border [&>svg]:size-4", {
variant: {
default: "text-foreground border-border",
error:
- "text-error-foreground [&>svg]:text-error border-error/50 [&_button]:bg-error-background [&_button]:text-error-foreground [&_button:hover]:bg-error-background-muted",
+ "text-error-foreground [&>svg]:text-error border-error/50 [&_button]:bg-error-background [&_button]:text-error-foreground [&_button:hover]:bg-error-background-muted [&_a]:bg-error-background [&_a]:text-error-foreground [&_a:hover]:bg-error-background-muted",
warning:
- "text-warning-foreground [&>svg]:text-warning border-warning/50 [&_button]:bg-warning-background [&_button]:text-warning-foreground [&_button:hover]:bg-warning-background-muted",
- info: "text-info-foreground [&>svg]:text-info border-info/50 [&_button]:bg-info-background [&_button]:text-info-foreground [&_button:hover]:bg-info-background-muted",
+ "text-warning-foreground [&>svg]:text-warning border-warning/50 [&_button]:bg-warning-background [&_button]:text-warning-foreground [&_button:hover]:bg-warning-background-muted [&_a]:bg-warning-background [&_a]:text-warning-foreground [&_a:hover]:bg-warning-background-muted",
+ info: "text-info-foreground [&>svg]:text-info border-info/50 [&_button]:bg-info-background [&_button]:text-info-foreground [&_button:hover]:bg-info-background-muted [&_a]:bg-info-background [&_a]:text-info-foreground [&_a:hover]:bg-info-background-muted",
success:
- "text-success-foreground [&>svg]:text-success border-success/50 [&_button]:bg-success-background [&_button]:text-success-foreground [&_button:hover]:bg-success-background-muted",
+ "text-success-foreground [&>svg]:text-success border-success/50 [&_button]:bg-success-background [&_button]:text-success-foreground [&_button:hover]:bg-success-background-muted [&_a]:bg-success-background [&_a]:text-success-foreground [&_a:hover]:bg-success-background-muted",
},
size: {
default:
diff --git a/apps/web/modules/ui/components/code-block/index.test.tsx b/apps/web/modules/ui/components/code-block/index.test.tsx
index 13a7cb76e9..3f60eb73ab 100644
--- a/apps/web/modules/ui/components/code-block/index.test.tsx
+++ b/apps/web/modules/ui/components/code-block/index.test.tsx
@@ -118,4 +118,39 @@ describe("CodeBlock", () => {
expect(codeElement).toHaveClass(`language-${language}`);
expect(codeElement).toHaveClass(customCodeClass);
});
+
+ test("applies no margin class when noMargin is true", () => {
+ const codeSnippet = "const test = 'no margin';";
+ const language = "javascript";
+ render(
+
+ {codeSnippet}
+
+ );
+
+ const containerElement = screen.getByText(codeSnippet).closest("div");
+ expect(containerElement).not.toHaveClass("mt-4");
+ });
+
+ test("applies default margin class when noMargin is false", () => {
+ const codeSnippet = "const test = 'with margin';";
+ const language = "javascript";
+ render(
+
+ {codeSnippet}
+
+ );
+
+ const containerElement = screen.getByText(codeSnippet).closest("div");
+ expect(containerElement).toHaveClass("mt-4");
+ });
+
+ test("applies default margin class when noMargin is undefined", () => {
+ const codeSnippet = "const test = 'default margin';";
+ const language = "javascript";
+ render({codeSnippet} );
+
+ const containerElement = screen.getByText(codeSnippet).closest("div");
+ expect(containerElement).toHaveClass("mt-4");
+ });
});
diff --git a/apps/web/modules/ui/components/code-block/index.tsx b/apps/web/modules/ui/components/code-block/index.tsx
index be1cefccf7..2be2420510 100644
--- a/apps/web/modules/ui/components/code-block/index.tsx
+++ b/apps/web/modules/ui/components/code-block/index.tsx
@@ -15,6 +15,7 @@ interface CodeBlockProps {
customCodeClass?: string;
customEditorClass?: string;
showCopyToClipboard?: boolean;
+ noMargin?: boolean;
}
export const CodeBlock = ({
@@ -23,6 +24,7 @@ export const CodeBlock = ({
customEditorClass = "",
customCodeClass = "",
showCopyToClipboard = true,
+ noMargin = false,
}: CodeBlockProps) => {
const { t } = useTranslate();
useEffect(() => {
@@ -30,7 +32,7 @@ export const CodeBlock = ({
}, [children]);
return (
-
+
{showCopyToClipboard && (
{
expect(h3Element).toBeInTheDocument();
expect(h3Element).toHaveTextContent("Heading 3");
- expect(h3Element?.className).toContain("text-2xl");
- expect(h3Element?.className).toContain("font-semibold");
+ expect(h3Element?.className).toContain("text-lg");
+ expect(h3Element?.className).toContain("tracking-tight");
expect(h3Element?.className).toContain("text-slate-800");
});
@@ -49,8 +49,8 @@ describe("Typography Components", () => {
expect(h4Element).toBeInTheDocument();
expect(h4Element).toHaveTextContent("Heading 4");
- expect(h4Element?.className).toContain("text-xl");
- expect(h4Element?.className).toContain("font-semibold");
+ expect(h4Element?.className).toContain("text-base");
+ expect(h4Element?.className).toContain("tracking-tight");
expect(h4Element?.className).toContain("text-slate-800");
});
@@ -75,12 +75,11 @@ describe("Typography Components", () => {
test("renders Large correctly", () => {
const { container } = render(Large text );
- const divElement = container.querySelector("div");
+ const pElement = container.querySelector("p");
- expect(divElement).toBeInTheDocument();
- expect(divElement).toHaveTextContent("Large text");
- expect(divElement?.className).toContain("text-lg");
- expect(divElement?.className).toContain("font-semibold");
+ expect(pElement).toBeInTheDocument();
+ expect(pElement).toHaveTextContent("Large text");
+ expect(pElement?.className).toContain("text-lg");
});
test("renders Small correctly", () => {
@@ -90,6 +89,8 @@ describe("Typography Components", () => {
expect(pElement).toBeInTheDocument();
expect(pElement).toHaveTextContent("Small text");
expect(pElement?.className).toContain("text-sm");
+ expect(pElement?.className).toContain("leading-none");
+ expect(pElement?.className).toContain("text-slate-800");
expect(pElement?.className).toContain("font-medium");
});
diff --git a/apps/web/modules/ui/components/typography/index.tsx b/apps/web/modules/ui/components/typography/index.tsx
index e003fa89ac..f2170064d3 100644
--- a/apps/web/modules/ui/components/typography/index.tsx
+++ b/apps/web/modules/ui/components/typography/index.tsx
@@ -1,4 +1,5 @@
import { cn } from "@/modules/ui/lib/utils";
+import { cva } from "class-variance-authority";
import React, { forwardRef } from "react";
const H1 = forwardRef>((props, ref) => {
@@ -40,7 +41,7 @@ const H3 = forwardRef
+ className={cn("scroll-m-20 text-lg tracking-tight text-slate-800", props.className)}>
{props.children}
);
@@ -54,7 +55,7 @@ const H4 = forwardRef
+ className={cn("scroll-m-20 text-base tracking-tight text-slate-800", props.className)}>
{props.children}
);
@@ -87,18 +88,53 @@ export { P };
const Large = forwardRef>((props, ref) => {
return (
-
+
);
});
Large.displayName = "Large";
export { Large };
-const Small = forwardRef>((props, ref) => {
+const Base = forwardRef>((props, ref) => {
return (
-
+
+ {props.children}
+
+ );
+});
+
+Base.displayName = "Base";
+export { Base };
+
+const smallVariants = cva("text-sm leading-none", {
+ variants: {
+ color: {
+ default: "text-slate-800 font-medium",
+ muted: "text-slate-500",
+ },
+ margin: {
+ default: "mt-0",
+ headerDescription: "mt-1",
+ },
+ },
+});
+
+interface SmallProps extends React.HTMLAttributes {
+ color?: "default" | "muted";
+ margin?: "default" | "headerDescription";
+}
+
+const Small = forwardRef((props, ref) => {
+ return (
+
{props.children}
);
diff --git a/docs/images/xm-and-surveys/surveys/link-surveys/embed-surveys/embed-mode-toggle.webp b/docs/images/xm-and-surveys/surveys/link-surveys/embed-surveys/embed-mode-toggle.webp
index 661e76177b151932e7992b88152d2074d04e3ccf..2c43fe71acaad70d70ecc244eb54ffdd16a69bdf 100644
GIT binary patch
literal 18744
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